/* ==========================================================================================
   Verteilerseite -- Gestaltung der Vorlage template-verteilerseite
   Grundlage: documentation/Entwurf-Verteilerseite.html

   REGEL FUER DIESE DATEI: Jeder Selektor beginnt mit .vtl
   ------------------------------------------------------------------------------------------
   Das Element <main class="vtl"> umschliesst die ganze Seite. Ohne diese Disziplin traefen
   Elementregeln (h2, p, dl, dd, address ...) auch Kopfzeile, Fusszeile und jede andere Seite --
   bootstrap.min.css, global.css, header.css und footer.css sind projektweit geladen. Dieselbe
   Regel gilt fuer store-seite.css (.sto) und brautkleider-duisburg.css.

   Keine bestehende Datei wird geaendert. Das Stylesheet wird ausschliesslich von
   template-verteilerseite.blade.php geladen.

   SCHRIFT: Overpass, wie im uebrigen Projekt -- NICHT das Jost des Entwurfs, und kein externer
   Font-Abruf. Overpass laeuft rund 6,4 % breiter als Jost; feste Breiten aus dem Entwurf sind
   deshalb nicht uebernommen, sondern durch fliessende Masse ersetzt.

   GROESSEN: durchgaengig rem. global.css setzt body auf 1.4vw (unter 768px auf 16px) -- eine
   vererbte Groesse waere auf dem Telefon 5 px. html traegt keine Groessenregel, 1rem = 16px.
   Der Fliesstext liegt bei 1.0625rem = 17px und damit ueber der Mindestgroesse von 16px, unter
   der iOS beim Antippen von Feldern zoomt.

   KEIN scroll-behavior: smooth -- das waere eine Regel an html und damit projektweit.
   ========================================================================================== */

.vtl {
    --vtl-ink: #14100E;
    --vtl-paper: #FFFFFF;
    --vtl-shell: #F4F2F0;
    --vtl-line: #DDD9D5;
    --vtl-muted: #6E6A66;
    --vtl-pad: clamp(1.25rem, 5vw, 4rem);
    --vtl-max: 1180px;

    display: block;
    background: var(--vtl-paper);
    color: var(--vtl-ink);
    font-family: "Overpass-Light", sans-serif;
    font-size: 1.0625rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;

    /* Ausgleich fuer die feste Kopfzeile. .header ist projektweit position:fixed und steht
       damit ausserhalb des Textflusses; jede bestehende Seite haelt den Platz darunter ueber
       page.css frei (.section: 7vw, unter 1400px 100px). Diese Vorlage laedt page.css
       bewusst nicht -- ohne diesen Ausgleich liegt die Brotkrume hinter Logo und
       Menueschalter. Dieselben Werte wie page.css und store-seite.css. */
    padding-top: 100px;
}

/* ---------- Ruecksetzungen: nur innerhalb von .vtl ----------
   DIE RESETS STEHEN IN :where(), UND ZWAR ABSICHTLICH.
   ------------------------------------------------------------------------------------------
   Als `.vtl h1, ...` 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(.vtl) h1` liegt bei (0,0,1), und jede
   Klassenregel gewinnt von selbst.

   RESTRISIKO: In einem Browser ohne :where() ist der Selektor ungueltig und der Reset
   entfaellt. Unterstuetzt seit Firefox 78 (2020-06), Safari 14 (2020-09) und Chrome/Edge 88
   (2021-01). */
:where(.vtl) h1,
:where(.vtl) h2,
:where(.vtl) p,
:where(.vtl) dl,
:where(.vtl) dd,
:where(.vtl) dt {
    margin: 0;
    padding: 0;
}

:where(.vtl) 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(.vtl) address {
    margin: 0;
    font-style: normal;
}

.vtl iframe {
    display: block;
    border: 0;
}

/* ---------- Rahmen ---------- */
.vtl-wrap {
    max-width: var(--vtl-max);
    margin: 0 auto;
    padding-left: var(--vtl-pad);
    padding-right: var(--vtl-pad);
}

/* 800px wie bei den Store-Seiten -- dort auf Anweisung des Auftraggebers vom 2026-08-06 von
   den 760px des Entwurfs heraufgesetzt. Beide Seiten sollen gleich breit lesen. */
.vtl-narrow {
    max-width: 800px;
}

/* ---------- Typografie ---------- */
.vtl-eyebrow {
    display: block;
    font-family: "Overpass-Medium", sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--vtl-muted);
    margin-bottom: 1.4rem;
}

.vtl h1 {
    font-family: "Overpass-Thin", sans-serif;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.vtl h2 {
    font-family: "Overpass-Thin", sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.vtl-lead {
    font-family: "Overpass-Thin", sans-serif;
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.55;
}

.vtl-text p + p {
    margin-top: 1rem;
}

/* ---------- Brotkrume ---------- */
.vtl-crumb {
    font-family: "Overpass-Medium", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vtl-muted);
    padding: 1.6rem 0 0;
}

.vtl-crumb span {
    margin: 0 0.5rem;
}

.vtl-crumb a:hover {
    color: var(--vtl-ink);
}

/* ---------- Abschnitte ---------- */
.vtl-hero,
.vtl-orte,
.vtl-schale,
.vtl-schluss {
    padding-top: clamp(2.5rem, 5vw, 4.5rem);
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* Der Titelbereich geht unmittelbar in die Standortliste ueber; zwei volle Polster
   uebereinander rissen die Seite auseinander. */
.vtl-orte {
    padding-top: 0;
}

.vtl-hero .vtl-lead {
    margin-top: 1.6rem;
}

.vtl-schale {
    background: var(--vtl-shell);
}

/* ---------- Ein Standort ---------- */
.vtl-ort {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding-top: clamp(2rem, 4vw, 3rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--vtl-line);
}

.vtl-ort:last-of-type {
    border-bottom: 1px solid var(--vtl-line);
}

/* Ab 860px stehen Angaben und Karte nebeneinander. Der Umbruchpunkt ist der des Entwurfs;
   die Spaltenanteile bleiben fliessend (fr), damit die breitere Overpass keine feste
   Spaltenbreite sprengt. */
@media (min-width: 860px) {
    .vtl-ort {
        grid-template-columns: 1fr 1.15fr;
        gap: 3.5rem;
        align-items: start;
    }
}

.vtl-ort-kopf {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.vtl-land {
    font-family: "Overpass-Medium", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vtl-muted);
}

/* ---------- Oeffnungszeiten ---------- */
.vtl-zeiten {
    border-left: 1px solid var(--vtl-line);
    padding-left: 1.1rem;
    margin-bottom: 1.5rem;
}

.vtl-zeiten .vtl-eyebrow {
    margin-bottom: 0.6rem;
}

.vtl-zeiten dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 1.1rem;
    font-size: 0.96rem;
    line-height: 1.6;
}

/* 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. */
.vtl-zeiten dl > div {
    display: contents;
}

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

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

.vtl-hinweis {
    font-size: 0.88rem;
    color: var(--vtl-muted);
    margin-top: 0.55rem;
}

/* ---------- Sprachen, Anschrift ---------- */
.vtl-sprachen {
    font-size: 0.9rem;
    color: var(--vtl-muted);
    margin-bottom: 1.35rem;
}

.vtl-anschrift {
    font-size: 0.96rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

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

.vtl-anschrift a {
    border-bottom: 1px solid var(--vtl-line);
}

.vtl-anschrift a:hover {
    border-bottom-color: var(--vtl-ink);
}

/* Die verlinkte Anschrift ist mehrzeilig -- eine durchgehende Unterkante an jeder Zeile
   waere unruhig. Sie bleibt ohne Linie und faerbt sich beim Ueberfahren. */
.vtl-adresse {
    border-bottom: 0 !important;
}

a.vtl-adresse:hover {
    color: var(--vtl-muted);
}

/* ---------- Verweis auf die Store-Seite ---------- */
.vtl-ort-link {
    display: inline-block;
    font-family: "Overpass-Medium", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--vtl-ink);
    padding-bottom: 0.25rem;
    /* Antippflaeche: 44px hoch, ohne die Unterkante vom Text abzuruecken. */
    min-height: 2.75rem;
    box-sizing: content-box;
}

/* ---------- Karte ---------- */
.vtl-karte {
    aspect-ratio: 4 / 3;
    background: var(--vtl-shell);
    border: 1px solid var(--vtl-line);
}

.vtl-karte iframe {
    width: 100%;
    height: 100%;
}

@media (min-width: 860px) {
    .vtl-karte {
        aspect-ratio: 3 / 2;
    }
}

/* Rueckfall ohne Einbettungsadresse: nur der Routen-Verweis, mittig im Rahmen. */
.vtl-karte-leer {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Schaltflaechen ---------- */
.vtl-btn {
    display: inline-block;
    padding: 0.85rem 1.8rem;
    border: 1px solid var(--vtl-ink);
    background: var(--vtl-ink);
    color: var(--vtl-paper);
    font-family: "Overpass-Medium", sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    min-height: 2.75rem;
}

.vtl-btn-offen {
    background: transparent;
    color: var(--vtl-ink);
}

.vtl-btn-reihe {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.2rem;
}

.vtl-schale .vtl-text {
    margin-top: 1.2rem;
}

/* ---------- Abschluss ---------- */
.vtl-schluss {
    background: var(--vtl-ink);
    color: var(--vtl-paper);
}

.vtl-schluss .vtl-eyebrow {
    color: rgba(255, 255, 255, 0.62);
}

.vtl-schluss h2 {
    color: var(--vtl-paper);
}

.vtl-schluss .vtl-lead {
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 2.2rem;
}

/* Auf dunklem Grund kehrt sich die Schaltflaeche um. Zwei Klassen im Selektor, damit die
   Regel .vtl-btn (0,1,0) sicher schlaegt -- die Reihenfolge im Stylesheet allein waere ein zu
   schwacher Halt. */
.vtl-schluss .vtl-btn {
    background: var(--vtl-paper);
    color: var(--vtl-ink);
    border-color: var(--vtl-paper);
}

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

.vtl-schluss :focus-visible {
    outline-color: var(--vtl-paper);
}

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