/* Kleine Korrekturen am gelieferten Entwurf — jede mit Grund, jede gehört später in die Quelle.

   1) Bewertungsseite: Der Kopfabschnitt endet ohne Innenabstand (wrap sec-t), die Kennzahlen
      beginnen mit einer 2px-Linie (.kpi border-top). Beides zusammen setzte die Linie ohne
      Abstand unter die Zeile „5,0 aus 81 Bewertungen bei Google" — gemessen 0 px. Nur dort
      korrigiert, wo der Abschnitt davor unten keinen Abstand hat; auf den Stadtteilseiten
      steht die Linie bereits richtig. */
section.sec-t:not(.sec-b) + section .kpi{margin-top:var(--s6)}

/* Weitere Stadtteile (werkzeug/fahrzeiten.mjs). In der Tabelle darüber stehen nur Orte
   mit eigener Seite — jede Zeile führt dort zu einem Ziel. Die übrigen stehen hier:
   Name und Fahrzeit, zwei bis drei Spuren, jeder mit eigener Sprungmarke. */
.stadtteile{margin-top:var(--s9)}
.stadtteile__liste{list-style:none;margin:var(--s6) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));column-gap:var(--s7);
  border-top:2px solid var(--ink)}
.stadtteile__liste li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  min-height:46px;padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:15.5px}
.stadtteile__liste li:target{background:var(--surface);
  box-shadow:-10px 0 0 var(--surface),10px 0 0 var(--surface)}
.stadtteile__liste .mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

/* Schloss-Sequenz nur dort, wo Bühne und Marken nebeneinander stehen: .cyl__grid wird
   erst ab 900 px zweispurig (components.css). Darunter stünde der Zylinder über den
   fünf Texten und nähme das halbe Telefon ein — dort bleibt nur die Beschreibung.
   zusatz/schloss.js läuft unter dieser Breite ebenfalls nicht an, lädt also keine Bilder. */
@media (max-width:899.98px){
  .cyl__stage{display:none}
}

/* ═══ C2 Stufe 2 — Barrierefreiheit ═══════════════════════════════════════
   2.1 Kleinschrift: --ink-3 drei Prozent dunkler. Gleicher Farbton, gleiche
       Sättigung. Der Token steht an 29 Stellen, alle auf hellem Grund geprüft. */
:root{--ink-3:#746C5D}

/* 2.2 Text auf Orange wird dunkel statt weiß. Kein Farbwert der Flächen ändert
   sich — nur die Beschriftung. Betrifft genau die drei gelieferten Regeln. */
/* In dunklen Abschnitten setzt base.css `.on-deep a{color:var(--on-deep)}` — das schlägt
   eine reine Klassenregel. Deshalb hier mit gleicher Spezifität und später in der Kaskade. */
a.btn-call,.on-deep a.btn-call,.hero a.btn-call,.strip a.btn-call,.btn-call{color:var(--ink)}
a.callbar__call,.callbar__call{color:var(--ink)}
.badge{color:var(--ink)}
.btn-call svg,.callbar__call svg{color:var(--ink)}

/* B6 Die Gliederung wird beim Bau begradigt (werkzeug/korrekturen.mjs). data-h
   merkt die ursprüngliche Ebene, hier kommen deren Maße zurück — das Aussehen
   bleibt dadurch unverändert. */
[data-h="4"]{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.35}
[data-h="3"]{font-size:clamp(1.5rem,2.7vw,2.2rem);font-weight:600;letter-spacing:-.02em}
.ft h3[data-h="4"]{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--on-deep)}
.rows h3[data-h="4"]{font-weight:600}
.steps__item h3[data-h="4"]{color:var(--on-deep)}
.mc h3[data-h="4"],.lrow h2[data-h="3"],.phbox h3[data-h="4"]{color:var(--on-deep)}
.doors .mc h3[data-h="4"]{position:relative;padding-bottom:9px}
.doors .mc h3[data-h="4"]::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.doors .mc:hover h3[data-h="4"]::after,.doors .mc:focus-visible h3[data-h="4"]::after{transform:scaleX(1)}
.erkl h2[data-h="3"]{margin-bottom:var(--s4)}
.cyl__marks h3[data-h="4"]{margin-bottom:var(--s2)}
.readrow h3[data-h="4"]{font-size:clamp(1.0625rem,1.8vw,1.4rem);font-weight:600}

/* B7 Ortstabelle bei 320 px: feste Spaltenbreiten, der Ortsname darf umbrechen.
   Kein waagerechtes Scrollen, kein Wechsel des Layouts. */
.tbl{table-layout:fixed}
.tbl td:first-child,.tbl th:first-child{white-space:normal;overflow-wrap:anywhere}
@media (max-width:520px){
  .tbl th:nth-child(3),.tbl td:nth-child(3){display:none}
}

/* B4 Die Karte ist eine Abbildung mit Beschriftung. */
.map__fig{margin:0}
.map__fig__bu{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-deep-2);margin-top:var(--s4)}

/* 2.2b Orange als SCHRIFTfarbe auf hellem Grund — der umgekehrte Fall zu 2.2.
   Betroffen ist die Legende der Erklärgrafik und der Formularfehler: #C96D18 trägt
   dort nur 3,30:1. C2 schlägt #AF5F15 vor, gerechnet gegen Weiß; unsere Gründe sind
   cremefarben, dort sind es nur 4,20:1 (--surface) bzw. 4,09:1. Gemessen erfüllt erst
   #9F5511 die Schwelle: 4,96:1 auf --surface, 4,83:1 auf dem Seitengrund.
   Die Flächenfarbe --orange bleibt unberührt, nur diese Schrift wird dunkler. */
.zg__leg li.is-o .mono,.zg__leg li.is-o b{color:#9F5511}
.field__err{color:#9F5511}

/* Kleinschrift auf --sunk-Flächen (aktive Schloss-Marke, aktiver Menüeintrag,
   Rechtsformular, aktiver Filter): --ink-3 trägt dort nur 3,94:1. #6D6350 läge rechnerisch bei 4,50:1, axe misst
   dort aber 4,49 — deshalb eine Stufe dunkler: #6A614D mit 4,66:1.
   Gezielt statt global — --sunk ist nirgends Abschnittsgrund, eine Abdunklung des
   Tokens würde 29 Stellen ohne Not verändern. */
.js-cyl .cyl__marks > *.is-now .mono,.js-cyl .cyl__marks > *.is-now .seclab,
.js-cyl .cyl__marks > *.is-now span,
.legal__form .mono,.legal__form .seclab,.legal__form .field__hint,
.hd__fach__pnl a[aria-current="page"],.fltr button[aria-pressed="true"],
.quote figcaption span,
/* Eine Fläche trägt --sunk als Inline-Angabe und hat keine Klasse: der Kasten
   „Pflichtangabe nach § 5b Abs. 3 UWG" auf /de/bewertungen/. Der Selektor hängt
   deshalb am Stil, nicht an einer Klasse — und deckt künftige Kästen gleich mit. */
[style*="var(--sunk)"] .seclab,[style*="var(--sunk)"] .mono{color:#6A614D}

/* .geo__foot gehört in den dunklen Kartenabschnitt. Auf /de/bewertungen/ steht es in
   einem hellen Abschnitt und erbt dort die Schrift für dunklen Grund: 1,79:1.
   axe meldet die Stelle nicht — der Hintergrund ist ihm dort nicht bestimmbar. */
section:not(.geo) .geo__foot p{color:var(--ink-2)}

/* Das englische Leistungsfeld ist rechtsbündig (--rg), hat aber neun Leistungen plus
   „All nine services" — also eine ungerade Zahl. Ohne diese Regel spannt der letzte
   Verweis über beide Spalten und unten rechts bleibt ein leeres Feld stehen. So fällt
   er in dieses Feld, genau wie im deutschen Leistungsmenü. */
.hd__fach__pnl--zellen .fach__all{grid-column:auto}

/* Schloss-Sequenz aus dem neuen Video: Rahmen im Querformat (1132 × 594). Die Bühne wird
   breiter als die Textspalte und steht beim Scrollen mittig im Fenster; unter 900 px bleibt
   sie wie bisher ausgeblendet (oben). */
.cyl .cyl__film{max-width:none;aspect-ratio:1132 / 594}
@media (min-width:900px){
  .cyl .cyl__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .cyl .cyl__stage{top:max(calc(var(--hd-h) + 28px), calc(50vh - 190px))}
}

/* Fuß, letzte Zeile: „Gebaut und betrieben von Arcturis, Dresden." in der Farbe der Copyright-Zeile,
   ohne Hervorhebung. Nicht --ink-3: auf --deep ergäbe das 3,61 : 1, unter den 4,5 : 1 für diese
   Schriftgröße. Dünn unterstrichen, weil ein Verweis im Satz nicht allein über die Farbe
   erkennbar sein darf (WCAG 1.4.1). */
.ft__rechte a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

/* Kopf: keine Überblendung, bis ui.js den Anfangszustand gesetzt hat (zusatz/kopf-bereit.js).
   Sonst blendet ein bereits gescrollt geladener Kopf 0,45 s lang von durchsichtig auf deckend. */
html:not(.kopf-bereit) .hd{transition:none}

/* Kontaktformular: Fangfeld für Programme (unsichtbar, nicht per Tab erreichbar) und die Statuszeile
   nach dem Absenden. Fehlerfarbe wie .field__err. */
.field--falle{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form__status{font-weight:600;padding:var(--s4) var(--s5);border-left:3px solid var(--line);background:var(--surface)}
.form__status.is-gut{border-left-color:var(--ink)}
.form__status.is-fehler{border-left-color:var(--orange-dark);color:var(--orange-dark)}
/* Die Statuszeile bleibt als Live-Region immer im Baum, sonst lesen Vorleseprogramme die erste Meldung
   nicht vor. Leer steht sie außerhalb des Grids (absolut, ohne Inhalt): keine Zeile, kein Abstand. */
.form__status:empty{position:absolute;padding:0;border:0;background:none}