/*
 * standort.css – Bauteile der Bunert-Laufläden, Richtung „Druckverteilung“ (17.09.2026).
 *
 * Tokens `--st-*` kommen aus marke-laden.css. Mobile first (390 px), Rasterstufen bei 700 und
 * 1100 px. Nur im Standort-Modus geladen (functions.php). Prinzip: Flächen ohne Radius, Linien
 * statt Karten, Daten in Monospace, Rot nur als Signal, EINE dunkle Fläche je Seite.
 *
 * Bauteile: Messleiste, Druckbild, Kopfbereich (Start), Seitenkopf (Unterseiten), Kennzeichen,
 * Versprechen, Kern (Foto + Ablauf + Preis), Lauftreff-Band, Neuigkeiten, Team, Logowand,
 * Auszeichnung, FAQ, Kontakt, Hinweis, Formular, Fuß.
 */

/* ---------- Gemeinsames ---------- */
.st-huelle { max-width: var(--st-breite); margin-inline: auto; padding-inline: var(--st-rand); }
.st-abschnitt { padding-block: clamp(56px, 8vw, 96px); border-top: 1px solid var(--st-linie-leise); }
.st-abschnitt--dunkel { border-top: 0; }
.st-kopf { display: grid; gap: var(--st-3); margin-bottom: var(--st-6); max-width: 40rem; }
.st-kopf .st-intro { color: var(--st-leise); font-size: var(--st-t1); max-width: 34rem; }
.st-kopf .st-intro p + p { margin-top: var(--st-3); }
@media (min-width: 1100px) { .st-kopf { margin-bottom: var(--st-7); } }
.st-kopf--zeile { max-width: none; }
.st-kopf--zeile > div { display: grid; gap: var(--st-3); }
@media (min-width: 900px) { .st-kopf--zeile { grid-template-columns: 1fr auto; align-items: end; gap: var(--st-6); } .st-kopf--zeile .st-intro { max-width: 24rem; margin: 0; } }
.st-titel { font-size: var(--st-t4); line-height: 1.0; color: var(--st-tinte); }
.st-titel--gross { font-size: var(--st-t5); line-height: 0.98; }
.st-titel--recht { font-size: var(--st-t4); line-height: 1.02; }
.st-seitenkopf--recht { padding-bottom: var(--st-5); }
@media (min-width: 1100px) { .st-seitenkopf--recht { padding-bottom: var(--st-6); } }
.st-titel .st-zweite, .st-hero__titel .st-zweite { display: block; color: var(--st-blau); }
.st-lauftext { max-width: 34rem; }
.st-leise { color: var(--st-leise); }
.st-mono { font-family: var(--st-mono); font-size: var(--st-t0); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.st-fuss-zeile { margin-top: var(--st-5); }

/* Kennzeichen: Symbol der Symbolwelt plus Monospace-Versalien, 13 px (12 px war zu klein, Dennis 17.09.) */
.st-kicker {
    display: inline-flex; align-items: center; gap: var(--st-2);
    font-family: var(--st-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--st-blau); font-weight: 500; line-height: 1.2;
}
.st-kicker__symbol { width: 20px; height: 20px; color: var(--st-blau); }
.st-abschnitt--dunkel .st-kicker__symbol, .st-fuss .st-kicker__symbol { color: var(--st-dunkel-blau); }
.st-punkt { width: 14px; height: 22px; flex: none; }
.st-abschnitt--dunkel .st-kicker { color: var(--st-dunkel-blau); }

/* Status */
.st-status {
    display: inline-flex; align-items: center; gap: var(--st-2);
    font-family: var(--st-mono); font-size: var(--st-t-1); letter-spacing: 0.04em; color: var(--st-tinte);
    white-space: nowrap; padding: 0; background: transparent; border-radius: 0;
}
.st-status__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--st-gruen); flex: none; }
.st-status--zu .st-status__punkt { background: var(--st-rot); }
.st-status--schliesst_bald .st-status__punkt { background: var(--st-bernstein); }
.st-status--klein { font-size: 11px; }
.st-abschnitt--dunkel .st-status, .st-fuss .st-status { color: var(--st-dunkel-text); }

/* Symbole des Ladens (Linien mit einem roten Druckpunkt) */
.st-icon { width: 24px; height: 24px; color: var(--st-tinte); flex: none; }
.st-icon--gross { width: 32px; height: 32px; }
.st-icon .st-icon__punkt { fill: var(--st-rot); stroke: none; }
.st-abschnitt--dunkel .st-icon { color: var(--st-dunkel-text); }

/* ---------- Messleiste ---------- */
.st-messleiste { margin: 0; border-top: 1px solid var(--st-linie); }
.st-messleiste > div { display: grid; gap: var(--st-1); padding: var(--st-4) 0; border-bottom: 1px solid var(--st-linie); }
.st-messleiste dt { font-family: var(--st-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-leise); display: inline-flex; align-items: center; gap: var(--st-2); }
.st-messleiste dt .st-icon { width: 16px; height: 16px; color: var(--st-blau); }
.st-messleiste dd { margin: 0; font-family: var(--st-mono); font-size: var(--st-t0); color: var(--st-tinte); line-height: 1.5; font-variant-numeric: tabular-nums; }
.st-messleiste dd b { color: var(--st-rot-text); font-weight: 500; }
.st-messleiste dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--st-linie); }
.st-messleiste dd a:hover { border-color: var(--st-tinte); }
@media (min-width: 700px) and (max-width: 1099px) { .st-messleiste { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--st-6); } }

/* ---------- Druckbild ---------- */
.st-druckbild { position: relative; justify-self: center; width: min(100%, 250px); margin: 0; }
.st-druckbild__canvas, .st-druckbild__bild { width: 100%; height: auto; display: block; }
.st-druckbild figcaption { margin-top: var(--st-2); font-family: var(--st-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-leise); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.st-druckbild__skala { display: inline-flex; align-items: center; gap: 6px; }
.st-druckbild__skala i { width: 34px; height: 6px; background: linear-gradient(90deg, #6F92D6, #E73331); display: inline-block; }

/* ---------- Rasterpapier: das Blatt, auf dem gemessen wird (Kopf, dunkles Band, Kontakt); Entwurf 2, 17.09.2026 ---------- */
.st-blatt { background-image: linear-gradient(var(--st-raster) 1px, transparent 1px), linear-gradient(90deg, var(--st-raster) 1px, transparent 1px); background-size: 32px 32px; }
.st-abschnitt--dunkel.st-blatt { background-image: linear-gradient(var(--st-dunkel-raster) 1px, transparent 1px), linear-gradient(90deg, var(--st-dunkel-raster) 1px, transparent 1px); }

/* ---------- Kopfbereich der Startseite: Analysebogen (Entwurf 2) ---------- */
/* Der Kopf der Website liegt fest über der Seite (layout.css): der erste Abschnitt beginnt darunter.
   Raster über einem Verlauf vom Seitengrund zur weißen Fläche des ersten Abschnitts. */
.st-hero-rahmen { background-color: var(--st-grund); }
.st-hero-rahmen.st-blatt { background-image: linear-gradient(var(--st-raster) 1px, transparent 1px), linear-gradient(90deg, var(--st-raster) 1px, transparent 1px), linear-gradient(180deg, var(--st-grund), var(--st-flaeche)); background-size: 32px 32px, 32px 32px, 100% 100%; }
.st-hero { padding-block: calc(var(--st-kopf-hoehe, 73px) + var(--st-7)) var(--st-7); display: grid; gap: var(--st-7); }
.st-hero__text { display: grid; gap: var(--st-5); align-content: center; }
.st-hero__titel { font-size: clamp(46px, 8.4vw, 116px); line-height: 0.92; margin: 0; font-variation-settings: "wdth" 84; letter-spacing: -0.04em; }
.st-hero__intro { font-size: var(--st-t2); line-height: 1.45; max-width: 30rem; color: var(--st-text); }
.st-hero__aktionen { display: flex; flex-wrap: wrap; gap: var(--st-3); }
.st-druckbild { position: relative; justify-self: center; width: min(100%, 320px); margin: 0; }
.st-druckbild__bogen { position: relative; }
.st-druckbild__canvas, .st-druckbild__bild { width: 100%; height: auto; display: block; }
.st-druckbild figcaption { margin-top: var(--st-3); font-family: var(--st-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-leise); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.st-druckbild__skala { display: inline-flex; align-items: center; gap: 6px; }
.st-druckbild__skala i { width: 34px; height: 6px; background: linear-gradient(90deg, #6F92D6, #E73331); display: inline-block; }
/* Messmarken am Druckbild: Linie, Punkt, Mono-Beschriftung; erscheinen nach dem Aufbau (druckbild.js → .ist-fertig), nur am Rechner */
/* Messmarken eine Stufe größer (Dennis 18.09.): Beschriftung 13 statt 11 px, Name 16 statt 13 px */
.st-marke-mess { position: absolute; font-family: var(--st-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-tinte); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; display: none; }
.st-marke-mess b { display: block; font-weight: 500; color: var(--st-blau); font-size: 16px; letter-spacing: 0.04em; text-transform: none; }
.st-marke-mess::before { content: ""; position: absolute; top: 50%; width: var(--l, 56px); height: 1px; background: var(--st-blau); }
.st-marke-mess::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--st-blau); transform: translateY(-50%); }
.st-marke-mess--r { left: calc(100% + 14px); }
.st-marke-mess--r::before { right: 100%; margin-right: 8px; }
.st-marke-mess--r::after { right: calc(100% + var(--l, 56px) + 8px); }
.st-marke-mess--l { right: calc(100% + 14px); text-align: right; }
.st-marke-mess--l::before { left: 100%; margin-left: 8px; }
.st-marke-mess--l::after { left: calc(100% + var(--l, 56px) + 8px); }
.ist-fertig .st-marke-mess { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .st-marke-mess { transition: none; } }
@media (min-width: 1100px) {
    .st-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--st-9); padding-block: calc(var(--st-kopf-hoehe, 151px) + var(--st-8)) var(--st-8); min-height: min(80vh, 760px); align-items: center; }
    /* Das Druckbild steht mittig in seiner Spalte, damit die Messmarken links und rechts Platz haben, ohne in den Leitsatz
       zu ragen (Prüfung 43 fand überlagerte Editor-Kästen, 17.09.2026). Zwischen 1100 und 1279 px reicht der Platz nicht:
       dort bleiben die Marken aus, damit nichts über den rechten Rand hinausläuft. */
    .st-druckbild { width: clamp(300px, 24vw, 380px); justify-self: center; }
}
@media (min-width: 1280px) { .st-marke-mess { display: block; } }
/* Instrumentenleiste: alle Daten des Ladens in einer Zeile unter dem Kopf (ersetzt die Messleiste in der linken Spalte) */
.st-leiste { border-top: 1px solid var(--st-linie); border-bottom: 1px solid var(--st-linie); background: var(--st-flaeche); }
.st-leiste__innen { display: grid; grid-template-columns: 1fr 1fr; margin-block: 0; }  /* margin-inline bleibt auto (container): mit `margin: 0` klebte die Leiste links am Rand (Dennis 17.09.) */
.st-leiste__zelle { padding: var(--st-4) 0; border-bottom: 1px solid var(--st-linie-leise); display: grid; gap: 6px; align-content: start; text-decoration: none; color: inherit; }
.st-leiste__zelle:nth-child(odd) { padding-right: var(--st-4); border-right: 1px solid var(--st-linie-leise); }
.st-leiste__zelle:nth-child(even) { padding-left: var(--st-4); }
/* Instrumentenleiste eine Stufe größer (Dennis 18.09.): Beschriftung 12 statt 11, Wert 16 statt 14, Unterzeile 13 statt 12 px */
.st-leiste__zelle dt { font-family: var(--st-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-leise); display: flex; align-items: center; gap: 8px; }
.st-leiste__zelle dt .st-icon { width: 18px; height: 18px; color: var(--st-blau); }
.st-leiste__zelle dd { margin: 0; font-family: var(--st-mono); font-size: 16px; color: var(--st-tinte); line-height: 1.5; font-variant-numeric: tabular-nums; }
.st-leiste__zelle dd b { color: var(--st-rot-text); font-weight: 500; }
.st-leiste__zelle dd small { display: block; color: var(--st-leise); font-size: 13px; }
.st-leiste__zelle .st-status { font-size: 16px; }
/* Verweis im dd (27.10.2026, vorher a um dt und dd, axe definition-list): Die Fläche des Verweises deckt die ganze Zelle,
   Aussehen, Klick und Hover wie vorher; der Fokusring liegt um die Zelle. */
.st-leiste__zelle--verweis { position: relative; }
body .st-leiste .st-leiste__verweis { color: inherit; text-decoration: none; }  /* body: gegen `body.be-marke-laden a` (Blau) */
.st-leiste__verweis::after { content: ""; position: absolute; inset: 0; }
/* Fokus: der Ring der Marke liegt am Verweis selbst (Nummer, Wochentag); ein Ring um die Zelle wurde von der Leiste oben und unten abgeschnitten. */
.st-leiste__zelle--verweis:hover dd { color: var(--st-blau); }
/* Prüfer 27.10.2026 N1: `body.be-marke-laden a:hover` (0,2,2) färbte Nummer und Wochentag dunkler als den Rest des dd. */
body .st-leiste .st-leiste__verweis:hover { color: inherit; }
/* Prüfer 27.10.2026 M1: Im Klick-Editor lag die Klickfläche über „Telefon“, der Unterzeile und „Lauftreff“; ein Klick rief
   an oder verließ die Seite, statt den Text zu öffnen. Im Bearbeitungsmodus keine Fläche, der Verweis bleibt an Nummer und Tag. */
.be-edit-active .st-leiste__verweis::after { content: none; }
@media (min-width: 900px) {
    .st-leiste__innen { grid-template-columns: repeat(4, 1fr); }
    .st-leiste__zelle, .st-leiste__zelle:nth-child(odd), .st-leiste__zelle:nth-child(even) { border-bottom: 0; padding: var(--st-5); border-right: 1px solid var(--st-linie-leise); }
    .st-leiste__zelle:first-child { padding-left: 0; }
    .st-leiste__zelle:last-child { border-right: 0; padding-right: 0; }
}

/* ---------- Fotos mit Bildzeile (Kern, Lauftreff-Band, Textabschnitt) ---------- */
/* Die Unterzeile steht unter dem Rahmen in derselben Form wie am Druckbild: Monospace, Versalien, leise. Runde 6:
   Fotos ohne Zeile lasen sich als Platzhalter. Die Zeile steht in <figure>, der Kontrastscan lässt Bildunterschriften aus,
   deshalb hier ausdrücklich eine Farbe mit 7:1 (leise) bzw. 8:1 (dunkel-leise). */
.st-figur { margin: 0; display: grid; gap: var(--st-2); }
/* Fadenkreuz-Ecken (Messbogen) und rote Mono-Marke im Bild */
.st-ecken { position: absolute; inset: 12px; pointer-events: none; }
.st-ecken::before, .st-ecken::after, .st-ecken i::before, .st-ecken i::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1.5px solid rgba(255,255,255,.9); mix-blend-mode: difference; }
.st-ecken::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.st-ecken::after { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.st-ecken i::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.st-ecken i::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.st-marke { position: absolute; left: 16px; bottom: 16px; font-family: var(--st-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(16,22,31,.78); padding: 6px 10px; display: inline-flex; gap: 8px; align-items: center; }
.st-marke i { width: 8px; height: 8px; border-radius: 50%; background: var(--st-rot); }
.st-bildzeile { margin: 0; font-family: var(--st-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-leise); }
.st-abschnitt--dunkel .st-bildzeile { color: var(--st-dunkel-leise); }

/* Aktuelle Hinweise mit Ablaufdatum */
.st-hinweise { border-top: 1px solid var(--st-linie-leise); border-bottom: 1px solid var(--st-linie-leise); background: var(--st-flaeche); }
.st-hinweise__zeile { display: grid; grid-template-columns: 10px 1fr; gap: var(--st-3); padding: var(--st-3) 0; margin: 0; font-size: var(--st-t0); }
.st-hinweise__zeile::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--st-blau); margin-top: 6px; }
.st-hinweise__zeile--wichtig::before { background: var(--st-rot); }

/* ---------- Seitenkopf der Unterseiten: Bogen mit Fotoband (Entwurf 2, 17.09.2026) ---------- */
/* Foto als Band über die volle Breite im 3:1-Format der Kopfbilder, darüber ragt die weiße Titelkarte ins Band.
   Der feste Seitenkopf (layout.css) liegt darüber: das Band beginnt unter Kopf und Vorzeile. */
/* Das Foto füllt den ganzen Kopf bis zur Unterkante der Titelkarte (Dennis 18.09.: „Leerraum und Borderlinie unter dem Band“).
   Vorher: Band 3:1, Karte ragte 120 px hinein, darunter Seitengrund. Jetzt: der Abschnitt trägt oben den Platz für Kopf und
   Luft, das Foto liegt absolut dahinter, die Karte schließt den Abschnitt ab. Die Fotohöhe folgt der Karte (ca. 2,2:1 am
   Rechner), also weniger Beschnitt als bei 3:1. */
.st-ukopf--band { position: relative; padding-top: calc(var(--st-kopf-hoehe, 73px) + 180px); }  /* Unterseiten flacher als die Startseite (Dennis 18.09.): Karte früh, Foto nur als Band darüber. Mobil 180 statt 110 px: bei 110 war das Motiv ein Streifen (Gesicht in Augenhöhe geschnitten, Audit 13.8) */
/* Das Foto beginnt UNTER dem festen Kopf, nicht dahinter: Der Kopf ist deckend, die oberen 151 px (mobil 73) des Motivs waren
   nie zu sehen. So schnitt das Lauftreff-Motiv beide Läufer am Kopf ab, obwohl der Schwerpunkt oben lag (Audit 13.7). */
.st-ukopf--band .st-ukopf__band { position: absolute; inset: var(--st-kopf-hoehe, 73px) 0 0; overflow: hidden; background: var(--st-linie-leise); }
.st-ukopf__band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-ukopf__band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,22,31,.22), rgba(16,22,31,0) 40%, rgba(16,22,31,.5) 100%); pointer-events: none; }
/* Bewegter Kopf (30.09.2026, templates/standort-seitenkopf.php, assets/js/kopfvideo.js). Das Video trägt seinen Grund selbst
   (Messpapier #EEF2F8), der Abdunkler ist für Fotos und fällt weg. Breit (ab 1100 px): das Band füllen, rechts bündig, denn
   der Entwurf ist von rechts aufgebaut (Läufer immer rechts neben der Karte). Schmal: nur der Streifen über der Karte ist
   sichtbar (180 px, ab 900 px 150 px, wie das padding-top oben), dorthin gehört das ganze Bild. */
.st-ukopf__band--video { background: #EEF2F8; }
.st-ukopf__band--video::after { display: none; }
.st-ukopf__band--video picture, .st-ukopf__video { position: absolute; left: 0; right: 0; top: 0; height: 100%; }
.st-ukopf__band--video img, .st-ukopf__video { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; display: block; }
.st-ukopf__video { opacity: 0; transition: opacity .6s ease; }
.st-ukopf__band--video.laeuft .st-ukopf__video { opacity: 1; }
@media (max-width: 1099px) {
    .st-ukopf__band--video picture, .st-ukopf__video { height: 180px; }
    .st-ukopf__band--video img, .st-ukopf__video { object-position: 50% 50%; }
}
@media (min-width: 900px) and (max-width: 1099px) { .st-ukopf__band--video picture, .st-ukopf__video { height: 150px; } }
.st-ukopf__halt { position: absolute; right: 12px; top: 44px; z-index: 2; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.92); border: 1px solid var(--st-linie); color: var(--st-tinte); display: grid; place-items: center; cursor: pointer; transition: background .2s ease; }
.st-ukopf__halt[hidden] { display: none; }
.st-ukopf__halt:hover { background: #FFFFFF; }
.st-ukopf__halt:focus-visible { outline: none; box-shadow: var(--st-fokus); }
.st-ukopf__halt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.st-ukopf__halt-start { display: none; fill: currentColor; stroke-width: 1.5; }
.st-ukopf__halt.ist-angehalten .st-ukopf__halt-pause { display: none; }
.st-ukopf__halt.ist-angehalten .st-ukopf__halt-start { display: block; }
@media (max-width: 1099px) { .st-ukopf__halt { top: 8px; right: 8px; } }
@media (prefers-reduced-motion: reduce) { .st-ukopf__video { transition: none; } }
.st-ukopf--band .st-ukopf__blatt { position: relative; margin-top: 0; }
.st-ukopf--karte .st-ukopf__blatt { padding-top: calc(var(--st-kopf-hoehe, 73px) + var(--st-6)); }
.st-ukopf__karte { position: relative; background: var(--st-flaeche); padding: var(--st-6) var(--st-6) var(--st-5); display: grid; gap: var(--st-4); max-width: 44rem; border-top: 6px solid var(--st-blau); box-shadow: 0 30px 60px -40px rgba(16,22,31,.4); }
/* Roter Faden zum Druckbild der Startseite (Dennis 18.09.: „sollte auf jeder Seite wiederholt werden“): Die Oberkante der Titelkarte ist
   die Druckskala des Bogens (Blau → Rot, dieselben Werte wie `.st-druckbild__skala i`), und rechts oben steht das Druckbild als
   Messmarke, gerechnet von druckbild.js wie im Kopf der Startseite, es baut sich beim ersten Sichtkontakt auf. */
.st-ukopf--band .st-ukopf__karte { border-top-color: transparent; }
.st-ukopf--band .st-ukopf__karte::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: linear-gradient(90deg, #6F92D6 0%, var(--st-blau) 38%, var(--st-rot) 100%); }
/* Die Marke steht unten rechts neben Untertitel (Satzmaß 32 rem) und Fußzeile: oben rechts lag sie in langen Titeln
   („Vereine und Firmen“ läuft bis an den Rand) und drückte mobil den Zähler in eine zweite Zeile (Abzug 18.09.). */
.st-ukopf__marke { position: absolute; right: var(--st-6); bottom: var(--st-5); width: 44px; margin: 0; pointer-events: none; }
.st-ukopf__marke canvas { width: 100%; height: auto; display: block; }
/* Rechner: auf Höhe des Untertitels (Satzmaß 32 rem lässt rechts 96 px frei), unter der Titelzeile (Karte 48 + Pfad 20 + 16 + H1 69)
   und über der Fußzeile; unten rechts lag sie im dritten Fakt („Nachbestellung garantiert“, Abzug 18.09.). */
@media (min-width: 900px) { .st-ukopf__marke { right: var(--st-7); top: 165px; bottom: auto; width: 52px; } }
@media (max-width: 899px) { .st-ukopf--band .st-ukopf__daten { padding-right: 60px; } }  /* Handy: lange Faktwerte („25 €, beim Kauf verrechnet“) liefen unter die Marke (gemessen 18.09.) */
.st-ukopf--karte .st-ukopf__karte { box-shadow: none; padding-inline: 0; border-top: 0; max-width: 46rem; background: transparent; }
/* Gleiche Kartenhöhe auf jeder Seite (Dennis 18.09.: Treppe beim Durchklicken): der Untertitel reserviert drei Zeilen, die Fußzeile eine. */
.st-ukopf--band .st-ukopf__sub { min-height: calc(3 * 1.45em); }
.st-ukopf--band .st-ukopf__daten { min-height: calc(13px * 1.2 + var(--st-3) + 1px); }
.st-ukopf__pfad { font-family: var(--st-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-leise); display: flex; gap: var(--st-3); align-items: center; flex-wrap: wrap; }
.st-ukopf__pfad .breadcrumb, .st-ukopf__pfad .breadcrumb__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--st-2); align-items: center; }
.st-ukopf__pfad .breadcrumb__item { color: var(--st-leise); text-shadow: none; display: inline-flex; align-items: center; gap: var(--st-2); }
.st-ukopf__pfad .breadcrumb__item + .breadcrumb__item::before { content: "›"; color: var(--st-linie); }
.st-ukopf__pfad .breadcrumb__item a { color: var(--st-tinte); text-decoration: none; }
.st-ukopf__pfad .breadcrumb__item.is-current { color: var(--st-blau); }
.st-ukopf__nr { margin-left: auto; color: var(--st-blau); font-weight: 500; }  /* Kante 6 px und Zähler in Blau: mehr Marke im Kopf (Dennis 17.09.) */
/* Handy: Zähler immer rechts in der ERSTEN Zeile (Dennis 30.09.2026: „Treppeneffekt der 05 / 08, lange Titel verdrängen
   die Anzahl in die zweite Reihe“). Gemessen: bei 360 px 256 px Platz, „Start › Vereine und Firmen“ + Zähler brauchten 347.
   Deshalb unter 600 px: „Start ›“ fällt weg (das Logo darüber führt zur Startseite), Sperrung 0,08 statt 0,12 em, kein
   Umbruch; ein künftiger zu langer Seitenname endet mit „…“, statt den Zähler zu verdrängen. Prüfung 60 misst 320 bis 430 px. */
@media (max-width: 599px) {
    .st-ukopf__pfad { flex-wrap: nowrap; letter-spacing: 0.08em; }
    .st-ukopf__pfad .breadcrumb { flex: 1 1 auto; min-width: 0; }
    .st-ukopf__pfad .breadcrumb__list { flex-wrap: nowrap; min-width: 0; }
    /* Genau eine Krume: die Ebene nach „Start“. Seite: ihr Name. Meldung (Start › Neuigkeiten › Titel): „Neuigkeiten“ als
       Weg zurück, der Titel steht groß darunter. Mit drei Krumen schnitt die mittlere ab (gemessen 30.09.2026). */
    .st-ukopf__pfad .breadcrumb__item { display: none; }
    .st-ukopf__pfad .breadcrumb__item:nth-child(2), .st-ukopf__pfad .breadcrumb__item:only-child {
        display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 24px; }
    .st-ukopf__pfad .breadcrumb__item:nth-child(2)::before { display: none; }
    .st-ukopf__nr { flex: none; }
}
.st-ukopf__sub { font-size: var(--st-t2); color: var(--st-text); max-width: 32rem; line-height: 1.45; margin: 0; }
.st-ukopf__daten { display: flex; flex-wrap: wrap; gap: var(--st-3) var(--st-6); font-family: var(--st-mono); font-size: 13px; color: var(--st-leise); padding-top: var(--st-3); border-top: 1px solid var(--st-linie-leise); margin: 0; }
.st-ukopf__daten div { display: inline-flex; gap: 6px; }
/* Die Beschriftung schrumpft nie: Sie stand in der Flex-Zeile neben einem langen Wert, und mit `overflow-wrap: anywhere`
   (main.css) zerfiel sie auf dem Handy („Videoanaly-se“, „Koste-n“, Abnahme 28.09.2026). Umbrechen darf der Wert, an Wortgrenzen. */
.st-ukopf__daten dt { color: var(--st-leise); flex: none; white-space: nowrap; }
.st-ukopf__daten dd { margin: 0; color: var(--st-tinte); font-weight: 500; min-width: 0; overflow-wrap: break-word; }
.st-ukopf--recht .st-ukopf__blatt { padding-bottom: var(--st-5); }
@media (min-width: 900px) {
    .st-ukopf--band { padding-top: calc(var(--st-kopf-hoehe, 151px) + 150px); }
    .st-ukopf__karte { padding: var(--st-7) var(--st-7) var(--st-6); }
}

/* ---------- Fotos (randabschnittend) ---------- */
.st-foto { position: relative; overflow: hidden; background: var(--st-linie-leise); }
.st-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Versprechen (drei Sätze, Linien statt Karten) ---------- */
.st-versprechen { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--st-linie); }
.st-versprechen li { display: grid; grid-template-columns: 32px 1fr; gap: var(--st-4); padding: var(--st-5) 0; border-bottom: 1px solid var(--st-linie); }
.st-versprechen h3 { margin: 0 0 var(--st-2); }
.st-versprechen p { color: var(--st-leise); max-width: 30rem; margin: 0; }
@media (min-width: 900px) { .st-versprechen { grid-template-columns: repeat(3, 1fr); column-gap: var(--st-7); } }

/* ---------- Kern: Foto, Ablauf, Preis ---------- */
/* Der Kern und der Kontakt stehen auf weißer Fläche, die übrigen Abschnitte auf dem Seitengrund: Runde 6 (17.09.2026) maß
   fünf Blöcke auf demselben Grund mit derselben Luft, nur das dunkle Band brach den Rhythmus. */
.st-kern-block, .st-kontakt-block, .st-abschnitt--hell { background: var(--st-flaeche); }  /* --hell: der Flächenwechsel der Unterseiten (be_st_abschnitt) */
.st-kern { display: grid; gap: var(--st-6); }
/* Foto 3:2 statt 4:5: Die Kopfbilder der Läden sind 1130 x 380, ein 4:5-Rahmen zeigte davon einen hochgerechneten Streifen.
   Am Rechner haftet das Foto neben dem Ablauf (sticky), die Bildzeile wandert mit. */
.st-kern__figur { align-self: start; }
.st-kern__foto { aspect-ratio: 3 / 2; margin: 0; }  /* bündig zur Inhaltsbreite (1152 px); der Anschnitt über den Rand hinaus machte den Abschnitt breiter als die anderen (Dennis 17.09.) */
.st-kern__text { display: grid; gap: var(--st-5); }
.st-kern__text .st-titel { margin: 0; }
.st-ablauf { list-style: none; margin: 0; padding: 0; counter-reset: schritt; border-top: 1px solid var(--st-linie); }
.st-ablauf li { counter-increment: schritt; display: grid; grid-template-columns: 44px 1fr; gap: var(--st-3); padding: var(--st-4) 0; border-bottom: 1px solid var(--st-linie); position: relative; }
/* Schiene: die Linie unter dem Schritt läuft blau voll, sobald der Abschnitt im Bild ist (main.js setzt .is-visible am Container) */
.st-ablauf li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--st-blau); transition: width .6s ease; }
.is-visible .st-ablauf li::after { width: 100%; }
.st-ablauf li:nth-child(2)::after { transition-delay: .15s } .st-ablauf li:nth-child(3)::after { transition-delay: .3s } .st-ablauf li:nth-child(4)::after { transition-delay: .45s }
@media (prefers-reduced-motion: reduce) { .st-ablauf li::after { width: 100%; transition: none; } }
.st-ablauf li::before { content: counter(schritt, decimal-leading-zero); font-family: var(--st-mono); font-size: var(--st-t0); color: var(--st-blau); padding-top: 3px; }
.st-ablauf b { display: block; font-weight: 700; color: var(--st-tinte); }
.st-ablauf span { color: var(--st-leise); }
/* Preiszeile als Karte (Dennis 17.09.: „Kostenlos und Text dazu als Card bauen“): blaue Fläche, Betrag groß, Text daneben */
.st-preis { display: grid; grid-template-columns: 1fr; gap: var(--st-2); padding: var(--st-5); background: var(--st-blau-hell); border-radius: 8px; border-left: 3px solid var(--st-blau); }  /* eine Spalte: Betrag oben, Text darunter, kein Leerraum unter dem Betrag (Dennis 17.09.) */
.st-preis b { font-family: var(--st-titel); font-variation-settings: "wdth" 86; font-size: var(--st-t4); font-weight: 800; color: var(--st-blau); letter-spacing: -0.03em; white-space: nowrap; line-height: 1; }
.st-preis > span { color: var(--st-text); max-width: 34rem; font-size: var(--st-t0); }  /* nur der Text, nicht der Klick-Marker im Betrag: `.st-preis span` setzte „Kostenlos“ auf 14 px (Abnahme 28.09.2026) */
@media (min-width: 1100px) {
    .st-kern { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--st-9); align-items: start; }
    .st-kern__figur { position: sticky; top: calc(var(--header-height, 88px) + var(--st-5)); }
    .st-kern__foto { aspect-ratio: 4 / 3; margin: 0; }
    /* Kurzform ohne Ablauf und Preis (Startseite seit Audit 13.1: die vier Schritte stehen nur noch auf /beratung/): Text mittig neben einem flacheren Foto */
    .st-kern--kurz { align-items: center; }
    .st-kern--kurz .st-kern__figur { position: static; }
    .st-kern--kurz .st-kern__foto { aspect-ratio: 3 / 2; }
}

/* Leistungen als Liste (weitere Leistungen unter dem Kern) */
.st-leistungen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--st-linie); }
.st-leistungen li { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--st-4); align-items: start; padding: var(--st-5) 0; border-bottom: 1px solid var(--st-linie); }
.st-leistungen h3 { margin: 0 0 var(--st-1); }
.st-leistungen p { color: var(--st-leise); margin: 0; max-width: 34rem; }
.st-leistungen .st-preis-klein { font-family: var(--st-mono); font-size: var(--st-t0); color: var(--st-tinte); text-align: right; white-space: nowrap; }
.st-leistungen .st-preis-klein small { display: block; color: var(--st-leise); font-size: 11px; white-space: normal; max-width: 12rem; }
@media (max-width: 699px) { .st-leistungen li { grid-template-columns: 32px 1fr; } .st-leistungen .st-preis-klein { grid-column: 2; text-align: left; } }

/* ---------- Lauftreff-Band (die eine dunkle Fläche) ---------- */
.st-treff { background: var(--st-tinte); color: var(--st-dunkel-text); }
.st-treff .st-titel, .st-treff h3 { color: #fff; }
/* Einleitung im dunklen Block: --st-leise ist für helle Flächen gerechnet (2,4:1 auf Tinte, Kontrastscan 18.09.) */
.st-abschnitt--dunkel .st-kopf p, .st-abschnitt--dunkel .st-kopf__intro { color: var(--st-dunkel-leise); }
.st-treff__innen { padding-block: var(--st-8); display: grid; gap: var(--st-6); }
.st-treff__inhalt { display: grid; gap: var(--st-5); }
.st-treff__zeit { font-family: var(--st-titel); font-variation-settings: "wdth" 84; font-weight: 700; font-size: var(--st-t6); line-height: 0.9; letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; margin: 0; }
.st-treff__zeit small { display: block; font-family: var(--st-mono); font-size: var(--st-t-1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-dunkel-leise); margin-bottom: var(--st-3); font-weight: 400; }
.st-treff__naechster { font-family: var(--st-mono); font-size: var(--st-t0); color: var(--st-dunkel-blau); display: flex; align-items: center; gap: var(--st-2); margin: 0; }
.st-treff__naechster i { width: 10px; height: 10px; background: var(--st-rot); border-radius: 50%; flex: none; }
.st-treff__naechster--ausfall { color: var(--st-dunkel-leise); }
.st-treff__fakten { margin: 0; border-top: 1px solid var(--st-dunkel-linie); }
.st-treff__fakten > div { display: grid; grid-template-columns: 96px 1fr; gap: var(--st-3); padding: var(--st-3) 0; border-bottom: 1px solid var(--st-dunkel-linie); font-family: var(--st-mono); font-size: var(--st-t0); }
.st-treff__fakten dt { color: var(--st-dunkel-leise); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 3px; }
.st-treff__fakten dd { margin: 0; color: #fff; }
.st-treff__fakten dd a { color: var(--st-dunkel-blau); }
.st-treff__text { color: var(--st-dunkel-leise); max-width: 30rem; }
.st-treff__text p { margin: 0; }
.st-treff__foto { aspect-ratio: 16 / 10; margin: 0; }
@media (min-width: 1100px) {
    .st-treff__innen { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--st-9); align-items: center; padding-block: var(--st-9); }
    .st-treff__figur { order: 2; }
    .st-treff__foto { margin: 0; aspect-ratio: 4 / 3; }
}
/* Weitere Treffs als Liste unter dem Band */
.st-treff-liste { list-style: none; margin: var(--st-6) 0 0; padding: 0; border-top: 1px solid var(--st-dunkel-linie); }
.st-treff-liste li { display: grid; grid-template-columns: 96px 1fr; gap: var(--st-3); padding: var(--st-3) 0; border-bottom: 1px solid var(--st-dunkel-linie); font-family: var(--st-mono); font-size: var(--st-t0); }

/* ---------- Neuigkeiten (Liste, kein Raster) ---------- */
.st-neu { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--st-linie); }
.st-neu li { display: grid; gap: var(--st-2); padding: var(--st-5) 0; border-bottom: 1px solid var(--st-linie); }
.st-neu time { font-family: var(--st-mono); font-size: var(--st-t-1); letter-spacing: 0.06em; color: var(--st-leise); }
.st-neu h3 { margin: 0; }
.st-neu h3 a { color: var(--st-tinte); text-decoration: none; }
.st-neu h3 a:hover { color: var(--st-blau); }
.st-neu p { color: var(--st-leise); max-width: 34rem; margin: 0; }
.st-neu__art { font-family: var(--st-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-blau); }
.st-neu__bild { aspect-ratio: 21 / 10; overflow: hidden; margin: var(--st-2) 0 0; max-width: 34rem; }
.st-neu__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) { .st-neu li { grid-template-columns: 160px 1fr; column-gap: var(--st-6); } .st-neu li time { grid-row: span 4; padding-top: 4px; } }

/* Meldungen als Karten (Foto 21:10 wie die 705 x 333 der Live-Seite, Datum, Titel, Anriss, Weiterlesen) */
.st-neu-karten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--st-5); }
.st-karte { background: var(--st-flaeche); border: 1px solid var(--st-linie-leise); display: grid; grid-template-rows: auto 1fr; }
.st-karte__bild { display: block; aspect-ratio: 21 / 10; overflow: hidden; background: var(--st-linie-leise); }
.st-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.st-karte:hover .st-karte__bild img { transform: scale(1.03); }
/* Ohne Titelbild: das Datum als Kachel (Tag.Monat groß, Jahr klein) statt eines Kalendersymbols, die Fläche trägt dann
   Information (Runde 6, 17.09.2026: elf gleiche Symbole lasen sich als leeres Raster). */
.st-karte__bild--leer { display: grid; place-items: center; background: var(--st-blau-hell); color: var(--st-blau); }
.st-karte__datum { font-family: var(--st-titel); font-variation-settings: "wdth" 90; font-weight: 700; font-size: var(--st-t4); letter-spacing: -0.03em; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.st-karte__datum small { display: block; font-family: var(--st-mono); font-weight: 400; font-size: 12px; letter-spacing: 0.14em; margin-top: var(--st-2); }
.st-karte__text { display: grid; gap: var(--st-2); padding: var(--st-5); align-content: start; }
.st-karte__meta { display: flex; flex-wrap: wrap; gap: var(--st-2) var(--st-3); align-items: center; font-family: var(--st-mono); font-size: var(--st-t-1); letter-spacing: 0.06em; color: var(--st-leise); }
.st-karte__meta .st-neu__art { font-size: 12px; }
.st-karte h3 { margin: 0; font-size: var(--st-t2); }
.st-karte h3 a { color: var(--st-tinte); text-decoration: none; }
.st-karte h3 a:hover { color: var(--st-blau); }
.st-karte p { margin: 0; color: var(--st-leise); }
.st-karte__weiter { margin-top: var(--st-2); display: inline-flex; align-items: center; gap: var(--st-2); font-weight: 700; font-size: var(--st-t0); color: var(--st-blau); text-decoration: none; width: fit-content; }
.st-karte__weiter .st-icon { width: 18px; height: 18px; color: currentColor; }
.st-karte__weiter:hover { color: var(--st-blau-tief); }
@media (min-width: 700px) { .st-neu-karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .st-neu-karten { grid-template-columns: repeat(3, 1fr); gap: var(--st-6); } }
@media (prefers-reduced-motion: reduce) { .st-karte__bild img { transition: none; } .st-karte:hover .st-karte__bild img { transform: none; } }

/* ---------- Team ---------- */
.st-team { display: grid; gap: var(--st-6) var(--st-5); grid-template-columns: repeat(2, 1fr); }
.st-person { display: grid; gap: var(--st-3); align-content: start; }
.st-person__bild { aspect-ratio: 1; overflow: hidden; background: var(--st-linie-leise); }
.st-person__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-person__bild--initialen { display: grid; place-items: center; font-family: var(--st-titel); font-weight: 700; font-size: var(--st-t4); color: var(--st-blau); }
.st-person__name { margin: 0; font-size: var(--st-t2); }
.st-person__rolle { font-family: var(--st-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-blau); margin: 0; }
.st-person__text { color: var(--st-leise); font-size: var(--st-t0); }
.st-person__text p { margin: 0; }
@media (min-width: 900px) { .st-team { grid-template-columns: repeat(3, 1fr); gap: var(--st-7) var(--st-6); } }
.st-team--kurz { grid-template-columns: repeat(3, 1fr); gap: var(--st-3); }
.st-team--kurz .st-person__text, .st-team--kurz .st-person__rolle { display: none; }
.st-team--kurz .st-person__name { font-size: var(--st-t0); }
@media (min-width: 900px) { .st-team--kurz { grid-template-columns: repeat(6, 1fr); } }

/* ---------- Logowand (Marken, Partner): Bauform der Sponsorenwand (components.css), nur zwei Werte je Wand ---------- */
/* Marken: 15 Logos à 120 x 76 aus der Live-Seite, fünf je Reihe (drei volle Reihen), Logo in Originalgröße statt auf
   Kartenbreite gezogen (hochgerechnete 120-px-Dateien wären unscharf). Partner: 170 x 100, vier je Reihe, die letzte
   Reihe steht mittig (Flexbox der Sponsorenwand). */
.sponsors-wall__grid.st-logowand--marken  { --logo-pro-reihe: 5; --logo-h: 76px; }
.sponsors-wall__grid.st-logowand--partner { --logo-pro-reihe: 4; --logo-h: 100px; }
.sponsors-wall__grid.st-logowand .sponsors-wall__item { border: 1px solid var(--st-linie-leise); border-radius: var(--st-r2); min-height: 116px; }
/* Partnerkarte: Deckel 100 px, die Tinte darf 85 davon füllen (Tintenausgleich), plus 16 + 16 Polster und 2 Rahmen = 119. Mit 116 wuchs
   die Karte eines hohen Logos (Box53) um 3 px, die Reihe stand ungleich (gemessen 18.09.2026). */
.sponsors-wall__grid.st-logowand--partner .sponsors-wall__item { min-height: 120px; }
.sponsors-wall__grid.st-logowand .sponsors-wall__item img { width: auto; max-width: 100%; opacity: 1; }
.sponsors-wall__grid.st-logowand .sponsors-wall__item .logo-tinte { opacity: 1; }
.st-logowand__name { font-family: var(--st-titel); font-weight: 500; color: var(--st-tinte); text-align: center; }
@media (max-width: 1023px) { .sponsors-wall__grid.st-logowand--marken { --logo-pro-reihe: 3; } }
/* Handy: drei je Reihe statt zwei (Audit 13.9: 15 Logos in acht Reihen, 838 px; die Dateien sind 120 px, 52 px Deckel reicht). Partner bleiben bei zwei (breitere Logos). */
@media (max-width: 599px)  { .sponsors-wall__grid.st-logowand--marken { --logo-pro-reihe: 3; --logo-h: 52px; } .sponsors-wall__grid.st-logowand--partner { --logo-pro-reihe: 2; --logo-h: 64px; } .sponsors-wall__grid.st-logowand .sponsors-wall__item { min-height: 80px; } .sponsors-wall__grid.st-logowand--partner .sponsors-wall__item { min-height: 96px; } }

/* ---------- Auszeichnungen: eine Karte je Auszeichnung, Jahr als Typografie, Siegel in Originalgröße ---------- */
.st-auszeichnungen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--st-4); }
.st-auszeichnung { display: grid; grid-template-columns: auto auto 1fr; gap: var(--st-6); align-items: center; padding: var(--st-6); background: var(--st-blau-hell); border-left: 3px solid var(--st-blau); border-radius: 8px; }
.st-auszeichnung__jahr { font-family: var(--st-titel); font-variation-settings: "wdth" 84; font-size: var(--st-t6); font-weight: 800; color: var(--st-blau); letter-spacing: -0.04em; line-height: 0.9; }
.st-auszeichnung__bild { width: 120px; height: auto; display: block; border: 1px solid rgba(47, 82, 160, 0.2); background: #fff; }  /* 120 x 141, nie hochrechnen */
.st-auszeichnung__titel { font-family: var(--st-titel); font-variation-settings: "wdth" 88; font-weight: 800; font-size: var(--st-t3); letter-spacing: -0.02em; color: var(--st-tinte); display: block; line-height: 1.1; }
.st-auszeichnung__von { font-family: var(--st-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--st-leise); display: block; margin-top: var(--st-2); }
@media (max-width: 699px) { .st-auszeichnung { grid-template-columns: auto 1fr; } .st-auszeichnung__jahr { grid-column: 1 / -1; } }

/* ---------- Häufige Fragen ---------- */
.st-faq { border-top: 1px solid var(--st-linie); max-width: 46rem; }
.st-faq__eintrag { border-bottom: 1px solid var(--st-linie); }
.st-faq__eintrag summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: var(--st-4); align-items: center; padding: var(--st-4) 0; font-weight: 700; color: var(--st-tinte); font-size: var(--st-t1); }
.st-faq__eintrag summary::-webkit-details-marker { display: none; }
.st-faq__eintrag summary::after { content: "+"; font-family: var(--st-mono); font-size: var(--st-t2); color: var(--st-blau); text-align: center; }
.st-faq__eintrag[open] summary::after { content: "–"; }
.st-faq__antwort { padding: 0 0 var(--st-5); color: var(--st-leise); max-width: 40rem; }
.st-faq__antwort p { margin: 0; }
.st-faq__antwort p + p { margin-top: var(--st-3); }

/* ---------- Kontakt ---------- */
.st-kontakt { display: grid; gap: var(--st-6); }
.st-kontakt__figur { margin-top: var(--st-5); }
.st-kontakt__foto { aspect-ratio: 3 / 1; }
/* Ohne Zeitentabelle (Startseite, zeiten=false) trägt das Foto die Mittelspalte allein: 4:3 statt Streifen, kein Abstand oben (Abzug 18.09.) */
.st-kontakt--ohne-zeiten .st-kontakt__foto { aspect-ratio: 4 / 3; }
.st-kontakt--ohne-zeiten .st-kontakt__figur { margin-top: 0; }
.st-kontakt__daten { display: grid; gap: var(--st-5); align-content: start; }
.st-kontakt__daten .st-titel { margin: 0; font-size: clamp(28px, 3.1vw, 46px); white-space: nowrap; }
.st-kontakt__adresse { font-style: normal; line-height: 1.55; margin: 0; }
.st-kontakt__adresse strong { display: block; color: var(--st-tinte); }
.st-kontakt__wege { display: grid; gap: var(--st-2); }
.st-kontakt__weg { font-family: var(--st-mono); font-size: var(--st-t0); color: var(--st-tinte); text-decoration: none; border-bottom: 1px solid var(--st-linie); width: fit-content; padding-bottom: 2px; display: inline-flex; gap: var(--st-2); align-items: center; }
.st-kontakt__weg:hover { border-color: var(--st-tinte); color: var(--st-tinte); }
.st-kontakt__weg .st-icon { width: 18px; height: 18px; }
.st-kontakt__parken { color: var(--st-leise); margin: 0; }
.st-zeiten { width: 100%; border-collapse: collapse; font-family: var(--st-mono); font-size: var(--st-t0); font-variant-numeric: tabular-nums; }
.st-zeiten caption { text-align: left; font-family: var(--st-schrift); font-weight: 700; color: var(--st-tinte); padding-bottom: var(--st-3); display: flex; justify-content: space-between; align-items: center; gap: var(--st-3); flex-wrap: wrap; }
/* Die Beschriftung zählt zur Mindestbreite der Tabelle. Der Zustandssatz („Geschlossen, öffnet heute um 10 Uhr“, nowrap)
   machte die Tabelle 430 px breit, sie lief unter die Karte und auf dem Handy aus dem Bild (17.09.2026). */
.st-zeiten caption .st-status { white-space: normal; text-align: left; }
/* ⚠️ main.css erlaubt `overflow-wrap: anywhere` auf jeder Zelle; bei `table-layout: auto` heißt das „braucht keinen Platz“,
   und die Zeiten standen Zeichen für Zeichen untereinander (17.09.2026). Deshalb nowrap und normaler Umbruch. */
.st-zeiten th, .st-zeiten td { text-align: left; padding: var(--st-3) 0; border-top: 1px solid var(--st-linie); font-weight: 400; overflow-wrap: normal; white-space: nowrap; }
.st-zeiten th { padding-right: var(--st-4); }
.st-zeiten td { text-align: right; color: var(--st-tinte); }
.st-zeiten tr:last-child th, .st-zeiten tr:last-child td { border-bottom: 1px solid var(--st-linie); }
.st-zeiten tr.ist-heute th, .st-zeiten tr.ist-heute td { color: var(--st-blau); font-weight: 500; }
.st-zeiten tr.ist-heute th::after { content: "heute"; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-left: var(--st-2); }
.st-zeiten tr.ist-zu td { color: var(--st-leise); }
.st-zeiten__sonder { margin: var(--st-3) 0 0; padding: 0; list-style: none; font-family: var(--st-mono); font-size: var(--st-t-1); color: var(--st-rot-text); }
.st-zeiten__fuss { font-size: var(--st-t-1); color: var(--st-leise); margin: var(--st-3) 0 0; }
.st-kontakt__karte { min-height: 320px; }
.st-kontakt__karte .be-map-gate, .st-kontakt__karte iframe { border-radius: 0; }
/* Karte in Bunert-Blau (Dennis 18.09.2026): Die OpenStreetMap-Kacheln liegen in einem fremden iframe, ihr Inhalt lässt sich
   nicht umfärben, aber das ganze Fenster: Graustufen, dann über sepia + hue-rotate auf 190° (Blau) gedreht und gesättigt.
   Ergebnis wie eine Blaupause auf dem Rasterpapier, die Ortsmarke bleibt erkennbar. Bedienung (Zoom, Ziehen) unverändert. */
/* Die Ortsmarke der Karte geht in der Blaupause unter (Dennis 18.09.): eigene Stecknadel in Bunert-Rot über der Kartenmitte.
   Der Ausschnitt ist auf den Laden zentriert (be_map_src), deshalb darf die Karte nicht mehr gezogen werden, sonst wandert
   die Nadel vom Laden weg; dafür steht unter der Karte der Verweis zur großen Karte. */
/* Beide Bauformen: auf der Startseite umschließt `.st-kontakt__karte` die Sperre, auf /kontakt/ trägt die Sperre die Klasse selbst
   (be_map_embed mit `class`); dort blieb die Karte grau (Dennis 18.09.). */
.st-kontakt__karte .be-map-gate.is-loaded, .be-map-gate.st-kontakt__karte.is-loaded { position: relative; }
.st-kontakt__karte .be-map-gate.is-loaded iframe, .be-map-gate.st-kontakt__karte.is-loaded iframe { pointer-events: none; }
.st-kontakt__karte .be-map-gate.is-loaded::after, .be-map-gate.st-kontakt__karte.is-loaded::after { content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 48px; transform: translate(-50%, -100%); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 48'%3E%3Cpath d='M18 46C18 46 4 28 4 16a14 14 0 0 1 28 0c0 12-14 30-14 30z' fill='%23E53134' stroke='%23fff' stroke-width='3'/%3E%3Ccircle cx='18' cy='16' r='5.5' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain; filter: drop-shadow(0 2px 3px rgba(16,22,31,.35)); }
.st-kontakt__kartenlink { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--st-3); font-family: var(--st-mono); font-size: 13px; letter-spacing: .02em; }
.st-kontakt__karte .be-map-gate.is-loaded iframe, .be-map-gate.st-kontakt__karte.is-loaded iframe { filter: grayscale(1) sepia(.5) hue-rotate(190deg) saturate(2.2) brightness(1.04) contrast(.95); }
@media (min-width: 1100px) { .st-kontakt { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 5fr); gap: var(--st-8); align-items: start; } }

/* ---------- Hinweis (roter Balken links) ---------- */
/* Zwei Hinweise hintereinander sind zwei Sätze, keine zwei Kapitel: halbe Luft, und der zweite ohne Linie direkt unter dem
   ersten (Runde 6, 17.09.2026: 924 px Höhe für Bonusheft und Ausdauerschule auf der Beratungsseite). */
.st-abschnitt.st-hinweis { padding-block: clamp(32px, 4vw, 48px); }
.st-abschnitt.st-hinweis + .st-abschnitt.st-hinweis { border-top: 0; padding-top: 0; }
.st-hinweis__kasten { display: grid; gap: var(--st-3); padding: var(--st-5); border-left: 3px solid var(--st-rot); background: var(--st-flaeche); max-width: 46rem; }
.st-hinweis--ruhig .st-hinweis__kasten { border-left-color: var(--st-blau); }
.st-hinweis__titel { margin: 0; font-size: var(--st-t2); }
.st-hinweis__text { color: var(--st-leise); }
.st-hinweis__text p { margin: 0; }

/* ---------- Formulare ---------- */
.st-form { display: grid; gap: var(--st-4); max-width: 40rem; }
.st-form__zeile { display: grid; gap: var(--st-4); }
@media (min-width: 700px) { .st-form__zeile { grid-template-columns: 1fr 1fr; } }
.st-form__feld { display: grid; gap: var(--st-2); }
.st-form__feld > span { font-weight: 700; color: var(--st-tinte); font-size: var(--st-t0); }
.st-form__hp { position: absolute; left: -9999px; }
.st-form__hinweis { color: var(--st-leise); font-size: var(--st-t0); }
.st-form__meldung { padding: var(--st-4); border-left: 3px solid var(--st-blau); background: var(--st-flaeche); }
.st-form__meldung--fehler { border-left-color: var(--st-rot); }
.st-form__meldung p { margin: var(--st-2) 0 0; color: var(--st-leise); }
.st-kontaktseite__raster { display: grid; gap: var(--st-7); }
@media (min-width: 1100px) { .st-kontaktseite__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--st-9); align-items: start; } }

/* ---------- Zweispaltige Textabschnitte ---------- */
.st-zweispaltig { display: grid; gap: var(--st-6); }
@media (min-width: 1100px) { .st-zweispaltig { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--st-9); align-items: start; } }
.st-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--st-linie); }
.st-liste li { display: grid; grid-template-columns: 24px 1fr; gap: var(--st-3); padding: var(--st-4) 0; border-bottom: 1px solid var(--st-linie); }
.st-liste__symbol { width: 20px; height: 20px; color: var(--st-blau); margin-top: 3px; }
.st-liste b { display: block; color: var(--st-tinte); }
.st-liste span { color: var(--st-leise); }

/* ---------- Fließtextabschnitt (richtext-Block) im Ladenlook ---------- */
.st-prosa { max-width: 40rem; }
.st-prosa p + p { margin-top: var(--st-4); }
/* Titel zu Fließtext 24 px, nicht 72 (Dennis 18.09.: „zu viel Abstand unter Titel“): Der Kopf brachte seinen Abschnittsabstand
   (32/48) mit UND das Raster des Textblocks seinen Zwischenraum (24). Im Textblock gilt nur der Zwischenraum, wie beim Kernblock. */
.st-text-block .st-kopf { margin-bottom: 0; }
/* Hervorhebungen im Fließtext: echter 700er Schnitt (fonts-laden.css), Tinte statt Textgrau */
.st-prosa strong, .st-lauftext strong, .st-intro strong, .st-faq__antwort strong, .st-hinweis__text strong { font-weight: 700; color: var(--st-tinte); }
.st-abschnitt--dunkel .st-prosa strong, .st-abschnitt--dunkel .st-lauftext strong, .st-aufruf .st-prosa strong { color: #fff; }
.st-prosa ul { padding-left: 1.2em; }

/* ---------- Fuß ---------- */
.st-fuss { background: var(--st-tinte); color: var(--st-dunkel-leise); }
.st-fuss a { color: var(--st-dunkel-text); text-decoration: none; }
.st-fuss a:hover { color: #fff; text-decoration: underline; }
.st-fuss__innen { padding-block: var(--st-7) var(--st-5); display: grid; gap: var(--st-6); }
.st-fuss__marke { display: grid; gap: var(--st-3); align-content: start; }
.st-fuss__marke img { width: 260px; height: auto; }  /* Dennis 18.09.: 190 zu klein, Unterzeile unleserlich; gescrollter Kopf 220 */
.st-fuss__marke p { color: var(--st-dunkel-text); font-family: var(--st-titel); font-weight: 500; margin: 0; }
.st-fuss__spalte { display: grid; gap: var(--st-2); font-size: var(--st-t0); align-content: start; }
.st-fuss__spalte .st-kicker { color: var(--st-dunkel-leise); margin-bottom: var(--st-1); }
.st-fuss__spalte .st-kicker > span { margin: 0; }  /* ohne Symbol: Titel beginnt auf der Linie des Textes darunter */
.st-fuss__spalte .st-mono { color: var(--st-dunkel-text); line-height: 1.6; white-space: nowrap; }  /* „Mo bis Fr 10 bis 19 Uhr“ brach bei schmalen Spalten vor „Uhr“ um (Dennis 17.09.) */
.st-fuss__spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--st-2); }
.st-fuss__sozial { display: flex; gap: var(--st-2); margin-top: var(--st-2); }
.st-fuss__sozial a { width: 40px; height: 40px; border: 1px solid var(--st-dunkel-linie); display: grid; place-items: center; }
.st-fuss__sozial svg { width: 18px; height: 18px; fill: currentColor; }
/* Sockel abgehoben (Dennis 18.09.): Fläche in Bunert-Blau (Weiß darauf 7,5:1), darüber die Druckskala Blau → Rot als Naht zum Fuß,
   dieselbe Kante wie an jeder Titelkarte. Das Signalrot #E73331 kommt so ins Bild, ohne Schrift zu tragen: Als Fläche trug es
   12-px-Schrift nur mit 4,35:1, das Druckrot #B8222A sah nicht nach Bunert aus. */
.st-fuss__sockel { position: relative; border-top: 0; background: var(--st-blau); color: #fff; }  /* Naht Blau → Rot wieder raus (Dennis 18.09.: „wirkt nicht wie geplant“) */
.st-fuss__sockel a, .st-fuss .st-fuss__sockel a:not(.btn) { color: #fff; }
.st-fuss .st-fuss__sockel a:not(.btn):hover { color: #fff; text-decoration: underline; }
.st-fuss__sockel :focus-visible { box-shadow: 0 0 0 3px var(--st-blau), 0 0 0 6px #fff; }

/* ---------- Partnerband im Fuß (Dennis 18.09.: „Partner gehen unter, nur auf Über uns sichtbar“) ---------- */
/* Laufende Logowand auf Rasterpapier: weiße Karten mit Tintenausgleich wie jede Logowand, Liste zweimal hintereinander für den
   nahtlosen Lauf, hält beim Zeigen und bei Tastaturfokus an; bei reduzierter Bewegung steht sie als umbrechende Reihe. */
/* Zweite Fassung (Dennis 18.09.: Logos nicht zentriert, Band wie ein Fremdkörper, Trenner sichtbar, Raster stört): kein Rasterpapier
   im Fuß, keine Linie, das Band steht UNTER den drei Spalten mit dem Kennzeichen der Spalten („PARTNER IN SIEGBURG“ wie „LADEN“).
   Die Karte ist Container für den Tintenausgleich (cqw), sonst rechnet der Kasten gegen das Fenster und steht neben der Mitte. */
.st-fuss__partner { padding-block: var(--st-2) var(--st-7); }
.st-fuss__partner-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--st-2) var(--st-5); margin-bottom: var(--st-4); }
.st-fuss__partner-kopf .st-kicker { color: var(--st-dunkel-leise); }
.st-fuss__partner-kopf .st-kicker > span { margin: 0; }
.st-fuss__partner-kopf a { font-family: var(--st-mono); font-size: 13px; letter-spacing: .02em; color: var(--st-dunkel-text); }
.st-lauf { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.st-lauf__spur { display: flex; gap: var(--st-4); width: max-content; animation: st-lauf 42s linear infinite; }
.st-lauf:hover .st-lauf__spur, .st-lauf:focus-within .st-lauf__spur { animation-play-state: paused; }
.st-lauf__karte { flex: none; width: 200px; min-height: 84px; background: var(--st-flaeche); border-radius: var(--st-r2); display: flex; align-items: center; justify-content: center; padding: 14px 20px; container-type: inline-size; }
.st-lauf__karte a { display: contents; }
.st-lauf__karte .logo-tinte { display: block; position: relative; overflow: hidden; flex: none; width: calc(var(--lt-b) * 100cqw); height: calc(var(--lt-h) * 100cqw); opacity: 1; }
.st-lauf__karte .logo-tinte img.logo-tinte__bild { position: absolute; left: calc(var(--lt-x) * -100cqw); top: calc(var(--lt-y) * -100cqw); width: calc(var(--lt-fb) * 100cqw); height: auto; max-width: none; max-height: none; }
@keyframes st-lauf { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .st-lauf { mask-image: none; -webkit-mask-image: none; }
    .st-lauf__spur { animation: none; width: auto; flex-wrap: wrap; }
    .st-lauf__spur > .st-lauf__karte--kopie { display: none; }
}
@media (max-width: 599px) { .st-lauf__karte { width: 150px; height: 68px; padding: 10px 14px; } }
.st-fuss__sockel-innen { padding-block: var(--st-4); display: flex; flex-wrap: wrap; gap: var(--st-2) var(--st-5); font-family: var(--st-mono); font-size: var(--st-t-1); letter-spacing: 0.04em; }
.st-fuss__sockel-innen span { margin-right: auto; }
.st-fuss__sockel-innen ul { display: contents; }
.st-fuss__sockel-innen li { list-style: none; }
/* Fuß in drei Zeilen (Dennis 18.09.: Treppe unter dem Logo, Leerraum in der Mitte): Kopfzeile Logo links und Handlung rechts,
   darunter drei gleich breite Spalten mit demselben Kennzeichen, dann das Partnerband. Keine Linien, die Ordnung kommt aus dem Raster. */
.st-fuss__innen { gap: var(--st-7); }
.st-fuss__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--st-5) var(--st-6); }
.st-fuss__logo { display: block; }
.st-fuss__logo img { width: 260px; height: auto; display: block; }
.st-fuss__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-3) var(--st-6); }
.st-fuss__kanal { display: inline-flex; align-items: center; gap: var(--st-2); min-height: 44px; font-family: var(--st-mono); font-size: 13px; letter-spacing: .02em; color: var(--st-dunkel-text); }
.st-fuss__kanal svg { width: 18px; height: 18px; fill: currentColor; }
.st-fuss__kanal:hover { color: #fff; }
.st-fuss__spalten { display: grid; gap: var(--st-6); }
.st-fuss__claim { margin: 0; font-family: var(--st-titel); font-variation-settings: "wdth" 92; font-weight: 700; font-size: var(--st-t2); line-height: 1.2; color: #fff; letter-spacing: -0.01em; }
.st-fuss__text { margin: 0; color: var(--st-dunkel-leise); max-width: 26rem; }
@media (min-width: 900px) {
    .st-fuss__spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--st-8); }
}
/* Sockel am Handy (Dennis 18.09.): Verweise zentriert untereinander, jeder als Tippfläche 44 px hoch mit 8 px Abstand;
   vorher zwei linksbündige Zeilen mit 16 px hohen Verweisen. */
@media (max-width: 899px) {
    .st-fuss__sockel-innen { flex-direction: column; align-items: center; text-align: center; gap: var(--st-3); padding-block: var(--st-5); }
    .st-fuss__sockel-innen span { margin-right: 0; }
    .st-fuss__sockel-innen ul { display: grid; width: 100%; gap: var(--st-2); margin: 0; padding: 0; }
    .st-fuss__sockel-innen li a { display: block; min-height: 44px; padding: 12px 8px; line-height: 20px; font-size: 13px; text-align: center; border: 1px solid rgba(255,255,255,.35); border-radius: var(--st-r2); text-decoration: none; }
    .st-fuss__sockel-innen li a:hover { border-color: #fff; text-decoration: none; }
}

/* ---------- Unsichtbar für Sehende, hörbar für Vorleser ---------- */
.st-versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Textabschnitte der Veranstaltungs-Engine (richtext) im Ladenlook ---------- */
body.be-marke-laden .intro-section { padding: 0; }
body.be-marke-laden .intro-section .section__kicker { font-family: var(--st-mono); font-size: var(--st-t-1); letter-spacing: 0.12em; color: var(--st-blau); }

/* ---------- Einzelmeldung (single-be_news.php) im Ladenlook ---------- */
/* Die Vorlage stammt von den Veranstaltungsseiten: 128 px Luft unter dem Banner und „WEITERE MELDUNGEN“ als
   52-px-Versalien mit Trennstrich. Im Laden gelten die Titelregeln des Systems (17.09.2026). */
body.be-marke-laden .news-article-layout { padding-top: 0; }
body.be-marke-laden .news-sidebar__title { font-family: var(--st-titel); font-size: var(--st-t3); text-transform: none; letter-spacing: -0.02em; line-height: 1.05; hyphens: manual; }
body.be-marke-laden .news-sidebar__item-title { font-family: var(--st-titel); }

/* ---------- Kacheln „Mehr als Laufschuhe“ (Block st-kacheln, Liste kacheln; Entwurf 2, 17.09.2026) ---------- */
.st-kacheln { display: grid; gap: var(--st-4); grid-template-columns: 1fr; }
.st-kachel { position: relative; background: var(--st-flaeche); border: 1px solid var(--st-linie-leise); border-radius: 8px; overflow: hidden; display: grid; text-decoration: none; color: inherit; min-height: 220px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
a.st-kachel:hover { transform: translateY(-3px); border-color: var(--st-blau); box-shadow: 0 18px 40px -24px rgba(16,22,31,.35); }
.st-kachel__foto { position: absolute; inset: 0; }
.st-kachel__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
a.st-kachel:hover .st-kachel__foto img { transform: scale(1.04); }
/* Schleier oben UND unten: Das Kennzeichen steht am oberen Rand, und auf einem hellen Himmel war es nicht zu lesen (Abzug 17.09.). */
/* Schutzfläche hinter weißer Schrift auf Fotos (27.10.2026, Portal-Prüfung: Kicker 1,82:1, Titel „Team-Trikots“ 2,86:1, Text 4,18:1).
   Prozentwerte trafen die Schrift je nach Kachelhöhe (220 bis 540 px) an verschiedenen Stellen; jetzt in Pixeln: oben deckend
   bis unter die Vorzeile, unten wandert die Fläche mit dem Textblock (.st-kachel__unten::before) und beginnt 56 px über dem Titel.
   0,68 bzw. 0,72 Deckung halten Weiß auch über einem weißen Bildpunkt bei 4,5:1. */
.st-kachel__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,22,31,.68) 0, rgba(16,22,31,.68) 72px, rgba(16,22,31,0) 136px); }
.st-kachel--foto .st-kachel__unten { position: relative; isolation: isolate; }
.st-kachel--foto .st-kachel__unten::before { content: ""; position: absolute; z-index: -1; inset: -56px calc(-1 * var(--st-5)) calc(-1 * var(--st-5)); background: linear-gradient(180deg, rgba(16,22,31,0) 0, rgba(16,22,31,.72) 56px, rgba(16,22,31,.82) 100%); pointer-events: none; }
.st-kachel__text { position: relative; align-self: stretch; padding: var(--st-5); display: grid; align-content: space-between; gap: var(--st-4); }
.st-kachel__unten { display: grid; gap: var(--st-2); }
.st-kachel__titel { margin: 0; font-size: var(--st-t2); line-height: 1.15; }
.st-kachel__text p { margin: 0; color: var(--st-leise); font-size: var(--st-t0); max-width: 30rem; }
.st-kachel__zahl { font-family: var(--st-titel); font-variation-settings: "wdth" 84; font-weight: 800; font-size: var(--st-t5); letter-spacing: -0.04em; line-height: 0.9; color: var(--st-tinte); }
/* Messwert in der Mitte (Feld `wert`; Dennis 18.09.2026: Termin, Lauftreff, Beratung hatten 100 px Luft zwischen
   Kennzeichen und Text). Große Zeile wie die Zahl-Kachel, darunter Mono-Zeile mit Zustandspunkt. */
.st-kachel__text--mit-wert { align-content: space-between; }
.st-kachel__mitte { display: grid; gap: var(--st-2); }
.st-kachel__wert { font-family: var(--st-titel); font-variation-settings: "wdth" 84; font-weight: 800; font-size: var(--st-t3); letter-spacing: -0.03em; line-height: 1; color: var(--st-tinte); }
.st-kachel__wertzeile { display: inline-flex; align-items: center; gap: 8px; font-family: var(--st-mono); font-size: 13px; letter-spacing: .02em; color: var(--st-leise); }
.st-kachel__wertzeile .st-status__punkt { width: 8px; height: 8px; }
.st-kachel__mitte--zu .st-status__punkt { background: var(--st-rot); }
.st-kachel__mitte--schliesst_bald .st-status__punkt { background: var(--st-bernstein); }
.st-kachel__mitte--termin .st-status__punkt, .st-kachel__mitte--ausfall .st-status__punkt { background: var(--st-blau); }
.st-kachel__mitte--ausfall .st-status__punkt { background: var(--st-bernstein); }
/* Drei Schritte als Schiene (blaue Kachel „Beratung“): Nummer in Mono, Titel fett, Unterzeile leise, weiß auf Blau */
.st-kachel__schritte { list-style: none; margin: 0; padding: var(--st-3) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--st-4); counter-reset: schritt; border-top: 1px solid rgba(255,255,255,.28); }
.st-kachel__schritte li { counter-increment: schritt; display: grid; gap: 2px; min-width: 0; align-content: start; } /* start: sonst verteilt das Raster die Resthöhe und die drei Titel liegen nicht auf einer Linie (Abzug 18.09.) */
.st-kachel__schritte li::before { content: counter(schritt, decimal-leading-zero); font-family: var(--st-mono); font-size: var(--st-t-1); letter-spacing: .04em; color: rgba(255,255,255,.72); margin-bottom: 2px; }
.st-kachel__schritte b { font-weight: 700; color: #fff; font-size: var(--st-t1); line-height: 1.15; }
.st-kachel__schritte span { color: rgba(255,255,255,.82); font-size: var(--st-t-1); line-height: 1.35; }
@media (max-width: 699px) { .st-kachel__schritte { grid-template-columns: 1fr; gap: var(--st-3); } .st-kachel__schritte li { grid-template-columns: 28px 1fr; } .st-kachel__schritte li::before { grid-row: span 2; } }
.st-kachel__siegel { width: 64px; height: auto; border: 1px solid var(--st-linie-leise); margin-bottom: var(--st-2); }
.st-kachel__pfeil { position: absolute; right: var(--st-5); top: var(--st-5); width: 36px; height: 36px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; opacity: .7; color: var(--st-tinte); }
.st-kachel__pfeil .st-icon { width: 16px; height: 16px; color: currentColor; }
.st-kachel__pfeil .st-icon .st-icon__punkt { fill: currentColor; }
/* Farbige Flächen: alle Symbole ganz weiß, auch der Druckpunkt (Dennis 17.09.: „Icon-Farbe auf farbigen Hintergründen anpassen“) */
.st-kachel--foto { background: var(--st-tinte); }
.st-kachel--foto .st-kachel__text, .st-kachel--blau .st-kachel__text, .st-kachel--foto .st-kachel__titel, .st-kachel--blau .st-kachel__titel, .st-kachel--foto .st-kicker, .st-kachel--blau .st-kicker, .st-kachel--foto .st-kachel__pfeil, .st-kachel--blau .st-kachel__pfeil, .st-kachel--foto .st-kicker__symbol, .st-kachel--blau .st-kicker__symbol { color: #fff; }
.st-kachel--foto .st-kachel__text p, .st-kachel--blau .st-kachel__text p { color: rgba(255,255,255,.86); }
.st-kachel--foto .st-kicker__symbol .st-icon__punkt, .st-kachel--blau .st-kicker__symbol .st-icon__punkt { fill: #fff; }
.st-kachel--foto .st-kachel__titel { font-size: var(--st-t3); }
.st-kachel--blau { background: var(--st-blau); border-color: var(--st-blau); }
@media (min-width: 700px) { .st-kacheln { grid-template-columns: repeat(2, 1fr); } .st-kachel--breit, .st-kachel--gross { grid-column: span 2; } }
@media (min-width: 1100px) {
    .st-kacheln { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; }
    .st-kachel--breit { grid-column: span 2; } .st-kachel--hoch { grid-row: span 2; } .st-kachel--gross { grid-column: span 2; grid-row: span 2; }
}

/* ---------- Zitat (st-text, variant zitat) und Punkte als Kacheln ---------- */
.st-zitat { display: grid; gap: var(--st-4); max-width: 46rem; }
.st-zitat__text { margin: 0; }
.st-zitat__titel { font-family: var(--st-titel); font-variation-settings: "wdth" 88; font-weight: 500; font-size: var(--st-t4); line-height: 1.05; letter-spacing: -0.03em; color: var(--st-tinte); margin: 0; text-wrap: balance; }
.st-zitat__titel::before { content: "„"; } .st-zitat__titel::after { content: "“"; }
.st-zitat__quelle { font-style: normal; font-family: var(--st-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-leise); }
.st-punkte__titel { margin: 0 0 var(--st-5); font-size: var(--st-t3); }
.st-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--st-4); grid-template-columns: 1fr; }
.st-punkt-kachel { background: var(--st-flaeche); border: 1px solid var(--st-linie-leise); border-radius: 8px; padding: var(--st-5); display: grid; gap: var(--st-3); align-content: start; }
.st-punkt-kachel__nr { font-family: var(--st-mono); font-size: 12px; color: var(--st-blau); letter-spacing: 0.12em; }
.st-punkt-kachel h3 { margin: 0; }
.st-punkt-kachel p { margin: 0; color: var(--st-leise); font-size: var(--st-t0); }
@media (min-width: 700px) { .st-punkte { grid-template-columns: 1fr 1fr; } }

/* ---------- Aufruf (st-hinweis, variant aufruf): blaue Fläche, Knopf rechts ---------- */
.st-aufruf { background: var(--st-blau); color: #fff; border-radius: 8px; padding: var(--st-6); display: grid; gap: var(--st-4); align-items: center; }
.st-aufruf > div { display: grid; gap: var(--st-2); }
.st-aufruf .st-kicker, .st-aufruf .st-kicker__symbol { color: #fff; }
.st-aufruf .st-kicker__symbol .st-icon__punkt { fill: #fff; }
.st-aufruf__titel, .st-aufruf__titel .be-editable { color: #fff; font-size: var(--st-t3); margin: 0; }  /* auch der Klick-Editor-Anker: sonst Tinte auf Blau, 2,4:1 */
.st-aufruf__text { color: rgba(255,255,255,.88); }
.st-aufruf__text p { margin: 0; }
.st-aufruf__text a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 0.18em; }  /* Telefon im Band: die Verweisfarbe Blau war Blau auf Blau, 1:1 (Kontrastscan 18.09.) */
.st-aufruf__text a:not(.btn):hover { color: #fff; text-decoration-thickness: 2px; }
@media (min-width: 900px) { .st-aufruf { grid-template-columns: 1fr auto; } }

/* ---------- Logowand mit wenigen Logos: linksbündig ---------- */
.sponsors-wall__grid.st-logowand--wenige { justify-content: flex-start; }

/* ---------- Foto-Galerie-Band (Block gallery der Engine) im Ladenlook: drei Beispielbilder unter Wanderschuhe ---------- */
body.be-marke-laden .gallery-section { background: var(--st-flaeche); padding-block: clamp(56px, 8vw, 96px); border-top: 1px solid var(--st-linie-leise); }
body.be-marke-laden .gallery-section .section__header { display: grid; gap: var(--st-3); margin-bottom: var(--st-6); max-width: 40rem; }
body.be-marke-laden .gallery-section .section__kicker { font-family: var(--st-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-blau); font-weight: 500; }
body.be-marke-laden .gallery-section .section__title { font-family: var(--st-titel); font-variation-settings: "wdth" 88; font-size: var(--st-t4); line-height: 1; letter-spacing: -0.03em; color: var(--st-tinte); text-transform: none; margin: 0; }
body.be-marke-laden .gallery-grid { gap: var(--st-4); }
body.be-marke-laden .gallery-item { aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--st-linie-leise); background: var(--st-flaeche); }
body.be-marke-laden .gallery-item img { object-fit: contain; padding: 6%; }  /* 441 x 441 Produktfotos auf Weiß: einpassen, nicht beschneiden */
body.be-marke-laden .gallery-item:hover img { transform: scale(1.04); }
body.be-marke-laden .gallery-item__overlay, body.be-marke-laden .gallery-item:hover .gallery-item__overlay { background: transparent; }

/* ---------- Rechtstexte: Verzeichnis links, Text mit Abschnittsnummern rechts (templates/standort-recht.php) ---------- */
.st-recht { display: grid; gap: var(--st-7); }
.st-recht__verzeichnis ol { list-style: none; margin: var(--st-3) 0 0; padding: 0; display: grid; gap: 2px; border-top: 1px solid var(--st-linie); }
.st-recht__verzeichnis li a { display: grid; grid-template-columns: 32px 1fr; gap: var(--st-2); padding: 10px 0; border-bottom: 1px solid var(--st-linie-leise); color: var(--st-text); text-decoration: none; font-size: var(--st-t0); line-height: 1.35; }
.st-recht__verzeichnis li a span { font-family: var(--st-mono); font-size: 12px; color: var(--st-blau); padding-top: 2px; }
.st-recht__verzeichnis li a:hover { color: var(--st-blau); }
.st-recht__text { max-width: 44rem; }
.st-recht__text h2 { font-family: var(--st-titel); font-variation-settings: "wdth" 88; font-size: var(--st-t3); line-height: 1.1; letter-spacing: -0.02em; color: var(--st-tinte); margin: var(--st-8) 0 var(--st-4); padding-top: var(--st-5); border-top: 1px solid var(--st-linie); scroll-margin-top: calc(var(--st-kopf-hoehe, 73px) + var(--st-5)); display: grid; grid-template-columns: 48px 1fr; gap: var(--st-3); align-items: baseline; }
.st-recht__text h2::before { content: attr(data-nr); font-family: var(--st-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; color: var(--st-blau); }
.st-recht__text h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.st-recht__text h3 { font-size: var(--st-t2); margin: var(--st-6) 0 var(--st-3); color: var(--st-tinte); }
.st-recht__text p, .st-recht__text li { color: var(--st-text); font-size: var(--st-t1); line-height: 1.6; }
.st-recht__text p + p { margin-top: var(--st-4); }
.st-recht__text ul { padding-left: 1.2em; }
.st-recht__text a { color: var(--st-blau); overflow-wrap: anywhere; }
.st-recht__text strong { color: var(--st-tinte); }
@media (min-width: 1100px) {
    .st-recht--mit-verzeichnis { grid-template-columns: 280px minmax(0, 1fr); gap: var(--st-9); align-items: start; }
    .st-recht__verzeichnis { position: sticky; top: calc(var(--st-kopf-hoehe, 151px) + var(--st-5)); }
}

/* ---------- Textabschnitt mit Foto (st-text): Foto 3:2, am Rechner 4:3 und haftend neben langem Text ---------- */
/* Über uns: neben drei Absätzen stand ein 3:1-Streifen oben rechts und darunter Leere (Audit 17.09.). */
.st-text__foto { aspect-ratio: 3 / 2; }
@media (min-width: 1100px) { .st-text__foto { aspect-ratio: 4 / 3; } .st-zweispaltig > .st-figur { position: sticky; top: calc(var(--st-kopf-hoehe, 151px) + var(--st-5)); } }
/* Seiteninhalt (Terminkalender) als rechte Spalte: haftet beim Scrollen, damit Ablauf und Kalender nebeneinander bleiben */
.st-text__inhalt .page-prose, .st-text__inhalt .sb-app { margin: 0; }
@media (min-width: 1100px) { .st-zweispaltig--inhalt { align-items: start; } .st-text__inhalt { position: sticky; top: calc(var(--st-kopf-hoehe, 151px) + var(--st-5)); } }
/* Handy: der Kalender kommt VOR Ablauf und Kosten, direkt unter der Titelkarte (Audit 13.13: vorher erst nach rund 1.600 px). */
@media (max-width: 1099px) { .st-zweispaltig--inhalt .st-text__inhalt { order: -1; } }
/* SlotBooking im Ladenlook: Das Plugin schreibt Grau #7c7c78 und 9/10 px als Inline-Stil (Köln-Vorgabe). Hausregel: AA
   an jeder Textstelle, kein Text unter 11 px (Kontrastscan 18.09.: 3 Verstöße). !important, weil Inline-Stile sonst gewinnen. */
body.be-marke-laden .sb-app p, body.be-marke-laden .sb-app .sb-day-header, body.be-marke-laden .sb-app label, body.be-marke-laden .sb-app [style*="color:#7c7c78"] { color: var(--st-leise) !important; }
body.be-marke-laden .sb-app .sb-day-avail, body.be-marke-laden .sb-app .sb-slot-avail, body.be-marke-laden .sb-app [style*="font-size:9px"], body.be-marke-laden .sb-app [style*="font-size:10px"] { font-size: 11px !important; }
body.be-marke-laden .sb-app .sb-day-avail { color: #17693A !important; }  /* Grün auf der hellen Tageskachel: 5,9:1 */
/* Vergangene und geschlossene Tage (27.10.2026): Das Plugin dimmt die ganze Kachel auf 40 % (Klasse, im Umbuchen-Kalender als
   Inline-Stil), „Feiertag“ 1,83:1 bei 8 px. Jetzt ohne Kachel, dünne graue Zahl (--st-leise #4B5563, 7,0:1 auch auf der Fläche #F5F6F7 hinter dem Umbuchen-Raster; #6B7280 hatte dort 4,47:1); buchbare Tage bleiben
   als Kachel mit fetter Zahl und „frei“ unterscheidbar. Feiertag in Rot für Text, 11 px ohne Trennung (390 px: Zelle 40 px). */
body.be-marke-laden .sb-app .sb-day.past, body.be-marke-laden .sb-app .sb-day.closed, body.be-marke-laden .sb-app .sb-day[style*="opacity:0.4"] { opacity: 1 !important; background: transparent !important; color: var(--st-leise) !important; }
body.be-marke-laden .sb-app .sb-day.past .sb-day-num, body.be-marke-laden .sb-app .sb-day.closed .sb-day-num, body.be-marke-laden .sb-app .sb-day[style*="opacity:0.4"] .sb-day-num { font-weight: 400; }
body.be-marke-laden .sb-app .sb-day-label { color: var(--st-rot-text) !important; font-size: 11px !important; white-space: nowrap; letter-spacing: -0.02em; hyphens: none; }
/* Prüfer 27.10.2026: M2 im Umbuchen-Kalender setzt das Plugin die Farbe inline (#e4e2dc, 1,2:1), deshalb oben !important.
   V1 gewählter Tag: „frei“ stand in Grün auf Blau (1,12:1, Regel vom 17.09.); auf der gewählten Kachel weiß.
   N2 „Feiertag“ (43 px) ist breiter als schmale Tageszellen (30 px bei 320): unter 43 px Zellbreite schmaler gesetzt,
   Schriftgröße bleibt 11 px, damit es nicht in die Nachbarkachel ragt. */
body.be-marke-laden .sb-app .sb-day.selected .sb-day-avail { color: #fff !important; }
/* Prüfer Runde 2 (M-1): Im Umbuchen-Kalender wählt der Klick (public.js 425 bis 427) nur per Inline-Stil, nie mit der Klasse
   `selected`; „frei“ trägt dann `color: rgba(255, 255, 255, 0.8)` (über element.style, mit Leerzeichen), bei der Erstzeichnung
   `color:rgba(255,255,255,0.8)`. Beide Schreibweisen, sonst gewinnt das Grün oben (1,10:1 auf Blau). */
body.be-marke-laden .sb-app .sb-day-avail[style*="255, 255, 255"], body.be-marke-laden .sb-app .sb-day-avail[style*="255,255,255"] { color: #fff !important; }
body.be-marke-laden .sb-app .sb-calendar-grid .sb-day { container-type: inline-size; }
@container (max-width: 42px) { body.be-marke-laden .sb-app .sb-day-label { display: inline-block; transform: scaleX(.8); } }
body.be-marke-laden .sb-app h2 { font-size: var(--st-t3) !important; line-height: 1.1; }  /* Kalendertitel des Plugins (Inline-Stil, deshalb !important): 22 px war der einzige H2 unter 30 (Titelmessung 18.09.) */
/* Spaltentitel der Kontaktseite: dasselbe Maß wie die Titel des Kontaktblocks („Mühlenstraße 50.“), nicht 30 px (Titelmessung 18.09.) */
.st-kontaktseite .st-titel--spalte { font-size: clamp(28px, 3.1vw, 46px); }

/* ---------- Handy: Titel der Titelkarte ohne Trennstrich, Produktbilder dreispaltig (UX-Audit 17.09.2026) ---------- */
/* „Mühlen-straße 50.“ und „Wander-schuhe“ standen mit Trennstrich in der Titelkarte: bei 390 px eine Stufe kleiner, keine Silbentrennung. */
.st-ukopf__karte .st-titel--gross { hyphens: manual; overflow-wrap: normal; }
@media (max-width: 699px) { .st-ukopf__karte .st-titel--gross { font-size: clamp(34px, 10.2vw, 44px); } }
/* Die drei 441-px-Produktbilder standen am Handy untereinander als drei große Quadrate (1.200 px Höhe): dreispaltig auch dort. */
@media (max-width: 767px) { body.be-marke-laden .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: var(--st-3); } }

/* ---------- Kompakter Hinweis unter einer Liste (st-text, Props hinweis_titel/hinweis) ---------- */
.st-hinweis__kasten--klein { margin-top: var(--st-5); padding: var(--st-4) var(--st-5); border-left-color: var(--st-blau); gap: var(--st-2); max-width: none; }
.st-hinweis__kasten--klein .st-hinweis__titel { font-size: var(--st-t1); }
.st-hinweis__kasten--klein .st-hinweis__text { font-size: var(--st-t0); }

/* ---------- Handy-Abnahme 28.09.2026 (vor der Mail an alle Läden: „Öffnet sie am besten auf dem Handy“) ----------
   Gemessen mit layout_messen.py bei 320 bis 768 px und Touch-Emulation. Tippziele mindestens 24 px (WCAG 2.2 AA),
   auf dem Handy 44 px, wo Platz ist. */
/* 320 px (iPhone SE 1. Generation, kleine Android): Logo 190 + Abstand 32 + Aktionen 100 + Rand 40 = 362 px, der
   Menüknopf stand 22 px rechts neben dem Bildschirm. */
@media (max-width: 359px) {
    body.be-marke-laden .site-header .container { gap: 12px; }
    body.be-marke-laden .header__logo img { max-width: 150px; height: auto; }
}
/* Fuß: Telefon, Mail, Route, Google-Bewertungen und „Alle Partner ansehen“ waren 20 bis 22 px hoch. */
body.be-marke-laden .st-fuss__spalte > a,
body.be-marke-laden .st-fuss__partner-kopf a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 899px) {
    body.be-marke-laden .st-fuss__spalte > a,
    body.be-marke-laden .st-fuss__partner-kopf a { min-height: 44px; }
}
/* Menü: Kanäle als Knöpfe mit Wort (30.09.2026, Dennis: „Facebook-Symbol mobil zu klein“). Vorher ein 22-px-Symbol in
   Bunert-Blau auf der Tinte, 2,5:1 und damit unter den 3:1 für Bedienelemente (WCAG 1.4.11), allein unter dem großen
   „Anrufen“. Jetzt Umrissknopf in der Form von „Anrufen“ (das bleibt die Hauptaktion, deshalb kein zweiter gefüllter
   Knopf), Symbol hell. Zwei Kanäle stehen nebeneinander, einer füllt die Breite. */
body.be-marke-laden .nav__mobile-social { flex-wrap: wrap; gap: var(--st-3); justify-content: stretch; }
body.be-marke-laden .nav__mobile-social a { flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; gap: var(--st-3);
    min-height: 56px; padding: 0 var(--st-5); border: 1px solid rgba(255, 255, 255, .38); border-radius: 6px;   /* wie „Anrufen“ (gemessen 57 px, 6 px) */
    color: var(--st-dunkel-text); font-weight: 600; font-size: var(--text-base, 16px); text-decoration: none; transition: background .2s ease, border-color .2s ease; }
body.be-marke-laden .nav__mobile-social a:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .6); color: #FFFFFF; }
body.be-marke-laden .nav__mobile-social a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--st-tinte), 0 0 0 4px #FFFFFF; }
body.be-marke-laden .nav__mobile-social svg { width: 22px; height: 22px; fill: var(--st-dunkel-blau); flex: none; }
/* Einwilligungsleiste: „Details“ war 43 x 20 px. */
body.be-marke-laden .be-consent__details-toggle { min-height: 44px; display: inline-flex; align-items: center; }
/* Brotkrumen „Start“: 23 px. */
body.be-marke-laden .st-ukopf__pfad .breadcrumb__item a { display: inline-flex; align-items: center; min-height: 24px; }
/* Kontaktseite bei 320 px 4 px zu breit: Die Auswahlliste „Worum geht es?“ nimmt die Breite ihrer längsten Option an
   (304 px) und drückte die Rasterspalte (Platz 280 px) auf; die Seite ließ sich seitlich schieben. */
.st-kontaktseite__raster { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .st-kontaktseite__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
body.be-marke-laden .st-form select { width: 100%; max-width: 100%; min-width: 0; }