/* ==========================================================================================
   Startseite -- Gestaltung der Standortkacheln (contents/homepage/standorte.blade.php)
   AP-12, Schritt 7 (P-70, P-71)

   REGEL FUER DIESE DATEI: Jeder Selektor beginnt mit .hp-
   ------------------------------------------------------------------------------------------
   Anders als verteilerseite.css und ueber-uns.css laeuft diese Datei NEBEN einer vollstaendigen
   Seitengestaltung: die Startseite laedt weiterhin home.css, collection.css, swiper.css und
   aos.css, dazu projektweit bootstrap.min.css, global.css, header.css und footer.css. Ohne das
   .hp--Praefix traefen Elementregeln (h2, h3, dl, dd, address ...) die uebrigen fuenf
   Abschnitte der Startseite gleich mit.

   EIGENE DATEI, KEINE SCSS-QUELLE -- so wie ueber-uns.css, verteilerseite.css und
   wholesale.css. Nicht in home.css/home.scss mischen und nicht ueber den Sammelbau erzeugen
   (Regel 10). home.css bleibt unveraendert; die alten .locationBox-Regeln stehen dort
   weiter, solange contents/homepage/stores.blade.php als Rueckweg liegen bleibt.

   EINBINDUNG mit Kennung: <link ... href="assets/css/startseite.css?v=1.0">. Die Assets werden
   als `immutable` ausgeliefert -- ohne neue Kennung saehe ein Jahr an Wiederkehrern die alte
   Datei.

   GROESSEN: in vw, wie der Rest der Startseite. global.css setzt body auf 1.4vw (unter 1024px
   auf 16px); die Kacheln uebernehmen die Staffelung der abgeloesten .locationBox, damit der
   Abschnitt zwischen Designer-Block und Fusszeile nicht aus der Reihe faellt. Auf dem Telefon
   greifen feste px-Werte.

   SCHRIFT: Overpass, wie im uebrigen Projekt. Overpass laeuft rund 6,4 % breiter als Jost --
   deshalb steht in dieser Datei KEINE feste px-Breite fuer Text. Die vier Spalten sind 1fr.
   ========================================================================================== */

.hp-standorte {
    --hp-ink: #363636;
    --hp-line: #ddd;
    --hp-muted: #6E6A66;

    /* Zwei Groessen, an drei Stellen gestaffelt -- uebernommen aus der abgeloesten
       .locationBox, damit der Abschnitt im Schriftbild der Startseite bleibt. */
    --hp-titel: 1.15vw;
    --hp-text: 0.78vw;
}

/* ---------- Ruecksetzungen: nur innerhalb von .hp-standorte ----------
   DIE RESETS STEHEN IN :where(), UND ZWAR ABSICHTLICH.
   ------------------------------------------------------------------------------------------
   Als `.hp-standorte h3, ...` geschrieben haetten sie die Spezifitaet (0,1,1) und schluegen
   damit JEDE einklassige Regel (0,1,0) auf denselben Elementen -- unabhaengig von der
   Reihenfolge im Stylesheet. Bei store-seite.css hat genau das zweimal sichtbare Fehler
   verursacht (schwarze Schrift auf schwarzer Schaltflaeche, nicht ankommende Abstaende).

   `:where()` zaehlt nicht zur Spezifitaet. `:where(.hp-standorte) h3` liegt bei (0,0,1), und
   jede Klassenregel gewinnt von selbst. Unterstuetzt seit Firefox 78, Safari 14 und Chrome 88. */
:where(.hp-standorte) h2,
:where(.hp-standorte) h3,
:where(.hp-standorte) p,
:where(.hp-standorte) dl,
:where(.hp-standorte) dt,
:where(.hp-standorte) dd {
    margin: 0;
    padding: 0;
}

/* bootstrap.min.css faerbt `a` blau und ist vor dieser Datei geladen -- gleiche Spezifitaet
   (0,0,1), spaeter im Dokument, also gewinnt diese Regel. */
:where(.hp-standorte) a {
    color: inherit;
    text-decoration: none;
}

/* address steht projektweit kursiv (Bootstrap-Reboot setzt font-style: normal, global.css
   nicht -- der Browser-Vorgabewert ist kursiv). Hier ist es eine Anschrift, kein Zitat. */
:where(.hp-standorte) address {
    margin: 0;
    font-style: normal;
}

/* ---------- Ueberschrift des Abschnitts ---------- */
.hp-standorte-kopf {
    text-align: center;
    margin-bottom: 2vw;
}

/* ⚠ DIE GROESSEN KOMMEN AUS home.css, NICHT AUS EIGENEM ERMESSEN.
   Am 2026-08-17 gemeldet und nachgemessen: die neuen Abschnitte standen kleiner als die
   alten. Ueberschrift 1,8vw gegen 3vw der `.sTitle`, Fliesstext 0,78vw gegen die 1,4vw
   Grundschrift aus global.css -- rund die Haelfte. Der Bestand ist der Massstab; die vier
   Abschnitte sollen wie eine Seite wirken.
   Diese Regel entspricht `.sTitle h1` (3vw, `line-height: normal`, auf dem Telefon 30px). */
.hp-standorte-kopf h2 {
    text-transform: uppercase;
    font-size: 3vw;
    letter-spacing: 2px;
    line-height: normal;
}

.hp-standorte-kopf h2:after {
    content: "";
    background: var(--hp-ink);
    width: 40px;
    height: 1px;
    display: block;
    margin: 1rem auto 0;
}

/* Einleitungstext ueber den Kacheln (seit der Textlieferung vom 2026-08-17).
   Schmaler als die Tafel -- Fliesstext ueber vier Kachelbreiten liest sich nicht. Die
   Begrenzung steht NICHT in `ch`: die Einheit ist schriftabhaengig, und Overpass laeuft rund
   6,4 % breiter als Jost. */
/* KEINE eigene Schriftgroesse und keine eigene Zeilenhoehe: der Text erbt die Grundschrift
   aus global.css (1,4vw, unter 1024px 16px) -- genau wie der Willkommen- und der
   Designer-Text, die ebenfalls keine eigene Regel haben. Wer hier wieder eine setzt, laesst
   den Abschnitt gegenueber dem Bestand schrumpfen. */
.hp-standorte-text {
    max-width: 46vw;
    margin: 1.2vw auto 0;
    color: var(--hp-ink);
}

/* ---------- Die Tafel ----------
   Weisser Grund mit dem Schatten der abgeloesten .locationBox -- der Abschnitt soll sich nicht
   veraendert anfuehlen, nur richtig werden. */
.hp-liste {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 3vw;
    background: #fff;
    box-shadow: 0 0 7px rgba(0, 0, 0, .15);
    padding: 3vw 1.4vw;
    color: var(--hp-ink);
}

/* ---------- Eine Kachel ---------- */
.hp-ort {
    display: flex;
    flex-direction: column;
    padding: 0 1.6vw;
    font-size: var(--hp-text);
    line-height: 1.7;
}

/* Die Trennlinien sitzen LINKS und nicht rechts, und sie richten sich nach der Stelle in der
   Zeile, nicht nach der Stelle in der Liste: bei vier Spalten traegt jede Kachel ausser der
   ersten jeder Zeile eine Linie. Mit `:last-child` waere ein fuenfter Eintrag -- den die
   Redaktion jederzeit anlegen kann -- eine Linie am linken Rand der zweiten Zeile.
   Das Polster steht beidseitig, damit die Linie mittig zwischen den Kacheln liegt; die alte
   .locationBox hatte 2vw nur auf einer Seite. */
.hp-ort:not(:nth-child(4n+1)) {
    border-left: 1px solid var(--hp-line);
}

/* ---------- Kopf der Kachel ---------- */
.hp-ort-kopf {
    margin-bottom: 1rem;
}

/* Der 40-px-Strich gehoert unter den ganzen Kopf, nicht unter die Ueberschrift: sonst stuende
   das Land unterhalb der Trennlinie und laese wie der Anfang der Anschrift. */
.hp-ort-kopf:after {
    content: "";
    background: var(--hp-ink);
    width: 40px;
    height: 1px;
    display: block;
    margin: .5rem 0 0;
}

.hp-ort-stadt {
    font-size: var(--hp-titel);
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: normal;
    /* KEIN white-space: nowrap. Die alte .locationBox hatte es; dort standen die Namen aus der
       API ("Sima Couture Duisburg"), die nie umbrachen, weil sie ueber den Rand liefen. Die
       Stadtnamen kommen jetzt aus der Redaktion und stehen in sechs Sprachen -- was nicht in
       eine Zeile passt, soll umbrechen und nicht aus der Kachel laufen. */
}

.hp-ort-stadt a:hover {
    color: var(--hp-muted);
}

.hp-ort-land {
    display: block;
    margin-top: .35rem;
    font-family: "Overpass-Medium", sans-serif;
    font-size: var(--hp-text);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hp-muted);
}

/* ---------- Anschrift und Telefon ---------- */
.hp-ort-anschrift {
    margin-bottom: 1rem;
}

/* Anschrift und Telefon stehen je auf eigener Zeile. Im Markup sind es zwei Geschwister ohne
   <br>; das Umbrechen gehoert in die Gestaltung, nicht in den Inhalt. */
.hp-ort-anschrift > * {
    display: block;
}

.hp-ort-anschrift a[href^="tel:"] {
    border-bottom: 1px solid var(--hp-line);
}

.hp-ort-anschrift a[href^="tel:"]:hover {
    border-bottom-color: var(--hp-ink);
}

/* Die verlinkte Anschrift ist mehrzeilig -- eine durchgehende Unterkante an jeder Zeile waere
   unruhig. Sie bleibt ohne Linie und faerbt sich beim Ueberfahren. */
a.hp-adresse:hover {
    color: var(--hp-muted);
}

/* ---------- Oeffnungszeiten ----------
   OHNE FESTE HOEHE. Die abgeloeste Fassung stand auf `height:110px; overflow:hidden` fuer die
   Anschrift und `130px` fuer die Zeiten -- was laenger war, wurde stumm abgeschnitten. Fuer
   Kacheln mit einem Verweis ist das nicht tragbar, und ein Standort mit vier Zeitzeilen
   (Muenchen) haette den vierten verloren. */
.hp-zeiten {
    margin-bottom: 1rem;
}

.hp-zeiten-titel {
    display: block;
    font-family: "Overpass-Medium", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hp-muted);
    margin-bottom: .35rem;
}

.hp-zeiten dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .1rem .9rem;
}

/* Die Tage und ihre Zeiten stehen paarweise in einem <div>; das Raster muss durch dieses <div>
   hindurchgreifen, sonst stuenden alle Paare untereinander statt in zwei Spalten. */
.hp-zeiten dl > div {
    display: contents;
}

.hp-zeiten dt {
    color: var(--hp-muted);
    white-space: nowrap;
}

/* Ziffern in gleicher Breite -- sonst tanzen 09:30 und 10:00 untereinander. */
.hp-zeiten dd {
    font-variant-numeric: tabular-nums;
}

.hp-hinweis {
    color: var(--hp-muted);
    margin-top: .4rem;
}

/* ---------- Fuss der Kachel ----------
   `margin-top:auto` schiebt die beiden Verweise an den unteren Rand: in allen vier Kacheln
   liegen sie damit auf einer Linie, auch wenn Paris drei und Muenchen vier Zeitzeilen traegt.
   Das leistet frueher die feste Hoehe -- nur eben durch Abschneiden. */
.hp-ort-fuss {
    margin-top: auto;
    padding-top: .4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
}

/* Antippflaeche: rund 40 px hoch bei 14 px Schrift, dazu 0,6 rem Abstand zur naechsten
   Schaltflaeche. Die 24 px aus WCAG 2.5.8 sind damit deutlich uebertroffen. Das Polster steht
   oben, damit die Unterlinie am Text bleibt und nicht 44 px darunter schwebt. */
.hp-ort-link {
    display: inline-block;
    padding: .8rem 0 .35rem;
    font-family: "Overpass-Medium", sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--hp-ink);
}

.hp-ort-link:hover {
    color: var(--hp-muted);
    border-bottom-color: var(--hp-muted);
}

/* Der Routen-Verweis uebernimmt das Aussehen der `.btns`-Schaltflaeche der abgeloesten
   .locationBox -- schwarz gefuellt, beim Ueberfahren umgekehrt. */
.hp-route {
    transition: .3s;
    display: inline-block;
    background: var(--hp-ink);
    border: 2px solid var(--hp-ink);
    color: #fff;
    padding: .5vw .8vw .35vw;
    line-height: 100%;
}

.hp-route:hover {
    background: #fff;
    color: var(--hp-ink);
}

/* ---------- Tastaturbedienung ---------- */
.hp-standorte :focus-visible {
    outline: 2px solid var(--hp-ink);
    outline-offset: 3px;
}

/* ==========================================================================================
   Umbrueche -- dieselben Schwellen wie die abgeloeste .locationBox (1500 / 1023 / 767).
   ========================================================================================== */

@media only screen and (max-width: 1500px) {
    .hp-standorte {
        --hp-titel: 1.3vw;
        --hp-text: .9vw;
    }
}

/* Zwei Spalten. Die Linien richten sich jetzt nach der zweiten statt nach der vierten Spalte;
   die Vierer-Regel wird vorher ausdruecklich zurueckgenommen -- beide Selektoren liegen bei
   (0,2,0), es entscheidet die Reihenfolge. */
@media only screen and (max-width: 1023px) {
    .hp-standorte {
        --hp-titel: 18px;
        --hp-text: 14px;
    }


    .hp-standorte-text {
        max-width: none;
        margin-top: 14px;
        padding: 0 20px;
    }

    .hp-liste {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px 40px;
        row-gap: 2rem;
    }

    .hp-ort {
        padding: 0 20px;
    }

    .hp-ort:not(:nth-child(4n+1)) {
        border-left: 0;
    }

    .hp-ort:not(:nth-child(2n+1)) {
        border-left: 1px solid var(--hp-line);
    }

    .hp-route {
        padding: 8px 15px;
    }
}

/* Eine Spalte. Aus der senkrechten Trennlinie wird eine waagerechte zwischen den Kacheln --
   `margin-top:auto` im Fuss laeuft hier ins Leere, weil jede Kachel ihre eigene Hoehe hat. */
@media only screen and (max-width: 767px) {
    /* 30px wie `.sTitle h1` in home.css. Die Schwelle ist 767px, nicht 1023px -- home.css
       schaltet die Ueberschriften genau dort um, und die vier Abschnitte sollen gemeinsam
       umbrechen, nicht nacheinander.

       ⚠ HIER STEHT NUR DER STANDORTBLOCK. `.hp-handel h2` hat mit dieser Regel bis zum
       2026-08-17 mitgehangen -- und ist nie angekommen: der Handelsabschnitt ist ein Nachtrag
       und steht weiter unten in dieser Datei, seine Basisregel `.hp-handel h2 { font-size: 3vw }`
       also HINTER dieser hier. Beide liegen bei (0,1,1); eine Medienabfrage erhoeht die
       Spezifitaet nicht, also entscheidet die Reihenfolge -- und die spaetere gewann. Auf dem
       Telefon stand die Ueberschrift damit bei 3vw = 11,7 px statt 30 px, kleiner als der
       Fliesstext darunter. Die 30px-Regel des Handelsabschnitts steht jetzt in dessen eigenem
       767px-Block am Dateiende, hinter seiner Basisregel.
       REGEL FUER NACHTRAEGE IN DIESER DATEI: Ein Abschnitt bringt seine eigenen Medienbloecke
       mit, unter seinen eigenen Basisregeln. Selektoren aus einem spaeteren Abschnitt nicht in
       einen frueheren Medienblock einhaengen. Nachgemessen mit
       `documentation/tools/miss-kaskade.py`. */
    .hp-standorte-kopf h2 {
        font-size: 30px;
    }

    .hp-liste {
        grid-template-columns: 1fr;
        padding: 20px;
        row-gap: 0;
    }

    .hp-ort {
        padding: 0;
    }

    .hp-ort:not(:nth-child(4n+1)),
    .hp-ort:not(:nth-child(2n+1)) {
        border-left: 0;
    }

    .hp-ort + .hp-ort {
        border-top: 1px solid var(--hp-line);
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
    .hp-standorte * {
        transition: none !important;
    }
}

/* ==========================================================================================
   Handelsabschnitt (contents/homepage/handel.blade.php)
   Nachtrag vom 2026-08-17 -- kam nach der Bestandsaufnahme dazu.

   Aufbau uebernommen aus dem Abschluss-Abschnitt der Verteilerseite. Auch hier gilt die
   Regel dieser Datei: jeder Selektor beginnt mit .hp-
   ========================================================================================== */

.hp-handel {
    --hp-ink: #363636;
    --hp-line: #ddd;
    --hp-muted: #6E6A66;
}

/* Die Ruecksetzungen stehen in :where() -- aus demselben Grund wie oben: so liegen sie bei
   (0,0,1) und jede Klassenregel gewinnt von selbst, unabhaengig von der Reihenfolge. */
:where(.hp-handel) h2,
:where(.hp-handel) p {
    margin: 0;
    padding: 0;
}

/* Schmaler als der Standortblock: Fliesstext ueber die volle Breite laesst sich nicht lesen.
   Die Begrenzung steht in `ch` NICHT -- die Einheit ist schriftabhaengig, und Overpass laeuft
   rund 6,4 % breiter als Jost. Stattdessen ein Anteil der Spalte. */
/* ⚠ DIE BEGRENZUNG SITZT AM TEXT, NICHT AM GANZEN ABSCHNITT.
   Zuerst stand `max-width: 46vw` hier -- damit lief auch die Ueberschrift durch die schmale
   Spalte. Bei 3vw gemessen (tools/ttfmess.py, Overpass, Versalien, 2px Sperrsatz): die
   Ueberschrift braucht je nach Sprache 13,70 bis 20,32 em, die Spalte bietet 15,33 em. Fuenf
   von sechs Sprachen waeren zweizeilig geworden -- Franzoesisch und Spanisch deutlich. Ueber
   die volle Breite (25,91 em) passen alle sechs in eine Zeile.
   Damit ist der Abschnitt zugleich so gebaut wie der Standortblock darueber: Ueberschrift
   ueber die ganze Breite, Fliesstext in einer schmalen Spalte darunter. */
.hp-handel-inner {
    padding: 3vw 0 1vw;
    text-align: center;
    border-top: 1px solid var(--hp-line);
}

.hp-handel-eyebrow {
    display: block;
    font-family: "Overpass-Medium", sans-serif;
    font-size: .78vw;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hp-muted);
    margin-bottom: .8vw;
}

/* Wortgleich zu `.hp-standorte-kopf h2` -- und damit wie `.sTitle h1` aus home.css.
   Versalien und Sperrsatz kommen dazu: JEDE Ueberschrift dieser Seite steht in Versalien
   (.mTitle, .sTitle, .designerBox .title). Ohne sie faellt dieser eine Abschnitt aus der
   Reihe, und darum ging es. */
.hp-handel h2 {
    text-transform: uppercase;
    font-size: 3vw;
    letter-spacing: 2px;
    line-height: normal;
    color: var(--hp-ink);
    margin-bottom: 1vw;
}

/* Erbt die Grundschrift, wie `.hp-standorte-text` -- und steht in derselben schmalen Spalte:
   Fliesstext ueber die volle Seitenbreite liest sich nicht. */
.hp-handel-text {
    max-width: 46vw;
    margin: 0 auto 1.6vw;
    color: var(--hp-ink);
}

/* ---------- Die Schaltflaechenreihe ----------
   ⚠ DIE BREITENREGEL HAENGT AN DER ANZAHL, NICHT AN DER LAGE.
   `:not(:only-child)` steht hier und in JEDEM @media-Block wortgleich. Fehlte es in der
   Medienregel, laege die dort um eine Klasse niedriger und die Verbesserung auf dem Telefon
   erzeugte eine Verschlechterung auf dem Rechner. Genau das ist in store-seite.css passiert,
   weil die Regel an `.sto-hero` gebunden war statt an die Zahl der Schaltflaechen -- jede
   spaeter hinzugekommene Zweierreihe bekam den Fehler zurueck.
   Die Reihe gibt je nach Pflegezustand EINE oder ZWEI Schaltflaechen aus. */
.hp-btn-reihe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1vw;
}

.hp-btn {
    transition: .3s;
    display: inline-block;
    background: var(--hp-ink);
    border: 2px solid var(--hp-ink);
    color: #fff;
    font-family: "Overpass-Medium", sans-serif;
    font-size: .78vw;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: .6vw 1.4vw .45vw;
    line-height: 100%;
}

/* Die zweite Schaltflaeche steht als Umriss -- zwei gefuellte nebeneinander laesst keine
   erkennen, welche die naheliegende ist. */
.hp-btn:not(:only-child):last-child {
    background: transparent;
    color: var(--hp-ink);
}

.hp-btn:hover {
    background: #fff;
    color: var(--hp-ink);
}

.hp-btn:not(:only-child):last-child:hover {
    background: var(--hp-ink);
    color: #fff;
}

.hp-handel :focus-visible {
    outline: 2px solid var(--hp-ink);
    outline-offset: 3px;
}

@media only screen and (max-width: 1023px) {
    .hp-handel-inner {
        padding: 30px 20px 10px;
    }

    .hp-handel-text {
        max-width: none;
    }

    .hp-handel-eyebrow {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .hp-handel h2 {
        margin-bottom: 12px;
    }

    .hp-handel-text {
        margin-bottom: 20px;
    }

    .hp-btn {
        font-size: 12px;
        padding: 12px 20px 10px;
    }
}

/* Auf dem Telefon stehen die beiden Schaltflaechen untereinander und gleich breit -- 84 % der
   Besucher kommen von dort. `:not(:only-child)` wortgleich wie oben: eine einzelne
   Schaltflaeche behaelt ihre Textbreite und wird nicht ueber die ganze Zeile gezogen. */
@media only screen and (max-width: 767px) {
    /* 30px wie `.hp-standorte-kopf h2` und `.sTitle h1` -- die Regel steht hier und nicht oben
       im 767px-Block des Standortblocks, weil sie sonst VOR `.hp-handel h2 { font-size: 3vw }`
       laege und von ihr geschlagen wuerde. Siehe die Anmerkung dort. */
    .hp-handel h2 {
        font-size: 30px;
    }

    .hp-btn-reihe {
        gap: 12px;
    }

    .hp-btn:not(:only-child) {
        flex: 1 1 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-handel * {
        transition: none !important;
    }
}