/* Dunkles Farbschema für alle Seiten. Folgt der Systemeinstellung; der Umschalter (nav.js) setzt data-theme="dark" oder "light"
   und merkt sich die Wahl in localStorage. Die Selektoren beginnen mit html…, damit sie die Seitenstile unabhängig von der Reihenfolge schlagen.
   Erzeugt aus einer gemeinsamen Regelliste: Änderungen in beiden Blöcken gleich halten. */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){ --orange-text:#FF8A66; --water-deep:#9CC6E4; --grund:#121211; --flaeche:#1A1A18; --karte:#232321; --tinte:#F2F1EC; --text2:#C9C7BF; --grau:#A3A29C; --linie:#34342F; --blau:#22343F; --akzentmatt:#2C3216; --ink-rgb:242,241,236; color-scheme:dark; }
  html:not([data-theme="light"]) ::selection{ color:#1A1A18 }
  html:not([data-theme="light"]) .grau, html:not([data-theme="light"]) .quote .grau, html:not([data-theme="light"]) .hero-t h1 .grau, html:not([data-theme="light"]) .hero h1 em{ color:#8F8E88 }
  html:not([data-theme="light"]) .hero-t .mark{ background:linear-gradient(transparent 80%, var(--akzent) 80%, var(--akzent) 92%, transparent 92%) }
  html:not([data-theme="light"]) .logos-track img{ filter:brightness(0) invert(1); opacity:.55 }
  html:not([data-theme="light"]) .logos::before{ background:linear-gradient(90deg,var(--flaeche),rgba(26,26,24,0)) }
  html:not([data-theme="light"]) .logos::after{ background:linear-gradient(270deg,var(--flaeche),rgba(26,26,24,0)) }
  html:not([data-theme="light"]) .chip{ color:#CFE6F5 }
  html:not([data-theme="light"]) .case .num, html:not([data-theme="light"]) .num{ color:#1A1A18 }
  html:not([data-theme="light"]) .praxis-card.alle p{ color:#55544F }
  html:not([data-theme="light"]) .cross{ color:#D6E8F4 }
  html:not([data-theme="light"]) .kform-meldung.fehler{ background:#4A2018 }
  html:not([data-theme="light"]) .brand nav a{ opacity:1 }
  html:not([data-theme="light"]) .prose, html:not([data-theme="light"]) .inhalt p{ color:#DEDCD5 }
  html:not([data-theme="light"]) .prose blockquote{ color:#D6E8F4 }
  html:not([data-theme="light"]) .inline-cta{ color:#1A1A18 }
  html:not([data-theme="light"]) .inline-cta p{ color:#1A1A18 }
  html:not([data-theme="light"]) .inline-cta .cta-btn{ background:#1A1A18; color:#F6F5F1 }
  html:not([data-theme="light"]) .inline-cta .cta-btn:hover{ background:var(--orange); color:#1A1A18 }
  html:not([data-theme="light"]) .pfoot, html:not([data-theme="light"]) .band + .band, html:not([data-theme="light"]) .band.cream, html:not([data-theme="light"]) .hero + .band, html:not([data-theme="light"]) .seitenlinks .wrap{ border-color:var(--linie) }
  html:not([data-theme="light"]) .agents span{ color:#CFE6F5 }
  html:not([data-theme="light"]) .band.water{ background:#0D0D0C }
  html:not([data-theme="light"]) .step.gate.is-current .mk, html:not([data-theme="light"]) .step.gate.is-past .mk, html:not([data-theme="light"]) .lz li.active .i, html:not([data-theme="light"]) .lz li.g.done .i, html:not([data-theme="light"]) .lz li.g.active .i, html:not([data-theme="light"]) .lz li.live.done .i, html:not([data-theme="light"]) .gatebox .dia span{ color:#1A1A18 }
  html:not([data-theme="light"]) .lz li.live, html:not([data-theme="light"]) .lz li.live.done{ background:#22343F; border-color:#22343F; color:#F2F1EC }
  html:not([data-theme="light"]) .setup dt, html:not([data-theme="light"]) .facts dt, html:not([data-theme="light"]) .tablewrap th, html:not([data-theme="light"]) .fahne-head, html:not([data-theme="light"]) .log-head, html:not([data-theme="light"]) .when span, html:not([data-theme="light"]) .pilot li::before, html:not([data-theme="light"]) .msg small, html:not([data-theme="light"]) .who{ color:#A3A29C }
}
html[data-theme="dark"]{ --orange-text:#FF8A66; --water-deep:#9CC6E4; --grund:#121211; --flaeche:#1A1A18; --karte:#232321; --tinte:#F2F1EC; --text2:#C9C7BF; --grau:#A3A29C; --linie:#34342F; --blau:#22343F; --akzentmatt:#2C3216; --ink-rgb:242,241,236; color-scheme:dark; }
html[data-theme="dark"] ::selection{ color:#1A1A18 }
html[data-theme="dark"] .grau, html[data-theme="dark"] .quote .grau, html[data-theme="dark"] .hero-t h1 .grau, html[data-theme="dark"] .hero h1 em{ color:#8F8E88 }
html[data-theme="dark"] .hero-t .mark{ background:linear-gradient(transparent 80%, var(--akzent) 80%, var(--akzent) 92%, transparent 92%) }
html[data-theme="dark"] .logos-track img{ filter:brightness(0) invert(1); opacity:.55 }
html[data-theme="dark"] .logos::before{ background:linear-gradient(90deg,var(--flaeche),rgba(26,26,24,0)) }
html[data-theme="dark"] .logos::after{ background:linear-gradient(270deg,var(--flaeche),rgba(26,26,24,0)) }
html[data-theme="dark"] .chip{ color:#CFE6F5 }
html[data-theme="dark"] .case .num, html[data-theme="dark"] .num{ color:#1A1A18 }
html[data-theme="dark"] .praxis-card.alle p{ color:#55544F }
html[data-theme="dark"] .cross{ color:#D6E8F4 }
html[data-theme="dark"] .kform-meldung.fehler{ background:#4A2018 }
html[data-theme="dark"] .brand nav a{ opacity:1 }
html[data-theme="dark"] .prose, html[data-theme="dark"] .inhalt p{ color:#DEDCD5 }
html[data-theme="dark"] .prose blockquote{ color:#D6E8F4 }
html[data-theme="dark"] .inline-cta{ color:#1A1A18 }
html[data-theme="dark"] .inline-cta p{ color:#1A1A18 }
html[data-theme="dark"] .inline-cta .cta-btn{ background:#1A1A18; color:#F6F5F1 }
html[data-theme="dark"] .inline-cta .cta-btn:hover{ background:var(--orange); color:#1A1A18 }
html[data-theme="dark"] .pfoot, html[data-theme="dark"] .band + .band, html[data-theme="dark"] .band.cream, html[data-theme="dark"] .hero + .band, html[data-theme="dark"] .seitenlinks .wrap{ border-color:var(--linie) }
html[data-theme="dark"] .agents span{ color:#CFE6F5 }
html[data-theme="dark"] .band.water{ background:#0D0D0C }
html[data-theme="dark"] .step.gate.is-current .mk, html[data-theme="dark"] .step.gate.is-past .mk, html[data-theme="dark"] .lz li.active .i, html[data-theme="dark"] .lz li.g.done .i, html[data-theme="dark"] .lz li.g.active .i, html[data-theme="dark"] .lz li.live.done .i, html[data-theme="dark"] .gatebox .dia span{ color:#1A1A18 }
html[data-theme="dark"] .lz li.live, html[data-theme="dark"] .lz li.live.done{ background:#22343F; border-color:#22343F; color:#F2F1EC }
html[data-theme="dark"] .setup dt, html[data-theme="dark"] .facts dt, html[data-theme="dark"] .tablewrap th, html[data-theme="dark"] .fahne-head, html[data-theme="dark"] .log-head, html[data-theme="dark"] .when span, html[data-theme="dark"] .pilot li::before, html[data-theme="dark"] .msg small, html[data-theme="dark"] .who{ color:#A3A29C }

/* Umschalter: kleines rundes Symbol */
.farbschalter{ display:inline-grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--grau); cursor:pointer; flex:none; transition:color .2s, background .2s }
.farbschalter:hover{ color:var(--tinte); background:var(--karte) }
.farbschalter:focus-visible{ outline:2px solid var(--orange); outline-offset:2px }
.farbschalter svg{ width:15px; height:15px }
.farbschalter .sonne{ display:none }
html[data-theme="dark"] .farbschalter .mond{ display:none }
html[data-theme="dark"] .farbschalter .sonne{ display:block }
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .farbschalter .mond{ display:none }
  html:not([data-theme="light"]) .farbschalter .sonne{ display:block }
}
.brand{ position:relative }
.farbschalter.imkopf{ position:absolute; right:clamp(16px,4vw,40px); top:24px }
@media (max-width:720px){ .farbschalter.imkopf{ right:62px; top:16px } }
/* Sprachumschalter: kleines DE/EN links neben dem Farbschalter, gleiche Zurückhaltung */
.sprachschalter{ position:absolute; right:calc(clamp(16px,4vw,40px) + 36px); top:24px; display:inline-grid; place-items:center; min-width:32px; height:32px; padding:0 6px; border-radius:16px; color:var(--grau); font-size:12px; font-weight:600; letter-spacing:.06em; text-decoration:none; transition:color .2s, background .2s }
.sprachschalter:hover{ color:var(--tinte); background:var(--karte) }
.sprachschalter:focus-visible{ outline:2px solid var(--orange); outline-offset:2px }
@media (max-width:720px){ .sprachschalter{ right:98px; top:16px } }

/* Mikro-Animationen (seit 2026-10-21): nur transform/opacity bzw. Hintergrundgröße, nie Inhalte verstecken,
   nichts am größten Element beim Laden; wer reduzierte Bewegung eingestellt hat, sieht alles statisch. */
@media (prefers-reduced-motion: no-preference) {
  /* 1 · Lime-Marker unter „mit System.“ zeichnet sich einmal von links nach rechts ein (Text steht sofort) */
  :root .hero-t .mark.mark{ background-repeat:no-repeat; background-size:100% 100%; animation:moess-marker .7s .3s cubic-bezier(.2,.7,.2,1) both }   /* höhere Gewichtung: die Dunkel-Regel setzt background als Kurzform neu */
  @keyframes moess-marker{ from{ background-size:0% 100% } }

  /* 2 · „Mehr →“-Hinweise rücken beim Überfahren der Karte ein Stück nach rechts */
  .case .more, .praxis-card .more, .lage .mehr, .fs-liste .mehr, .werdegang-link a{ display:inline-block; transition:transform .25s ease, color .2s }
  a.case:hover .more, .praxis-card:hover .more, .lage a:hover .mehr, .fs-liste a:hover .mehr, .werdegang-link a:hover{ transform:translateX(3px) }

  /* 3 · Verlinkte Karten heben sich leicht an */
  a.case, .praxis-card, .lage a, .fsraster a, .fs-liste a, .fs-mehr a{ transition:transform .25s ease, box-shadow .25s ease, background .2s }
  a.case:hover, .praxis-card:hover, .lage a:hover, .fsraster a:hover, .fs-liste a:hover, .fs-mehr a:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(26,26,24,.08) }
  .praxis-track{ padding-top:6px; margin-top:-6px }   /* Platz, damit angehobene Karten im Slider nicht oben abgeschnitten werden */

  /* 4 · Antworten in den Fragen klappen weich auf; das „+“ dreht sich mit */
  :root{ interpolate-size:allow-keywords }
  .kfragen details::details-content, .fragen details::details-content, .faq details::details-content{ block-size:0; overflow:hidden; transition:block-size .3s ease, content-visibility .3s allow-discrete }
  .kfragen details[open]::details-content, .fragen details[open]::details-content, .faq details[open]::details-content{ block-size:auto }
  .kfragen details[open] summary::after, .fragen details[open] summary::after{ animation:moess-kippen .3s ease }   /* „–“ kippt aus der Senkrechten: das „+“ klappt sichtbar zu */
  @keyframes moess-kippen{ from{ transform:rotate(-90deg) } }
}