/* Rechtsanwalt Aleksander Sigal – Fachanwalt für Verkehrsrecht, Berlin
   Gestaltung „Dämmerung“: Fahrbahn, Markierung, Verkehrsgelb.
   Hell/Dunkel über data-theme am <html>; ohne Skript gilt die Systemeinstellung. */

/* ---------- Schriften (selbst gehostet). Kyrillisch kommt aus Fira, weil Barlow es nicht enthält ---------- */
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/fira-sans-extra-condensed-cyrillic-600-normal.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/fira-sans-extra-condensed-cyrillic-700-normal.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/fira-sans-extra-condensed-cyrillic-800-normal.woff2") format("woff2");font-weight:800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";src:url("../fonts/fira-sans-cyrillic-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Barlow";src:url("../fonts/fira-sans-cyrillic-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Barlow";src:url("../fonts/fira-sans-cyrillic-600-normal.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Barlow";src:url("../fonts/fira-sans-cyrillic-700-normal.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ---------- Tokens: dunkel (Dämmerung) ---------- */
:root,.tone-dark{
  color-scheme:dark;
  --bg:#262B33;           /* Seite */
  --bg-alt:#21252C;       /* abgesetzte Abschnitte */
  --surface:#30363F;      /* Karten, Formular */
  --line:#434A55;         /* Linien, Ränder */
  --text:#F1F2F4;         /* 12,7:1 auf bg */
  --text-2:#B7BDC5;       /* 7,4:1 auf bg, 6,3:1 auf surface */
  --prose:#DDE0E4;
  --accent-text:#F7B500;  /* Gelb als Textfarbe, 8,1:1 auf bg */
  --accent-strong:#FFC425;
  --dot:#F7B500;
  --field-border:#7F8690; /* 3,2:1 auf surface */
  --field-bg:#262B33;
  --placeholder:#9AA0A8; /* 5,4:1 auf dem dunklen Feld */
  --ghost-line:rgba(242,242,242,.42);
  --header-bg:rgba(38,43,51,.82);
  --header-line:rgba(255,255,255,.07);
  --scrim:38,43,51;
  --hero-lead:#D3D6D9;
  --card-shadow:0 0 0 1px var(--line);
  --todo-bg:#6B5300;--todo-text:#FFF3C4;
  --noise:url("../img/noise-light.svg");
}
/* ---------- Tokens: hell (Tag) ---------- */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#F3F4F6;--bg-alt:#FFFFFF;--surface:#FFFFFF;--line:#D6DBE1;
    --text:#16191E;--text-2:#4F5763;--prose:#262B33;
    --accent-text:#7A5600;--accent-strong:#5C4100;--dot:#E0A400;
    --field-border:#7E8692;--field-bg:#FFFFFF;--placeholder:#6B7380;
    --ghost-line:rgba(22,25,30,.38);
    --header-bg:rgba(243,244,246,.86);--header-line:rgba(22,25,30,.08);
    --scrim:243,244,246;--hero-lead:#2B3038;
    --card-shadow:0 0 0 1px var(--line),0 18px 40px -30px rgba(22,25,30,.35);
    --todo-bg:#FFE58A;--todo-text:#3D2E00;
    --noise:url("../img/noise-dark.svg");
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F3F4F6;--bg-alt:#FFFFFF;--surface:#FFFFFF;--line:#D6DBE1;
  --text:#16191E;--text-2:#4F5763;--prose:#262B33;
  --accent-text:#7A5600;--accent-strong:#5C4100;--dot:#E0A400;
  --field-border:#7E8692;--field-bg:#FFFFFF;--placeholder:#6B7380;
  --ghost-line:rgba(22,25,30,.38);
  --header-bg:rgba(243,244,246,.86);--header-line:rgba(22,25,30,.08);
  --scrim:243,244,246;--hero-lead:#2B3038;
  --card-shadow:0 0 0 1px var(--line),0 18px 40px -30px rgba(22,25,30,.35);
  --todo-bg:#FFE58A;--todo-text:#3D2E00;
  --noise:url("../img/noise-dark.svg");
}
/* Elemente, die immer „Fahrbahn“ sind, bleiben in beiden Modi dunkel */
.tone-dark{color:var(--text)}

:root{
  --yellow:#F7B500;       /* Verkehrsgelb (RAL 1023) als Fläche */
  --on-yellow:#111111;    /* 10,8:1 auf gelb */
  --marking:#F2F2F2;
  --road:#2E343C;
  --font-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --font-body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1200px;
  --gutter:16px;
  --lane-x:8px;
  --lane-w:3px;
  --header-h:68px;
  --r-card:14px;
  --r-sign:12px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:760px){
  :root{--gutter:max(56px,5vw);--lane-x:clamp(20px,2.4vw,40px);--lane-w:4px;--header-h:76px}
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background-color:var(--bg);background-image:var(--noise);color:var(--text);font-family:var(--font-body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;transition:background-color .35s var(--ease),color .35s var(--ease)}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:inherit}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:16px;top:-120px;z-index:100;background:var(--yellow);color:var(--on-yellow);padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:min(var(--wrap),100% - 2 * var(--gutter));margin-inline:auto}
mark.todo{padding:1px 6px;border-radius:4px;background:var(--todo-bg);color:var(--todo-text);font-size:.9em;font-style:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}
mark.todo::before{content:"⚑ ";font-size:.9em}

/* ---------- Leitlinie am linken Rand ---------- */
.lane{position:fixed;top:var(--header-h);bottom:0;left:var(--lane-x);width:var(--lane-w);z-index:4;pointer-events:none;--p:0;--drive:0px}
.lane::before{content:"";position:absolute;top:-8px;bottom:0;left:calc(var(--lane-strip,4px) * -1);right:calc(var(--lane-strip,4px) * -1);border-radius:6px;background:linear-gradient(#343A43,#2B3038)}
@media (min-width:760px){.lane{--lane-strip:7px}}
.lane__track,.lane__fill{position:absolute;inset:0;background-image:repeating-linear-gradient(to bottom,currentColor 0 30px,transparent 30px 58px);background-position:0 var(--drive);border-radius:2px}
.lane__track{color:rgba(242,242,242,.16)}
.lane__fill{color:var(--marking);clip-path:inset(0 0 calc(100% - var(--p) * 100%) 0);filter:drop-shadow(0 0 6px rgba(242,242,242,.35))}
.lane__head{position:absolute;left:50%;top:calc(var(--p) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(247,181,0,.18),0 0 24px 6px rgba(247,181,0,.45)}
@media (max-width:759px){.lane__head{width:10px;height:10px;margin:-5px 0 0 -5px}}

/* ---------- Kopfbereich ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);-webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px);border-bottom:1px solid var(--header-line);transition:background-color .35s var(--ease)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-header{background:var(--bg)}}
@media (prefers-reduced-transparency:reduce){.site-header{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
.nav{display:flex;align-items:center;gap:8px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:14px;min-height:44px;text-decoration:none;margin-right:auto}
.brand__mark{width:20px;height:20px;flex:none;margin:6px;background:var(--yellow);transform:rotate(45deg);border-radius:2px;box-shadow:0 0 0 2px #111,0 0 0 4px var(--marking)}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--font-display);font-weight:800;font-size:28px;letter-spacing:.1em}
.brand__sub{margin-top:5px;white-space:nowrap;font-size:13px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2)}
@media (max-width:479px){.brand__sub{display:none}.brand{gap:10px}}

.nav__links{display:none;list-style:none;margin:0;padding:0;gap:0}
.nav__links a{white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:8px;font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--text);transition:color .2s}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--accent-text)}
.nav__links a[aria-current]{box-shadow:inset 0 -3px 0 var(--yellow);border-radius:0}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 10px;flex:none;border:1px solid var(--ghost-line);border-radius:12px;background:transparent;color:var(--text);font:600 15px var(--font-body);letter-spacing:.04em;cursor:pointer;transition:border-color .2s,color .2s}
.icon-btn:hover{border-color:var(--accent-text);color:var(--accent-text)}
.icon-btn svg{flex:none}

/* Hell/Dunkel-Schalter: zeigt das Ziel (Sonne → hell, Mond → dunkel) */
.theme-btn .i-moon{display:none}
:root[data-theme="light"] .theme-btn .i-sun{display:none}
:root[data-theme="light"] .theme-btn .i-moon{display:block}

/* Sprachwahl */
.lang{position:relative}
.lang > summary{list-style:none}
.lang > summary::-webkit-details-marker{display:none}
.lang__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;margin:0;padding:6px;list-style:none;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 24px 50px -20px rgba(0,0,0,.45);z-index:60}
.lang__menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 14px;border-radius:9px;text-decoration:none;font-weight:500}
.lang__menu a:hover{background:var(--bg)}
.lang__menu a[aria-current]{font-weight:700}
.lang__menu a[aria-current]::after{content:"";width:9px;height:9px;background:var(--yellow);transform:rotate(45deg);box-shadow:0 0 0 1.5px #111}
.lang__code{font-family:var(--font-display);font-weight:700;letter-spacing:.08em;color:var(--text-2)}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:44px;padding:0 18px;border-radius:999px;background:var(--yellow);color:var(--on-yellow);font-weight:700;font-size:17px;text-decoration:none;white-space:nowrap;transition:background-color .2s,transform .2s}
.pill:hover{background:#FFC425}
.pill svg{flex:none}
.pill--nav{margin-left:4px;flex:none}
@media (max-width:1599px){.pill--nav{padding:0;width:44px}.pill--nav .pill__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}

/* Die kürzere deutsche Nummer passt schon ab 1440 px ausgeschrieben in den Kopf */
@media (min-width:1440px){html[lang="de"] .pill--nav{padding:0 18px;width:auto}html[lang="de"] .pill--nav .pill__label{position:static;width:auto;height:auto;overflow:visible;clip:auto}}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:1px solid var(--ghost-line);border-radius:12px;background:transparent;color:var(--text);cursor:pointer}
.menu-btn__bars{position:relative;width:20px;height:12px}
.menu-btn__bars::before,.menu-btn__bars::after{content:"";position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .25s var(--ease),top .25s var(--ease)}
.menu-btn__bars::before{top:0}
.menu-btn__bars::after{top:10px}
.menu-btn[aria-expanded="true"] .menu-btn__bars::before{top:5px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__bars::after{top:5px;transform:rotate(-45deg)}
.menu{position:absolute;top:100%;left:0;right:0;max-height:calc(100svh - var(--header-h));overflow:auto;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--gutter) 28px}
.menu[hidden]{display:none}
.menu ul{list-style:none;margin:0;padding:0}
.menu a{display:flex;align-items:center;justify-content:space-between;min-height:58px;border-bottom:1px solid var(--line);font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none}
.menu a::after{content:"→";color:var(--accent-text);font-family:var(--font-body)}
.menu .pill{margin-top:24px;width:100%;min-height:52px;border:0;font-family:var(--font-body);font-size:18px;text-transform:none;letter-spacing:0}
.menu .pill::after{content:none}
.menu__theme{display:none}
@media (max-width:379px){.nav{gap:6px}.icon-btn,.menu-btn,.pill--nav{min-width:40px;width:40px;height:40px;padding:0}.lang .lang__label{display:none}
  /* Auf sehr schmalen Geräten sitzt der Hell/Dunkel-Schalter im Menü, damit die Kopfzeile passt */
  .nav > .theme-btn{display:none}
  .menu__theme{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin-top:12px;padding:0 2px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text);font:600 18px var(--font-body);cursor:pointer}
  .menu__theme svg{flex:none}}
@media (min-width:1280px){
  .nav{gap:10px}
  .nav__links{display:flex;margin-right:6px}
  .menu-btn,.menu{display:none !important}
}

/* ---------- Schaltflächen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:0;transition:background-color .2s,box-shadow .2s,color .2s,transform .2s var(--ease)}
.btn--primary{background:var(--yellow);color:var(--on-yellow)}
.btn--primary:hover{background:#FFC425;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--ghost-line)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--accent-text);color:var(--accent-text)}

/* ---------- Gemeinsame Abschnitte ---------- */
.section{position:relative;padding-block:clamp(52px,6vw,84px)}
.section--alt{background:var(--bg-alt)}
.section__head{margin-bottom:clamp(28px,3.5vw,44px)}
.kicker{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.kicker::before{content:"";width:30px;height:3px;flex:none;background:repeating-linear-gradient(90deg,currentColor 0 10px,transparent 10px 16px)}
.h2{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,5.2vw,76px);line-height:.94;letter-spacing:-.005em;text-transform:uppercase;hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word;text-wrap:balance}
.section__lead{max-width:40em;margin-top:22px;font-size:clamp(18px,1.5vw,20px);color:var(--text-2)}
.textlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--accent-text)}
.textlink::after{content:"→";font-family:var(--font-body);transition:transform .2s var(--ease)}
.textlink:hover::after{transform:translateX(4px)}

/* ---------- Fahrbahn-Szene (Kopfbereich) ---------- */
.scene{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 40% at 70% 38%,rgba(242,182,109,.45),transparent 70%),
  linear-gradient(to bottom,#2A3A57 0%,#506587 30%,#C99070 38%,#4A505A 38.2%,var(--bg) 100%)}
:root[data-theme="light"] .scene{background:linear-gradient(to bottom,#6FA6DD 0%,#A9CBEC 30%,#E3ECF2 38%,#9AA2AC 38.2%,var(--bg) 100%)}
.scene__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene__fade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(var(--scrim),.95) 0%,rgba(var(--scrim),.82) 30%,rgba(var(--scrim),.3) 52%,rgba(var(--scrim),0) 64%),
  linear-gradient(to top,var(--bg) 0%,rgba(var(--scrim),0) 20%)}
@media (max-width:899px){
  .scene{background:radial-gradient(80% 30% at 50% 30%,rgba(242,182,109,.4),transparent 70%),linear-gradient(to bottom,#2A3A57 0%,#506587 24%,#C99070 30%,#4A505A 30.2%,var(--bg) 100%)}
  :root[data-theme="light"] .scene{background:linear-gradient(to bottom,#6FA6DD 0%,#A9CBEC 24%,#E3ECF2 30%,#9AA2AC 30.2%,var(--bg) 100%)}
  .scene__fade{background:linear-gradient(to bottom,rgba(var(--scrim),.15) 0%,rgba(var(--scrim),.5) 26%,rgba(var(--scrim),.88) 50%,var(--bg) 100%)}
}
.scene-toggle{position:absolute;z-index:2;right:max(var(--gutter),(100% - var(--wrap)) / 2);bottom:24px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 13px;border-radius:999px;border:1px solid var(--ghost-line);background:rgba(var(--scrim),.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text);font:600 15px var(--font-body);cursor:pointer;transition:border-color .2s}
.scene-toggle:hover{border-color:var(--accent-text)}
.scene-toggle .i-play{display:none}
.scene-toggle[aria-pressed="true"] .i-play{display:block}
.scene-toggle[aria-pressed="true"] .i-pause{display:none}
@media (max-width:899px){.scene-toggle{top:14px;bottom:auto;padding:0 13px}.scene-toggle span{display:none}}
@media (prefers-reduced-motion:reduce){.scene-toggle{display:none}}

/* ---------- Startseite: Hero passt immer in den ersten Bildschirm ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:calc(100svh - var(--header-h));padding-block:clamp(20px,4vh,64px) clamp(56px,9vh,96px)}
.hero__inner{position:relative}
.hero__title,.hero__kicker{display:block}
.hero__kicker > span{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(42px,min(14vw,13.5vh),150px);line-height:.86;letter-spacing:-.005em;text-transform:uppercase;transition:color .45s var(--ease),text-shadow .45s var(--ease),background-size .45s var(--ease)}
.hero__kicker .dot{color:var(--dot)}
.hero__kicker > span.is-live{color:var(--yellow);text-shadow:0 0 40px rgba(247,181,0,.35)}
.hero__kicker > span.is-live .dot{color:var(--text)}
/* Hell: Gelb als Textfarbe wäre zu kontrastarm – das Wort bekommt einen Textmarker */
:root[data-theme="light"] .hero__kicker > span{width:fit-content;padding:0 .06em;margin-left:-.06em;background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 72% / 0 46%}
:root[data-theme="light"] .hero__kicker > span.is-live{color:var(--text);text-shadow:none;background-size:100% 46%}
:root[data-theme="light"] .hero__kicker > span.is-live .dot{color:var(--text)}
.hero__main{display:block;max-width:24em;margin-top:clamp(12px,2.6vh,28px);font-family:var(--font-display);font-weight:700;font-size:clamp(20px,min(2.5vw,3.6vh),34px);line-height:1.1;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.hero__lead{max-width:33em;margin-top:clamp(10px,2vh,22px);font-size:clamp(16px,min(1.55vw,2.3vh),21px);line-height:1.55;color:var(--hero-lead)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(16px,3.4vh,34px)}
.hero__actions .btn{min-height:clamp(48px,6vh,54px)}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin:clamp(12px,2.8vh,30px) 0 0;padding:0;list-style:none;font-size:15px;font-weight:500;color:var(--text-2)}
.trust li{display:flex;align-items:center;gap:10px}
.trust li::before{content:"";width:8px;height:8px;flex:none;background:var(--yellow);transform:rotate(45deg)}
@media (max-width:559px){.hero__actions .btn{flex:1 1 100%}}
@media (max-height:700px) and (max-width:899px){.trust{display:none}}
@media (max-height:620px){.trust{display:none}}
.hero__kicker > span,.hero__main,.hero__lead,.hero__actions,.trust{animation:rise .9s var(--ease) both}
.hero__kicker > span:nth-child(2){animation-delay:.08s}
.hero__kicker > span:nth-child(3){animation-delay:.16s}
.hero__main{animation-delay:.26s}
.hero__lead{animation-delay:.34s}
.hero__actions{animation-delay:.42s}
.trust{animation-delay:.5s}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ---------- Unterseiten: Kopfbereich ---------- */
.page-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:min(calc(100svh - var(--header-h)),700px);padding-block:clamp(28px,5vh,64px) clamp(64px,9vh,96px)}
.page-hero--plain{min-height:0;padding-block:clamp(36px,5vw,64px) clamp(20px,2.5vw,32px)}
@media (min-width:900px){.page-hero .scene__fade{background:linear-gradient(90deg,rgba(var(--scrim),.96) 0%,rgba(var(--scrim),.88) 42%,rgba(var(--scrim),.45) 64%,rgba(var(--scrim),0) 78%),linear-gradient(to top,var(--bg) 0%,rgba(var(--scrim),0) 20%)}}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 clamp(14px,2.4vh,26px);padding:0;list-style:none;font-size:15px;font-weight:500;color:var(--text-2)}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li + li::before{content:"";width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.7}
.crumbs a{text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--accent-text)}
.crumbs [aria-current]{color:var(--text)}
.page-title{max-width:14em;font-family:var(--font-display);font-weight:800;font-size:clamp(36px,min(4.8vw,7.6vh),76px);line-height:.92;letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word;hyphens:manual;-webkit-hyphens:manual}
.page-lead{max-width:34em;margin-top:clamp(14px,2.4vh,24px);font-size:clamp(17px,min(1.6vw,2.4vh),21px);line-height:1.55;color:var(--hero-lead)}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:clamp(16px,2.6vh,26px);font-size:15px;color:var(--text-2)}
.byline::before{content:"";width:8px;height:8px;background:var(--yellow);transform:rotate(45deg);box-shadow:0 0 0 1.5px #111}
.page-hero .hero__actions{margin-top:clamp(18px,3vh,30px)}
.page-hero .kicker,.page-title,.page-lead,.page-hero .hero__actions,.byline,.crumbs{animation:rise .9s var(--ease) both}
.page-title{animation-delay:.06s}
.page-lead{animation-delay:.14s}
.page-hero .hero__actions{animation-delay:.22s}
.byline{animation-delay:.3s}
@media (max-width:600px){.page-title{hyphens:auto;-webkit-hyphens:auto}}
/* Personennamen werden nie getrennt */
.name{hyphens:none;-webkit-hyphens:none}
/* Lange zusammengesetzte Wörter in Überschriften auf schmalen Geräten trennen statt überlaufen */
@media (max-width:600px){.faq__item summary{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}.prose h2,.prose h3,.h2,.sign__title,.deadline__title,.cta-box__title{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}}

/* Auf einen Blick */
.facts-band{padding-block:clamp(28px,4vw,44px);background:var(--bg-alt);border-block:1px solid var(--line)}
.facts-band__grid{display:grid;gap:clamp(12px,2vw,24px);margin:0;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.facts-band__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fact{position:relative;padding:18px 20px 18px 24px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--card-shadow)}
.fact::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 3px 3px 0;background:var(--yellow)}
.fact dt{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,2.6vw,36px);line-height:1;color:var(--accent-text);letter-spacing:.01em}
.fact dd{margin:8px 0 0;font-size:16px;line-height:1.45;color:var(--text-2)}

/* ---------- Artikel mit Inhaltsverzeichnis ---------- */
.article{padding-block:clamp(44px,5vw,72px)}
.article__grid{display:grid;gap:36px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){.article__grid{grid-template-columns:270px minmax(0,1fr);gap:72px;align-items:start}}
.toc-side{display:none}
@media (min-width:1100px){.toc-col{position:sticky;top:calc(var(--header-h) + 28px);max-height:calc(100vh - var(--header-h) - 48px);overflow:auto;overscroll-behavior:contain}.toc-side{display:block}.toc-mobile{display:none}}
.toc__title{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.toc ol{list-style:none;margin:12px 0 0;padding:0;border-left:2px solid var(--line)}
.toc a{display:block;margin-left:-2px;padding:8px 0 8px 16px;border-left:2px solid transparent;font-size:16px;line-height:1.35;text-decoration:none;color:var(--text-2);transition:color .2s,border-color .2s}
.toc a:hover{color:var(--text)}
.toc a.is-active{color:var(--text);border-left-color:var(--yellow);font-weight:600}
.toc-mobile{border-radius:var(--r-card);background:var(--surface);box-shadow:var(--card-shadow)}
.toc-mobile summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 20px;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.1em;text-transform:uppercase}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-mobile summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease)}
.toc-mobile[open] summary::after{transform:rotate(-135deg)}
.toc-mobile ol{margin:0 20px 18px}
.side-cta{margin-top:28px;padding:22px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--card-shadow)}
.side-cta p{font-size:16px;color:var(--text-2)}
.side-cta a{display:inline-flex;align-items:center;gap:10px;margin-top:8px;min-height:44px;font-family:var(--font-display);font-weight:800;font-size:28px;text-decoration:none;color:var(--accent-text)}
.side-cta a svg{width:20px;height:20px}

/* Fließtext */
.prose{max-width:70ch;min-width:0}
.prose > * + *{margin-top:18px}
.prose p,.prose li{color:var(--prose);font-size:18px;line-height:1.72;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.prose .intro{font-size:clamp(19px,1.6vw,21px);line-height:1.62;color:var(--text)}
.prose h2{margin-top:56px;font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3vw,42px);line-height:1;letter-spacing:.005em;text-transform:uppercase;text-wrap:balance;scroll-margin-top:calc(var(--header-h) + 20px)}
.prose h2::before{content:"";display:block;width:44px;height:4px;margin-bottom:16px;background:repeating-linear-gradient(90deg,var(--yellow) 0 14px,transparent 14px 22px)}
.prose h3{margin-top:36px;font-family:var(--font-display);font-weight:700;font-size:clamp(23px,2vw,28px);line-height:1.12;text-transform:none;letter-spacing:.005em}
.prose h2 + *,.prose h3 + *{margin-top:14px}
.prose a{color:var(--accent-text);text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:hover{color:var(--accent-strong)}
.prose strong{color:var(--text);font-weight:600}
.prose ul,.prose ol{padding-left:0;list-style:none}
.prose ul li,.prose ol:not(.steps) li{position:relative;padding-left:28px}
.prose li + li{margin-top:8px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.68em;width:8px;height:8px;background:var(--yellow);transform:rotate(45deg)}
.prose ol:not(.steps){counter-reset:n}
.prose ol:not(.steps) li{counter-increment:n}
.prose ol:not(.steps) li::before{content:counter(n) ".";content:counter(n) "." / "";position:absolute;left:0;top:0;font-family:var(--font-display);font-weight:700;color:var(--accent-text)}
.prose .note{margin-block:28px;padding:20px 22px 20px 24px;border-radius:12px;background:var(--surface);box-shadow:var(--card-shadow);border-left:5px solid var(--yellow)}
.prose .note p{font-size:17px}
.prose .note > * + *{margin-top:10px}
.prose .steps{counter-reset:s;display:grid;gap:14px;margin-block:26px}
.prose .steps li{min-width:0;counter-increment:s;position:relative;margin:0;padding:18px 20px 18px 74px;border-radius:12px;background:var(--surface);box-shadow:var(--card-shadow)}
.prose .steps li::before{content:counter(s);content:counter(s) / "";position:absolute;left:18px;top:16px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);font-family:var(--font-display);font-weight:800;font-size:20px}
.prose .steps strong{display:block;margin-bottom:2px}
/* Breite Tabellen scrollen in ihrem Rahmen, statt die Seite zu verbreitern */
.article__main,.article .prose,.legal .prose{min-width:0}
.table-wrap{margin-block:28px;overflow-x:auto;border-radius:12px;box-shadow:var(--card-shadow);background:var(--surface);-webkit-overflow-scrolling:touch}
.table-wrap:focus-visible{outline-offset:2px}
.prose table{width:100%;min-width:100%;border-collapse:collapse;font-size:16px;line-height:1.4}
.prose caption{padding:16px 18px 12px;text-align:left;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase}
.prose th,.prose td{padding:12px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.prose thead th{background:var(--yellow);color:var(--on-yellow);font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;border-top:0;white-space:nowrap}
.prose tbody tr:nth-child(even) td{background:rgba(127,134,144,.08)}
@media (max-width:640px){.prose table{font-size:15px}.prose th,.prose td{padding:10px 12px}.prose thead th{white-space:normal;font-size:14px}.prose caption{padding:14px 12px 10px;font-size:16px}}
.prose td{color:var(--prose)}
.legal-note{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--text-2)}

/* Handlungsaufforderung im Text */
.cta-box{position:relative;display:grid;gap:18px;margin-block:40px !important;padding:clamp(22px,3vw,30px);border-radius:var(--r-sign);background:var(--yellow);color:var(--on-yellow);box-shadow:inset 0 0 0 5px var(--yellow),inset 0 0 0 8px #111}
.prose .cta-box p{color:#2B2410;font-size:17px;font-weight:500;hyphens:manual;-webkit-hyphens:manual}
.prose .cta-box .cta-box__title{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,2.6vw,34px);line-height:1;text-transform:uppercase;color:#111;margin-bottom:8px}
.cta-box__actions{display:flex;flex-wrap:wrap;gap:10px}
.cta-box .btn{min-height:48px;font-size:18px;padding:0 22px}
.cta-box .btn--dark{background:#111;color:#fff}
.cta-box .btn--dark:hover{background:#2A2A2A}
.cta-box .btn--line{box-shadow:inset 0 0 0 1.5px #111;color:#111}
.cta-box .btn--line:hover{background:rgba(0,0,0,.08)}

/* ---------- Frist-Band (immer dunkel) ---------- */
.deadline{background:var(--surface)}
.hazard{height:10px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 14px,#111 14px 28px)}
.deadline__inner{display:grid;gap:26px;align-items:center;padding-block:clamp(32px,4.5vw,52px)}
.deadline__title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.4vw,46px);line-height:1.02;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.deadline__title strong{display:block;font-weight:800;color:var(--text)}
.deadline__title .hl{color:var(--yellow)}
.deadline__note{max-width:46em;margin-top:14px;font-size:17px;color:var(--text-2)}
@media (min-width:900px){.deadline__inner{grid-template-columns:1fr auto;gap:56px}}

/* ---------- Wegweiser-Karten ---------- */
.signs{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.signs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.signs--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sign{position:relative;display:flex;flex-direction:column;gap:16px;height:100%;padding:clamp(26px,3vw,38px);border-radius:var(--r-sign);background:var(--yellow);color:var(--on-yellow);text-decoration:none;box-shadow:inset 0 0 0 6px var(--yellow),inset 0 0 0 9px #111;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sign:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 6px var(--yellow),inset 0 0 0 9px #111,0 26px 50px -18px rgba(247,181,0,.4)}
.sign:focus-visible{outline-color:var(--text)}
.sign__top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.sign__top > *:first-child{min-width:0}
.sign__title{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.2vw,44px);line-height:.95;letter-spacing:.005em;text-transform:uppercase;hyphens:manual;-webkit-hyphens:manual;text-wrap:balance;overflow-wrap:break-word}
.signs--3 .sign__title{font-size:clamp(26px,2.4vw,34px);hyphens:auto;-webkit-hyphens:auto}
.sign__arrow{width:clamp(46px,4.4vw,62px);height:auto;flex:none;margin-top:2px;transition:transform .3s var(--ease)}
.signs--3 .sign__arrow{width:44px}
.sign:hover .sign__arrow{transform:translateX(6px)}
.sign__text{max-width:34em;font-size:18px;font-weight:500;line-height:1.5}
.signs--3 .sign__text{font-size:17px}
.sign__tags{margin-top:auto;padding-top:14px;border-top:2px solid rgba(17,17,17,.85);font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.07em;text-transform:uppercase;color:#2B2410}

/* Themen-Chips (alle Spezialseiten) */
.topics{margin-top:clamp(32px,4vw,48px)}
.topics__title{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.topics ul{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.topics a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--surface);box-shadow:var(--card-shadow);font-weight:600;font-size:16px;text-decoration:none;transition:box-shadow .2s,color .2s}
.topics a::before{content:"";width:7px;height:7px;background:var(--yellow);transform:rotate(45deg)}
.topics a:hover{color:var(--accent-text);box-shadow:inset 0 0 0 1.5px var(--yellow)}

/* ---------- Ablauf: 2 × 2 ---------- */
.route{display:grid;gap:clamp(16px,2vw,24px);margin:0;padding:0;list-style:none;grid-template-columns:minmax(0,1fr);counter-reset:r}
@media (min-width:760px){.route{grid-template-columns:repeat(2,minmax(0,1fr))}}
.route__item{position:relative;padding:clamp(26px,3vw,36px);padding-top:clamp(34px,3.6vw,44px);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--card-shadow);overflow:hidden}
.route__item::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--road)}
.route__item::after{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:repeating-linear-gradient(90deg,var(--marking) 0 18px,transparent 18px 32px);transform-origin:left;transition:transform 1.1s cubic-bezier(.6,0,.2,1) .15s}
.js .route__item.reveal::after{transform:scaleX(0)}
.js .route__item.reveal.is-in::after{transform:none}
.route__head{display:flex;align-items:center;gap:16px}
.route__num{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%;background:var(--yellow);color:var(--on-yellow);font-family:var(--font-display);font-weight:800;font-size:24px}
.route__item h3{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,2.4vw,34px);line-height:1;text-transform:uppercase}
.route__item p{margin-top:14px;color:var(--text-2)}

/* ---------- Anwalt ---------- */
.about__grid{display:grid;gap:clamp(28px,6vw,88px);align-items:start}
@media (min-width:900px){.about__grid{grid-template-columns:5fr 7fr}}
.about__role{margin-top:14px;font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2vw,26px);letter-spacing:.05em;text-transform:uppercase;color:var(--accent-text)}
.about__copy > p{max-width:38em;color:var(--prose)}
.about__copy > p + p{margin-top:20px}
.langs{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.langs li{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px;border-radius:999px;background:var(--surface);box-shadow:var(--card-shadow);font-weight:600;font-size:16px}
.langs abbr{font-family:var(--font-display);font-weight:800;letter-spacing:.08em;text-decoration:none;color:var(--accent-text)}
.facts-row{display:grid;margin:28px 0 0;border-top:1px solid var(--line)}
.facts-row > div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.facts-row dt{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);padding-top:3px}
.facts-row dd{margin:0}
.facts-row a{text-decoration:none}
.facts-row a:hover{color:var(--accent-text)}
.about__copy .textlink{margin-top:24px}

/* ---------- SEO-Text der Startseite ---------- */
.seo__grid{display:grid;gap:56px}
@media (min-width:1024px){.seo__grid{grid-template-columns:minmax(0,1fr) 340px;gap:88px;align-items:start}}
.seo .prose > .h2{margin:0 0 28px;font-size:clamp(34px,4.2vw,62px);line-height:.95}
.seo .prose > .h2::before{content:none}
.seo .prose > .kicker{margin-bottom:16px}
.seo .prose h3{margin-top:44px}
.facts{position:sticky;top:calc(var(--header-h) + 28px);padding:28px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--card-shadow)}
.facts__title{font-family:var(--font-display);font-weight:800;font-size:24px;text-transform:uppercase;letter-spacing:.04em}
.facts dl{margin:18px 0 0}
.facts dl > div{padding:14px 0;border-top:1px solid var(--line)}
.facts dt{font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1;color:var(--accent-text);letter-spacing:.01em}
.facts dd{margin:6px 0 0;font-size:16px;line-height:1.45;color:var(--text-2)}

/* ---------- FAQ ---------- */
.faq__grid{display:grid;gap:40px}
@media (min-width:1024px){.faq__grid{grid-template-columns:5fr 7fr;gap:88px;align-items:start}.faq__grid .section__head{position:sticky;top:calc(var(--header-h) + 28px);margin-bottom:0}}
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:20px 0;cursor:pointer;list-style:none;font-weight:600;font-size:clamp(19px,1.6vw,22px);line-height:1.35}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--accent-text)}
.faq__icon{position:relative;width:36px;height:36px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ghost-line);transition:transform .3s var(--ease),box-shadow .3s,background-color .3s}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:currentColor}
.faq__icon::after{transform:rotate(90deg)}
.faq__item[open] .faq__icon{transform:rotate(45deg);background:var(--yellow);color:var(--on-yellow);box-shadow:none}
.faq__a{max-width:62ch;padding:0 0 26px;color:var(--text-2)}
.faq__a > * + *{margin-top:12px}
.faq__a a{color:var(--accent-text);text-underline-offset:3px}
.faq__a ul{padding-left:1.2em}
@supports (interpolate-size:allow-keywords){
  .faq__list{interpolate-size:allow-keywords}
  .faq__item::details-content{height:0;overflow:clip;transition:height .35s var(--ease),content-visibility .35s allow-discrete}
  .faq__item[open]::details-content{height:auto}
}

/* ---------- Kontakt ---------- */
.contact__grid{display:grid;gap:clamp(40px,5vw,72px)}
@media (min-width:1024px){.contact__grid{grid-template-columns:5fr 7fr;align-items:start}}
.contact__phone{display:inline-flex;align-items:center;gap:14px;margin-top:30px;min-height:44px;font-family:var(--font-display);font-weight:800;font-size:clamp(36px,4.4vw,58px);line-height:1;letter-spacing:.01em;text-decoration:none;color:var(--accent-text);white-space:nowrap}
.contact__phone svg{width:.62em;height:.62em}
.contact__phone:hover{color:var(--accent-strong)}
.contact__dl{margin:32px 0 0;border-top:1px solid var(--line)}
.contact__dl > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.contact__dl dt{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);padding-top:3px}
.contact__dl dd{margin:0;overflow-wrap:anywhere}
.contact__dl a{color:inherit}
.contact__hint{margin-top:22px;font-size:16px;color:var(--text-2)}
.form{scroll-margin-top:calc(var(--header-h) + 16px);padding:clamp(24px,3vw,40px);border-radius:18px;background:var(--surface);box-shadow:var(--card-shadow)}
.form__title{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,2.4vw,32px);letter-spacing:.01em}
.form__intro{margin-top:8px;font-size:16px;color:var(--text-2)}
.form__grid{display:grid;gap:18px;margin-top:26px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.form__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.field--full{grid-column:1 / -1}}
.field{display:grid;gap:8px;align-content:start;min-width:0}
.field label,.field .label{font-weight:600;font-size:16px}
.field .optional{font-weight:400;color:var(--text-2)}
.input{width:100%;min-height:52px;padding:12px 16px;border-radius:10px;border:1.5px solid var(--field-border);background-color:var(--field-bg);color:var(--text);font:inherit;font-size:18px;line-height:1.4;transition:border-color .2s}
.input::placeholder{color:var(--placeholder)}
.input:hover{border-color:var(--text-2)}
.input:focus-visible{outline:3px solid var(--accent-text);outline-offset:1px;border-color:var(--accent-text)}
textarea.input{min-height:140px;resize:vertical}
select.input{-webkit-appearance:none;appearance:none;padding-right:46px;background-image:url("../img/chevron-light.svg");background-repeat:no-repeat;background-position:right 18px center}
:root[data-theme="light"] select.input{background-image:url("../img/chevron-dark.svg")}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) select.input{background-image:url("../img/chevron-dark.svg")}}
.file{display:grid;gap:10px;padding:18px;border-radius:12px;border:1.5px dashed var(--field-border);background:var(--bg)}
.file input[type=file]{width:100%;min-width:0;font:inherit;font-size:16px;color:var(--text-2)}
.file input[type=file]::file-selector-button{margin-right:14px;min-height:44px;padding:0 20px;border-radius:999px;border:0;background:var(--yellow);color:var(--on-yellow);font:700 16px var(--font-body);cursor:pointer}
.file small{font-size:14px;color:var(--text-2)}
.check{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5;color:var(--text-2)}
.check input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--yellow)}
.check a{color:var(--text)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.choice{margin:0;padding:0;border:0}
.choice legend{padding:0;margin-bottom:8px;font-weight:600;font-size:16px}
.choice__row{display:flex;flex-wrap:wrap;gap:10px}
.radio{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border:1.5px solid var(--field-border);border-radius:10px;background:var(--field-bg);font-size:17px;cursor:pointer}
.radio input{width:20px;height:20px;margin:0;accent-color:var(--yellow)}
.radio:has(input:checked){border-color:var(--accent-text)}
.radio:has(input:focus-visible){outline:3px solid var(--accent-text);outline-offset:1px}
.choice__hint{display:block;margin-top:8px;font-size:14px;color:var(--text-2)}
.form__mandate{margin-top:22px;padding:12px 16px;border-left:3px solid var(--yellow);border-radius:6px;background:rgba(247,181,0,.08);font-size:15px;line-height:1.55;color:var(--text)}
.form__mandate + .form__submit{margin-top:18px}
.form__submit{margin-top:24px;width:100%}
@media (min-width:640px){.form__submit{width:auto}}
.form__note{margin-top:18px;padding:14px 18px;border-left:4px solid var(--yellow);border-radius:6px;background:rgba(247,181,0,.12);font-size:16px}
.form__note--error{border-left-color:#E5484D;background:rgba(229,72,77,.12)}
.form__note[hidden]{display:none}

/* ---------- Trenner: eine Fahrbahn quer durch die Seite ---------- */
.divider{position:relative;height:26px;overflow:hidden;background:#1C2027;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.3)}
.divider::after{content:"";position:absolute;left:0;right:0;top:4px;bottom:4px;border-top:1.5px solid rgba(242,242,242,.38);border-bottom:1.5px solid rgba(242,242,242,.38)}
.divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:repeating-linear-gradient(90deg,rgba(242,242,242,.9) 0 34px,transparent 34px 60px)}
.divider i{position:absolute;z-index:1;top:50%;left:calc(100% - 44px);width:12px;height:12px;margin-top:-6px;border-radius:2px;background:var(--yellow);transform:rotate(45deg);box-shadow:0 0 0 2px #111,0 0 16px rgba(247,181,0,.55)}
:root[data-theme="light"] .divider{background:#3A414B}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .divider{background:#3A414B}}
@media (max-width:759px){.divider{height:22px}.divider::after{top:3px;bottom:3px}}
@media (prefers-reduced-motion:no-preference){
  .js .divider::before{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.6,0,.2,1)}
  .js .divider.is-in::before{clip-path:inset(0 0 0 0)}
  .js .divider i{opacity:0}
  .js .divider.is-in i{animation:cruise 3s cubic-bezier(.5,0,.25,1) .15s both}
  @keyframes cruise{0%{left:-16px;opacity:0}12%{opacity:1}84%{opacity:1}100%{left:calc(100% + 16px);opacity:0}}
}

/* ---------- Fußbereich (immer dunkel) ---------- */
.site-footer{padding:clamp(48px,6vw,72px) 0 48px;background:#1F242B}
.footer__grid{display:grid;gap:40px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.footer__grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.footer__brand .brand{margin-right:0}
.footer__brand p,.footer__brand address{margin-top:16px;font-style:normal;font-size:16px;color:var(--text-2)}
.footer__brand a{text-decoration:none}
.footer__brand a:hover{color:var(--accent-text)}
.footer__nav h2{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin-bottom:8px}
.footer__nav ul{list-style:none;margin:0;padding:0}
.footer__nav a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none;font-size:16px}
.footer__nav a:hover{color:var(--accent-text)}
.footer__base{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px 24px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--text-2)}
.footer__base nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 18px;grid-column:3}
.footer__base a{text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.footer__base a:hover{color:var(--accent-text)}
.footer__base .credit{grid-column:2;justify-self:center;gap:6px;white-space:nowrap}
.credit:hover{color:var(--text)}
@media (max-width:760px){.footer__base{grid-template-columns:1fr}.footer__base nav{grid-column:1;justify-content:flex-start}.footer__base .credit{grid-column:1;grid-row:3;margin-top:8px}}
.credit__heart{color:#E5484D;flex:none}
.credit__name{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.credit:hover .credit__name{text-decoration-color:currentColor}
.credit__out{flex:none;margin-left:2px;opacity:.75}

/* ---------- Rechtstexte, Danke, 404 ---------- */
.legal{padding-block:0 clamp(40px,5vw,72px)}
.legal .prose > :first-child{margin-top:0}
.legal .prose h2{font-size:clamp(26px,2.6vw,34px)}
.legal .prose h2::before{display:none}
.embed{margin-top:clamp(28px,4vw,44px)}
.embed__gate{max-width:46em;padding:clamp(24px,4vw,40px);border-radius:18px;background:var(--surface);box-shadow:var(--card-shadow)}
.embed__gate p{color:var(--prose)}
.embed__load{margin-top:20px}
.embed__alt{margin-top:16px;font-size:15px}
.embed__frame{display:block;width:100%;height:min(1500px,calc(100vh - 120px));min-height:720px;border:0;border-radius:18px;background:#fff;box-shadow:var(--card-shadow)}
.notice{max-width:46em;padding:clamp(28px,4vw,44px);border-radius:18px;background:var(--surface);box-shadow:var(--card-shadow)}
.notice p + p{margin-top:14px}
.notice .hero__actions{margin-top:26px}

/* ---------- Einblenden ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__kicker > span,.hero__main,.hero__lead,.hero__actions,.trust,.page-hero .kicker,.page-title,.page-lead,.page-hero .hero__actions,.byline,.crumbs{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .route__item.reveal::after{transform:none}
  .sign,.sign__arrow,.btn,.pill,.faq__icon,body{transition:none}
  .sign:hover,.btn--primary:hover{transform:none}
}
@media (max-width:600px){.h2,.sign__title{hyphens:auto;-webkit-hyphens:auto}}

@media print{
  .site-header,.lane,.scene,.scene-toggle,.divider,.hazard,.form,.toc-side,.toc-mobile,.side-cta,.cta-box,.site-footer nav{display:none !important}
  body{background:#fff;color:#000}
}