/* ==========================================================================================
   Store-Seite -- Gestaltung der Vorlage template-store_seite (AP-5, Schritt 3)
   Grundlage: documentation/Entwurf-Landingpage-Duisburg.html

   REGEL FUER DIESE DATEI: Jeder Selektor beginnt mit .sto
   ------------------------------------------------------------------------------------------
   Das Element <main class="sto"> umschliesst die ganze Seite. Ohne diese Disziplin traefen
   Elementregeln (h2, p, ul, details ...) auch Kopfzeile, Fusszeile und jede andere Seite --
   bootstrap.min.css, global.css, header.css und footer.css sind projektweit geladen. Dieselbe
   Regel gilt seit AP-1 fuer brautkleider-duisburg.css (dort: .homeSlider.lpHero).

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

   SCHRIFT: Overpass, wie im uebrigen Projekt -- kein externer Font-Abruf. Die sieben Schnitte
   sind in global.css je unter eigenem Familiennamen deklariert; benutzt werden Thin (100) fuer
   grosse Anzeigegroessen, Light (300) fuer Fliesstext und Ueberschriften, Medium (500) fuer
   Vorzeilen, Schaltflaechen und Auszeichnungen. Alle drei sind projektweit bereits in Gebrauch.

   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.
   ========================================================================================== */

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

    display: block;
    background: var(--sto-paper);
    color: var(--sto-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, damit der Abstand oben ueberall gleich
       ist. Die Kopfzeile ist auf dem Telefon rund 90px hoch: 25px Polster, 38.7px Logo,
       25px Polster, 1px Linie. */
    padding-top: 100px;
}

/* ---------- Ruecksetzungen: nur innerhalb von .sto ----------
   Bootstrap-Reboot und global.css bringen eigene Abstaende, Farben und Listenpunkte mit.
   Hier wird ausschliesslich das zurueckgesetzt, was in diesen Abschnitten wirklich vorkommt.

   DIE BEIDEN RESETS STEHEN IN :where(), UND ZWAR ABSICHTLICH.
   ------------------------------------------------------------------------------------------
   Als `.sto h1, ...` und `.sto a` geschrieben haben sie die Spezifitaet (0,1,1) und schlagen
   damit JEDE einklassige Regel (0,1,0) auf denselben Elementen -- unabhaengig von der
   Reihenfolge im Stylesheet. Das hat zweimal sichtbare Fehler verursacht: schwarze Schrift auf
   schwarzer Schaltflaeche (Farben) und 158px Abstand, die im Stylesheet standen und nicht
   ankamen (Abstaende). Die Gegenmassnahme war, jede betroffene Klassenregel einzeln mit `.sto `
   zu praefixieren -- eine Dauerpflicht, an die jeder kuenftige Bearbeiter denken muesste.

   `:where()` zaehlt nicht zur Spezifitaet. `:where(.sto) h1` liegt damit bei (0,0,1), und jede
   Klassenregel gewinnt von selbst. Das Praefixieren entfaellt als Regel.

   GEPRUEFT: In bootstrap.min.css, global.css, header.css und footer.css gibt es genau zwei
   Regeln, die einen (0,0,1)-Reset innerhalb von .sto schlagen wuerden -- `ol ul, ul ul
   { margin-bottom: 0 }` aus Reboot, beide folgenlos (verschachtelte Listen kommen im Template
   nicht vor, und der Wert ist derselbe). Bei gleicher Spezifitaet entscheidet die Reihenfolge,
   und store-seite.css wird als letztes der Projekt-Stylesheets geladen; die einzige spaeter
   geladene Datei, cookieconsent.css, enthaelt keine nackte Elementregel.

   RESTRISIKO: In einem Browser ohne :where() ist der ganze Selektor ungueltig und der Reset
   entfaellt -- Bootstrap-Abstaende und blaue Links kaemen zurueck. Unterstuetzt seit Firefox 78
   (2020-06), Safari 14 (2020-09) und Chrome/Edge 88 (2021-01). Die bereits praefixierten
   `.sto .sto-*`-Regeln bleiben als zweite Sicherung stehen. */
:where(.sto) h1,
:where(.sto) h2,
:where(.sto) h3,
:where(.sto) p,
:where(.sto) ul,
:where(.sto) dl,
:where(.sto) dd,
:where(.sto) figure {
    margin: 0;
    padding: 0;
}

.sto ul {
    list-style: none;
}

:where(.sto) a {
    color: inherit;
    text-decoration: none;
}

.sto img {
    display: block;
    max-width: 100%;
    height: auto;
}

.sto button {
    font: inherit;
    cursor: pointer;
}

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

/* 800px statt der 760px des Entwurfs -- Anweisung des Auftraggebers vom 2026-08-06 nach dem
   Augenschein. Bewusste Abweichung, beim naechsten Entwurfsabgleich nicht zurueckstellen. */
.sto-schmal {
    max-width: 800px;
}

/* Gegenstueck zu .sto-schmal: ein breiterer Rahmen, damit die Kollektionskacheln mehr Flaeche
   bekommen. Vom Auftraggeber am 2026-08-06 entschieden -- die Kacheln wirkten auf 1180px zu
   klein. Kachelbreite = (Rahmen - 2x --sto-pad - 3x gap) / 4, also 303.6px statt 248.6px
   (+22 % Breite, +49 % Flaeche). Der Abschnitt bleibt eingerueckt: Die 4rem Polster liegen
   INNERHALB der 1400px, weil Bootstrap-Reboot projektweit border-box setzt. Unterhalb von
   1180px Fensterbreite wirkt die Regel nicht -- dort begrenzt ohnehin das Fenster.
   Die randlose Fassung ueber die volle Fensterbreite wurde verworfen, bevor sie gebaut wurde.
   Der Kopf des Abschnitts bleibt bewusst auf .sto-schmal (800px): Fliesstext ueber 1272px
   waere schlecht lesbar, die Staffelung ist gewollt.
   Zwei Klassen im Selektor, damit die Regel den Deckel von .sto-wrap (0,1,0) sicher schlaegt;
   die Reihenfolge im Stylesheet allein waere ein zu schwacher Halt. */
.sto-wrap.sto-weit {
    max-width: 1400px;
}

.sto section {
    padding: clamp(3.5rem, 8vw, 7rem) 0;
}

.sto .sto-band {
    background: var(--sto-shell);
}

.sto-kopf {
    margin-bottom: clamp(2rem, 5vw, 3.2rem);
}

/* ---------- Typografie ---------- */
.sto h1 {
    font-family: "Overpass-Thin", sans-serif;
    font-size: clamp(2.25rem, 6.5vw, 4.4rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
}

.sto h2 {
    font-family: "Overpass-Light", sans-serif;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 1.6rem;
}

.sto h3 {
    font-family: "Overpass-Medium", sans-serif;
    font-size: 1.0625rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

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

/* SECHS REGELN TRAGEN HIER EIN FUEHRENDES `.sto `. SEIT DEM :where()-UMBAU IST ES NICHT MEHR
   NOETIG -- es bleibt als zweite Sicherung stehen, falls ein Browser :where() nicht kennt und
   der Reset ersatzlos entfaellt.

   Die urspruengliche Falle, zur Erinnerung: Der Abstands-Reset hatte als `.sto h1, .sto h2,
   ...` die Spezifitaet (0,1,1) und loeschte jede einklassige Abstandsangabe (0,1,0) auf diesen
   Elementen, unabhaengig von der Reihenfolge. Betroffen waren .sto-lead, .sto-aussage,
   .sto-aussage-nach, .sto-btn-reihe, .sto-telefon und .sto-zeiten-hinweis: zusammen 158px
   senkrechter Abstand, die im Stylesheet standen und nicht ankamen. Deshalb wirkte die Seite
   gedraengt.

   Besonders irrefuehrend war .sto-btn-reihe: im Titelbereich ist das Element ein <div>, dort
   wirkte die Regel; im Kollektionsabschnitt ein <p>, dort nicht. Dieselbe Klasse, zwei
   Ergebnisse.

   WER HEUTE EINE KLASSE AUF EINEM h1, h2, h3, p, ul, dl, dd ODER figure ERGAENZT, braucht das
   Praefix NICHT MEHR -- der Reset liegt bei (0,0,1) und verliert von selbst. */
.sto .sto-lead {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    line-height: 1.55;
    margin-top: 2rem;
}

/* KEIN max-width. Hier stand `max-width: 46ch`, und das war ein Uebertragungsfehler aus dem
   Entwurf: dort ist 46ch keine Regel, sondern eine Stilangabe an genau EINEM Absatz
   (Entwurf-Landingpage-Duisburg.html, Zeile 203, Titelbereich). Als Klassenregel traf der Wert
   alle sieben .sto-text-Bloecke.

   Gemessen in Overpass-Light: 1ch = 10,74px bei 17px, also 46ch = 494px. Die Spalte des
   Titelbereichs ist ab 1280px 494px breit -- dort und in den Zweispalter-Spalten tat der
   Deckel nichts. Gebunden hat er ausschliesslich in den beiden .sto-schmal-Abschnitten
   (Aussage, Preise), wo der Entwurf gar keinen Deckel hat: 494px statt 632px, rechts blieben
   138px ungenutzt. Genau das war sichtbar. */
.sto-text {
    margin-top: 1.8rem;
    color: var(--sto-muted);
}

.sto-text p + p {
    margin-top: 1.1rem;
}

.sto .sto-aussage {
    border-left: 2px solid var(--sto-ink);
    padding: 0.2rem 0 0.2rem 1.6rem;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.5;
}

.sto .sto-aussage-nach {
    margin-top: 3rem;
}

/* ---------- Brotkrume ---------- */
.sto-crumb {
    padding: 1.6rem 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sto-muted);
}

.sto-crumb a:hover {
    color: var(--sto-ink);
    text-decoration: underline;
}

/* ---------- Titelbereich ---------- */
.sto-hero {
    padding-top: clamp(2rem, 5vw, 4rem);
}

.sto-hero-grid {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: 1fr;
}

/* ---------- Schaltflaechen ----------
   Mindesthoehe 44px (2.75rem) als eigene Regel, nicht als Ergebnis von Innenabstaenden --
   so bleibt sie auch dann erhalten, wenn die Beschriftung einzeilig und kurz ist.

   DAS FUEHRENDE `.sto ` IST SEIT DEM :where()-UMBAU NICHT MEHR NOETIG, BLEIBT ABER STEHEN.
   Der Link-Reset heisst jetzt `:where(.sto) a` und liegt bei (0,0,1); diese vier Selektoren
   wuerden ihn auch ohne Praefix schlagen. Sie bleiben als zweite Sicherung fuer den Fall, dass
   ein Browser :where() nicht kennt und der Reset ersatzlos entfaellt -- dann greift Bootstrap
   wieder, und (0,2,0) haelt dagegen. Wer hier aufraeumt, nimmt genau diese Sicherung weg.

   Die urspruengliche Falle, zur Erinnerung: `.sto a { color: inherit }` hatte (0,1,1) und
   schlug die einklassige Regel. Ein <a class="sto-btn"> erbte die Textfarbe des Elternelements,
   bei .sto also var(--sto-ink) -- schwarze Schrift auf schwarzer Flaeche. `color: inherit`
   bleibt, wo es hingehoert: Es neutralisiert Bootstrap-Reboot, das Links sonst blau
   unterstreicht.

   Dieselbe Falle traf `.sto-btn-offen`: dort ergab der geerbte Wert zufaellig dieselbe Farbe
   wie die Regel, die Schaltflaeche sah also richtig aus. Im dunklen Abschlussband haette sie
   Weiss auf transparent geerbt und waere unsichtbar gewesen.

   GROESSE: font-size 0.74rem wie im Entwurf (dort stand versehentlich 0.8125rem) und Polster
   1.8rem statt 2.1rem. Gemessen aus Overpass-Medium.ttf: "Termin vereinbaren" und
   "Anfahrt & Parken" brauchten zusammen 519.5px, die halbe Titelbereichsspalte ist ab 1280px
   aber nur 494px breit -- sie passten bei KEINER Fensterbreite nebeneinander. Mit diesen
   Werten sind es 467.7px. Overpass laeuft breiter als das im Entwurf benutzte Jost, deshalb
   reicht die Schriftgroesse des Entwurfs allein nicht (486.9px, nur 7px Rest).
   Deutlich laengere Beschriftungen brechen weiterhin um -- das ist flex-wrap als Auffangnetz
   und auf dem Telefon der vorgesehene Zustand. */
.sto .sto-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.85rem 1.8rem;
    background: var(--sto-ink);
    color: var(--sto-paper);
    border: 1px solid var(--sto-ink);
    font-family: "Overpass-Medium", sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: background 0.25s, color 0.25s;
}

.sto .sto-btn:hover {
    background: transparent;
    color: var(--sto-ink);
}

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

.sto .sto-btn-offen:hover {
    background: var(--sto-ink);
    color: var(--sto-paper);
}

/* Zwei Schaltflaechen nebeneinander brechen auf dem Telefon untereinander um, mit Abstand. */
.sto .sto-btn-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.6rem;
}

/* Auf dem Telefon stehen mehrere Schaltflaechen einer Reihe untereinander, und jede war nur
   so breit wie ihre Beschriftung -- unterschiedlich lange Kaesten uebereinander.
   flex-basis 100% legt jede auf eine eigene Zeile, flex-grow 1 fuellt sie aus: gleich breit,
   volle Breite des Inhaltsbereichs. Anweisung des Auftraggebers vom 2026-08-06.

   NICHT MEHR NUR IM TITELBEREICH (seit 2026-08-16). Die Regel hing bis dahin an .sto-hero,
   weil damals nur der Titelbereich zwei Schaltflaechen nebeneinander fuehrte. Inzwischen tun
   das zwei weitere Reihen ausserhalb des Titelbereichs, und beide zeigten den Fehler erneut:
   „Ihre Arbeit" der Designer-Vorlage (dg_mehr_btn1/2) und „International" der Ueber-uns-
   Vorlage (ab_intl_btn1/2). Der Auftraggeber hat es an der Designer-Seite gemeldet.

   `:not(:only-child)` ersetzt die Einschraenkung auf .sto-hero und trifft die Sache genauer:
   Nicht die Lage einer Reihe entscheidet, sondern ob sie mehr als eine Schaltflaeche traegt.
   Eine einzeln stehende behaelt ihre Breite -- so bleiben die drei Reihen unveraendert, die
   nur eine fuehren (Kollektionen der Store-Seiten, Presse bei Ueber uns, Messen bei
   Wholesale). Im Bestand am 2026-08-16 nachgezaehlt: Jede Reihe gibt entweder immer zwei
   Schaltflaechen aus oder immer eine, keine schwankt -- `:only-child` trennt sie also sauber.

   ⚠ Der Ausdruck steht in BEIDEN Regeln wortgleich, auch in der im @media-Block. Ohne ihn
   dort waere jene Regel um eine Klasse unspezifischer und wuerde ab 768px nicht mehr greifen;
   die Schaltflaechen blieben dann auf dem Rechner in voller Breite untereinander stehen.

   Ab 768px zurueck auf den Ausgangszustand: Dort ist die Spalte 690px breit, die beiden
   Beschriftungen brauchen zusammen 467.7px plus 1rem Abstand -- sie passen nebeneinander,
   und so sieht der Entwurf sie am Rechner auch vor. Gemessen aus Overpass-Medium.ttf, die
   Rechnung steht bei .sto-btn. `0 1 auto` ist der Ausgangswert von flex, keine neue Vorgabe.

   BLEIBT OFFEN: Zwischen 1024px und rund 1140px ist der Titelbereich schon zweispaltig, die
   halbe Spalte aber noch keine 484px breit -- dort brechen die Schaltflaechen weiterhin um
   und stehen wieder unterschiedlich breit uebereinander. Das betrifft kleine Notebookfenster,
   nicht das Telefon, und wurde am 2026-08-06 bewusst nicht mitgeaendert. */
.sto .sto-btn-reihe .sto-btn:not(:only-child) {
    flex: 1 1 100%;
}

@media (min-width: 768px) {
    .sto .sto-btn-reihe .sto-btn:not(:only-child) {
        flex: 0 1 auto;
    }
}

/* ---------- Bilder ----------
   aspect-ratio haelt den Platz frei, bevor das Bild geladen ist. Zusammen mit width und
   height am <img> (aus der Medienbibliothek) entsteht kein Springen des Layouts. */
.sto-bild {
    background: var(--sto-shell);
    overflow: hidden;
}

.sto-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sto-bild-hoch {
    aspect-ratio: 3 / 4;
}

/* 16:9 statt der 16:7 des Entwurfs (Konzept, Abschnitt 6). Über die volle Rahmenbreite
   (1052px Innenmaß ab 1280px Fenster) sind 16:7 nur 460px hoch -- ein Streifen, in dem eine
   Anprobesituation nicht mehr lesbar ist; 16:9 sind 592px.
   Der Entwurf gibt für Bild 3 abweichend 16:6 an; die Vorlage hat alle drei Querformate
   von Anfang an über diese eine Klasse geführt, und dabei bleibt es.

   Vom Auftraggeber am 2026-08-06 nach dem unmittelbaren Vergleich gegen 3 / 2 (701px)
   entschieden -- D-08 im Changelog. Bewusste Abweichung vom Entwurf, beim naechsten
   Abgleich nicht zurueckstellen. Der Fotoauftrag traegt die Folge dieser Wahl: aufgenommen
   wird in 3:2, der Anschnitt auf 16:9 ist eingeplant (Konzept, Abschnitt 5). Damit liegt
   oben und unten Luft, und die 16 % Bildhoehe, die object-fit hier wegschneidet, treffen
   nichts Tragendes. */
.sto-bild-breit {
    aspect-ratio: 16 / 9;
}

.sto-bild-quadrat {
    aspect-ratio: 1;
}

.sto-bild-vier-drei {
    aspect-ratio: 4 / 3;
}

/* ---------- Bildplatzhalter ----------
   Nur im Vorschaumodus. Zeigt dem Auftraggeber, wo ein Bild hingehoert, und traegt den dafuer
   vorgesehenen Alternativtext. Auf der Live-Seite bleibt eine leere Bildstelle leer -- dort
   waere ein gestreiftes Kaestchen mit Redaktionshinweis ein Fehler, kein Hinweis. */
.sto-platzhalter {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    border: 1px solid var(--sto-line);
    background: repeating-linear-gradient(45deg, #EAE7E3 0 12px, #F1EEEA 12px 24px);
}

.sto-platzhalter span {
    max-width: 34ch;
    font-family: "Overpass-Medium", sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 2;
    color: var(--sto-muted);
}

/* ---------- Kennzahlen ----------
   Zwei Spalten auf dem Telefon, vier ab Tablet. Die Trennlinien bleiben in beiden Fassungen. */
.sto-zahlen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--sto-line);
}

.sto-zahl {
    padding: 2.2rem 1.4rem;
    border-bottom: 1px solid var(--sto-line);
    border-right: 1px solid var(--sto-line);
}

.sto-zahl:nth-child(2n) {
    border-right: 0;
}

.sto-zahl b {
    display: block;
    font-family: "Overpass-Thin", sans-serif;
    font-size: clamp(2.25rem, 5vw, 3.4rem);
    font-weight: normal;
    line-height: 1;
    letter-spacing: -0.03em;
}

.sto-zahl span {
    display: block;
    margin-top: 0.8rem;
    font-family: "Overpass-Medium", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sto-muted);
    line-height: 1.7;
}

/* ---------- Ablauf ---------- */
.sto-ablauf {
    display: grid;
    grid-template-columns: 1fr;
    counter-reset: sto-schritt;
}

.sto-schritt {
    position: relative;
    padding: 2.6rem 1.6rem 2rem;
    border-top: 1px solid var(--sto-line);
}

.sto-schritt::before {
    counter-increment: sto-schritt;
    content: counter(sto-schritt, decimal-leading-zero);
    position: absolute;
    top: -0.85rem;
    left: 1.6rem;
    padding: 0 0.6rem;
    background: var(--sto-paper);
    font-family: "Overpass-Medium", sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--sto-muted);
}

.sto-band .sto-schritt::before {
    background: var(--sto-shell);
}

.sto-schritt svg {
    display: block;
    margin-bottom: 1.3rem;
    stroke: var(--sto-ink);
    fill: none;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sto-schritt p {
    font-size: 0.95rem;
    color: var(--sto-muted);
    line-height: 1.7;
}

/* ---------- Merkkasten ---------- */
.sto-kasten {
    border: 1px solid var(--sto-ink);
    padding: clamp(1.6rem, 4vw, 2.4rem);
}

.sto-kasten ul {
    display: grid;
    gap: 0.9rem;
}

.sto-kasten li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 1rem;
}

.sto-kasten li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.6rem;
    height: 1px;
    background: var(--sto-ink);
}

/* ---------- Zwei Spalten ----------
   Auf dem Telefon immer Text zuerst, Bild darunter -- die Umkehrung greift erst ab Tablet. */
.sto-duo {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: 1fr;
    align-items: center;
}

/* ---------- Preise ---------- */
.sto-preis {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 4vw, 3rem);
    align-items: baseline;
    margin-bottom: 1.4rem;
}

.sto-preis b {
    font-family: "Overpass-Thin", sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: normal;
    letter-spacing: -0.02em;
}

.sto-preis span {
    font-family: "Overpass-Medium", sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sto-muted);
    line-height: 1.8;
    /* Auch hier stand ein max-width (22ch), das der Entwurf nicht kennt: .price span traegt
       dort keinen Deckel. 22ch sind in Overpass-Medium rund 250px. */
}

/* ---------- Kollektionen ---------- */
.sto-kacheln {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(2, 1fr);
}

.sto-kachel img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: var(--sto-shell);
}

.sto-kachel figcaption {
    margin-top: 0.9rem;
    font-family: "Overpass-Medium", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sto-muted);
}

.sto-kachel a:hover figcaption {
    color: var(--sto-ink);
}

/* ---------- Anfahrt ---------- */
.sto-adresse {
    display: block;
    font-size: 1.15rem;
    line-height: 1.9;
}

a.sto-adresse:hover {
    text-decoration: underline;
}

.sto .sto-telefon {
    margin-top: 1rem;
    font-size: 1.15rem;
}

.sto-telefon a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* E-Mail: dieselbe Zeilenform wie die Telefonnummer, inklusive der 2.75rem Mindesthoehe --
   ein `mailto:`-Verweis wird genauso angetippt wie ein `tel:`-Verweis und braucht dieselbe
   44px-Flaeche.

   Der Vorlauf von 1rem gilt nur, wenn die Mailzeile allein unter der Adresse steht. Folgt sie
   auf die Telefonzeile, entfaellt er: beide Zeilen sind durch die Mindesthoehe ihrer Verweise
   bereits 2.75rem hoch, der Text sitzt darin mittig, und ein zusaetzlicher Abstand risse die
   zusammengehoerenden Kontaktangaben auseinander. */
.sto .sto-mail {
    margin-top: 1rem;
    font-size: 1.15rem;
}

.sto .sto-telefon + .sto-mail {
    margin-top: 0;
}

.sto-mail a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.sto-zeiten {
    margin-top: 2.4rem;
}

.sto-zeiten dl {
    display: grid;
    gap: 0.5rem;
    max-width: 22rem;
    font-size: 1rem;
    color: var(--sto-muted);
}

.sto-zeiten dl > div {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px dotted var(--sto-line);
}

.sto-zeiten dt {
    font-family: "Overpass-Medium", sans-serif;
    font-weight: normal;
    color: var(--sto-ink);
}

.sto .sto-zeiten-hinweis {
    margin-top: 0.9rem;
    font-size: 1rem;
    color: var(--sto-muted);
}

/* ---------- Karte ----------
   Direkt sichtbar; die Verzoegerung leistet loading="lazy" am iframe, nicht mehr ein
   Standbild mit Schaltflaeche (Block D, Punkt 9, 2026-08-06). */
.sto-karte {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--sto-shell);
    overflow: hidden;
}

.sto-karte img,
.sto-karte iframe {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* Graustufen wie auf /de/unsere-adressen, wo `.maps` den Filter traegt. Hier sitzt er am
   iframe statt am Rahmen: Im Rueckfall ohne Einbettungsadresse kann eine Schaltflaeche im
   selben Rahmen stehen, und die soll ihre Farbe behalten. Die Hoehen von dort (22.5vw bzw.
   45vw) werden bewusst NICHT uebernommen -- dieses Stylesheet rechnet in rem, weil
   global.css dem body ein font-size: 1.4vw gibt. Die Hoehe kommt aus aspect-ratio. */
.sto-karte iframe {
    filter: grayscale(1);
}

.sto-karte-btn {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
}

/* ---------- Haeufige Fragen ----------
   <details> statt Accordion-Skript: die Antworten stehen im Quelltext, und die Flaeche zum
   Antippen ist die ganze Zeile -- mindestens 44px hoch. */
.sto-frage {
    border-bottom: 1px solid var(--sto-line);
}

.sto-frage summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 1.35rem 2.5rem 1.35rem 0;
    font-family: "Overpass-Regular", sans-serif;
    font-size: 1.0625rem;
    list-style: none;
    cursor: pointer;
}

.sto-frage summary::-webkit-details-marker {
    display: none;
}

.sto-frage summary::after {
    content: "";
    position: absolute;
    right: 0.4rem;
    top: 50%;
    width: 0.7rem;
    height: 0.7rem;
    border-right: 1px solid var(--sto-ink);
    border-bottom: 1px solid var(--sto-ink);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.25s;
}

.sto-frage[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
}

.sto-antwort {
    padding-bottom: 1.4rem;
    color: var(--sto-muted);
    max-width: 70ch;
}

.sto-antwort p + p {
    margin-top: 1.1rem;
}

/* ---------- Abschluss ---------- */
.sto-abschluss {
    background: var(--sto-ink);
    color: var(--sto-paper);
    text-align: center;
}

.sto-abschluss h2 {
    color: var(--sto-paper);
}

.sto-abschluss .sto-eyebrow {
    color: #8F8A85;
}

.sto-abschluss p {
    color: #C9C4BF;
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
}

.sto-abschluss .sto-btn {
    margin-top: 2.2rem;
    background: var(--sto-paper);
    color: var(--sto-ink);
    border-color: var(--sto-paper);
}

.sto-abschluss .sto-btn:hover {
    background: transparent;
    color: var(--sto-paper);
}

/* ---------- Tastaturbedienung ----------
   Sichtbarer Fokus, auch auf dem dunklen Abschlussband. */
.sto a:focus-visible,
.sto button:focus-visible,
.sto summary:focus-visible {
    outline: 2px solid var(--sto-ink);
    outline-offset: 3px;
}

.sto-abschluss a:focus-visible,
.sto-abschluss button:focus-visible {
    outline-color: var(--sto-paper);
}

/* ==========================================================================================
   Ab Tablet (768px)
   ========================================================================================== */
@media (min-width: 768px) {
    .sto-kacheln {
        grid-template-columns: repeat(4, 1fr);
    }

    .sto-ablauf {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================================
   Ab 900px -- Kennzahlen und Zweispalter

   Der Entwurf schaltet die Kennzahlen bei 820px auf vier Spalten und den Zweispalter bei
   900px. Beides stand hier bei 768px, und das war messbar zu frueh:

   Bei 768px blieben je Kennzahl-Bezeichnung nur 127px Textbreite -- schmaler als die 122px
   auf einem 375px-Telefon, wo nur zwei Spalten stehen. Die laengste Bezeichnung zerfiel dort
   in vier Zeilen. Fuer Overpass reichen auch die 820px des Entwurfs nicht; ab 900px sind es
   157px und hoechstens zwei Zeilen. Gemessen aus Overpass-Medium.ttf.

   Der Zweispalter hatte bei 768px je Spalte 326px, das sind rund 42 Zeichen je Zeile. Ab
   900px sind es 382px. Der Entwurf steht hier ohnehin auf 900px.
   ========================================================================================== */
@media (min-width: 900px) {
    .sto-zahlen {
        grid-template-columns: repeat(4, 1fr);
    }

    .sto-zahl {
        border-bottom: 0;
    }

    .sto-zahl:nth-child(2n) {
        border-right: 1px solid var(--sto-line);
    }

    .sto-zahl:last-child {
        border-right: 0;
    }

    .sto-duo {
        grid-template-columns: 1fr 1fr;
    }

    /* Bild links vom Text -- erst ab hier, auf dem Telefon steht der Text immer zuerst. */
    .sto-duo-getauscht > :last-child {
        order: -1;
    }
}

/* ==========================================================================================
   Ab Rechner (1024px)
   ========================================================================================== */
@media (min-width: 1024px) {
    .sto-hero-grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .sto-ablauf {
        grid-template-columns: repeat(4, 1fr);
    }

    .sto-schritt {
        border-top: 1px solid var(--sto-ink);
        padding-right: 2rem;
    }
}

/* ==========================================================================================
   Feste Kopfzeile: Ausgleich und Sprungmarken

   Der Haltepunkt ist hier 1400px und nicht 1024px wie sonst in dieser Datei -- die Kopfzeile
   wechselt genau dort ihre Hoehe (header.css: .allHeader bekommt 25px Polster, .menuBtn wird
   sichtbar, .header .menu wird zur ausgeblendeten Vollbild-Ebene). Ein anderer Wert waere
   entweder zu klein oder liesse eine Luecke.

   scroll-margin-top gehoert zur selben Ursache: "Anfahrt & Parken" springt auf #anfahrt, und
   ohne diese Angabe landet die Ueberschrift des Zielabschnitts hinter der festen Kopfzeile.
   ========================================================================================== */
@media (min-width: 1401px) {
    .sto {
        padding-top: 7vw;
    }
}

.sto section[id] {
    scroll-margin-top: 100px;
}

@media (min-width: 1401px) {
    .sto section[id] {
        scroll-margin-top: 7vw;
    }
}

/* ==========================================================================================
   Bewegung nur, wenn gewuenscht
   ========================================================================================== */
@media (prefers-reduced-motion: reduce) {
    .sto *,
    .sto *::before,
    .sto *::after {
        transition: none !important;
        animation: none !important;
    }
}