/* ──────────────────────────────────────────────────────────────
   TransitDiagrams – Selbstauftritt
   Aufbau: 1 Tokens · 2 Basis · 3 Kopfzeile · 4 Hero/Karte · 5 Route
           6 Abschnitte · 7 Fußzeile · 8 Impressum · 9 Bewegung
           10 Einstellungsdialog · 11 Barrierefreiheit (Größe, Kontrast, Schrift …)
   ────────────────────────────────────────────────────────────── */

/* 1 ── Tokens ─────────────────────────────────────────────────── */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Die Seite bringt Hell und Dunkel selbst mit. Browser mit eigenem Dunkelmodus (z. B. Samsung Internet)
     lassen sie damit in Ruhe, sofern sie diese Angabe beachten */
  color-scheme: light dark;
  --font: "Atkinson Hyperlegible Next", Verdana, ui-sans-serif, system-ui, sans-serif;

  /* Papier und Tinte */
  --paper:   #f2f4f8;
  --surface: #ffffff;
  --ink:     #0f1422;
  --muted:   #566074;
  --hair:    rgba(15, 20, 34, 0.16);
  --rail:    rgba(15, 20, 34, 0.14);
  --dots:    rgba(15, 20, 34, 0.08);
  --board-bg: var(--surface);
  --board-fg: var(--ink);
  --focus:   #1e63d6;

  /* Linienfarben (bunt) + passende Schriftfarbe darauf */
  --c1: #d92d27;  --on1: #ffffff;   /* rot     */
  --c2: #f08a00;  --on2: #0f1422;   /* orange  */
  --c3: #f6c800;  --on3: #0f1422;   /* gelb    */
  --c4: #12803f;  --on4: #ffffff;   /* grün    */
  --c5: #1e63d6;  --on5: #ffffff;   /* blau    */
  --c6: #7339b0;  --on6: #ffffff;   /* violett */
  --c7: #d12f79;  --on7: #ffffff;   /* pink    */

  --gutter: clamp(16px, 4vw, 32px);
  --title-fs: min(clamp(2rem, 3.6vw, 3rem), 13vw);
  --rail-w: clamp(60px, 7vw, 88px);   /* Abstand der Texte zur Linie: Platz für Fahrgäste am Bahnsteig */
  --rail-t: 6px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --paper:   #0d1220;
  --surface: #151c2f;
  --ink:     #eef1f8;
  --muted:   #9aa4ba;
  --hair:    rgba(238, 241, 248, 0.18);
  --rail:    rgba(238, 241, 248, 0.16);
  --dots:    rgba(238, 241, 248, 0.07);
  --focus:   #6aa5ff;
  --c6: #9457d6;   /* heller als im Hellmodus: genug Abstand zum dunklen Grund */
}

/* Rot · Grau · Schwarz: Rot, Tintenschwarz und vier Grautöne.
   Die Linien am selben Kreuzungspunkt unterscheiden sich deutlich in der Helligkeit. */
[data-palette="mono"] {
  --c1: #d92d27;  --on1: #ffffff;       /* rot            */
  --c2: #5b6479;  --on2: #ffffff;       /* dunkelgrau     */
  --c3: #a2aabb;  --on3: #0f1422;       /* hellgrau       */
  --c4: #7f889c;  --on4: #0f1422;       /* mittelgrau     */
  --c5: var(--ink);  --on5: var(--paper); /* schwarz      */
  --c6: #333a4d;  --on6: #ffffff;       /* fast schwarz   */
  --c7: #b3261e;  --on7: #ffffff;       /* dunkelrot      */
  --focus: #d92d27;
}
[data-palette="mono"][data-theme="dark"] {
  --c2: #b2b9c9;  --on2: #0f1422;
  --c3: #5f687d;  --on3: #ffffff;
  --c4: #8890a5;  --on4: #0f1422;
  --c6: #d3d8e3;  --on6: #0f1422;
  --c7: #ee5b54;  --on7: #0f1422;
  --focus: #ff6b64;
}

/* 2 ── Basis ──────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(circle, var(--dots) 1.2px, transparent 1.4px);
  background-size: 40px 40px;
  background-position: 20px 20px;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
  -webkit-font-smoothing: antialiased;
  hyphens: manual;             /* normalerweise keine Silbentrennung … */
  overflow-wrap: break-word;   /* … und als letzte Notbremse (Adressen, Kunstwörter) ein harter Umbruch */
}

/* Silbentrennung nur dort, wo die Spalte wirklich eng wird: sehr kleine Fenster, große Schrift,
   weiter Textabstand. Der Browser trennt dann nach den Regeln der Seitensprache (lang) an Silben,
   mit Trennstrich, und nur Wörter ab 7 Buchstaben; Titel, Namen und Bedienelemente bleiben ungetrennt. */
@media (max-width: 420px) { body { hyphens: auto; hyphenate-limit-chars: 7 3 3; } }
html:is([data-size="125"], [data-size="150"], [data-size="200"], [data-spacing="wide"]) body {
  hyphens: auto; hyphenate-limit-chars: 7 3 3;
}
:is(.hero-title, .stop-title, .brand, .nav, .tool, .badge, .pill, .chan-name, .chan-handle, .board-source, [data-mail-text], .legal h1) { hyphens: manual; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
/* Ziel des „Zum Inhalt springen“-Links: bekommt den Fokus, braucht aber keinen Rahmen */
main:focus { outline: none; }

.wrap { width: min(100% - 2 * var(--gutter), 1180px); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--gutter); top: 12px; z-index: 100; transform: translateY(-300%);
  padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: none; }

/* Wer nicht Deutsch liest, sieht den deutschen Ausgangstext nicht aufblitzen:
   i18n.js blendet die Seite ein, sobald übersetzt ist (Notausgang nach 2 s) */
html[data-lang-pending] body { visibility: hidden; animation: td-reveal 0s 2s forwards; }
@keyframes td-reveal { to { visibility: visible; } }

/* Linien-Signet: wie die Liniennummer auf dem Netzplan */
.pill {
  display: inline-grid; place-items: center; flex: none;
  min-width: 2.75em; min-height: 1.9em; padding-inline: 0.65em;
  border-radius: 0.56em; background: var(--c, var(--c1)); color: var(--on, var(--on1));
  font-weight: 700; font-size: 1rem; line-height: 1;
}
.pill--lg { min-width: 2.8em; min-height: 1.85em; border-radius: 0.55em; font-size: 1.35rem; }

/* Liniensignet der Leistungen: dieselben Proportionen wie auf dem Netzplan
   (38 : 28, Ecken 9 von 28), doppelt so groß; der Buchstabe füllt die Form. */
.badge {
  display: inline-grid; place-items: center; flex: none; align-self: start;
  width: 4.75rem; height: 3.5rem; border-radius: 1.125rem;
  background: var(--c, var(--c1)); color: var(--on, var(--on1));
  font-weight: 700; font-size: 2.4rem; line-height: 1; letter-spacing: 0;
}

/* Schaltflächen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; max-width: 100%; padding: 10px 28px; border-radius: 999px; text-align: center;
  font-weight: 600; font-size: 1.05rem; line-height: 1.25; text-decoration: none;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn > span { min-width: 0; }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--ghost { box-shadow: inset 0 0 0 2px var(--ink); }
.btn--sm { min-height: 44px; padding: 8px 22px; font-size: 1rem; }
.btn:hover { transform: translateY(-2px); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* 3 ── Kopfzeile ──────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.bar { display: flex; align-items: center; gap: 24px; min-height: 72px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: 1.2rem; letter-spacing: 0; }
.logo { width: 46px; height: 46px; }
.logo--on-dark { display: none; }
[data-theme="dark"] .logo--on-light { display: none; }
[data-theme="dark"] .logo--on-dark { display: block; }

.nav { display: flex; gap: 6px; margin-left: auto; }
.nav a {
  padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 1rem;
  transition: background-color 0.2s var(--ease);
}
.nav a:hover { background: var(--hair); }
.nav a[aria-current="true"] { background: var(--ink); color: var(--paper); }

.tools { display: flex; gap: 6px; }
.tool {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 10px;
  border-radius: 999px; font-weight: 600; font-size: 0.95rem;
  box-shadow: inset 0 0 0 1.5px var(--hair);
  transition: background-color 0.2s var(--ease);
}
.tool:hover { background: var(--hair); }
.tool svg { width: 22px; height: 22px; }
.tool--menu { display: none; }
@media (max-width: 560px) {
  .tool[data-action="palette"], .tool[data-action="theme"] { display: none; }
}

.icon-sun { display: none; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

@media (max-width: 880px) {
  .bar { gap: 12px; }
  .tool--menu { display: grid; }
  .tools { margin-left: auto; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 2px; margin: 0; padding: 12px var(--gutter) 20px;
    background: var(--paper); border-bottom: 1px solid var(--hair);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 16px; font-size: 1.15rem; }
  .brand span { display: none; }
}

/* 4 ── Hero und Karte ─────────────────────────────────────────── */

.hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center; gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(32px, 6vw, 88px) clamp(40px, 6vw, 80px);
}

.hero-copy { container-type: inline-size; }
.hero-title {
  /* Schriftgröße: höchstens so groß, dass das längste Wort samt Punkt („Minimalismus.“ = 6,64 em)
     in die Spalte passt; Maß ist die Breite der Textspalte, nicht die des Fensters */
  font-size: min(clamp(2.6rem, 4.9vw, 4.5rem), calc(100cqw / (6.9 * var(--wf, 1)))); font-weight: 600;
  line-height: 0.98; letter-spacing: 0; text-wrap: balance;
}
.hero-lead { margin-top: 28px; max-width: 30ch; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.45; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.map-wrap { position: relative; }
.map { width: 100%; height: auto; overflow: visible; }
/* Tooltipp über Station bzw. Signet (map.js, nur Maus) */
.map-tip {
  position: absolute; z-index: 5; width: max-content; max-width: min(20rem, 92%); padding: 6px 12px; border-radius: 10px;
  background: var(--ink); color: var(--paper); font-size: 0.9rem; line-height: 1.3; font-weight: 500;
  transform: translate(-50%, -100%); pointer-events: none; opacity: 0; transition: opacity 0.15s var(--ease);
}
.map-tip.is-on { opacity: 1; }

.map-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 8px; margin-top: 8px; }
.map-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 16px; border-radius: 999px; font-size: 0.95rem; color: var(--muted);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
/* Beide Knöpfe (Ansicht, Fahrzeuge) sind im Ruhezustand nur Text: Die Fläche erscheint nur kurz beim
   Darüberfahren bzw. Antippen. Welche Ansicht gerade aktiv ist, zeigt die Karte; der Knopf nennt die andere. */
.map-toggle:active { background: var(--hair); color: var(--ink); }
@media (hover: hover) { .map-toggle:hover { background: var(--hair); color: var(--ink); } }
.map-toggle svg { width: 16px; height: 16px; }
.map-toggle [data-state="paused"], .map-toggle[data-paused="true"] [data-state="running"] { display: none; }
/* Ansichtsknopf: zeigt, worauf er umschaltet (Name und Symbol der jeweils anderen Ansicht) */
.map-toggle[data-view="schematic"] :is([data-state="to-schematic"], .icon-schema),
.map-toggle[data-view="geo"] :is([data-state="to-geo"], .icon-geo) { display: none; }
.map-toggle[data-paused="true"] [data-state="paused"] { display: inline; }
.map-toggle .icon-pause { display: block; }
.map-toggle .icon-play { display: none; }
.map-toggle[data-paused="true"] .icon-pause { display: none; }
.map-toggle[data-paused="true"] .icon-play { display: block; }

/* Karten-Elemente (SVG) */
.m-casing { fill: none; stroke: var(--paper); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s var(--ease); }
.m-line   { fill: none; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.m-station circle { fill: var(--paper); stroke: var(--ink); stroke-width: 4.5; transition: fill 0.3s var(--ease), stroke 0.3s var(--ease); }
.m-station--major circle, .m-station--term circle { stroke-width: 5.5; }
.m-station--nav circle { stroke-width: 6; }
.m-nav-link { cursor: pointer; }
.m-nav-link circle { transform-box: fill-box; transform-origin: center; transition: transform 0.2s var(--ease), fill 0.2s var(--ease); }
.m-nav-link:hover circle, .m-nav-link:focus-visible circle { transform: scale(1.25); fill: var(--ink); }
/* Unterstrichen wird nur die Beschriftung, nicht der Buchstabe im Badge */
.m-nav-link:hover .m-label, .m-nav-link:focus-visible .m-label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.m-nav-link:focus-visible { outline: none; }
.m-nav-link:focus-visible circle { stroke: var(--focus); stroke-width: 9; }

.m-label {
  font-family: var(--font); fill: var(--ink); paint-order: stroke;
  stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round;
}
.m-label--nav   { font-size: 25px; font-weight: 600; letter-spacing: 0; }
.m-label--line  { font-size: 20px; font-weight: 600; letter-spacing: 0; }
.m-label--minor { font-size: 17px; font-weight: 400; fill: var(--muted); }

.m-badge rect { stroke: var(--paper); stroke-width: 4; }
.m-badge text { font-family: var(--font); font-size: 17px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }

/* Gewässer und Grün hinter den Linien (Farben folgen Farbschema und Palette) */
.m-bg { pointer-events: none; animation: td-bg-in 1.2s var(--ease) 0.5s backwards; }
@keyframes td-bg-in { from { opacity: 0; } }
.m-bg-river { fill: none; stroke: var(--hair); stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
.m-bg-lake { fill: var(--hair); fill-rule: evenodd; }   /* Inseln sind Löcher: der Untergrund scheint durch */
.m-bg-park { fill: var(--hair); }
@supports (color: color-mix(in srgb, red 10%, white)) {
  .m-bg-river { stroke: color-mix(in srgb, var(--c5) 17%, var(--paper)); }
  .m-bg-lake  { fill: color-mix(in srgb, var(--c5) 17%, var(--paper)); }
  .m-bg-park  { fill: color-mix(in srgb, var(--c4) 15%, var(--paper)); }
}
/* Beim Morphen blenden Namen und Signete aus und danach an der neuen Stelle wieder ein */
.m-label, .m-badge { transition: opacity 0.3s var(--ease); }
.map.is-morphing .m-label, .map.is-morphing .m-badge { opacity: 0; }

.m-vehicles { pointer-events: none; }
.m-vehicle rect { fill: var(--paper); stroke: var(--ink); stroke-width: 3.5; }
/* Kontur in Papierfarbe (folgt dem Farbschema): löst das Fahrzeug von der Linie, auch von der schwarzen */
.m-halo { fill: var(--paper); stroke: var(--paper); stroke-width: 11; }
.m-vehicle line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-lead { max-width: 40ch; }
  .m-label--minor, .m-label--line { display: none; }
  .m-label--nav { font-size: 34px; stroke-width: 8px; }
}

/* 5 ── Route: die Seite als Linie ─────────────────────────────── */

.route { position: relative; padding-left: var(--rail-w); }
.route::before, .route-progress {
  content: ""; position: absolute; left: calc(var(--rail-w) / 2 - var(--rail-t) / 2);
  top: 0; width: var(--rail-t); border-radius: 99px;
}
.route::before { bottom: var(--rail-bottom, 0); background: var(--rail); }
.route-progress { height: 0; background: var(--c1); }

.route-vehicle {
  position: absolute; left: calc(var(--rail-w) / 2); top: 0; z-index: 2;
  width: 20px; height: 38px; margin-left: -10px; margin-top: -19px;
  border-radius: 10px; background: var(--paper); border: 3.5px solid var(--ink);
  box-shadow: 0 0 0 3.5px var(--paper);   /* Kontur in Papierfarbe, hebt das Fahrzeug von der Schiene ab */
}
.route-vehicle::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 12px; margin: -6px 0 0 -1.5px;
  border-radius: 2px; background: var(--ink);
}

/* Fahrgäste: kleine Formen, die ein- und aussteigen (passengers.js) */
.route-pax { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pax { position: absolute; left: 0; top: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; opacity: 0; background: var(--c); will-change: transform; }
.pax--circle { border-radius: 50%; }
@media (max-width: 560px) { .pax { width: 12px; height: 12px; margin: -6px 0 0 -6px; } }
.pax--square { border-radius: 3px; }
.pax--tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pax--dia { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
html[data-motion="reduced"] .route-pax { display: none; }

.stop { position: relative; padding-block: clamp(56px, 9vw, 112px); }
.stop + .stop { border-top: 1px solid var(--hair); }

.stop-ring {
  position: absolute; z-index: 1;
  left: calc(var(--rail-w) / -2 - 19px);
  top: calc(clamp(56px, 9vw, 112px) + var(--title-fs) * 0.525 - 19px);
  width: 38px; height: 38px; border-radius: 50%;   /* größer als das Fahrzeug: der Kreis bleibt darunter sichtbar */
  background: var(--paper); border: 6px solid var(--ink);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.stop.is-passed .stop-ring { background: var(--c1); }

.stop-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); }
@media (max-width: 880px) { .stop-grid { grid-template-columns: minmax(0, 1fr); } }

.stop-title { font-size: var(--title-fs); font-weight: 600; line-height: 1.05; letter-spacing: 0; }
.stop-sub { margin-top: 14px; max-width: 28ch; color: var(--muted); }

/* 6 ── Abschnitte ─────────────────────────────────────────────── */

/* Leistungen */
.svc { list-style: none; }
.svc li { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 8px 20px; padding-block: 26px; border-top: 1px solid var(--hair); }
.svc li:first-child { border-top: 0; padding-top: 0; }
.svc li:last-child { padding-bottom: 0; }
.svc h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; }
.svc p { margin-top: 6px; max-width: 52ch; color: var(--muted); }
@media (max-width: 560px) {
  .svc li { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 8px 14px; }
  .svc .badge { width: 3.5rem; height: 2.58rem; border-radius: 0.83rem; font-size: 1.77rem; }
  html:is([data-size="125"], [data-size="150"], [data-size="200"], [data-spacing="wide"]) .svc li { grid-template-columns: minmax(0, 1fr); }
  html:is([data-size="125"], [data-size="150"], [data-size="200"], [data-spacing="wide"]) .svc h3 {
    font-size: min(1.5rem, calc((100vw - 2 * var(--gutter) - var(--rail-w)) / (7.8 * var(--wf, 1))));
  }
}
@media (max-width: 400px) {
  /* Schmale Spalte: Kennzeichen über den Text statt daneben, damit die Titel Platz haben */
  .svc li { grid-template-columns: minmax(0, 1fr); }
}

/* Über mich */
.about-lead { max-width: 30ch; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.3; font-weight: 500; letter-spacing: 0; }
.about-text { margin-top: 20px; max-width: 40ch; font-size: 1.25rem; color: var(--muted); }
.about-text + .about-text { margin-top: 14px; }
.facts { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; }
.facts dt { color: var(--muted); font-size: 0.95rem; }
.facts dd { margin-top: 2px; font-weight: 500; }

/* Kanäle */
.chan-list { list-style: none; }
.chan {
  display: grid; grid-template-columns: 3.75rem minmax(0, 1fr) auto auto; align-items: center; gap: 18px;
  padding: 18px 20px; margin-inline: -20px; border-radius: 16px; text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chan-list li + li { border-top: 1px solid var(--hair); }
.chan-name { font-size: 1.35rem; font-weight: 600; letter-spacing: 0; }
.chan-handle { color: var(--muted); font-size: 1rem; white-space: nowrap; text-align: right; }
.chan-arrow { font-size: 1.4rem; transition: transform 0.2s var(--ease); }
.chan:hover { background: var(--c); color: var(--on); }
.chan:hover .chan-handle { color: inherit; }
.chan:hover .pill { background: var(--on); color: var(--c); }
.chan:hover .chan-arrow { transform: translate(3px, -3px); }
@media (max-width: 640px) {
  .chan { grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: 14px; padding: 16px 12px; margin-inline: -12px; }
  .chan-handle { display: none; }
}
@media (max-width: 960px) { html[data-size="125"] .chan-handle { display: none; } }
html:is([data-size="150"], [data-size="200"]) .chan { grid-template-columns: 3.25rem minmax(0, 1fr) auto; }
html:is([data-size="150"], [data-size="200"]) .chan-handle { display: none; }
@media (max-width: 640px) {
  html:is([data-size="150"], [data-size="200"]) .chan { grid-template-columns: minmax(0, 1fr) auto; }
  html:is([data-size="150"], [data-size="200"]) .chan .pill { display: none; }
  html:is([data-size="150"], [data-size="200"]) .chan-name { font-size: min(1.35rem, 6.4vw); }
}

/* Wusstest du – Anzeigetafel */
.board {
  padding: clamp(24px, 4vw, 40px); border-radius: 20px;
  background: var(--board-bg); color: var(--board-fg);
  box-shadow: inset 0 0 0 1.5px var(--hair);
}
.board-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-weight: 600; }
.board-head > * { min-width: 0; max-width: 100%; }
.board-text { margin-top: 24px; max-width: 40ch; min-height: 5.2em; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; font-weight: 500; letter-spacing: 0; }
.board-source { margin-top: 16px; font-size: 0.95rem; opacity: 0.75; }
.board-source a { text-underline-offset: 3px; }
.board-next {
  margin-top: 28px; padding: 12px 24px; border-radius: 999px; font-weight: 600;
  box-shadow: inset 0 0 0 2px var(--board-fg);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.board-next:hover { background: var(--board-fg); color: var(--board-bg); }

/* Kontakt */
.contact-lead { max-width: 24ch; font-size: min(clamp(1.7rem, 3.4vw, 2.7rem), calc((100vw - 2 * var(--gutter) - var(--rail-w)) / (10.4 * var(--wf, 1)))); line-height: 1.2; font-weight: 500; letter-spacing: 0; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.contact-mail { margin-top: 18px; color: var(--muted); font-size: min(1em, calc((100vw - 2 * var(--gutter) - var(--rail-w)) / (8.6 * var(--wf, 1)))); }   /* längstes Stück ohne Umbruchstelle: „transitdiagrams“ */

/* Karten (Galerie, gebaut von gallery.js, nur wenn Bilder im Ordner „karten“ liegen) */
.gal-list { list-style: none; display: grid; gap: clamp(20px, 3vw, 32px) clamp(16px, 2.4vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.gal-item { display: block; width: 100%; text-align: left; border-radius: 18px; }
.gal-thumb {
  display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px;
  background: var(--surface); border: 1.5px solid var(--hair);
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.gal-item:hover .gal-thumb img { transform: scale(1.03); }
.gal-cap { display: block; margin-top: 12px; }
.gal-title { display: block; font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.gal-item:hover .gal-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.gal-text { display: block; margin-top: 2px; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }

.gal-dialog {
  margin: auto; width: min(1200px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100vh - 2 * var(--gutter)); max-height: calc(100dvh - 2 * var(--gutter));
  padding: 0; border: 0; border-radius: 24px; overflow: auto;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1.5px var(--hair), 0 28px 90px rgba(5, 8, 18, 0.4);
}
.gal-dialog::backdrop { background: rgba(8, 12, 24, 0.72); }
.gal-card { display: grid; gap: 14px; padding: clamp(12px, 2.5vw, 24px); }
.gal-fig { margin: 0; touch-action: pan-y pinch-zoom; }
.gal-img {
  display: block; width: 100%; height: auto; max-height: 68vh; max-height: 68dvh; object-fit: contain;
  border-radius: 12px; background: var(--paper);
}
.gal-figcap { margin-top: 12px; }
.gal-ft { display: block; font-size: 1.15rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.gal-fx { display: block; margin-top: 2px; color: var(--muted); }
.gal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.gal-count { min-width: 6.5em; text-align: center; color: var(--muted); font-size: 0.95rem; }
.gal-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: auto; }
.gal-open { padding-block: 10px; font-weight: 500; text-underline-offset: 4px; }
.gal-open::after { content: " ↗"; }
.gal-bar .tool[hidden], .gal-count[hidden] { display: none; }
/* Schmal oder große Schrift: Knöpfe in einer Zeile, darunter Zähler und Verweise */
@media (max-width: 560px) {
  .gal-bar { gap: 8px 10px; }
  .gal-bar [data-gal="next"] { order: 1; }
  .gal-bar [data-gal="close"] { order: 2; margin-left: auto; }
  .gal-count { order: 3; width: 100%; text-align: left; }
  .gal-links { order: 4; width: 100%; margin-left: 0; }
}
html:is([data-size="150"], [data-size="200"]) .gal-bar [data-gal="next"] { order: 1; }
html:is([data-size="150"], [data-size="200"]) .gal-bar [data-gal="close"] { order: 2; margin-left: auto; }
html:is([data-size="150"], [data-size="200"]) .gal-count { order: 3; width: 100%; text-align: left; }
html:is([data-size="150"], [data-size="200"]) .gal-links { order: 4; width: 100%; margin-left: 0; }

/* 7 ── Fußzeile ───────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--hair); background: color-mix(in srgb, var(--paper) 88%, transparent); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 28px; color: var(--muted); font-size: 1rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-row a { text-underline-offset: 4px; }
/* „Gerne per Du?“: dezent wie ein Fußzeilenlink, aber ein Schalter */
.link-btn {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 4px;
}
.link-btn:hover { color: var(--ink); text-decoration-style: solid; }
.link-btn[hidden] { display: none; }

/* 8 ── Impressum ──────────────────────────────────────────────── */

.legal { padding-block: clamp(40px, 7vw, 96px); }
.legal-inner { max-width: 68ch; }
.legal h1 { font-size: min(clamp(2.2rem, 5vw, 3.6rem), calc((100vw - 2 * var(--gutter)) / (10.4 * var(--wf, 1)))); font-weight: 600; letter-spacing: 0; line-height: 1; }
.legal h1 + p { margin-top: 32px; }
.legal h2 { margin-top: 40px; font-size: 1.35rem; font-weight: 600; letter-spacing: 0; }
.legal p { margin-top: 12px; }
.legal a { text-underline-offset: 3px; }
.legal-meta { margin-top: 48px; color: var(--muted); font-size: 0.95rem; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 28px; border-top: 1px solid var(--hair); }


/* 9 ── Bewegung ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="normal"]) { scroll-behavior: auto; }
  html:not([data-motion="normal"]) *, html:not([data-motion="normal"]) *::before, html:not([data-motion="normal"]) *::after {
    transition-duration: 0.01ms !important;
  }
}
html[data-motion="reduced"] { scroll-behavior: auto; }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
}
.btn, .chan-arrow { will-change: auto; }


/* 10 ── Einstellungsdialog „Darstellung und Barrierefreiheit“ ───── */

html.has-modal { overflow: hidden; }

.a11y-dialog {
  margin: auto; width: min(600px, calc(100% - 2 * var(--gutter))); max-height: calc(100vh - 2 * var(--gutter)); max-height: calc(100dvh - 2 * var(--gutter));
  padding: 0; border: 0; border-radius: 24px; overflow: auto;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1.5px var(--hair), 0 28px 90px rgba(5, 8, 18, 0.4);
}
.a11y-dialog::backdrop { background: rgba(8, 12, 24, 0.6); }
.a11y-card { padding: clamp(20px, 4vw, 32px); }
.a11y-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.a11y-head h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 600; line-height: 1.15; letter-spacing: 0; }
.a11y-note { margin-top: 10px; color: var(--muted); font-size: 0.95rem; }

.a11y-group { min-width: 0; margin-top: 22px; border: 0; }
.a11y-group legend { margin-bottom: 8px; padding: 0; font-weight: 600; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-opt span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px;
  font-weight: 500; box-shadow: inset 0 0 0 1.5px var(--hair);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.seg-opt:hover input:not(:checked) + span { background: var(--hair); }
.seg-opt input:checked + span { background: var(--ink); color: var(--paper); box-shadow: none; font-weight: 600; }
.seg-opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }

.a11y-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 28px; }


/* 11 ── Barrierefreiheit: Größe, Kontrast, Schrift, Abstand ─────── */


/* Textgröße: alles Übrige ist in rem gebaut und wächst mit */
html[data-size="125"] { font-size: 125%; }
html[data-size="150"] { font-size: 150%; }
html[data-size="200"] { font-size: 200%; }

/* Bei großer Schrift: einspaltig, Kopfzeile scrollt mit, Menü wie auf dem Handy */
html[data-size="150"], html[data-size="200"] { scroll-padding-top: 1rem; }
html[data-size="150"] .site-header, html[data-size="200"] .site-header { position: relative; }
html[data-size="150"] .hero, html[data-size="200"] .hero,
html[data-size="150"] .stop-grid, html[data-size="200"] .stop-grid { grid-template-columns: minmax(0, 1fr); }
html[data-size="150"] .bar, html[data-size="200"] .bar { gap: 12px; }
html[data-size="150"] .tool--menu, html[data-size="200"] .tool--menu { display: grid; }
html[data-size="150"] .tools, html[data-size="200"] .tools { margin-left: auto; }
html[data-size="150"] .bar:has(.nav) .brand span, html[data-size="200"] .bar:has(.nav) .brand span { display: none; }
/* 125 % mit weitem Textabstand: Kopfzeile wird zwischen 880 und 1000 px sonst zu breit, daher ohne Schriftzug */
@media (max-width: 1000px) { html[data-size="125"][data-spacing="wide"] .bar:has(.nav) .brand span { display: none; } }
html[data-size="150"] .nav, html[data-size="200"] .nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  flex-direction: column; gap: 2px; margin: 0; padding: 12px var(--gutter) 20px;
  background: var(--paper); border-bottom: 1px solid var(--hair);
}
html[data-size="150"] .nav.is-open, html[data-size="200"] .nav.is-open { display: flex; }
html[data-size="150"] .nav a, html[data-size="200"] .nav a { padding: 14px 16px; font-size: 1.15rem; }

/* Textabstand (WCAG 1.4.12): weiter laufen, mehr Zeilen- und Absatzabstand */
html[data-spacing="wide"] { --wf: 1.1; }   /* Schriftbreite wächst um etwa 8 %; Überschriften rechnen damit */
html[data-spacing="wide"] body :not(svg, svg *) { letter-spacing: 0.04em !important; word-spacing: 0.12em !important; }
html[data-spacing="wide"] :is(p, li, dd, dt, .btn) { line-height: 1.8 !important; }
html[data-spacing="wide"] .legal p { margin-top: 1.6em; }

/* Kontrast hoch: reines Schwarz/Weiß, kräftige Ränder, dunklere bzw. hellere Linienfarben */
html[data-contrast="high"] {
  --paper: #ffffff; --surface: #ffffff; --ink: #000000; --muted: #262b36;
  --hair: rgba(0, 0, 0, 0.65); --rail: rgba(0, 0, 0, 0.55); --dots: transparent; --focus: #0b4fc4;
  --c1: #b3001b;  --on1: #ffffff;
  --c2: #9c4a00;  --on2: #ffffff;
  --c3: #6f5900;  --on3: #ffffff;
  --c4: #0b6b32;  --on4: #ffffff;
  --c5: #0b4fc4;  --on5: #ffffff;
  --c6: #5b21a0;  --on6: #ffffff;
  --c7: #a8145a;  --on7: #ffffff;
}
html[data-contrast="high"][data-theme="dark"] {
  --paper: #000000; --surface: #000000; --ink: #ffffff; --muted: #e6e6e6;
  --hair: rgba(255, 255, 255, 0.7); --rail: rgba(255, 255, 255, 0.6); --focus: #ffe14d;
  --c1: #ff6b64;  --on1: #000000;
  --c2: #ffa31a;  --on2: #000000;
  --c3: #ffe14d;  --on3: #000000;
  --c4: #3fd17f;  --on4: #000000;
  --c5: #6aa5ff;  --on5: #000000;
  --c6: #c197ff;  --on6: #000000;
  --c7: #ff7ab5;  --on7: #000000;
}
html[data-contrast="high"][data-palette="mono"] {
  --c1: #b3001b;  --on1: #ffffff;
  --c2: #404040;  --on2: #ffffff;
  --c3: #595959;  --on3: #ffffff;
  --c4: #595959;  --on4: #ffffff;
  --c5: var(--ink);  --on5: var(--paper);
  --c6: #262626;  --on6: #ffffff;
  --c7: #b3001b;  --on7: #ffffff;
  --focus: #b3001b;
}
html[data-contrast="high"][data-palette="mono"][data-theme="dark"] {
  --c1: #ff6b64;  --on1: #000000;
  --c2: #d0d0d0;  --on2: #000000;
  --c3: #8f8f8f;  --on3: #000000;
  --c4: #a8a8a8;  --on4: #000000;
  --c6: #ececec;  --on6: #000000;
  --c7: #ff6b64;  --on7: #000000;
  --focus: #ffe14d;
}
html[data-contrast="high"] body { background-image: none; }
html[data-contrast="high"] :focus-visible { outline-width: 4px; }
html[data-contrast="high"] a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
html[data-contrast="high"] .site-header { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-contrast="high"] :is(.tool, .btn--ghost, .board, .seg-opt span) { box-shadow: inset 0 0 0 2px var(--ink); }
html[data-contrast="high"] .seg-opt input:checked + span { box-shadow: none; }
/* Hover/Antippen: --hair ist hier fast deckend, daher umgekehrte Farben statt Schleier */
html[data-contrast="high"] :is(.tool, .nav a):hover,
html[data-contrast="high"] .map-toggle:active { background: var(--ink); color: var(--paper); }
@media (hover: hover) { html[data-contrast="high"] .map-toggle:hover { background: var(--ink); color: var(--paper); } }
html[data-contrast="high"] .m-label--minor { fill: var(--ink); font-weight: 500; }
html[data-contrast="high"] .board-source { opacity: 1; }
html[data-contrast="high"] .a11y-dialog { box-shadow: 0 0 0 3px var(--ink); }

/* Samsung Internet (js/compat.js): Karte in flacher Fassung ohne Papierfarbe.
   „Dunkle Seiten“ lässt Papierfarbe als helle Fläche stehen; Tinte, Linienfarben und Transparenz
   passen sich dagegen jedem Grund an. Statt Kontur, Linienrand und Füllung in Papierfarbe gibt es hier
   nur Namen in Tinte, Linien ohne Rand, Stationen als Scheiben und Gewässer/Grün als Tönung. */
.ua-samsung .m-casing, .ua-samsung .m-halo { display: none; }
.ua-samsung .m-label, .ua-samsung .m-badge rect { stroke: none; }
.ua-samsung .m-station circle { fill: var(--ink); }
.ua-samsung .m-vehicle rect { fill: none; }
.ua-samsung .m-bg-river { stroke: var(--c5); stroke-opacity: 0.17; }
.ua-samsung .m-bg-lake  { fill: var(--c5); fill-opacity: 0.17; }
.ua-samsung .m-bg-park  { fill: var(--c4); fill-opacity: 0.15; }

/* Windows-Kontrastmodus: Rahmen statt Schatten, Auswahl mit Systemfarben */
@media (forced-colors: active) {
  .tool, .btn, .board, .seg-opt span { border: 1px solid ButtonText; box-shadow: none; }
  .seg-opt input:checked + span { background: Highlight; color: HighlightText; border-color: Highlight; }
  .seg-opt input:focus-visible + span, :focus-visible { outline: 3px solid Highlight; }
  .a11y-dialog { border: 2px solid CanvasText; }
  .route-vehicle, .stop-ring { border-color: CanvasText; }
}