@charset "UTF-8";
/* ==========================================================================
   Du First — KI-Automatisierung Landingpage
   Eigenständiges Stylesheet. Keine Frameworks, keine externen Requests.
   Schriften ausschließlich self-hosted (DSGVO, LG München I / 3 O 17493/20).
   ========================================================================== */

/* ---------- 1. Schriften (lokal, bereits im Projekt vorhanden) ---------- */
@font-face{font-family:Archivo;src:url(/fonts/Archivo-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/fonts/Archivo-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/fonts/Archivo-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/fonts/Archivo-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/fonts/Archivo-ExtraBold.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---------- 2. Tokens ---------- */
:root{
  --bg:#08080A; --bg-2:#0C0C0F;
  --surface:#111114; --surface-2:#17171C; --surface-3:#1D1D23;
  --border:rgba(255,255,255,.075); --border-str:rgba(255,255,255,.14);
  --text:#F7F7F8; --text-2:#B4B4BD; --text-3:#7C7C88;
  --accent:#C6F24E; --accent-soft:rgba(198,242,78,.14); --accent-line:rgba(198,242,78,.34);
  --accent-text:#C6F24E; --accent-ink:#0A0A0C;
  --cyan:#6EE7FF;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 40px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 32px 80px -24px rgba(0,0,0,.75);
  --grain-op:.032;

  --font:Archivo,"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono","Segoe UI Mono",Consolas,monospace;
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px;
  --wrap:1200px; --gut:clamp(1.25rem,5vw,3rem);
  --sec-y:clamp(5rem,11vh,8.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#FBFBFC; --bg-2:#F4F4F6;
  --surface:#FFFFFF; --surface-2:#F7F7F9; --surface-3:#EFEFF2;
  --border:rgba(9,9,11,.10); --border-str:rgba(9,9,11,.20);
  --text:#0B0B0E; --text-2:#4A4A55; --text-3:#74747F;
  --accent:#C6F24E; --accent-soft:rgba(122,158,20,.12); --accent-line:rgba(122,158,20,.36);
  --accent-text:#4F6B08;               /* Lime auf Hell besteht keinen Kontrast → dunkleres Grün */
  --accent-ink:#0A0A0C;
  --shadow:0 1px 2px rgba(9,9,11,.05),0 10px 30px -12px rgba(9,9,11,.14);
  --shadow-lg:0 2px 6px rgba(9,9,11,.06),0 30px 70px -28px rgba(9,9,11,.22);
  --grain-op:.02;
  color-scheme:light;
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem); line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
/* hidden ist eine Aussage ueber Sichtbarkeit, keine Empfehlung. Die
   UA-Regel dafuer ist schwaecher als jede Klasse mit display, und ein
   Bereich, der display:grid/flex setzt, waere trotz hidden zu sehen -
   genau das ist beim Fortschritt und beim Ergebnis der Analyse passiert. */
[hidden]{display:none!important}
/* Ueberschriften werden nach ihrer KLASSE oder ueber :is(h1..h6)
   angesprochen, nie ueber eine feste Stufe. Welche Stufe ein Abschnitt
   traegt, entscheidet seine Position im Dokument (duf_heading_plan in
   automation/render/support.php) - nicht das Stylesheet. Ein Selektor
   auf "h3" wuerde diese Entscheidung heimlich zurueckholen. */
h1,h2,h3,h4,h5,h6{font-weight:800;letter-spacing:-.034em;line-height:1.06;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-ink)}
mark.todo{background:#FFB020;color:#1A1200;padding:.05em .4em;border-radius:4px;font-weight:600;font-size:.9em}

/* ---------- 4. Utilities ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:840px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--accent-ink);padding:.8rem 1.3rem;font-weight:700;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

.eyebrow{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.eyebrow .num{color:var(--accent-text);font-weight:600}
.eyebrow .num::after{content:"";display:inline-block;width:20px;height:1px;background:var(--border-str);margin-left:.6rem;vertical-align:middle}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--accent-soft)}50%{box-shadow:0 0 0 7px transparent}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.72rem 1.25rem;border-radius:100px;font-weight:600;font-size:.925rem;letter-spacing:-.008em;
  border:1px solid transparent;transition:transform .28s var(--ease),background .2s,border-color .2s,box-shadow .28s var(--ease);
  will-change:transform}
.btn--lg{padding:.95rem 1.7rem;font-size:1rem}
.btn--primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 22px -8px rgba(198,242,78,.5)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(198,242,78,.6)}
.btn--ghost{border-color:var(--border-str);color:var(--text);background:transparent}
.btn--ghost:hover{border-color:var(--accent-line);background:var(--accent-soft);transform:translateY(-2px)}
.btn svg{stroke-width:2;transition:transform .28s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

.legal-note{font-size:.82rem;line-height:1.6;color:var(--text-3);max-width:62ch;margin-top:2rem}
.legal-note--center{margin-inline:auto;text-align:center}

/* Scroll-Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0)*70ms)}
.reveal.in{opacity:1;transform:none}

/* ---------- 5. Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent}
.nav.is-stuck{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);border-bottom-color:var(--border)}
.nav__inner{display:flex;align-items:center;gap:1.5rem;height:72px}
.nav__logo{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.03em;font-size:1.05rem;flex-shrink:0}
/* Bildmarke: schwarzes Monogramm als einzige Quelle. Im dunklen Schema kehrt
   der Filter reines Schwarz in reines Weiss um — eine Datei statt zwei. */
.nav__logo img{width:auto;height:21px;border-radius:0}
:root:not([data-theme=light]) .nav__logo img{filter:invert(1)}
.nav__links{display:flex;gap:.35rem;margin-left:auto}
.nav__links a{padding:.5rem .8rem;border-radius:100px;font-size:.9rem;font-weight:500;color:var(--text-2);transition:color .2s,background .2s}
.nav__links a:hover{color:var(--text);background:var(--surface-2)}
.nav__actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.nav__links+.nav__actions{margin-left:0}
.nav__lang,.nav__theme{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border);color:var(--text-2);font-family:var(--mono);font-size:.7rem;font-weight:600;
  letter-spacing:.04em;transition:color .2s,border-color .2s,background .2s}
.nav__lang:hover,.nav__theme:hover{color:var(--text);border-color:var(--border-str);background:var(--surface-2)}
.nav__theme .i-moon{display:none}
:root[data-theme=light] .nav__theme .i-sun{display:none}
:root[data-theme=light] .nav__theme .i-moon{display:block}
.nav__burger{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);place-items:center;gap:5px}
.nav__burger span{display:block;width:15px;height:1.6px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav__burger[aria-expanded=true] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.nav__burger[aria-expanded=true] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
.mnav{display:none;flex-direction:column;gap:.2rem;padding:.5rem var(--gut) 1.5rem;
  background:var(--bg);border-bottom:1px solid var(--border)}
.mnav a{padding:.85rem .2rem;font-size:1.05rem;font-weight:500;border-bottom:1px solid var(--border)}
.mnav__cta{margin-top:1rem;border-bottom:0!important;justify-content:center}

/* ---------- 6. Hero ---------- */
.hero{position:relative;padding-top:calc(72px + clamp(3rem,8vh,6rem));padding-bottom:var(--sec-y);overflow:hidden;isolation:isolate}
.hero__glow{position:absolute;top:-28%;left:50%;translate:-50% 0;width:min(1100px,130vw);aspect-ratio:1.5;z-index:-1;
  background:radial-gradient(45% 45% at 50% 50%,var(--accent) 0%,transparent 68%);opacity:.16;filter:blur(110px)}
:root[data-theme=light] .hero__glow{opacity:.3}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.hero__title{font-size:clamp(2.6rem,6.4vw,4.9rem);line-height:.99;margin:1.6rem 0 0;display:grid}
.hero__title .hl{color:var(--accent-text);position:relative;width:fit-content}
.hero__title .hl::after{content:"";position:absolute;left:0;right:0;bottom:.07em;height:.055em;background:var(--accent);
  opacity:.28;border-radius:2px;transform-origin:left;animation:swipe 1.1s .5s var(--ease) both}
@keyframes swipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero__sub{margin-top:1.5rem;font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--text-2);max-width:46ch;line-height:1.62}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.2rem}
.hero__trust{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--border)}
.hero__trust li{display:flex;align-items:center;gap:.5rem;font-size:.855rem;color:var(--text-2);font-weight:500}
.hero__trust svg{color:var(--accent-text);stroke-width:2.4;flex-shrink:0}

/* Ablauf-Diagramm */
.flow{position:relative;aspect-ratio:640/440;container-type:inline-size;
  border:1px solid var(--border);border-radius:var(--r-lg);background:
    linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
  box-shadow:var(--shadow-lg);overflow:hidden}
.flow::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(70% 60% at 50% 45%,#000 30%,transparent 100%)}
.flow__lines{position:absolute;inset:0;width:100%;height:100%}
.flow__base path{stroke:var(--border-str);stroke-width:1.4}
.flow__head{fill:var(--border-str);stroke:none}
.flow__pulse path{stroke:var(--accent);stroke-width:2;stroke-dasharray:14 260;stroke-dashoffset:274;
  animation:dash 2.7s linear infinite;animation-delay:var(--d,0s);filter:drop-shadow(0 0 5px var(--accent))}
@keyframes dash{to{stroke-dashoffset:0}}
.flow__node{position:absolute;left:var(--l);top:var(--t);width:26.25%;height:17.727%;
  display:flex;flex-direction:column;justify-content:center;gap:.15em;
  padding:0 4cqw;border-radius:calc(var(--r-sm) + .4cqw);
  background:var(--surface-2);border:1px solid var(--border);overflow:hidden;
  animation:node 4.5s var(--ease) infinite;animation-delay:calc(var(--i)*.45s)}
@keyframes node{0%,72%,100%{border-color:var(--border);background:var(--surface-2)}
  12%,44%{border-color:var(--accent-line);background:color-mix(in srgb,var(--accent) 7%,var(--surface-2))}}
.flow__meta{font-family:var(--mono);font-size:2.1cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);line-height:1}
.flow__label{font-size:2.9cqw;font-weight:600;letter-spacing:-.02em;line-height:1.18;color:var(--text)}

/* ---------- 7. Definition (GEO-Block) ---------- */
.definition{padding-block:clamp(2.5rem,6vh,4rem);border-block:1px solid var(--border);background:var(--bg-2)}
.definition__inner{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:2rem clamp(1.5rem,4vw,3.5rem);align-items:start}
.definition__text{font-size:clamp(1.02rem,1.25vw,1.15rem);line-height:1.72;color:var(--text-2);max-width:78ch}

/* ---------- 8. Sektionen ---------- */
.sec{padding-block:var(--sec-y);position:relative}
.sec--alt{background:var(--bg-2);border-block:1px solid var(--border)}
.sec--tight{padding-block:clamp(3.5rem,8vh,6rem)}
.sec__head{max-width:62ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__head--center .eyebrow{justify-content:center}
.sec__title{font-size:clamp(2rem,4vw,3.15rem);margin-top:1.1rem}
.sec__lead{margin-top:1.1rem;color:var(--text-2);font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.65}

/* ---------- 9. Problem ---------- */
.pain{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1rem}
.pain__card{padding:1.7rem 1.6rem;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  transition:border-color .3s,transform .3s var(--ease)}
.pain__card:hover{border-color:var(--border-str);transform:translateY(-3px)}
.pain__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;
  background:var(--accent-soft);color:var(--accent-text);margin-bottom:1.2rem}
.pain__title{font-size:1.06rem;font-weight:700;line-height:1.32;letter-spacing:-.02em}
.pain__text{margin-top:.65rem;font-size:.9rem;color:var(--text-3);line-height:1.6}
.bridge{margin-top:clamp(2.5rem,5vw,3.5rem);padding:clamp(1.8rem,4vw,2.6rem);border-radius:var(--r-lg);
  border:1px solid var(--accent-line);background:var(--accent-soft);text-align:center}
.bridge__main{font-size:clamp(1.25rem,2.4vw,1.85rem);font-weight:800;letter-spacing:-.03em;line-height:1.24}
.bridge__sub{margin-top:.7rem;color:var(--text-2);font-size:.98rem}

/* ---------- 10. Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(198px,auto);gap:1rem}
.bento__tile{position:relative;overflow:hidden;padding:1.6rem;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease)}
.bento__tile--lg{grid-column:span 2;grid-row:span 2;padding:2rem;background:
  linear-gradient(155deg,color-mix(in srgb,var(--accent) 6%,var(--surface)) 0%,var(--surface) 55%)}
.bento__tile--wide{grid-column:span 2}
.bento__tile:hover{transform:translateY(-4px);border-color:var(--accent-line);box-shadow:var(--shadow-lg)}
.bento__glow{position:absolute;width:280px;height:280px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,var(--accent) 0%,transparent 65%);filter:blur(50px);
  left:var(--mx,50%);top:var(--my,50%);translate:-50% -50%;transition:opacity .4s}
.bento__tile:hover .bento__glow{opacity:.13}
.bento__tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.bento__title{margin-top:.9rem;font-size:clamp(1.1rem,1.5vw,1.32rem);letter-spacing:-.028em}
.bento__tile--lg .bento__title{font-size:clamp(1.5rem,2.4vw,2rem)}
.bento__text{margin-top:.6rem;font-size:.9rem;color:var(--text-2);line-height:1.58}
.bento__tile--lg .bento__text{font-size:1.02rem;max-width:38ch}
.bento__list{margin-top:auto;padding-top:1.4rem;display:grid;gap:.5rem;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .4s var(--ease),max-height .45s var(--ease),padding-top .4s}
.bento__tile--lg .bento__list{opacity:1;max-height:none;padding-top:1.5rem}
.bento__tile:hover .bento__list,.bento__tile:focus-within .bento__list{opacity:1;max-height:260px}
.bento__list li{display:flex;gap:.55rem;font-size:.84rem;color:var(--text-3);line-height:1.5}
.bento__list svg{color:var(--accent-text);stroke-width:2.6;flex-shrink:0;margin-top:.32em}

/* Die Kachel als Seiteneingang.
   Stand bis zur Navigationsaufschaltung in pages.css und galt damit nur auf
   /leistungen/. Seit die Startseite dieselben Kacheln verlinkt, gehoert sie
   hierher: die Regel fuer reduzierte Bewegung (Abschnitt 21) verweist
   ohnehin schon aus dieser Datei darauf. */
.bento__tile--link{cursor:pointer}
.bento__link{display:inline-flex;align-items:baseline;gap:.4rem}
/* Der ganze Kachelbereich ist klickbar, der Link bleibt aber das einzige
   Element in der Tabulatorreihenfolge - kein doppelter Stopp je Kachel. */
.bento__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.bento__link::before{content:"→";font-size:.85em;opacity:0;transform:translateX(-4px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);order:2}
.bento__tile--link:hover .bento__link::before,
.bento__tile--link:focus-within .bento__link::before{opacity:.75;transform:none}
.bento__tile--link:focus-within{border-color:var(--accent-line)}

/* ---------- 11. Ablauf ---------- */
.steps{position:relative;display:grid;gap:clamp(1.5rem,3vw,2.2rem);padding-left:clamp(0px,2vw,18px)}
.steps__rail{position:absolute;left:calc(clamp(0px,2vw,18px) + 27px);top:20px;bottom:20px;width:1.5px;background:var(--border);border-radius:2px}
.steps__rail i{display:block;width:100%;height:0;background:linear-gradient(180deg,var(--accent),var(--cyan));border-radius:2px;transition:height .25s linear}
.step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:clamp(1rem,2.5vw,2rem);align-items:start}
.step__no{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;position:relative;z-index:1;
  border:1px solid var(--border-str);background:var(--surface);
  font-family:var(--mono);font-size:.92rem;font-weight:600;color:var(--accent-text)}
.step__body{padding-bottom:.5rem;padding-top:.35rem}
.step__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem;font-size:clamp(1.25rem,2.2vw,1.7rem)}
.step__dur{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-text);padding:.28rem .65rem;border:1px solid var(--accent-line);border-radius:100px;background:var(--accent-soft)}
.step__text{margin-top:.8rem;color:var(--text-2);max-width:64ch;line-height:1.68}
.step__deliver{margin-top:.9rem;font-size:.85rem;color:var(--text-3);padding-left:.9rem;border-left:2px solid var(--border-str)}

/* ---------- 12. Proof ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--surface);padding:clamp(1.6rem,3vw,2.2rem)}
.stat__value{display:block;font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:800;letter-spacing:-.045em;line-height:1;
  color:var(--accent-text)}
.stat__label{display:block;margin-top:.7rem;font-weight:600;font-size:.98rem;letter-spacing:-.015em}
.stat__note{display:block;margin-top:.25rem;font-size:.8rem;color:var(--text-3)}

.own{margin-top:clamp(2.5rem,5vw,3.5rem);padding:clamp(1.7rem,4vw,2.6rem);border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--surface)}
.own__title{font-size:clamp(1.25rem,2vw,1.55rem)}
.own__lead{margin-top:.6rem;color:var(--text-2);font-size:.95rem;max-width:66ch}
.own__grid{margin-top:1.8rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem}
.own__item :is(h1,h2,h3,h4,h5,h6){font-size:.98rem;font-weight:700;letter-spacing:-.02em;padding-left:.85rem;border-left:2px solid var(--accent)}
.own__item p{margin-top:.55rem;padding-left:.85rem;font-size:.875rem;color:var(--text-3);line-height:1.58}

.cases__title{margin-top:clamp(2.5rem,5vw,3.5rem);font-size:clamp(1.25rem,2vw,1.55rem)}
.cases{margin-top:1.4rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.case{padding:1.6rem;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.case__sector{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.case__dl{margin-top:1.1rem;display:grid;gap:.25rem}
.case__dl dt{font-size:.7rem;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:.85rem}
.case__dl dd{font-size:.9rem;color:var(--text-2);line-height:1.55}
.case__dl dt.is-result{color:var(--accent-text)}
.case__dl dd.is-result{font-weight:700;color:var(--text);font-size:1rem}

/* ---------- 13. ROI ---------- */
.roi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.roi__controls{background:var(--surface);padding:clamp(1.7rem,4vw,2.8rem);display:grid;align-content:start;gap:1.9rem}
.roi__field{display:grid;gap:.85rem}
.roi__label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.92rem;font-weight:500;color:var(--text-2)}
.roi__out{font-family:var(--mono);font-size:1.15rem;font-weight:600;color:var(--accent-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.roi__range{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:grab}
.roi__range:active{cursor:grabbing}
.roi__range::-webkit-slider-runnable-track{height:4px;border-radius:100px;
  background:linear-gradient(90deg,var(--accent) var(--p,50%),var(--surface-3) var(--p,50%))}
.roi__range::-moz-range-track{height:4px;border-radius:100px;background:var(--surface-3)}
.roi__range::-moz-range-progress{height:4px;border-radius:100px;background:var(--accent)}
.roi__range::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:var(--accent);
  border:3px solid var(--bg);margin-top:-7.5px;box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .18s var(--ease)}
.roi__range::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:var(--accent);border:3px solid var(--bg);
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.roi__range:hover::-webkit-slider-thumb{transform:scale(1.16)}
.roi__disclaimer{font-size:.76rem;color:var(--text-3);line-height:1.55;padding-top:.4rem;border-top:1px solid var(--border)}
.roi__result{background:var(--surface-2);padding:clamp(1.7rem,4vw,2.8rem);display:flex;flex-direction:column}
.roi__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--border)}
.roi__rl{font-size:.9rem;color:var(--text-3)}
.roi__rv{font-family:var(--mono);font-size:1.06rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.roi__row--hero{border-bottom:0;padding-top:1.3rem}
.roi__row--hero .roi__rl{font-size:1rem;font-weight:600;color:var(--text)}
.roi__row--hero .roi__rv{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.04em;color:var(--accent-text);font-family:var(--font)}
.roi__year{font-size:.83rem;color:var(--text-3);text-align:right;margin-top:-.2rem}
.roi__cta{margin-top:auto;padding-top:1.8rem}
.roi__ctaTitle{font-weight:700;font-size:1.02rem;letter-spacing:-.02em;line-height:1.4}
.roi__ctaText{margin-top:.5rem;font-size:.875rem;color:var(--text-3);line-height:1.55}
.roi__cta .btn{margin-top:1.2rem;width:100%}

/* ---------- 14. Marquee ---------- */
.marquee{margin-top:clamp(2rem,4vw,3rem);overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;gap:.7rem;padding-right:.7rem}
@keyframes slide{to{transform:translateX(-50%)}}
.chip{display:grid;place-items:center;white-space:nowrap;padding:.62rem 1.25rem;border:1px solid var(--border);
  border-radius:100px;background:var(--surface);font-size:.875rem;font-weight:500;color:var(--text-2);
  transition:border-color .25s,color .25s}
.chip:hover{border-color:var(--accent-line);color:var(--text)}

/* ---------- 15. Zusammenarbeit (ehemals Preise) ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.1rem;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:clamp(1.7rem,3vw,2.2rem);
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  transition:transform .35s var(--ease),border-color .3s}
.plan:hover{transform:translateY(-4px);border-color:var(--border-str)}
.plan--hl{border-color:var(--accent-line);background:
  linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--surface)) 0%,var(--surface) 42%);box-shadow:var(--shadow-lg)}
.plan__badge{position:absolute;top:-.75rem;left:50%;translate:-50% 0;padding:.3rem .85rem;border-radius:100px;
  background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:.66rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.plan__name{font-size:1.02rem;font-weight:700;letter-spacing:-.02em}
.plan__price{display:flex;align-items:baseline;gap:.32rem;margin-top:1.2rem}
.plan__prefix{font-size:.85rem;color:var(--text-3)}
.plan__amount{font-size:clamp(2.3rem,4vw,3rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.plan__cur{font-size:1.4rem;font-weight:600;color:var(--text-2)}
.plan__period{margin-top:.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.plan__text{margin-top:1.1rem;font-size:.9rem;color:var(--text-2);line-height:1.58}
.plan__features{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border);display:grid;gap:.62rem}
.plan__features li{display:flex;gap:.6rem;font-size:.875rem;color:var(--text-2);line-height:1.5}
.plan__features svg{color:var(--accent-text);stroke-width:2.6;flex-shrink:0;margin-top:.3em}
.plan__cta{margin-top:auto;padding-top:0;width:100%}
.plan__features+.plan__cta{margin-top:1.8rem}
.plan__name--lg{font-size:clamp(1.25rem,2vw,1.55rem);margin-top:.9rem}
.collab__cta{margin-top:clamp(2rem,4vw,2.8rem);display:grid;justify-items:center;gap:1.1rem;text-align:center}
.collab__note{max-width:58ch;color:var(--text-2);font-size:.95rem;line-height:1.65}
.collab__cta .legal-note{margin-top:0}

/* ---------- 16. Warum ---------- */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.why__item{background:var(--surface);padding:clamp(1.6rem,3vw,2.1rem);transition:background .3s}
.why__item:hover{background:var(--surface-2)}
.why__item :is(h1,h2,h3,h4,h5,h6){font-size:1.05rem;letter-spacing:-.025em;color:var(--accent-text)}
.why__item p{margin-top:.7rem;font-size:.9rem;color:var(--text-2);line-height:1.6}

/* ---------- 17. FAQ ---------- */
.faq{display:grid;gap:.55rem}
.faq__item{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  transition:border-color .3s,background .3s}
.faq__item[open]{border-color:var(--accent-line);background:var(--surface-2)}
.faq__q{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.15rem 1.4rem;
  cursor:pointer;font-weight:600;font-size:clamp(.98rem,1.3vw,1.08rem);letter-spacing:-.02em;list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__chev{flex-shrink:0;color:var(--text-3);stroke-width:2.2;transition:transform .3s var(--ease),color .3s}
.faq__item[open] .faq__chev{transform:rotate(180deg);color:var(--accent-text)}
.faq__answer{padding:0 1.4rem 1.35rem;color:var(--text-2);font-size:.94rem;line-height:1.7;max-width:70ch}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq__item::details-content{block-size:0;overflow:hidden;opacity:0;
    transition:block-size .4s var(--ease),opacity .3s,content-visibility .4s allow-discrete}
  .faq__item[open]::details-content{block-size:auto;opacity:1}
}

/* ---------- 18. CTA / Formular ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate;border-top:1px solid var(--border)}
.cta__glow{position:absolute;bottom:-40%;left:50%;translate:-50% 0;width:min(900px,120vw);aspect-ratio:1.6;z-index:-1;
  background:radial-gradient(45% 45% at 50% 50%,var(--accent) 0%,transparent 70%);opacity:.13;filter:blur(110px)}
.form{position:relative;padding:clamp(1.7rem,4vw,2.6rem);border:1px solid var(--border);border-radius:var(--r-xl);
  background:var(--surface);box-shadow:var(--shadow-lg)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__progress{height:3px;border-radius:100px;background:var(--surface-3);overflow:hidden}
.form__progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--cyan));
  border-radius:100px;transition:width .45s var(--ease)}
.form__count{margin-top:.9rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.form__step{display:none;border:0;margin-top:1.5rem}
.form__step.is-active{display:block;animation:stepIn .45s var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.form__q{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:800;letter-spacing:-.03em;line-height:1.3;margin-bottom:1.2rem}
.choices{display:flex;flex-wrap:wrap;gap:.6rem}
.choice{position:relative;cursor:pointer}
.choice input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;left:0;top:0;margin:0}
.choice span{display:block;padding:.78rem 1.3rem;border:1px solid var(--border-str);border-radius:100px;
  font-size:.93rem;font-weight:500;transition:all .25s var(--ease)}
.choice:hover span{border-color:var(--accent-line);background:var(--accent-soft)}
.choice input:checked+span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.field{display:grid;gap:.45rem;margin-bottom:1.1rem}
.field label{font-size:.83rem;font-weight:500;color:var(--text-2)}
.req{color:var(--accent-text)}
.field input,.field textarea{padding:.85rem 1rem;border:1px solid var(--border-str);border-radius:var(--r-sm);
  background:var(--bg-2);font-size:.95rem;transition:border-color .25s,background .25s;width:100%;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--accent);background:var(--surface-2)}
.field input:user-invalid{border-color:#FF6B6B}
.consent{display:flex;gap:.75rem;align-items:flex-start;margin:1.3rem 0;font-size:.84rem;color:var(--text-3);line-height:1.55;cursor:pointer}
.consent input{width:19px;height:19px;flex-shrink:0;margin-top:.1em;accent-color:var(--accent);cursor:pointer}
.consent a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.form__hint{margin:1.3rem 0;font-size:.84rem;color:var(--text-3);line-height:1.55;max-width:60ch}
.form__hint a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.form__submit{width:100%;margin-top:.4rem}
.form__submit[disabled]{opacity:.6;pointer-events:none}
.form__back{margin-top:1.1rem;font-size:.83rem;color:var(--text-3);text-decoration:underline;text-underline-offset:3px}
.form__back:hover{color:var(--text)}
.form__error{margin-top:1rem;padding:.85rem 1rem;border-radius:var(--r-sm);border:1px solid #FF6B6B;
  background:rgba(255,107,107,.09);font-size:.86rem;color:var(--text)}
.form__success{text-align:center;padding:clamp(2.5rem,6vw,4rem) 2rem;border:1px solid var(--accent-line);
  border-radius:var(--r-xl);background:var(--accent-soft);animation:stepIn .5s var(--ease) both}
.form__success svg{margin:0 auto 1.2rem;color:var(--accent-text);stroke-width:2.4}
.form__success :is(h1,h2,h3,h4,h5,h6){font-size:clamp(1.3rem,2.5vw,1.8rem)}
.form__success p{margin-top:.8rem;color:var(--text-2);max-width:46ch;margin-inline:auto}

.direct{margin-top:1.5rem;padding:1.5rem clamp(1.5rem,3vw,2rem);border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface-2);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.direct__title{font-weight:700;letter-spacing:-.02em}
.direct__text{font-size:.875rem;color:var(--text-3);margin-top:.2rem}
.direct__links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-weight:600;font-size:.95rem}
.direct__links a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.direct__note{flex-basis:100%;font-size:.78rem;color:var(--text-3);padding-top:.9rem;border-top:1px solid var(--border)}

/* ---------- 19. Footer ---------- */
.foot{border-top:1px solid var(--border);background:var(--bg-2);padding-top:clamp(3rem,6vw,4.5rem)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:2.5rem clamp(1.5rem,3vw,2.5rem)}
.foot__tag{margin-top:1.1rem;font-size:.9rem;color:var(--text-2);max-width:34ch;line-height:1.6}
.foot__contact{margin-top:1rem;font-size:.9rem;font-weight:600;color:var(--accent-text)}
.foot__col{display:flex;flex-direction:column;gap:.6rem}
.foot__h{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:.35rem}
.foot__col a{font-size:.9rem;color:var(--text-2);transition:color .2s;width:fit-content}
.foot__col a:hover{color:var(--accent-text)}
.foot__plain{font-size:.9rem;color:var(--text-3)}
.foot__bar{margin-top:clamp(2.5rem,5vw,3.5rem);padding-block:1.5rem;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--text-3)}
.foot__barRight{display:flex;gap:1.5rem;align-items:center}
.foot__bar a:hover{color:var(--text)}
.foot__lang{font-family:var(--mono);letter-spacing:.08em}

/* ---------- 19b. Rechtstexte (Impressum / Datenschutz) ---------- */
.legal{padding-top:calc(72px + clamp(2.5rem,6vh,4.5rem));padding-bottom:var(--sec-y)}
.legal__title{font-size:clamp(2.2rem,5vw,3.6rem);margin-top:1.2rem}
.legal__lead{margin-top:1rem;color:var(--text-2);font-size:clamp(1rem,1.2vw,1.12rem);max-width:60ch}
.legal__meta{margin-top:.8rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3)}
.legal__note{margin-top:1.5rem;padding:.9rem 1.1rem;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);font-size:.86rem;color:var(--text-2)}
.legal__note a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.legal__back{margin-top:3rem;padding-top:1.8rem;border-top:1px solid var(--border)}
.legal__back a{color:var(--accent-text);font-weight:600;font-size:.95rem}

.prose{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:clamp(2rem,4vw,2.8rem)}
.prose__block{scroll-margin-top:100px}
.prose h2{font-size:clamp(1.15rem,1.9vw,1.4rem);letter-spacing:-.025em;padding-bottom:.7rem;
  border-bottom:1px solid var(--border);margin-bottom:1.1rem}
.prose p{color:var(--text-2);line-height:1.75;max-width:72ch}
.prose p+p{margin-top:.9rem}
.prose p.muted{font-size:.87rem;color:var(--text-3)}
.prose address{font-style:normal;color:var(--text);line-height:1.8;padding-left:1rem;
  border-left:2px solid var(--accent);font-size:.98rem}
.prose ul{margin-top:.9rem;display:grid;gap:.55rem;max-width:72ch}
.prose ul li{position:relative;padding-left:1.4rem;color:var(--text-2);line-height:1.65}
.prose ul li::before{content:"";position:absolute;left:.15rem;top:.72em;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;overflow-wrap:anywhere}

/* ---------- 19c. 404 ---------- */
.e404{position:relative;isolation:isolate;min-height:76vh;display:grid;place-items:center;
  padding-block:var(--sec-y);overflow:hidden}
.e404__glow{position:absolute;top:6%;left:50%;translate:-50% 0;width:min(760px,120vw);aspect-ratio:1.6;z-index:-1;
  background:radial-gradient(45% 45% at 50% 50%,var(--accent) 0%,transparent 70%);opacity:.14;filter:blur(110px)}
.e404__inner{text-align:center}
.e404__inner .eyebrow{justify-content:center}
.e404__title{font-size:clamp(2.2rem,5.5vw,3.8rem);margin-top:1.3rem}
.e404__text{margin:1.2rem auto 0;max-width:52ch;color:var(--text-2);line-height:1.7}
.e404 .hero__cta{justify-content:center;margin-top:2.2rem}

/* ---------- 20. Responsive ---------- */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:3rem}
  .flow{max-width:640px}
  .roi{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr;gap:2.5rem}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:900px){
  .nav__links{display:none}
  .nav__burger{display:grid}
  .nav.is-open .mnav{display:flex}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento__tile--lg{grid-row:span 1}
  .definition__inner{grid-template-columns:1fr;gap:1rem}
  /* Diagramm auf Mobil: vertikale Liste statt Positionierung */
  .flow{aspect-ratio:auto;padding:1.2rem;display:grid;gap:.6rem}
  .flow::before,.flow__lines{display:none}
  /* left/top müssen explizit zurückgesetzt werden — sonst greift die
     absolute Positionierung wieder, sobald unten position:relative gesetzt wird. */
  .flow__node{position:relative;left:auto;top:auto;width:100%;height:auto;
    padding:.95rem 1.1rem;animation:none;border-color:var(--border)}
  .flow__node+.flow__node::before{content:"";position:absolute;left:1.9rem;top:-.6rem;
    width:1.5px;height:.6rem;background:var(--accent-line)}
  .flow__meta{font-size:.62rem}
  .flow__label{font-size:.98rem}
}
@media (max-width:640px){
  .nav__cta{display:none}
  .bento{grid-template-columns:1fr}
  .bento__tile--lg,.bento__tile--wide{grid-column:span 1}
  .bento__list{opacity:1;max-height:none;padding-top:1.3rem}
  .step{grid-template-columns:44px minmax(0,1fr);gap:1rem}
  .step__no{width:44px;height:44px;font-size:.82rem}
  .steps__rail{left:22px}
  .foot__grid{grid-template-columns:1fr}
  .direct{flex-direction:column;align-items:flex-start}
  .roi__label{flex-direction:column;gap:.25rem}
}


/* ==========================================================================
   WELLE 2 — Mehrseitigkeit, Dock, Chat, Bewegung
   --------------------------------------------------------------------------
   Angehaengt, nicht eingestreut: alles unterhalb dieser Linie ist neu und
   laesst sich als Ganzes wieder entfernen. Die Tokens, die Typografie und
   die Farben oben bleiben unveraendert — die Identitaet der Seite ist
   Archivo, Anthrazit und das eine Limegruen, und daran aendert Welle 2
   nichts.

   Bewegung folgt drei Regeln:
     1. Bewegung erklaert eine Veraenderung. Wo sich nichts veraendert,
        bewegt sich nichts.
     2. Sie laeuft mit dem Scrollen oder mit dem Zeiger, nicht auf eigener
        Uhr. Etwas, das von allein tanzt, lenkt ab.
     3. Jede Regel unten hat ihre Abschaltung in Abschnitt 21
        (prefers-reduced-motion) — dort steht der Notaus fuer alles.
   ========================================================================== */

/* ---------- 23. Seitenuebergaenge (View Transitions) ---------- */
/* Cross-document: der Browser blendet zwischen zwei echten Seitenaufrufen
   ueber. Kein Router, kein JavaScript, kein Single-Page-Umbau — die Seite
   bleibt genau so belastbar wie vorher. Browser ohne Unterstuetzung
   navigieren normal; es gibt nichts zu ersetzen. */
@view-transition { navigation: auto; }

/* Was ueber die Seitengrenze hinweg dasselbe Ding ist, bekommt einen Namen
   und wird morphend weitergefuehrt statt neu aufgebaut. Bewusst wenige:
   Kopfzeile, Marke, Dock. Zu viele benannte Elemente ergeben ein Zucken,
   keinen Uebergang. */
.nav        { view-transition-name: site-nav; }
.nav__logo  { view-transition-name: site-mark; }
.dock       { view-transition-name: site-dock; }
main        { view-transition-name: page-main; }

::view-transition-old(page-main) {
  animation: vt-out .22s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(page-main) {
  animation: vt-in .34s var(--ease) both;
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(10px); } }

/* Kopfzeile und Dock stehen still, waehrend der Inhalt wechselt — genau
   das ist die Aussage: der Rahmen bleibt, der Inhalt ist neu. */
::view-transition-group(site-nav),
::view-transition-group(site-dock) { animation-duration: .01ms; }

/* ---------- 24. Scrollgesteuerte Bewegung ---------- */
/* animation-timeline: view() koppelt den Ablauf an die Sichtbarkeit des
   Elements statt an einen Zeitgeber. Der IntersectionObserver in
   automation.js bleibt als Rueckfall fuer Browser ohne Unterstuetzung —
   deshalb die @supports-Klammer: wo beides ginge, gewinnt CSS, und das
   Skript setzt nur noch .in, was dann nichts mehr bewirkt. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 1;
      transform: none;
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    @keyframes reveal-in {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: none; }
    }

    /* Der Lesefortschritt der Seite als duenne Linie unter der Kopfzeile.
       Reine Anzeige, kein Element im Textfluss. */
    .nav::after {
      content: "";
      position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: linear-gradient(90deg, var(--accent), var(--cyan));
      transform-origin: 0 50%;
      animation: read-progress linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* ---------- 21. Bewegung reduzieren (BFSG / WCAG 2.3.3) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .flow__pulse,.marquee__track{animation:none}
  .flow__pulse path{stroke-dasharray:none;stroke-dashoffset:0;opacity:.5}
  .hero__title .hl::after{transform:scaleX(1)}

  /* Welle 2. Ein Seitenuebergang ist Bewegung ueber die ganze Flaeche —
     genau das, was hier abgestellt gehoert. Die Navigation selbst bleibt,
     sie springt nur wieder statt zu blenden. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none!important}
  .nav::after{animation:none;display:none}
  .dock__arc,.chat__arc{transition:none}
  .chat:popover-open{animation:none}
  .bento__link::before{transition:none}
}

/* ---------- 22. Druck ---------- */
@media print{
  .nav,.grain,.hero__glow,.cta__glow,.marquee,.form,.skip{display:none!important}
  body{background:#fff;color:#000}
  .sec{padding-block:1.5rem;break-inside:avoid}
  .faq__item{border:1px solid #ccc}
}