/*
Theme Name: BA-Ems
Theme URI: https://ba-ems.de
Author: Biel Digital
Author URI: https://biel-digital.de
Description: Eigenes Theme der Bildungsakademie Ems, Emden. Gestaltung aus dem abgenommenen Entwurf vom 07.09.2026: heller Grund, Cyan als einziger Akzent, abgeschraegte Kanten, Quantico-Treppen-Headlines, gepinnte Scroll-Szenen (GSAP + ScrollTrigger + Lenis, lokal).
Version: 1.1.1
Requires PHP: 8.1
License: proprietary
Text Domain: ba-ems
*/

/* Schriften lokal — kein Google-Fonts-Aufruf. Quantico (Display) + Figtree (Text). */
@font-face{font-family:"Quantico";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/quantico-400.woff2") format("woff2")}
@font-face{font-family:"Quantico";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/quantico-700.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("assets/fonts/figtree-var.woff2") format("woff2")}

:root{
  --grund:#F2F1F0; --grund2:#F7F6F8; --weiss:#FFFFFF;
  --cyan:#15BCDF; --cyan-h:#3fd0ef; --cyan-r:#0fa3c2; --cyan-feld:#DDF4F9;
  --kopf:#2b3033; --nav:#3a3a3a; --grau:#6b6f72; --hell:#c9cbcc; --dunkel:#1a1c1e;
  --linie:rgba(43,48,51,.14);
  --display:"Quantico","Arial Narrow",Arial,sans-serif;
  --text:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rand:clamp(20px,9vw,118px);
  --einzug:min(max(238px,22vw),28vw);
  --kopf-h:74px;
  --chamfer:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  --chamfer-s:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
html.kino{scroll-behavior:auto}
body{background:var(--grund);color:var(--kopf);font-family:var(--text);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--cyan);color:var(--dunkel)}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--nav);text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
h1,h2,h3,.display{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:.98;color:var(--kopf)}
.cy{color:var(--cyan)}
.kicker{font-family:var(--display);font-weight:700;font-size:clamp(12px,1.2vw,14px);letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.kicker b{color:var(--cyan);font-weight:700}
p.lauf{color:var(--grau);font-size:clamp(15px,1.5vw,18px);line-height:1.7;max-width:52ch}
p.lauf b{color:var(--kopf);font-weight:600}
.springen{position:absolute;left:-999px;top:8px;z-index:100;background:var(--dunkel);color:#fff;padding:10px 16px;font-family:var(--display);text-transform:uppercase;letter-spacing:.1em}
.springen:focus{left:8px}

/* --- Chamfer-Knopf --- */
.knopf{display:inline-flex;align-items:center;gap:14px;background:var(--cyan);border:1px solid var(--cyan-r);color:var(--dunkel);font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(13px,1.2vw,15px);padding:18px 34px;clip-path:var(--chamfer);box-shadow:0 0 0 1px rgba(21,188,223,.35),0 10px 30px -12px rgba(15,163,194,.6);transition:background .25s,box-shadow .25s,transform .25s;position:relative}
.knopf::after{content:"";width:22px;height:1px;background:var(--dunkel);transition:width .25s}
.knopf:hover{background:var(--cyan-h);box-shadow:0 0 0 1px rgba(21,188,223,.6),0 16px 40px -12px rgba(15,163,194,.8)}
.knopf:active{transform:scale(.97)}
.knopf:hover::after{width:34px}
.knopf.dunkel{background:var(--dunkel);border-color:var(--dunkel);color:#fff;box-shadow:none}
.knopf.dunkel::after{background:var(--cyan)}
.knopf.dunkel:hover{background:#000}
.linkpfeil{font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px;color:var(--kopf);display:inline-flex;align-items:center;gap:10px}
.linkpfeil::after{content:"→";color:var(--cyan);transition:transform .25s}
.linkpfeil:hover::after{transform:translateX(6px)}

/* --- Kopfzeile (sticky) --- */
.kopf{position:sticky;top:0;z-index:30;height:var(--kopf-h);display:flex;align-items:center;gap:clamp(20px,5vw,56px);padding:0 clamp(20px,4vw,48px);transition:background .3s,box-shadow .3s}
.admin-bar .kopf{top:32px}
.kopf.fest{background:rgba(242,241,240,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--linie)}
.kopf .marke{display:flex;align-items:center;gap:12px;text-decoration:none}
.kopf .logo{height:34px;width:auto}
.kopf .marke small{font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grau);white-space:nowrap}
.kopf nav{display:flex;align-items:center;gap:34px;flex:1}
.kopf nav a{font-family:var(--display);font-weight:700;font-size:clamp(12px,1.1vw,15px);letter-spacing:.06em;text-transform:uppercase;color:var(--nav);white-space:nowrap;position:relative}
.kopf nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--cyan);transition:right .25s}
.kopf nav a:hover::after,.kopf nav a[aria-current]::after{right:0}
/* Home-Knopf: Haus als Inline-SVG im Strich der Seite, 44x44 Trefferflaeche, Wort nur fuer Screenreader */
.kopf nav a.home{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 -6px}
.kopf nav a.home svg{width:22px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;transition:stroke .25s}
.kopf nav a.home:hover svg,.kopf nav a.home[aria-current] svg{stroke:var(--cyan)}
.kopf nav a.home::after{left:11px;right:11px;bottom:4px;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.kopf nav a.home:hover::after,.kopf nav a.home[aria-current]::after{transform:none}
.nur-lesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kopf .anmelden{margin-left:auto;display:inline-flex;align-items:center;gap:10px;background:var(--dunkel);color:#fff;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12px;padding:13px 22px;clip-path:var(--chamfer-s);transition:background .25s;white-space:nowrap}
.kopf .anmelden:hover{background:var(--cyan);color:var(--dunkel)}
.kopf .anmelden svg{width:17px;height:13px;stroke:currentColor;fill:none;stroke-width:1.4}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:10px;flex-direction:column;gap:5px}
.burger i{display:block;width:22px;height:2px;background:var(--dunkel);transition:transform .3s,opacity .3s}
.menue{display:none}
@media(max-width:1180px){.kopf .marke small{display:none}.kopf nav{gap:22px}}
/* Menue genau in der Seitenmitte: zwei gleich breite Aussenspalten fuer Marke
   und Anmeldung (Kundenwunsch, 03.10.2026). */
@media(min-width:761px){
  .kopf{display:grid;grid-template-columns:1fr auto 1fr}
  .kopf nav{flex:none}
  .kopf .marke{justify-self:start}
  .kopf .anmelden{justify-self:end;margin-left:0}
}
@media(max-width:900px){:root{--rand:20px}}
@media(max-width:760px){
  .kopf{gap:12px;padding:0 20px}
  .kopf nav,.kopf .anmelden{display:none}
  .burger{display:flex}
  .menue{position:fixed;inset:var(--kopf-h) 0 auto 0;background:#EAF3F7;border-bottom:1px solid var(--linie);padding:24px 20px 28px;display:flex;flex-direction:column;gap:2px;z-index:29;transform:translateY(calc(-100% - var(--kopf-h) - 40px));visibility:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),visibility 0s .35s;box-shadow:0 30px 60px -30px rgba(0,0,0,.25)}
  .admin-bar .menue{top:calc(var(--kopf-h) + 46px)}
  .menue.offen{transform:none;visibility:visible;transition-delay:0s}
  .menue a{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--dunkel);display:flex;align-items:center;min-height:44px}
  .menue a.cta{color:#0C7089}   /* auf dem hellen Blau traegt Cyan-R nur 2,65:1 */
  /* Im Kreuz liegen beide Striche exakt in der Mitte uebereinander — mit
     Verschieben um feste Pixel trafen sie sich nicht und es sah aus wie ein
     Haken (Steven, 27.09.2026). */
  .burger{position:relative}
  .burger.offen i{position:absolute;top:50%;left:50%;margin:-1px 0 0 -11px}
  .burger.offen i:nth-child(1){transform:rotate(45deg)}
  .burger.offen i:nth-child(2){opacity:0}
  .burger.offen i:nth-child(3){transform:rotate(-45deg)}
}

/* ====== K0 · HELD ====== */
.held{position:relative;min-height:calc(100svh - var(--kopf-h));overflow:hidden;background:var(--grund);display:flex;flex-direction:column;justify-content:center}
.held .visual{position:absolute;top:0;right:-14%;width:88%;height:auto;pointer-events:none;object-fit:contain;
  -webkit-mask-image:radial-gradient(ellipse 62% 60% at 55% 45%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 62% 60% at 55% 45%,#000 45%,transparent 100%)}
.held .scrim{position:absolute;inset:0 30% 0 0;background:linear-gradient(90deg,#F2F1F0 0%,#F2F1F0 55%,rgba(242,241,240,.85) 78%,rgba(242,241,240,0) 100%);pointer-events:none}
.held .inhalt{position:relative;z-index:2;padding:min(clamp(40px,9vw,120px),6vh) 20px min(clamp(36px,6vw,80px),5vh) var(--rand)}
/* Auftakt passt komplett in den Bildschirm: Schrift richtet sich nach der Hoehe
   (sechs Zeilen + rund 380 px fuer Text, Knopf, Abstaende). Steven, 04.10.2026 */
.held h1{font-size:min(clamp(34px,7.6vw,80px),max(34px,calc((100svh - var(--kopf-h) - var(--wp-leiste,0px) - 380px) / 6.6)))}
body.admin-bar{--wp-leiste:32px}
@media(min-width:761px){.admin-bar .held{min-height:calc(100svh - var(--kopf-h) - 32px)}}
/* padding-top: Platz fuer Umlautpunkte, sonst schneidet overflow:hidden das Ü ab (03.10.2026) */
.held h1 .z{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;padding-top:.16em;margin-top:-.16em}
.held h1 .z>span{display:block}
.held h1 .ein{padding-left:var(--einzug)}
.held .unten{margin-top:clamp(24px,4vw,44px);padding-left:var(--einzug);display:flex;flex-direction:column;gap:clamp(20px,3vw,32px);align-items:flex-start}
.held .unten p{max-width:46ch}
.held .cta-reihe{display:flex;align-items:center;gap:clamp(18px,3vw,36px);flex-wrap:wrap}
.held .tel{font-family:var(--display);font-weight:700;letter-spacing:.06em;color:var(--kopf);font-size:15px}
.held .tel small{display:block;font-family:var(--text);font-weight:500;letter-spacing:0;text-transform:none;color:var(--grau);font-size:12px}
.held .scrollhinweis{position:absolute;right:clamp(20px,4vw,48px);bottom:clamp(18px,3vh,32px);z-index:2;display:flex;align-items:center;gap:10px;color:var(--grau)}
.held .scrollhinweis i{display:block;width:1px;height:44px;background:var(--hell);position:relative;overflow:hidden}
.held .scrollhinweis i::after{content:"";position:absolute;left:0;top:0;width:100%;height:50%;background:var(--cyan);animation:lauf 1.8s cubic-bezier(.22,1,.36,1) infinite}
@keyframes lauf{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}
@media(max-width:760px){
  .held{min-height:auto}
  .held .visual{right:auto;left:0;width:100%;top:0;-webkit-mask-image:linear-gradient(#000 55%,transparent 100%);mask-image:linear-gradient(#000 55%,transparent 100%)}
  .held .scrim{display:none}
  .held .inhalt{margin-top:min(50vw,260px);padding:0 20px 36px 20px}
  /* Kleiner, und die zweite Haelfte haengt rechts statt an einem festen
     Einzug: so verschachteln sich beide Haelften auf jeder Handybreite,
     statt als zwei zufaellig versetzte Bloecke zu stehen (27.09.2026). */
  /* Kleiner, und die zweite Haelfte haengt rechts statt an einem festen Einzug —
     mit Abstand zum Rand, damit beide Haelften naeher beieinander stehen
     (Steven, 27.09.2026). */
  .held .inhalt{padding-left:24px;padding-right:24px}
  .held h1{font-size:clamp(30px,9vw,44px);padding-left:7vw}
  .held h1 .z{margin-bottom:-.14em}
  /* Gleicher Einzug auf beiden Seiten: links 7vw, rechts 7vw — sonst steht die
     linke Haelfte naeher am Rand als die rechte (Steven, 27.09.2026). */
  .held h1 .ein{padding-left:0;padding-right:7vw;text-align:right}
  .held .unten{padding-left:0}
  .held .scrollhinweis{display:none}
}

/* ====== K1 · DEIN TAG — Frueh- und Spaetschicht untereinander, Balken fest ======
   Ersetzt die zwei gepinnten Scroll-Szenen (03.10.2026). */
.tag{padding:clamp(56px,9vw,120px) var(--rand) clamp(40px,6vw,80px);display:grid;gap:clamp(24px,3.5vw,44px)}
.tag .kopfzeile{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.tag h2{font-size:clamp(30px,5vw,60px)}
.tag h2 .ein{display:block;padding-left:min(160px,18vw)}
.tag .zeile{display:grid;grid-template-columns:minmax(190px,22%) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);align-items:start;padding-top:clamp(20px,3vw,32px);border-top:1px solid var(--linie)}
.tag .titel h3{font-size:clamp(24px,2.6vw,38px)}
.tag .titel .uhr{margin-top:10px;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--kopf)}
/* Familienfreundliche Zeiten: Kasten in "Dein Tag", Etikett bei Zeitmodellen und Wochenplan (03.10.2026) */
.familie{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.5vw,32px);align-items:center;background:var(--cyan);color:var(--dunkel);padding:clamp(22px,3vw,36px) clamp(22px,3.5vw,44px);clip-path:var(--chamfer)}
.familie .familie-icon{width:clamp(48px,5vw,72px);height:auto}
.familie-icon{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.familie .familie-titel{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(22px,2.6vw,36px);line-height:1;margin-bottom:10px}
.familie p{font-size:clamp(15px,1.2vw,18px);line-height:1.55;max-width:72ch}
.familie b{font-weight:700}
@media(max-width:600px){.familie{grid-template-columns:1fr;gap:14px}.familie .familie-icon{width:44px}}
.familie-marke{display:inline-flex;align-items:center;gap:10px;justify-self:start;align-self:start;width:max-content;max-width:100%;background:var(--cyan);color:var(--dunkel);font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:9px 18px 9px 14px;clip-path:var(--chamfer-s)}
.familie-marke .familie-icon{width:22px;height:22px;flex:none}
/* Zeitlineal */
.lineal{min-width:0}
.lineal .spur{position:relative;height:56px;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.lineal .block{position:absolute;top:10px;bottom:10px;display:flex;align-items:center;padding-left:12px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.lineal .block i{position:absolute;inset:0;clip-path:var(--chamfer-s);transform-origin:left center}
.lineal .block span{position:relative}
.lineal .block.schicht{color:var(--kopf)}.lineal .block.schicht i{background:#dcdedf}
.lineal .block.unterricht{color:var(--dunkel)}.lineal .block.unterricht i{background:var(--cyan)}
.lineal .ticks{position:relative;height:24px;font-family:var(--display);font-size:11px;letter-spacing:.1em;color:var(--grau)}
.lineal .ticks span{position:absolute;top:8px;transform:translateX(-50%);white-space:nowrap}
.lineal .ticks span:nth-child(1){left:0;transform:none}.lineal .ticks span:nth-child(2){left:12.5%}.lineal .ticks span:nth-child(3){left:25%}.lineal .ticks span:nth-child(4){left:37.5%}.lineal .ticks span:nth-child(5){left:50%}.lineal .ticks span:nth-child(6){left:62.5%}.lineal .ticks span:nth-child(7){left:75%}.lineal .ticks span:nth-child(8){left:87.5%}.lineal .ticks span:nth-child(9){left:auto;right:0;transform:none}
.lineal .hinweis{margin-top:14px;font-size:14px;color:var(--grau);max-width:60ch}
.lineal .hinweis b{color:var(--kopf);font-weight:600}
@media(max-width:900px){
  .lineal .spur{height:44px}
  .tag{padding-left:20px;padding-right:20px}
  .tag .kopfzeile{grid-template-columns:1fr}
  .tag h2 .ein{padding-left:min(90px,18vw)}
  .tag .zeile{grid-template-columns:1fr;row-gap:14px}
  .lineal .block{top:8px;bottom:8px;font-size:10px;padding-left:8px}
  .lineal .hinweis{font-size:13px;margin-top:10px}
  .lineal .ticks{font-size:12px}
  /* 11 statt 10 px, dafuer enger gesperrt und weniger Polster — sonst wird
     "Unterricht" im schmalen Balken auf kleinen Handys abgeschnitten. */
  .lineal .block{font-size:11px;letter-spacing:.04em;padding-left:6px}
  /* Der Frueh-Unterricht (15:30–18:45) ist auf dem Handy schmaler als sein Wort —
     rechts davon ist frei, die Beschriftung darf hinauslaufen (03.10.2026). */
  .lineal .block{overflow:visible}
  .lineal .ticks span:nth-child(even){visibility:hidden}
}

/* Tippziele: Apple rechnet mit 44 x 44 px. Die Pfeil-Links, der Burger und die
   Telefon-/Fusszeilen-Links lagen bei 18–36 px — auf dem Handy trifft man das
   nur mit Glueck (27.09.2026). Die Schriftgroesse bleibt, nur die Flaeche waechst. */
@media(max-width:760px){
  .linkpfeil,.kopf .marke,.fuss nav a,.fuss .gemacht,.held .tel,
  .kontakt .daten a,.lineal .hinweis a,.termine-hinweis a{
    min-height:44px;display:inline-flex;align-items:center;flex-wrap:wrap}
  .held .tel{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:4px 0}
  .burger{min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:0}
}
/* Zeitmodelle */
.modelle{padding:clamp(56px,9vw,120px) var(--rand);display:grid;gap:clamp(28px,4vw,56px)}
.modelle .kopfzeile{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.modelle h2{font-size:clamp(30px,5vw,60px)}
.modelle h2 .ein{display:block;padding-left:min(160px,18vw)}
.modelle .raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.modell{background:var(--weiss);clip-path:var(--chamfer);padding:clamp(22px,2.4vw,32px);display:grid;gap:8px;min-height:250px;align-content:start;position:relative}
.modell .zahl{font-family:var(--display);font-weight:700;font-size:clamp(48px,5.4vw,76px);line-height:1;color:var(--kopf);letter-spacing:-.01em}
.modell .zahl small{font-size:.32em;letter-spacing:.1em;color:var(--grau);margin-left:6px}
.modell h3{font-size:clamp(16px,1.3vw,19px);margin-top:8px}
.modell p{color:var(--grau);font-size:15px;line-height:1.55}
.modell p b{color:var(--kopf);font-weight:600}
.modell.top{background:var(--cyan);}
.modell.top .zahl,.modell.top h3,.modell.top p,.modell.top p b{color:var(--dunkel)}
.modell.top .zahl small{color:rgba(26,28,30,.65)}
.modell.top::after{content:"Unser Weg für Schichtarbeiter";position:absolute;top:0;right:0;font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:var(--dunkel);color:#fff;padding:7px 12px 7px 16px;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%)}
.termine-hinweis{color:var(--grau);font-size:15px;border-left:2px solid var(--cyan);padding-left:16px;max-width:70ch;margin-top:-8px}
.termine-hinweis b{color:var(--kopf);font-weight:600}
.termine-hinweis a{color:var(--kopf);text-decoration:underline;text-underline-offset:3px}
@media(max-width:1100px){.modelle .raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.modelle .raster{grid-template-columns:1fr}.modelle .kopfzeile{grid-template-columns:1fr}.modell{min-height:0}}

/* ====== K3 · FÜNF WEGE (Pin + Scrub) ====== */
.wege{position:relative;background:var(--grund2)}
.wege .buehne{height:100svh;min-height:620px;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);padding:calc(var(--kopf-h) + 12px) 0 clamp(22px,4vh,40px) var(--rand);column-gap:clamp(24px,4vw,64px)}
.wege .links{display:grid;grid-template-rows:auto 1fr auto;min-width:0}
.wege .meta{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-right:20px}
.wege ol{list-style:none;align-self:center;display:grid;gap:clamp(6px,1.2vh,14px);position:relative;padding-left:clamp(14px,2vw,26px);border-left:1px solid var(--linie)}
.wege ol .fortschritt{position:absolute;left:-1px;top:0;width:2px;height:100%;background:var(--cyan);transform-origin:top;transform:scaleY(0)}
.weg{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:baseline;cursor:pointer}
.weg .nr{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--hell);transition:color .35s}
.weg h3{font-size:min(clamp(28px,4.2vw,60px),7vh);color:var(--hell);transition:color .35s;white-space:nowrap}
.weg .mehr{grid-column:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.weg .mehr>div{overflow:hidden}
.weg .mehr p{color:var(--grau);font-size:clamp(14px,1.25vw,17px);line-height:1.6;max-width:46ch;padding:6px 0 8px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.weg .mehr p b{color:var(--kopf);font-weight:600}
.weg .mehr .linkpfeil{opacity:0;transition:opacity .4s;margin-bottom:6px}
.weg.aktiv .nr{color:var(--cyan-r)}
.weg.aktiv h3{color:var(--kopf)}
.weg.aktiv .mehr{grid-template-rows:1fr}
.weg.aktiv .mehr p,.weg.aktiv .mehr .linkpfeil{opacity:1;transform:none;transition-delay:.15s}
.wege .fuss{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding-right:20px}
.wege .fuss .anfrage{font-size:14px;color:var(--grau)}
.wege .bild{position:relative;height:100%;clip-path:polygon(0 0,100% 0,100% 100%,16px 100%,0 calc(100% - 16px));overflow:hidden;background:var(--hell)}
.wege .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wege .bild img+img{opacity:0}
.wege .bild .tint{position:absolute;inset:0;background:var(--cyan);mix-blend-mode:hue;opacity:.3;pointer-events:none}
.wege .bild .label{position:absolute;left:0;bottom:0;background:var(--grund2);padding:12px 18px 12px 0;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--kopf);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);padding-left:var(--rand)}
/* Mobil / ohne Kino: kein Pin, Liste mit Bildkarten */
@media(max-width:900px){
  .wege .buehne{height:auto;min-height:0;grid-template-columns:1fr;padding:clamp(48px,8vw,80px) 20px 40px;row-gap:24px}
  .wege .links{grid-template-rows:auto auto auto;gap:24px}
  .wege ol{gap:22px}
  .weg h3{white-space:normal;font-size:clamp(26px,8vw,40px);color:var(--kopf)}
  .weg .nr{color:var(--cyan-r)}
  .weg .mehr{grid-template-rows:1fr}
  .weg .mehr p,.weg .mehr .linkpfeil{opacity:1;transform:none}
  .weg .mbild{grid-column:2;height:52vw;max-height:300px;clip-path:var(--chamfer-s);overflow:hidden;margin:8px 0 4px}
  .weg .mbild img{width:100%;height:100%;object-fit:cover}
  .wege .bild{display:none}
}
@media(min-width:901px){.weg .mbild{display:none}}
html:not(.kino) .weg .nr{color:var(--cyan-r)}
html:not(.kino) .weg h3{color:var(--kopf)}
html:not(.kino) .weg .mehr{grid-template-rows:1fr}
html:not(.kino) .weg .mehr p,html:not(.kino) .weg .mehr .linkpfeil{opacity:1;transform:none}
html:not(.kino) .wege ol .fortschritt{transform:none}

/* ====== K4 · NACHHILFE / ZAHLEN ====== */
.warum{background:linear-gradient(180deg,var(--grund2) 0%,var(--grund) 30%,var(--grund) 100%);padding:clamp(60px,10vw,140px) 0 clamp(30px,5vw,70px) var(--rand);display:flex;flex-wrap:wrap;align-items:center;gap:40px}
.warum .text{flex:1 1 420px;min-width:300px;display:grid;gap:0}
.warum h2{font-size:clamp(34px,6.5vw,72px)}
.warum h2 .ein{display:block;padding-left:min(160px,18vw)}
.warum p.lauf{margin:32px 0 0 min(160px,18vw);max-width:520px}
.warum .knopf{margin:36px 0 0 min(160px,18vw)}
.warum .medien{flex:1 1 360px;min-width:280px;display:flex;justify-content:flex-end;position:relative;align-self:stretch}
.warum .medien figure{position:relative;width:100%;max-width:644px;aspect-ratio:3/2;overflow:hidden;clip-path:polygon(0 16px,16px 0,100% 0,100% 100%,0 100%)}
.warum .medien img{width:100%;height:100%;object-fit:cover}
.warum .medien .tint{position:absolute;inset:0;background:var(--cyan);mix-blend-mode:hue;pointer-events:none;opacity:0}
.zahlen{padding:clamp(24px,4vw,56px) var(--rand) clamp(60px,9vw,120px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.zahl-k{border-top:2px solid var(--kopf);padding-top:18px;display:grid;gap:6px;align-content:start}
.zahl-k .wert{font-family:var(--display);font-weight:700;font-size:clamp(40px,4.6vw,64px);line-height:1;letter-spacing:-.01em;color:var(--kopf);font-variant-numeric:tabular-nums;white-space:nowrap}
.zahl-k .wert small{font-size:.4em;letter-spacing:.08em;color:var(--cyan-r)}
.zahl-k h3{font-size:15px;letter-spacing:.06em}
.zahl-k p{color:var(--grau);font-size:14.5px;line-height:1.55}
@media(max-width:900px){.zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.warum{padding-right:20px;padding-left:20px}.warum .text,.warum .medien{min-width:0;flex-basis:100%}.warum p.lauf,.warum .knopf{margin-left:0}.warum h2 .ein{padding-left:min(90px,18vw)}.zahlen{padding-left:20px;padding-right:20px}}
@media(max-width:480px){.zahlen{grid-template-columns:1fr}}

/* ====== Verweis Kosten & Foerderung (Cyan-Feld) ====== */
.kosten{padding:0 var(--rand) clamp(60px,9vw,120px)}
.kosten .feld{background:var(--cyan);color:var(--dunkel);clip-path:var(--chamfer);padding:clamp(36px,6vw,80px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.kosten .kicker{color:rgba(26,28,30,.6)}.kosten .kicker b{color:var(--dunkel)}
.kosten h2{color:var(--dunkel);font-size:clamp(32px,5.4vw,64px)}
.kosten h2 .ein{display:block;padding-left:min(160px,18vw)}
.kosten h2 .cy2{color:#fff}
.kosten p.lauf{color:rgba(26,28,30,.8);max-width:46ch}
.kosten .rechts{display:grid;gap:28px;justify-items:start}
@media(max-width:900px){.kosten{padding-left:20px;padding-right:20px}.kosten .feld{grid-template-columns:1fr;padding:36px 24px}.kosten h2 .ein{padding-left:min(90px,18vw)}}

/* ====== Kurz gefragt ====== */
.fragen{padding:0 var(--rand) clamp(60px,9vw,120px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);align-items:start}
.fragen h2{font-size:clamp(30px,4.6vw,56px)}
.fragen h2 .ein{display:block;padding-left:min(120px,14vw)}
.fragen .kopfzeile{position:sticky;top:calc(var(--kopf-h) + 24px)}
.fragen .liste{border-top:1px solid var(--linie)}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(15px,1.3vw,19px);line-height:1.25;color:var(--kopf);position:relative}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-family:var(--display);font-size:26px;color:var(--cyan-r);transition:transform .3s}
.fragen details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.fragen details p{color:var(--grau);padding:0 0 22px;max-width:60ch;line-height:1.65}
.fragen details p a{color:var(--kopf);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.fragen{grid-template-columns:1fr;padding-left:20px;padding-right:20px}.fragen .kopfzeile{position:static}}
/* Auf dem Tablet reichte die eingerueckte zweite Zeile („Foerderung") bis in die
   Fragenliste hinein — gemessen 5 px Ueberlappung bei 1080 px (Steven am iPad,
   27.09.2026). Weniger Einzug, solange die Spalte schmal ist. */
@media(min-width:901px) and (max-width:1200px){.fragen h2 .ein{padding-left:min(70px,7vw)}}

/* Die Buehne lief bis an die rechte Kante. Auf grossen Schirmen ist das gewollt,
   auf dem Tablet sieht es aus, als waere das Bild abgeschnitten. */
@media(max-width:1200px){
  .wege .buehne{padding-right:var(--rand)}
}

/* ====== K5 · LEITBILD ====== */
.leitbild{padding:clamp(70px,12vw,160px) var(--rand);background:var(--grund);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.leitbild .kicker{margin-bottom:28px}
.leitbild p.zitat{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.1;font-size:clamp(24px,4vw,52px);max-width:26ch;color:var(--kopf)}
.leitbild p.zitat .w{display:inline-block;color:var(--hell)}
html:not(.kino) .leitbild p.zitat .w{color:var(--kopf)}
html:not(.kino) .leitbild p.zitat .w.cy{color:var(--cyan)}
.leitbild .quelle{margin-top:24px;color:var(--grau);font-size:14px}

/* ====== K6 · TEAM ====== */
.team{padding:clamp(60px,10vw,130px) var(--rand);display:grid;gap:clamp(28px,4vw,48px)}
.team .kopfzeile{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.team h2{font-size:clamp(32px,5.4vw,64px)}
.team h2 .ein{display:block;padding-left:min(160px,18vw)}
.team .raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.person{display:grid;gap:14px;align-content:start}
.person figure{position:relative;aspect-ratio:4/5;overflow:hidden;clip-path:var(--chamfer);background:var(--hell)}
.person img{width:100%;height:100%;object-fit:cover;object-position:center top}
.person .tint{position:absolute;inset:0;background:var(--grund);mix-blend-mode:saturation;opacity:0;pointer-events:none}  /* 20.09.: neutral entsaettigen statt Cyan — Gesichter wurden blau */
.person h3{font-size:clamp(18px,1.5vw,22px)}
.person .rolle{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-r)}
.person p{color:var(--grau);font-size:15px;line-height:1.55}
.person p b{color:var(--kopf);font-weight:600}
@media(max-width:900px){.team .raster{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.team .raster{grid-template-columns:1fr}.team .kopfzeile{grid-template-columns:1fr}}

/* ====== K7 · KONTAKT ====== */
.kontakt{padding:0 var(--rand) clamp(40px,6vw,80px)}
.kontakt .feld{background:var(--dunkel);color:#fff;clip-path:var(--chamfer);padding:clamp(40px,6vw,80px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center}
.kontakt h2{color:#fff;font-size:clamp(34px,5.6vw,68px)}
.kontakt h2 .ein{display:block;padding-left:min(160px,18vw)}
.kontakt p.lauf{color:rgba(255,255,255,.7);margin-top:20px;max-width:44ch}
.kontakt p.lauf b{color:#fff}
.kontakt .daten{display:grid;gap:22px;justify-items:start}
.kontakt .daten a.gross{font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,40px);color:#fff;letter-spacing:.02em;line-height:1.1;overflow-wrap:anywhere}
.kontakt .daten a.gross:hover{color:var(--cyan)}
.kontakt .daten small{display:block;font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.kontakt .daten address{font-style:normal;color:rgba(255,255,255,.75);line-height:1.5}
@media(max-width:900px){.kontakt .feld{grid-template-columns:1fr}.kontakt{padding-left:20px;padding-right:20px}.kontakt .feld{padding:36px 24px}}

/* --- Nach oben --- */
.hoch{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:25;width:52px;height:52px;background:var(--dunkel);color:#fff;clip-path:var(--chamfer-s);display:grid;place-items:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s,background .25s,color .25s}
.hoch.da{opacity:1;transform:none;pointer-events:auto}
.hoch:hover{background:var(--cyan);color:var(--dunkel)}
.hoch svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:square}
html:not(.js) .hoch{opacity:1;transform:none;pointer-events:auto}

/* --- Fuss --- */
.fuss{padding:20px var(--rand) 40px;display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;color:var(--grau);font-size:13px;border-top:1px solid var(--linie)}
.fuss .fuss-marke{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fuss .logo{height:26px;width:auto}
.fuss nav{display:flex;gap:20px;flex-wrap:wrap}
/* Trennstrich zwischen den Fuss-Links (Steven, 03.10.2026) */
.fuss nav{align-items:center}
.fuss nav a+a{border-left:1px solid var(--linie);padding-left:20px}
/* Spamfrage im Formular: Frage und kurzes Feld kompakt */
.wpcf7 .spamfrage .wpcf7-quiz-label{display:inline;margin-left:.4em;color:var(--kopf)}
.wpcf7 .spamfrage input{max-width:140px}
.fuss a{color:var(--kopf)}
/* Auf dem Handy reicht das Rechtliche. Logo und Anschrift stehen direkt darueber
   im Kontaktblock und im Impressum — im Fuss waren sie nur Laenge (Steven, 27.09.2026). */
@media(max-width:760px){
  .fuss{padding:22px 20px 26px;flex-direction:column;align-items:flex-start;gap:14px}
  .fuss .fuss-marke{display:none}
  .fuss nav{gap:6px 18px;row-gap:0}
  .fuss nav a{min-height:40px;font-size:14px}
  .fuss .fuss-klein{font-size:12px;order:3}
  .fuss .gemacht{order:4}
}

/* --- Unterseiten (Rohgeruest, Seiten 2–5 folgen) --- */
.seite{padding:clamp(48px,8vw,110px) var(--rand) clamp(60px,9vw,120px);min-height:60svh}
.seite h1{font-size:clamp(34px,6vw,72px);max-width:16ch}
.seite .lauftext{margin-top:32px;max-width:64ch;color:var(--grau);font-size:clamp(15px,1.5vw,18px);line-height:1.7;display:grid;gap:1em}
.seite .lauftext h2{font-size:clamp(24px,3vw,40px);margin-top:1.2em}
.seite .lauftext h3{font-size:clamp(18px,1.6vw,22px);margin-top:.8em}
.seite .lauftext a{color:var(--kopf);text-decoration:underline;text-underline-offset:3px}
.seite .lauftext ul,.seite .lauftext ol{padding-left:1.2em}

/* --- Kino-Startzustaende (nur wenn JS laeuft und Bewegung erlaubt ist) --- */
html.kino .held h1 .z>span{transform:translateY(110%)}
html.kino .held .unten,html.kino .held .visual{opacity:0}
html.kino .warum .medien .tint,html.kino .person .tint{opacity:1}
html.kino .modell,html.kino .zahl-k,html.kino .person,html.kino .warum .text>*,html.kino .kontakt .feld,html.kino .kosten .feld,html.kino .fragen details{opacity:0}
html.ruhig .held .scrollhinweis i::after{animation:none}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* =====================================================================
   UNTERSEITEN (19.09.2026) — Kurse & Termine, Kosten & Foerderung, Kontakt & Anmeldung, Rechtliches
   ===================================================================== */
.platzhalter{display:inline-block;background:#fff2cc;color:#6b4f00;padding:.05rem .45rem;font-family:var(--display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
.quellen{padding:0 var(--rand) 40px;color:var(--grau);font-size:13px;max-width:80ch}
.linkpfeil.hell{color:#fff}
.cta-reihe{display:flex;align-items:center;gap:clamp(18px,3vw,36px);flex-wrap:wrap}
.cta-reihe .tel{font-family:var(--display);font-weight:700;letter-spacing:.06em;color:var(--kopf);font-size:15px}

/* --- Auftakt (Unterseiten-Held: Text links, Bild rechts) --- */
.auftakt{position:relative;padding:clamp(40px,7vw,96px) var(--rand) clamp(36px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:center;min-height:calc(72svh - var(--kopf-h))}
.auftakt h1{font-size:min(clamp(34px,6.8vw,76px),9vh);margin-top:22px}
/* „Industriemeister“ steht ungetrennt in einer eigenen Zeile: die Schrift schrumpft,
   wenn die Spalte zu schmal wird (Wort = 9,6 em breit; 03.10.2026) */
.auftakt .text,.kosten .feld>div:first-child{container-type:inline-size}
.auftakt h1.passend{font-size:min(clamp(34px,6.8vw,76px),9vh,10cqw)}
.kosten h2.passend{font-size:min(clamp(32px,5.4vw,64px),10cqw)}
.passend .voll{display:block;padding-left:0;white-space:nowrap}
.auftakt h1 .z{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;padding-top:.16em;margin-top:-.16em}
.auftakt h1 .z>span{display:block}
.auftakt h1 .ein,.auftakt h1 .ein2{padding-left:min(100px,10vw)}
.auftakt .text p.lauf{margin-top:clamp(24px,3vw,36px)}
.auftakt .text .cta-reihe{margin-top:28px}
.auftakt .bild{position:relative;aspect-ratio:4/5;overflow:hidden;clip-path:var(--chamfer);background:var(--hell);max-height:70vh;justify-self:end;width:100%}
.auftakt .bild img{width:100%;height:100%;object-fit:cover}
.auftakt .tint{position:absolute;inset:0;background:var(--cyan);mix-blend-mode:hue;opacity:0;pointer-events:none}
html.kino .auftakt h1 .z>span{transform:translateY(110%)}
html.kino .auftakt .text p.lauf,html.kino .auftakt .text .cta-reihe,html.kino .auftakt .bild{opacity:0}
/* 20.09.: kein Tint im Auftakt — er sitzt ganz oben, der Besucher kann nicht vorher scrollen (Steven). */
@media(max-width:900px){.auftakt{grid-template-columns:1fr;min-height:0;padding:28px 20px 36px}.auftakt .bild{aspect-ratio:16/10;max-height:44vh;order:-1}.auftakt h1{font-size:clamp(32px,9.5vw,52px)}.auftakt h1 .ein,.auftakt h1 .ein2{padding-left:min(40px,8vw)}}

/* --- Ankerleiste (klebt unter der Kopfzeile) --- */
.anker{position:sticky;top:var(--kopf-h);z-index:20;display:flex;gap:4px;padding:8px var(--rand);background:rgba(242,241,240,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.anker::-webkit-scrollbar{display:none}
.admin-bar .anker{top:calc(var(--kopf-h) + 32px)}
.anker a{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);padding:8px 14px;white-space:nowrap;clip-path:var(--chamfer-s);transition:color .25s,background .25s}
.anker a:hover{color:var(--kopf)}
@media(max-width:760px){.anker a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px}.anker{padding:4px var(--rand)}}
.anker a.aktiv{background:var(--dunkel);color:#fff}
@media(max-width:900px){.anker{padding:8px 20px}}

/* --- Der Rahmen --- */
.rahmen{padding:clamp(56px,9vw,120px) var(--rand) clamp(40px,6vw,80px);display:grid;gap:clamp(36px,5vw,64px)}
.rahmen .kopfzeile{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px clamp(28px,5vw,80px);align-items:end}
.rahmen .kopfzeile p.lauf{grid-column:2;grid-row:1/3;align-self:end}
.rahmen h2{font-size:clamp(30px,5vw,60px)}
.rahmen h2 .ein{display:block;padding-left:min(160px,18vw)}
.schritte{list-style:none;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);padding-top:28px}
.schritte .linie{position:absolute;left:0;right:0;top:0;height:2px;background:var(--linie)}
.schritte .linie::after{content:"";position:absolute;inset:0;background:var(--cyan);transform-origin:left;transform:scaleX(var(--p,0))}
.schritte li{display:grid;gap:10px;align-content:start;position:relative}
.schritte li::before{content:"";position:absolute;top:-34px;left:0;width:12px;height:12px;background:var(--grund);border:2px solid var(--cyan);transform:rotate(45deg);transition:background .3s}
.schritte li.an::before{background:var(--cyan)}
.schritte .nr{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--cyan-r)}
.schritte h3{font-size:clamp(18px,1.6vw,24px);hyphens:manual}
.schritte p{color:var(--grau);font-size:15px;line-height:1.55;max-width:34ch}
.zulassung{display:grid;gap:22px;border-top:1px solid var(--linie);padding-top:28px}
.zulassung .drei{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:stretch}
.zulassung .bed{background:var(--weiss);clip-path:var(--chamfer-s);padding:22px 22px 24px;color:var(--grau);font-size:15.5px;line-height:1.55}
.zulassung .bed b{color:var(--kopf);font-weight:600}
.zulassung .bed .detail{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--linie);font-size:13.5px;line-height:1.6}
.zulassung .oder{align-self:center;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-r)}
@media(max-width:900px){.rahmen .kopfzeile{grid-template-columns:1fr}.rahmen .kopfzeile p.lauf{grid-column:1;grid-row:auto}.rahmen h2 .ein{padding-left:min(90px,18vw)}.schritte{grid-template-columns:1fr;gap:26px;padding-top:0;padding-left:28px}.schritte .linie{left:5px;right:auto;top:0;bottom:0;width:2px;height:auto}.schritte .linie::after{transform-origin:top;transform:scaleY(var(--p,0))}.schritte li::before{top:4px;left:-28px}.zulassung .drei{grid-template-columns:1fr}}
html.kino .schritte li,html.kino .zulassung>*{opacity:0}

/* --- Fachrichtungen: Bild klebt, Text laeuft --- */
.fach{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);padding:clamp(40px,6vw,80px) var(--rand);border-top:1px solid var(--linie);align-items:start}
.fach .bild{position:sticky;top:calc(var(--kopf-h) + 70px);aspect-ratio:4/5;max-height:calc(100vh - var(--kopf-h) - 100px);overflow:hidden;clip-path:var(--chamfer);background:var(--hell);margin:0}
.fach .bild img{width:100%;height:100%;object-fit:cover}
.fach .tint{position:absolute;inset:0;background:var(--cyan);mix-blend-mode:hue;opacity:0;pointer-events:none}
.fach .bild .label{position:absolute;left:0;bottom:0;background:var(--grund);padding:10px 16px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--kopf);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.fach h2{font-size:clamp(32px,5.4vw,64px)}
.fach h2 .z{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;padding-top:.16em;margin-top:-.16em}
.fach h2 .z>span{display:block}
.fach h2 .ein{padding-left:min(120px,12vw)}
.fach h2 .klein{font-size:.42em;color:var(--grau);letter-spacing:.06em;font-weight:400;margin-top:.3em}
.fach .berufsbild{margin-top:28px;font-size:clamp(17px,1.6vw,21px);color:var(--kopf);max-width:50ch}
.fach dl{margin-top:32px;display:grid;gap:0;border-top:1px solid var(--linie)}
.fach dl>div{display:grid;grid-template-columns:minmax(120px,.28fr) 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--linie)}
.fach dt{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-r);padding-top:4px}
.fach dd{color:var(--grau);font-size:15.5px;line-height:1.6;max-width:56ch}
.fach dd a{color:var(--kopf);text-decoration:underline;text-underline-offset:3px}
.fach .cta-reihe{margin-top:32px}
html.kino .fach h2 .z>span{transform:translateY(110%)}
html.kino .fach .tint{opacity:1}
html.kino .fach .berufsbild,html.kino .fach dl>div,html.kino .fach .cta-reihe{opacity:0}
@media(max-width:900px){.fach{grid-template-columns:1fr;padding:40px 20px;gap:24px}.fach .bild{position:relative;top:auto;aspect-ratio:16/10;max-height:44vh}.fach h2 .ein{padding-left:min(60px,10vw)}.fach dl>div{grid-template-columns:1fr;gap:4px}}

/* --- Wochenplan (Pin + Scrub) --- */
.woche{position:relative;background:var(--grund2);border-top:1px solid var(--linie)}
.woche .buehne{height:100svh;min-height:640px;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:auto 1fr;column-gap:clamp(24px,4vw,72px);padding:calc(var(--kopf-h) + 12px) var(--rand) clamp(22px,4vh,40px)}
.woche .meta{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px}
.woche .modelle-liste{align-self:center;display:grid;gap:clamp(14px,2vh,24px);min-width:0}
.woche h2{font-size:min(clamp(28px,4vw,56px),6.5vh)}
.woche h2 .ein{display:block;padding-left:min(120px,12vw)}
.woche ol{list-style:none;display:grid;gap:clamp(4px,.8vh,8px);border-left:1px solid var(--linie);padding-left:clamp(14px,2vw,26px)}
.zm{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;padding:clamp(6px,1vh,10px) 0;cursor:pointer;position:relative}
.zm::before{content:"";position:absolute;left:calc(-1 * clamp(14px,2vw,26px) - 1px);top:0;bottom:0;width:2px;background:var(--cyan);transform:scaleY(0);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.zm.aktiv::before{transform:none}
.zm .nr{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--hell);transition:color .35s}
.zm h3{font-size:min(clamp(18px,1.9vw,28px),3.4vh);color:var(--hell);transition:color .35s;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.zm h3 small{font-size:.55em;letter-spacing:.1em;color:var(--grau);font-weight:400}
@media(max-width:760px){.zm h3 small{font-size:12px}}
.zm p{color:var(--grau);font-size:clamp(13px,1.05vw,15.5px);line-height:1.5;opacity:.55;transition:opacity .35s}
.zm.aktiv .nr{color:var(--cyan-r)}.zm.aktiv h3{color:var(--kopf)}.zm.aktiv p{opacity:1}
.woche .hinweis{color:var(--grau);font-size:14px;max-width:52ch}
.woche .raster{align-self:stretch;display:grid;grid-template-columns:34px 1fr;grid-template-rows:24px 1fr;min-height:0;padding-top:clamp(8px,2vh,24px)}
.woche .tage{grid-column:2;display:grid;grid-template-columns:repeat(6,1fr);font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--grau);text-align:center}
.woche .stunden{grid-row:2;position:relative;font-family:var(--display);font-size:11px;letter-spacing:.08em;color:var(--grau)}
.woche .stunden span{position:absolute;left:0;transform:translateY(-50%)}
.woche .stunden span:nth-child(1){top:0}.woche .stunden span:nth-child(2){top:12.5%}.woche .stunden span:nth-child(3){top:25%}.woche .stunden span:nth-child(4){top:37.5%}.woche .stunden span:nth-child(5){top:50%}.woche .stunden span:nth-child(6){top:62.5%}.woche .stunden span:nth-child(7){top:75%}.woche .stunden span:nth-child(8){top:87.5%}.woche .stunden span:nth-child(9){top:100%}
.woche .feld{grid-row:2;grid-column:2;position:relative;border:1px solid var(--linie);background:repeating-linear-gradient(180deg,transparent 0,transparent calc(12.5% - 1px),var(--linie) calc(12.5% - 1px),var(--linie) 12.5%),repeating-linear-gradient(90deg,transparent 0,transparent calc(16.666% - 1px),var(--linie) calc(16.666% - 1px),var(--linie) 16.666%);min-height:0}
.woche .bl{position:absolute;left:calc(var(--t) * 16.666% + 3px);width:calc(16.666% - 6px);top:var(--v);height:var(--h);background:var(--cyan);clip-path:var(--chamfer-s);transform-origin:top;display:flex;align-items:flex-end;padding:6px;font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.06em;color:var(--dunkel);overflow:hidden;opacity:.18;transition:opacity .4s}
.woche .bl span{white-space:nowrap}
.woche .bl.an{opacity:1}
.woche .bl.vollzeit{background:#dcdedf}
.woche .oder-hinweis{position:absolute;left:calc(2 * 16.666% + 50% / 6);top:calc(42.19% + 14px);transform:translateX(-50%);font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-r);opacity:0;transition:opacity .4s}
.woche .oder-hinweis.an{opacity:1}
@media(max-width:900px){
  .woche .buehne{height:auto;min-height:0;grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:clamp(48px,8vw,80px) 20px 40px;row-gap:24px}
  .woche h2 .ein{padding-left:min(60px,10vw)}
  .woche .meta span+span{display:none}
  .woche .raster{height:min(62vw,420px);padding-top:0}
  .zm h3{color:var(--kopf)}.zm .nr{color:var(--cyan-r)}.zm p{opacity:1}.zm::before{display:none}
  .woche .bl{font-size:9px;padding:4px;opacity:.35}
  .woche .bl span{display:none}
  .woche .bl.an{opacity:1}
}
html:not(.kino) .woche .buehne{height:auto;min-height:0}
html:not(.kino) .woche .bl{opacity:1}
html:not(.kino) .zm h3{color:var(--kopf)}html:not(.kino) .zm .nr{color:var(--cyan-r)}html:not(.kino) .zm p{opacity:1}
html:not(.kino) .woche .oder-hinweis{opacity:1}

/* --- Termine --- */
.termine{padding:clamp(56px,9vw,120px) var(--rand);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);align-items:start}
.termine h2{font-size:clamp(30px,4.6vw,56px)}
.termine h2 .ein{display:block;padding-left:min(120px,14vw)}
.termine .liste{display:grid;gap:28px}
.termine table{width:100%;border-collapse:collapse;font-size:15px}
.termine th{text-align:left;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);padding:0 12px 12px 0;border-bottom:1px solid var(--kopf)}
.termine td{padding:14px 12px 14px 0;border-bottom:1px solid var(--linie);color:var(--grau);vertical-align:top}
.termine td b{color:var(--kopf);font-weight:600;white-space:nowrap}
.termine .status{display:inline-block;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;clip-path:var(--chamfer-s);white-space:nowrap}
.termine .status.frei{background:var(--cyan);color:var(--dunkel)}.termine .status.wenige{background:#fff2cc;color:#6b4f00}.termine .status.voll{background:#dcdedf;color:var(--grau)}
.termine .leer{border-left:2px solid var(--cyan);padding-left:20px;display:grid;gap:12px}
.termine .leer .display{font-size:clamp(20px,2.2vw,28px);max-width:22ch}
@media(max-width:900px){.termine{grid-template-columns:1fr;padding-left:20px;padding-right:20px}.termine th:nth-child(3),.termine td:nth-child(3){display:none}}
html.kino .termine .liste>*{opacity:0}

/* --- Kosten & Foerderung: Rechner --- */
.rechner{padding:clamp(40px,7vw,96px) var(--rand) clamp(40px,6vw,72px);display:grid;gap:clamp(24px,3vw,40px)}
.rechner h2{font-size:clamp(30px,5vw,60px)}
.rechner h2 .ein{display:block;padding-left:min(160px,18vw)}
.rechner-feld{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:20px;align-items:start}
.rechner .felder{background:var(--weiss);clip-path:var(--chamfer);padding:24px 24px 28px;display:flex;flex-direction:column;gap:18px}
.rechner label{display:flex;flex-direction:column;gap:6px;font-size:.9rem}
.rechner label span{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:var(--grau)}
.rechner select{font:inherit;font-size:16px;padding:12px 40px 12px 14px;border:1px solid var(--linie);background:var(--grund2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232b3033' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center/12px;color:var(--kopf);clip-path:var(--chamfer-s);appearance:none;-webkit-appearance:none;cursor:pointer;min-height:48px}
.rechner select:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.rechner .klein{font-size:13px;color:var(--grau);line-height:1.5}
.rechner .ergebnis{background:var(--dunkel);color:#fff;clip-path:var(--chamfer);padding:clamp(24px,3vw,40px);display:grid;gap:18px;justify-items:start}
.rechner .zahl-zeile{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.rechner .zahl{font-family:var(--display);font-weight:700;font-size:clamp(44px,7vw,84px);line-height:.92;color:var(--cyan);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rechner .zahl-was{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:var(--hell)}
.rechner .saetze{display:grid;gap:10px;font-size:16px;color:#e9ebec;max-width:60ch;line-height:1.55}
.rechner .saetze b{color:#fff;font-weight:600}
.rechner .aufschluss{width:100%;border-top:1px solid rgba(255,255,255,.16);padding-top:14px;display:grid;gap:6px;font-size:14.5px}
.rechner .aufschluss div{display:flex;justify-content:space-between;gap:16px;color:#cfd3d5}
.rechner .aufschluss div b{color:#fff;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.rechner .aufschluss .summe{border-top:1px solid rgba(255,255,255,.16);margin-top:6px;padding-top:10px;color:#fff;font-size:16px}
.rechner .aufschluss .zzgl{font-size:13px;color:#aeb4b7}
.rechner .ergebnis .knopf{margin-top:6px}
.rechner .hinweis{background:var(--cyan-feld);color:var(--kopf);clip-path:var(--chamfer-s);padding:16px 20px;font-size:15px;line-height:1.55;max-width:80ch}
.rechner .fuss{font-size:13px;color:var(--grau);max-width:90ch;line-height:1.55}
.wechsel{transition:opacity .18s ease}
.wechsel.still{opacity:.35}
html.kino .rechner-feld{opacity:0}
@media(max-width:900px){.rechner{padding-left:20px;padding-right:20px}.rechner h2 .ein{padding-left:min(90px,18vw)}.rechner-feld{grid-template-columns:1fr}.rechner .felder{padding:20px}.rechner .ergebnis{padding:24px 20px}.rechner .aufschluss div{font-size:14px}}

/* --- Wo das Geld hingeht (Pin + Scrub) --- */
.geld{position:relative;background:var(--grund2);border-top:1px solid var(--linie)}
.geld .buehne{height:100svh;min-height:600px;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;column-gap:clamp(24px,5vw,90px);padding:calc(var(--kopf-h) + 12px) var(--rand) clamp(28px,5vh,56px)}
.geld .meta{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px}
.geld .text{align-self:center;display:grid;gap:clamp(18px,3vh,32px)}
.geld h2{font-size:min(clamp(30px,4.6vw,64px),7vh)}
.geld h2 .ein{display:block;padding-left:min(120px,12vw)}
.geld .phasen{position:relative;min-height:7.5em;font-size:clamp(16px,1.5vw,21px);line-height:1.55;color:var(--grau)}
.geld .phase{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s cubic-bezier(.22,1,.36,1);max-width:40ch}
.geld .phase.aktiv{opacity:1;transform:none;transition-delay:.15s}
.geld .phase b{color:var(--kopf);font-weight:600;display:block;font-size:1.1em;margin-bottom:.3em}
.geld .hinweis-klein{font-size:14px;color:var(--grau);max-width:52ch}
.geld .balken{align-self:center;display:grid;gap:12px}
.geld .spur{position:relative;height:clamp(140px,32vh,300px);background:var(--weiss);clip-path:var(--chamfer);overflow:hidden}
.geld .grund,.geld .teil{position:absolute;top:0;bottom:0;display:flex;align-items:flex-end;padding:14px 16px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--kopf);transform-origin:left center}
.geld .grund{left:0;right:0;background:#e6e7e8}
.geld .teil.zuschuss{left:0;width:50%;background:var(--cyan);color:var(--dunkel)}
.geld .teil.erlass{left:50%;width:25%;background:#8ddff0;color:var(--dunkel)}
.geld .teil.rest{left:75%;width:25%;background:transparent;color:var(--kopf)}
.geld .teil.rest::before{content:"";position:absolute;inset:0;border-left:2px solid var(--dunkel);pointer-events:none}
.geld .teil.rest{padding:14px 10px;align-items:flex-start;justify-content:flex-start}
.geld .teil.rest b{writing-mode:vertical-rl;transform:rotate(180deg)}
.geld .teil.praemie{left:90%;width:10%;background:var(--dunkel);color:#fff;padding:14px 8px;justify-content:center}
.geld .teil.praemie b{writing-mode:vertical-rl;transform:rotate(180deg)}
.geld .teil b{white-space:normal;line-height:1.35;font-weight:700}
.geld .grund b{white-space:nowrap}
.geld .skala{display:grid;grid-template-columns:50% 25% 25%;font-family:var(--display);font-size:11px;letter-spacing:.1em;color:var(--grau);position:relative;padding-right:2em}
.geld .skala span:nth-child(4){position:absolute;right:0}
.geld .teil.praemie.leer{display:none}
.geld .balken-summe{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap;margin-top:6px;font-size:14px;color:var(--grau)}
.geld .balken-summe b{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,36px);line-height:1;color:var(--kopf);white-space:nowrap}
.geld .balken-summe [data-geld="wahl"]{color:var(--kopf)}
@media(max-width:700px){
  .geld .buehne{height:auto;min-height:0;grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:clamp(48px,8vw,80px) 20px 40px;row-gap:28px}
  .geld .meta span+span{display:none}
  .geld h2 .ein{padding-left:min(60px,10vw)}
  .geld .phasen{min-height:0;display:grid;gap:16px}
  .geld .phase{position:static;opacity:1;transform:none;padding-left:16px;border-left:2px solid var(--cyan)}
  .geld .spur{height:132px}
  .geld .skala span:nth-child(3){visibility:hidden}/* 75-%-Marke kollidiert auf 375 px mit "100 % = Summe" */
  /* 8 und 9 px waren nur noch Dekoration. Die beiden schmalen Segmente tragen
     auf dem Handy keine Schrift mehr — was dort stand, steht ohnehin darueber
     im Text und darunter in der Summe (Steven, 27.09.2026). */
  .geld .grund,.geld .teil{padding:8px;font-size:11px;letter-spacing:.04em}
  .geld .teil b{white-space:normal;line-height:1.25}
  .geld .balken{order:2}
  .geld .teil.praemie b,.geld .teil.rest b{display:none}
  .geld .teil.rest{padding:8px 6px}
  .geld .skala{font-size:11px}
  .geld .balken-summe{font-size:13px}
}
html:not(.kino) .geld .buehne{height:auto;min-height:0}
html:not(.kino) .geld .phasen{min-height:0;display:grid;gap:16px}
html:not(.kino) .geld .phase{position:static;opacity:1;transform:none}
/* Ohne Pin, auch am PC (Kunde, 03.10.2026): ein Scroll, die Balken rollen von selbst aus;
   die vier Saetze stehen untereinander wie auf dem Handy. */
@media(min-width:701px){
  .geld .buehne{height:auto;min-height:0;padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(56px,8vw,110px);row-gap:clamp(20px,3vw,36px)}
  .geld .phasen{min-height:0;display:grid;gap:16px;font-size:clamp(15px,1.15vw,18px)}
  .geld .phase{position:static;opacity:1;transform:none;padding-left:16px;border-left:2px solid var(--cyan)}
}
.geld .balken-summe .zzgl{flex-basis:100%;text-align:right;font-size:13px;color:var(--grau)}

/* --- Praemien --- */
.praemien{padding:clamp(56px,9vw,120px) var(--rand);display:grid;gap:clamp(24px,3vw,40px)}
.praemien .kopfzeile{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px clamp(28px,5vw,80px);align-items:end}
.praemien .kopfzeile p.lauf{grid-column:2;grid-row:1/3;align-self:end}
.praemien h2{font-size:clamp(30px,5vw,60px)}
.praemien h2 .ein{display:block;padding-left:min(160px,18vw)}
.praemien .frist{background:var(--cyan);color:var(--dunkel);clip-path:var(--chamfer);padding:20px 24px;font-size:16px;line-height:1.55;max-width:90ch}
.praemien .frist:empty{display:none}
.praemien .frist b{font-weight:700}
.praemien .liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.praemien .land{background:var(--weiss);clip-path:var(--chamfer-s);padding:18px 18px 20px;display:grid;gap:6px;align-content:start}
.praemien .land.null{background:transparent;border:1px solid var(--linie);clip-path:none}
.praemien .land .name{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--kopf)}
.praemien .land .betrag{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.4vw,34px);line-height:1;color:var(--cyan-r);font-variant-numeric:tabular-nums}
.praemien .land.null .betrag{color:var(--hell)}
.praemien .land .notiz{font-size:13px;color:var(--grau);line-height:1.45}
.praemien .stand{font-size:13px;color:var(--grau)}
@media(max-width:1100px){.praemien .liste{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.praemien{padding-left:20px;padding-right:20px}.praemien .kopfzeile{grid-template-columns:1fr}.praemien .kopfzeile p.lauf{grid-column:1;grid-row:auto}.praemien h2 .ein{padding-left:min(90px,18vw)}}
@media(max-width:640px){.praemien .liste{grid-template-columns:repeat(2,minmax(0,1fr))}.praemien .land{padding:14px}}

/* --- Arbeitgeber --- */
.arbeitgeber{padding:0 var(--rand) clamp(56px,9vw,120px);display:grid;gap:clamp(24px,3vw,40px)}
.arbeitgeber h2{font-size:clamp(30px,5vw,60px)}
.arbeitgeber h2 .ein{display:block;padding-left:min(160px,18vw)}
.arbeitgeber .punkte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.arbeitgeber .punkte>div{border-top:2px solid var(--kopf);padding-top:18px;display:grid;gap:8px;align-content:start}
.arbeitgeber h3{font-size:clamp(16px,1.4vw,20px)}
.arbeitgeber p{color:var(--grau);font-size:15px;line-height:1.6}
.arbeitgeber p a{color:var(--kopf);text-decoration:underline;text-underline-offset:3px}
html.kino .reveal,html.kino .reveal-kinder>*{opacity:0}
@media(max-width:900px){.arbeitgeber{padding-left:20px;padding-right:20px}.arbeitgeber h2 .ein{padding-left:min(90px,18vw)}.arbeitgeber .punkte{grid-template-columns:1fr}}

/* --- Kontakt & Anmeldung --- */
.kontakt-auftakt{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.kontakt-auftakt .karte{background:var(--dunkel);color:#fff;clip-path:var(--chamfer);padding:clamp(28px,4vw,56px);display:grid;gap:26px;justify-items:start;align-self:center;width:100%}
.kontakt-auftakt .karte a.gross{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,36px);color:#fff;letter-spacing:.02em;line-height:1.1;overflow-wrap:anywhere}
.kontakt-auftakt .karte a.gross:hover{color:var(--cyan)}
.kontakt-auftakt .karte small{display:block;font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.kontakt-auftakt .karte address{font-style:normal;color:rgba(255,255,255,.75);line-height:1.5;font-size:16px}
html.kino .kontakt-auftakt .karte{opacity:0}
@media(max-width:900px){.kontakt-auftakt{grid-template-columns:1fr}.kontakt-auftakt .karte{order:2;padding:28px 22px}}

.anfahrt{padding:clamp(56px,9vw,120px) var(--rand) clamp(40px,6vw,80px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);align-items:start;border-top:1px solid var(--linie)}
.anfahrt h2{font-size:clamp(30px,5vw,60px)}
.anfahrt h2 .ein{display:block;padding-left:min(160px,18vw)}
.anfahrt .text{display:grid;gap:22px}
.anfahrt .klein{font-size:14px;color:var(--grau)}
@media(max-width:900px){.anfahrt{grid-template-columns:1fr;padding-left:20px;padding-right:20px}.anfahrt h2 .ein{padding-left:min(90px,18vw)}}

.rueckruf{padding:clamp(40px,6vw,80px) var(--rand) clamp(56px,9vw,120px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);align-items:start}
.rueckruf h2{font-size:clamp(30px,5vw,60px)}
.rueckruf h2 .ein{display:block;padding-left:min(160px,18vw)}
.rueckruf .text{display:grid;gap:22px}
.rueckruf .unternehmen{border-top:1px solid var(--linie);padding-top:22px;display:grid;gap:10px;margin-top:10px}
.rueckruf .unternehmen p{color:var(--grau);font-size:15.5px;line-height:1.6;max-width:48ch}
.rueckruf .unternehmen a{color:var(--kopf);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.rueckruf{grid-template-columns:1fr;padding-left:20px;padding-right:20px}.rueckruf h2 .ein{padding-left:min(90px,18vw)}}

.anmeldung{padding:clamp(56px,9vw,120px) var(--rand);background:var(--grund2);border-top:1px solid var(--linie);display:grid;gap:clamp(28px,4vw,48px)}
.anmeldung .kopfzeile{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px clamp(28px,5vw,80px);align-items:end}
.anmeldung .kopfzeile p.lauf{grid-column:2;grid-row:1/3;align-self:end}
.anmeldung h2{font-size:clamp(30px,5vw,60px)}
.anmeldung h2 .ein{display:block;padding-left:min(160px,18vw)}
@media(max-width:900px){.anmeldung{padding-left:20px;padding-right:20px}.anmeldung .kopfzeile{grid-template-columns:1fr}.anmeldung .kopfzeile p.lauf{grid-column:1;grid-row:auto}.anmeldung h2 .ein{padding-left:min(90px,18vw)}}

/* --- Formulare (Contact Form 7) --- */
.formfeld{background:var(--weiss);clip-path:var(--chamfer);padding:clamp(22px,3vw,40px)}
.formfeld.gross{max-width:860px}
.ba-form{display:grid;gap:18px}
.ba-form label{display:grid;gap:6px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:var(--grau)}
.ba-form label small{font-family:var(--text);font-weight:400;text-transform:none;letter-spacing:0;font-size:12px;color:var(--grau)}
.ba-form .reihe{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ba-form .wpcf7-form-control-wrap{display:block}
.ba-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),.ba-form select,.ba-form textarea{width:100%;font:inherit;font-family:var(--text);font-size:16px;padding:12px 14px;border:1px solid var(--linie);background:var(--grund2);color:var(--kopf);clip-path:var(--chamfer-s);min-height:48px;appearance:none;-webkit-appearance:none;border-radius:0}
.ba-form select{padding-right:40px;background:var(--grund2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232b3033' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center/12px;cursor:pointer}
.ba-form textarea{min-height:110px;resize:vertical}
.ba-form input:focus-visible,.ba-form select:focus-visible,.ba-form textarea:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.ba-form input.fehlt,.ba-form select.fehlt,.ba-form textarea.fehlt,.ba-form .wpcf7-not-valid{border-color:#c0392b;background-color:#fff5f3}
.ba-form .wpcf7-not-valid-tip{display:block;font-family:var(--text);text-transform:none;letter-spacing:0;font-size:13px;color:#c0392b;margin-top:4px}
.ba-form .gruppe{border:0;padding:0;display:grid;gap:8px}
.ba-form .gruppe legend{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:var(--grau);margin-bottom:8px}
.ba-form .wpcf7-radio,.ba-form .wpcf7-checkbox{display:flex;flex-wrap:wrap;gap:8px 14px}
.ba-form .wpcf7-list-item{margin:0}
.ba-form .wpcf7-list-item label{display:inline-flex;align-items:center;gap:8px;font-family:var(--text);font-weight:500;text-transform:none;letter-spacing:0;font-size:15px;color:var(--kopf);cursor:pointer}
.ba-form input[type=radio],.ba-form input[type=checkbox]{width:20px;height:20px;accent-color:var(--cyan-r);margin:0;flex:none}
.ba-form .knoepfe{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px}
.ba-form .knoepfe small{font-size:12.5px;color:var(--grau);max-width:40ch;line-height:1.45}
.ba-form .knopf{cursor:pointer;font-family:var(--display)}
.ba-form input[type=submit].knopf{width:auto;min-height:0;clip-path:var(--chamfer);appearance:none;-webkit-appearance:none}
.ba-form .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ba-form .wpcf7-spinner{margin:0 0 0 8px}
.wpcf7 form .wpcf7-response-output{margin:8px 0 0;padding:14px 18px;border:0;clip-path:var(--chamfer-s);font-size:15px;line-height:1.5;background:var(--cyan-feld);color:var(--kopf)}
.wpcf7 form.sent .wpcf7-response-output{background:var(--cyan);color:var(--dunkel);font-weight:600}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output,.wpcf7 form.spam .wpcf7-response-output{background:#fff2cc;color:#6b4f00}
/* Schritte */
.schrittleiste{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px;counter-reset:s}
.schrittleiste li{counter-increment:s;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--hell);padding:10px 0 12px;border-top:2px solid var(--linie);transition:color .3s,border-color .3s}
.schrittleiste li::before{content:"0" counter(s) " — ";color:inherit}
.schrittleiste li.aktiv{color:var(--kopf);border-top-color:var(--cyan)}
.schrittleiste li.fertig{color:var(--cyan-r);border-top-color:var(--cyan);cursor:pointer}
.schritt{border:0;padding:0;display:grid;gap:18px}
.schritt[hidden]{display:none}
.schritt legend{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(18px,1.6vw,22px);color:var(--kopf);margin-bottom:6px}
.zusammenfassung{display:grid;gap:0;border-top:1px solid var(--linie)}
.zusammenfassung>div{display:grid;grid-template-columns:minmax(110px,.3fr) 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--linie)}
.zusammenfassung dt{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-r);padding-top:2px}
.zusammenfassung dd{color:var(--kopf);font-size:15.5px;line-height:1.55}
.zusammenfassung dd .platzhalter{margin-left:6px}
.haken{display:grid;gap:10px}
.haken .wpcf7-acceptance label{display:inline-flex;align-items:flex-start;gap:10px;font-family:var(--text);font-weight:500;text-transform:none;letter-spacing:0;font-size:15px;color:var(--kopf);line-height:1.45}
.haken .wpcf7-acceptance label a{color:var(--kopf);text-decoration:underline;text-underline-offset:3px}
.haken .wpcf7-acceptance input{margin-top:2px}
.reservierung{background:var(--cyan-feld);clip-path:var(--chamfer-s);padding:14px 18px;font-size:15px;line-height:1.55;color:var(--kopf)}
.reservierung b{font-weight:700}
html.kino .reveal{opacity:0}
@media(max-width:640px){.ba-form .reihe{grid-template-columns:1fr}.schrittleiste{grid-template-columns:1fr;gap:2px}.schrittleiste li{padding:6px 0;border-top-width:1px}.zusammenfassung>div{grid-template-columns:1fr;gap:4px}.formfeld{padding:20px 16px}}

/* --- Rechtliches --- */
.recht{padding:clamp(40px,7vw,96px) var(--rand) clamp(60px,9vw,120px);display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,2.4fr);gap:clamp(28px,5vw,80px);align-items:start}
.recht .seitennav{position:sticky;top:calc(var(--kopf-h) + 24px);display:grid;gap:18px}
.recht .seitennav nav{display:grid;gap:2px;border-left:1px solid var(--linie)}
.recht .seitennav nav a{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);padding:8px 16px;position:relative;transition:color .25s}
.recht .seitennav nav a::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--cyan);transform:scaleY(0);transition:transform .3s}
.recht .seitennav nav a:hover,.recht .seitennav nav a.aktiv{color:var(--kopf)}
.recht .seitennav nav a.aktiv::before{transform:none}
.recht .seitennav .klein{font-size:13px;color:var(--grau);line-height:1.5}
.recht h1{font-size:clamp(34px,6vw,72px)}
.recht .inhalt{display:grid;gap:clamp(40px,6vw,72px);max-width:72ch}
.recht article{display:grid;gap:14px;border-top:1px solid var(--linie);padding-top:28px;scroll-margin-top:calc(var(--kopf-h) + 24px)}
.recht article h2{font-size:clamp(24px,3vw,40px);margin-bottom:8px}
.recht article h3{font-size:clamp(16px,1.4vw,19px);margin-top:14px}
.recht article p{color:var(--grau);font-size:clamp(15px,1.4vw,17px);line-height:1.7}
.recht article p b{color:var(--kopf);font-weight:600}
.recht article ul{display:grid;gap:8px;padding-left:1.2em;color:var(--grau);font-size:clamp(15px,1.4vw,17px);line-height:1.7}
.recht article li b{color:var(--kopf);font-weight:600}
.recht article a{color:var(--kopf);text-decoration:underline;text-underline-offset:3px}
/* NUR die gelben Luecken auf der Rechtsseite. Frueher stand hier .offen —
   das faerbte auch das geoeffnete Menue gelb, weil es .menue.offen heisst
   (Steven, 27.09.2026). */
span.offen{display:inline;background:#fff2cc;color:#6b4f00;padding:.1em .4em;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-size:.95em}
@media(max-width:900px){.recht{grid-template-columns:1fr;padding-left:20px;padding-right:20px}.recht .seitennav{position:static}.recht .seitennav nav{border-left:0;display:flex;flex-wrap:wrap;gap:4px}.recht .seitennav nav a{padding:8px 12px;background:var(--weiss);clip-path:var(--chamfer-s)}.recht .seitennav nav a::before{display:none}}

/* ===== Schnellkontakt-Streifen, nur Handy (20.09.2026) =====================
   Anruf zuerst: Facharbeiter rufen eher an, als ein Formular auszufuellen.
   Der Streifen liegt fest unten, der Nach-oben-Knopf rueckt darueber. */
.ruf{display:none}
@media(max-width:760px){
  .ruf{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:28;
       padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(242,241,240,.94);
       backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--linie)}
  .ruf a{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 12px;
         font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px;
         clip-path:var(--chamfer-s);text-decoration:none}
  .ruf a.tel{background:var(--cyan);color:var(--dunkel);border:1px solid var(--cyan-r)}
  .ruf a.anm{background:var(--dunkel);color:#fff}
  body{padding-bottom:78px}
  .hoch{bottom:86px}
  .menue{padding-bottom:88px}
}
/* Auf dem Tablet zeigte die Chat-Blase die ganze Pille und legte sich damit ueber
   den Inhalt (Steven am iPad, 27.09.2026). Bis 1024 px nur noch der Kreis — dieselben
   Regeln, die das Widget selbst ab 640 px setzt. */
@media(min-width:641px) and (max-width:1200px){
  .leni-knopf{right:16px;padding:0;gap:0;filter:drop-shadow(0 8px 16px rgba(26,28,30,.32))}
  .leni-knopf::before{display:none}
  .leni-knopf .leni-text,.leni-knopf .leni-pfeil{display:none}
  .leni-gesicht{width:56px;height:56px;box-shadow:0 0 0 3px var(--cyan)}
  .leni-ki{display:block}
}

/* Fuenf Wege auf dem Tablet: der Text lief in einer halbbreiten Spalte, das Bild
   ueber die ganze Breite. Beide auf dieselbe Breite gebracht (27.09.2026). */
@media(min-width:761px) and (max-width:900px){
  .wege .mbild{max-width:560px}
  .weg .mehr p{max-width:560px}
}

/* Die Chatblase taucht erst auf, wenn man zu scrollen beginnt — auf dem ersten
   Bildschirm liegt sie sonst im Text. Die Anruf-Leiste bleibt sichtbar. */
html.ganz-oben .leni-knopf{opacity:0;pointer-events:none}
.leni-knopf{transition:opacity .3s}
@media print{.ruf{display:none}}

/* Treppen-Einzug im Held weiter nach rechts (Steven, 20.09.2026).
   Nur ab Tablet aufwaerts — auf dem Handy bliebe sonst zu wenig Textbreite. */
@media(min-width:761px){ :root{ --einzug:min(max(280px,28vw),34vw); } }

/* Team: vier Personen statt drei — Bilder kleiner, damit die Reihe ruhig bleibt (20.09.2026). */
.team .raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.team .person figure{aspect-ratio:1/1;max-width:260px}
/* Karten mittig: Foto, Rolle, Name, Text (Steven, 03.10.2026) */
.team .person{text-align:center}
.team .person figure{margin-inline:auto}
.team .person h3{font-size:clamp(16px,1.25vw,19px)}
.team .person p{font-size:14.5px}
/* Bild verlinkt auf LinkedIn (Bjarne, Finn — 03.10.2026); kleines "in" zeigt, dass es klickbar ist */
.person .profil{display:block}
.person .profil .li{position:absolute;right:10px;bottom:10px;z-index:1;width:30px;height:30px;display:grid;place-items:center;background:#0A66C2;color:#fff;font-family:var(--text);font-weight:700;font-size:16px;line-height:1;border-radius:3px;transition:background .2s}
.person .profil:hover .li,.person .profil:focus-visible .li{background:var(--dunkel)}
.person .profil:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media(max-width:1180px){.team .raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.team .person figure{max-width:300px}
  /* Drei Personen in zwei Spalten: die dritte steht allein — mittig statt links (03.10.2026) */
  .team .person:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 12px)}}
/* Auf dem Handy standen die Portraets als volle Breite im Hochformat da — ein Bild
   je Bildschirm, viel zu laut fuer vier Personen. Zwei Spalten, quadratisch, die
   Beschreibung darunter kleiner (Steven, 27.09.2026). */
@media(max-width:560px){
  .team .raster{grid-template-columns:1fr 1fr;gap:16px 14px}
  .team .person figure{max-width:none;aspect-ratio:1/1}
  .team .person{gap:8px}
  .team .person h3{font-size:16px;line-height:1.25}
  .team .person .rolle{font-size:10.5px;letter-spacing:.1em}
  .team .person p{font-size:13px;line-height:1.5}
  .team .person:last-child:nth-child(odd){width:calc(50% - 7px)}
}

/* Dezente Signatur im Fuss: kleine Marke, entsaettigt — erst beim Hover in Farbe (20.09.2026). */
.fuss .gemacht{display:inline-flex;align-items:center;gap:10px;color:#666a6d;text-decoration:none;font-size:12.5px;white-space:nowrap}
.fuss .gemacht img{height:22px;width:auto;filter:grayscale(1) opacity(.62);transition:filter .3s,transform .3s}
.fuss .gemacht b{font-weight:600;color:#666a6d;transition:color .25s}
.fuss .gemacht:hover img{filter:none;transform:translateY(-1px)}
.fuss .gemacht:hover b{color:var(--kopf)}
@media(max-width:760px){.fuss .gemacht{font-size:12px}}

/* Tippziele auf den Unterseiten: die grossen Kontaktzeilen, das Einwilligungs-
   Kaestchen und die Rechtsseiten-Navigation lagen unter 44 px (27.09.2026). */
@media(max-width:760px){
  .kontakt .daten a.gross{display:inline-flex;align-items:center;min-height:44px}
  .recht .seitennav nav a{display:flex;align-items:center;min-height:44px;padding:0 16px}
  .ba-form input[type=radio],.ba-form input[type=checkbox]{width:24px;height:24px}
  .ba-form .wpcf7-list-item label{min-height:44px;align-items:center}
  .kontakt-auftakt .karte a.gross,.termine .cta-reihe a.tel{display:inline-flex;align-items:center;min-height:44px}
}

/* ====== OUVERTUERE: die Tafel klappt auf (02.10.2026) ======================
   Vorbild ist die Kulturring-Ouvertuere: Entscheidung vor dem ersten Farbauftrag,
   Vorlage im Fuss, Zeitleiste in main.js, am Ende fliegt das Logo in die Kopfzeile.
   Hier sind es zwei Tafelfluegel mit Scharnier in der Mitte statt zweier
   Vorhanghaelften. */
html.tafel-zu{background:#2a2f31}
/* Platz der Scrollleiste immer reserviert, nicht nur waehrend der Sperre:
   sonst aendern sich Seitenbreite und vw am Ende des Intros und das Heldenbild
   bzw. der vw-Einzug zucken (Windows, 03.10.2026). */
html{scrollbar-gutter:stable}
html.tafel-fest{overflow:hidden}
/* Die Seite wird nicht versteckt, sondern ABGEDECKT: darunter rendert sie schon
   fertig, und wenn die Tafel aufklappt, steht sie da — kein Schwarz, kein leeres
   Weiss dazwischen (Steven, 02.10.2026). Die Abdeckung gilt nur, bis die Tafel
   gebaut ist; danach deckt die Tafel selbst. */
html.tafel-zu body::before{content:"";position:fixed;inset:0;z-index:99;
  background:#2a2f31 url("assets/img/tafel-raum.webp") center/cover}

#ba-tafel{position:fixed;inset:0;z-index:100;overflow:hidden}
/* Der Grund ist eine eigene Schicht: ein Farbverlauf laesst sich nicht ueber
   backgroundColor wegblenden, eine Schicht schon (02.10.2026). */
#ba-tafel .ba-grund{position:absolute;inset:0;background:
  radial-gradient(ellipse 75% 70% at 50% 46%,rgba(20,18,16,0) 30%,rgba(20,18,16,.55) 100%),
  url("assets/img/tafel-raum.webp") center/cover}
/* Schleier unter dem Raum: beim Aufklappen sieht man die Seite nur verschwommen,
   scharf wird sie erst, wenn die Fluegel weg sind (Steven, 03.10.2026). */
#ba-tafel .ba-schleier{position:absolute;inset:0;background:rgba(246,249,250,.86);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
#ba-tafel .ba-raum{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;perspective:1700px;perspective-origin:50% 45%}
#ba-tafel .ba-fluegel{position:relative;width:min(42vw,calc(84vh*.798));aspect-ratio:880/1103;
  will-change:transform;backface-visibility:hidden}
/* Die Platte traegt das Foto. Gespiegelt wird nur sie — spiegelte man den ganzen
   Fluegel, verschoebe scaleX(-1) ihn um seine eigene Breite nach rechts
   (am 02.10.2026 im Browser gemessen: 1178 statt 640). */
#ba-tafel .ba-platte{position:absolute;inset:0;background:url("assets/img/tafel.webp") center/100% 100% no-repeat}
#ba-tafel .ba-rechts .ba-platte{transform:scaleX(-1)}
#ba-tafel .ba-links{transform-origin:left center}
#ba-tafel .ba-rechts{transform-origin:right center}
/* Der rechte Fluegel ist dasselbe Foto, gespiegelt — sonst sieht man zweimal
   dieselbe Maserung nebeneinander. Die Kreide darauf wird zurueckgedreht. */
/* Scharnier: Schatten direkt an den Innenkanten der Fluegel. Frueher ein eigener
   Balken ueber die ganze Raumhoehe — auf dem Handy stand er als Stange quer durchs
   Bild (03.10.2026). So geht er mit den Fluegeln auf. */
#ba-tafel .ba-scharnier{display:none}
#ba-tafel .ba-links::after,#ba-tafel .ba-rechts::after{content:"";position:absolute;top:2%;bottom:2%;
  width:5px;z-index:3;pointer-events:none}
#ba-tafel .ba-links::after{right:-2px;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.55))}
#ba-tafel .ba-rechts::after{left:-2px;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0))}

/* Die Fluegel sind Container: alles darauf wird in cqw gemessen und waechst
   mit der Tafel — auf dem Handy dieselbe Komposition, nur kleiner. */
#ba-tafel .ba-fluegel{container-type:inline-size}
@font-face{font-family:"Caveat Kreide";src:url("assets/fonts/caveat-700.woff2") format("woff2");
  font-weight:700;font-display:block}
/* Kreidekoernung: eine Maske ueber allem, was auf der Tafel steht */
#ba-tafel .ba-blatt{position:absolute;inset:7.5% 8.5%;font-family:"Caveat Kreide",var(--text);
  font-weight:700;color:#f3f1ec;line-height:1;
  -webkit-mask-image:url("assets/img/kreide-maske.webp");mask-image:url("assets/img/kreide-maske.webp");
  -webkit-mask-size:120px;mask-size:120px}
#ba-tafel .ba-blatt>*{position:absolute;opacity:0}

/* --- linker Fluegel --- */
/* Platz des Logos: mittig, leicht schraeg wie die Kreide. Das Logo selbst ist
   .ba-flug und wird per Skript genau hierauf gelegt (03.10.2026). */
#ba-tafel .ba-name{left:4%;top:12%;width:92%;aspect-ratio:520/132;transform:rotate(-6deg)}
#ba-tafel .ba-strich{height:1.1cqw;min-height:3px;border-radius:2cqw;background:#FF4D4D;
  transform-origin:left center;box-shadow:0 0 1.6cqw rgba(255,77,77,.4)}
#ba-tafel .ba-strich.oben{left:2%;top:45%;width:94%}
#ba-tafel .ba-strich.unten{left:-1%;top:61%;width:98%}
/* Kreide-Rot #FF4D4D: auf dem Schiefer 4,18:1 — fuer Schrift dieser Groesse reicht 3:1. */
#ba-tafel .ba-claim{left:0;top:48.5%;font-size:10.8cqw;color:#FF4D4D;transform:rotate(-8deg);
  transform-origin:left center;white-space:nowrap;text-shadow:0 0 .14em rgba(255,77,77,.35)}
#ba-tafel .ba-zeichnung{height:auto;overflow:visible}
#ba-tafel .ba-birne{left:2%;bottom:3%;width:25%}
#ba-tafel .ba-geodreieck{left:45%;bottom:3%;width:27%}
#ba-tafel .ba-kreidestuecke{right:-2%;bottom:4%;width:20%}

/* --- rechter Fluegel --- */
#ba-tafel .ba-formel{left:10%;top:2%;font-size:27cqw;display:flex;align-items:flex-start;gap:.14em;
  transform:rotate(-3deg);text-shadow:0 0 .12em rgba(255,255,255,.22)}
#ba-tafel .ba-formel b,#ba-tafel .ba-formel i,#ba-tafel .ba-formel sup{font-style:normal;opacity:0}
#ba-tafel .ba-formel sup{font-size:.55em;margin-top:-.12em}
#ba-tafel .ba-strich.weiss{left:22%;top:25%;width:66%;background:#f3f1ec;box-shadow:none;
  height:.8cqw}
#ba-tafel .ba-formeln{left:3%;top:31%;font-size:8.6cqw;line-height:1.28;transform:rotate(-3deg);
  display:grid;white-space:nowrap}
#ba-tafel .ba-formeln span{opacity:0}
#ba-tafel .ba-dreieck{left:0;top:61%;width:34%}
#ba-tafel .ba-pyth{left:43%;top:68%;font-size:8.6cqw;transform:rotate(-2deg)}
#ba-tafel .ba-atom{left:20%;bottom:2%;width:25%}
#ba-tafel .ba-fall{right:2%;bottom:8%;font-size:8cqw;transform:rotate(-6deg)}
#ba-tafel .ba-hand{font-family:"Caveat Kreide",var(--text);font-weight:700}

#ba-tafel .ba-flug{position:absolute;left:50%;top:50%;z-index:5;width:min(30vw,320px);
  aspect-ratio:520/132;opacity:0;will-change:transform;pointer-events:none}
#ba-tafel .ba-flug img{position:absolute;inset:0;width:100%;height:100%}
#ba-tafel .ba-flug .ba-hell{opacity:0}

.ba-tafel-weg{position:fixed;z-index:110;right:20px;bottom:max(20px,env(safe-area-inset-bottom));
  min-height:44px;padding:10px 18px;background:rgba(0,0,0,.4);color:#fff;cursor:pointer;
  border:1px solid rgba(255,255,255,.45);clip-path:var(--chamfer-s);
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ba-tafel-weg:hover{background:rgba(0,0,0,.62);border-color:#fff}

@media(max-width:760px){
  #ba-tafel .ba-raum{perspective:1100px}
  #ba-tafel .ba-claim{font-size:10cqw}
  #ba-tafel .ba-fluegel{width:min(47vw,calc(70vh*.798))}
}
@media(prefers-reduced-motion:reduce){#ba-tafel,.ba-tafel-weg{display:none}}
/* Cookie-Banner erst nach dem Tafel-Intro (Steven, 04.10.2026): solange die Tafel
   laeuft (tafel-zu bis zum Aufbau, danach ba-intro aus main.js), bleibt der Banner
   unsichtbar und nicht klickbar; danach blendet er ein. */
div[consent-skip-blocker][data-bg]{transition:opacity .6s ease}
html.tafel-zu div[consent-skip-blocker][data-bg],html.ba-intro div[consent-skip-blocker][data-bg]{opacity:0!important;pointer-events:none!important}
html.tafel-zu div[consent-skip-blocker][data-bg] *,html.ba-intro div[consent-skip-blocker][data-bg] *{pointer-events:none!important}
/* Waehrend des Versands: Knopf sichtbar gesperrt (Sperre selbst in seiten.js) */
.wpcf7-form.submitting .wpcf7-submit{opacity:.55;cursor:progress}
/* Kleine Handys (320–375 px): Die Familien-Marke (width:max-content) machte die Grid-Spalte
   breiter als den Bildschirm, die Karten liefen rechts raus (Steven, iPhone 320 / Samsung 360,
   04.10.2026). minmax(0,1fr) begrenzt die Spalte, die Marke bricht dann um. */
.modelle,.tag{grid-template-columns:minmax(0,1fr)}
.modelle .kopfzeile>*,.tag .kopfzeile>*,.tag .zeile>*{min-width:0}
@media(max-width:560px){.modelle .kopfzeile,.tag .kopfzeile,.tag .zeile{grid-template-columns:minmax(0,1fr)}}
/* Warum BA-Ems auf dem Handy: rechts derselbe Rand wie links (vorher padding-right:0 fuer ein
   randloses Bild — dabei verlor auch der Text den Rand; Steven, Samsung, 04.10.2026). */
/* 320 px: Rechner (Kosten) und Rechtliches wuchsen mit dem Inhalt ueber den Rand (1fr = minmax(auto,1fr)) */
@media(max-width:900px){.recht,.rechner,.rechner-feld{grid-template-columns:minmax(0,1fr)}.recht>*,.rechner>*,.rechner-feld>*{min-width:0}}
/* 320 px: lange Laendernamen (Mecklenburg-Vorpommern) und lange Woerter/Adressen in Rechtliches
   duerfen umbrechen statt die Spalte aufzudruecken bzw. an der Kartenkante abgeschnitten zu werden */
.praemien .land{min-width:0}
.praemien .land .name{overflow-wrap:anywhere}
@media(max-width:400px){.praemien .land .name{font-size:12px;letter-spacing:.03em}}
@media(max-width:900px){.recht .inhalt{grid-template-columns:minmax(0,1fr)}.recht .inhalt>*{min-width:0}.recht article{overflow-wrap:anywhere}}
.praemien .land .notiz{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
/* Rechtliches, Handy: die drei Abschnitts-Knoepfe in EINE Zeile (Steven, 04.10.2026).
   Schrift und Innenabstand wachsen mit der Breite: 320 px ≈ 10 px Schrift, ab ~410 px wieder 13 px. */
@media(max-width:900px){
  .recht .seitennav nav{flex-wrap:nowrap}
  .recht .seitennav nav a{flex:0 1 auto;white-space:nowrap;text-align:center;font-size:clamp(10px,3.2vw,13px);letter-spacing:.06em;padding:8px clamp(7px,2.4vw,12px)}
}
/* Absicherung bei groesserer Systemschrift: Leiste wird wischbar statt ueber den Rand zu laufen */
@media(max-width:900px){.recht .seitennav nav{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.recht .seitennav nav::-webkit-scrollbar{display:none}.recht .seitennav nav a{flex-shrink:0}}
/* Ohne Animation (z. B. Apple „Bewegung reduzieren"): alle fuenf Wege sind offen, die feste
   Buehnenhoehe (nur fuer den Pin gedacht) schnitt Lebensmittel unten ab (Kunde, 04.10.2026). */
html:not(.kino) .wege .buehne{height:auto;min-height:0;overflow:visible}
/* Zahlen-Streifen: „Online + vor Ort" ragte bis 1440 px in die Nachbarspalte (Kunde, iPad, 04.10.2026).
   Der Zusatz (small) darf als Ganzes in die naechste Zeile, das Hauptwort bleibt ungetrennt. */
.zahl-k .wert{white-space:normal}
.zahl-k .wert small{white-space:nowrap;display:inline-block}
/* Tablet/Laptop (1024–1279 px), Kunde iPad 04.10.2026:
   - Fach-Ueberschrift „Elektrotechnik" war breiter als ihre Spalte (abgeschnitten): Schrift an der
     Spaltenbreite ausrichten (cqw), nicht nur an der Fensterbreite.
   - „Dein Tag neben der Schicht." lief in die Zusatzzeile daneben: dort unter die Ueberschrift. */
.fach .text{container-type:inline-size}
.fach h2{font-size:min(clamp(32px,5.4vw,64px),11cqw)}
@media(max-width:1279px){.tag .kopfzeile{grid-template-columns:minmax(0,1fr)}}
/* Zertifikat ISO 9001:2015 — Karte mittig unter dem Team (06.10.2026); zieht sich in den Team-Abstand hoch */
.zertifikat{padding:0 var(--rand) clamp(60px,10vw,130px);margin-top:calc(clamp(30px,5vw,70px) * -1)}
.zertifikat .karte{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;background:var(--weiss);clip-path:var(--chamfer);padding:clamp(20px,2.5vw,32px);max-width:880px;margin-inline:auto}
.zertifikat .zert-bild{display:block;width:clamp(96px,11vw,140px);box-shadow:0 6px 18px rgba(26,28,30,.14);transition:transform .3s}
.zertifikat .zert-bild:hover{transform:translateY(-3px)}
.zertifikat .zert-bild img{display:block;width:100%;height:auto}
.zertifikat h3{font-size:clamp(20px,2.2vw,28px);margin:8px 0 10px}
.zertifikat p{color:var(--grau);font-size:15px;line-height:1.6;max-width:58ch}
.zertifikat .links{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px 28px}
@media(max-width:560px){.zertifikat .karte{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}.zertifikat .zert-bild{width:120px}.zertifikat p{margin-inline:auto}.zertifikat .links{justify-content:center}}