@charset "UTF-8";
/* ==========================================================================
   nice Fahrschule Berlin – Design-System
   Aufbau: 1 Schriften · 2 Marken-Werte · 3 Grundlagen · 4 Layout · 5 Typografie
           6 Knöpfe · 7 Kopf · 8 Glas-Schilder · 9 Bühne · 10 Bausteine
           11 Kalender · 12 Formulare · 13 Popup & Einwilligung · 14 Fuß
           15 Bewegung · 16 Druck
   ========================================================================== */

/* --- 1 Schriften ---------------------------------------------------------- */
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/montserrat-latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/montserrat-latin-ext-600-normal.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/montserrat-latin-700-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/montserrat-latin-ext-700-normal.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/montserrat-latin-800-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/montserrat-latin-ext-800-normal.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/inter-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/inter-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/inter-latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/inter-latin-ext-500-normal.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/inter-latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/inter-latin-ext-600-normal.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/inter-latin-700-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/inter-latin-ext-700-normal.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- 2 Marken-Werte ------------------------------------------------------- */
:root{
  /* Farben aus dem Farbumfeld der Fahrschule */
  --blau:        #4EAFE1;
  --blau-tief:   #2E86C8;
  --blau-dunkel: #1F6BA8;
  --blau-hell:   #8ED3F5;
  --eis:         #C0D4DD;

  --nacht:   #0D1116;
  --nacht-2: #12171D;
  --nacht-3: #1A212A;
  --nacht-4: #232C36;

  --text:       #EDF3F7;
  --text-leise: #9AACBA;
  --linie:      rgba(255,255,255,.09);
  --linie-stark:rgba(255,255,255,.16);

  --hell-bg:    #F1F5F8;
  --hell-karte: #FFFFFF;
  --hell-text:  #171C21;
  --hell-leise: #566470;
  --hell-linie: #E2E9EE;

  --warn:  #F5A623;
  --fehler:#D93B3B;
  --ok:    #2E9E69;

  /* Maße */
  --rand:      clamp(1rem, 4vw, 2.5rem);
  --breite:    1280px;
  --breite-eng: 820px;
  --r-s:  10px;
  --r-m:  18px;
  --r-l:  28px;
  --r-xl: 40px;

  --schatten-s: 0 2px 8px rgba(0,0,0,.18);
  --schatten-m: 0 14px 40px rgba(0,0,0,.28);
  --schatten-l: 0 30px 80px rgba(0,0,0,.42);
  --glow:       0 8px 30px rgba(78,175,225,.45);

  --font-display: Montserrat, 'Segoe UI', system-ui, sans-serif;
  --font-text:    Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;

  --kopf-hoehe: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- 3 Grundlagen --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-hoehe) + 16px)}
body{
  margin:0;
  background:var(--nacht);
  color:var(--text);
  font-family:var(--font-text);
  font-size:clamp(1rem,.97rem + .16vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* Waagerechtes Überstehen abfangen – aber NICHT mit hidden.
     overflow-x:hidden macht den Body zum Scrollbereich (overflow-y wird
     dadurch zu auto), und das setzt position:sticky im Kopf ausser Kraft:
     auf iOS-Safari und manchen Android-Browsern scrollt die Kopfleiste
     dann einfach weg. Das mobile Menue haengt absolut am Kopf und wandert
     mit ihm aus dem Bild – es blitzt beim Oeffnen auf und ist weg.
     clip schneidet genauso ab, erzeugt aber keinen Scrollbereich.
     Die hidden-Zeile davor bleibt als Rueckfall fuer Safari vor 16. */
  overflow-x:hidden;
  overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--blau-hell);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#fff}
button{font:inherit;color:inherit}
ul,ol{padding-left:1.15em}
table{border-collapse:collapse}
hr{border:0;border-top:1px solid var(--linie);margin:2.5rem 0}

:focus-visible{
  outline:3px solid var(--blau-hell);
  outline-offset:3px;
  border-radius:4px;
}
::selection{background:var(--blau);color:#062033}

.visuell-versteckt{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:1000;
  background:var(--blau);color:#04202f;font-weight:700;
  padding:.7rem 1.2rem;border-radius:0 0 var(--r-s) var(--r-s);
  transition:top .18s var(--ease)
}
.skip-link:focus{top:0}

/* --- 4 Layout ------------------------------------------------------------- */
.wrap{width:min(100% - var(--rand)*2,var(--breite));margin-inline:auto}
.wrap--eng{width:min(100% - var(--rand)*2,var(--breite-eng))}

/* Vollflächige Bänder: die Fläche läuft über die gesamte Breite, der Inhalt
   sitzt mittig in fester Maximalbreite. Genau der Aufbau aus der Vorlage. */
.abschnitt{position:relative;padding:clamp(3.5rem,7vw,6.5rem) 0;z-index:1;
  overflow:hidden}   /* hält Lichtkreise und Bildkanten im Rahmen */

/* Helles Band – abgerundet, damit es wie eine aufgelegte Platte wirkt und
   die dunkle Grundfläche an den Ecken durchscheint */
.abschnitt--hell{background:var(--hell-bg);color:var(--hell-text)}
.abschnitt--weiss{background:var(--hell-karte);color:var(--hell-text)}
.abschnitt--hell,
.abschnitt--weiss,
.abschnitt--bild-hell,
.aufrufband{border-radius:var(--r-xl)}
@media(max-width:719px){
  .abschnitt--hell,
  .abschnitt--weiss,
  .abschnitt--bild-hell,
  .aufrufband{border-radius:var(--r-l)}
}

/* Zwei abgerundete Bänder dürfen niemals gestapelt erscheinen.
   Stoßen sie aneinander, wird die gemeinsame Naht flach und beide wirken
   wie eine zusammenhängende Fläche. Gerundet bleiben nur die Außenkanten.
   Das greift automatisch, auch wenn Inhaltsblöcke je nach Seite wegfallen. */
:is(.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell,.aufrufband)
+ :is(.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell,.aufrufband){
  border-top-left-radius:0;
  border-top-right-radius:0
}
:is(.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell,.aufrufband):has(
  + :is(.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell,.aufrufband)
){
  border-bottom-left-radius:0;
  border-bottom-right-radius:0
}
.abschnitt--hell a,.abschnitt--weiss a{color:var(--blau-dunkel)}
.abschnitt--hell a:hover,.abschnitt--weiss a:hover{color:var(--blau-tief)}
.abschnitt--hell h2,.abschnitt--hell h3,
.abschnitt--weiss h2,.abschnitt--weiss h3{color:var(--hell-text)}
.abschnitt--hell .leise,.abschnitt--weiss .leise{color:var(--hell-leise)}
.abschnitt--hell .kopfzeile p,.abschnitt--weiss .kopfzeile p{color:var(--hell-leise)}

/* Etwas abgesetztes dunkles Band */
.abschnitt--tief{background:var(--nacht-2)}

/* Band mit Bildhintergrund – Bild liegt hinten, ein Verlauf hält den Text lesbar */
.abschnitt--bild{color:var(--text);isolation:isolate}
.abschnitt__bild{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  opacity:var(--bild-deck,.34)
}
.abschnitt--bild::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,var(--nacht) 0%,rgba(13,17,22,.55) 22%,rgba(13,17,22,.55) 78%,var(--nacht) 100%),
    linear-gradient(90deg,rgba(13,17,22,.92) 0%,rgba(13,17,22,.35) 55%,rgba(13,17,22,.75) 100%)
}
/* Bildband mit hellem Grundton */
.abschnitt--bild-hell{color:var(--hell-text);background:var(--hell-bg)}
.abschnitt--bild-hell::after{
  background:
    linear-gradient(180deg,var(--hell-bg) 0%,rgba(241,245,248,.78) 25%,rgba(241,245,248,.78) 75%,var(--hell-bg) 100%),
    linear-gradient(90deg,rgba(241,245,248,.95) 0%,rgba(241,245,248,.55) 60%,rgba(241,245,248,.9) 100%)
}
.abschnitt--bild-hell .abschnitt__bild{opacity:var(--bild-deck,.5)}

/* Die abgerundete Platte bleibt für einzelne hervorgehobene Blöcke erhalten */
.platte{
  background:var(--hell-bg);color:var(--hell-text);
  border-radius:var(--r-xl);
  padding:clamp(2.5rem,5vw,5rem) clamp(1.25rem,4vw,3.5rem);
  margin:clamp(1rem,3vw,2.5rem) 0;
  position:relative;overflow:hidden;z-index:1
}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) a{color:var(--blau-dunkel)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) h2,:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) h3{color:var(--hell-text)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .leise{color:var(--hell-leise)}

.raster{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.raster--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.raster--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.raster--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

.stapel>*+*{margin-top:1rem}
.mittig{text-align:center}
.mittig .kopfzeile{margin-inline:auto}

/* --- 5 Typografie --------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.08;
  letter-spacing:-.022em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,4.6rem)}
h2{font-size:clamp(1.85rem,1.2rem + 2.6vw,3.1rem)}
h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);font-weight:700}
h4{font-size:1.05rem;font-weight:700;letter-spacing:0}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}

.kopfzeile{max-width:60ch;margin-bottom:clamp(2rem,4vw,3rem)}
.kopfzeile p{color:var(--text-leise);font-size:1.08em}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .kopfzeile p,.abschnitt--hell .kopfzeile p{color:var(--hell-leise)}

.augenbraue{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-size:.76rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--blau);margin-bottom:1rem
}
.augenbraue::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px}

.leise{color:var(--text-leise)}
.gross{font-size:1.15em}
.blau{color:var(--blau)}
.gewicht{font-weight:700}

/* Riesige Umriss-Schrift im Hintergrund – das Erkennungszeichen der Vorlage */
.wortmarke{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(5rem,17vw,15rem);line-height:.8;
  letter-spacing:-.03em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);
  pointer-events:none;user-select:none;z-index:0
}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .wortmarke{-webkit-text-stroke-color:rgba(23,28,33,.07)}

/* --- 6 Knöpfe ------------------------------------------------------------- */
.btn{
  --btn-bg:var(--blau);--btn-fg:#052232;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;border:0;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  letter-spacing:.01em;text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
  text-align:center
}
.btn:hover{transform:translateY(-2px);color:var(--btn-fg)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.1em;height:1.1em;flex:none}

.btn--primary{
  background:linear-gradient(135deg,var(--blau) 0%,var(--blau-tief) 100%);
  color:#04202f;box-shadow:var(--glow)
}
.btn--primary:hover{box-shadow:0 12px 40px rgba(78,175,225,.62);color:#04202f}

.btn--geist{
  background:transparent;color:var(--text);
  box-shadow:inset 0 0 0 1.5px var(--linie-stark)
}
.btn--geist:hover{box-shadow:inset 0 0 0 1.5px var(--blau);color:#fff}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .btn--geist,.abschnitt--hell .btn--geist{
  color:var(--hell-text);box-shadow:inset 0 0 0 1.5px #c9d5dd
}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .btn--geist:hover{box-shadow:inset 0 0 0 1.5px var(--blau-tief);color:var(--blau-dunkel)}

.btn--leise{background:transparent;color:var(--text-leise);padding-inline:1rem}
.btn--leise:hover{color:var(--text)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .btn--leise{color:var(--hell-leise)}

.btn--klein{padding:.65rem 1.15rem;font-size:.86rem}
.btn--gross{padding:1.15rem 2.2rem;font-size:1.05rem}
.btn--voll{width:100%}

.linkbtn{
  background:none;border:0;padding:0;cursor:pointer;
  color:inherit;text-decoration:underline;text-underline-offset:3px;font:inherit
}

.knopfreihe{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* --- 7 Kopf --------------------------------------------------------------- */
.banner{
  background:linear-gradient(90deg,var(--blau-dunkel),var(--blau-tief));
  color:#fff;font-size:.9rem;position:relative;z-index:60
}
.banner__in{display:flex;align-items:center;gap:.7rem;padding:.6rem 0;flex-wrap:wrap}
.banner__in p{margin:0}
.banner__in a{color:#fff;font-weight:600}
.banner__dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:none;
  box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:puls 2.4s infinite}
@keyframes puls{70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

.kopf{
  position:sticky;top:0;z-index:50;
  background:rgba(13,17,22,.72);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--linie);
  transition:background .25s var(--ease)
}
.kopf.ist-gescrollt{background:rgba(13,17,22,.94)}
.kopf__in{display:flex;align-items:center;gap:1rem;min-height:var(--kopf-hoehe)}

.marke{flex:none;display:flex;align-items:center;text-decoration:none}
.marke img{width:132px;height:auto}

.nav{margin-left:auto;display:flex;align-items:center;gap:1.25rem}
.nav__list{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.6rem .8rem;border-radius:var(--r-s);
  background:none;border:0;cursor:pointer;
  color:var(--text);text-decoration:none;
  font-size:.92rem;font-weight:500;white-space:nowrap;
  transition:color .16s var(--ease),background .16s var(--ease)
}
.nav__link:hover,.nav__item.ist-offen>.nav__link{color:var(--blau);background:rgba(255,255,255,.05)}
.caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
.nav__item.ist-offen .caret{transform:rotate(-135deg) translateY(-2px)}

.nav__panel{
  position:absolute;top:calc(100% + .5rem);left:0;min-width:330px;
  background:var(--nacht-3);
  border:1px solid var(--linie);border-radius:var(--r-m);
  box-shadow:var(--schatten-l);
  padding:.6rem;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s
}
.nav__panel--small{min-width:220px}
.nav__item.ist-offen .nav__panel{opacity:1;visibility:visible;transform:translateY(0)}
.nav__panel ul{list-style:none;margin:0;padding:0}
.nav__panel a{
  display:flex;flex-direction:column;gap:.1rem;
  padding:.65rem .8rem;border-radius:var(--r-s);
  color:var(--text);text-decoration:none;position:relative
}
.nav__panel a:hover{background:rgba(78,175,225,.13)}
.nav__panel strong{font-family:var(--font-display);font-weight:700;font-size:.94rem}
.nav__panel span{font-size:.8rem;color:var(--text-leise);line-height:1.35}
.tag{
  position:absolute;top:.6rem;right:.8rem;
  font-family:var(--font-display);font-size:.62rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;font-style:normal;padding:.15rem .45rem;border-radius:99px
}
.tag--neu{background:var(--warn);color:#241700}

.nav__ende{display:flex;align-items:center;gap:.9rem}
.sprachen{display:flex;gap:.1rem;background:rgba(255,255,255,.05);border-radius:99px;padding:.2rem}
.sprachen a{
  padding:.3rem .55rem;border-radius:99px;font-size:.74rem;font-weight:700;
  letter-spacing:.05em;color:var(--text-leise);text-decoration:none
}
.sprachen a:hover{color:var(--text)}
.sprachen a.ist-aktiv{background:var(--blau);color:#052232}

.burger{
  display:none;margin-left:auto;width:44px;height:44px;
  background:none;border:0;cursor:pointer;padding:10px;
  flex-direction:column;justify-content:space-between
}
.burger span{display:block;height:2px;background:var(--text);border-radius:2px;
  transition:transform .22s var(--ease),opacity .18s var(--ease)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

/* --- 8 Glas-Schilder ------------------------------------------------------ */
.schilder{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  perspective:900px;perspective-origin:50% 40%
}
.schilder__defs{position:absolute;width:0;height:0}

.schild{
  position:absolute;width:var(--gr,190px);
  transform-style:preserve-3d;
  transform:
    rotateX(var(--kx,0deg))
    rotateY(var(--ky,0deg))
    rotateZ(var(--kz,0deg))
    translateZ(var(--tz,0px));
  opacity:var(--deck,.72);
  will-change:transform
}
.schild__koerper{position:relative;transform-style:preserve-3d}
.schild__koerper svg{width:100%;height:auto;overflow:visible;display:block}

/* Die Scheibe selbst */
.schild__scheibe{
  position:relative;z-index:2;
  filter:
    drop-shadow(30px 38px 26px rgba(0,0,0,.5))
    drop-shadow(0 0 46px rgba(78,175,225,.14))
}
.schild__glas > *{fill:url(#glas);stroke:url(#kante);stroke-width:2.2;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.schild__reflex > *{fill:url(#reflex);stroke:none}

/* Materialstärke: zwei versetzte Kopien hinter der Scheibe */
.schild__tiefe{position:absolute;inset:0;z-index:1}
.schild__tiefe > *{stroke:none}
.schild__tiefe--1 > *{fill:rgba(255,255,255,.075)}
.schild__tiefe--2 > *{fill:rgba(255,255,255,.04)}
.schild__tiefe--1{transform:translate3d(2.5px,3px,-5px)}
.schild__tiefe--2{transform:translate3d(5px,6px,-10px)}

.schild__mast{
  position:absolute;left:50%;top:94%;width:5px;height:58%;
  transform:translateX(-50%) translateZ(-6px);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));
  border-radius:3px
}

/* Aufstellung: jedes Schild eigene Neigung, Tiefe und Deckkraft.
   Bewusst zurückhaltend – die Schilder sind Atmosphäre, nicht Inhalt. */
.schild--a{--gr:215px;--kx:14deg;--ky:-28deg;--kz:-8deg;--tz:-60px;--deck:.42;top:6%;  left:-4%}
.schild--b{--gr:145px;--kx:-11deg;--ky:26deg;--kz:6deg;  --tz:-140px;--deck:.26;top:30%; right:3%;left:auto}
.schild--c{--gr:175px;--kx:18deg;--ky:20deg;--kz:-13deg; --tz:-40px;--deck:.4; top:62%; left:5%}
.schild--d{--gr:120px;--kx:-16deg;--ky:-24deg;--kz:14deg;--tz:-190px;--deck:.22;top:12%; right:14%;left:auto}
.schild--e{--gr:200px;--kx:12deg;--ky:-32deg;--kz:5deg;  --tz:-30px;--deck:.38;top:80%; right:-5%;left:auto}
.schild--f{--gr:110px;--kx:-7deg;--ky:22deg;--kz:-4deg;  --tz:-220px;--deck:.17;top:50%; left:46%}
.schild--g{--gr:135px;--kx:20deg;--ky:16deg;--kz:-10deg; --tz:-160px;--deck:.23;top:88%; left:30%}
.schild--h{--gr:100px;--kx:-13deg;--ky:-19deg;--kz:9deg; --tz:-240px;--deck:.15;top:40%; left:22%}

/* Über hellen Platten eine eigene Gruppe mit kräftigerem Schlagschatten */
.schilder-lokal{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  perspective:900px;z-index:0}
.schilder-lokal .schild__scheibe{
  filter:drop-shadow(26px 32px 20px rgba(20,40,60,.24))
}
.schilder-lokal .schild__glas > *{
  fill:rgba(46,134,200,.05);stroke:rgba(31,107,168,.4)
}
.schilder-lokal .schild__tiefe--1 > *{fill:rgba(31,107,168,.09)}
.schilder-lokal .schild__tiefe--2 > *{fill:rgba(31,107,168,.05)}
.schilder-lokal .schild__mast{
  background:linear-gradient(180deg,rgba(31,107,168,.2),rgba(31,107,168,0))
}
.schild--lokal-1{--gr:180px;--kx:15deg;--ky:-24deg;--kz:-10deg;--deck:.85;top:4%;right:2%;left:auto}
.schild--lokal-2{--gr:120px;--kx:-14deg;--ky:20deg;--kz:8deg;--deck:.55;bottom:6%;left:3%}
@media(max-width:900px){.schilder-lokal{display:none}}

/* Dezenter blauer Lichtkreis – das Erkennungszeichen aus der Bühne,
   an anderen Stellen kleiner und zurückhaltender wiederholt */
.kreis{
  position:absolute;z-index:0;pointer-events:none;border-radius:50%;
  width:var(--kgr,420px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(78,175,225,var(--kstaerke,.16)) 0%,rgba(78,175,225,0) 68%)
}
.kreis--links  {left:calc(var(--kgr,420px) * -.45);top:var(--koben,10%)}
.kreis--rechts {right:calc(var(--kgr,420px) * -.45);top:var(--koben,55%)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .kreis{background:radial-gradient(circle,rgba(46,134,200,var(--kstaerke,.1)) 0%,rgba(46,134,200,0) 68%)}

/* --- 9 Bühne -------------------------------------------------------------- */
/* Das Fahrzeugbild liegt vollflächig hinter dem Text und wird nach links
   hin abgedunkelt – so wirkt es nicht aufgeklebt, sondern gehört zur Fläche. */
.buehne{
  position:relative;z-index:1;isolation:isolate;
  display:grid;align-items:center;
  min-height:clamp(520px,74vh,780px);
  padding:clamp(3rem,7vw,5rem) 0;
  overflow:hidden
}
.buehne__hg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:74% 52%
}
.buehne::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(11,14,18,.97) 0%,
      rgba(11,14,18,.90) 30%,
      rgba(11,14,18,.42) 56%,
      rgba(11,14,18,.15) 74%,
      rgba(11,14,18,.62) 100%),
    linear-gradient(180deg,
      rgba(11,14,18,.55) 0%,
      rgba(11,14,18,0) 28%,
      rgba(11,14,18,0) 62%,
      rgba(11,14,18,.85) 100%)
}
.buehne__in{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){
  .buehne__in{grid-template-columns:minmax(0,.62fr) minmax(0,.38fr)}
}
@media(max-width:959px){
  .buehne{min-height:auto;padding-block:clamp(2.5rem,8vw,4rem)}
  .buehne__hg{object-position:66% 58%}
  .buehne::after{
    background:linear-gradient(180deg,
      rgba(11,14,18,.92) 0%,
      rgba(11,14,18,.78) 45%,
      rgba(11,14,18,.55) 70%,
      rgba(11,14,18,.9) 100%)
  }
}
.buehne h1{margin-bottom:.35em}
.buehne h1 .zeile2{display:block;color:var(--blau)}
.buehne__text{font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);color:var(--text-leise);max-width:52ch}
.buehne__knoepfe{margin-top:1.9rem}

.buehne__marken{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.2rem}
.klassenchip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:58px;padding:.5rem .85rem;border-radius:var(--r-s);
  background:rgba(255,255,255,.06);border:1px solid var(--linie-stark);
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  color:var(--blau);text-decoration:none;position:relative;
  transition:background .16s var(--ease),transform .16s var(--ease)
}
.klassenchip:hover{background:rgba(78,175,225,.16);transform:translateY(-2px);color:var(--blau-hell)}
.klassenchip--neu{padding-right:1.6rem}
.klassenchip__tag{
  position:absolute;top:-7px;right:-6px;
  font-family:var(--font-display);font-size:.56rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--warn);color:#241700;padding:.1rem .35rem;border-radius:99px
}

.buehne__bild{position:relative}
.buehne__bild img{width:100%;filter:drop-shadow(0 40px 60px rgba(0,0,0,.55))}
.buehne__boden{
  position:absolute;left:6%;right:6%;bottom:4%;height:38px;
  background:radial-gradient(ellipse at center,rgba(78,175,225,.42) 0%,rgba(78,175,225,0) 70%);
  filter:blur(14px);z-index:-1
}

.beweis{
  display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;margin-top:2rem;
  font-size:.9rem;color:var(--text-leise)
}
.beweis span{display:inline-flex;align-items:center;gap:.45rem}
.beweis svg{width:1.05em;height:1.05em;color:var(--blau);flex:none}

/* Vertrauensleiste direkt unter der Bühne */
.streifen{position:relative;z-index:1;border-block:1px solid var(--linie);
  background:rgba(255,255,255,.02)}
.streifen__liste{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1px;background:var(--linie);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))
}
.streifen__liste li{background:var(--nacht);padding:1.4rem clamp(1rem,2vw,1.6rem)}
.streifen__liste strong{display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1rem,.95rem + .35vw,1.25rem);color:var(--blau);letter-spacing:-.01em}
.streifen__liste span{display:block;font-size:.86rem;color:var(--text-leise);
  margin-top:.25rem;line-height:1.4}

/* Hervorgehobenes Band – für einen einzelnen wichtigen Hinweis */
.band{
  position:relative;overflow:hidden;
  display:grid;gap:2rem;align-items:center;
  grid-template-columns:minmax(0,1fr);
  background:linear-gradient(135deg,var(--nacht-3) 0%,var(--nacht-2) 100%);
  border:1px solid var(--linie-stark);border-radius:var(--r-xl);
  padding:clamp(1.8rem,4vw,3rem)
}
@media(min-width:820px){.band{grid-template-columns:1fr auto}}
.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 88% 50%,rgba(78,175,225,.2) 0%,rgba(78,175,225,0) 55%)
}
.band__text{position:relative;z-index:1;max-width:62ch}
.band__text p{color:var(--text-leise)}
.band__symbol{position:relative;z-index:1;color:var(--blau);opacity:.5}
.band__symbol svg{width:clamp(90px,14vw,150px);height:auto}

/* Sprachen */
.sprachblock{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.sprachblock{grid-template-columns:1.1fr .9fr}}
.sprachkarten{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.sprachkarten li{
  display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:center;
  padding:1rem 1.2rem;border-radius:var(--r-m);
  background:var(--hell-karte);border:1px solid var(--hell-linie)
}
.sprachkarte__code{
  grid-row:span 2;display:grid;place-items:center;
  width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg,rgba(78,175,225,.2),rgba(78,175,225,.06));
  font-family:var(--font-display);font-weight:800;font-size:.9rem;color:var(--blau-dunkel)
}
.sprachkarten strong{font-family:var(--font-display);font-size:1rem;align-self:end}
.sprachkarten li > span:last-child{font-size:.86rem;color:var(--hell-leise);align-self:start}

/* Aufzählung mit Haken */
.hakenliste{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.7rem}
.hakenliste li{position:relative;padding-left:2rem;font-size:.97rem}
.hakenliste li::before{
  content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;border-radius:50%;
  background:rgba(78,175,225,.18);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234EAFE1' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  background-size:13px;background-repeat:no-repeat;background-position:center
}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .hakenliste li::before{background-color:rgba(46,134,200,.14);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231F6BA8' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")}

.adressblock{margin-top:1.5rem;padding-left:1rem;border-left:3px solid var(--blau);
  font-size:1.02rem;line-height:1.55}
.rundbild{border-radius:var(--r-l);width:100%}
.ist-gespiegelt{transform:scaleX(-1)}
.hakenliste--breit{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:clamp(1.5rem,3vw,2.5rem)}

/* Text auf einem Bildband: nimmt nur die halbe Breite, damit das Bild wirkt */
.halbtext{max-width:min(100%,620px)}
.halbtext p{color:var(--text-leise)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .halbtext p{color:var(--hell-leise)}

/* Zwei Spalten: Text und Bild nebeneinander */
.zweispalt{display:grid;gap:clamp(1.8rem,4vw,3.5rem);align-items:center;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){
  .zweispalt{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .zweispalt--bild-links > :first-child{order:1}
  .zweispalt--bild-links > :last-child{order:2}
}

.bildrahmen{margin:0;position:relative;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--schatten-m)}
.bildrahmen img{width:100%;display:block}
.bildrahmen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px var(--linie-stark)
}

/* Fahrzeugkarte im Fuhrpark.
   Beide Karten zeigen Studioaufnahmen im gleichen Format und richten sich
   über die volle Höhe aus, damit die Bildkanten auf einer Linie liegen. */
.fahrzeugkarte{
  margin:0;display:flex;flex-direction:column;height:100%;
  background:var(--nacht-2);border:1px solid var(--linie);
  border-radius:var(--r-l);overflow:hidden
}
.fahrzeugkarte picture{display:block;line-height:0}
.fahrzeugkarte img{
  width:100%;display:block;
  aspect-ratio:16/9;object-fit:cover;object-position:center 55%
}
.fahrzeugkarte figcaption{
  margin-top:auto;                        /* schiebt den Text nach unten */
  padding:1.2rem clamp(1.2rem,3vw,1.8rem) 1.6rem;
  border-top:1px solid var(--linie)
}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .fahrzeugkarte{
  background:var(--hell-karte);border-color:var(--hell-linie);box-shadow:var(--schatten-s)
}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .fahrzeugkarte figcaption{
  border-top-color:var(--hell-linie)
}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .fahrzeugkarte span{
  color:var(--hell-leise)
}
.fahrzeugkarte strong{display:block;font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;margin-bottom:.25rem}
.fahrzeugkarte span{font-size:.92rem;color:var(--text-leise)}

/* Glasige Kartenvariante für Bildbänder */
.karte--glas{background:rgba(18,23,29,.68);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border-color:var(--linie-stark)}
.zahl--glas{background:rgba(18,23,29,.68);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border-color:var(--linie-stark)}

/* Abschließendes Aufrufband über die volle Breite */
.aufrufband{
  background:linear-gradient(120deg,var(--blau-dunkel) 0%,var(--blau-tief) 52%,var(--blau) 100%);
  color:#fff;overflow:hidden
}
.aufrufband::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 82% 22%,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 45%)
}
.aufrufband h2{color:#fff}
.aufrufband p{color:rgba(255,255,255,.92);max-width:58ch;margin-inline:auto;font-size:1.08em}
.aufrufband .btn--primary{background:#fff;color:var(--blau-dunkel);box-shadow:0 10px 34px rgba(0,0,0,.25)}
.aufrufband .btn--primary:hover{color:var(--blau-dunkel);box-shadow:0 14px 44px rgba(0,0,0,.34)}
.aufrufband .btn--geist{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.aufrufband .btn--geist:hover{box-shadow:inset 0 0 0 1.5px #fff;color:#fff}

/* --- 10 Bausteine --------------------------------------------------------- */
.karte{
  background:var(--nacht-2);border:1px solid var(--linie);
  border-radius:var(--r-l);padding:clamp(1.35rem,2.5vw,2rem);
  position:relative;overflow:hidden;
  transition:border-color .2s var(--ease),transform .2s var(--ease)
}
.karte:hover{border-color:rgba(78,175,225,.4);transform:translateY(-3px)}
.karte h3{margin-bottom:.5rem}
.karte p{color:var(--text-leise);font-size:.97rem}
.karte__mehr{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;
  font-family:var(--font-display);font-weight:700;font-size:.85rem;
  color:var(--blau);text-decoration:none
}
.karte__mehr::after{content:"→";transition:transform .18s var(--ease)}
.karte:hover .karte__mehr::after{transform:translateX(4px)}

:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .karte{background:var(--hell-karte);border-color:var(--hell-linie)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .karte p{color:var(--hell-leise)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .karte:hover{border-color:rgba(46,134,200,.45);box-shadow:var(--schatten-s)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .karte__mehr{color:var(--blau-dunkel)}

.karte--klasse{display:flex;flex-direction:column}
.karte__abzeichen{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:var(--r-m);margin-bottom:1.1rem;
  background:linear-gradient(135deg,rgba(78,175,225,.22),rgba(78,175,225,.06));
  border:1px solid rgba(78,175,225,.3);
  font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:var(--blau)
}
.karte--klasse p{flex:1}

.symbol{
  width:52px;height:52px;border-radius:var(--r-m);margin-bottom:1rem;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(78,175,225,.2),rgba(78,175,225,.05));
  border:1px solid rgba(78,175,225,.28);color:var(--blau)
}
.symbol svg{width:26px;height:26px}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .symbol{background:linear-gradient(135deg,rgba(46,134,200,.14),rgba(46,134,200,.04));
  border-color:rgba(46,134,200,.22);color:var(--blau-dunkel)}

/* Kennzahlen */
.zahlen{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin-top:clamp(2rem,4vw,3rem)}
.zahl{padding:1.4rem;border-radius:var(--r-l);background:var(--nacht-2);
  border:1px solid var(--linie);text-align:center}
.zahl__wert{font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,1.4rem + 2vw,2.9rem);line-height:1;color:var(--blau);
  display:block;margin-bottom:.35rem}
.zahl__text{font-size:.88rem;color:var(--text-leise);line-height:1.4}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .zahl{background:var(--hell-karte);border-color:var(--hell-linie)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .zahl__wert{color:var(--blau-dunkel)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .zahl__text{color:var(--hell-leise)}

/* Ablauf-Zeitstrahl */
.schritte{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:s}
.schritt{
  position:relative;padding:1.7rem 1.4rem 1.4rem;border-radius:var(--r-l);
  background:var(--nacht-2);border:1px solid var(--linie);counter-increment:s
}
.schritt::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;top:-.55rem;left:1.4rem;
  font-family:var(--font-display);font-weight:800;font-size:.8rem;
  color:#052232;background:var(--blau);padding:.2rem .55rem;border-radius:99px
}
.schritt h3{font-size:1.08rem;margin-bottom:.4rem}
.schritt p{font-size:.93rem;color:var(--text-leise);margin:0}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .schritt{background:var(--hell-karte);border-color:var(--hell-linie)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .schritt p{color:var(--hell-leise)}

/* Aufklapper */
.faq{border-top:1px solid var(--linie)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .faq{border-color:var(--hell-linie)}
.faq__punkt{border-bottom:1px solid var(--linie)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .faq__punkt{border-color:var(--hell-linie)}
.faq__frage{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.25rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-weight:700;font-size:1.03rem;color:inherit
}
.faq__frage:hover{color:var(--blau)}
.faq__zeichen{flex:none;width:24px;height:24px;position:relative;margin-top:.15rem}
.faq__zeichen::before,.faq__zeichen::after{
  content:"";position:absolute;background:currentColor;border-radius:2px;
  left:50%;top:50%;transition:transform .22s var(--ease)
}
.faq__zeichen::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.faq__zeichen::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.faq__frage[aria-expanded=true] .faq__zeichen::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__antwort{overflow:hidden;height:0;transition:height .28s var(--ease)}
.faq__antwort>div{padding-bottom:1.35rem;color:var(--text-leise);max-width:75ch}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .faq__antwort>div{color:var(--hell-leise)}

/* Bewertungen */
.stimmen{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.stimme{background:var(--nacht-2);border:1px solid var(--linie);
  border-radius:var(--r-l);padding:1.6rem}
.stimme__sterne{color:var(--warn);letter-spacing:.12em;font-size:.95rem;margin-bottom:.7rem}
.stimme p{font-size:.97rem;color:var(--text-leise)}
.stimme__wer{margin-top:1rem;font-weight:600;font-size:.9rem;color:var(--text)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .stimme{background:var(--hell-karte);border-color:var(--hell-linie)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .stimme p{color:var(--hell-leise)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .stimme__wer{color:var(--hell-text)}

/* Fahrzeuge */
.fahrzeug{
  display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  grid-template-columns:minmax(0,1fr)
}
@media(min-width:820px){.fahrzeug{grid-template-columns:1.1fr .9fr}
  .fahrzeug--gedreht .fahrzeug__bild{order:2}}
.fahrzeug__bild img{filter:drop-shadow(0 30px 45px rgba(0,0,0,.5))}

/* Hinweis-Kasten */
.hinweis{
  display:flex;gap:.9rem;padding:1.15rem 1.35rem;border-radius:var(--r-m);
  background:rgba(78,175,225,.10);border:1px solid rgba(78,175,225,.28);
  font-size:.95rem
}
.hinweis svg{width:22px;height:22px;flex:none;color:var(--blau);margin-top:.1rem}
.hinweis p{margin:0}

/* Aufruf-Block */
.aufruf{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--blau-dunkel) 0%,var(--blau-tief) 55%,var(--blau) 100%);
  border-radius:var(--r-xl);padding:clamp(2.2rem,5vw,4rem);
  color:#fff;text-align:center
}
.aufruf h2{color:#fff}
.aufruf p{color:rgba(255,255,255,.9);max-width:56ch;margin-inline:auto}
.aufruf .knopfreihe{justify-content:center;margin-top:1.8rem}
.aufruf .btn--primary{background:#fff;color:var(--blau-dunkel);box-shadow:0 10px 34px rgba(0,0,0,.28)}
.aufruf .btn--primary:hover{color:var(--blau-dunkel);box-shadow:0 14px 44px rgba(0,0,0,.36)}
.aufruf .btn--geist{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.aufruf .btn--geist:hover{box-shadow:inset 0 0 0 1.5px #fff;color:#fff}
.aufruf__auto{position:absolute;right:-8%;bottom:-18%;width:52%;opacity:.22;pointer-events:none}

/* Kopfband der Unterseiten */
.seitenkopf{
  position:relative;z-index:1;isolation:isolate;overflow:hidden;
  padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(3rem,6vw,5rem)
}
.seitenkopf::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(13,17,22,.94) 0%,rgba(13,17,22,.72) 45%,var(--nacht) 100%),
    linear-gradient(90deg,rgba(13,17,22,.9) 0%,rgba(13,17,22,.5) 60%,rgba(13,17,22,.8) 100%)
}
.seitenkopf .abschnitt__bild{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:.4
}
.seitenkopf__text{max-width:min(100%,720px);margin-top:clamp(1.5rem,3vw,2.5rem)}
.seitenkopf__text p{color:var(--text-leise)}
.seitenkopf h1{font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem)}

/* Größerer Hinweiskasten mit Überschrift */
.hinweis--gross{align-items:flex-start;padding:clamp(1.4rem,3vw,2rem);
  border-radius:var(--r-l)}
.hinweis--gross strong{display:block;font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;margin-bottom:.4rem}
.hinweis--gross p{color:var(--text-leise);font-size:.95rem}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .hinweis--gross p{color:var(--hell-leise)}

/* Weg-Darstellung auf der Ablaufseite */
.weg{list-style:none;margin:0;padding:0;counter-reset:w}
.weg__punkt{
  display:grid;gap:1.2rem clamp(1.2rem,3vw,2.5rem);align-items:start;
  grid-template-columns:auto minmax(0,1fr);
  padding-bottom:clamp(2rem,4vw,3rem);position:relative
}
.weg__punkt:not(:last-child)::before{
  content:"";position:absolute;left:calc(clamp(48px,7vw,68px) / 2);top:clamp(48px,7vw,68px);
  bottom:0;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(78,175,225,.5),rgba(78,175,225,.06))
}
.weg__nr{
  width:clamp(48px,7vw,68px);height:clamp(48px,7vw,68px);border-radius:50%;
  display:grid;place-items:center;position:relative;z-index:1;
  background:linear-gradient(135deg,var(--blau),var(--blau-tief));color:#04202f;
  font-family:var(--font-display);font-weight:800;font-size:clamp(1rem,.9rem + .5vw,1.35rem);
  box-shadow:0 6px 20px rgba(78,175,225,.35)
}
.weg__inhalt h2{font-size:clamp(1.25rem,1.1rem + .8vw,1.7rem);margin-bottom:.5rem}
.weg__inhalt > p{color:var(--hell-leise);max-width:70ch}
.weg__inhalt .hakenliste{margin-top:1.1rem}

/* Personenkarte */
.person{
  background:var(--nacht-2);border:1px solid var(--linie);
  border-radius:var(--r-l);overflow:hidden;display:flex;flex-direction:column
}
.person__bild{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.person__text{padding:1.4rem}
.person__text h3{margin-bottom:.15rem}
.person__rolle{color:var(--blau);font-size:.9rem;font-weight:600;margin-bottom:.7rem}
.person p{color:var(--text-leise);font-size:.95rem}
.person__sprachen{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.9rem}

.sprachpille{
  display:inline-block;padding:.16rem .55rem;border-radius:99px;
  background:rgba(78,175,225,.16);color:var(--blau);
  font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.05em
}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .sprachpille{
  background:rgba(46,134,200,.13);color:var(--blau-dunkel)
}
.fahrzeugkarte__klassen{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.9rem}

/* Vergleichstabelle */
.tabellenrahmen{
  overflow-x:auto;border-radius:var(--r-l);
  border:1px solid var(--linie-stark);background:rgba(18,23,29,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  -webkit-overflow-scrolling:touch
}
.vergleich{width:100%;border-collapse:collapse;font-size:.93rem;min-width:640px}
.vergleich th,.vergleich td{padding:.9rem 1.1rem;text-align:left;
  border-bottom:1px solid var(--linie)}
.vergleich thead th{
  font-family:var(--font-display);font-size:.74rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blau);
  background:rgba(255,255,255,.03)
}
.vergleich tbody th{font-family:var(--font-display);font-weight:800;white-space:nowrap}
.vergleich tbody th a{color:var(--text);text-decoration:none}
.vergleich tbody th a:hover{color:var(--blau)}
.vergleich tbody tr:last-child th,.vergleich tbody tr:last-child td{border-bottom:0}
.vergleich tbody tr:hover{background:rgba(255,255,255,.03)}
.vergleich td{color:var(--text-leise)}

/* Sprungnavigation und Gruppen auf der Fragenseite */
.fragenav{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
  margin-bottom:clamp(2rem,4vw,3rem)}
.fragenav a{
  padding:.55rem 1.1rem;border-radius:99px;text-decoration:none;
  background:var(--hell-karte);border:1px solid var(--hell-linie);
  color:var(--hell-text);font-family:var(--font-display);font-weight:600;font-size:.87rem
}
.fragenav a:hover{border-color:var(--blau-tief);color:var(--blau-dunkel)}
.fragengruppe{margin-bottom:clamp(2.5rem,5vw,4rem);scroll-margin-top:calc(var(--kopf-hoehe) + 24px)}
.fragengruppe > h2{font-size:clamp(1.3rem,1.15rem + .8vw,1.8rem);margin-bottom:.8rem}

/* Kiez-Kacheln */
.kiezliste{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.kiezkachel{
  display:block;padding:1.1rem 1.3rem;border-radius:var(--r-m);text-decoration:none;
  background:var(--nacht-2);border:1px solid var(--linie);color:var(--text);
  transition:border-color .16s var(--ease),transform .16s var(--ease)
}
.kiezkachel:hover{border-color:var(--blau);transform:translateY(-2px);color:var(--text)}
.kiezkachel strong{display:block;font-family:var(--font-display);font-size:1rem;margin-bottom:.2rem}
.kiezkachel span{font-size:.87rem;color:var(--text-leise);line-height:1.4}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .kiezkachel{
  background:var(--hell-karte);border-color:var(--hell-linie);color:var(--hell-text)
}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .kiezkachel span{color:var(--hell-leise)}

/* Ratgeber-Liste */
.artikelliste{display:grid;gap:clamp(1rem,2.5vw,1.6rem)}
.artikelkarte{
  display:grid;gap:0;align-items:stretch;
  grid-template-columns:minmax(0,1fr);
  background:var(--hell-karte);border:1px solid var(--hell-linie);
  border-radius:var(--r-l);overflow:hidden;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)
}
@media(min-width:760px){.artikelkarte{grid-template-columns:minmax(0,.4fr) minmax(0,.6fr)}}
.artikelkarte:hover{border-color:rgba(46,134,200,.45);box-shadow:var(--schatten-s)}
.artikelkarte__bild{display:block;line-height:0}
.artikelkarte__bild img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
@media(min-width:760px){.artikelkarte__bild img{aspect-ratio:auto;min-height:100%}}
.artikelkarte__text{padding:clamp(1.3rem,3vw,2rem);display:flex;flex-direction:column}
.artikelkarte__marke{
  display:inline-block;align-self:flex-start;margin-bottom:.7rem;
  padding:.18rem .6rem;border-radius:99px;
  background:rgba(46,134,200,.13);color:var(--blau-dunkel);
  font-family:var(--font-display);font-size:.68rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase
}
.artikelkarte h2{font-size:clamp(1.15rem,1.05rem + .55vw,1.5rem);margin-bottom:.5rem}
.artikelkarte h2 a{color:inherit;text-decoration:none}
.artikelkarte h2 a:hover{color:var(--blau-dunkel)}
.artikelkarte p{color:var(--hell-leise);font-size:.96rem;margin-bottom:1rem}
.artikelkarte__fuss{margin-top:auto;font-size:.82rem;color:var(--hell-leise)}

/* Rechtstexte */
.rechtskopf{padding-block:clamp(1.5rem,3vw,2.5rem) clamp(2rem,4vw,3rem)}
.rechtsnav{
  background:var(--hell-karte);border:1px solid var(--hell-linie);
  border-radius:var(--r-l);padding:1.4rem 1.6rem;margin-bottom:clamp(2rem,4vw,3rem)
}
.rechtsnav__titel{font-family:var(--font-display);font-size:.76rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blau-dunkel);margin-bottom:.7rem}
.rechtsnav ol{margin:0;padding-left:1.3em;display:grid;gap:.35rem;font-size:.94rem}
.rechtsnav a{text-decoration:none}
.rechtsnav a:hover{text-decoration:underline}

.fliesstext{max-width:75ch}
.rechtsblock{margin-bottom:clamp(2rem,4vw,3rem);scroll-margin-top:calc(var(--kopf-hoehe) + 24px)}
.rechtsblock h2{font-size:clamp(1.2rem,1.08rem + .6vw,1.55rem);margin-bottom:.8rem}
.rechtsblock h3{font-size:1.02rem;margin:1.6rem 0 .5rem}
.rechtsblock p{color:var(--hell-leise);margin-bottom:1em}
.rechtsblock ul{color:var(--hell-leise);display:grid;gap:.45rem;margin:0 0 1.2em;padding-left:1.3em}
.rechtsblock li{padding-left:.2rem}

.datenliste{
  display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem;
  margin:0 0 1.4em;padding:1.2rem 1.4rem;
  background:var(--hell-bg);border-radius:var(--r-m);font-size:.95rem
}
.datenliste dt{font-weight:600;color:var(--hell-text)}
.datenliste dd{margin:0;color:var(--hell-leise)}
@media(max-width:559px){
  .datenliste{grid-template-columns:1fr;gap:.15rem}
  .datenliste dd{margin-bottom:.6rem}
}

/* Noch zu ergänzende Angaben deutlich sichtbar machen */
.luecke{
  background:rgba(245,166,35,.24);color:#8A5600;
  padding:.1em .4em;border-radius:5px;font-weight:600;
  box-decoration-break:clone;-webkit-box-decoration-break:clone
}

/* Brotkrumen */
.krumen{font-size:.83rem;color:var(--text-leise);padding:1rem 0 0}
.krumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.krumen li:not(:last-child)::after{content:"›";margin-left:.4rem;opacity:.5}
.krumen a{color:var(--text-leise);text-decoration:none}
.krumen a:hover{color:var(--blau)}

/* --- 11 Kalender ---------------------------------------------------------- */
.plan__kopf{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  justify-content:space-between;margin-bottom:1.5rem}
.plan__steuerung{display:flex;align-items:center;gap:.5rem}
.plan__monat{font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);min-width:11ch;text-align:center}
.pfeil{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--nacht-2);border:1px solid var(--linie);color:var(--text);
  cursor:pointer;text-decoration:none;transition:background .16s var(--ease)
}
.pfeil:hover{background:var(--blau);color:#052232;border-color:var(--blau)}
.pfeil[aria-disabled=true]{opacity:.32;pointer-events:none}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .pfeil{background:var(--hell-karte);border-color:var(--hell-linie);color:var(--hell-text)}

.ansichtswahl{display:flex;background:var(--nacht-2);border:1px solid var(--linie);
  border-radius:99px;padding:.22rem}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .ansichtswahl{background:var(--hell-karte);border-color:var(--hell-linie)}
.ansichtswahl button{
  padding:.45rem 1rem;border:0;background:none;border-radius:99px;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--text-leise)
}
.ansichtswahl button[aria-pressed=true]{background:var(--blau);color:#052232}

.kalender{width:100%;border-collapse:separate;border-spacing:6px;table-layout:fixed}
.kalender th{
  font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-leise);
  padding:.4rem 0 .6rem;text-align:center
}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .kalender th{color:var(--hell-leise)}
.ktag{
  vertical-align:top;height:clamp(118px,13vw,156px);padding:.5rem;
  border-radius:var(--r-m);background:var(--nacht-2);border:1px solid var(--linie);
  position:relative;transition:border-color .16s var(--ease)
}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .ktag{background:var(--hell-karte);border-color:var(--hell-linie)}
.ktag--fremd{opacity:.35}
.ktag--vergangen{opacity:.5}
.ktag--heute{border-color:var(--blau);box-shadow:0 0 0 1px var(--blau)}
.ktag__nr{font-family:var(--font-display);font-weight:700;font-size:.82rem;
  color:var(--text-leise);display:block;margin-bottom:.35rem}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .ktag__nr{color:var(--hell-leise)}
.ktag--heute .ktag__nr{color:var(--blau)}
.ktag--feiertag{background:rgba(217,59,59,.08);border-color:rgba(217,59,59,.28)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .ktag--feiertag{background:#FDF1F1;border-color:#F3D2D2}
.ktag--sperre{background:rgba(255,255,255,.03)}

.stunde{
  display:block;width:100%;text-align:left;border:0;cursor:pointer;
  background:linear-gradient(135deg,rgba(78,175,225,.22),rgba(78,175,225,.10));
  color:var(--text);border-left:3px solid var(--blau);
  border-radius:6px;padding:.4rem .5rem;font-size:.74rem;line-height:1.3;
  margin-bottom:.3rem;text-decoration:none;
  transition:background .16s var(--ease)
}
.stunde:hover{background:rgba(78,175,225,.3);color:var(--text)}
.stunde strong{display:block;font-family:var(--font-display);font-weight:800;
  font-size:.8rem;line-height:1.2;
  /* „Theoriestunde“ ist unteilbar und lief sonst aus der Zelle heraus */
  overflow-wrap:break-word}
.stunde__kurz{display:none}
.stunde__art{
  display:inline-block;margin:.2rem 0 .15rem;
  font-family:var(--font-display);font-weight:700;font-size:.6rem;
  letter-spacing:.07em;text-transform:uppercase;
  padding:.06rem .34rem;border-radius:4px;
  background:rgba(255,255,255,.14);color:inherit
}
.stunde__thema{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  line-clamp:2;overflow:hidden;
  font-size:.7rem;opacity:.85;margin-bottom:.15rem
}
.stunde__zeit{display:block;font-variant-numeric:tabular-nums;font-size:.7rem;opacity:.8}
.stunde--zusatz{border-left-color:var(--warn);
  background:linear-gradient(135deg,rgba(245,166,35,.2),rgba(245,166,35,.08))}
.stunde--sonder{border-left-color:var(--ok);
  background:linear-gradient(135deg,rgba(46,158,105,.2),rgba(46,158,105,.08))}
.stunde--aus{opacity:.55;border-left-color:var(--fehler)}
.stunde--aus strong,.stunde--aus .stunde__thema{text-decoration:line-through}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .stunde{color:var(--hell-text)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .stunde:hover{color:var(--hell-text)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .stunde__art{background:rgba(23,28,33,.1)}

/* Kennzeichnung Grundstoff / Zusatzstoff in Listen und Kopfzeilen */
.artmarke{
  display:inline-block;vertical-align:middle;margin-left:.5rem;
  font-family:var(--font-display);font-style:normal;font-weight:700;
  font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.16rem .5rem;border-radius:99px;white-space:nowrap
}
.artmarke--grund {background:rgba(78,175,225,.18);color:var(--blau)}
.artmarke--zusatz{background:rgba(245,166,35,.18);color:var(--warn)}
.artmarke--sonder{background:rgba(46,158,105,.18);color:#5BC894}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .artmarke--grund {background:rgba(46,134,200,.13);color:var(--blau-dunkel)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .artmarke--zusatz{background:rgba(199,124,7,.14);color:#A96A05}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .artmarke--sonder{background:rgba(46,158,105,.14);color:#1C7C4F}
.ktag__vermerk{font-size:.7rem;color:var(--fehler);line-height:1.25;display:block}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .ktag__vermerk{color:#B03434}

.legende{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.5rem;font-size:.82rem;
  color:var(--text-leise)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .legende{color:var(--hell-leise)}
.legende span{display:inline-flex;align-items:center;gap:.45rem}
.legende i{width:14px;height:14px;border-radius:4px;display:block}
.legende .l-grund{background:var(--blau)}
.legende .l-zusatz{background:var(--warn)}
.legende .l-sonder{background:var(--ok)}
.legende .l-frei{background:var(--fehler)}

/* Listenansicht */
.planliste{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.planzeile{
  display:grid;gap:.35rem 1.2rem;align-items:center;
  grid-template-columns:auto 1fr auto;
  padding:.95rem 1.15rem;border-radius:var(--r-m);
  background:var(--nacht-2);border:1px solid var(--linie)
}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .planzeile{background:var(--hell-karte);border-color:var(--hell-linie)}
.planzeile--aus{opacity:.6}
.planzeile__datum{font-family:var(--font-display);font-weight:800;font-size:.95rem;
  min-width:9.5ch}
.planzeile__tag{display:block;font-size:.72rem;font-weight:600;color:var(--text-leise);
  letter-spacing:.06em;text-transform:uppercase}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .planzeile__tag{color:var(--hell-leise)}
.planzeile__was strong{font-family:var(--font-display);font-size:1rem}
.planzeile__was span{display:block;font-size:.85rem;color:var(--text-leise)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .planzeile__was span{color:var(--hell-leise)}
.planzeile__zeit{font-variant-numeric:tabular-nums;font-weight:600;font-size:.92rem;
  white-space:nowrap}

.naechste{
  display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;
  padding:1.5rem 1.8rem;border-radius:var(--r-l);margin-bottom:2rem;
  background:linear-gradient(135deg,rgba(78,175,225,.18),rgba(78,175,225,.05));
  border:1px solid rgba(78,175,225,.32)
}
.naechste__label{font-family:var(--font-display);font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blau);display:block}
.naechste__wert{font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.2rem,1rem + 1vw,1.7rem);line-height:1.2}
.naechste__zeit{color:var(--text-leise);font-size:.95rem}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .naechste__zeit{color:var(--hell-leise)}

/* --- 12 Formulare --------------------------------------------------------- */
.feld{margin-bottom:1.15rem}
.feld>label,.feldgruppe__titel{
  display:block;font-family:var(--font-display);font-weight:700;font-size:.88rem;
  margin-bottom:.45rem
}
.feld__hilfe{display:block;font-weight:400;font-size:.8rem;color:var(--text-leise);
  margin-top:.2rem;font-family:var(--font-text)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .feld__hilfe{color:var(--hell-leise)}

input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=datetime-local],input[type=number],input[type=password],select,textarea{
  width:100%;padding:.85rem 1rem;border-radius:var(--r-m);
  background:var(--nacht-2);border:1.5px solid var(--linie-stark);
  color:var(--text);font:inherit;font-size:.98rem;
  transition:border-color .16s var(--ease),background .16s var(--ease)
}
input::placeholder,textarea::placeholder{color:#69798a}
input:focus,select:focus,textarea:focus{border-color:var(--blau);outline:none;
  box-shadow:0 0 0 3px rgba(78,175,225,.22)}
textarea{min-height:140px;resize:vertical}
select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239AACBA' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;
  padding-right:2.6rem}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) input,:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) select,:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) textarea{
  background:var(--hell-karte);border-color:#D6E0E7;color:var(--hell-text)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) input::placeholder,:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) textarea::placeholder{color:#8B9AA6}

.wahlkacheln{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kachel{position:relative}
.kachel input{position:absolute;opacity:0;width:0;height:0}
.kachel span{
  display:flex;flex-direction:column;gap:.2rem;height:100%;
  padding:1rem 1.1rem;border-radius:var(--r-m);cursor:pointer;
  background:var(--nacht-2);border:1.5px solid var(--linie-stark);
  font-size:.9rem;transition:border-color .16s var(--ease),background .16s var(--ease)
}
.kachel span strong{font-family:var(--font-display);font-weight:700;font-size:.98rem}
.kachel span em{font-style:normal;font-size:.8rem;color:var(--text-leise)}
.kachel input:checked+span{border-color:var(--blau);background:rgba(78,175,225,.14)}
.kachel input:focus-visible+span{outline:3px solid var(--blau-hell);outline-offset:2px}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .kachel span{background:var(--hell-karte);border-color:#D6E0E7}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .kachel span em{color:var(--hell-leise)}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .kachel input:checked+span{background:rgba(78,175,225,.12)}

.zustimmung{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;
  color:var(--text-leise);line-height:1.5}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .zustimmung{color:var(--hell-leise)}
.zustimmung input{margin-top:.2rem;width:19px;height:19px;flex:none;accent-color:var(--blau)}

.meldung{padding:1.05rem 1.3rem;border-radius:var(--r-m);margin-bottom:1.5rem;font-size:.95rem}
.meldung--ok{background:rgba(46,158,105,.14);border:1px solid rgba(46,158,105,.4);color:#8FE3BC}
.meldung--fehler{background:rgba(217,59,59,.13);border:1px solid rgba(217,59,59,.42);color:#FFB3B3}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .meldung--ok{background:#E8F7F0;border-color:#B7E5CE;color:#166B45}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .meldung--fehler{background:#FDECEC;border-color:#F5C6C6;color:#96201F}

/* Mehrstufiges Formular */
.stufen{display:flex;gap:.4rem;margin-bottom:1.8rem;list-style:none;padding:0}
.stufen li{flex:1;height:4px;border-radius:99px;background:var(--linie-stark)}
.stufen li.ist-erledigt,.stufen li.ist-aktiv{background:var(--blau)}
.stufe[hidden]{display:none}
.stufen__text{font-family:var(--font-display);font-size:.8rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blau);margin-bottom:.6rem}

/* Formularseiten: Formular links, Hilfe rechts */
.zweispalt--formular{align-items:start}
@media(min-width:900px){
  .zweispalt--formular{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
}
.zeile2{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.formularhilfe{
  background:var(--nacht-2);border:1px solid var(--linie);
  border-radius:var(--r-l);padding:clamp(1.4rem,3vw,2rem);
  position:sticky;top:calc(var(--kopf-hoehe) + 1.5rem)
}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .formularhilfe{
  background:var(--hell-bg);border-color:var(--hell-linie)
}
.formularhilfe h2{font-size:1.15rem}
.formularhilfe h3{font-size:.95rem;margin-bottom:.6rem}
@media(max-width:899px){.formularhilfe{position:static}}

.direktkontakt{display:grid;gap:.5rem;margin-top:1.5rem}
.direktkontakt__zeile{
  display:flex;gap:.9rem;align-items:center;text-decoration:none;
  padding:.85rem 1rem;border-radius:var(--r-m);
  background:rgba(255,255,255,.04);border:1px solid var(--linie);
  color:var(--text);transition:border-color .16s var(--ease)
}
.direktkontakt__zeile:hover{border-color:var(--blau);color:var(--text)}
.direktkontakt__zeile--still{cursor:default}
.direktkontakt__zeile .symbol{width:40px;height:40px;margin:0;flex:none}
.direktkontakt__zeile .symbol svg{width:20px;height:20px}
.direktkontakt__zeile strong{display:block;font-family:var(--font-display);font-size:.98rem}
.direktkontakt__zeile em{font-style:normal;font-size:.83rem;color:var(--text-leise);line-height:1.35}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .direktkontakt__zeile{
  background:var(--hell-karte);border-color:var(--hell-linie);color:var(--hell-text)
}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .direktkontakt__zeile em{color:var(--hell-leise)}

.oeffnung--gross{font-size:.95rem}
.oeffnung--gross th{font-weight:500}
.oeffnung--gross .ist-heute th,.oeffnung--gross .ist-heute td{color:var(--blau);font-weight:700}
.heutemarke{
  display:inline-block;margin-left:.4rem;padding:.05rem .4rem;border-radius:99px;
  background:rgba(78,175,225,.18);color:var(--blau);
  font-family:var(--font-display);font-size:.62rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase
}

/* Bestätigung nach dem Absenden */
.danke{
  text-align:center;padding:clamp(2rem,5vw,3.5rem) clamp(1.2rem,3vw,2rem);
  border-radius:var(--r-l);
  background:rgba(46,158,105,.09);border:1px solid rgba(46,158,105,.32)
}
.danke__haken{
  display:grid;place-items:center;width:64px;height:64px;margin:0 auto 1.2rem;
  border-radius:50%;background:rgba(46,158,105,.18);color:#3FBF87
}
.danke__haken svg{width:32px;height:32px}
.danke h2{font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem)}

/* Stellenanzeigen */
.stellenliste{display:grid;gap:1.2rem}
.stelle{
  background:var(--nacht-2);border:1px solid var(--linie);
  border-radius:var(--r-l);padding:clamp(1.4rem,3vw,2.2rem)
}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .stelle{
  background:var(--hell-karte);border-color:var(--hell-linie)
}
.stelle__kopf{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:center;
  justify-content:space-between;margin-bottom:.8rem}
.stelle__kopf h3{margin:0;font-size:clamp(1.1rem,1rem + .5vw,1.35rem)}
.stelle__marken{display:flex;flex-wrap:wrap;gap:.35rem}
.stelle > p{color:var(--text-leise);max-width:70ch}
:is(.platte,.abschnitt--hell,.abschnitt--weiss,.abschnitt--bild-hell) .stelle > p{color:var(--hell-leise)}
.stelle__spalten{display:grid;gap:1.2rem 2rem;margin:1.4rem 0 1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.stelle__spalten h4{font-family:var(--font-display);font-size:.76rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blau);margin-bottom:.6rem}
.stelle__spalten .hakenliste{margin-top:0;gap:.5rem}
.stelle__spalten .hakenliste li{font-size:.92rem}

/* Schalter */
.schalter{display:inline-flex;align-items:center;cursor:pointer}
.schalter input{position:absolute;opacity:0;width:0;height:0}
.schalter__bahn{width:46px;height:26px;border-radius:99px;background:var(--linie-stark);
  position:relative;transition:background .18s var(--ease);display:block}
.schalter__bahn::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:transform .18s var(--ease)}
.schalter input:checked+.schalter__bahn{background:var(--blau)}
.schalter input:checked+.schalter__bahn::after{transform:translateX(20px)}
.schalter input:focus-visible+.schalter__bahn{outline:3px solid var(--blau-hell);outline-offset:2px}

/* --- 13 Popup & Einwilligung ---------------------------------------------- */
.popup,.consent{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1rem}
.popup[hidden],.consent[hidden]{display:none}
.popup__hintergrund,.consent__hintergrund{
  position:absolute;inset:0;background:rgba(6,9,12,.72);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:einblenden .22s var(--ease)
}
.popup__box,.consent__box{
  position:relative;width:min(100%,520px);max-height:calc(100dvh - 2rem);overflow:auto;
  background:var(--nacht-3);border:1px solid var(--linie-stark);
  border-radius:var(--r-l);box-shadow:var(--schatten-l);
  animation:hochgleiten .28s var(--ease)
}
.consent__box{width:min(100%,600px);padding:clamp(1.5rem,4vw,2.2rem)}
@keyframes einblenden{from{opacity:0}}
@keyframes hochgleiten{from{opacity:0;transform:translateY(16px) scale(.98)}}

.popup__zu{
  position:absolute;top:.75rem;right:.75rem;z-index:2;
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(10,14,18,.65);color:#fff;display:grid;place-items:center
}
.popup__zu:hover{background:var(--blau);color:#052232}
.popup__zu svg{width:16px;height:16px}
.popup__bild img{width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-l) var(--r-l) 0 0}
.popup__inhalt{padding:clamp(1.4rem,4vw,2rem)}
.popup__inhalt h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem)}
.popup__text{color:var(--text-leise);font-size:.97rem}
.popup__aktionen{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem;align-items:center}

.consent__liste{list-style:none;margin:1.5rem 0;padding:0;display:grid;gap:.8rem}
.consent__liste li{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  padding:1rem 1.15rem;border-radius:var(--r-m);background:var(--nacht-2);
  border:1px solid var(--linie)}
.consent__liste strong{display:block;font-family:var(--font-display);font-size:.95rem}
.consent__liste span{font-size:.84rem;color:var(--text-leise);line-height:1.45}
.consent__fest{font-size:.78rem;color:var(--blau);white-space:nowrap;font-weight:600}
.consent__aktionen{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end}
.consent__fuss{margin-top:1.2rem;font-size:.82rem;color:var(--text-leise)}

/* Karte mit Zwei-Klick-Einwilligung */
.karteneinbett{position:relative;border-radius:var(--r-l);overflow:hidden;
  background:var(--nacht-2);border:1px solid var(--linie);aspect-ratio:16/9}
.karteneinbett iframe{width:100%;height:100%;border:0;display:block}
.kartenschutz{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:2rem;gap:.8rem;background:
    linear-gradient(rgba(13,17,22,.86),rgba(13,17,22,.92)),
    url(../img/showroom-900.webp) center/cover}
.kartenschutz p{max-width:46ch;font-size:.92rem;color:var(--text-leise);margin:0}

/* Schnellkontakt */
/* Reihenfolge beachten: die Grundregeln stehen zuerst, die Anpassungen fuer
   schmale Schirme ganz am Ende. Standen sie davor, wuerde die spaetere
   Grundregel Polsterung und Schriftgroesse wieder ueberschreiben – gleiche
   Spezifitaet, spaeter gewinnt. */
.schnellkontakt{position:fixed;z-index:70;display:flex;gap:.5rem}
.schnellkontakt__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.1rem;border-radius:99px;text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:.85rem;
  box-shadow:var(--schatten-m);transition:transform .16s var(--ease)
}
.schnellkontakt__btn:hover{transform:translateY(-2px)}
.schnellkontakt__btn svg{width:19px;height:19px;flex:none}
.schnellkontakt__btn--wa{background:#25D366;color:#04250f}
.schnellkontakt__btn--wa:hover{color:#04250f}
.schnellkontakt__btn--tel{background:var(--nacht-4);color:var(--text);
  box-shadow:var(--schatten-m),inset 0 0 0 1px var(--linie-stark)}
.schnellkontakt__btn--tel:hover{color:#fff}
.schnellkontakt__btn--cta{background:linear-gradient(135deg,var(--blau),var(--blau-tief));
  color:#04202f}
.schnellkontakt__btn--cta:hover{color:#04202f}

/* Am Rechner: Saeule unten rechts, der Anmelde-Knopf entfaellt */
@media(min-width:720px){
  .schnellkontakt{right:1.1rem;bottom:1.1rem;flex-direction:column;align-items:flex-end}
  .schnellkontakt__btn--cta{display:none}
}

/* Auf dem Handy: feste Leiste am unteren Rand */
@media(max-width:719px){
  .schnellkontakt{
    left:0;right:0;bottom:0;gap:.4rem;
    padding:.5rem;padding-bottom:calc(.5rem + env(safe-area-inset-bottom));
    background:rgba(13,17,22,.92);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--linie)
  }
  /* min-width:0 ist entscheidend: ohne das haelt min-width:auto jeden Knopf
     auf seiner Inhaltsbreite fest, flex kann nicht schrumpfen und die drei
     Knoepfe werden zusammen breiter als der Bildschirm. */
  .schnellkontakt__btn{
    flex:1 1 0;min-width:0;
    padding:.75rem .45rem;font-size:.76rem;gap:.35rem
  }
  .schnellkontakt__btn svg{width:17px;height:17px}
  .schnellkontakt__btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body{padding-bottom:76px}
}

/* Sehr schmale Geraete */
@media(max-width:359px){
  .schnellkontakt__btn{padding:.75rem .3rem;font-size:.7rem;gap:.25rem}
  .schnellkontakt__btn svg{width:16px;height:16px}
}

/* --- 14 Fuß --------------------------------------------------------------- */
.fuss{position:relative;z-index:1;background:var(--nacht-2);
  border-top:1px solid var(--linie);padding:clamp(3rem,6vw,5rem) 0 2rem;margin-top:auto}
.fuss__oben{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.fuss__marke img{width:160px;margin-bottom:1.1rem}
.fuss__claim{font-family:var(--font-display);font-weight:700;font-size:1.02rem;
  color:var(--text);max-width:24ch}
.fuss__sprachen{font-size:.88rem;color:var(--text-leise);margin-top:.8rem}
.fuss__spalte h2{font-family:var(--font-display);font-size:.78rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blau);margin-bottom:1rem}
.fuss__spalte h3{font-family:var(--font-display);font-size:.78rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blau);margin:1.6rem 0 .7rem}
.fuss__spalte ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.fuss__spalte a{color:var(--text-leise);text-decoration:none;font-size:.93rem}
.fuss__spalte a:hover{color:var(--blau)}
.fuss__kontakt address{font-style:normal;color:var(--text-leise);font-size:.93rem;
  line-height:1.65;margin-bottom:.9rem}
.fuss__transit{display:inline-flex;align-items:center;gap:.35rem;margin-top:.35rem;
  font-size:.82rem;color:var(--blau)}
.fuss__tel{font-family:var(--font-display);font-weight:800;font-size:1.1rem;
  color:var(--text)!important;text-decoration:none}
.fuss__tel:hover{color:var(--blau)!important}
.oeffnung{width:100%;font-size:.87rem;color:var(--text-leise)}
.oeffnung th{text-align:left;font-weight:500;padding:.16rem 0}
.oeffnung td{text-align:right;font-variant-numeric:tabular-nums}
.fuss__unten{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  align-items:center;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--linie);
  font-size:.85rem;color:var(--text-leise)}
.fuss__rechtsnav{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:0;padding:0}
.fuss__rechtsnav a,.fuss__rechtsnav button{color:var(--text-leise);text-decoration:none;font-size:.85rem}
.fuss__rechtsnav a:hover,.fuss__rechtsnav button:hover{color:var(--blau)}
.fuss__recht{margin:0}

/* --- 15 Bewegung ---------------------------------------------------------- */
/* Grundsatz: Inhalt ist immer sichtbar. Die Einblendung wird erst von
   JavaScript eingeschaltet (Klasse "anim" am html-Element) und faellt bei
   jedem Zweifel wieder weg. Ein Anzeigefehler darf niemals dazu fuehren,
   dass die Seite leer aussieht. */
html.anim [data-auftritt]{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:var(--verzug,0s)
}
html.anim [data-auftritt].ist-sichtbar{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.anim [data-auftritt]{opacity:1!important;transform:none!important}
  .schild{transform:none!important}
  .schild__koerper{animation:none!important}
}

/* --- Anpassungen für kleinere Schirme ------------------------------------- */
@media(max-width:1023px){
  .burger{display:flex}
  /* Das geschlossene Menue liegt per translateX(100%) rechts ausserhalb und
     wuerde die Seite sonst breiter machen. overflow-x:clip schneidet das ab,
     ohne einen Scrollbereich zu erzeugen – anders als hidden bleibt damit
     position:sticky am Kopf funktionsfaehig und das Menue darf weiterhin
     nach unten aus dem Kopf herausragen. Auf schmalen Schirmen liegen die
     Untermenues im Textfluss, es wird also nichts Sichtbares abgeschnitten. */
  .kopf{overflow-x:clip}
  /* Auf dem Handy ohne backdrop-filter. Zwei Gruende:
     1. Ein Element mit backdrop-filter wird zum Bezugsrahmen fuer fixierte
        Kinder – damit waere position:fixed am Menue wirkungslos und es
        haengte wieder an der Position des Kopfes.
     2. Der Weichzeichner kostet auf Telefonen spuerbar Rechenzeit.
     Dafuer ist der Grund deckender, was auf kleinen Schirmen ohnehin
     besser lesbar ist. */
  .kopf{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(13,17,22,.94)}

  /* Fest am Bildschirm statt am Kopf. Selbst wenn die klebende Kopfleiste
     auf einem aelteren Browser wegscrollt, sitzt das Menue dadurch immer
     an derselben Stelle und kann nicht mit aus dem Bild wandern. */
  .nav{
    position:fixed;top:var(--kopf-hoehe);right:0;left:auto;bottom:auto;
    width:min(88vw,380px);
    height:calc(100vh - var(--kopf-hoehe));
    height:calc(100dvh - var(--kopf-hoehe));
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--nacht-2);border-left:1px solid var(--linie);
    padding:1.2rem var(--rand) 2rem;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateX(100%);transition:transform .28s var(--ease);
    margin-left:0
  }
  .nav.ist-offen{transform:translateX(0)}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__link{width:100%;justify-content:space-between;padding:.9rem .2rem;font-size:1rem;
    border-bottom:1px solid var(--linie);border-radius:0}
  .nav__panel{
    position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:0;box-shadow:none;padding:0 0 .5rem .6rem;
    display:none;min-width:0
  }
  .nav__item.ist-offen .nav__panel{display:block}
  .nav__panel a{padding:.6rem .4rem}
  .nav__ende{flex-direction:column;align-items:stretch;gap:1rem;margin-top:1.5rem}
  .sprachen{justify-content:center}
  .nav__ende .btn{width:100%}
  body.menue-offen{overflow:hidden}
}

@media(max-width:719px){
  /* Auf dem Handy wird der Monatskalender zur kompakten Übersicht,
     die vollständigen Angaben stehen in der Listenansicht */
  .kalender{border-spacing:3px}
  .ktag{height:auto;min-height:58px;padding:.3rem}
  .stunde{font-size:.62rem;padding:.22rem .28rem;border-left-width:2px}
  .stunde strong{font-size:.66rem}
  .stunde__thema{display:none}
  .stunde__art{font-size:.54rem;padding:.04rem .26rem}
  .stunde__zeit{font-size:.62rem}
  .artmarke{margin-left:0;margin-top:.3rem}
  .planzeile__was strong{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
  .planzeile{grid-template-columns:1fr;gap:.3rem}
  .planzeile__zeit{justify-self:start}
  /* Auf dem Handy nur wenige, ruhigere Schilder – sonst wird es unruhig
     und die Filter kosten unnötig Rechenzeit */
  .schilder{opacity:.5}
  .schild--d,.schild--f,.schild--g,.schild--h{display:none}
  .schild--a{--gr:150px}
  .schild--b{--gr:105px}
  .schild--c{--gr:120px}
  .schild--e{--gr:140px}
  .schild__koerper{filter:none!important}
  .kreis{--kgr:260px}
}

/* Handy: Kalender auf die Arbeitswoche kürzen.
   Unterricht läuft Mo–Do, Samstag und Sonntag sind immer leer und nehmen zwei
   von sieben Spalten weg. Ohne sie werden die verbleibenden Tage 40 % breiter.
   Greift nur bei .kalender--werktags – die Klasse setzt der Server ab, sobald
   doch ein Termin am Wochenende liegt (Handverschiebung im Admin).
   Bewusst auf "screen" begrenzt: der Ausdruck zeigt weiter die volle Woche. */
@media screen and (max-width:719px){
  .kalender--werktags .kal--we{display:none}
  .kalender--werktags .kal-woche--we{display:none}
  .kalender--werktags .ktag{min-height:64px;padding:.35rem}
  .kalender--werktags .stunde{font-size:.66rem;padding:.26rem .32rem}
  .kalender--werktags .stunde strong{font-size:.74rem}
  .kalender--werktags .stunde__kurz{display:block}
  /* Beide Texte verschwinden nur optisch, nicht aus dem Baum: Screenreader
     und Suchmaschine bekommen weiterhin „Theoriestunde 12, Grundstoff“.
     Die ausgeschriebene Art passt bei fünf Spalten nicht mehr in die Zelle –
     „Grundstoff“ bräuchte rund 55 px bei 42 px Platz und würde mitten im Wort
     umbrechen. Sichtbar bleibt sie über die Farbe des Balkens, die die Legende
     direkt unter dem Kalender benennt; die Listenansicht zeigt sie im Klartext. */
  .kalender--werktags :is(.stunde__lang,.stunde__art){
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0
  }
  .kalender--werktags .stunde{border-left-width:4px}
}

/* --- 16 Druck ------------------------------------------------------------- */
@media print{
  .kopf,.fuss,.schnellkontakt,.schilder,.popup,.consent,.banner,
  .plan__steuerung,.ansichtswahl,.aufruf,.skip-link{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .platte{background:#fff;padding:0;margin:0}
  .ktag,.planzeile,.karte{background:#fff;border:1px solid #bbb;break-inside:avoid}
  .stunde{background:#eef6fb!important;color:#000!important;border-left:3px solid #333}
  a[href]::after{content:""}
  .plan__monat{font-size:16pt}
}