/* Förderschmiede v2, Seitengerüst. Umbau vom 30.09.2026 nach Giulianos Durchsicht: kürzer, ruhiger, Kopfleiste und Hero wie v1.
   Lädt nach tokens.css. Die Teile (demo, manifest, chat, rechner) bringen eigene Dateien mit (Präfix .k-X), hier steht nur der Rahmen.
   Eckregel: jede Schnittkante sitzt oben rechts UND unten links, nie oben links oder unten rechts.
   Ausnahmen stehen in derselben Zeile mit dem Kommentar form-ausnahme.

   Inhalt
   1  Grundlagen            7  Hero
   2  Layout, Knöpfe        8  Manifest (nur die Sektion)
   3  Sektionen, Kanten     9  Programm
   4  Typografie           10  Chat, Rechner, Termin
   5  Navigation           11  Footer, CTA-Leiste
   6  (frei seit 01.10.2026) 12  Bewegung */

/* 1 Grundlagen */
*,*::before,*::after{box-sizing:border-box}
/* Kein erzwungenes weiches Scrollen: Ankersprünge springen direkt ans Ziel (Auftrag, Qualitätsmaßstab) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-hoehe) + var(--sat) + 16px)}
body{margin:0;background:var(--hell);color:var(--grau);font-family:var(--f-text);font-size:var(--t-text);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word;hyphens:manual;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
a,button,input,summary,label{touch-action:manipulation}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.dunkel :focus-visible,.hero :focus-visible,.manifest :focus-visible,.nav :focus-visible,.fuss :focus-visible,.leiste :focus-visible{outline-color:var(--signal-hell)}
::selection{background:var(--signal);color:#fff}
.nur-vorlesen{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sprung{position:absolute;left:16px;top:-80px;z-index:200;padding:12px 18px;background:var(--signal);color:#fff;font-weight:600;text-decoration:none}
.sprung:focus{top:16px}
[tabindex="-1"]:focus-visible{outline-offset:6px}
[hidden]{display:none!important}

/* 2 Layout und Knöpfe */
.huelle{width:100%;max-width:calc(var(--breite) + 2 * var(--rand));margin-inline:auto;
  padding-left:max(var(--rand),env(safe-area-inset-left));padding-right:max(var(--rand),env(safe-area-inset-right))}
/* Die Fläche des Knopfs liegt auf ::before und trägt die Schnittkante (oben rechts und unten links).
   Der Fokusrahmen hängt am Knopf selbst und wird deshalb nicht mit abgeschnitten. */
.knopf{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:14px 30px 14px 28px;border:0;background:none;cursor:pointer;
  font-family:var(--f-text);font-weight:700;font-size:1rem;line-height:1.25;letter-spacing:.01em;text-align:center;text-decoration:none;color:#fff}
.knopf::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--signal);transition:background-color .2s ease;
  clip-path:polygon(0 0,calc(100% - 12.3px) 0,100% 16px,100% 100%,12.3px 100%,0 calc(100% - 16px))}
.knopf .pfeil{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--kurve)}
@media(hover:hover){
  .knopf:hover::before{background:var(--signal-dunkel)}
  .knopf:hover .pfeil{transform:translateX(4px)}
}
/* Größen wie v1 */
.knopf-gross{min-height:64px;padding:18px 36px 18px 32px;font-size:1.0625rem}
@media(max-width:399px){.knopf-gross{padding:16px 26px 16px 22px;gap:10px}}
.knopf-klein{min-height:44px;padding:10px 20px 10px 20px;font-size:.9375rem}
.knopf-klein::before{clip-path:polygon(0 0,calc(100% - 9.2px) 0,100% 12px,100% 100%,9.2px 100%,0 calc(100% - 12px))}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.textlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--signal);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:5px}
.dunkel .textlink,.hero .textlink{color:var(--signal-hell)}
@media(hover:hover){.textlink:hover{text-decoration-thickness:2px}}

/* 3 Sektionen und Schnittkanten (37,5 Grad, Steigung 0,767).
   Dunkle Flächen liegen auf ::before und tragen die Kante oben rechts und unten links; die Ecken zeigen die Farben
   der Nachbarn (--vor oben, --nach unten). --k ist die Tiefe der Kante. */
.sektion{position:relative;padding-block:var(--sektion)}
.hell{background:var(--hell);color:var(--grau)}
.weiss{background:var(--weiss);color:var(--grau)}
.dunkel,.manifest{--vor:var(--hell);--nach:var(--hell);--k:var(--ecke);position:relative;isolation:isolate;color:#fff;
  background:linear-gradient(var(--vor) 50%,var(--nach) 50%);
  --schnitt:polygon(0 0,calc(100% - var(--k) * var(--steigung)) 0,100% var(--k),100% 100%,calc(var(--k) * var(--steigung)) 100%,0 calc(100% - var(--k)))}
.dunkel::before,.manifest::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--deep);clip-path:var(--schnitt)}
/* Unterseiten (Kopf der Rechtstexte, 404): die Fläche beginnt direkt unter der Kopfleiste */
.ohne-oben{--schnitt:polygon(0 0,100% 0,100% 100%,calc(var(--k) * var(--steigung)) 100%,0 calc(100% - var(--k)))} /* form-ausnahme: obere Kante ist die Seitenkante */
.flaechenbild{position:absolute;inset:0;z-index:-1;overflow:hidden;clip-path:var(--schnitt)}
.flaechenbild img{width:100%;height:100%;object-fit:cover}
.flaeche{position:relative;min-width:0}

/* 4 Typografie */
.kicker{display:flex;align-items:center;gap:12px;margin-bottom:var(--luft-3);font-family:var(--f-kicker);font-weight:600;font-size:var(--t-kicker);
  line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--signal)}
/* Kicker-Balken: Parallelogramm, schräg oben rechts und unten links */
.kicker::before{content:"";flex:0 0 auto;width:26px;height:12px;background:currentColor;clip-path:polygon(0 0,calc(100% - 9.2px) 0,100% 100%,9.2px 100%)}
.dunkel .kicker,.hero .kicker{color:var(--signal-hell)}
.h2{font-family:var(--f-marke);font-weight:400;font-size:var(--t-h2);line-height:1.04;letter-spacing:-.003em;text-wrap:balance;max-width:18ch;color:var(--deep)}
.dunkel .h2{color:#fff}
.h2.breit{max-width:24ch}
.h3{font-family:var(--f-text);font-weight:500;font-size:var(--t-h3);line-height:1.3;color:var(--deep)}
.lead{font-size:var(--t-lead);line-height:1.55;max-width:62ch}
.kopf{margin-bottom:clamp(32px,1.5rem + 2vw,56px)}
.kopf .lead{margin-top:var(--luft-3)}
.leise{color:var(--grau-leise)}
.dunkel .leise{color:var(--silver)}
.klein{font-size:var(--t-klein);line-height:1.55}

/* 5 Navigation wie v1: 72 px hoch, über dem Hero transparent, nach 24 px Scrollen Deep Blue mit Weichzeichner; Menü unter 1100 px.
   Fläche und Weichzeichner liegen auf ::before: backdrop-filter direkt auf .nav machte den Kopf zum Bezugsblock des fixierten Menüs. */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;color:#fff;transition:box-shadow .3s ease}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:background-color .3s ease}
.nav-innen{display:flex;align-items:center;justify-content:space-between;gap:24px;height:calc(var(--nav-hoehe) + var(--sat));padding-top:var(--sat)}
.nav.fest,.nav.offen{box-shadow:0 1px 0 var(--linie-dunkel)}
.nav.fest::before,.nav.offen::before{background:rgba(3,25,38,.96)}
@supports (backdrop-filter:blur(10px)){.nav.fest::before{background:rgba(3,25,38,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}
.marke{display:inline-flex;align-items:center;gap:12px;min-height:44px;min-width:44px;text-decoration:none;color:#fff}
.marke img{flex:0 0 auto;width:52px;height:auto}
.marke .wortmarke{font-family:var(--f-marke);font-size:1.1875rem;letter-spacing:.04em;line-height:1;text-transform:uppercase}
.nav-innen > nav,.nav-cta{display:none}
.nav-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px;font-weight:500;font-size:.9375rem;text-decoration:none;color:rgba(255,255,255,.88);
  background:linear-gradient(var(--signal-hell),var(--signal-hell)) left calc(100% - 8px)/0 2px no-repeat;transition:background-size .25s var(--kurve),color .2s}
@media(hover:hover){.nav-links a:hover{color:#fff;background-size:100% 2px}}
.nav-links a[aria-current="true"]{color:#fff;background-size:100% 2px}
.burger{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-right:-8px;padding:0;border:0;background:none;cursor:pointer;color:#fff}
.burger span{position:relative;display:block;width:24px;height:2px;background:currentColor;transition:background-color .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor;transition:transform .3s var(--kurve)}
.burger span::before{top:-8px}
.burger span::after{top:8px}
.nav.offen .burger span{background:transparent}
.nav.offen .burger span::before{transform:translateY(8px) rotate(45deg)}
.nav.offen .burger span::after{transform:translateY(-8px) rotate(-45deg)}
.nav-panel{position:fixed;left:0;right:0;top:calc(var(--nav-hoehe) + var(--sat));bottom:0;z-index:99;overflow-y:auto;background:var(--deep);
  padding:24px max(var(--rand),env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(var(--rand),env(safe-area-inset-left))}
.nav-panel ul{list-style:none;display:grid}
.nav-panel li{border-bottom:1px solid var(--linie-dunkel)}
.nav-panel a:not(.knopf){display:flex;align-items:center;min-height:60px;font-family:var(--f-marke);font-size:1.5rem;text-decoration:none;color:#fff}
.nav-panel .knopf{width:100%;margin-top:32px}
@media(max-width:399px){.nav .marke{gap:10px}.nav .marke img{width:42px}.nav .marke .wortmarke{font-size:1rem}}
@media(min-width:1100px){
  .burger,.nav-panel{display:none!important}
  .nav-innen > nav{display:block}
  .nav-links{display:flex;align-items:center;gap:clamp(16px,2vw,32px);list-style:none}
  .nav-cta{display:inline-flex}
}

/* 7 Hero wie v1: das Schmiede-Video füllt die Fläche, links liegt eine schwere Deep-Blue-Fläche mit der 37,5-Grad-Kante und
   einem Signal-Blue-Streifen, darauf der Text. Unten links schneidet die Kante, oben nicht (dort ist die Seitenkante). */
.hero{--hero-x:-18%;position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:100vh;min-height:100svh;overflow:hidden;
  background:var(--deep);color:#fff;
  clip-path:polygon(0 0,100% 0,100% 100%,var(--ecke-x) 100%,0 calc(100% - var(--ecke)))} /* form-ausnahme: obere Kante ist die Seitenkante */
/* Das Poster liegt auf ::before, damit es ab Tablet genau wie das Video verschoben werden kann */
.hero-medien{position:absolute;inset:0;z-index:-3;overflow:hidden;background:var(--deep)}
.hero-medien::before{content:"";position:absolute;inset:0;background:url("../media/hero-poster.webp") 62% 50%/cover no-repeat}
.hero-video{position:relative;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero-medien::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,25,38,.7) 0,rgba(3,25,38,0) 22%,rgba(3,25,38,0) 48%,rgba(3,25,38,.88) 100%)}
/* Die schwere Fläche: skewX hält den Winkel bei jeder Höhe exakt, die Kante liegt in der Höhe y bei --hero-x + 0,767 * y */
.hero-flaeche{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.hero-flaeche::before,.hero-flaeche::after{content:"";position:absolute;top:0;bottom:0;transform:skewX(37.5deg);transform-origin:0 0}
.hero-flaeche::before{left:-300vw;width:calc(300vw + var(--hero-x));background:rgba(3,25,38,.9)}
.hero-flaeche::after{left:calc(var(--hero-x) + clamp(14px,1.6vw,26px));width:clamp(6px,.7vw,10px);background:var(--signal)}
.hero-inhalt{position:relative;padding-top:calc(var(--nav-hoehe) + var(--sat) + 24px);padding-bottom:calc(var(--ecke) * .75 + clamp(20px,4svh,48px))}
.hero .kicker{margin-bottom:clamp(12px,2svh,24px)}
.hero-titel{font-family:var(--f-marke);font-weight:400;color:#fff;font-size:clamp(2rem,1.2rem + 4vw,3rem);line-height:1;letter-spacing:-.005em;
  text-wrap:balance;max-width:12ch;text-shadow:0 2px 24px rgba(3,25,38,.55),0 0 2px rgba(3,25,38,.4)}
.hero-titel-zwei{display:block;color:var(--signal-hell)}
.hero .kicker,.hero-zeile{text-shadow:0 1px 12px rgba(3,25,38,.7)}
.hero-zeile{margin-top:clamp(12px,2.2svh,28px);max-width:44ch;font-size:var(--t-lead);line-height:1.5;color:rgba(255,255,255,.9)}
.hero-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:clamp(16px,3svh,36px)}
.hero-neben{margin-top:6px;font-size:var(--t-klein);color:var(--silver)}
/* Kennzahlen: eine ruhige Zeile unter dem Knopf, drei Spalten, nur eine feine Linie darüber */
.kennzahlen{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px);margin-top:clamp(16px,3svh,36px);
  padding-top:clamp(12px,1.8svh,18px);border-top:1px solid var(--linie-dunkel);align-items:start}
.kennzahl{min-width:0}
.kennzahl-zahl{display:flex;align-items:baseline;font-family:var(--f-marke);font-weight:400;font-size:clamp(1.375rem,1rem + 1.4vw,2.25rem);line-height:1;
  letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.kennzahl-zahl .einheit{font-size:.6em;color:var(--signal-hell)}
.kennzahl-zeile{margin-top:6px;font-size:clamp(.75rem,.7rem + .2vw,.875rem);font-weight:500;line-height:1.35;color:#fff}
.kennzahl-fuss{margin-top:3px;font-size:clamp(.6875rem,.66rem + .12vw,.75rem);line-height:1.35;color:var(--silver)}
/* Mobil: Botschaft und Knopf zuerst, der Rechner-Link wandert unter die Kennzahlen, damit die erste Zahl über dem Falz bleibt */
@media(max-width:599px){
  .hero-inhalt{display:flex;flex-direction:column;align-items:flex-start;padding-top:calc(var(--nav-hoehe) + var(--sat) + 12px)}
  .hero .kicker{letter-spacing:.08em}
  .hero .kicker::before{display:none}
  .hero-knoepfe{display:contents}
  .hero-knoepfe .knopf{order:4;width:100%;min-height:56px;margin-top:clamp(16px,2.6svh,24px);padding-block:14px}
  .hero-neben{order:5}
  .kennzahlen{order:6;align-self:stretch;gap:12px;margin-top:clamp(14px,2.4svh,24px)}
  .hero-rechnerlink{order:7;margin-top:4px}
}
/* Sehr schmal (320 px): die Kennzahlen stehen untereinander, die Zahl links, Zeile und Fuß rechts daneben */
@media(max-width:359px){
  .kennzahlen{grid-template-columns:minmax(0,1fr);gap:10px}
  .kennzahl{display:grid;grid-template-columns:4.25rem minmax(0,1fr);column-gap:12px;align-items:start}
  .kennzahl-zahl{grid-column:1;grid-row:1 / span 2}
  .kennzahl-zeile,.kennzahl-fuss{grid-column:2}
  .kennzahl-zeile{margin-top:0}
}
@media(max-width:767px){
  /* Schmal: der Text nimmt fast die ganze Breite ein, die Kante liefe durch ihn hindurch. Der Streifen bleibt weg,
     hinter dem Textblock liegt eine eigene dunkle Fläche, die weich über dem Kicker beginnt (wie v1). */
  .hero-flaeche::after{display:none}
  .hero-inhalt::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;top:calc(var(--nav-hoehe) + var(--sat) - 16px);
    background:linear-gradient(180deg,rgba(3,25,38,0),rgba(3,25,38,.9) 56px);pointer-events:none}
  .hero-titel{max-width:none}
}
/* Ab Tablet: feste Textspalte, die Kante beginnt oben so weit rechts, dass sie auf Höhe der obersten Textzeile hinter
   dem Spaltenrand liegt; das Bild rückt nach rechts, die Glut steht dort, wo die Fläche es freigibt (wie v1).
   Die H1 ist kleiner als in v1 und steht ab 1024 px in zwei Zeilen. */
@media(min-width:768px){
  .hero{
    --hero-links:max(var(--rand),env(safe-area-inset-left),(100vw - var(--breite)) / 2);
    --hero-spalte:clamp(420px,40vw + 60px,640px);
    --hero-x:calc(var(--hero-links) + var(--hero-spalte) + 24px - var(--steigung) * (var(--nav-hoehe) + var(--sat) + 24px))}
  .hero .kicker,.hero-zeile,.kennzahlen{max-width:var(--hero-spalte)}
  .hero-titel{max-width:var(--hero-spalte);font-size:calc(var(--hero-spalte) / 10)}
  .hero-medien::before,.hero-video{position:absolute;top:0;bottom:auto;left:auto;right:40px;width:auto;height:100%;aspect-ratio:16/9;
    transform:translateX(26%);background-position:50% 50%;object-position:50% 50%}
  /* Oben dunkel genug für die Navigation, die hier noch ohne eigenen Hintergrund über dem Bild steht */
  .hero-medien::after{background:linear-gradient(180deg,rgba(3,25,38,.88) 0,rgba(3,25,38,.7) calc(var(--nav-hoehe) + var(--sat)),rgba(3,25,38,0) 26%,
    rgba(3,25,38,0) 60%,rgba(3,25,38,.7) 100%)}
  /* Der Streifen beginnt erst unter der Navigation und kreuzt deshalb keinen Nav-Link */
  .hero-flaeche::after{-webkit-mask-image:linear-gradient(180deg,transparent calc(var(--nav-hoehe) + var(--sat)),#000 calc(var(--nav-hoehe) + var(--sat) + 40px));
    mask-image:linear-gradient(180deg,transparent calc(var(--nav-hoehe) + var(--sat)),#000 calc(var(--nav-hoehe) + var(--sat) + 40px))}
  .hero-zeile{font-size:clamp(1rem,.9rem + .4vw,1.25rem)}
}

/* 8 Manifest: nur die Sektion. Video, Schleier und Sätze bringt das Teil manifest mit (css/manifest.css). */
.manifest{--vor:var(--hell);--nach:var(--weiss);padding:0}

/* 9 Programm: vier Stufen, ohne Bild und ohne Listen */
.phasen{list-style:none;display:grid;gap:var(--luft-5) var(--luft-5)}
.phase{min-width:0}
.phase-nr{display:block;margin-bottom:14px;font-family:var(--f-marke);font-size:1.125rem;line-height:1;letter-spacing:.04em;color:var(--signal)}
.phase-name{margin-bottom:10px;font-family:var(--f-marke);font-weight:400;font-size:clamp(1.25rem,1.05rem + .7vw,1.625rem);line-height:1.15;color:var(--deep)}
.phase p:last-child{max-width:34ch;color:var(--grau-leise)}
@media(min-width:620px){.phasen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.phasen{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--luft-5)}}

/* 10 Chat, Rechner, Termin */
/* Chat: Kopf über dem Fenster, das Fenster in voller Hüllenbreite */
.chat-raster{display:grid}
.chat-kopf .h2{font-size:clamp(1.875rem,1.2rem + 2.4vw,3.25rem)}
.termin .h2{font-size:clamp(1.875rem,1.2rem + 1.4vw,2.5rem)} /* schmale Spalte neben dem Kalender: zwei Zeilen statt drei */
.rechner .kopf{margin-bottom:clamp(24px,1rem + 1.5vw,40px)}
.rechner .h2{font-size:clamp(1.75rem,1.2rem + 2vw,3rem)}
.termin{padding-bottom:calc(var(--sektion) + var(--ecke) * .3)}
.termin-raster{display:grid;gap:var(--luft-5)}
.termin .lead{margin-top:var(--luft-3)}
.termin-widget{min-width:0}
/* Höhe: seite.js setzt die von Calendly gemeldete Höhe seines Inhalts, so gibt es keinen zweiten Scrollbalken. Die Mindesthöhe bleibt,
   weil Calendly zwischendurch auch 2px meldet */
.kalender{position:relative;min-width:0;overflow:hidden;min-height:700px}
.kalender-laedt{position:absolute;left:0;right:0;top:40%;text-align:center;color:var(--grau-leise);font-weight:500}
.kalender:has(iframe) .kalender-laedt{display:none}
.kalender iframe{position:relative;z-index:1}
.kalender-neu{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:16px;padding:16px 20px;border-left:3px solid var(--signal);background:var(--signal-10)}
.kalender-neu p{flex:1 1 260px;font-size:var(--t-klein);color:var(--grau)}
.kalender-ersatz{margin-top:12px;text-align:center;font-size:var(--t-klein);color:var(--grau-leise)}
.kalender-ersatz .textlink{font-size:var(--t-text)}
@media(max-width:599px){.termin-widget{margin-inline:calc(-1 * max(var(--rand),env(safe-area-inset-left)))}
  .kalender-neu{margin-inline:max(var(--rand),env(safe-area-inset-left)) max(var(--rand),env(safe-area-inset-right))}}
@media(min-width:1000px){
  .termin-raster{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--luft-7);align-items:start}
  .termin-text{position:sticky;top:calc(var(--nav-kompakt) + var(--sat) + 40px)}
}

/* 11 Footer wie v1 (Logo, Kontakt, Rechtliches) und CTA-Leiste */
/* Unten links legt der Schnitt Signal Blue frei, das in das Band übergeht */
.fuss{--vor:var(--hell);position:relative;isolation:isolate;color:var(--silver);background:linear-gradient(var(--vor) 50%,var(--signal) 50%)}
.fuss::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--deep);
  clip-path:polygon(0 0,calc(100% - var(--ecke-x)) 0,100% var(--ecke),100% 100%,var(--ecke-x) 100%,0 calc(100% - var(--ecke)))}
.fuss-oben{padding-top:calc(var(--sektion) * .8);padding-bottom:var(--luft-6);display:grid;gap:var(--luft-5)}
.fuss-logo{width:64px;height:auto}
.fuss-spalten{display:grid;gap:var(--luft-4);grid-template-columns:minmax(0,1fr)}
.fuss h2{margin-bottom:12px;font-family:var(--f-kicker);font-weight:600;font-size:var(--t-kicker);letter-spacing:.16em;text-transform:uppercase;color:var(--signal-hell)}
.fuss ul{list-style:none}
.fuss a:not(.marke){display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:#fff;text-decoration:none}
@media(hover:hover){.fuss a:not(.marke):hover{text-decoration:underline;text-underline-offset:4px}}
.fuss address{font-style:normal;line-height:1.7}
/* Das Band deckt die untere Schnittkante der Fläche ab */
.fuss-band{position:relative;background:var(--signal);color:#fff}
.fuss-band .huelle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;min-height:72px;
  padding-block:16px calc(16px + env(safe-area-inset-bottom))}
.fuss-band .wortmarke{font-family:var(--f-marke);font-size:1.25rem;letter-spacing:.05em;text-transform:uppercase}
.fuss-band small{font-size:.8125rem;color:#fff}
@media(min-width:720px){.fuss-spalten{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.fuss-oben{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start}}

/* CTA-Leiste mobil: unten fixiert mit Safe-Area, sichtbar nach dem Hero, aus ab #termin. Knopf und kurzer Text wie in v1. */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:rgba(3,25,38,.97);color:#fff;box-shadow:0 -1px 0 var(--linie-dunkel),0 -12px 30px -12px rgba(3,25,38,.5);
  transform:translateY(110%);transition:transform .35s var(--kurve),visibility 0s linear .35s;visibility:hidden}
.leiste.zeigen{transform:none;visibility:visible;transition:transform .35s var(--kurve),visibility 0s}
.leiste-zeile{display:flex;align-items:center;gap:14px}
.leiste .knopf{flex:1 1 auto;min-height:52px;padding:10px 18px 10px 16px;font-size:.9375rem;white-space:nowrap}
.leiste .knopf .pfeil{display:none}
.leiste-neben{flex:0 0 auto;font-size:.8125rem;line-height:1.3;color:var(--silver);max-width:9em}
@media(min-width:900px){.leiste{display:none}}
@media(max-width:899px){html{scroll-padding-bottom:calc(var(--leiste-hoehe,72px) + env(safe-area-inset-bottom) + 12px)}}

/* 12 Bewegung. Nur mit JS, ohne bewegungAus() und nicht in automatisierten Browsern (Klasse .bewegt). Ein ruhiges Einblenden, sonst nichts. */
.bewegt [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity var(--dauer) var(--kurve),transform var(--dauer) var(--kurve)}
.bewegt [data-reveal].sichtbar{opacity:1;transform:none}
.bewegt [data-reveal="2"]{transition-delay:.06s}
.bewegt [data-reveal="3"]{transition-delay:.12s}
.bewegt [data-reveal="4"]{transition-delay:.18s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}