/* =========================================================
   Hotel Stadion Stadt — Comp A (Terracotta, Fraunces)
   Tokens. Keine rohen Hex-Werte unterhalb dieses Blocks.
   ========================================================= */
:root {
  --c-brand: #A8462F;
  --c-brand-deep: #7C3220;
  --c-brand-tint: #FBEADF;
  --c-paper: #FFFBF6;
  --c-sand: #F5EBDD;
  --c-ink: #2B2016;
  --c-ink-muted: #6B5A4C;
  /* Abgedunkelt von #A0897A auf #7A6454 (Messlauf 08.08.2026): der alte Wert
     erreichte auf Weiss nur 3,31:1 und verfehlte damit die 4,5:1 fuer
     Kleintext — betroffen war unter anderem der Satz "Ihre Angaben werden
     uebernommen. Preise und Verfuegbarkeit ..." unter der Buchungsmaske.
     Neu: 5,56:1 auf Weiss, 5,39:1 auf Papier, 4,71:1 auf Sand. */
  --c-ink-faint: #7A6454;
  --c-line: #E8DCC8;
  /* Rahmen von BEDIENELEMENTEN, nicht von Flaechen. WCAG 1.4.11 verlangt
     3:1 fuer die Grenze eines Bedienelements; --c-line erreicht auf Weiss
     nur 1,35:1 und macht eine Feldgrenze praktisch unsichtbar. Als eigenes
     Token statt --c-ink-faint mitzubenutzen, weil beide unabhaengig
     voneinander wandern koennen: das eine folgt der Textlesbarkeit, das
     andere der Erkennbarkeit einer Kante.
     4,16:1 auf Weiss, 4,04:1 auf Papier, 3,53:1 auf Sand. */
  --c-line-stark: #8F7866;
  --c-night: #241A17;
  --c-notice: #8A6A12;
  --c-notice-bg: #FBF2DF;
  --c-yes: #4A6B42;
  --c-yes-bg: #EDF2E9;

  /* Bleibt bewusst beim alten Ocker: in Aufgabe 5 als Kompromiss gewählt,
     weil die Fokus-Umrandung auf Papier UND auf Nacht sichtbar bleiben muss
     (3,94:1 / 4,26:1). Ein dunklerer Wert würde sie auf Nacht verschlechtern.
     Nicht mit --c-notice zusammenlegen — andere Aufgabe, andere Randbedingung. */
  --c-focus: #A8760F;

  --r: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --sh: 0 2px 4px rgba(42, 31, 28, .04), 0 12px 32px rgba(42, 31, 28, .07);
  --sh-lg: 0 24px 70px rgba(42, 31, 28, .2);

  /* Spec G10: Seitenabstand nie unter 22px. */
  --gutter: 22px;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Overflow-Gurt aus dem Vorgängerprojekt: verhindert, dass ein einzelnes
     zu breites Kind die ganze Seite horizontal scrollbar macht. Die Messung
     in scripts/messen.py prüft trotzdem auf Overflow — der Gurt versteckt
     das Symptom, nicht die Ursache. */
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  max-width: 100%;
  background: var(--c-paper);
  color: var(--c-ink);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

/* Spec G9: genau EINE globale H2→Text-Abstandsregel für die ganze Seite. */
h2 + p, h2 + .sst-lead { margin-top: 15px; }

/* Unterseiten (Impressum, Datenschutz) laufen im constrained Layout ohne
   eigenes Padding — ohne diese Regel klebt der Text am Displayrand. */
main.is-layout-constrained { padding-inline: var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Fokus ---------- */
/* EINE Regel fuer alle Bedienelemente, auch fuer die, die WordPress selbst
   rendert (Core-Buttons, Skip-Link) und fuer die Sticky-Leiste, die vorher
   ueberhaupt keinen eigenen Fokusstil hatte. Vorher war der Ring nur an vier
   Stellen einzeln definiert — die Sticky-Leiste fiel deshalb durchs Raster,
   und Core-Buttons trugen einen anderen Ring als die Theme-Buttons.
   :where() haelt die Spezifitaet auf 0: Komponenten duerfen den Abstand
   (outline-offset) anpassen, ohne dass jemand die Farbe neu setzen muss. */
:where(a[href], area, button, input, select, textarea, summary, details, [tabindex]):focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* Buttons unter 880px full-width (RETRO §3). max-width:879 statt 880, damit
   sich die Regel nicht mit den min-width:880-Regeln weiter unten (z. B.
   .sst-header__nav, .sst-karten) bei exakt 880px ueberlappt — dieselbe
   879/880-Trennung wie bei der Sticky-Leiste (999/1000). Vorher stand hier
   899, dieses Theme kennt nur 520/880/1000; die Schwelle muss mit der
   Header-Ausnahme direkt darunter uebereinstimmen. */
@media (max-width: 879px) {
  .wp-block-button__link, .sst-btn { width: 100%; display: block; text-align: center; }
}

/* ---------- Buttons ---------- */
.sst-btn--primary { background: var(--c-brand); color: #fff; }
.sst-btn--primary:hover, .sst-btn--primary:focus-visible { background: var(--c-brand-deep); border-color: var(--c-brand-deep); color: #fff; }
.sst-btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* ---------- Header ---------- */
/* HINWEIS zu position:sticky: Diese Deklaration hat aktuell KEINE Wirkung und
   hatte sie noch nie. Das umgebende <header class="wp-block-template-part">
   von WordPress ist der umschliessende Block und exakt so hoch wie die Leiste
   selbst — ein sticky-Element ohne Spielraum bleibt einfach stehen (gemessen:
   nach 1500px Scrollen liegt die Leiste bei top -1500). Damit die Leiste
   wirklich klebt, muesste die Regel auf den Core-Wrapper wandern; das ist
   eine Verhaltensaenderung mit Folgen fuer Ankersprünge (scroll-margin-top)
   und den kleinen Mobilviewport und wurde deshalb kurz vor der Uebergabe
   NICHT mehr vorgenommen — siehe final-fixes-report.md. */
/* min-height: --header-h war bisher definiert, aber nirgends referenziert
   (Befund 7) — jetzt tatsaechlich verwendet: haelt die Kopfzeile auf einer
   festen Mindesthoehe, egal ob die Navigation (ab 880px) oder der CTA-Button
   (unter 520px ausgeblendet) gerade Platz beanspruchen.
   background: #fff statt des Blockattributs backgroundColor:"surface" —
   den Palette-Slug "surface" gibt es seit Aufgabe 1 nicht mehr, das Attribut
   in header.php blieb wirkungslos und die Flaeche war faktisch transparent
   (Befund 2). #fff passt zu den uebrigen weissen Flaechen im neuen Design
   (Karten, Mapkarte, FAQ-Eintraege). */
.sst-header { position: sticky; top: 0; z-index: 20; min-height: var(--header-h); background: #fff; border-block-end: 1px solid var(--c-line); }
/* Kein eigenes font-family mehr hier: die Wortmarke selbst traegt jetzt
   .sst-logo (Task 8), das ist die einzige Stelle, die die Schrift setzt. */
.sst-header__name { font-weight: 800; margin: 0; }
.sst-header__name a { color: var(--c-ink); text-decoration: none; }
.sst-header__actions { gap: 18px; }
.sst-header__phone { margin: 0; font-variant-numeric: tabular-nums; }
/* Telefonnummer mit Icon im Header.
   min-height 44px wegen WCAG 2.5.8: Gemessen am 11.08.2026 war die
   Tippflaeche 150x24px. Auf Mobil ist das der einzige Weg zum Telefon, der
   oben am Bildschirm steht - und 24px trifft man mit dem Daumen daneben.
   Der Zuwachs geht nach oben und unten und aendert die Kopfzeilenhoehe
   nicht: Die Zeile ist ohnehin hoeher als 44px (Logo 40px + Innenabstand). */
.sst-header__phone a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.sst-header__phone .sst-icon { flex: none; }
.sst-header__cta { margin: 0; }

/* Auf Mobil übernimmt die untere Leiste die Aktionen — im Header würden sie
   nur Platz kosten. Die Telefonnummer bleibt sichtbar. */
@media (max-width: 519px) {
  .sst-header__cta { display: none; }
}
/* Der globale Full-Width-Button greift hier nicht: im Header soll der
   Button nicht die ganze Zeile einnehmen. 879 statt 899, siehe oben.
   inline-FLEX, nicht inline-block: .sst-btn zentriert seine Beschriftung
   ueber align-items/justify-content. Stand hier inline-block, fielen beide
   Deklarationen aus, und die Zeile sass allein auf ihrer line-height oben
   in der 54px hohen Pille - gemessen 5px Luft oben gegen 29,5px unten. */
@media (max-width: 879px) {
  .sst-header .sst-btn { width: auto; display: inline-flex; }
}

/* ---------- Footer ---------- */
/* background: #fff aus demselben Grund wie bei .sst-header — der
   Palette-Slug "surface" existiert nicht mehr (Befund 2). */
.sst-footer { background: #fff; border-block-start: 1px solid var(--c-line); }
.sst-footer a { color: var(--c-ink); }

/* ---------- Mobile Sticky-Leiste ---------- */
/* Unter 1000px sichtbar, ab 1000px verborgen (Spec §3-Tabelle) — die
   Buchungsmaske und der Header-CTA übernehmen ab da die gleiche Aufgabe.
   Token-Auffrischung Task 8: --s-2/--c-surface/--border/--font-display/
   --s-3/--radius existierten im Vorgänger-Tokenset, nicht mehr in diesem;
   ersetzt durch die aktuellen Äquivalente (weiße Karte, --c-line, Inter,
   --r-pill), Breakpoint von 899 auf 999 angepasst statt verdoppelt. */
.sst-sticky { display: none; }
@media (max-width: 999px) {
  .sst-sticky {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 70;
    padding: 10px var(--gutter);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-block-start: 1px solid var(--c-line);
  }
  .sst-sticky__btn {
    font-family: Inter, system-ui, sans-serif;
    font-weight: 700;
    text-align: center;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 14px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--c-brand);
    text-decoration: none;
  }
  .sst-sticky__btn--primary { background: var(--c-brand); color: #fff; }
  .sst-sticky__btn--secondary { background: transparent; color: var(--c-brand); }
  /* Der Fokusring kommt aus der globalen :focus-visible-Regel oben. Er liegt
     wegen outline-offset auf der hellen Flaeche der Leiste (#fff), nicht auf
     der roten Buttonflaeche. Das Padding der Leiste (10px) ist groesser als
     Ring plus Abstand (5px), der Ring wird also am Bildschirmrand nicht
     abgeschnitten. */
  /* Damit die Leiste den letzten Footer-Inhalt nicht überdeckt: Die Leiste
     ist 10px + 44px (Button-Mindesthöhe) + 10px = 64px hoch, PLUS
     env(safe-area-inset-bottom) (siehe padding-bottom oben) — auf einem
     iPhone mit Home-Indikator also bis zu ~98px. 4.5rem (72px) allein
     reichte nicht: die Safe Area fehlte, wodurch die Leiste den Footer auf
     genau diesen Geräten doch verdeckte. Deshalb hier dieselbe Safe-Area
     nochmal addieren. */
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* ---------- Hero ---------- */
/* margin-block-end statt Kürzel-Token: --gap-h2-text existiert nicht mehr.
   0 statt Entfernen, damit das H1 keinen zusätzlichen Browser-Standardabstand
   zieht — der Abstand zur Lead-Zeile kommt bewusst allein aus deren eigenem
   margin-top (siehe .sst-hero__lead). */
.sst-hero h1 { margin-block-end: 0; }

/* ---------- Bild mit Pflicht-Caption ---------- */
/* sst-bild/-caption sind seitenweit im Einsatz (Zimmerkarte, Haus, Galerie).
   Die Literalwerte ersetzen die geloeschten Tokens --s-8/--radius-img/--s-2,
   ohne die bestehende Optik sichtbar zu veraendern. */
.sst-bild { margin-block: 28px 0; }
.sst-bild img { border-radius: var(--r); display: block; }
.sst-bild__caption,
.sst-bild figcaption {
  font-size: .9rem;
  color: var(--c-ink-muted);
  margin-block-start: 8px;
  text-align: left;
}

/* ---------- Hinweis-Block ---------- */
/* Weiterhin im Einsatz: das serverseitig gerenderte Anfrageformular
   (inc/frontend.php: sst_anfrage_hinweis(), Bad-Wunsch-Fieldset) rendert
   sst-hinweis/--wichtig/--ja direkt als PHP-Strings, nicht als Pattern —
   deshalb tauchen die Klassen in keinem patterns/-Grep auf, sind aber aktiv. */
.sst-hinweis {
  border: 1px solid var(--c-line);
  border-inline-start: 4px solid var(--c-line);
  border-radius: var(--r);
  padding: 20px;
  background: #fff;
}
.sst-hinweis__label {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 10px 0;
}
/* Fließtext bleibt Tinte — Bernstein nur Rahmen und Label (WCAG AA). */
.sst-hinweis__body { color: var(--c-ink); }
.sst-hinweis__body ul { margin: 0; padding-inline-start: 1.25em; }
.sst-hinweis__body li + li { margin-block-start: 10px; }

.sst-hinweis--wichtig {
  background: var(--c-notice-bg);
  border-color: var(--c-notice);
  border-inline-start-color: var(--c-notice);
}
.sst-hinweis--wichtig .sst-hinweis__label { color: var(--c-notice); }

.sst-hinweis--ja {
  border-color: var(--c-yes);
  border-inline-start-color: var(--c-yes);
}
.sst-hinweis--ja .sst-hinweis__label { color: var(--c-yes); }

/* ---------- Anfrageformular ---------- */
/* Ebenfalls aus inc/frontend.php (sst_anfrage_formular_html()), nicht aus
   einem Pattern — siehe Hinweis oben bei .sst-hinweis. */
.sst-formular {
  max-width: 640px;
  margin-block-start: 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.sst-formular__zeile {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 520px) {
  .sst-formular__zeile { grid-template-columns: repeat(3, 1fr); }
}

.sst-formular__feld { display: flex; flex-direction: column; gap: 8px; }
.sst-formular__feld label {
  font-weight: 600;
  font-size: .86rem;
}

.sst-formular input[type="text"],
.sst-formular input[type="date"],
.sst-formular input[type="number"],
.sst-formular input[type="email"],
.sst-formular input[type="tel"],
.sst-formular textarea {
  /* Bare <input>/<textarea> tragen keine sst-Klasse, deshalb greift der
     globale [class^="sst-"]-Reset hier NICHT — ohne dieses box-sizing
     addieren Padding und Rahmen zur 100%-Breite und die Felder laufen bei
     schmalen Viewports über den Gutter hinaus. */
  box-sizing: border-box;
  font: inherit;
  color: var(--c-ink);
  background: #fff;
  /* --c-ink-faint statt --c-line: ein Bedienelement braucht laut WCAG 1.4.11
     mindestens 3:1 Randkontrast, --c-line allein macht die Feldgrenze
     praktisch unsichtbar — derselbe Grund, aus dem hier vorher --border-strong
     stand (Token existiert nicht mehr, die Kontrastanforderung schon). */
  border: 1.5px solid var(--c-ink-faint);
  border-radius: var(--r);
  padding: 14px;
  width: 100%;
}
.sst-formular textarea { resize: vertical; }

.sst-formular input:focus-visible,
.sst-formular textarea:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 1px;
}

/* Bad-Wunsch: der inhaltliche Kern des Formulars — auffällige Umrandung
   statt eines Radiopaars unter vielen gleich behandelten Feldern. Dieselbe
   Bernstein-Optik wie klartext.php für den Bad-Hinweis, keine neue Farbe. */
.sst-formular__badfrage { margin: 0; }
.sst-formular__badfrage legend { padding: 0; }
.sst-formular__radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 8px;
}
.sst-formular__radio + .sst-formular__radio { margin-block-start: 8px; }
/* Gemessen mit scripts/messen.py (isolierter Render-Test): Ein reiner
   `border:`-Zusatz auf input[type=radio|checkbox] erreicht in Chromium NICHT
   den vorgesehenen Rahmen — bei appearance:auto zeichnet der Browser seine
   eigene, kaum sichtbare native Kontur und ignoriert die Autoren-Randfarbe.
   Fix: appearance:none + eigenes, flaches Punkt/Haken-Icon per ::before,
   damit der Rahmen wirklich der gerenderte ist. --c-ink-faint aus demselben
   Kontrastgrund wie bei den Textfeldern oben. */
.sst-formular__radio input[type="radio"],
.sst-formular__feld--checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex: none;
  margin-block-start: 0.15em;
  border: 1.5px solid var(--c-ink-faint);
  background: #fff;
  display: inline-grid;
  place-content: center;
}
.sst-formular__radio input[type="radio"] { border-radius: 50%; }
.sst-formular__feld--checkbox input[type="checkbox"] { border-radius: var(--r); }

.sst-formular__radio input[type="radio"]::before,
.sst-formular__feld--checkbox input[type="checkbox"]::before {
  content: "";
  background: var(--c-brand);
  transform: scale(0);
}
.sst-formular__radio input[type="radio"]:checked::before,
.sst-formular__feld--checkbox input[type="checkbox"]:checked::before {
  transform: scale(1);
}
.sst-formular__radio input[type="radio"]::before { width: 0.625rem; height: 0.625rem; border-radius: 50%; }
.sst-formular__feld--checkbox input[type="checkbox"]::before { width: 0.7rem; height: 0.7rem; }

.sst-formular__radio input[type="radio"]:focus-visible,
.sst-formular__feld--checkbox input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}
.sst-formular__radio label { font-weight: 700; font-size: 1rem; }

.sst-formular__feld--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.sst-formular__feld--checkbox label { font-weight: 400; font-size: 1rem; }
.sst-formular__feld--checkbox a { color: var(--c-brand); }

/* Honeypot: für sehende Gäste unsichtbar per Position außerhalb des
   sichtbaren Bereichs — bewusst NICHT display:none, weil einfache Bots
   genau danach filtern. aria-hidden auf dem Container (siehe Pattern) nimmt
   das Feld zusätzlich aus dem Accessibility-Baum, damit es kein Screenreader
   vorliest. */
.sst-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Kontaktabschnitt ----------
   Tritt in #anfragen an die Stelle des Formulars, sobald eine
   Buchungsmaschine angebunden ist (sst_kontakt_html() in inc/frontend.php). */
.sst-kontakt { margin-block-start: 24px; }
.sst-kontakt p { margin: 0 0 14px; color: var(--c-ink-muted); line-height: 1.7; }
.sst-kontakt p:first-child { color: var(--c-ink); font-weight: 600; }

/* =========================================================
   Zimmerkarte — Signatur-Komponente (Task 4)
   ========================================================= */

/* ---------- Sektionsgerüst ---------- */
.sst-section { padding-block: 62px; padding-inline: var(--gutter); }
/* Der Sektionskopf teilt sich die linke Kante mit dem Inhalt der Sektion.
   Vorher stand hier nur max-width: 64ch ohne margin-inline - der Kopf begann
   damit am Gutter (gemessen x=22 bei 1440px), waehrend Karten und Listen als
   1180er-Block zentriert bei x=130 anfingen. 108px Versatz zwischen einer
   Ueberschrift und dem, was sie ueberschreibt; bei der FAQ mit ihrem
   schmaleren Lesemass sogar 288px. Das las sich nicht ruhig, sondern
   unfertig - und zwar ausgerechnet in den Sektionen, die Vertrauen
   herstellen sollen.

   Der Kopf ist jetzt derselbe Block wie der Inhalt (--sst-mass), die
   Textbreite von 64ch sitzt auf seinen Kindern. Damit stimmt die Kante,
   ohne dass der Fliesstext zu lang wird. --sst-mass steht auf der Sektion,
   damit eine Sektion mit abweichendem Mass (die FAQ) nur eine Zahl aendern
   muss statt zwei Regeln. */
.sst-section, .sst-zimmer { --sst-mass: 1180px; }
.sst-sec-head { max-width: var(--sst-mass, 1180px); margin-inline: auto; margin-bottom: 40px; }
/* 687px und NICHT 64ch: Die ch-Einheit rechnet in der Schriftgroesse des
   Elements, auf dem sie steht. Auf dem Kopf (16px Inter) sind 64ch = 687px,
   auf der h2 (Fraunces, rund 29px) waeren es ueber 1200px - die Kappung
   griffe dort also gar nicht und die Ueberschrift liefe ueber die volle
   Blockbreite. 687px ist exakt der Wert, den 64ch vorher am Kopf ergaben. */
.sst-sec-head > * { max-width: 687px; }
.sst-eyebrow {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: .76rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-brand);
}
.sst-sec-head h2 { margin: 12px 0 0; }
.sst-lead { color: var(--c-ink-muted); font-size: 1.06rem; }

/* ---------- Button ---------- */
.sst-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; padding-inline: 28px;
  border-radius: var(--r-pill);
  font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
/* padding-block ergaenzt (Detektorbefund cramped-padding): Der Button hatte
   0px vertikales Padding und lebte allein von min-height. Sobald die
   Beschriftung zweizeilig wird - laengerer Zimmername, andere Sprache -
   klebt der Text ohne Reserve an der Pillenkante. */
.sst-btn--buchen { background: var(--c-brand); color: #fff; width: 100%; margin-top: 24px; padding-block: 14px; }
.sst-btn--buchen:hover { background: var(--c-brand-deep); }
.sst-nach-btn { margin: 11px 0 0; font-size: .85rem; color: var(--c-ink-faint); text-align: center; }

/* ---------- Zimmerkarte ---------- */
.sst-zimmerliste { display: grid; gap: 26px; }
.sst-zimmerkarte {
  display: grid;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh);
}
.sst-zimmerkarte__bild { position: relative; min-height: 260px; }
.sst-zimmerkarte__bild .sst-bild { margin: 0; height: 100%; }
.sst-zimmerkarte__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sst-bild__caption {
  padding: 9px 16px;
  font-size: .82rem; color: var(--c-ink-faint);
  background: #fff;
}
.sst-zimmerkarte__kein-bild {
  margin: 0; min-height: 260px; aspect-ratio: 4 / 3;
  display: grid; place-items: center; text-align: center;
  padding: 26px; line-height: 1.65;
  color: var(--c-ink-faint); background: var(--c-sand);
}
.sst-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: rgba(255, 255, 255, .96); color: var(--c-ink);
  font-size: .82rem; font-weight: 600;
  padding: 8px 15px; border-radius: var(--r-pill);
  box-shadow: var(--sh);
}
.sst-zimmerkarte__text { padding: 28px; display: flex; flex-direction: column; }
.sst-zimmerkarte__text h3 { font-size: 1.5rem; margin: 0; }
.sst-spec { margin: 10px 0 0; color: var(--c-notice); font-size: .93rem; font-weight: 600; }
.sst-beschreibung { margin: 16px 0 0; color: var(--c-ink-muted); font-size: .98rem; }

/* Der Bad-Hinweis. Nie Bordeaux (das ist die Markenfarbe), nie kleiner als
   der Fließtext — Spec G5 und G7. */
.sst-bad {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 20px 0 0; padding: 14px 16px;
  border-radius: 14px;
  font-size: .94rem; font-weight: 500; line-height: 1.55;
}
.sst-bad .sst-icon { flex: none; margin-top: 2px; }
.sst-bad--ja { background: var(--c-yes-bg); color: #334A2C; }
.sst-bad--ja .sst-icon { color: var(--c-yes); }
.sst-bad--hinweis { background: var(--c-notice-bg); color: var(--c-notice); }
.sst-bad--hinweis .sst-icon { color: var(--c-notice); }

.sst-merkmale { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; }
.sst-merkmal { display: flex; gap: 10px; align-items: center; font-size: .93rem; color: var(--c-ink-muted); }
.sst-merkmal .sst-icon { flex: none; color: var(--c-brand); }

@media (min-width: 520px) {
  .sst-merkmale { grid-template-columns: 1fr 1fr; gap: 11px 20px; }
}
@media (min-width: 880px) {
  .sst-section { padding-block: 96px; }
  .sst-btn--buchen { width: auto; align-self: flex-start; padding-inline: 34px; }
  .sst-nach-btn { text-align: left; }
  .sst-zimmerkarte { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .sst-zimmerkarte__bild img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .sst-zimmerkarte__bild .sst-bild__caption { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, .92); }
  /* Bild und Text wechseln die Seite, damit die Liste nicht wie eine Tabelle wirkt. */
  .sst-zimmerkarte:nth-child(even) .sst-zimmerkarte__bild { order: 2; }
}

/* =========================================================
   Hero und Buchungsmaske (Task 5)
   ========================================================= */

/* ---------- Hero ---------- */
.sst-hero { position: relative; background: var(--c-night); }
.sst-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.sst-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.sst-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(36,26,23,.72) 0%, rgba(36,26,23,.5) 45%, rgba(36,26,23,.86) 100%);
}
.sst-hero__inner {
  position: relative; text-align: center;
  max-width: 800px; margin-inline: auto;
  padding: 76px var(--gutter) 120px;
}
.sst-hero h1 { color: #FFF8F2; margin-top: 14px; }
.sst-hero__lead { color: #DBC8C0; font-size: 1.14rem; margin: 20px auto 0; max-width: 52ch; }
.sst-eyebrow--hell { color: #E8B9A0; }
.sst-pills { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 28px 0 0; padding: 0; list-style: none; }
.sst-pill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.24);
  color: #F6EAE4; border-radius: var(--r-pill);
  padding: 9px 16px; font-size: .88rem;
}
.sst-pill .sst-icon { flex: none; color: #E8B9A0; }

/* Mobil bucht der Grossteil der Gaeste ueber das Handy - die Buchungsmaske
   muss deshalb so schnell wie moeglich sichtbar sein. Eyebrow und Lead
   kosten hier nur Scrollstrecke, ohne dass Information verloren geht:
   beides steht sinngemaess im H1 bzw. weiter unten in "Auf einen Blick".
   Die Kundenversion notierte 599px; hier auf 519px gezogen, weil 520 der
   vorgegebene Breakpoint ist. */
@media (max-width: 519px) {
  .sst-hero__inner { padding: 32px var(--gutter) 90px; }
  .sst-eyebrow--hell { display: none; }
  /* Der Lead bleibt jetzt stehen. Er war ausgeblendet, weil er 49 Woerter
     lang war und den Bildschirm gefuellt haette; seit der Kuerzung auf 18
     Woerter sind es zwei Zeilen. Vorher sah ein Gast am Handy - also die
     Mehrheit - den einzigen Satz nie, der die Fahrzeit zum Stadion nennt. */
  .sst-hero h1 { margin-top: 0; }
  .sst-pills { margin-top: 18px; gap: 6px; }
  .sst-pill { padding: 6px 11px; font-size: .78rem; gap: 6px; }
  .sst-pill .sst-icon { width: 12px; height: 12px; }
}

/* ---------- Buchungsmaske ---------- */
.sst-buchbar { position: relative; z-index: 5; margin-top: -72px; padding-inline: var(--gutter); }
.sst-buchkarte {
  background: #fff; border-radius: var(--r-lg);
  padding: 26px 24px 24px; box-shadow: var(--sh-lg);
  max-width: 960px; margin-inline: auto;
}
/* h3 mit aufgenommen: Die Firmenanfrage sitzt in derselben Karte, steht auf
   der Seite aber unter einer h2 und braucht deshalb die kleinere Ebene —
   bei gleicher Optik. */
.sst-buchkarte h2, .sst-buchkarte h3 { font-size: 1.3rem; text-align: center; margin: 0; }
.sst-buchkarte__sub { color: var(--c-ink-muted); font-size: .94rem; margin: 8px 0 20px; text-align: center; }
.sst-buchform { display: grid; gap: 13px; }
/* 12px statt der 14px der uebrigen Felder: Das Datumsfeld traegt neben dem
   Text auch noch Chromiums Kalendersymbol und ist damit das engste Feld der
   Maske. Auf dem Desktop faellt der Unterschied nicht auf. */
.sst-buchform input[type="date"] {
  padding-inline: 12px;

  /* -webkit-appearance: none IST HIER PFLICHT, NICHT KOSMETIK.
     Auf dem iPhone (Safari) hat ein <input type="date"> in der nativen
     Darstellung eine EIGENE MINDESTBREITE und schrumpft nicht unter sie —
     `width: 100%` wird schlicht ignoriert. Zweispaltig lief das Feld deshalb
     ueber seine Rasterzelle hinaus: Am 13.08.2026 standen Anreise und
     Abreise auf dem iPhone ueberlappend nebeneinander, die Rahmen klebten
     aneinander und der Spaltenabstand war verschwunden. In Chromium trat
     das nicht auf — dort schrumpft das Feld brav.

     Ohne die native Darstellung verhaelt sich das Feld wie ein normales
     Eingabefeld und haelt sich an die Zelle. Der Datumswaehler von iOS
     oeffnet sich beim Antippen weiterhin; nur das Aussehen kommt jetzt aus
     diesem Stylesheet, was hier ohnehin gewollt ist.

     width: 100% steht zusaetzlich, weil Safari sonst auf seine
     Inhaltsbreite zurueckfaellt. */
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
}
.sst-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sst-feld label { font-size: .78rem; font-weight: 600; color: var(--c-ink-muted); }
.sst-feld input, .sst-feld select {
  min-height: 52px; width: 100%; min-width: 0;
  border-radius: 13px; border: 1.5px solid var(--c-line-stark);
  background: var(--c-paper); padding-inline: 14px;
  font: inherit; font-size: 1rem; color: var(--c-ink);
}
.sst-feld input:hover, .sst-feld select:hover { border-color: var(--c-brand); }

/* ANREISE UND ABREISE NEBENEINANDER — ab 390px.
   Vorher lag jedes Feld ueber die volle Kartenbreite (gemessen 298px bei
   390px Fensterbreite). Auf dem iPhone faellt das besonders auf: Safari zeigt
   ein leeres <input type="date"> ohne jeden Hinweistext — zwei fingerbreite,
   voellig leere Kaesten untereinander. Der Kunde las das als Fehler.
   Nebeneinander ist auch fachlich richtig: Die beiden Daten gehoeren
   zusammen und werden verglichen, nicht nacheinander gelesen.

   WARUM AUSGERECHNET 390px UND NICHT DER HAUSBREAKPOINT 520px:
   Diese Grenze ist gemessen, nicht gewaehlt. Chromium zeigt im leeren
   Datumsfeld "dd.mm.yyyy" (93px bei 16px Schrift) plus Kalendersymbol
   (~22px). Mit 12px Innenabstand und 1.5px Rahmen je Seite braucht das Feld
   rund 142px. Zweispaltig steht das erst ab etwa 390px Fensterbreite zur
   Verfuegung — darunter schnitte der Platzhalter ab, und zwar sichtbar:
   "dd.mm.yyy" mit dem Symbol darueber. Gemessen fehlten bei 360px 18px.
   Deshalb bleibt es unterhalb von 390px einspaltig.

   Die Schrift kleiner zu machen waere der falsche Ausweg: Unter 16px zoomt
   iOS Safari beim Antippen eines Eingabefeldes automatisch in die Seite
   hinein, und der Gast landet in einer verschobenen Ansicht.

   Spaltenabstand 10px statt 13px — jeder Pixel zaehlt hier; senkrecht
   bleiben die 13px, damit die Zeilen nicht zusammenruecken. */
@media (min-width: 390px) {
  .sst-buchform { grid-template-columns: 1fr 1fr; gap: 13px 10px; }
  /* Das eine klappt ein Panel auf, das andere ist die Hauptaktion —
     beide ueber die volle Breite. */
  .sst-buchform > .sst-feld--gaeste,
  .sst-buchform > .sst-btn--cta { grid-column: 1 / -1; }
}
.sst-btn--cta { background: var(--c-brand); color: #fff; min-height: 52px; width: 100%; }
.sst-btn--cta:hover { background: var(--c-brand-deep); }
.sst-buchkarte__fine {
  display: flex; gap: 8px; justify-content: center;
  margin: 16px 0 0; font-size: .82rem; color: var(--c-ink-faint);
}
.sst-buchkarte__fine .sst-icon { flex: none; margin-top: 3px; }

/* ---------- Gaeste und Zimmer (Aufklappfeld in der Buchungsmaske) ----------
   Der Ausloeser sieht aus wie die beiden Datumsfelder daneben und traegt
   dieselben Masse: gleiche Hoehe, gleicher Rahmen, gleicher Radius. Ein
   drittes Feld, das sich anders anfuehlt als die ersten beiden, liest sich in
   einer vierspaltigen Leiste als Fehler. */
.sst-feld__marke { font-size: .78rem; font-weight: 600; color: var(--c-ink-muted); }
.sst-gaeste summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding-inline: 14px;
  border-radius: 13px; border: 1.5px solid var(--c-line-stark);
  background: var(--c-paper);
  font: inherit; font-size: 1rem; color: var(--c-ink);
  cursor: pointer;
  list-style: none;
}
.sst-gaeste summary::-webkit-details-marker { display: none; }
/* Gemessen: "15 Gäste · 5 Zimmer" braucht 149px, in einer Spalte von 189px
   bleiben nach Rahmen, Innenabstand und Pfeil rund 138px. Der Text brach
   deshalb zweizeilig um und machte den Ausloeser 57px hoch — neben zwei
   52px-Datumsfeldern eine sichtbare Stufe. Die Spalte ist jetzt breiter
   (siehe Raster ab 880px), und umbrechen darf der Text hier grundsaetzlich
   nicht: Er wuerde die Zeile immer wieder springen lassen, sobald ein Zimmer
   dazukommt. Kuerzt lieber, als die Maske zu verformen. */
.sst-gaeste summary > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sst-gaeste summary:hover { border-color: var(--c-brand); }
.sst-gaeste summary::after {
  content: "▾"; color: var(--c-ink-muted); font-size: .8rem; flex: none;
}
.sst-gaeste[open] summary::after { content: "▴"; }

/* Bezugspunkt ist die eigene Spalte, nicht die ganze Karte: mit .sst-buchform
   als Bezug haenge das Feld am rechten Kartenrand und damit unter dem
   Absende-Knopf statt unter seinem eigenen Ausloeser. */
.sst-feld--gaeste { position: relative; }

/* Auf dem Telefon steht das Feld im Fluss und schiebt den Knopf nach unten.
   Schwebend wuerde es ihn verdecken - dort ist die Maske gestapelt und der
   Knopf sitzt unmittelbar darunter, der Gast muesste erst wieder zuklappen,
   um ueberhaupt absenden zu koennen. */
.sst-gaeste__panel {
  margin-top: 10px; padding: 4px 16px 16px;
  background: #fff; border-radius: var(--r);
  border: 1.5px solid var(--c-line-stark);
}
/* Name und Entfernen-Knopf links untereinander, das Auswahlfeld rechts.
   Mit "Entfernen" in einer eigenen vollen Zeile DARUNTER wurde jedes Zimmer
   rund 170px hoch — bei fuenf Zimmern eine Liste, die auf einem flachen
   Fenster nicht mehr ganz zu sehen ist. So sind es rund 90px, ohne dass die
   Tippflaeche des Links kleiner wird.

   Flex und KEIN festes Raster: Als Rasterzeile behielt "Entfernen" seine
   Hoehe auch ausgeblendet — grid-template-areas legt die Zeile an, ob sie
   belegt ist oder nicht. Beim ersten Zimmer klaffte deshalb eine leere Zeile
   unter dem Namen und das Auswahlfeld stand sichtbar tiefer als er. Ein
   ausgeblendeter Knopf nimmt im Flexfluss gar keinen Platz ein, die Zeile
   wird also von selbst flacher. */
/* Unten ausgerichtet, wie die Buchungsmaske selbst (.sst-buchform nutzt
   align-items: end). Mittig ausgerichtet haengt der Zimmername zwischen der
   Beschriftung "Personen" und dem Auswahlfeld — gemessen 13px ueber dessen
   Mitte, also an keiner der beiden Kanten. Unten treffen sich Name und
   Auswahlfeld auf einer Linie. */
.sst-gaeste__zimmer {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--c-line);
}
.sst-gaeste__meta {
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0;
}
.sst-gaeste__zimmer:last-child { border-bottom: 0; }
.sst-gaeste__titel {
  margin: 0; font-size: .88rem; font-weight: 600; color: var(--c-ink);
  /* Sonst bricht "Zimmer 1" um, sobald das Auswahlfeld daneben seine
     Mindestbreite beansprucht. */
  white-space: nowrap;
}
.sst-gaeste__wahl {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .78rem; font-weight: 600; color: var(--c-ink-muted);
}
.sst-gaeste__wahl select {
  min-height: 44px; min-width: 76px;
  border-radius: 11px; border: 1.5px solid var(--c-line-stark);
  background: var(--c-paper); padding-inline: 12px;
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--c-ink);
}
.sst-gaeste__wahl select:hover { border-color: var(--c-brand); }
.sst-gaeste__mehr, .sst-gaeste__weg {
  border: 0; background: transparent; padding: 0;
  font: inherit; font-size: .88rem; color: var(--c-brand);
  text-decoration: underline; cursor: pointer;
  /* Tippflaeche nach WCAG 2.5.8, wie ueberall im Theme. */
  min-height: 44px;
}
.sst-gaeste__mehr { margin-top: 4px; }
/* Unter dem Zimmernamen, linksbuendig — er gehoert zu diesem Zimmer, nicht
   zur ganzen Liste. Beim letzten verbliebenen Zimmer ist er ausgeblendet und
   nimmt dann keinen Platz ein (siehe .sst-gaeste__zimmer). */
.sst-gaeste__weg { align-self: flex-start; }
.sst-gaeste__mehr:disabled {
  color: var(--c-ink-faint); text-decoration: none; cursor: default;
}

/* ---------- WPForms im Theme-Gewand ----------
   Seit dem 11.08.2026 ist die Firmenanfrage ein WPForms-Formular. Das Markup
   gehoert dem Plugin; angefasst wird es hier nur ueber die Klassen, die
   WPForms selbst vergibt, damit ein Plugin-Update nicht ueber eigene
   Umbauten stolpert.

   Alle Werte kommen aus denselben Variablen wie die uebrigen Felder des
   Themes: Ohne das stuenden hier 43px hohe Felder mit hellgrauem Rahmen
   direkt unter der 52px hohen Buchungsmaske - zwei Formularsprachen auf einer
   Seite. */
/* Gesteuert wird ueber die CSS-Variablen, die WPForms selbst anbietet, NICHT
   durch Ueberschreiben seiner Regeln. Der erste Versuch tat genau das und ging
   unter: WPForms setzt die Werte in der Darstellung "modern" ueber eigene
   Variablen und mit hoeherer Spezifitaet - die Beschriftungen blieben 16px
   fett schwarz, obwohl die Regel dastand. Ueber die Variablen gewinnt man
   nicht durch Spezifitaet, sondern man benutzt die vorgesehene Schnittstelle:
   Ein Plugin-Update kann seine Klassennamen aendern, seine Variablen sind das
   dokumentierte Gelenk. */
.sst-wpforms { margin-top: 22px; }
.sst-wpforms .wpforms-container {
  margin: 0;
  --wpforms-container-padding: 0;

  --wpforms-field-size-input-height: 52px;
  --wpforms-field-size-font-size: 1rem;
  --wpforms-field-size-padding-h: 14px;
  --wpforms-field-size-checkbox-size: 22px;
  --wpforms-field-border-size: 1.5px;
  --wpforms-field-border-radius: 13px;
  --wpforms-field-border-color: var(--c-line-stark);
  --wpforms-field-background-color: var(--c-paper);
  --wpforms-field-text-color: var(--c-ink);

  --wpforms-label-color: var(--c-ink-muted);
  --wpforms-label-size-font-size: .78rem;
  --wpforms-label-size-line-height: 1.3;
  --wpforms-label-sublabel-color: var(--c-ink-faint);
  --wpforms-label-error-color: var(--c-brand-deep);

  /* BEIDE auf denselben Wert: WPForms nimmt fuer den Ruhezustand mal die
     eine, mal die andere Variable — gemessen kam mit "-alt: brand-deep" das
     dunkle Braun als Grundfarbe heraus, waehrend der CTA daneben im hellen
     stand. Zwei verschieden dunkle Hauptknoepfe auf einer Seite liest man als
     Fehler. Der Hover steht darunter als eigene Regel. */
  --wpforms-button-background-color: var(--c-brand);
  --wpforms-button-background-color-alt: var(--c-brand);
  --wpforms-button-text-color: #fff;
  --wpforms-button-text-color-alt: #fff;
  --wpforms-button-border-radius: var(--r-pill);
  --wpforms-button-size-height: 52px;
  --wpforms-button-size-font-size: 1rem;
  --wpforms-button-size-padding-h: 30px;
}
.sst-wpforms .wpforms-field { padding: 0; margin-bottom: 13px; }
/* Fuer die Strichstaerke der Beschriftung gibt es keine Variable; das Theme
   setzt ueberall 600, WPForms 700. */
.sst-wpforms .wpforms-container .wpforms-field-label { font-weight: 600; }
.sst-wpforms textarea { min-height: 96px; padding-block: 12px; resize: vertical; }
.sst-wpforms input:hover, .sst-wpforms select:hover, .sst-wpforms textarea:hover {
  border-color: var(--c-brand);
}
/* Die Zustimmung ist eine einzelne Checkbox mit langem Text. 22px, damit die
   Marke selbst sichtbar ist, und ein Label mit 44px Hoehe als Tippflaeche -
   dieselbe Loesung wie beim eigenen Formular (WCAG 2.5.8).

   AUSRICHTUNG, gemessen und korrigiert am 11.08.2026. Die Checkbox stand 14px
   ueber der Textmitte und mit 22px statt 12px Abstand daneben. Ursache war
   nicht diese Datei, sondern eine Rechnung von WPForms:

     margin-top: calc((var(--wpforms-label-size-font-size) * 1.3
                       - var(--wpforms-field-size-checkbox-size)) / 1.5)

   Mit unseren Werten sind das -3.85px. Die Rechnung setzt voraus, dass die
   Beschriftung direkt an der Textzeile anfaengt - unsere hat oben 13px
   Innenabstand, damit sie die 44px Tippflaeche erreicht. Der Text rutscht also
   nach unten, die Checkbox bleibt oben stehen.

   Nicht gegen die Rechnung anrechnen, sondern sie abschalten: margin 0 an der
   Checkbox, und die Ausrichtung uebernimmt der Flexkasten der Zeile
   (align-items: center). Damit stimmt sie auch dann noch, wenn der Text auf
   dem Handy zweizeilig wird oder WPForms seine Formel aendert.

   SPEZIFITAET: WPForms adressiert das Label mit
   `div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-gdpr-checkbox ul li input+label`
   (vier Klassen, fuenf Elemente) und setzt dort padding-inline-start und
   Schriftgroesse. Die kurze Fassung dieser Regeln hat lautlos verloren - die
   Beschriftung stand auf .78rem statt der gewuenschten .88rem. Deshalb die
   volle Kette plus doppelte .sst-wpforms-Klasse, dieselbe Loesung wie beim
   Fokusring weiter unten. Kein !important: Der Kunde soll im Customizer
   nachjustieren koennen.

   Das Label bleibt ein BLOCK, kein Flexkasten. Als Flexkasten wuerden
   "Ich habe die", der Link und "gelesen und akzeptiere sie." zu drei
   Flex-Elementen und der Satz koennte nicht mehr normal umbrechen. */
.sst-wpforms .wpforms-field-gdpr-checkbox ul { list-style: none; margin: 0; padding: 0; }
.sst-wpforms.sst-wpforms div.wpforms-container-full .wpforms-form .wpforms-field-gdpr-checkbox ul li {
  display: flex; align-items: center; gap: 12px;
}
.sst-wpforms.sst-wpforms div.wpforms-container-full .wpforms-form .wpforms-field-gdpr-checkbox ul li input[type="checkbox"] {
  width: auto; min-width: 22px; min-height: 22px; flex: none; margin: 0;
}
.sst-wpforms.sst-wpforms div.wpforms-container-full .wpforms-form .wpforms-field-gdpr-checkbox ul li input[type="checkbox"] + label {
  /* 13px + 1.4 x .88rem + 13px = 45.7px. Ueber den 44px aus WCAG 2.5.8, und
     ohne min-height: Eine Mindesthoehe ueber der natuerlichen Hoehe legt den
     Ueberschuss nach UNTEN und verschiebt den Text wieder aus der Mitte. */
  padding: 13px 0; line-height: 1.4;
  font-size: .88rem; font-weight: 400; color: var(--c-ink);
}
.sst-wpforms .wpforms-submit { width: 100%; font-weight: 600; cursor: pointer; }
.sst-wpforms .wpforms-container .wpforms-submit:hover { background-color: var(--c-brand-deep); }

/* FOKUSRING ZURUECKHOLEN. Vom Messlauf gefunden, kein Schoenheitsfehler:
   WPForms setzt `outline: none` — einmal pauschal ueber
   `div.wpforms-container-full *`, einmal gezielt auf :focus — und ersetzt den
   Ring durch einen 1px-Schatten. Die globale Fokusregel des Themes steht in
   `:where(...)` und hat damit Spezifitaet NULL; sie verliert gegen beides.
   Wer sich mit der Tastatur durch das Formular bewegt, sah also nicht, wo er
   steht: acht Elemente ohne jeden sichtbaren Ring (WCAG 2.4.7).

   Deshalb hier mit genug Spezifitaet dagegen — und auf :focus-visible, nicht
   auf :focus: Beim Mausklick bleibt es bei der ruhigen WPForms-Darstellung,
   der Ring erscheint nur bei Tastaturbedienung. Gleiche Werte wie im
   uebrigen Theme, damit der Ring hier nicht anders aussieht als daneben. */
/* Die Klasse steht doppelt, und das ist Absicht. Einfach gesetzt kam die Regel
   auf dieselbe Spezifitaet wie WPForms' `…:focus:invalid{outline:none}` — bei
   Gleichstand gewinnt die spaeter geladene Datei, und das ist das Plugin.
   Sichtbar wurde es daran, dass nur die drei PFLICHTFELDER ohne Ring blieben:
   Ein leeres Pflichtfeld ist :invalid, ein leeres Kann-Feld nicht. */
/* EINZELEIGENSCHAFTEN, nicht die Kurzform. Als Kurzform mit var() darin blieb
   der Absende-Knopf im Messlauf bei "outline-style solid, outline-width 0px"
   stehen: Enthaelt eine Kurzform ein var(), entscheidet der Browser erst spaet
   ueber die ganze Deklaration — faellt sie aus, fallen ALLE Teilwerte mit,
   auch Breite und Stil. Einzeln gesetzt bleibt der Ring auch dann sichtbar,
   wenn die Farbvariable einmal nicht auflösbar ist; die Farbe hat zusaetzlich
   den Token-Wert als Rueckfallwert. */
.sst-wpforms.sst-wpforms div.wpforms-container-full :is(a[href], input, select, textarea, button, [tabindex]):focus-visible {
  outline-style: solid !important;
  outline-width: 3px !important;
  outline-color: var(--c-focus, #A8760F) !important;
  outline-offset: 2px;
}
.sst-wpforms .wpforms-error { font-size: .85rem; }
.sst-wpforms .wpforms-confirmation-container-full {
  background: var(--c-sand); border: 1px solid var(--c-line);
  border-radius: var(--r); padding: 18px 20px; margin: 0;
  color: var(--c-ink);
}

/* ---------- Firmenanfrage (Geschaeftsreisen) ----------
   Eigene Grid-Klasse statt .sst-buchform: der Vier-Spalten-Zwang der
   Buchungsmaske ab 880px passt nicht zu sechs Feldern plus Textarea und
   wuerde das Formular zerreissen.

   Der Breakpoint steht bewusst auf 880px statt der 700px der Kundenversion —
   700px ist keiner der drei erlaubten Werte (520 / 880 / 1000). */
/* max-width und margin-inline wie bei .sst-karten daruber. Ohne sie lief der
   Block ueber die volle Sektionsbreite, waehrend die drei Karten bei 1180px
   gedeckelt sind — links und rechts stand er sichtbar ueber. Vom Kunden am
   13.08.2026 angestrichen („Linie gleiche wie oben"). */
.sst-firmenanfrage { margin-top: 44px; max-width: 1180px; margin-inline: auto; }
/* .sst-firmenform ist am 11.08.2026 entfallen: Die Firmenanfrage ist jetzt
   ein WPForms-Formular und bringt eigenes Markup mit (siehe .sst-wpforms).
   Die Regel stand danach noch da und traf nichts mehr — genau die Art
   Karteileiche, die beim naechsten Umbau als "gilt bestimmt irgendwo"
   verschont wird. */
.sst-feld--full { grid-column: 1 / -1; }
.sst-feld textarea {
  min-height: 96px; padding-block: 12px; resize: vertical;
  width: 100%; min-width: 0;
  border-radius: 13px; border: 1.5px solid var(--c-line-stark);
  background: var(--c-paper); padding-inline: 14px;
  font: inherit; font-size: 1rem; color: var(--c-ink);
}
.sst-feld textarea:hover { border-color: var(--c-brand); }
.sst-feld--checkbox { flex-direction: row; align-items: flex-start; gap: 10px; }
/* Touchziel: die Checkbox selbst ist nur 13px gross, das anklickbare Label
   traegt das Ziel mit. 44px sind die Vorgabe aus den Rahmenbedingungen. */
.sst-feld--checkbox input { width: auto; min-width: 22px; min-height: 22px; margin-top: 11px; }
/* inline-block, NICHT flex: Als Flex-Container wuerde das Label seine drei
   Kinder (Text, Link, Text) zu Flex-Items machen und die Leerzeichen
   dazwischen verschlucken - gerendert stand da "Ich habe
   dieDatenschutzerklaerunggelesen". inline-block haelt den Inhalt im
   normalen Zeilenfluss und traegt trotzdem Hoehe und Innenabstand. */
.sst-feld--checkbox label {
  display: inline-block; min-height: 44px; padding-block: 12px; line-height: 1.4;
  font-size: .88rem; font-weight: 400;
}

@media (min-width: 880px) {

  /* Zweispaltig wie das fruehere eigene Formular. Einspaltig wurde der
     Abschnitt ueber 900px hoch und der Absende-Knopf lag weit unter dem
     ersten Feld — bei sieben Feldern ist das der Unterschied zwischen einem
     Formular, das man ueberblickt, und einem, das man scrollt.
     Nachricht und Zustimmung bleiben ueber die volle Breite: ein
     mehrzeiliges Textfeld neben einem einzeiligen sieht nach Versehen aus. */
  .sst-wpforms .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0 13px; }
  .sst-wpforms .wpforms-field-textarea,
  .sst-wpforms .wpforms-field-gdpr-checkbox { grid-column: 1 / -1; }
  .sst-wpforms .wpforms-submit-container { text-align: left; }
  .sst-wpforms .wpforms-submit { width: auto; padding-inline: 30px; }
  /* Die dritte Spalte traegt mehr Text als ein Datum ("15 Gäste · 5 Zimmer"
     gegen "01.09.2026") und bekommt deshalb mehr Platz. Mit drei gleichen
     Spalten brach die Zusammenfassung um. */
  .sst-buchform { grid-template-columns: 1fr 1fr 1.3fr auto; align-items: end; }
  /* Die Spannweiten aus der Handyansicht zuruecknehmen — sonst zoege sich
     das Gaestefeld hier ueber alle vier Spalten und der Knopf darunter. */
  .sst-buchform > .sst-feld--gaeste,
  .sst-buchform > .sst-btn--cta { grid-column: auto; }
  .sst-btn--cta { width: auto; padding-inline: 30px; }
  .sst-hero__inner { padding-top: 120px; padding-bottom: 150px; }

  /* Nebeneinanderstehende Maske: hier schwebt das Feld unter seiner eigenen
     Spalte. Im Fluss wuerde es die Karte hoeher machen und den Seiteninhalt
     darunter wegschieben - die Karte ueberlappt den Hero, das Springen faellt
     entsprechend auf. Verdeckt wird nichts, der Knopf steht daneben. */
  .sst-gaeste__panel {
    position: absolute; top: calc(100% + 6px); left: 0;
    width: 320px; margin-top: 0; z-index: 6;
    box-shadow: var(--sh-lg);
    /* Fuenf Zimmer ergeben rund 480px. Ohne Begrenzung laeuft das Feld auf
       einem flachen Fenster unten aus dem Bild, und die letzten Zimmer waeren
       unerreichbar - es schwebt, scrollt also nicht mit der Seite mit. */
    max-height: min(60vh, 480px); overflow-y: auto;
  }
}

/* ---------- Sektionsvarianten ---------- */
.sst-section--sand { background: var(--c-sand); }
/* .sst-sec-head--mitte ist am 11.08.2026 ersatzlos entfallen. Drei Sektionen
   trugen einen zentrierten Kopf (vorteile, self-checkin, geschaeftsreisen),
   vier einen linksbuendigen. Die Zuordnung folgte einer echten Regel -
   zentriert stand ueber symmetrischen Dreierreihen, links ueber Listen -
   aber beim Scrollen liest man nur "mittig, mittig, links, links, links,
   mittig, links". Eine Regel, die niemand sehen kann, ist als Struktur
   wertlos und wirkt wie Zufall.

   Die Seite ist eine einzige vertikale Lesespalte. Eine linke Kante, die nie
   wandert, ist die staerkste Struktur, die ein langer One-Pager haben kann.
   Zentriert bleiben nur Hero und Schluss-CTA - das sind dunkle
   Vollflaechen-Paneele und keine Sektionskoepfe; sie rahmen den Koerper. */

/* ---------- Vorteilskarten ---------- */
.sst-karten { display: grid; gap: 20px; max-width: 1180px; margin-inline: auto; }
.sst-karte {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r); padding: 28px 26px 30px; box-shadow: var(--sh);
}
.sst-karte__ic {
  width: 48px; height: 48px; border-radius: var(--r-pill);
  background: var(--c-brand-tint); color: var(--c-brand);
  display: grid; place-items: center; margin-bottom: 18px;
}
.sst-karte h3 { font-size: 1.24rem; margin: 0; }
.sst-karte p { margin: 10px 0 0; color: var(--c-ink-muted); font-size: .97rem; }

/* ---------- Das Haus ---------- */
.sst-haus { display: grid; gap: 36px; align-items: center; max-width: 1180px; margin-inline: auto; }
.sst-haus__bild { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); }
.sst-haus__bild img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.sst-haus p { color: var(--c-ink-muted); margin: 18px 0 0; }
.sst-haus__sig { margin-top: 26px; font-family: var(--wp--preset--font-family--display); font-size: 1.16rem; color: var(--c-brand); }

/* Zwei Spalten ab 880px statt der im Entwurf genannten 660px — dieses Theme
   kennt nur die Breakpoints 520/880/1000, siehe globale Vorgabe. */
@media (min-width: 880px) { .sst-karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .sst-karten { grid-template-columns: repeat(3, 1fr); }
  .sst-haus { grid-template-columns: .96fr 1.04fr; gap: 60px; }
}

/* ---------- Galerie ---------- */
/* Das Raster steckt seit dem 12.08.2026 in einem .sst-section
   (patterns/galerie.php) und bekommt den Seitenabstand von dort — wie jeder
   andere Block der Seite. Vorher stand es als einziges Element ausserhalb,
   und die Kacheln klebten unter 1180px an beiden Fensterkanten: gemessen
   linke Kante 0px bei 360, 390, 768 UND 1000px, waehrend jede andere Sektion
   bei 22px begann. Ab 1280px fiel es nicht auf, weil dort die max-width den
   Abstand ohnehin erzeugt.

   Der Messlauf hat es nicht gefunden, weil seine Kantenpruefung nur Eyebrow,
   H1, H2 und Intro INNERHALB von .sst-section ansieht — die Galerie hatte
   weder das eine noch das andere. Eine Pruefung, die kein Element trifft,
   meldet keinen Fehler, sie schweigt. Seit dem Wrapper greift sie hier.

   Kein margin-top mehr: Der senkrechte Abstand kommt jetzt aus
   padding-block der Sektion, sonst stuenden beide uebereinander. */
.sst-galerie {
  display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr);
  max-width: 1180px; margin-inline: auto;
}
.sst-galerie figure { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }
.sst-galerie img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* Beschnitt von links statt aus der Mitte. Nur fuer Motive, bei denen die
   Bildmitte das Falsche zeigt: Beim Schild-Foto blieb mittig ein Streifen
   „bad" stehen, waehrend die Unterschrift sagte, hier sei ein Zimmer
   gekennzeichnet - eine Unterschrift, die etwas behauptet, das im Bild nicht
   mehr zu sehen ist. Von links bleibt das Schild vollstaendig. */
.sst-galerie .sst-bild--fokus-links img { object-position: left center; }

/* ---------- Gut zu wissen ---------- */
/* Beide Karten teilen sich JEDE Größenangabe. Sobald eine der beiden kleiner
   oder blasser wird, ist die rechte wieder Kleingedrucktes — Spec 3.3. */
.sst-wissen { display: grid; gap: 22px; max-width: 1180px; margin-inline: auto; }
.sst-wissenbox {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r); padding: 28px 26px 30px; box-shadow: var(--sh);
}
.sst-wissenbox h3 { font-size: 1.24rem; margin: 0; display: flex; align-items: center; gap: 11px; }
.sst-wissenbox ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 13px; }
.sst-wissenbox li { display: flex; gap: 12px; align-items: flex-start; font-size: .99rem; color: var(--c-ink-muted); }
.sst-wissenbox li .sst-icon { flex: none; margin-top: 4px; }
.sst-wissenbox--ja .sst-icon { color: var(--c-yes); }
.sst-wissenbox--nein .sst-icon { color: var(--c-notice); }

.sst-infobox {
  display: flex; gap: 13px; margin: 24px auto 0; max-width: 1180px;
  padding: 20px 22px; background: #fff;
  border: 1px solid var(--c-line); border-left: 4px solid var(--c-brand);
  border-radius: var(--r); font-size: .97rem; color: var(--c-ink-muted);
}
.sst-infobox .sst-icon { flex: none; margin-top: 3px; color: var(--c-brand); }
.sst-offen {
  display: inline-block; background: var(--c-brand-tint); color: var(--c-brand-deep);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 5px; vertical-align: middle;
}

/* Zwei bzw. vier Spalten ab 880px statt der im Brief genannten 820px — dieses
   Theme kennt nur die Breakpoints 520/880/1000, siehe globale Vorgabe. */
@media (min-width: 880px) {
  .sst-galerie { grid-template-columns: repeat(4, 1fr); }
  .sst-wissen { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   Lage, FAQ, Schluss-CTA, Header-Navigation (Task 8)
   ========================================================= */

/* ---------- Header: Wortmarke und Navigation ---------- */
/* font-family/letter-spacing bleiben erhalten: sie greifen weiterhin, falls
   das Logobild einmal nicht laedt und der Browser den Alt-Text an dessen
   Stelle setzt (Aufgabe 5). */
.sst-logo { font-family: var(--wp--preset--font-family--display); font-weight: 600; letter-spacing: -.02em; }
/* Das Kundenlogo (Aufgabe 5) ist kein schmaler Zeilen-Schriftzug, sondern ein
   quadratisches Wappen: Bogen mit Stadion/Haus/Elbphilharmonie oben, darunter
   der Schriftzug "HOTEL STADION STADT" und drei Sterne. Die urspruenglich
   vorgesehenen 44px Bildhoehe stammen aus einer Vorlage fuer eine breite
   Wortmarke und passen hier nicht: Der Schriftzug macht nur rund 7% der
   Bildhoehe aus, bei 44px waere er unter 4px hoch und damit unlesbar. 64px
   sind ein Kompromiss — die Kopfzeile (min-height 72px) waechst dadurch nur
   moderat, das Wappen bleibt als Form erkennbar. Der Feinschliff-Schriftzug
   im Bild selbst bleibt bei jeder vertretbaren Kopfzeilenhoehe zu klein zum
   Lesen; den zugaenglichen Namen liefert weiterhin ausschliesslich der
   Alt-Text (siehe patterns/header.php), nicht der Bildinhalt. */
.sst-logo img { display: block; height: 64px; width: auto; }
/* Auf Mobil würde eine dritte Zeile aus Links den knappen Platz neben Telefon
   und CTA sprengen — dort übernimmt ohnehin die Sticky-Leiste die Aktionen. */
.sst-header__nav { display: none; align-items: center; margin: 0; gap: 22px; }
/* min-height:44px + inline-flex/align-items:center statt Padding: die Zeile
   bleibt optisch ein schmaler Textlink, das Klickziel wird trotzdem
   44 x 44px hoch (Touchziel-Vorgabe) — die Navigation ist ab 880px auch auf
   Touch-Tablets sichtbar. */
.sst-header__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-ink-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
}
.sst-header__nav a:hover, .sst-header__nav a:focus-visible { color: var(--c-brand); }
/* ---------- Burger-Menue (nur unter 880px) ----------
   Vorher war die Navigation auf dem Handy schlicht ausgeblendet: Zimmer,
   Lage, Self-Check-in, Geschaeftsreisen, FAQ und Kontakt waren dort nur
   durch Scrollen erreichbar. Der Ausloeser ist ein <summary>, das Panel
   klappt im Fluss auf und schiebt den Seiteninhalt nach unten — bewusst
   kein Overlay: Ein Overlay braucht Fokusfalle, Scrollsperre und einen
   Schliessen-Knopf, also genau das JavaScript, das dieses Theme meidet. */
/* Geschlossen sitzt der Ausloeser in derselben Zeile wie Logo und Telefon —
   sonst waere die Kopfzeile auf dem Handy dauerhaft 68px hoeher, nur um einen
   Knopf zu tragen (gemessen 165px statt 97px). Erst beim Aufklappen nimmt der
   Block die volle Breite und schiebt das Panel unter die Zeile. */
/* Unter 880px stehen vier Bloecke in der Kopfzeile: Logo, Telefon, CTA und
   der Menue-Ausloeser. Mit dem space-between des Blocks landete die Gruppe
   aus Telefon und CTA genau in der Mitte, mit einer Luecke davor und einer
   dahinter — der Buchen-Knopf schwebte fuer sich allein. Ein auto-Rand am
   Logo schluckt den freien Platz stattdessen komplett: Logo links, alles
   andere rechts zusammen. Ab 880px zurueckgenommen, dort traegt die Zeile
   die Navigation in der Mitte, und das ist so gewollt.

   flex-grow statt margin-right:auto: Der auto-Rand wurde von der eigenen
   Flex-Regel des Gutenberg-Gruppenblocks ueberschrieben, die freie Flaeche
   verteilte sich weiter gleichmaessig auf zwei Luecken (gemessen 181px vor
   und hinter der Aktionsgruppe). Ein wachsendes Logo-Element hat damit
   keinen Konflikt. */
.sst-header__name { flex-grow: 1; }
.sst-burger { order: 3; }
.sst-burger[open] { width: 100%; }
.sst-burger summary {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: .92rem; color: var(--c-ink-muted);
}
.sst-burger summary::-webkit-details-marker { display: none; }
/* Drei Striche aus einem Element: der mittlere ist der Rahmen selbst,
   die zwei aeusseren kommen aus ::before und ::after. */
.sst-burger__strich,
.sst-burger__strich::before,
.sst-burger__strich::after {
  display: block; width: 20px; height: 2px;
  background: var(--c-ink); border-radius: 2px;
}
.sst-burger__strich { position: relative; }
.sst-burger__strich::before,
.sst-burger__strich::after { content: ""; position: absolute; left: 0; }
.sst-burger__strich::before { top: -6px; }
.sst-burger__strich::after  { top: 6px; }
.sst-burger[open] summary { color: var(--c-brand); }
.sst-burger[open] .sst-burger__strich { background: transparent; }
.sst-burger[open] .sst-burger__strich::before { top: 0; transform: rotate(45deg); }
.sst-burger[open] .sst-burger__strich::after  { top: 0; transform: rotate(-45deg); }
/* Aufgeklappt untereinander, jede Zeile mit 44px Tippflaeche. */
.sst-burger[open] .sst-header__nav {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0; padding-block: 6px 10px; border-top: 1px solid var(--c-line);
  margin-top: 8px;
}

@media (min-width: 880px) {
  .sst-header__name { flex-grow: 0; }
  .sst-header__nav { display: flex; }
  /* Ab hier traegt die Kopfzeile die Links wieder als Reihe: Ausloeser weg,
     und die [open]-Regeln duerfen nicht nachwirken, falls jemand das Menue
     schmal geoeffnet und dann das Fenster aufgezogen hat. */
  /* [open] MUSS hier mitgenannt werden. Das <details> bleibt ab 880px
     geoeffnet — das Skript klappt es nur unter 880px zu, und offen muss es
     sein, weil ein geschlossenes <details> seine Links gar nicht rendert.
     Ohne diese Ueberschreibung gewinnt `.sst-burger[open] { width: 100% }`
     aus der Grundregel und zwingt die Navigation in eine eigene Zeile:
     gemessen 243px Kopfhoehe statt 97px. */
  .sst-burger,
  .sst-burger[open] { width: auto; order: 0; }
  .sst-burger summary { display: none; }
  .sst-burger[open] .sst-header__nav {
    flex-direction: row; align-items: center; gap: 22px;
    padding-block: 0; border-top: 0; margin-top: 0;
  }
}

/* ---------- Lage ---------- */
.sst-lage { display: grid; gap: 34px; max-width: 1180px; margin-inline: auto; }
.sst-entfernungen { list-style: none; margin: 0; padding: 0; }
.sst-entfernung { display: flex; align-items: center; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--c-line); }
.sst-entfernung:first-child { border-top: 1px solid var(--c-line); }
.sst-entfernung__ic {
  width: 42px; height: 42px; border-radius: var(--r-pill);
  background: var(--c-brand-tint); color: var(--c-brand);
  display: grid; place-items: center; flex: none;
}
.sst-entfernung__text b { display: block; font-size: 1rem; font-weight: 600; }
.sst-entfernung__text small { display: block; color: var(--c-ink-faint); font-size: .86rem; }
.sst-entfernung__wert {
  margin-left: auto; white-space: nowrap;
  font-family: var(--wp--preset--font-family--display); font-weight: 600;
  font-size: 1.24rem; color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}
.sst-mapkarte { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); }
.sst-mapkarte__feld {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background:
    repeating-linear-gradient(0deg, #F1E7DA 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, #F1E7DA 0 1px, transparent 1px 36px),
    #FBF6EF;
}
.sst-mapkarte__pin { background: var(--c-brand); color: #fff; border-radius: var(--r-pill); padding: 10px 18px; font-weight: 600; font-size: .9rem; }
/* Kein automatisch ladendes iframe: erst nach Klick baut sst-map-laden
   (stadion.js) die echte Einbettung ein. Das Feld ist ein zentriertes Grid,
   deshalb bekommt das iframe die Maße ausdrücklich — sonst schrumpfte es
   beim Einsetzen auf seine Standardgröße von 300 × 150 px. */
.sst-mapkarte__feld iframe { display: block; width: 100%; height: 100%; border: 0; }
.sst-mapkarte__consent {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 28px; text-align: center;
}
.sst-mapkarte__consent p { margin: 0; max-width: 30ch; color: var(--c-ink-muted); font-size: .85rem; }
.sst-mapkarte__consent .sst-btn { width: auto; padding-inline: 22px; min-height: 44px; }
.sst-mapkarte__body { padding: 22px 24px 24px; }
.sst-mapkarte__body b { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.16rem; font-weight: 600; }
.sst-mapkarte__body p { margin: 6px 0 18px; color: var(--c-ink-muted); font-size: .95rem; }
.sst-btn--linie { background: transparent; border-color: var(--c-line-stark); color: var(--c-ink); width: 100%; }
.sst-btn--linie:hover { border-color: var(--c-brand); color: var(--c-brand); }

/* ---------- FAQ ---------- */
/* 820px Lesemass, linksbuendig auf DERSELBEN Kante wie jede andere Sektion.
   Die Liste ist schmaler als der 1180er-Block der uebrigen Sektionen, soll
   aber weder zentriert danebenstehen (dann saesse sie bei x=310) noch am
   Gutter kleben (x=22). margin-left holt genau den Versatz nach, den ein
   1180er-Block an dieser Stelle haette - dieselbe Rechnung, die
   margin-inline:auto dort macht, nur einseitig.

   Unterhalb von rund 1224px wird der Term negativ; max() setzt ihn dann auf
   0, und dort liegen ohnehin alle Bloecke am Gutter. */
.sst-faq { max-width: 1180px; margin-inline: auto; }
.sst-faq__eintrag { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); margin-bottom: 13px; overflow: hidden; box-shadow: var(--sh); }
.sst-faq__eintrag summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 20px 54px 20px 24px;
  font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.16rem;
}
.sst-faq__eintrag summary::-webkit-details-marker { display: none; }
.sst-faq__eintrag summary::after {
  content: ""; position: absolute; right: 24px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2px solid var(--c-brand); border-bottom: 2px solid var(--c-brand);
  transform: rotate(45deg); transition: transform .18s;
}
.sst-faq__eintrag[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
/* Die Aufklapper laufen ueber die volle Sektionsbreite wie jede andere
   Sektion - die ANTWORT darin behaelt trotzdem eine Deckelung. Ohne sie liefe
   der Fliesstext bei 1180px auf rund 140 Zeichen je Zeile.

   74ch WAREN ZU WENIG, gemessen am 11.08.2026: Der Absatz war damit 794px
   breit in einer 1180px-Karte. Die FRAGE laeuft ueber die volle Karte, die
   ANTWORT hoerte bei zwei Dritteln auf - der Kunde las das nicht als Lesemass,
   sondern als abgeschnittenen Text ("die Texte sind nur bis zur Haelfte da").
   Ein Lesemass, das wie ein Fehler aussieht, hat sein Ziel verfehlt.

   92ch ergeben rund 988px Kastenbreite und damit eine Textspalte von 940px in
   der 1180px-Karte. Das liegt ueber den klassischen 45-75 Zeichen, laesst aber
   sichtbar Rand stehen, statt bis an die Kartenkante zu laufen. Achtung: ch
   deckelt hier den RAHMENKASTEN (box-sizing: border-box), die Textspalte ist
   um die 48px Innenabstand schmaler. */
.sst-faq__eintrag p { margin: 0; padding: 0 24px 22px; max-width: 92ch; color: var(--c-ink-muted); }

/* ---------- Schluss-CTA ---------- */
.sst-abschluss { position: relative; background: var(--c-night); color: #FFF8F2; text-align: center; overflow: hidden; }
.sst-abschluss__bg { position: absolute; inset: 0; }
.sst-abschluss__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.sst-abschluss__inner { position: relative; padding: 66px var(--gutter); max-width: 720px; margin-inline: auto; }
.sst-abschluss h2 { color: #FFF8F2; }
.sst-abschluss p { color: #D6C2BA; margin: 18px auto 0; max-width: 52ch; }
.sst-abschluss__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
/* Terracotta auf Nacht erreicht als FLAECHE nur 2,9:1 — knapp unter den 3:1,
   die WCAG 1.4.11 fuer die Grenze eines Bedienelements verlangt. Der Button
   bekommt deshalb im Schluss-CTA eine helle Kante; die Markenfarbe bleibt
   unangetastet, sie ist auf allen hellen Flaechen der Seite in Ordnung. */
.sst-abschluss .sst-btn--cta { border-color: rgba(255,255,255,.55); }
.sst-btn--geist { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #fff; }
.sst-btn--geist:hover { background: rgba(255,255,255,.22); }

/* 1000px statt der im Brief genannten 960px — dieses Theme kennt nur die
   Breakpoints 520/880/1000, siehe globale Vorgabe. */
@media (min-width: 1000px) {
  .sst-lage { grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
  .sst-btn--linie { width: auto; }
}
@media (min-width: 880px) { .sst-abschluss__inner { padding-block: 96px; } }

/* ---------- Comp A: Display-Schrift über die Überschriften hinaus ----------
   .sst-hinweis__label, .sst-haus__sig, .sst-logo, .sst-entfernung__wert,
   .sst-mapkarte__body b und .sst-faq__eintrag summary tragen die Serife
   bewusst — übernommen aus der Kundenüberarbeitung (assets/comp-a.css),
   damit die Marke nicht nur in den Überschriften vorkommt. Die Zuweisung
   steht direkt an jeder Definitionsstelle oben, nicht hier gesammelt —
   ein zweiter, nachgestellter Block hätte still über die erste
   Deklaration gewonnen und wäre bei jeder Änderung eine stille
   Wartungsfalle gewesen. */
.sst-haus__sig { font-style: italic; }

/* ---------- Zeit-Pillen (Self-Check-in) ----------
   In der Kundenueberarbeitung standen diese Werte als Inline-Styles im
   Markup. Inline-Styles ueberleben keinen Wechsel der Farbpalette und sind
   im Block-Editor nicht auffindbar - deshalb hier als Klasse. */
/* flex-start statt center: Die Pillen stehen im Sektionskopf und folgen
   dessen linker Kante, seit dieser nicht mehr zentriert ist. */
.sst-zeitpillen { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; margin-top: 18px; }
.sst-zeitpille {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: .9rem;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--c-sand); color: var(--c-ink);
}
.sst-zeitpille--an { background: var(--c-brand-tint); color: var(--c-brand-deep); }