/* finais. Website. Ein Stylesheet fuer alle Seiten.
   Farben, Schriften und Radien aus dem finais Designsystem. */

@font-face{font-family:"finais Sans";src:url("/assets/fonts/inter-400.woff2") format("woff2");font-weight:300 449;font-display:swap}
@font-face{font-family:"finais Sans";src:url("/assets/fonts/inter-500.woff2") format("woff2");font-weight:450 549;font-display:swap}
@font-face{font-family:"finais Sans";src:url("/assets/fonts/inter-600.woff2") format("woff2");font-weight:550 649;font-display:swap}
@font-face{font-family:"finais Sans";src:url("/assets/fonts/inter-700.woff2") format("woff2");font-weight:650 900;font-display:swap}
@font-face{font-family:"finais Display";src:url("/assets/fonts/plus-jakarta-sans-800.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"finais Mono";src:url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");font-weight:100 449;font-display:swap}
@font-face{font-family:"finais Mono";src:url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2");font-weight:450 900;font-display:swap}

:root{
  --navy:#08133F;--navy-2:#0c1e63;--blau:#2563EB;--blau-d:#1D4ED8;--blau-h:#5E85F2;--blau-z:#9db6ff;
  --hell:#f4f4f4;--text:#01040c;--grau:#4d4f54;--grau-2:#696c73;--weiss:#f4f4f4;
  --sans:"finais Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"finais Display","finais Sans",system-ui,sans-serif;
  --mono:"finais Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --rand:42px;--kopf:72px;--anschnitt:71px;
}
@media (max-width:768px){:root{--rand:20px;--kopf:86px;--anschnitt:40px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--kopf) + 16px)}
/* Seitengrund: wechselt beim Scrollen weich, sobald ein Abschnitt mit anderem Grund die Bildmitte erreicht (site.js) */
html{--grund:var(--hell);--vg:var(--text);background-color:var(--grund);transition:background-color .4s cubic-bezier(.3,1,.7,1)}
html[data-grund="navy"]{--grund:var(--navy);--vg:var(--weiss)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url("/assets/img/korn.png") repeat}
.seite-impressum::before,.seite-datenschutz::before,.seite-agb::before{content:none}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--text);background:transparent;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,address{margin:0}
address{font-style:normal}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
.innen{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--rand)}
.sprung{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:var(--text);padding:10px 16px;border-radius:6px;text-decoration:none}
.sprung:focus{top:12px}
/* feine Koernung auf den hellen Flaechen, selbst erzeugt */
.ansatz,.angebot,.referenzen,.ablauf{background:var(--hell) url("/assets/img/korn.png") repeat}
.ablauf{background-color:#e2e3e6}
/* Abschnitte ohne eigene Flaeche zeigen den Seitengrund, ihre Schrift folgt ihm */
.held.held-start,.alltag{color:var(--vg);transition:color .4s cubic-bezier(.3,1,.7,1)}

/* ---------- Typografie ---------- */
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;font-weight:500;line-height:1;
  letter-spacing:.15em;text-transform:uppercase}
.kicker::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--blau)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.028em}
h2{font-size:clamp(28px,2.8vw,40px);line-height:1.1}
.gross{font-size:clamp(40px,4.45vw,64px);line-height:1.02}
.einleitung{font-size:17px;line-height:1.6;color:var(--grau)}

/* ---------- Knoepfe ---------- */
.knopf{display:inline-block;background:var(--blau);color:#fff;text-decoration:none;border:0;border-radius:6px;padding:20px 32px;
  font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.35;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;
  transition:background-color .15s}
.knopf:hover,.knopf:focus-visible{background:var(--blau-d)}
.knopf.klein{padding:18px 28px;font-size:13px}
.knopf-zwei{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);padding:19px 26px;border:1px solid rgba(1,4,12,.18);
  border-radius:6px;font-size:14px;font-weight:500;line-height:1.35;letter-spacing:.13em;text-transform:uppercase;transition:border-color .2s,color .2s}
.knopf-zwei:hover,.knopf-zwei:focus-visible{border-color:var(--blau);color:var(--blau)}
.knopf-zwei svg{width:16px;height:16px;flex:none;transition:transform .25s}
.knopf-zwei:hover svg{transform:translateX(3px)}

/* ---------- Kopfzeile ---------- */
.kopf{position:sticky;top:0;z-index:50;background:var(--navy);color:var(--weiss);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.kopf-innen{max-width:1440px;margin:0 auto;padding:0 var(--rand);height:var(--kopf);display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr);align-items:center}
.kopf-logo{justify-self:start;display:block;border-radius:4px}
.kopf-logo img{height:24px;width:auto;transition:transform .35s cubic-bezier(.22,1,.36,1);transform-origin:left center}
.kopf-logo:hover img,.kopf-logo:focus-visible img{transform:scale(1.08)}
.kopf-nav{display:flex;align-items:center}
.kopf-nav > a{padding:4px 26px;font-size:18px;font-weight:500;line-height:1.35;letter-spacing:-.03em;color:var(--weiss);text-decoration:none}
.kopf-nav > a[aria-current="page"],.kopf-nav > a:hover{text-decoration:underline;text-decoration-color:var(--blau);text-decoration-thickness:2px;text-underline-offset:10px}
.sprache{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:13px;line-height:1;letter-spacing:.1em;color:rgba(244,244,244,.55)}
.sprache a{text-decoration:none;color:inherit;padding:4px 0}
.sprache a[aria-current="true"]{color:var(--weiss)}
.sprache a:hover{color:var(--weiss)}
.sprache i{font-style:normal;opacity:.4}
.sprache.breit{margin-left:34px;padding-left:34px;border-left:1px solid rgba(244,244,244,.2)}
.sprache.schmal,.kopf-menue{display:none}
.kopf-tel{justify-self:end;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;text-decoration:none;font-size:16px;color:rgba(244,244,244,.78);transition:color .2s}
.kopf-tel svg{width:16px;height:16px;flex:none}
.kopf-tel .nummer{display:none}
.kopf-tel:hover,.kopf-tel:focus-visible{color:var(--weiss)}
@media (hover:hover) and (min-width:769px){
  .kopf-tel:hover .wort,.kopf-tel:focus-visible .wort{display:none}
  .kopf-tel:hover .nummer,.kopf-tel:focus-visible .nummer{display:inline;animation:nummer-ein .25s ease-out}
}
@keyframes nummer-ein{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
.menue{display:none}
@media (max-width:768px){
  .kopf-innen{grid-template-columns:minmax(0,1fr) auto auto auto;gap:6px}
  .kopf-logo img{height:30px}
  .kopf-nav{display:none}
  .kopf-tel{width:44px;height:44px;justify-content:center}
  .kopf-tel .wort{display:none}
  .kopf-tel svg{width:18px;height:18px}
  .sprache.schmal{display:inline-flex;min-height:44px;padding:0 8px}
  .kopf-menue{display:inline-flex;flex-direction:column;justify-content:center;gap:7px;width:44px;height:44px;padding:0 10px;margin-right:-10px;
    background:none;border:0;cursor:pointer}
  .kopf-menue span{display:block;height:2px;width:24px;background:var(--weiss);border-radius:1px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .kopf-menue[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
  .kopf-menue[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
  .menue{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--navy);padding:8px var(--rand) 28px;
    box-shadow:0 1px 0 rgba(255,255,255,.08),0 24px 40px rgba(1,4,12,.35)}
  .menue[hidden]{display:none}
  .menue a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid rgba(255,255,255,.1);text-decoration:none;
    font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--weiss)}
  .menue a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--blau);text-decoration-thickness:2px;text-underline-offset:8px}
  .menue .menue-tel{gap:12px;font-size:16px;color:rgba(244,244,244,.78);border-bottom:0}
  .menue .menue-tel svg{width:18px;height:18px}
}

/* ---------- Kopfbereiche ---------- */
.held{position:relative;z-index:0;overflow:hidden;color:var(--weiss);isolation:isolate}
/* alles nach dem Kopfbereich liegt ueber der festen Kopfgrafik */
main > section:not(.held),main > div,.fuss{position:relative;z-index:1}
.held-unter{background:var(--navy)}
/* Kopfgrafik steht am Bildschirm fest, der Inhalt laeuft darueber. Beim Laden fahren die Ebenen gestaffelt
   ein, beim Scrollen wandern die Tiefen unterschiedlich schnell nach oben und die Grafik blendet aus
   (site.js setzt transform der Tiefen und opacity des Kopfbilds direkt). */
.kopfbild{position:fixed;inset:0;z-index:-1;pointer-events:none;transform:translateZ(0);will-change:opacity;transition:opacity .9s cubic-bezier(.1,.25,.25,1);
  animation:kb-ein .7s ease .2s backwards}
.kopfbild .lage{animation:lage-ein 1.5s cubic-bezier(.16,1,.3,1) .2s backwards}
.ebenen > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* jede Tiefe ist eine eigene Ebene der Grafikkarte; Scrollen verschiebt sie nur */
.ebenen > .tiefe{transform:translate3d(0,0,0);
  transition:transform 1s cubic-bezier(.1,.25,.25,1);will-change:transform}
@keyframes kb-ein{from{opacity:0}}
@keyframes lage-ein{from{translate:0 calc(20px + var(--n) * 16px)}to{translate:0 0}}
html.intro .kopfbild,html.intro .kopfbild .lage{animation-delay:1.2s}
.kopfbild .kopfbild-svg,.kopfbild > div{position:absolute;inset:0;width:100%;height:100%}
.kopfbild .schmal{display:none}
.held-start,.held-unter{min-height:calc(100svh - var(--kopf) - var(--anschnitt));display:flex;flex-direction:column;justify-content:flex-end}
.held-unter{padding-bottom:40px}
.held-innen{position:relative}
.held .kicker{color:inherit}
.held h1{font-size:clamp(34px,3.75vw,54px);line-height:1.06;color:inherit;opacity:.92;max-width:780px}
.held h1.gross{font-size:clamp(40px,4.45vw,64px);line-height:1.02;max-width:620px}
.held-start .kicker{margin-bottom:24px}
.held-start h1{margin-bottom:23px}
.held-text{font-size:18px;font-weight:400;line-height:1.35;letter-spacing:-.03em;max-width:670px}
.held-unter .held-text{max-width:780px;margin-top:23px}
.held-unter .held-text.schmal-text{max-width:400px;margin-top:17px}
.held-unter .knopf{margin-top:32px}
.hodt{height:58px;width:auto;margin-top:64px;opacity:.85;transition:filter .4s,opacity .4s}
html[data-grund="hell"] .hodt{filter:brightness(0);opacity:.7}
.krume{display:flex;align-items:center;gap:0;font-family:var(--mono);font-size:13px;font-weight:500;line-height:1.3;letter-spacing:.15em;text-transform:uppercase;margin-bottom:14px}
.krume::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blau);margin-right:10px}
.krume a{text-decoration:none;opacity:.6;transition:opacity .2s}
.krume a:hover,.krume a:focus-visible{opacity:1;text-decoration:underline;text-decoration-color:var(--blau);text-decoration-thickness:1.5px;text-underline-offset:4px}
.krume span[aria-hidden]{margin:0 .7em;opacity:.35}
@media (max-width:768px){
  .kopfbild .breit{display:none}
  .held-unter .kopfbild .schmal,.held-start .kopfbild .schmal{display:block}
  .held h1,.held h1.gross{font-size:36px;line-height:1.08}
  .held-unter h1.gross{font-size:30px}
  .referenzen .abschnitt-kopf h2.gross{font-size:30px}
  .held-start{padding-top:80px}
  .hodt{height:46px;margin-top:40px}
  .held-text{font-size:17px}
}

/* Branchen am Fuss des Heros */
.branchen{display:flex;align-items:center;gap:28px;margin-top:96px}
.branchen > *{min-width:0}
.branchen::before{content:none}
.branchen{position:relative}
.branchen-titel{flex:none;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;padding-top:22px}
.branchen-fenster{flex:1;display:flex;overflow:hidden;padding:22px 0 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.branchen::after{content:"";position:absolute;left:var(--rand);right:var(--rand);top:0;height:1px;background:currentColor;opacity:.16}
.branchen ul{flex:none;display:flex;margin:0;padding:0;list-style:none;animation:band 38s linear infinite}
.branchen li{display:flex;align-items:center;white-space:nowrap;font-size:15px;line-height:19px;opacity:.85;padding-right:44px}
.branchen li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blau);margin-right:44px;flex:none}
.branchen:hover ul{animation-play-state:paused}
@keyframes band{to{transform:translateX(-100%)}}
@media (max-width:720px){
  .branchen{flex-direction:column;align-items:flex-start;gap:0;margin-top:40px}
  .branchen-titel{padding-top:18px}
  .branchen-fenster{width:100%;padding-top:12px}
  .branchen li{font-size:14px;line-height:17px;padding-right:32px}
  .branchen li::before{margin-right:32px}
}

/* ---------- Abschnittskoepfe ---------- */
.abschnitt-kopf .kicker{color:inherit}
.abschnitt-kopf.mitte{display:flex;flex-direction:column;align-items:center;text-align:center}
.abschnitt-kopf h2{margin-top:16px}
.abschnitt-kopf.mitte h2{max-width:480px}

/* ---------- Startseite: Im Alltag ---------- */
.alltag{padding:120px 0}
.alltag .innen{display:flex;flex-direction:column;align-items:center;gap:55px}
.karten{display:grid;grid-template-columns:repeat(3,minmax(0,388px));gap:26px;justify-content:center;width:100%}
.karte{display:flex;flex-direction:column;align-items:center;text-align:center}
.karte-bild{width:315px;max-width:100%;height:220px;display:grid;place-items:center}
.karte-bild .iso{width:100%;height:200px}
.karte h3{font-family:var(--sans);font-weight:700;font-size:28px;line-height:1.1;letter-spacing:-.02em;margin-top:11px}
.karte p{font-size:18px;line-height:1.35;letter-spacing:-.03em;margin-top:16px;max-width:388px}
@media (max-width:991px){.karten{grid-template-columns:minmax(0,520px);gap:56px}}
@media (max-width:768px){.alltag{padding:72px 0}.alltag .innen{gap:40px}.karte h3{font-size:24px}.karte p{font-size:16px}}

/* ---------- Startseite: Ansatz ---------- */
.ansatz{padding:72px 0 8px}
.ansatz .innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:64px;align-items:center}
.ansatz .kicker{color:var(--grau);font-weight:400;letter-spacing:.14em}
.ansatz h2{margin:16px 0;max-width:18ch}
.ansatz .einleitung{margin-bottom:28px;max-width:54ch}
.aktion{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ansatz-bild{position:relative;display:block;aspect-ratio:232/156;border-radius:16px;outline-offset:6px;text-decoration:none}
.ansatz-bild .iso{width:100%;height:100%}
.bild-hinweis{position:absolute;left:50%;bottom:6%;transform:translate(-50%,8px);display:inline-flex;align-items:center;gap:10px;padding:10px 16px;
  border-radius:999px;background:#fff;box-shadow:0 6px 20px rgba(1,4,12,.1);font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blau-d);opacity:0;white-space:nowrap;transition:opacity .25s,transform .3s cubic-bezier(.22,1,.36,1)}
.bild-hinweis svg{width:16px;height:16px}
.ansatz-bild:hover .bild-hinweis,.ansatz-bild:focus-visible .bild-hinweis{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.bild-hinweis{opacity:1;transform:translate(-50%,0)}}
@media (max-width:860px){.ansatz{padding:72px 0 24px}.ansatz .innen{grid-template-columns:minmax(0,1fr);gap:28px}.ansatz-bild{order:-1}}

/* ---------- Startseite: Das Angebot, Plattenstapel ---------- */
.angebot{padding:96px 0 0}
.angebot .kicker{color:var(--grau);font-weight:400;letter-spacing:.14em}
.angebot h2{max-width:22ch}
.angebot .einleitung{margin-top:16px;max-width:56ch}
.explosion{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:-36px;padding-bottom:64px}
.buehne{height:360px;perspective:1800px;display:grid;place-items:center;cursor:pointer}
.stapel{--abst:40px;--gr:310px;position:relative;top:40px;width:var(--gr);height:var(--gr);transform-style:preserve-3d;transform:rotateX(57deg) rotateZ(-42deg)}
.buehne:hover .stapel,.buehne.offen .stapel{--abst:110px}
.platte{--dick:12px;position:absolute;inset:0;transform-style:preserve-3d;cursor:pointer;
  transform:translateZ(calc(var(--i) * var(--abst)));transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .4s}
.platte-oben{position:absolute;inset:0;border-radius:16px;overflow:hidden;transform:translateZ(var(--dick));
  background:linear-gradient(135deg,rgba(255,255,255,var(--glanz)) 0%,rgba(255,255,255,0) 55%),var(--farbe);box-shadow:inset 0 0 0 1px var(--rand-f);transition:box-shadow .4s}
.platte-oben svg{position:absolute;inset:0;width:100%;height:100%}
.platte-seite-v,.platte-seite-r{position:absolute;background:var(--kante)}
.platte-seite-v{left:16px;right:16px;bottom:0;height:var(--dick);transform-origin:bottom;transform:rotateX(-90deg)}
.platte-seite-r{top:16px;bottom:16px;right:0;width:var(--dick);transform-origin:right;transform:rotateY(90deg)}
.platte-nr{position:absolute;left:18px;bottom:16px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--schrift)}
.platte.aktiv{transform:translateZ(calc(var(--i) * var(--abst) + 40px)) translate(-22px,22px)}
.platte.aktiv .platte-oben{box-shadow:inset 0 0 0 1.5px #fff,0 0 0 6px rgba(37,99,235,.18),0 40px 80px rgba(37,99,235,.45)}
.stapel.hat-aktiv .platte:not(.aktiv){opacity:.55}
.platte[data-i="0"]{--farbe:#1D4ED8;--kante:#16399f;--rand-f:rgba(255,255,255,.35);--glanz:.18;--linie:rgba(255,255,255,.75);--schrift:rgba(255,255,255,.8)}
.platte[data-i="1"]{--farbe:#2563EB;--kante:#1c4fc0;--rand-f:rgba(255,255,255,.35);--glanz:.2;--linie:rgba(255,255,255,.75);--schrift:rgba(255,255,255,.8)}
.platte[data-i="2"]{--farbe:rgba(147,180,248,.82);--kante:rgba(110,148,236,.9);--rand-f:rgba(37,99,235,.35);--glanz:.42;--linie:rgba(29,78,216,.75);--schrift:rgba(1,4,12,.55)}
.ebenen{display:flex;flex-direction:column}
.ebene{border-top:1px solid rgba(1,4,12,.1)}
.ebene:last-child{border-bottom:1px solid rgba(1,4,12,.1)}
.ebene h3{font:inherit;letter-spacing:normal}
.ebene button{display:grid;grid-template-columns:44px 1fr 24px;gap:14px;align-items:start;width:100%;padding:16px 0;border:0;background:none;cursor:pointer;text-align:left}
.ebene-nr{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--grau-2);padding-top:6px;transition:color .3s}
.ebene-titel{font-family:var(--display);font-weight:800;font-size:clamp(20px,1.8vw,24px);line-height:1.15;letter-spacing:-.025em;color:var(--text);transition:color .3s}
.ebenen:has(.offen) .ebene:not(.offen) .ebene-titel{color:var(--grau-2)}
.ebene:hover .ebene-titel{color:var(--text)}
.ebene.offen .ebene-nr{color:var(--blau)}
.ebene-text{display:grid;grid-template-rows:0fr;padding-left:58px;padding-right:38px;transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1)}
.ebene-text > div{overflow:hidden}
.ebene-text p{font-size:16px;line-height:1.6;color:var(--grau);max-width:52ch;padding-bottom:16px}
.ebene.offen .ebene-text{grid-template-rows:1fr}
.plus{position:relative;width:24px;height:24px;margin-top:2px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(1,4,12,.18);transition:box-shadow .3s,background-color .3s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:var(--grau);
  transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .3s}
.plus::after{transform:rotate(90deg)}
.ebene button:hover .plus{box-shadow:inset 0 0 0 1px var(--blau)}
.ebene button:hover .plus::before,.ebene button:hover .plus::after{background:var(--blau)}
.ebene.offen .plus{background:var(--blau);box-shadow:inset 0 0 0 1px var(--blau)}
.ebene.offen .plus::before,.ebene.offen .plus::after{background:#fff}
.ebene.offen .plus::after{transform:rotate(0)}
@media (max-width:991px){
  .explosion{grid-template-columns:1fr;gap:8px;margin-top:-20px;padding-bottom:48px}
  .buehne{height:290px}
  .stapel{--gr:220px;--abst:30px}
  .buehne:hover .stapel,.buehne.offen .stapel{--abst:78px}
  .platte.aktiv{transform:translateZ(calc(var(--i) * var(--abst) + 26px)) translate(-14px,14px)}
}
@media (max-width:768px){.angebot{padding-top:72px}}

/* ---------- Kontaktblock vor dem Fuss und Fuss ---------- */
.fuss{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:var(--weiss);padding-bottom:28px}
.aufruf{padding:88px 0}
.aufruf .kicker{color:var(--weiss)}
.aufruf-titel{font-size:clamp(26px,2.6vw,36px);line-height:1.12;margin:16px 0 22px;max-width:534px}
.fuss-haupt{border-top:1px solid rgba(244,244,244,.14);padding-top:80px}
.seite-kontakt .fuss-haupt,.seite-fehler .fuss-haupt,.seite-impressum .fuss-haupt,.seite-datenschutz .fuss-haupt,.seite-agb .fuss-haupt{border-top:0;padding-top:64px}
.fuss-haupt > .innen:first-child{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;align-items:start}
.fuss-marke img{height:30px;width:auto;margin-bottom:18px}
.fuss-marke address{font-size:14px;line-height:1.7;color:rgba(255,255,255,.62)}
.fuss-marke a{text-decoration:none;color:inherit}
.fuss-marke a:hover{color:#fff}
.fuss-titel{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:14px}
.fuss-spalte a{display:block;font-size:15px;line-height:30px;color:rgba(255,255,255,.72);text-decoration:none}
.fuss-spalte a:hover,.fuss-spalte a:focus-visible{color:#fff}
.fuss-zeile{margin-top:44px}
.fuss-zeile span{display:block;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(255,255,255,.45)}
@media (max-width:860px){
  .fuss-haupt > .innen:first-child{grid-template-columns:1fr 1fr;gap:32px}
  .fuss-marke{grid-column:1 / -1}
}
@media (max-width:767px){
  .aufruf{padding:72px 0;text-align:center}
  .aufruf .innen{display:flex;flex-direction:column;align-items:center}
  .aufruf-titel{margin-left:auto;margin-right:auto}
  .fuss-haupt{padding-top:56px}
  .fuss-marke address a{display:inline-block;padding:10px 0}
  .fuss-marke address{line-height:1.3}
  .fuss-spalte a{padding:7px 0;min-height:44px}
}

/* ---------- Leistung: Referenzen ---------- */
.referenzen{padding:120px 0 140px}
.referenzen .abschnitt-kopf h2{max-width:none;margin-top:16px}
.faelle{padding:24px 42px 0}
.fall{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:104px;align-items:center;padding:88px 0;border-top:1px solid rgba(1,4,12,.12)}
.fall:first-child{border-top:0;padding-top:0}
.fall.gedreht .fall-text{order:2}
.marke{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--blau);margin-bottom:22px}
.fall h3{font-size:40px;line-height:1.06;max-width:16ch;margin-bottom:20px}
.fall p:not(.marke),.service p:not(.kicker){font-size:17px;line-height:1.6;color:var(--grau);max-width:52ch;margin-bottom:16px}
.fall-bild{position:relative;min-height:400px;display:grid;place-items:center}
.fall-bild .iso,.service-bild .iso{width:100%;height:100%;max-height:400px}
.service{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:88px;align-items:center;background:var(--navy);border-radius:16px;
  padding:80px 72px;margin:48px 42px 0;color:#fff}
.service .kicker{color:var(--blau-z);margin-bottom:22px}
.service .kicker::before{background:var(--blau-h)}
.service h3{font-size:40px;line-height:1.06;color:#fff;max-width:18ch;margin-bottom:20px}
.service p:not(.kicker){color:rgba(255,255,255,.78)}
.service p:last-child{margin-bottom:0}
.service-bild{position:relative;min-height:360px;display:grid;place-items:center}
@media (max-width:1000px){
  .fall{grid-template-columns:1fr;gap:40px;padding:56px 0}
  .fall.gedreht .fall-text{order:0}
  .fall h3{font-size:28px}
  .fall-bild{min-height:300px}
  .service{grid-template-columns:1fr;gap:40px;padding:56px 40px}
  .service h3{font-size:28px}
  .service-bild{min-height:300px}
}
@media (max-width:768px){
  .referenzen{padding:72px 0 96px}
  .faelle{padding:40px 0 0}
  .service{margin:32px 0 0;padding:40px 22px 28px}
  .fall p:not(.marke),.service p:not(.kicker){font-size:16px}
}

/* ---------- Vorgehen: Prozessmap und Phasen ---------- */
.ablauf{padding:120px 0}
.ablauf-titel{font-size:clamp(30px,3.35vw,48px);line-height:1.06;margin-bottom:56px}
.pm-spur{position:relative;margin:0 0 26px}
.pm-spur.fest .pm{position:sticky;top:var(--pm-oben,96px)}
.pm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;background:#fff;border-radius:8px;padding:48px 56px}
.pm .nr{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--blau);margin-bottom:14px}
.kicker.klein{font-size:12px;font-weight:400;letter-spacing:.14em;color:var(--grau)}
.pm h3{font-size:clamp(28px,2.6vw,36px);line-height:1.1;letter-spacing:-.03em;margin:12px 0 14px}
.pm-def{font-size:16px;line-height:1.6;color:var(--grau);margin-bottom:24px;max-width:52ch}
.pm-erhalt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau-2);margin-bottom:10px}
.pm-punkte{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.pm-punkte li{display:flex;gap:10px;align-items:flex-start}
.pm-punkte svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--blau)}
.pm-punkte span{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.45;color:var(--grau)}
.pm-punkte b{font-size:15px;font-weight:600;color:var(--text)}
.pm-bild{display:flex;flex-direction:column;gap:14px}
.pm.bild-fest .pm-bild{order:-1;position:sticky;top:var(--pm-oben,86px);z-index:2;background:#fff;padding:12px 0 8px;margin-top:-12px;align-self:start;
  box-shadow:0 14px 14px -14px rgba(1,4,12,.12)}
.pm-platz{grid-column:1 / -1}
.pm.kompakt{padding:28px 40px;gap:40px}
.pm.kompakt h3{margin:8px 0 10px}
.pm.kompakt .pm-def{margin-bottom:16px}
.pm.kompakt .pm-punkte{margin-bottom:18px;gap:10px 20px}
.pm.kompakt .pmk{max-height:var(--pm-karte,300px)}
.pmk{display:block;width:100%;height:auto;max-height:360px;overflow:visible}
.pm-reiter{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(1,4,12,.1)}
.pm-reiter button{position:relative;border:0;background:none;padding:14px 0 6px;text-align:left;cursor:pointer;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--grau-2);transition:color .2s}
.pm-reiter button:hover,.pm-reiter button:focus-visible,.pm-reiter button[aria-selected="true"]{color:var(--text)}
.pm-reiter i{position:absolute;left:0;right:12px;top:-1px;height:2px;background:var(--blau-z);transform-origin:left;transform:scaleX(var(--fort,0));transition:transform .15s linear}
.pm-reiter button[aria-selected="true"] i{background:var(--blau)}
.pm-erklaerung{font-size:14px;line-height:1.5;color:var(--grau)}
.phasen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.phase{display:flex;flex-direction:column;padding:28px 26px 32px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(1,4,12,.08)}
.phase-bild{height:170px;margin:-6px -6px 18px}
.phase-bild .iso{width:100%;height:100%}
.phase .nr{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--blau)}
.phase h3{font-size:22px;line-height:1.15;letter-spacing:-.025em;margin-top:10px}
.phase p:not(.nr){font-size:16px;line-height:1.6;color:var(--grau);margin-top:12px}
@media (max-width:1100px){.phasen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){.pm{grid-template-columns:minmax(0,1fr);gap:28px;padding:32px 24px}.pmk{max-height:260px}}
@media (max-width:768px){.ablauf{padding:72px 0}.ablauf-titel{margin-bottom:32px}}
@media (max-width:640px){.phasen{grid-template-columns:1fr}}
@media (max-width:560px){.pm-punkte{grid-template-columns:1fr}}

/* ---------- Kontakt ---------- */
.held-kontakt{background:var(--navy);padding:250px 0 140px}
.held-kontakt h1{font-size:clamp(40px,4.45vw,64px);line-height:1.02;max-width:440px}
.held-kontakt .held-text{margin-top:20px;max-width:560px}
.formular{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;max-width:640px;margin-top:200px}
.formular .voll,.formular button,.formular-hinweis,.formular-status{grid-column:1 / -1}
.formular label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:8px}
.formular input,.formular textarea{width:100%;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:6px;
  padding:14px 16px;font:inherit;font-size:16px;transition:border-color .15s,background-color .15s}
.formular textarea{min-height:120px;resize:vertical}
.formular input:focus,.formular textarea:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.12)}
.formular input::placeholder,.formular textarea::placeholder{color:rgba(255,255,255,.45)}
.formular [aria-invalid="true"]{border-color:#ffb4a8}
.formular button{justify-self:start;background:var(--blau);color:#fff;border:0;border-radius:6px;padding:20px 32px;font-size:14px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:background-color .15s}
.formular button:hover,.formular button:focus-visible{background:var(--blau-d)}
.formular button[disabled]{opacity:.6;cursor:default}
.pflicht{color:var(--blau-h);margin-left:3px}
.formular-hinweis{font-size:13px;line-height:1.5;color:rgba(255,255,255,.6)}
.pflicht-legende{display:block;margin-bottom:6px}
.pflicht-legende .pflicht{margin:0}
.formular-hinweis a,.formular-status a{color:inherit;text-decoration:underline}
.formular-status{margin:0;font-size:15px;line-height:1.5}
.formular-status:empty{display:none}
.formular-status.ok{color:var(--blau-z)}
.formular-status.fehler{color:#ffb4a8}
.formular.gesendet input,.formular.gesendet textarea,.formular.gesendet button{opacity:.45;pointer-events:none}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Nach dem Absenden: Bestaetigung an Stelle des Formulars */
.formular[hidden],.bestaetigung[hidden]{display:none}
.bestaetigung{max-width:560px;margin-top:88px;padding:44px 44px 40px;border-radius:12px;background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);animation:bestaetigung-ein .6s cubic-bezier(.16,1,.3,1) both}
.bestaetigung-haken{display:block;width:56px;height:56px;margin-bottom:26px}
.bestaetigung-haken svg{width:100%;height:100%}
.bestaetigung-haken circle{fill:var(--blau);stroke:none}
.bestaetigung-haken path{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:32;stroke-dashoffset:32;
  animation:haken-zeichnen .5s cubic-bezier(.65,0,.35,1) .35s forwards}
.bestaetigung-titel{font-size:clamp(26px,2.6vw,36px);line-height:1.1;color:#fff;margin-bottom:14px;outline:none}
.bestaetigung p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.78);margin-bottom:32px;max-width:44ch}
@keyframes bestaetigung-ein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes haken-zeichnen{to{stroke-dashoffset:0}}
@media (max-width:768px){.bestaetigung{margin-top:48px;padding:32px 24px 28px}}
@media (prefers-reduced-motion:reduce){.bestaetigung-haken path{stroke-dashoffset:0;animation:none}}
@media (max-width:768px){.held-kontakt{padding:96px 0 80px}.held-kontakt h1{font-size:26px;max-width:none}.formular{grid-template-columns:1fr;margin-top:48px}
  .formular-hinweis a{display:inline-block;padding:8px 0}}

/* ---------- Rechtsseiten: nuechtern, flacher heller Grund ---------- */
.recht{padding:98px var(--rand) 120px;background:var(--hell)}
.recht-karte{max-width:900px;margin:0 auto;padding:64px 72px;background:#fff;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(1,4,12,.15)}
.recht .kicker{color:var(--grau);margin-bottom:24px}
.recht h1{font-size:48px;line-height:1.02;margin-bottom:40px}
.recht h2{font-size:20px;line-height:1.06;margin:40px 0 12px}
.recht h3{font-size:17px;margin:28px 0 10px}
.recht p,.recht address{font-size:16px;line-height:1.65;color:var(--grau);margin-bottom:14px}
.recht address{color:var(--text)}
.recht a{color:var(--blau-d);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
@media (max-width:720px){.recht{padding:40px 16px 60px}.recht-karte{padding:32px 24px}.recht h1{font-size:30px}.recht h2{font-size:17px}
  .recht a[href^="tel:"],.recht a[href^="mailto:"]{display:inline-block;padding:10px 0}}

/* ---------- 404 ---------- */
.fehler{min-height:calc(100vh - var(--kopf));display:flex;align-items:center;background:var(--hell)}
.fehler .innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:88px;align-items:center;padding-top:96px;padding-bottom:96px}
.fehler .kicker{color:var(--grau);font-weight:400}
.fehler h1{display:flex;gap:.01em;font-size:clamp(96px,11vw,160px);line-height:1;letter-spacing:-.04em;margin:18px 0 20px;user-select:none}
.fehler h1 span{display:inline-block;background:linear-gradient(180deg,#2563EB 0%,#93B4F8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:schweben 6s ease-in-out infinite}
.fehler h1 span:nth-child(2){animation-delay:-2s}
.fehler h1 span:nth-child(3){animation-delay:-4s}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-.035em)}}
.fehler p{font-size:17px;line-height:1.6;color:var(--grau);margin-bottom:36px;max-width:46ch}
.fehler-bild{min-height:420px;display:grid;place-items:center}
.fehler-bild .iso{width:100%;height:100%;max-height:420px}
@media (max-width:860px){.fehler{min-height:0}.fehler .innen{grid-template-columns:1fr;gap:24px;padding-top:48px;padding-bottom:72px}.fehler-bild{min-height:300px;order:-1}}

/* ---------- Hinweis zur Speicherung ---------- */
.hinweis-cookie{position:fixed;left:24px;bottom:24px;z-index:80;max-width:420px;background:#fff;color:var(--text);border-radius:8px;padding:22px 24px;
  box-shadow:inset 0 0 0 1px rgba(1,4,12,.15),0 8px 24px rgba(1,4,12,.12)}
.hinweis-cookie[hidden]{display:none}
.hinweis-cookie p{font-size:14px;line-height:1.55;color:var(--grau);margin-bottom:16px}
.hinweis-cookie a{color:var(--blau);text-decoration:underline}
.hinweis-cookie button{background:var(--blau);color:#fff;border:0;border-radius:6px;padding:13px 22px;font-size:13px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer}
.hinweis-cookie button:hover{background:var(--blau-d)}
@media (max-width:620px){.hinweis-cookie{left:16px;right:16px;bottom:16px;max-width:none;padding:16px 18px}.hinweis-cookie p{font-size:13px;margin-bottom:12px}}

/* ---------- Einblenden beim Hereinscrollen (nur mit Skript) ---------- */
.js [data-ein]{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js [data-ein].da{opacity:1;transform:none}

/* ---------- Isometrische Grafiken: Bewegung ---------- */
.iso{overflow:visible}
.iso g,.pmk g{transform-box:view-box}
/* angehalten, bis die Grafik ins Bild kommt */
.js .iso:not(.an),.js .iso:not(.an) *{animation-play-state:paused !important}
.iso-blatt{animation:iso-rein 6s cubic-bezier(.16,1,.3,1) infinite both}
.iso-blatt.a{--dx:-70px;--dy:-34px}
.iso-blatt.b{--dx:72px;--dy:-30px;animation-delay:.35s}
.iso-blatt.c{--dx:0px;--dy:-60px;animation-delay:.7s}
@keyframes iso-rein{0%{opacity:0;transform:translate(var(--dx),var(--dy))}18%,78%{opacity:1;transform:translate(0,0)}92%,100%{opacity:0;transform:translate(0,-10px)}}
.iso-glanz{opacity:0;animation:iso-glanz 6s ease-in-out infinite}
@keyframes iso-glanz{0%,30%{opacity:0}42%{opacity:.35}60%,100%{opacity:0}}
.iso-eintrag{opacity:0;animation:iso-eintrag-z 5s cubic-bezier(.16,1,.3,1) infinite}
.iso-eintrag.p{animation-name:iso-eintrag-p}
@keyframes iso-eintrag-z{0%,8%{opacity:0;transform:translateY(-6px)}18%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
@keyframes iso-eintrag-p{0%,36%{opacity:0;transform:translateY(-6px)}46%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
.iso-leitung{opacity:.2;animation:iso-leitung 5s ease-in-out infinite}
@keyframes iso-leitung{0%,18%{opacity:.2}26%,42%{opacity:1}56%,100%{opacity:.2}}
.iso-lauf{animation:iso-lauf 6s linear infinite both}
@keyframes iso-lauf{0%{opacity:0;transform:translate(0,-12px)}8%{opacity:1;transform:none}80%{opacity:1;transform:translate(95.3px,55px)}90%,100%{opacity:0;transform:translate(95.3px,55px)}}
.iso-roh{animation:iso-roh 6s linear infinite}
.iso-fertig{animation:iso-fertig 6s linear infinite}
.iso-lauf.n1,.n1 .iso-roh,.n1 .iso-fertig{animation-delay:-2s}
.iso-lauf.n2,.n2 .iso-roh,.n2 .iso-fertig{animation-delay:-4s}
@keyframes iso-roh{0%,42%{opacity:1}50%,100%{opacity:0}}
@keyframes iso-fertig{0%,42%{opacity:0}50%,100%{opacity:1}}
.iso-licht{opacity:.12;animation:iso-licht 2s ease-in-out infinite}
@keyframes iso-licht{0%,22%{opacity:.12}38%{opacity:.55}56%,100%{opacity:.12}}
.iso-ph-zeile{opacity:0;animation:iso-ph-zeile 6s ease infinite}
.iso-ph-zeile.r0{animation-delay:.6s}.iso-ph-zeile.l1{animation-delay:1.2s}.iso-ph-zeile.r1{animation-delay:1.8s}
.iso-ph-zeile.l2{animation-delay:2.4s}.iso-ph-zeile.r2{animation-delay:3s}
@keyframes iso-ph-zeile{0%{opacity:0}6%,80%{opacity:1}92%,100%{opacity:0}}
.iso-ph-linie{opacity:0;animation:iso-ph-linie 6s ease infinite}
@keyframes iso-ph-linie{0%{opacity:0}8%,82%{opacity:.9}94%,100%{opacity:0}}
.iso-ph-setzen{opacity:0;animation:iso-ph-setzen 6s cubic-bezier(.16,1,.3,1) infinite both}
@keyframes iso-ph-setzen{0%{opacity:0;transform:translateY(-22px)}12%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}
.iso-ph-bereich{opacity:.18;animation:iso-ph-bereich 5.4s ease-in-out infinite}
@keyframes iso-ph-bereich{0%{opacity:.18;transform:none}10%,70%{opacity:1;transform:translateY(-6px)}85%,100%{opacity:.18;transform:none}}
.iso-flug{animation:iso-flug 6s cubic-bezier(.45,0,.25,1) infinite both}
@keyframes iso-flug{0%{opacity:0;transform:none}5%{opacity:1;transform:none}14%{transform:translate(calc(var(--tx) * .5),calc(var(--ty) * .5 - 14px))}
  24%{opacity:1;transform:translate(var(--tx),var(--ty))}30%,100%{opacity:0;transform:translate(var(--tx),var(--ty))}}
.iso-entwurf{animation:iso-entwurf 6s cubic-bezier(.45,0,.25,1) infinite both}
@keyframes iso-entwurf{0%,34%{opacity:0;transform:none}42%,58%{opacity:1;transform:translateY(-14px)}70%,86%{opacity:1;transform:translate(var(--tx),var(--ty))}94%,100%{opacity:0;transform:translate(var(--tx),var(--ty))}}
.iso-haken{animation:iso-haken 6s ease infinite both}
@keyframes iso-haken{0%,46%{opacity:0}52%,88%{opacity:1}94%,100%{opacity:0}}
.iso-puls{animation:iso-puls 6s ease infinite both}
@keyframes iso-puls{0%{opacity:0}6%,20%{opacity:1}30%,100%{opacity:0}}
.iso-plakette{animation:iso-plakette 6s cubic-bezier(.16,1,.3,1) infinite both}
@keyframes iso-plakette{0%{opacity:0;transform:translateY(6px)}6%,24%{opacity:1;transform:none}30%,100%{opacity:0;transform:none}}
.iso-satz{animation:iso-ordnen 6s cubic-bezier(.65,0,.35,1) infinite both}
@keyframes iso-ordnen{0%{opacity:0;transform:translate(var(--mx),var(--my))}8%,16%{opacity:1;transform:translate(var(--mx),var(--my))}40%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
.iso-alt{opacity:0;animation:iso-alt 6s ease infinite both}
@keyframes iso-alt{0%,36%{opacity:1}50%,100%{opacity:0}}
.iso-dublette{animation:iso-dublette 6s cubic-bezier(.65,0,.35,1) infinite both}
@keyframes iso-dublette{0%{opacity:0;transform:translate(var(--mx),var(--my))}8%,16%{opacity:1;transform:translate(var(--mx),var(--my))}40%{opacity:1;transform:none}50%,100%{opacity:0;transform:none}}
.iso-schimmer{opacity:0;animation:iso-schimmer 6s ease-in-out infinite}
@keyframes iso-schimmer{0%,50%{opacity:0}60%{opacity:.3}72%,100%{opacity:0}}
.iso-neu{animation:iso-neu 6s cubic-bezier(.16,1,.3,1) infinite both}
@keyframes iso-neu{0%,68%{opacity:0;transform:translateY(-14px)}76%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
.iso-lupe{animation:iso-lupe 7s cubic-bezier(.65,0,.35,1) infinite both}
@keyframes iso-lupe{0%{opacity:0;transform:translate(var(--x0),var(--y0))}6%{opacity:1;transform:translate(var(--x0),var(--y0))}
  18%,26%{opacity:1;transform:translate(var(--x1),var(--y1))}38%,46%{transform:translate(var(--x2),var(--y2))}
  58%,66%{opacity:1;transform:translate(var(--x3),var(--y3))}74%,100%{opacity:0;transform:translate(var(--x3),var(--y3))}}
.iso-m1,.iso-m2,.iso-m3{animation:iso-m1 7s ease infinite both}
.iso-m2{animation-name:iso-m2}.iso-m3{animation-name:iso-m3}
@keyframes iso-m1{0%,18%{opacity:0}23%,88%{opacity:1}95%,100%{opacity:0}}
@keyframes iso-m2{0%,38%{opacity:0}43%,88%{opacity:1}95%,100%{opacity:0}}
@keyframes iso-m3{0%,58%{opacity:0}63%,88%{opacity:1}95%,100%{opacity:0}}
.iso-b1,.iso-b2,.iso-b3{animation:iso-b1 7s cubic-bezier(.16,1,.3,1) infinite both}
.iso-b2{animation-name:iso-b2}.iso-b3{animation-name:iso-b3}
@keyframes iso-b1{0%,22%{opacity:0;transform:translateY(5px)}27%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes iso-b2{0%,42%{opacity:0;transform:translateY(5px)}47%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes iso-b3{0%,62%{opacity:0;transform:translateY(5px)}67%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.iso-modul{animation:iso-modul 7s cubic-bezier(.16,1,.3,1) infinite both}
@keyframes iso-modul{0%,4%{opacity:0;transform:translateY(-30px)}14%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.iso-pm-knoten{animation:iso-pm-knoten 9s cubic-bezier(.22,1,.36,1) infinite both}
@keyframes iso-pm-knoten{0%{opacity:0;transform:translateY(-16px)}7%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
.iso-pm-linie{animation:iso-pm-linie 9s ease-out infinite both}
@keyframes iso-pm-linie{0%,4%{opacity:0}10%,90%{opacity:1}97%,100%{opacity:0}}
.iso-pm-vorgang{opacity:0;animation:iso-pm-vorgang 9s cubic-bezier(.45,0,.55,1) infinite both}
@keyframes iso-pm-vorgang{0%,24%{opacity:0;transform:translate(var(--x0),var(--y0))}27%{opacity:1;transform:translate(var(--x0),var(--y0))}
  33%{transform:translate(var(--x1),var(--y1))}39%{transform:translate(var(--x2),var(--y2))}45%{transform:translate(var(--x3),var(--y3))}
  51%{transform:translate(var(--x4),var(--y4))}57%{opacity:1;transform:translate(var(--x5),var(--y5))}61%,100%{opacity:0;transform:translate(var(--x5),var(--y5))}}
.iso-pm-engpass{animation:iso-pm-engpass 9s ease infinite both}
@keyframes iso-pm-engpass{0%,44%{opacity:0}49%,90%{opacity:1}97%,100%{opacity:0}}
.iso-pm-auto{animation:iso-pm-auto 9s ease infinite both}
@keyframes iso-pm-auto{0%,52%{opacity:0}57%,90%{opacity:1}97%,100%{opacity:0}}
.iso-pm-dok{animation:iso-pm-dok 9s cubic-bezier(.22,1,.36,1) infinite both}
@keyframes iso-pm-dok{0%,60%{opacity:0;transform:translateY(0)}70%,90%{opacity:1;transform:translateY(-26px)}97%,100%{opacity:0;transform:translateY(-26px)}}

/* Prozessmap auf Vorgehen: Zustaende je Stufe */
.pmk-bahn{font-family:var(--mono);font-size:6px;letter-spacing:.14em;fill:var(--grau-2)}
.pmk-linien{fill:var(--blau-z);opacity:0;transition:opacity .6s ease .5s,fill .6s ease}
.pmk-schritt{opacity:0;transform:translateY(-14px);transition:opacity .55s cubic-bezier(.22,1,.36,1) var(--d),transform .7s cubic-bezier(.22,1,.36,1) var(--d)}
.pmk-orange,.pmk-blau,.pmk-warn,.pmk-mensch,.pmk-ok{opacity:0;transition:opacity .55s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.pmk-warn,.pmk-mensch{transform:translateY(5px)}
.pmk-ok{transform:translateY(8px)}
.pmk-vorgang{opacity:0;transition:opacity .4s ease}
.pm-buehne:not([data-stufe="0"]) .pmk-schritt{opacity:1;transform:none}
.pm-buehne:not([data-stufe="0"]) .pmk-linien{opacity:1}
.pm-buehne[data-stufe="1"] .pmk-vorgang{opacity:1;animation:pmk-lauf 7s cubic-bezier(.45,0,.55,1) .9s infinite both}
@keyframes pmk-lauf{0%{opacity:0;transform:translate(var(--x0),var(--y0))}4%{opacity:1;transform:translate(var(--x0),var(--y0))}
  14%{transform:translate(var(--x1),var(--y1))}24%{transform:translate(var(--x2),var(--y2))}34%{transform:translate(var(--x3),var(--y3))}
  44%{transform:translate(var(--x4),var(--y4))}54%{transform:translate(var(--x5),var(--y5))}64%{transform:translate(var(--x6),var(--y6))}
  74%{transform:translate(var(--x7),var(--y7))}84%{opacity:1;transform:translate(var(--x8),var(--y8))}90%,100%{opacity:0;transform:translate(var(--x8),var(--y8))}}
.pm-buehne[data-stufe="2"] .pmk-schritt:not(.pmk-e){opacity:.4}
.pm-buehne[data-stufe="2"] .pmk-orange,.pm-buehne[data-stufe="2"] .pmk-warn{opacity:1;transform:none}
.pm-buehne[data-stufe="2"] .pmk-warn{transition-delay:var(--d)}
.pm-buehne[data-stufe="3"] .pmk-blau,.pm-buehne[data-stufe="3"] .pmk-mensch{opacity:1;transform:none}
.pm-buehne[data-stufe="3"] .pmk-a,.pm-buehne[data-stufe="3"] .pmk-e{transform:translateY(-5px)}
.pm-buehne[data-stufe="3"] .pmk-linien{fill:var(--blau)}

/* ---------- Intro der Startseite: Wortmarke mittig, das F fliegt ins Kopf-Logo ---------- */
html.intro{
  --i-hf:60px;--i-hw:62px;--i-gap:20px;--i-kh:24px;--i-kx:max(42px,calc(50vw - 678px));--i-ky:24px;--i-s:.4;
  --i-fw:calc(var(--i-hf) * 1.3394);--i-ww:calc(var(--i-hw) * 3.6863);--i-reihe:calc(var(--i-fw) + var(--i-gap) + var(--i-ww));
  --i-fx:calc(50vw - var(--i-reihe) / 2);--i-fy:calc(50vh - var(--i-hf) / 2);
  --i-tx:calc(var(--i-kx) - var(--i-fx));--i-ty:calc(var(--i-ky) - var(--i-fy))}
@media (max-width:768px){html.intro{--i-hf:42px;--i-hw:44px;--i-gap:14px;--i-kh:30px;--i-kx:20px;--i-ky:28px;--i-s:.714286}}
html.intro::before,html.intro::after{content:"";position:fixed;z-index:2147483647;pointer-events:none;background:center/contain no-repeat;opacity:0;will-change:transform,opacity}
html.intro::before{left:var(--i-fx);top:var(--i-fy);height:var(--i-hf);width:var(--i-fw);background-image:url(/assets/img/f-weiss.svg);transform-origin:0 0;
  animation:intro-f 1.8s .15s both}
html.intro::after{left:calc(var(--i-fx) + var(--i-fw) + var(--i-gap));top:calc(50vh - var(--i-hw) / 2);height:var(--i-hw);width:var(--i-ww);
  background-image:url(/assets/img/wortmarke-weiss.png);animation:intro-w 1.8s .15s both}
@keyframes intro-f{
  0%{opacity:0;transform:translate(0,12px) scale(.985);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  25%{opacity:1;transform:translate(0,0) scale(1)}
  61%{opacity:1;transform:translate(0,0) scale(1);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  97%,100%{opacity:1;transform:translate(var(--i-tx),var(--i-ty)) scale(var(--i-s))}}
@keyframes intro-w{
  0%{opacity:0;transform:translateY(12px) scale(.985);filter:blur(0);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  25%{opacity:1;transform:none;filter:blur(0)}
  58%{opacity:1;transform:none;filter:blur(0);animation-timing-function:ease-in}
  76%,100%{opacity:0;transform:translateX(-14px);filter:blur(8px)}}
html.intro .kopf-logo img{opacity:0;transition:none}
html.intro .held-start .held-innen > *,html.intro .held-start .branchen{animation:intro-text .9s cubic-bezier(.16,1,.3,1) 1.45s backwards}
@keyframes intro-text{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .ebenen > .tiefe{transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .iso *{animation:none !important}
  .iso-blatt,.iso-eintrag,.iso-ph-zeile,.iso-ph-linie,.iso-ph-setzen,.iso-ph-bereich{opacity:1}
  .iso-lauf.n1{opacity:0}.iso-lauf.n2{transform:translate(95.3px,55px)}.n2 .iso-roh{opacity:0}.iso-fertig{opacity:0}.n2 .iso-fertig{opacity:1}
  .iso-lupe,.iso-dublette,.iso-alt,.iso-schimmer,.iso-flug,.iso-pm-vorgang,.pmk-vorgang{opacity:0 !important}
  .iso-pm-dok{transform:translateY(-26px)}
  .branchen ul{animation:none}
  .js [data-ein]{opacity:1;transform:none}
}
@media print{.kopf,.fuss,.hinweis-cookie,.kopfbild{display:none}.held{background:none;color:#000;min-height:0}.held h1,.held .kicker{color:#000}}