@charset "UTF-8";
/* ki-frameworks – Relaunch 2026: helle und dunkle Bereiche im Wechsel. Keine externen Quellen. */

@font-face{
  font-family:"Inter";
  src:url("assets/fonts/InterVariable-latin.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap
}

:root{
  --navy-950:#050e1a;
  --navy-900:#081627;
  --navy-800:#0e2036;
  --navy-700:#173250;
  --on-dark:#eef4f3;
  --on-dark-muted:#a9b8c4;
  --line-dark:rgba(255,255,255,.1);
  --mint:#93efd2;
  --mint-hover:#b8f6e3;
  --sky:#7fb2ff;
  --paper:#ffffff;
  --mist:#f1f5f4;
  --ink:#0b1a2a;
  --ink-muted:#4a5a6a;
  --line-light:#d9e3e1;
  --petrol:#08745d;
  --font:"Inter","Segoe UI",Arial,sans-serif;
  --gutter:clamp(20px,4vw,80px);
  --max:1520px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --radius-l:24px;
  --radius-m:16px;
  --radius-s:10px
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1.0625rem/1.65 var(--font);
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.025em;font-weight:700;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--mint);color:var(--navy-900)}
:focus-visible{outline:2px solid var(--petrol);outline-offset:4px;border-radius:6px}
.on-dark :focus-visible,.hero :focus-visible,.site-header:not(.is-solid) :focus-visible{outline-color:var(--mint)}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.container{width:min(var(--max),100% - 2 * var(--gutter));margin-inline:auto}
.skip-link{position:fixed;left:16px;top:-80px;z-index:200;padding:12px 18px;border-radius:var(--radius-s);background:var(--mint);color:var(--navy-900);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}

/* ---------- Farbbereiche ---------- */
.on-dark{background:var(--navy-900);color:var(--on-dark)}
.on-mist{background:var(--mist)}
.on-paper{background:var(--paper)}

/* ---------- Buttons ---------- */
.button{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 24px;border-radius:999px;border:0;
  font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,box-shadow .25s ease,transform .25s var(--ease)
}
.button svg{width:16px;height:16px;flex:none;transition:transform .25s var(--ease)}
.button:hover svg{transform:translateX(3px)}
.button-mint{background:var(--mint);color:var(--navy-900);box-shadow:0 10px 30px -10px rgba(147,239,210,.6)}
.button-mint:hover{background:var(--mint-hover);transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(147,239,210,.75)}
.button-ghost{color:var(--on-dark);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.button-ghost:hover{box-shadow:inset 0 0 0 1px var(--mint);background:rgba(147,239,210,.08)}
.button-dark{background:var(--navy-900);color:#fff}
.button-dark:hover{background:var(--navy-700);transform:translateY(-2px)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--petrol)}
.link-arrow svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.link-arrow:hover{text-decoration:underline;text-underline-offset:5px}
.on-dark .link-arrow{color:var(--mint)}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:100;color:var(--on-dark);transition:background-color .3s ease,box-shadow .3s ease,color .3s ease}
.topbar{border-bottom:1px solid var(--line-dark);font-size:.8125rem;overflow:hidden;max-height:40px;transition:max-height .3s ease,opacity .3s ease,visibility 0s}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px}
.topbar p{color:var(--on-dark-muted)}
.topbar p strong{color:var(--mint);font-weight:600}
.topbar-links{display:flex;gap:22px}
.topbar a{color:var(--on-dark-muted);text-decoration:none}
.topbar a:hover{color:var(--on-dark);text-decoration:underline;text-underline-offset:4px}
.mainbar-inner{display:flex;align-items:center;gap:24px;min-height:76px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:1.125rem;letter-spacing:-.015em;text-decoration:none;white-space:nowrap;margin-right:auto}
.brand svg{width:30px;height:30px;flex:none}
.brand-point{color:var(--mint)}
.site-header.is-solid .brand-point{color:var(--petrol)}
.site-nav{display:flex;align-items:center;gap:28px}
.nav-list{display:flex;align-items:center;gap:4px}
.nav-list > li{position:relative}
.nav-link{
  display:inline-flex;align-items:center;gap:6px;padding:12px 14px;border-radius:999px;
  font-size:.9375rem;font-weight:550;text-decoration:none;opacity:.88;transition:opacity .2s ease,background-color .2s ease
}
.nav-link:hover,.has-menu:hover > .nav-link,.has-menu:focus-within > .nav-link{opacity:1;background:rgba(255,255,255,.08)}
.nav-link[aria-current="page"]{opacity:1;box-shadow:inset 0 -2px 0 var(--mint)}
.nav-link .chev{width:10px;height:10px;transition:transform .25s var(--ease)}
.has-menu:hover .chev,.has-menu:focus-within .chev{transform:rotate(180deg)}
.mega{
  position:absolute;top:calc(100% + 14px);left:50%;width:min(720px,80vw);
  display:grid;grid-template-columns:220px 1fr;gap:8px;padding:10px;
  border-radius:var(--radius-l);background:var(--paper);color:var(--ink);
  box-shadow:0 30px 80px -20px rgba(5,14,26,.45),0 0 0 1px rgba(5,14,26,.06);
  opacity:0;visibility:hidden;transform:translate(-50%,10px);transition:opacity .22s ease,transform .22s var(--ease),visibility 0s .22s
}
.mega::before{content:"";position:absolute;inset:-16px 0 auto;height:16px}
.has-menu:hover .mega,.has-menu:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.has-menu.is-closed .mega{opacity:0;visibility:hidden}
.site-header .mega :focus-visible{outline-color:var(--petrol)}
.site-header .mega-intro :focus-visible{outline-color:var(--mint)}
.mega-intro{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--radius-m);background:var(--navy-900);color:var(--on-dark)}
.mega-intro strong{font-size:1.125rem}
.mega-intro p{color:var(--on-dark-muted);font-size:.875rem;line-height:1.5}
.mega-intro a{margin-top:auto;color:var(--mint);font-size:.875rem;font-weight:600;text-decoration:none}
.mega-intro a:hover{text-decoration:underline;text-underline-offset:4px}
.mega-links{display:grid;gap:2px;align-content:start}
.mega-links a{display:block;padding:14px 16px;border-radius:12px;text-decoration:none;transition:background-color .15s ease}
.mega-links a:hover{background:var(--mist)}
.mega-links strong{display:block;font-size:.9375rem;font-weight:600}
.mega-links span{display:block;color:var(--ink-muted);font-size:.8125rem;line-height:1.5;margin-top:2px}
.nav-cta{min-height:44px;padding:0 20px;font-size:.9375rem}
.nav-phone{display:none}
.menu-toggle{display:none}

.site-header.is-solid{background:rgba(255,255,255,.95);color:var(--ink);box-shadow:0 1px 0 var(--line-light),0 10px 30px -18px rgba(5,14,26,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.site-header.is-solid .topbar{max-height:0;opacity:0;border:0;visibility:hidden;transition:max-height .3s ease,opacity .3s ease,visibility 0s .3s}
.site-header.is-solid .nav-link:hover,.site-header.is-solid .has-menu:hover > .nav-link,.site-header.is-solid .has-menu:focus-within > .nav-link{background:var(--mist)}
.site-header.is-solid .nav-link[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--petrol)}
.site-header.is-solid .nav-cta{background:var(--navy-900);color:#fff;box-shadow:none}
.site-header.is-solid .nav-cta:hover{background:var(--navy-700)}

/* ---------- Einstieg ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(150px,16vw,190px) 0 0;background:var(--navy-950);color:var(--on-dark);isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-bg::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(40% 45% at 72% 38%,rgba(147,239,210,.22),transparent 70%),
    radial-gradient(35% 40% at 92% 70%,rgba(127,178,255,.20),transparent 70%),
    radial-gradient(45% 50% at 10% 0%,rgba(23,50,80,.9),transparent 70%);
  animation:aurora 18s ease-in-out infinite alternate
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 70% at 65% 40%,#000 20%,transparent 75%);
  mask-image:radial-gradient(70% 70% at 65% 40%,#000 20%,transparent 75%)
}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-4%,3%,0) scale(1.08)}
  100%{transform:translate3d(3%,-2%,0) scale(1.03)}
}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;padding:7px 14px 7px 12px;border-radius:999px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  color:var(--on-dark);font-size:.875rem;font-weight:500;animation:fade-up .8s var(--ease) both
}
.pulse{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--mint)}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--mint);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{from{transform:scale(.6);opacity:1}to{transform:scale(2.2);opacity:0}}
.hero h1{font-size:clamp(2.75rem,1.2rem + 5vw,6.25rem);font-weight:750;letter-spacing:-.045em;line-height:1.02;margin-bottom:28px}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .line > span{display:block;animation:rise 1s var(--ease) both}
.hero h1 .line:nth-child(2) > span{animation-delay:.12s;background:linear-gradient(92deg,#fff 10%,var(--mint) 55%,var(--sky) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Unterlängen (g, Verlauf) nicht abschneiden: Platz unter jeder Zeile, ohne den Zeilenabstand zu ändern */
.hero h1 .line{padding-bottom:.16em;margin-bottom:-.08em}
.hero h1 .line > span{padding-bottom:.16em;margin-bottom:-.16em}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero-sub{max-width:34em;color:var(--on-dark-muted);font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.6;margin-bottom:36px;animation:fade-up .9s var(--ease) .3s both}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;animation:fade-up .9s var(--ease) .42s both}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Abschnitte allgemein ---------- */
.section{padding-block:clamp(64px,8vw,104px)}
.section-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px 72px;align-items:end;margin-bottom:clamp(44px,6vw,72px)}
.section-head h2{font-size:clamp(2.125rem,1.3rem + 2.8vw,4rem)}
.section-head p{color:var(--ink-muted);max-width:32em;font-size:1.125rem}
.on-dark .section-head p{color:var(--on-dark-muted)}
.overline{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;color:var(--petrol);font-size:.9375rem;font-weight:600}
.overline::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
.on-dark .overline{color:var(--mint)}
.h2-line{display:block}

/* Scroll-Einblendungen (nur mit JavaScript) */
.js [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].is-visible{opacity:1;transform:none}

/* ---------- Ansatz (hell) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.5vw,32px)}
.pillar{position:relative;padding:32px 30px 34px;border-radius:var(--radius-l);background:var(--mist);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pillar:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(5,14,26,.35)}
.pillar-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:26px;border-radius:14px;background:var(--navy-900);color:var(--mint)}
.pillar-icon svg{width:24px;height:24px}
.pillar h3{font-size:1.375rem;margin-bottom:12px}
.pillar p{color:var(--ink-muted);font-size:1rem}
.pillar-step{position:absolute;top:30px;right:30px;color:var(--ink-muted);font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Projekte (dunkel) ---------- */
.projects{position:relative;overflow:hidden}
.projects::before{content:"";position:absolute;inset:auto -10% -40% 40%;height:80%;background:radial-gradient(closest-side,rgba(147,239,210,.12),transparent);pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chips li{padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--on-dark-muted);font-size:.8125rem;font-weight:550}
.chips li:first-child{background:rgba(147,239,210,.14);color:var(--mint)}
.transfer{padding:20px 22px;border-radius:var(--radius-m);background:rgba(255,255,255,.04);border-left:3px solid var(--mint)}
.transfer b{display:block;font-weight:650;margin-bottom:4px}
.transfer p{color:var(--on-dark-muted);font-size:.9375rem}

/* ---------- Vorgehen mit Scroll-Fortschritt ---------- */
.track{position:relative;height:3px;margin:0 0 40px;border-radius:3px;background:var(--line-light);overflow:hidden}
.section-foot{margin-top:clamp(36px,5vw,52px)}

/* ---------- Person ---------- */
.person{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(48px,7vw,104px);align-items:center}
.portrait{position:relative;margin:0 24px 24px 0;max-width:460px}
.portrait::before{content:"";position:absolute;inset:24px -24px -24px 24px;border-radius:var(--radius-l);background:linear-gradient(135deg,var(--mint),var(--sky));opacity:.6;z-index:0}
.portrait img{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:568/606;object-fit:cover;border-radius:var(--radius-l);box-shadow:0 40px 80px -40px rgba(5,14,26,.5)}
.portrait figcaption{position:absolute;z-index:2;left:20px;bottom:20px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.95);box-shadow:0 10px 30px -10px rgba(5,14,26,.35);font-size:.875rem;line-height:1.35}
.portrait figcaption strong{display:block;font-weight:650}
.portrait figcaption span{color:var(--ink-muted)}
.person h2{font-size:clamp(2.125rem,1.3rem + 2.8vw,4rem);margin-bottom:26px}
.prose p{color:var(--ink-muted);max-width:36em}
.prose p + p{margin-top:1em}
.credentials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:32px 0}
.credentials li{padding:20px;border-radius:var(--radius-m);background:var(--paper);box-shadow:0 0 0 1px var(--line-light)}
.credentials svg{width:26px;height:26px;color:var(--petrol);margin-bottom:12px}
.credentials strong{display:block;font-weight:650;line-height:1.35}
.credentials span{display:block;margin-top:6px;color:var(--ink-muted);font-size:.875rem;line-height:1.5}

/* ---------- Buchung ---------- */
.contact{display:grid;gap:8px;padding-top:24px;border-top:1px solid var(--line-dark)}
.contact a{font-size:1.25rem;font-weight:600;text-decoration:underline;text-decoration-color:rgba(147,239,210,.5);text-underline-offset:6px;overflow-wrap:anywhere}
.contact a:hover{text-decoration-color:var(--mint)}
.contact p{color:var(--on-dark-muted);font-size:.9375rem}
.booking-card{position:relative;padding:2px;border-radius:calc(var(--radius-l) + 2px);background:rgba(255,255,255,.08);overflow:hidden;box-shadow:0 40px 100px -40px rgba(0,0,0,.7)}
.booking-card::before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent 0 55%,var(--mint) 70%,var(--sky) 80%,transparent 92%);animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.booking-card-inner{position:relative;padding:clamp(28px,3.5vw,44px);border-radius:var(--radius-l);background:linear-gradient(160deg,var(--navy-800),var(--navy-900))}
.booking-card h2,.booking-card h3{font-size:clamp(1.625rem,1.3rem + 1vw,2.125rem);margin-bottom:24px}
.booking-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 24px}
.booking-facts div{padding:14px;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line-dark)}
.booking-facts dt{color:var(--on-dark-muted);font-size:.8125rem}
.booking-facts dd{margin:2px 0 0;font-weight:650;font-size:1.0625rem}
.booking-card-inner > p{color:var(--on-dark-muted);margin-bottom:26px}
.booking-card .button{width:100%}
.booking-note{margin-top:16px;color:var(--on-dark-muted);font-size:.875rem;line-height:1.55}
.booking-note a{color:var(--on-dark);text-decoration:underline;text-decoration-color:rgba(147,239,210,.6);text-underline-offset:3px}
.booking-footer{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-dark);font-size:.875rem;font-weight:600}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-950);color:var(--on-dark-muted);font-size:.9375rem;padding-block:64px 36px}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:40px}
.footer-grid .brand{color:var(--on-dark);margin-bottom:14px}
.footer-grid h2{font-size:.9375rem;font-weight:650;letter-spacing:0;color:var(--on-dark);margin-bottom:14px}
.footer-grid ul{display:grid;gap:10px}
.footer-grid a{text-decoration:none}
.footer-grid a:hover{color:var(--on-dark);text-decoration:underline;text-underline-offset:4px}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line-dark);font-size:.875rem}
.footer-bottom a{text-decoration:none}
.footer-bottom a:hover{color:var(--on-dark);text-decoration:underline;text-underline-offset:4px}
.site-footer :focus-visible{outline-color:var(--mint)}

/* Pausenschalter für Animationen */
.motion-toggle{
  position:fixed;right:16px;bottom:16px;z-index:90;display:inline-grid;place-items:center;
  width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(8,22,39,.9);color:var(--on-dark);font-size:.8125rem;font-weight:600;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)
}
.motion-toggle:focus-visible{outline-color:var(--petrol)}
.motion-toggle svg{width:14px;height:14px}
.motion-toggle .icon-play{display:none}
.motion-toggle[aria-pressed="true"] .icon-play{display:block}
.motion-toggle[aria-pressed="true"] .icon-pause{display:none}
.is-paused *,.is-paused *::before,.is-paused *::after{animation-play-state:paused!important}
.is-paused .hero h1 .line > span,.is-paused .hero-badge,.is-paused .hero-sub,.is-paused .hero-actions,.is-paused .hero-chips,.is-paused .hero-portrait,.is-paused .page-hero .booking-card,.is-paused details[open] > div{animation:none!important}
.js.is-paused [data-reveal]{opacity:1;transform:none;transition:none}
.is-paused .metric::after{transform:scaleX(1);transition:none}
/* Ohne JavaScript: Kopfbereich scrollt mit, keine Endlosbewegung ohne Pausenknopf */
.no-js .site-header{position:absolute}
.no-js *,.no-js *::before,.no-js *::after{animation:none!important}

/* ---------- Rechtliche Seiten & 404 ---------- */
.page-solid{padding-top:96px}
.legal-main{padding-block:clamp(48px,7vw,96px);max-width:820px}
.legal-main h1{font-size:clamp(2.125rem,1.4rem + 2.6vw,3.25rem);margin:10px 0 32px}
.legal-main h2{font-size:1.5rem;margin:44px 0 14px;scroll-margin-top:110px}
.legal-main p,.legal-main li{color:var(--ink-muted)}
.legal-main p + p{margin-top:1em}
.legal-main a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.legal-main strong{color:var(--ink)}
.legal-main .button{color:#fff;text-decoration:none}
.legal-main nav ul{display:grid;gap:6px;padding:20px 24px;border-radius:var(--radius-m);background:var(--mist)}
.legal-main ul:not(nav ul){list-style:disc;padding-left:1.2em;margin:0 0 1em}
.legal-main h3{font-size:1.125rem;margin:28px 0 10px;color:var(--ink);scroll-margin-top:110px}
.legal-main p + ul:not(nav ul){margin-top:.6em}
.legal-summary{margin:24px 0 28px;padding:20px 24px;border-radius:var(--radius-m);box-shadow:inset 0 0 0 1px var(--line-light)}
.legal-main .legal-summary ul{margin:8px 0 0}
.legal-objection{margin-top:1em;padding:20px 24px;border-left:4px solid var(--petrol);border-radius:0 var(--radius-m) var(--radius-m) 0;background:var(--mist)}
.legal-objection + p{margin-top:1em}

/* ---------- Responsiv ---------- */
@media (max-width:1180px){
  .nav-list{gap:0}
  .nav-link{padding:12px 10px}
  .site-nav{gap:16px}
}
@media (max-width:1060px){
  .person,.section-head{grid-template-columns:minmax(0,1fr)}
  .pillars{grid-template-columns:minmax(0,1fr)}
  .track{display:none}
  .pillars{max-width:720px}
  .portrait{max-width:400px}
}
@media (max-width:980px){
  .topbar{display:none}
  .mainbar-inner{min-height:68px}
  .menu-toggle{
    display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:0;border-radius:999px;cursor:pointer;
    background:rgba(255,255,255,.1);font-size:.9375rem;font-weight:600
  }
  .site-header.is-solid .menu-toggle{background:var(--mist)}
  .menu-icon{position:relative;width:16px;height:10px}
  .menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,top .2s ease}
  .menu-icon::before{top:0}
  .menu-icon::after{top:8px}
  .menu-toggle[aria-expanded="true"] .menu-icon::before{top:4px;transform:rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .menu-icon::after{top:4px;transform:rotate(-45deg)}
  .js .site-nav{
    position:fixed;inset:68px 0 0;flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--gutter) 32px;overflow-y:auto;background:var(--paper);color:var(--ink)
  }
  .js .site-header.is-open{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line-light);-webkit-backdrop-filter:none;backdrop-filter:none}
  .js .site-header.is-open .brand-point{color:var(--petrol)}
  .js .site-header.is-open .menu-toggle{background:var(--mist)}
  .js .site-nav :focus-visible{outline-color:var(--petrol)}
  .nav-list{flex-direction:column;align-items:stretch}
  .nav-list > li{border-bottom:1px solid var(--line-light)}
  .nav-link{width:100%;justify-content:space-between;padding:18px 4px;font-size:1.125rem;opacity:1;border-radius:0}
  .nav-link:hover,.has-menu:hover > .nav-link,.has-menu:focus-within > .nav-link,.site-header.is-solid .nav-link:hover,.site-header.is-solid .has-menu:hover > .nav-link,.site-header.is-solid .has-menu:focus-within > .nav-link{background:transparent}
  .nav-link[aria-current="page"],.site-header.is-solid .nav-link[aria-current="page"]{box-shadow:inset 3px 0 0 var(--petrol);padding-left:14px}
  .nav-link .chev{display:none}
  .mega,.has-menu.is-closed .mega{position:static;width:auto;display:block;padding:0 0 14px;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;transition:none}
  .mega::before,.mega-intro{display:none}
  .has-menu:hover .mega,.has-menu:focus-within .mega{transform:none}
  .js .site-header.is-open :focus-visible{outline-color:var(--petrol)}
  .mega-links a{padding:10px 4px}
  .mega-links span{display:none}
  .mega-links strong{font-weight:500;color:var(--ink-muted)}
  .nav-cta,.site-header.is-solid .nav-cta{margin-top:24px;min-height:52px;background:var(--navy-900);color:#fff;box-shadow:none}
  .no-js .site-header{position:relative}
  .no-js .site-header:not(.is-solid){background:var(--navy-950)}
  .no-js .hero{padding-top:40px}
  .no-js .page-solid{padding-top:0}
  .no-js .mainbar-inner{flex-wrap:wrap;padding-block:12px}
  .no-js .site-nav{width:100%;flex-direction:column;align-items:stretch}
  .no-js .mega{display:none}
  .no-js .nav-list > li{border-color:var(--line-dark)}
  .no-js .site-header.is-solid .nav-list > li{border-color:var(--line-light)}
  .no-js .site-header.is-solid .nav-phone{box-shadow:inset 0 0 0 1px var(--line-light)}
}
@media (max-width:760px){
  .track{display:none}
  .credentials{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .footer-grid > div:first-child{grid-column:1 / -1}
  .portrait{margin:0 16px 16px 0}
  .portrait::before{inset:16px -16px -16px 16px}
}
@media (max-width:520px){
  body{font-size:1rem}
  .mainbar-inner{gap:12px}
  .brand{font-size:1rem;gap:9px}
  .brand svg{width:26px;height:26px}
  .menu-toggle{padding:0 14px}
  .legal-main h1{font-size:clamp(1.75rem,8.5vw,2.25rem)}
  .hero{padding-top:116px}
  .hero-actions .button{width:100%}
  .booking-facts{grid-template-columns:minmax(0,1fr)}
  .booking-facts div{display:flex;justify-content:space-between;gap:12px}
  .booking-facts dd{margin:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;transform:none}
  .motion-toggle{display:none}
}
@media print{
  .site-header,.skip-link,.motion-toggle{display:none}
  .on-dark,.hero,.site-footer,.closing{background:#fff;color:#000}
}

/* =====================================================================
   Unterseiten-Bausteine
   ===================================================================== */

/* Seiten-Einstieg (dunkel, kompakter als die Startseite) */
.page-hero{padding-bottom:clamp(72px,9vw,120px)}
.page-hero .hero-copy{max-width:58rem}
.page-hero h1{font-size:clamp(2.5rem,1.3rem + 4.4vw,5rem)}
.page-hero .hero-sub{max-width:40em}
.page-hero-grid h1{font-size:clamp(2.5rem,1.3rem + 3.6vw,4.5rem)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,5vw,80px);align-items:center}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;animation:fade-up .9s var(--ease) .5s both}
.hero-chips li{padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:var(--on-dark);font-size:.875rem;font-weight:550}
.hero-chips li:first-child{background:rgba(147,239,210,.14);color:var(--mint);box-shadow:inset 0 0 0 1px rgba(147,239,210,.35)}

/* Kennzahlen */
.page-hero .metrics{margin-top:clamp(48px,6vw,72px)}
.projects .metrics{margin-bottom:0}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.metric{
  position:relative;padding:clamp(24px,2.6vw,34px);border-radius:var(--radius-l);overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px var(--line-dark)
}
.metric::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--mint),var(--sky));transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .2s}
.metric.is-visible::after,.no-js .metric::after{transform:scaleX(1)}
.metric-value{display:block;font-size:clamp(2.5rem,1.6rem + 2.8vw,4rem);font-weight:750;letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;margin-bottom:14px;white-space:nowrap}
.metric-value small{font-size:.5em;font-weight:650;letter-spacing:-.01em;color:var(--mint);margin-left:4px}
.metric p{color:var(--on-dark-muted);font-size:.9375rem;line-height:1.5}
.metric p strong{display:block;color:var(--on-dark);font-weight:600;margin-bottom:2px}
.metric-source{margin-top:14px;font-size:.75rem;color:var(--on-dark-muted)}
.fineprint{margin-top:22px;color:var(--on-dark-muted);font-size:.8125rem;max-width:62em}
.on-paper .fineprint,.on-mist .fineprint{color:var(--ink-muted)}

.section-h2{font-size:clamp(2.125rem,1.3rem + 2.8vw,4rem);margin-bottom:26px}

/* Drei Textspalten */
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.col{padding-top:24px;border-top:2px solid var(--navy-900)}
.col h3{font-size:1.375rem;margin-bottom:14px}
.col p{color:var(--ink-muted)}

/* Vorher / Nachher */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.5vw,28px)}
.compare-col{padding:clamp(26px,3vw,40px);border-radius:var(--radius-l)}
.compare-before{background:var(--paper);box-shadow:0 0 0 1px var(--line-light)}
.compare-after{background:var(--navy-900);color:var(--on-dark);box-shadow:0 40px 80px -40px rgba(5,14,26,.55)}
.compare-col h3{display:flex;align-items:center;gap:12px;font-size:1.375rem;margin-bottom:22px}
.compare-tag{padding:4px 12px;border-radius:999px;font-size:.8125rem;font-weight:650;letter-spacing:0}
.compare-before .compare-tag{background:var(--mist);color:var(--ink-muted)}
.compare-after .compare-tag{background:rgba(147,239,210,.16);color:var(--mint)}
.compare ul{display:grid;gap:14px}
.compare li{display:flex;gap:14px;align-items:flex-start;line-height:1.5}
.compare li svg{width:20px;height:20px;flex:none;margin-top:2px}
.compare-before li{color:var(--ink-muted)}
.compare-before li svg{color:#a3483e}
.compare-after li svg{color:var(--mint)}

/* Ablauf Mensch / Automatik */
.flowline{position:relative;display:grid;gap:16px;max-width:980px}
.flowline::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:var(--line-dark)}
.flowline::after{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:linear-gradient(var(--mint),var(--sky));transform-origin:top;transform:scaleY(var(--progress,1))}
.js .flowline::after{transform:scaleY(var(--progress,0))}
.flow-item{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:22px;align-items:start}
.flow-dot{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--navy-800);box-shadow:inset 0 0 0 1px var(--line-dark);color:var(--on-dark-muted);transition:background-color .4s ease,color .4s ease,box-shadow .4s ease}
.flow-dot svg{width:22px;height:22px}
.flow-item.is-reached .flow-dot,.no-js .flow-dot{background:var(--mint);color:var(--navy-900);box-shadow:0 0 0 6px rgba(147,239,210,.15)}
.flow-card{padding:22px 26px;border-radius:var(--radius-m);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line-dark)}
.role{display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:650}
.role-human{background:rgba(255,255,255,.1);color:var(--on-dark)}
.role-auto{background:rgba(147,239,210,.16);color:var(--mint)}
.role-ai{background:rgba(127,178,255,.18);color:#b3d1ff}
.flow-card h3{font-size:1.1875rem;margin-bottom:8px}
.flow-card p{color:var(--on-dark-muted);font-size:.9375rem}

/* Zeitstrahl (hell) */
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px);counter-reset:tl}
.timeline li{position:relative;padding-top:58px}
.timeline li::before{counter-increment:tl;content:counter(tl,decimal-leading-zero);position:absolute;top:0;left:0;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--navy-900);color:var(--mint);font-weight:700;font-size:.875rem;font-variant-numeric:tabular-nums;z-index:1}
.timeline li::after{content:"";position:absolute;top:21px;left:42px;right:calc(-1 * clamp(16px,2vw,24px));height:2px;background:linear-gradient(90deg,var(--petrol),var(--line-light))}
.timeline li:last-child::after{display:none}
.timeline h3{font-size:1.1875rem;margin-bottom:10px}
.timeline p{color:var(--ink-muted);font-size:.9375rem}
.timeline-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* Bausteine / Funktionskarten */
.blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.5vw,32px)}
.block{display:flex;flex-direction:column;padding:clamp(28px,3vw,40px);border-radius:var(--radius-l);background:var(--paper);box-shadow:0 0 0 1px var(--line-light);transition:transform .35s var(--ease),box-shadow .35s var(--ease);scroll-margin-top:110px}
.block:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line-light),0 30px 60px -34px rgba(5,14,26,.4)}
.block .chips li{background:var(--mist);color:var(--ink-muted)}
.block .chips li:first-child{background:rgba(8,116,93,.1);color:var(--petrol)}
.block h3{font-size:clamp(1.375rem,1.1rem + .9vw,1.75rem);margin-bottom:14px}
.block > p{color:var(--ink-muted)}
.block > p + p{margin-top:.9em}
.checklist{display:grid;gap:10px;margin:22px 0 0}
.checklist li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.checklist svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--petrol)}
.on-dark .checklist svg{color:var(--mint)}
.block .transfer{margin-top:24px;background:var(--mist);border-left-color:var(--petrol)}
.block .transfer p{color:var(--ink-muted)}

/* Ergebnis-Text und Zitat */
.results-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.result{padding:26px 0;border-top:1px solid var(--line-light)}
.result:first-child{border-top:0;padding-top:0}
.result h3{font-size:1.25rem;margin-bottom:10px}
.result p{color:var(--ink-muted)}
.quote{position:relative;margin:0;padding:clamp(30px,4vw,48px);border-radius:var(--radius-l);background:var(--navy-900);color:var(--on-dark);overflow:hidden}
.quote::before{content:"";position:absolute;inset:auto -20% -60% 30%;height:100%;background:radial-gradient(closest-side,rgba(147,239,210,.22),transparent);pointer-events:none}
.quote blockquote{position:relative;margin:0;font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);font-weight:600;line-height:1.3;letter-spacing:-.02em}
.quote figcaption{position:relative;margin-top:22px;color:var(--on-dark-muted);font-size:.9375rem}
.quote-mark{display:block;width:40px;height:40px;margin-bottom:18px;color:var(--mint)}
.quote-band{margin:clamp(32px,4vw,48px) 0;background:var(--navy-800);box-shadow:0 0 0 1px var(--line-dark)}
.quote-band blockquote{max-width:46em}
.credentials-docs li{display:grid;grid-template-columns:132px minmax(0,1fr);gap:22px;align-items:start}
.cert-thumb{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 0 0 1px var(--line-light),0 14px 28px -16px rgba(5,14,26,.45)}
.credentials-docs span + span{margin-top:10px}
.credentials-docs li > div{min-width:0;hyphens:auto}

/* Qualitätsthemen */
.care-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.care{padding:30px 26px 32px;border-radius:var(--radius-l);background:var(--paper);box-shadow:0 0 0 1px var(--line-light);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.care:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(8,116,93,.35),0 30px 60px -34px rgba(5,14,26,.4)}
.care .pillar-icon{width:46px;height:46px;margin-bottom:22px}
.care h3{font-size:1.1875rem;margin-bottom:10px}
.care p{color:var(--ink-muted);font-size:.9375rem}
.callout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(28px,4vw,44px);padding:clamp(28px,3.5vw,44px);border-radius:var(--radius-l);background:var(--navy-900);color:var(--on-dark)}
.callout h3{font-size:1.5rem;margin-bottom:12px}
.callout p{color:var(--on-dark-muted)}
.callout :focus-visible{outline-color:var(--mint)}

/* Aufklapper / Fragen */
.faq{display:grid;gap:12px;max-width:900px}
.faq details,.disclosure{border-radius:var(--radius-m);background:var(--paper);box-shadow:0 0 0 1px var(--line-light);transition:box-shadow .25s ease}
.faq details[open],.disclosure[open]{box-shadow:0 0 0 1.5px var(--navy-900),0 24px 50px -34px rgba(5,14,26,.4)}
.faq summary,.disclosure summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;cursor:pointer;list-style:none;font-weight:650;font-size:1.0625rem}
.faq summary::-webkit-details-marker,.disclosure summary::-webkit-details-marker{display:none}
.plus{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--mist)}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease)}
.plus::after{transform:rotate(90deg)}
details[open] .plus::after{transform:rotate(0)}
details[open] .plus{background:var(--navy-900)}
details[open] .plus::before,details[open] .plus::after{background:var(--mint)}
.faq details > div,.disclosure > div{padding:0 26px 24px;color:var(--ink-muted)}
.faq details > div p + p{margin-top:.8em}
.faq details > div a{color:var(--petrol)}
.on-dark .disclosure,.callout .disclosure{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line-dark)}
.on-dark .disclosure[open],.callout .disclosure[open]{box-shadow:inset 0 0 0 1.5px var(--mint)}
.on-dark .disclosure > div,.callout .disclosure > div{color:var(--on-dark-muted)}
.on-dark .plus,.callout .plus{background:rgba(255,255,255,.1)}
.on-dark .plus::before,.on-dark .plus::after,.callout .plus::before,.callout .plus::after{background:var(--on-dark)}
.callout .disclosure{margin-top:20px}
@media (prefers-reduced-motion:no-preference){
  details[open] > div{animation:fade-up .45s var(--ease) both}
}

/* CTA-Band */
.cta-band{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(64px,8vw,104px)}
.cta-band::before{content:"";position:absolute;inset:-40% -10% auto 30%;height:180%;z-index:-1;background:radial-gradient(closest-side,rgba(147,239,210,.09),transparent),radial-gradient(closest-side at 80% 40%,rgba(127,178,255,.08),transparent);animation:aurora 16s ease-in-out infinite alternate}
.cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px}
.cta-inner h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.5rem);max-width:16em}
.cta-inner p{color:var(--on-dark-muted);margin-top:14px;max-width:34em}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* Über mich: Porträt im Einstieg */
.hero-portrait{margin:0;max-width:420px;justify-self:end;animation:fade-up 1.1s var(--ease) .2s both}
.hero-portrait img{width:100%;height:auto;aspect-ratio:568/606;object-fit:cover;border-radius:var(--radius-l);box-shadow:0 40px 100px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.12)}
.hero-portrait figcaption{margin-top:14px;color:var(--on-dark-muted);font-size:.875rem}
.hero-portrait figcaption strong{color:var(--on-dark);font-weight:650;margin-right:6px}

/* Erstgespräch: Buchungskarte im Einstieg */
.page-hero .booking-card{animation:fade-up 1.1s var(--ease) .25s both}

@media (max-width:1060px){
  .page-hero-grid,.results-grid,.callout{grid-template-columns:minmax(0,1fr)}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .care-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .timeline li:nth-child(2)::after{display:none}
  .hero-portrait{justify-self:start;max-width:340px}
  .cols-3{grid-template-columns:minmax(0,1fr)}
  .cols-3{max-width:760px}
}
@media (max-width:760px){
  .compare,.blocks{grid-template-columns:minmax(0,1fr)}
  .timeline{grid-template-columns:minmax(0,1fr)}
  .timeline li{padding:0 0 0 62px}
  .timeline li::after{display:none}
  .flowline::before,.flowline::after{left:21px}
  .flow-item{grid-template-columns:44px minmax(0,1fr);gap:16px}
  .flow-dot{width:44px;height:44px}
  .flow-dot svg{width:18px;height:18px}
  .flow-card{padding:18px}
}
@media (max-width:520px){
  .metrics,.care-grid{grid-template-columns:minmax(0,1fr)}
  .faq summary,.disclosure summary{padding:18px}
  .faq details > div,.disclosure > div{padding:0 18px 20px}
  .cta-actions .button{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .metric::after{transform:scaleX(1)}
}

/* Telefon im mobilen Menü, fünfstufiger Werdegang, Zertifikatkarten (04.10.2026) */
@media (max-width:1060px){
  .timeline-5 li:nth-child(4)::after{display:none}
}
@media (max-width:980px){
  .nav-phone{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-light);color:var(--ink);font-weight:600;text-decoration:none}
  .no-js .nav-phone{color:inherit;box-shadow:inset 0 0 0 1px var(--line-dark)}
}
@media (max-width:420px){
  .credentials-docs li{grid-template-columns:minmax(0,1fr);gap:18px}
  .cert-thumb{width:120px}
}

/* Startseite: gekürzter Einstieg, Erklärvideo, Leistungskarten, Fallbeispiel (12.10.2026) */
/* Volle Fensterhöhe (22.10.2026), damit unter dem Einstieg kein weißer Streifen zu sehen ist */
.hero-home{display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding-bottom:clamp(64px,8vw,104px)}
@supports (height:100svh){.hero-home{min-height:100svh}}
/* Inhalt optisch oberhalb der Mitte (29.10.2026): weniger Abstand oben, mehr unten */
@media (min-width:761px){.hero-home{padding-top:clamp(130px,12vw,160px);padding-bottom:clamp(96px,22vh,240px)}}
.hero-home .hero-copy{max-width:64rem}
.hero-home .hero-sub{max-width:38em}
/* Hintergrundbild im Einstieg (22.10.2026): ersetzt Leuchten und Raster, bewegt sich nur über transform.
   --shift schiebt die Linien rechts neben den Text (Linienbeginn bei etwa 37 % der Bildbreite, Bild rund 1913 px breit), der Rest läuft rechts aus dem Bild. */
.hero-home .hero-bg::before{--shift:max(calc(1205px - 50vw),13vw);inset:0;background:url("assets/hero-linien.webp") right center/cover no-repeat;transform-origin:right center;transform:translate3d(var(--shift),0,0);animation:hero-drift 28s ease-in-out infinite alternate}
.hero-home .hero-bg::after{background:linear-gradient(90deg,var(--navy-950) 0%,rgba(5,14,26,.6) 30%,rgba(5,14,26,0) 55%);-webkit-mask-image:none;mask-image:none}
.is-paused .hero-home .hero-bg::before{animation:none}
@keyframes hero-drift{
  from{transform:translate3d(var(--shift),0,0) scale(1)}
  to{transform:translate3d(calc(var(--shift) - 1.5%),0,0) scale(1.05)}
}
/* Linienmotiv gedämpft in der Case Study (22.10.2026): gespiegelt, Linien links, ohne Bewegung */
.projects{isolation:isolate}
.projects::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("assets/hero-linien.webp") right center/cover no-repeat;transform:scaleX(-1);opacity:.18;-webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 85%);mask-image:linear-gradient(90deg,transparent 35%,#000 85%)}
/* Abschluss (29.10.2026): Abschlussband und Fußzeile als eine dunkle Fläche, Linienmotiv und Leuchten wie im Live-Stand bis ganz unten */
.closing{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,var(--navy-900),var(--navy-950) 70%)}
.closing::before{content:"";position:absolute;inset:-25% -10% auto 30%;height:110%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(147,239,210,.18),transparent),radial-gradient(closest-side at 80% 40%,rgba(127,178,255,.16),transparent);animation:aurora 16s ease-in-out infinite alternate}
.closing::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("assets/hero-linien.webp") right center/cover no-repeat;transform:scaleX(-1);opacity:.18;-webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 85%);mask-image:linear-gradient(90deg,transparent 35%,#000 85%)}
.closing .cta-band,.closing .site-footer{background:transparent}
.closing .cta-band::before{display:none}
@media (max-width:760px){
  /* Handy (29.10.2026): Inhalt oben ausrichten statt mittig, sonst rutscht er auf hohen Handys weit nach unten */
  .hero-home{justify-content:flex-start;padding-top:124px}
  .hero-home .hero-bg::before{--shift:0%;background-position:62% center;opacity:.55}
  .hero-home .hero-bg::after{background:linear-gradient(180deg,rgba(5,14,26,.35),rgba(5,14,26,.75))}
}
.button-meta{padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.12);font-size:.8125rem;font-weight:600}
/* Video passt immer ganz unter den Header: Breite aus der Fensterhöhe abgeleitet, höchstens 1040 px */
.video-section .section-head{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.video-section .section-head p{max-width:36em}
.video-section .overline::before{display:none}
.video-section .section-foot{text-align:center}
.video-frame{--video-room:calc(100vh - 190px);margin:0 auto;width:min(100%,1040px,max(320px,var(--video-room) * 16 / 9));scroll-margin-top:28px}
@supports (height:100svh){.video-frame{--video-room:calc(100svh - 190px)}}
.video-frame.is-portrait{width:min(100%,540px,max(260px,var(--video-room) * 4 / 5))}
.video-stage{position:relative;border-radius:var(--radius-l);overflow:hidden;background:var(--mist);box-shadow:0 0 0 1px var(--line-light),0 50px 100px -50px rgba(5,14,26,.55)}
.video-stage video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--mist)}
.video-frame.is-portrait video{aspect-ratio:4/5}
.video-play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:clamp(18px,4vw,44px);border:0;background:transparent;cursor:pointer;font:inherit;color:#fff}
.video-play-icon{position:relative;display:grid;place-items:center;flex:none;width:clamp(56px,6vw,72px);height:clamp(56px,6vw,72px);border-radius:50%;background:var(--mint);color:var(--navy-900);box-shadow:0 14px 40px -12px rgba(5,14,26,.55);transition:transform .3s var(--ease)}
.video-play-icon svg{width:40%;height:40%;margin-left:6%}
.video-play-icon::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--mint);animation:pulse 2.4s ease-out infinite}
.video-play-text{display:flex;flex-direction:column;align-items:flex-start;margin-left:-14px;padding:10px 20px 10px 26px;border-radius:0 999px 999px 0;background:rgba(5,14,26,.86);font-weight:650;line-height:1.3}
.video-play-time{color:var(--on-dark-muted);font-size:.8125rem;font-weight:500}
.video-play:hover .video-play-icon{transform:scale(1.06)}
.video-play:focus-visible{outline:none}
.video-play:focus-visible .video-play-icon{outline:3px solid var(--petrol);outline-offset:4px}
/* Handy (Hochformat): großer Knopf mittig im Bild, leichter Schleier, damit sofort klar ist, dass es ein Video ist */
.video-frame.is-portrait .video-play{flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;background:radial-gradient(circle at 50% 50%,rgba(5,14,26,.34),rgba(5,14,26,.14) 75%)}
.video-frame.is-portrait .video-play-icon{width:96px;height:96px;box-shadow:0 0 0 10px rgba(147,239,210,.22),0 20px 50px -14px rgba(5,14,26,.7)}
.video-frame.is-portrait .video-play-icon::after{inset:-12px;border-width:3px}
.video-frame.is-portrait .video-play-text{flex-direction:row;align-items:baseline;gap:8px;margin-left:0;padding:11px 20px;border-radius:999px;font-size:1.0625rem}
.video-frame.is-portrait .video-play-time::before{content:"· "}
.video-frame figcaption{margin-top:16px;color:var(--ink-muted);font-size:.875rem;text-align:center}
/* 4:5 auf dem Handy: randlos über die volle Breite, Untertitel als Zeile unter dem Video statt im Bild (W07, 12.10.2026) */
.video-captions{min-height:2.7em;margin:12px auto 0;max-width:36em;color:var(--ink);font-size:1.0625rem;font-weight:550;line-height:1.35;text-align:center;text-wrap:balance}
@media (max-width:640px){
  .video-frame.is-portrait{--video-w:min(100vw,max(260px,var(--video-room) * 4 / 5));width:var(--video-w);margin-inline:calc((100% - var(--video-w)) / 2)}
  .video-frame.is-portrait .video-stage{border-radius:0}
  /* Bündig (29.10.2026): Video setzt ohne weißen Streifen direkt an den Hero an; Sprung über „Video ansehen“ endet direkt unter dem Menü */
  .video-section:has(.video-frame.is-portrait){padding-top:0}
  .video-frame.is-portrait{scroll-margin-top:68px}
  .video-frame.is-portrait .video-captions{padding-inline:var(--gutter)}
}
.service-cards .pillar{display:flex;flex-direction:column}
.on-mist .service-cards .pillar{background:var(--paper);box-shadow:0 0 0 1px var(--line-light)}
.service-cards .link-arrow{margin-top:auto;padding-top:24px;align-self:flex-start}
.case-highlight{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:clamp(16px,2vw,24px);align-items:stretch}
.case-highlight .metric{display:flex;flex-direction:column;justify-content:center}
.case-highlight .metric-value{font-size:clamp(3.5rem,2rem + 5vw,6rem)}
.case-highlight .quote-band{margin:0;display:flex;flex-direction:column;justify-content:center}
@media (max-width:1060px){
  .case-highlight{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .hero-home{padding-bottom:56px}
}

/* Vorgehen: Scrollytelling der sechs Schritte (12.10.2026) */
.story-section{background:radial-gradient(55% 35% at 90% 8%,rgba(147,239,210,.24),transparent 70%),radial-gradient(45% 30% at 4% 55%,rgba(127,178,255,.16),transparent 70%),var(--mist)}
/* Bühne links, Text rechts; Spalten wie im Abschnittskopf, damit die Texte unter dem Einleitungsabsatz stehen */
.story{--pin-h:max(480px,min(600px,calc(100vh - 200px)));display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.story-chapters{grid-column:2;grid-row:1}
.chapter{min-height:44vh;display:flex;flex-direction:column;justify-content:center;padding-block:40px;transition:opacity .5s ease}
/* Schritt 1: Text auf Höhe der Kartenüberschrift; bleibt nach dem Andocken rund ein Viertel der Fensterhöhe aktiv,
   ohne unter den Kopf zu wandern (ruhiger Einstieg ohne Scrollsperre) */
.chapter:first-child{min-height:calc(10vh + var(--pin-h) / 2 - 38px);justify-content:flex-start;padding-top:calc(var(--pin-h) * .2)}
/* Letztes Kapitel hoch genug, damit die Bühne noch steht, wenn es die Lesemarke erreicht */
.chapter:last-child{min-height:max(540px,60vh)}
.js .chapter{opacity:.28}
.js .chapter.is-current{opacity:1}
.chapter-number{margin-bottom:14px;color:var(--petrol);font-weight:700;font-size:.9375rem;font-variant-numeric:tabular-nums}
.chapter h3{font-size:clamp(1.625rem,1.1rem + 1.5vw,2.375rem);line-height:1.12;letter-spacing:-.02em;margin-bottom:16px}
.chapter p{max-width:30em;color:var(--ink-muted);font-size:1.125rem}
.chapter .link-arrow{margin-top:22px;align-self:flex-start}
/* Bühne angedockt mittig im Bereich unter dem Kopf (Kopf ca. 76 px); darüber blendet der Abschnittstitel ein */
.story-stage{grid-column:1;grid-row:1;position:sticky;top:max(96px,calc(38px + (100vh - var(--pin-h)) / 2));display:flex;height:var(--pin-h)}
.story-stage::before{content:attr(data-label);position:absolute;left:0;bottom:calc(100% + 14px);display:flex;align-items:center;gap:10px;color:var(--petrol);font-size:.9375rem;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.story-stage.is-pinned::before{opacity:1;transform:none}
/* Einmaliger Halt bei Schritt 1: auf Touchgeräten Schwung des Wischens stoppen (Bildlaufleisten dort überlagert, kein Versatz) */
@media (pointer:coarse){html.is-scroll-held,html.is-scroll-held body{overflow:hidden}}
.no-js .story-stage{display:none}
.no-js .story{grid-template-columns:minmax(0,1fr)}
.no-js .story-chapters{grid-column:1}
.no-js .chapter{min-height:0}
.story-board{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px;padding:clamp(20px,2.2vw,30px);border-radius:28px;background:var(--paper);box-shadow:0 0 0 1px rgba(11,26,42,.08),0 2px 4px rgba(11,26,42,.04),0 28px 56px -28px rgba(11,26,42,.25),0 70px 120px -70px rgba(8,116,93,.35)}

/* Weg: 1–3 als Linie, 4–6 als Kreislauf */
.rail{display:flex;align-items:center;padding-bottom:22px}
.node{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--mist);color:var(--ink-muted);font-weight:700;font-size:.875rem;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--line-light);transition:background-color .4s ease,color .4s ease,box-shadow .4s ease,transform .4s var(--ease)}
.node.is-done{background:var(--petrol);color:#fff;box-shadow:none}
.node.is-current{background:var(--navy-900);color:var(--mint);box-shadow:0 0 0 6px rgba(147,239,210,.4);transform:scale(1.08)}
.story-stage[data-step="6"] .node{box-shadow:0 0 0 4px rgba(147,239,210,.45)}
.seg{position:relative;flex:1;min-width:8px;height:2px;background:var(--line-light);overflow:hidden}
.seg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--petrol),var(--mint));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.seg.is-on::after{transform:scaleX(1)}
.rail-cycle{position:relative;flex:1.35;display:flex;align-items:center;padding:5px;border:1.5px dashed var(--line-light);border-radius:999px;transition:border-color .4s ease,background-color .4s ease}
.story-stage[data-phase="cycle"] .rail-cycle{border-color:rgba(8,116,93,.45);background:rgba(147,239,210,.14)}
.cycle-return{position:absolute;left:23px;right:23px;top:100%;height:16px;margin-top:3px;border:1.5px dashed var(--line-light);border-top:0;border-radius:0 0 16px 16px;transition:border-color .4s ease}
.cycle-return::before{content:"";position:absolute;left:-6.5px;top:-8px;border-inline:5px solid transparent;border-bottom:7px solid var(--line-light);transition:border-color .4s ease}
.cycle-return::after{content:"";position:absolute;bottom:-4.5px;left:100%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--petrol);opacity:0}
.story-stage[data-phase="cycle"] .cycle-return{border-color:rgba(8,116,93,.45)}
.story-stage[data-phase="cycle"] .cycle-return::before{border-bottom-color:var(--petrol)}

/* Szenenkopf und Bühne */
.scene-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.scene-count{color:var(--petrol);font-size:.8125rem;font-weight:650}
.scene-title{color:var(--ink);font-size:1.25rem;font-weight:650;letter-spacing:-.01em}
.scene-area{position:relative;flex:1;min-height:0;container-type:size;border-radius:18px;background:linear-gradient(180deg,#f7fbfa,#edf4f2);box-shadow:inset 0 0 0 1px rgba(11,26,42,.06);overflow:hidden}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:20px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .4s ease,transform .5s var(--ease),visibility 0s linear .5s}
.scene.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .12s,transform .7s var(--ease) .12s,visibility 0s}
.si{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .4s ease,transform .5s var(--ease)}
.scene.is-active .si{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 150ms + 250ms)}
.tile{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(11,26,42,.08),0 10px 20px -14px rgba(11,26,42,.35);color:var(--ink);font-size:.875rem;font-weight:600;white-space:nowrap}
.tile svg{width:18px;height:18px;flex:none;color:var(--petrol)}
.notes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.note{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:.8125rem;font-weight:600}
.note svg{width:15px;height:15px;flex:none}
.note-warn{background:rgba(11,26,42,.07);color:var(--ink-muted)}
.note-goal{background:rgba(147,239,210,.45);color:#05543f}
.note-plain{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(11,26,42,.08)}
.note-plain svg{color:var(--petrol)}
.flow-arrow{position:relative;flex:none;width:18px;height:2px;background:rgba(11,26,42,.18)}
.flow-arrow::after{content:"";position:absolute;right:-1px;top:-3px;border-block:4px solid transparent;border-left:5px solid rgba(11,26,42,.3)}

/* 1: Prozess verstehen */
.flow{display:flex;align-items:center;gap:8px;margin-top:34px}
.tile-jam{box-shadow:0 0 0 1.5px rgba(8,116,93,.55),0 10px 20px -14px rgba(11,26,42,.35)}
.jam{position:absolute;bottom:100%;left:50%;display:flex;flex-direction:column-reverse;gap:3px;margin-bottom:6px;transform:translateX(-50%)}
.jam span{display:block;width:36px;height:7px;border-radius:3px;background:#fff;box-shadow:0 0 0 1px rgba(11,26,42,.16);opacity:0;transform:translateY(-14px);transition:opacity .3s ease,transform .45s var(--ease)}
.scene.is-active .jam span{opacity:1;transform:none;transition-delay:calc(var(--j) * 220ms + 1000ms)}
/* 2: Systeme prüfen */
.sys-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:470px}
.sys{justify-content:flex-start}
.ok{position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--petrol);transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.ok svg{width:11px;height:11px;color:#fff}
.scene.is-active .ok{transform:scale(1);transition-delay:calc(var(--i) * 150ms + 1100ms)}
/* 3: Optionen abwägen */
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:500px}
.opt{position:relative;display:flex;flex-direction:column;gap:5px;padding:16px 14px 14px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(11,26,42,.08),0 10px 20px -14px rgba(11,26,42,.35)}
.opt strong{margin-bottom:6px;font-size:.875rem;line-height:1.25}
.bar-label{color:var(--ink-muted);font-size:.6875rem;font-weight:600}
.bar{height:6px;margin-bottom:4px;border-radius:3px;background:rgba(11,26,42,.08);overflow:hidden}
.bar span{display:block;width:var(--w);height:100%;background:linear-gradient(90deg,var(--petrol),var(--mint));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.bar-cost span{background:linear-gradient(90deg,#8a9aa8,#b9c5cf)}
.scene.is-active .bar span{transform:scaleX(1);transition-delay:calc(var(--i) * 150ms + 650ms)}
.scene.is-active .opt-pick{box-shadow:0 0 0 2px var(--petrol),0 22px 34px -20px rgba(8,116,93,.7);transform:translateY(-6px);transition:opacity .4s ease,transform .5s var(--ease) 1.7s,box-shadow .5s ease 1.7s}
.pick{position:absolute;top:-11px;left:50%;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:var(--petrol);color:#fff;font-size:.6875rem;font-weight:700;white-space:nowrap;transform:translateX(-50%) scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.pick svg{width:11px;height:11px}
.scene.is-active .pick{transform:translateX(-50%) scale(1);transition-delay:1.9s}
.scene-opts{padding-top:30px;padding-bottom:12px;gap:14px}
/* 4: Pilot umsetzen */
.win{width:100%;max-width:420px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(11,26,42,.08),0 18px 34px -22px rgba(11,26,42,.4);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line-light);color:var(--ink-muted);font-size:.75rem;font-weight:600}
.win-bar i{width:8px;height:8px;border-radius:50%;background:var(--line-light)}
.win-bar span{margin-left:6px}
.win-row{display:flex;align-items:center;gap:12px;padding:12px 14px}
.win-row + .win-row{border-top:1px solid #eef3f2}
.sk{position:relative;flex:1;height:8px;border-radius:4px;background:#e4ecea;overflow:hidden}
.sk-short{flex:.55}
.sk-mid{flex:.8}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--petrol),var(--mint));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.scene.is-active .sk::after{transform:scaleX(1);transition-delay:calc(var(--i) * 260ms + 450ms)}
.done{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--petrol);transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.done svg{width:11px;height:11px;color:#fff}
.scene.is-active .done{transform:scale(1);transition-delay:calc(var(--i) * 260ms + 1000ms)}
/* 5: Im Alltag testen */
.team{display:flex;align-items:flex-end;justify-content:center;gap:18px}
.member{display:flex;flex-direction:column;align-items:center;gap:12px}
.bubble{position:relative;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:14px 14px 14px 4px;background:#fff;box-shadow:0 0 0 1px rgba(11,26,42,.08),0 10px 20px -14px rgba(11,26,42,.35);color:var(--ink);font-size:.8125rem;font-weight:600;white-space:nowrap}
.bubble svg{width:14px;height:14px;color:var(--petrol)}
.avatar{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:rgba(127,178,255,.28);color:#22508f}
.avatar svg{width:24px;height:24px}
.avatar-b{background:rgba(147,239,210,.5);color:#05543f}
.avatar-c{background:rgba(11,26,42,.08);color:var(--ink)}
/* 6: Verbessern */
.versions{display:flex;align-items:center;gap:8px}
.ver{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(11,26,42,.08);color:var(--ink-muted);font-size:.875rem;font-weight:650;white-space:nowrap}
.ver svg{width:15px;height:15px}
.ver-now{background:var(--navy-900);color:var(--mint);box-shadow:0 12px 24px -14px rgba(8,22,39,.7)}
.goal-badge{position:relative;display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;background:var(--navy-900);color:#fff;font-weight:650;font-size:.9375rem}
.goal-check{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mint)}
.goal-check svg{width:15px;height:15px;color:var(--navy-900)}
.goal-check::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--mint);opacity:0}
/* 7: Leitplanke */
.done-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:460px}
.done-grid .tile{justify-content:flex-start}
.guard{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:16px;background:var(--mist);color:var(--ink-muted);font-size:.875rem;transition:background-color .6s ease,color .6s ease,transform .7s var(--ease),box-shadow .6s ease}
.guard-shield{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--petrol);transition:background-color .6s ease,color .6s ease}
.guard-shield svg{width:18px;height:18px}
.guard-short{display:none}
.guard-list{display:flex;flex-wrap:wrap;gap:4px 22px}
.guard strong{color:var(--ink);font-weight:650;transition:color .6s ease}
.guard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 35%,rgba(147,239,210,.22) 50%,transparent 65%);transform:translateX(-100%);opacity:0}
.story-stage[data-step="6"] .guard{background:var(--navy-900);color:var(--on-dark-muted);transform:translateY(-6px);box-shadow:0 24px 40px -24px rgba(8,22,39,.65)}
.story-stage[data-step="6"] .guard strong{color:var(--mint)}
.story-stage[data-step="6"] .guard-shield{background:rgba(147,239,210,.16);color:var(--mint)}
@media (prefers-reduced-motion:no-preference){
  .story-stage[data-step="5"] .cycle-return::after{opacity:1;animation:return-run 2.4s var(--ease) infinite}
  .story-stage[data-step="5"] .ver-now svg{animation:spin 3s linear infinite}
  .scene.is-active .goal-check::after{animation:goal-ring 1.6s ease-out 1.6s 2}
  .story-stage[data-step="6"] .guard::after{opacity:1;animation:guard-sweep 5s var(--ease) .4s infinite}
}
@keyframes return-run{0%{left:100%}70%,100%{left:0}}
@keyframes goal-ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.2)}}
@keyframes guard-sweep{0%,25%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .story *,.story *::before,.story *::after{transition-duration:.01ms!important;transition-delay:0s!important}
}
@container (min-width:560px) and (min-height:330px){
  .scene{gap:28px}
  .tile{gap:10px;padding:13px 18px;border-radius:14px;font-size:1rem}
  .tile svg{width:20px;height:20px}
  .note{padding:9px 16px;font-size:.9375rem}
  .note svg{width:17px;height:17px}
  .flow{gap:10px;margin-top:44px}
  .flow-arrow{width:24px}
  .jam span{width:44px;height:8px}
  .sys-grid{max-width:600px;gap:16px}
  .opts{max-width:620px;gap:16px}
  .opt{padding:22px 18px 18px}
  .opt strong{font-size:1rem}
  .bar-label{font-size:.75rem}
  .bar{height:8px}
  .pick{font-size:.75rem;padding:4px 12px}
  .win{max-width:520px}
  .win-bar{font-size:.8125rem;padding:12px 16px}
  .win-row{padding:16px}
  .sk{height:10px}
  .done{width:24px;height:24px}
  .team{gap:28px}
  .bubble{padding:10px 15px;font-size:.9375rem}
  .avatar{width:60px;height:60px}
  .avatar svg{width:28px;height:28px}
  .ver{padding:10px 18px;font-size:1rem}
  .goal-badge{padding:12px 22px 12px 12px;font-size:1.0625rem}
  .goal-check{width:32px;height:32px}
  .done-grid{max-width:600px;gap:14px}
}
@container (max-width:460px){
  .scene{gap:14px;padding:14px}
  .tile{gap:6px;padding:7px 9px;border-radius:10px;font-size:.75rem}
  .tile svg{width:14px;height:14px}
  .flow{gap:5px;margin-top:28px}
  .flow-arrow{width:9px}
  .flow-arrow::after{display:none}
  .jam span{width:28px;height:6px}
  .sys-grid,.done-grid,.opts{gap:8px}
  .opt{padding:12px 9px 10px}
  .opt strong{font-size:.75rem}
  .note{padding:5px 11px;font-size:.75rem}
  .bubble{padding:6px 9px;font-size:.6875rem}
  .avatar{width:40px;height:40px}
  .team{gap:8px}
  .ver{padding:6px 10px;font-size:.75rem}
  .goal-badge{padding:7px 14px 7px 7px;font-size:.8125rem}
  .goal-check{width:24px;height:24px}
  .win-row{padding:9px 12px}
}
@container (max-width:460px){
  .scene-opts .notes{display:none}
  .opt{gap:3px}
  .opt strong{margin-bottom:3px}
}
@container (max-width:380px){
  .flow-first,.ver-first{display:none}
  .bubble{max-width:96px;white-space:normal;text-align:center;line-height:1.25}
}
@container (max-height:210px){
  .scene{gap:10px;padding:10px 12px}
  .notes{display:none}
  .flow{margin-top:24px}
  .jam{gap:2px;margin-bottom:4px}
  .jam span{height:5px}
  .win-bar{padding:6px 12px}
  .win-row{padding:7px 12px}
  .member{gap:6px}
  .avatar{width:34px;height:34px}
  .avatar svg{width:18px;height:18px}
  .opt{padding:10px 8px 8px}
  .scene-opts{padding-block:20px 8px}
}
@media (max-width:1060px){
  .story{grid-template-columns:minmax(0,1fr);gap:0}
  .story-stage{grid-column:1;grid-row:1;z-index:2;top:76px;height:auto;min-height:0;margin-inline:calc(-1 * var(--gutter));padding:10px var(--gutter) 16px;background:linear-gradient(var(--mist) 88%,rgba(241,245,244,0))}
  .story-chapters{grid-column:1;grid-row:2}
  .story-board{gap:12px;padding:14px;border-radius:20px}
  .scene-area{flex:none;height:clamp(150px,22vh,220px)}
  .chapter{min-height:42vh;justify-content:flex-start;padding-block:32px}
  .chapter:first-child{min-height:42vh;padding-top:32px}
  /* Tastaturfokus nicht unter der angehefteten Bühne (Höhe setzt script.js) */
  .chapter a{scroll-margin-top:calc(var(--stage-h,360px) + 8px)}
  .chapter:last-child{min-height:calc(100vh - 360px)}
  .chapter h3{font-size:1.5rem}
  .chapter p{font-size:1.0625rem}
  .rail{padding-bottom:18px}
  .node{width:30px;height:30px;font-size:.8125rem}
  .cycle-return{left:19px;right:19px;height:12px}
  .scene-count{display:none}
  .scene-title{overflow:hidden;font-size:1.0625rem;white-space:nowrap;text-overflow:ellipsis}
  .scene-head{flex-wrap:nowrap;min-width:0}
  .guard{gap:10px;padding:8px 12px;font-size:.8125rem}
  .guard-list{display:none}
  .guard-short{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .guard-shield{width:28px;height:28px}
  .guard-shield svg{width:15px;height:15px}
}
@media (max-width:980px){
  .story-stage{top:68px}
}

/* Leistungen: Scrollytelling „Vorher → Nachher“ je Schwerpunkt (12.10.2026, Runde 2)
   Jede Bühne bleibt nur kurz stehen (20 % der Fensterhöhe); kurz vor dem Andocken setzt script.js .is-after, die Verwandlung
   läuft als durchkomponierte Animation ab, beim Zurückscrollen rückwärts. Ohne JavaScript gilt der
   Nachher-Zustand: Regeln dafür stehen unter .shift:is(.is-after,.no-js *). */
.shifts{background:var(--mist)}
.shifts-head{padding-top:clamp(84px,11vw,144px)}
.shifts-head .section-head{margin-bottom:clamp(24px,3vw,48px)}
.shift{--hdr:76px;--cx:72%;--cy:52%;--spring:cubic-bezier(.34,1.32,.64,1);--glide:cubic-bezier(.65,0,.35,1);position:relative}
.js .shift{height:120vh}
.shift-pin{position:sticky;top:var(--hdr);display:flex;height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));overflow:hidden;background:radial-gradient(rgba(11,26,42,.075) 1px,transparent 1.3px) 0 0/22px 22px,var(--mist)}
/* Das Nachher breitet sich von der Grafik aus über die Bühne aus */
.shift-pin::before{content:"";position:absolute;left:var(--cx);top:var(--cy);width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;border-radius:50%;background:radial-gradient(circle,rgba(8,116,93,.36),transparent 24%),var(--navy-950);transform:scale(0);will-change:transform;transition:transform .6s var(--glide) .3s}
.shift:is(.is-after,.no-js *) .shift-pin::before{transform:scale(1);transition:transform 1s var(--glide) .05s}
.shift-inner{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;padding-block:clamp(20px,4vh,48px)}

.shift-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.shift-copy h2{font-size:clamp(2.25rem,1.3rem + 2.7vw,4.25rem);line-height:1.02;letter-spacing:-.035em;color:var(--ink);transition:color .35s ease .25s}
.shift-states{display:grid}
.state{grid-area:1/1;max-width:30em;margin:0;font-size:clamp(1.0625rem,1rem + .35vw,1.3125rem);line-height:1.55}
.state-before{color:var(--ink-muted);transition:opacity .45s ease .45s,transform .6s var(--ease) .45s}
.state-after{color:var(--on-dark);opacity:0;transform:translateY(12px);transition:opacity .2s ease,transform .3s ease}
.js .state-tag{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shift-copy .link-arrow{transition:color .35s ease .25s}
.shift:is(.is-after,.no-js *) .shift-copy h2{color:var(--on-dark);transition-delay:.55s}
.shift.is-after .state-before{opacity:0;transform:translateY(-12px);transition:opacity .2s ease,transform .3s ease}
.shift.is-after .state-after{opacity:1;transform:none;transition:opacity .5s ease .65s,transform .7s var(--ease) .65s}
.shift:is(.is-after,.no-js *) .shift-copy .link-arrow{color:var(--mint);transition-delay:.55s}

/* Umschalter Vorher / Nachher (nur mit JavaScript) */
.shift-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:rgba(11,26,42,.06);box-shadow:inset 0 0 0 1px rgba(11,26,42,.08);transition:background-color .35s ease .25s,box-shadow .35s ease .25s}
.shift-switch[hidden]{display:none}
.shift-switch::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--paper);box-shadow:0 1px 2px rgba(11,26,42,.12),0 4px 10px -4px rgba(11,26,42,.25);transition:transform .55s var(--spring),background-color .35s ease}
.shift-switch button{position:relative;z-index:1;min-width:92px;padding:8px 16px;border:0;border-radius:999px;background:none;color:var(--ink-muted);font:inherit;font-size:.875rem;font-weight:650;cursor:pointer;transition:color .3s ease}
.shift-switch button[aria-pressed="true"]{color:var(--ink)}
.shift-switch button:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.shift.is-after .shift-switch{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition-delay:.55s}
.shift.is-after .shift-switch::before{transform:translateX(100%);background:var(--mint)}
.shift.is-after .shift-switch button{color:var(--on-dark-muted)}
.shift.is-after .shift-switch button[aria-pressed="true"]{color:var(--navy-950)}
.shift.is-after .shift-switch button:focus-visible{outline-color:var(--mint)}

/* Bühne: Vorher-Gegenstände (.obj) fliegen ins Programmfenster (.app) */
.shift-canvas{position:relative;height:min(100%,620px);container-type:size}
/* Lage in Prozent der Bühne statt Container-Einheiten im transform: Safari (iOS) ließ die
   Gegenstände sonst in der Ecke stehen, wenn die Bühne ihre Größe erst nach dem Laden bekam.
   --grow vergrößert die Gegenstände auf schmalen Bühnen; clamp hält sie innerhalb der Bühne. */
.obj{--ww:min(calc(var(--w) * var(--grow,1)), 92);position:absolute;left:clamp(calc(var(--ww) * .5%),calc(var(--x) * 1%),calc(100% - var(--ww) * .5%));top:calc(var(--y) * 1%);width:calc(var(--ww) * 1%);font-size:clamp(9px,1.5cqw,13px);transform:translate(-50%,-50%) rotate(calc(var(--r,0) * 1deg));transition:left .8s var(--spring) calc(.3s + var(--i,0) * 55ms),top .8s var(--spring) calc(.3s + var(--i,0) * 55ms),transform .8s var(--spring) calc(.3s + var(--i,0) * 55ms),opacity .3s ease calc(.3s + var(--i,0) * 55ms)}
.shift:is(.is-after,.no-js *) .obj{opacity:0;left:calc(var(--x1,50) * 1%);top:calc(var(--y1,50) * 1%);transform:translate(-50%,-50%) scale(var(--s1,.2));transition:left .55s cubic-bezier(.6,0,.35,1) calc(var(--i,0) * 45ms),top .55s cubic-bezier(.6,0,.35,1) calc(var(--i,0) * 45ms),transform .55s cubic-bezier(.6,0,.35,1) calc(var(--i,0) * 45ms),opacity .2s ease calc(.38s + var(--i,0) * 45ms)}
.o{position:relative;overflow:hidden;border-radius:10px;background:#fff;color:var(--ink);line-height:1.3;box-shadow:0 0 0 1px rgba(11,26,42,.07),0 1px 2px rgba(11,26,42,.06),0 12px 24px -12px rgba(11,26,42,.25),0 34px 60px -34px rgba(11,26,42,.35)}
.o-dots{display:inline-flex;gap:.32em}
.o-dots i{width:.55em;height:.55em;border-radius:50%;background:rgba(11,26,42,.14)}
/* Browserfenster */
.o-tabs{display:flex;align-items:flex-end;gap:.3em;padding:.55em .7em 0;background:#eef2f1}
.o-tabs .o-dots{align-self:center;margin-right:.4em}
.o-tab{padding:.4em .8em;border-radius:.5em .5em 0 0;color:var(--ink-muted);font-size:.9em;font-weight:600;white-space:nowrap}
.o-tab.is-on{background:#fff;color:var(--ink)}
.o-url{display:flex;align-items:center;gap:.5em;margin:.6em .8em .2em;padding:.45em .8em;border-radius:99px;background:#f1f4f3;color:var(--ink-muted);font-size:.9em;white-space:nowrap}
.o-url svg{flex:none;width:1.1em;height:1.1em}
.o-body{display:flex;flex-direction:column;gap:.7em;padding:.7em 1em .9em}
.o-hit{display:flex;flex-direction:column;gap:.35em}
.o-hit b,.o-hit i{display:block;height:.5em;border-radius:99px}
.o-hit b{width:58%;background:#7fa6e6}
.o-hit i{width:88%;background:#e3e9e8}
.o-hit:nth-child(2) b{width:44%}
.o-hit:nth-child(3) b{width:66%}
.o-foot{margin-top:.2em;color:var(--ink-muted);font-size:.85em;font-weight:600}
/* Tabelle */
.o-file{display:flex;align-items:center;gap:.55em;padding:.55em .8em;background:#1f6f4a;color:#fff;font-size:.9em;font-weight:600;white-space:nowrap}
.o-xl{display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:.3em;background:#fff;color:#1f6f4a;font-weight:800;font-size:.85em}
.o-grid{display:grid;grid-template-columns:1.6em 1.4fr 1fr 1fr;font-size:.82em}
.o-grid span{min-width:0;overflow:hidden;padding:.35em .45em;border-right:1px solid #e3e9e8;border-bottom:1px solid #e3e9e8;color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.o-grid .h{background:#f3f6f5;color:var(--ink-muted);font-weight:600;text-align:center}
.o-grid .warn{background:#fdecea;color:#a3352a;font-weight:600}
.o-grid .q{color:#9aa6b0}
/* Seite, Notiz, Suchfeld */
.o-doc{display:flex;flex-direction:column;gap:.5em;padding:1em 1em 1.3em}
.o-doc small{color:var(--petrol);font-size:.8em;font-weight:700}
.o-doc b,.o-doc i{display:block;height:.5em;border-radius:99px;background:#e3e9e8}
.o-doc b{width:80%;height:.75em;background:#c9d3d1}
.o-doc i.short{width:60%}
.o-note{padding:1em 1em 1.1em;border-radius:3px;background:linear-gradient(170deg,#fff7c7,#fbefaa);color:#5c4a12;font-style:italic;font-weight:600;font-size:1.05em;box-shadow:0 1px 1px rgba(92,74,18,.15),0 14px 22px -14px rgba(92,74,18,.5)}
.o-search{display:flex;align-items:center;gap:.6em;padding:.8em 1.1em;border-radius:99px;font-size:1.05em;white-space:nowrap}
.o-search svg{flex:none;width:1.2em;height:1.2em;color:var(--ink-muted)}
.o-search span{overflow:hidden;text-overflow:ellipsis}
.caret{flex:none;width:1.5px;height:1.2em;background:var(--ink)}
/* Mail, Anruf, Datei */
.o-mail{padding:.8em 1em 1em}
.o-mail-head{display:flex;align-items:center;gap:.6em;margin-bottom:.7em}
.o-avatar{flex:none;display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:#dbe7ff;color:#22508f;font-weight:700;font-size:.9em}
.o-mail-head div{min-width:0}
.o-mail-head strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.o-mail-head small{color:var(--ink-muted);font-size:.85em}
.o-mail i{display:block;height:.5em;margin-top:.45em;border-radius:99px;background:#e3e9e8}
.o-mail i:last-child{width:70%}
.o-toast{display:flex;align-items:center;gap:.7em;padding:.75em 1em;border-radius:14px}
.o-toast-icon{flex:none;display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:#fdecea;color:#c0392b}
.o-toast-icon svg{width:1.2em;height:1.2em}
.o-toast strong{display:block}
.o-toast small{color:var(--ink-muted);font-size:.85em}
.o-chipfile{display:flex;align-items:center;gap:.6em;padding:.65em .9em;border-radius:10px;white-space:nowrap}
.o-chipfile .o-xl{background:#1f6f4a;color:#fff}
.o-chipfile span:last-child{overflow:hidden;text-overflow:ellipsis;font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .js .shift .o{animation:obj-float 5s ease-in-out calc(var(--i,0) * -1.3s) infinite alternate}
  .js .shift.is-after .o{animation-play-state:paused}
  .js .shift:not(.is-after) .caret{animation:caret-blink 1s steps(1) infinite}
}
@keyframes obj-float{from{transform:translateY(-3px) rotate(-.5deg)}to{transform:translateY(4px) rotate(.6deg)}}
@keyframes caret-blink{50%{opacity:0}}

/* Programmfenster im Nachher */
.app{position:absolute;left:50%;top:50%;width:min(calc(var(--aw,90) * 1cqw),600px);max-height:98cqh;overflow:hidden;color:var(--on-dark);font-size:clamp(9.5px,1.7cqw,14px);line-height:1.3;border-radius:16px;background:linear-gradient(180deg,#183455,#0f2239);box-shadow:0 0 0 1px rgba(147,239,210,.16),inset 0 1px 0 rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.75),0 0 120px -30px rgba(147,239,210,.3);opacity:0;transform:translate(-50%,-50%) translateY(24px) scale(.86);transition:opacity .25s ease,transform .35s ease}
.shift:is(.is-after,.no-js *) .app{opacity:1;transform:translate(-50%,-50%);transition:opacity .45s ease .4s,transform .9s var(--spring) .4s}
.k{opacity:0;transform:translateY(10px);transition:opacity .15s ease,transform .15s ease}
.shift:is(.is-after,.no-js *) .k{opacity:1;transform:none;transition:opacity .45s ease calc(var(--t0,.8s) + var(--k,0) * 90ms),transform .65s var(--spring) calc(var(--t0,.8s) + var(--k,0) * 90ms)}
.app-bar{display:flex;align-items:center;gap:.9em;padding:.85em 1.1em;border-bottom:1px solid rgba(255,255,255,.08);color:var(--on-dark-muted);font-weight:600}
.app-bar .o-dots i{background:rgba(255,255,255,.18)}
.app-chips{display:flex;flex-wrap:wrap;gap:.5em;padding:1em 1.1em .5em;--t0:.6s}
.chip{display:inline-flex;align-items:center;gap:.4em;padding:.38em .85em;border-radius:99px;background:rgba(147,239,210,.12);color:var(--mint);font-size:.92em;font-weight:650}
.chip svg{width:1em;height:1em}
.app-head{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:1em 1.1em .4em;--t0:.6s}
.app-head strong{font-size:1.15em}
.app-list{margin:0;padding:.3em .6em .4em;list-style:none}
.app-row{display:flex;align-items:center;gap:.8em;padding:.6em .5em;--t0:.75s}
.app-row + .app-row{border-top:1px solid rgba(255,255,255,.06)}
.logo{flex:none;width:2.2em;height:2.2em;border-radius:.6em;background:linear-gradient(135deg,hsl(var(--h) 38% 62%),hsl(calc(var(--h) + 35) 36% 40%));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.row-text{flex:1;display:flex;flex-direction:column;min-width:0}
.row-text strong{overflow:hidden;font-weight:650;white-space:nowrap;text-overflow:ellipsis}
.row-text small{color:var(--on-dark-muted);font-size:.86em}
.pill{flex:none;padding:.32em .75em;border-radius:99px;font-size:.86em;font-weight:650;white-space:nowrap}
.pill-ok{background:rgba(147,239,210,.17);color:var(--mint)}
.pill-dup{background:rgba(255,255,255,.08);color:var(--on-dark-muted)}
.pill-check{background:rgba(127,178,255,.18);color:#b9d3ff}
.pill.k{--t0:1s;transform:scale(.4)}
.app-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6em 1em;padding:.85em 1.1em 1em;border-top:1px solid rgba(255,255,255,.08);--t0:1.25s}
.app-note{display:inline-flex;align-items:center;gap:.45em;color:var(--on-dark-muted);font-size:.92em}
.app-note svg{width:1.1em;height:1.1em;color:var(--mint)}
.app-btn{display:inline-flex;align-items:center;gap:.5em;padding:.6em 1.15em;border-radius:99px;background:var(--mint);color:var(--navy-950);font-weight:700;white-space:nowrap}
.app-btn svg{width:1em;height:1em}
@media (prefers-reduced-motion:no-preference){
  .js .shift.is-after .app-btn{animation:cta-glow 2.6s ease-in-out 2.2s infinite}
}
@keyframes cta-glow{0%,100%{box-shadow:0 0 0 0 rgba(147,239,210,0)}50%{box-shadow:0 0 0 7px rgba(147,239,210,.2),0 10px 30px -8px rgba(147,239,210,.6)}}
@media (prefers-reduced-motion:reduce){
  .shift *,.shift *::before,.shift *::after{transition-duration:.01ms!important;transition-delay:0s!important}
}

.shifts-outro{padding-block:clamp(56px,7vw,96px);background:var(--navy-950);color:var(--on-dark)}
.shifts-outro-inner{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 40px}
.shifts-outro p{max-width:34em;margin:0;color:var(--on-dark);font-size:clamp(1.25rem,1rem + .9vw,1.75rem);line-height:1.35;letter-spacing:-.015em}
.shifts-outro .link-arrow{color:var(--mint)}

/* Ohne JavaScript: keine angeheftete Bühne, Nachher-Grafik, beide Texte untereinander */
.no-js .shift-pin{position:relative;height:auto}
.no-js .shift-inner{padding-block:clamp(56px,7vw,96px)}
.no-js .shift-canvas{height:min(56vw,520px)}
.no-js .state{grid-area:auto;opacity:1;transform:none}
.no-js .state + .state{margin-top:14px}
.no-js .state-before{color:var(--on-dark-muted)}

@media (max-width:1060px){
  .shift{--cx:50%;--cy:68%}
  .js .shift{height:120vh}
  .shift-inner{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:14px;padding-block:18px 22px}
  .shift-copy{gap:12px}
  .shift-copy h2{font-size:clamp(1.625rem,1.1rem + 2.4vw,2.75rem)}
  .state{font-size:1rem;line-height:1.5}
  .shift-switch button{min-width:80px;padding:6px 12px;font-size:.8125rem}
  .shift-canvas{height:auto;min-height:0}
  .no-js .shift-canvas{height:min(80vw,440px)}
  /* Lesbarkeit: Gegenstände und Programmfenster größer als auf dem Desktop */
  .shift .obj{--grow:1.1;font-size:clamp(11.5px,1.6cqw,13px)}
  .app{font-size:clamp(12px,1.8cqw,14px)}
}
@media (max-width:640px){
  .shift .obj{--grow:1.4;font-size:12.5px}
  /* Auf niedrigen Bühnen (kleine Handys) nur so weit kleiner, dass das Fenster ganz hineinpasst */
  .app{font-size:clamp(10px,3cqh,12.5px)}
  .app-hub{width:min(60cqw,280px)}
}
@media (max-width:980px){
  .shift{--hdr:68px}
}

/* Leistungen, CRM: Aufgaben, Verlauf, Team */
.app-foot-team{justify-content:flex-start}
.task-dot{flex:none;width:.7em;height:.7em;margin-inline:.3em;border-radius:50%;background:rgba(238,244,243,.28)}
.task-dot.is-now{background:var(--mint);box-shadow:0 0 0 .3em rgba(147,239,210,.18)}
.app-trail{display:flex;flex-direction:column;gap:.5em;margin:.2em 1.1em .9em;padding:.8em 1em;border-radius:12px;background:rgba(255,255,255,.04);--t0:1.15s}
.trail-item{display:flex;align-items:center;gap:.55em;color:var(--on-dark-muted)}
.trail-item svg{flex:none;width:1.05em;height:1.05em;color:var(--mint)}
.avatars{display:inline-flex}
.avatars i{width:1.9em;height:1.9em;border-radius:50%;background:linear-gradient(135deg,hsl(var(--h) 38% 62%),hsl(calc(var(--h) + 35) 36% 40%));box-shadow:0 0 0 2px #10243c}
.avatars i + i{margin-left:-.5em}
@media (prefers-reduced-motion:no-preference){
  .js .shift.is-after .task-dot.is-now{animation:dot-pulse 2s ease-out 1.6s infinite}
}
@keyframes dot-pulse{0%{box-shadow:0 0 0 0 rgba(147,239,210,.45)}100%{box-shadow:0 0 0 .8em rgba(147,239,210,0)}}

/* Leistungen, Tools: Fenster werden zu verbundenen Bausteinen um eine Mitte */
.obj-keep{display:grid}
.obj-keep > *{grid-area:1/1}
.shift:is(.is-after,.no-js *) .obj-keep{opacity:1;transition:left .9s var(--spring) calc(.2s + var(--i,0) * 70ms),top .9s var(--spring) calc(.2s + var(--i,0) * 70ms),transform .9s var(--spring) calc(.2s + var(--i,0) * 70ms)}
.o-win{padding-bottom:.8em}
.o-win-bar{display:flex;align-items:center;gap:.5em;padding:.6em .8em;margin-bottom:.6em;background:#eef2f1;font-weight:650;white-space:nowrap}
.o-win-bar svg{flex:none;width:1.2em;height:1.2em;color:var(--petrol)}
.o-badge{margin-left:auto;padding:.1em .5em;border-radius:99px;background:#c0392b;color:#fff;font-size:.8em;font-weight:700}
.o-win i{display:block;height:.5em;margin:.45em .9em 0;border-radius:99px;background:#e3e9e8}
.o-win i + i{width:55%}
.o-tile{display:flex;align-self:center;align-items:center;justify-content:center;gap:.55em;padding:.95em 1em;border-radius:16px;background:linear-gradient(180deg,#1b3a5e,#11263f);color:var(--on-dark);font-size:1.5em;font-weight:650;box-shadow:0 0 0 1px rgba(147,239,210,.3),0 18px 34px -18px rgba(0,0,0,.7);opacity:0;transition:opacity .2s ease}
.o-tile svg{flex:none;width:1.25em;height:1.25em;color:var(--mint)}
.o-win{transition:opacity .3s ease calc(.25s + var(--i,0) * 50ms)}
.shift:is(.is-after,.no-js *) .o-tile{opacity:1;transition:opacity .35s ease calc(.45s + var(--i,0) * 70ms)}
.shift:is(.is-after,.no-js *) .o-win{opacity:0;transition:opacity .25s ease calc(.25s + var(--i,0) * 70ms)}
.o-note-s{padding:.6em .8em;font-size:1em;text-align:center}
.ties,.spokes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ties path{fill:none;stroke:rgba(11,26,42,.3);stroke-width:1.5;stroke-dasharray:5 6;vector-effect:non-scaling-stroke}
.ties{transition:opacity .4s ease .6s}
.shift:is(.is-after,.no-js *) .ties{opacity:0;transition:opacity .2s ease}
/* Strichlängen in Bildschirmpixeln (non-scaling-stroke); 420 px ist länger als jede Speiche */
.spoke{fill:none;stroke:rgba(147,239,210,.45);stroke-width:1.5;stroke-dasharray:420;stroke-dashoffset:420;vector-effect:non-scaling-stroke;transition:stroke-dashoffset .2s ease}
.shift:is(.is-after,.no-js *) .spoke{stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--glide) calc(.8s + var(--k,0) * 70ms)}
.spoke-flow{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round;stroke-dasharray:.1 17.9;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .2s ease}
.shift:is(.is-after,.no-js *) .spoke-flow{opacity:.9;transition:opacity .5s ease 1.5s}
.app-hub{width:min(40cqw,280px);border-radius:20px;text-align:left}
.hub-body{display:flex;align-items:center;gap:.8em;padding:1.1em 1.2em;line-height:1.3}
.hub-body strong{display:block;color:var(--mint);font-size:1.25em}
.hub-mark{flex:none;display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;background:rgba(147,239,210,.14);color:var(--mint)}
.hub-mark svg{width:1.4em;height:1.4em}
.hub-foot{display:flex;align-items:center;gap:.55em;padding:.7em 1.2em .9em;border-top:1px solid rgba(255,255,255,.08);color:var(--on-dark-muted);font-size:.9em;--t0:1.4s}
.hub-live{width:.55em;height:.55em;border-radius:50%;background:var(--mint)}
@media (prefers-reduced-motion:no-preference){
  .js .shift.is-after .spoke-flow{animation:spoke-flow 1.8s linear infinite}
  .js .shift.is-after .hub-mark,.js .shift.is-after .hub-live{animation:dot-pulse 2.2s ease-out 1.8s infinite}
}
@keyframes spoke-flow{to{stroke-dashoffset:-18}}
@container (max-height:300px){
  .app-trail,.app-list .app-row:nth-child(n+4){display:none}
}

/* Werte der Grafiken als Klassen statt style-Attribut: Die CSP (style-src 'self') blockt live jedes
   style="…" im HTML. Positionen (at-*), Verzögerungen und Farbtöne (v-*) für Leistungen und Vorgehen. */
.at-crm-1{--x:33;--y:32;--r:-3;--w:54;--i:0}
.at-crm-2{--x:77;--y:22;--r:5;--w:40;--i:1}
.at-crm-3{--x:73;--y:66;--r:-4;--w:38;--i:2}
.at-crm-4{--x:21;--y:74;--r:6;--w:25;--i:3}
.at-crm-5{--x:50;--y:91;--r:2;--w:44;--i:4}
.at-recherche-1{--x:31;--y:30;--r:-4;--w:54;--i:0}
.at-recherche-2{--x:71;--y:60;--r:3;--w:46;--i:1}
.at-recherche-3{--x:85;--y:19;--r:7;--w:22;--i:2}
.at-recherche-4{--x:19;--y:74;--r:-7;--w:26;--i:3}
.at-recherche-5{--x:56;--y:91;--r:-2;--w:44;--i:4}
.at-tools-1{--x:21;--y:20;--r:-5;--w:30;--i:0;--x1:20;--y1:22;--s1:.72}
.at-tools-2{--x:79;--y:17;--r:4;--w:30;--i:1;--x1:80;--y1:22;--s1:.72}
.at-tools-3{--x:83;--y:66;--r:-3;--w:28;--i:2;--x1:84;--y1:70;--s1:.75}
.at-tools-4{--x:50;--y:90;--r:3;--w:28;--i:3;--x1:50;--y1:90;--s1:.75}
.at-tools-5{--x:17;--y:66;--r:6;--w:28;--i:4;--x1:16;--y1:70;--s1:.75}
.at-tools-6{--x:50;--y:31;--r:-3;--w:20;--i:5}
.at-tools-7{--x:57;--y:61;--r:5;--w:22;--i:6}
.at-tools-8{--x:33;--y:46;--r:-6;--w:21;--i:7}
.v-aw40{--aw:40}
.v-aw86{--aw:86}
.v-aw88{--aw:88}
.v-h120{--h:120}
.v-h165{--h:165}
.v-h210{--h:210}
.v-h260{--h:260}
.v-h30{--h:30}
.v-i0{--i:0}
.v-i1{--i:1}
.v-i2{--i:2}
.v-i3{--i:3}
.v-i4{--i:4}
.v-i5{--i:5}
.v-i6{--i:6}
.v-i7{--i:7}
.v-i8{--i:8}
.v-i9{--i:9}
.v-j0{--j:0}
.v-j1{--j:1}
.v-j2{--j:2}
.v-j3{--j:3}
.v-k0{--k:0}
.v-k1{--k:1}
.v-k2{--k:2}
.v-k3{--k:3}
.v-k4{--k:4}
.v-w25{--w:25%}
.v-w40{--w:40%}
.v-w55{--w:55%}
.v-w80{--w:80%}
.v-w85{--w:85%}
.v-w90{--w:90%}

/* Angebote mit Preisen (19.10.2026, Inhalt aus docs/ANGEBOTE.md: nur Name, ein Satz Nutzen, Preis) */
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.offer{position:relative;display:flex;flex-direction:column;padding:clamp(26px,2.6vw,34px);border-radius:var(--radius-l);background:var(--paper);box-shadow:0 0 0 1px var(--line-light);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.offer:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line-light),0 30px 60px -34px rgba(5,14,26,.4)}
.offer-start{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 56px;align-items:center;background:var(--navy-900);color:var(--on-dark);box-shadow:0 40px 80px -40px rgba(5,14,26,.55)}
.offer-start:hover{box-shadow:0 40px 80px -36px rgba(5,14,26,.65)}
.offer-care{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-block:24px;background:var(--mist);box-shadow:none}
.offer-tag{align-self:flex-start;width:fit-content;margin-bottom:16px;padding:4px 12px;border-radius:999px;background:rgba(8,116,93,.1);color:var(--petrol);font-size:.8125rem;font-weight:650}
.offer-start .offer-tag{background:rgba(147,239,210,.14);color:var(--mint)}
.offer h3{font-size:clamp(1.375rem,1.15rem + .7vw,1.75rem);margin-bottom:10px}
.offer p{color:var(--ink-muted)}
.offer-start p{color:var(--on-dark-muted)}
.offer-care h3{margin-bottom:4px}
.offer .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:auto;padding-top:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.price strong{font-size:clamp(1.625rem,1.35rem + .9vw,2.125rem);font-weight:750;letter-spacing:-.03em;line-height:1.1}
.price span{color:var(--ink-muted);font-size:.9375rem}
.offer-care .price{margin:0;padding:0}
.price-start{display:grid;gap:10px;justify-self:end}
.price-start p{display:flex;align-items:baseline;gap:12px;color:var(--on-dark)}
.price-start strong{font-size:clamp(2.25rem,1.6rem + 2vw,3.25rem);color:#fff}
.price-start span{color:var(--on-dark-muted);font-size:1rem}
.offers-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:24px;color:var(--ink-muted);font-size:.875rem}
@media (max-width:1060px){
  .offers{grid-template-columns:minmax(0,1fr);max-width:720px}
  .offer-start{grid-template-columns:minmax(0,1fr)}
  .price-start{justify-self:start}
}
.offer-start .price{margin:0;padding:0}

/* Anfrageformular (19.10.2026, Runde 2): helle Fläche als einziges helles Element im dunklen Einstieg,
   damit sofort klar ist, dass hier etwas ausgefüllt wird. Ohne JavaScript stehen alle Schritte untereinander;
   mit JavaScript (.is-stepped) jeweils ein Schritt mit Fortschrittsleiste. Versand über anfrage.php. */
.page-hero-grid:has(.inquiry-card){grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
/* „Worum geht es?“ nur bei „Etwas anderes“ (ohne JavaScript immer sichtbar) */
.page-hero-grid:has(.inquiry-card) h1{font-size:clamp(2.25rem,1.2rem + 3vw,3.75rem)}
.is-stepped .field-other{display:none}
.is-stepped .field-other.is-open{display:grid}
.inquiry-card{padding:0;background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 50px 110px -40px rgba(0,0,0,.85)}
.inquiry-card::before{display:none}
.inquiry-card .booking-card-inner{padding:clamp(24px,3vw,38px);border-radius:var(--radius-l);background:var(--paper)}
.inquiry-card :focus-visible{outline-color:var(--petrol)}
.inquiry-head{margin-bottom:22px}
.inquiry-card .inquiry-head h2{margin:0 0 6px;font-size:clamp(1.625rem,1.3rem + 1vw,2.125rem);color:var(--ink)}
.inquiry-intro{color:var(--ink-muted);font-size:.9375rem}
.inquiry-progress{display:flex;flex-direction:column;gap:8px;margin-top:20px;color:var(--ink-muted);font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
.inquiry-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
/* Fortschritt: Füllung gleitet von links nach rechts (Abschnitt halb = aktueller Schritt) */
.inquiry-steps li{position:relative;height:5px;border-radius:3px;background:var(--line-light);overflow:hidden}
.inquiry-steps li::after{content:"";position:absolute;inset:0;background:var(--petrol);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.inquiry-steps li.is-current::after{transform:scaleX(.5)}
.inquiry-steps li.is-done::after{transform:scaleX(1)}
.inquiry-error{margin-bottom:18px;padding:14px 16px;border-radius:12px;background:#fdecea;color:#7d2a22;font-size:.9375rem}
.inquiry-error a{color:inherit;font-weight:600}
.step{margin:0;padding:0;border:0;min-width:0}
.step + .step{margin-top:28px;padding-top:24px;border-top:1px solid var(--line-light)}
.step legend{float:left;width:100%;margin-bottom:14px;padding:0;color:var(--ink);font-size:1.1875rem;font-weight:650;letter-spacing:-.015em;outline-offset:6px}
.step legend + *{clear:both}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.choices-3{grid-template-columns:minmax(0,1fr)}
.choice{position:relative;display:flex;cursor:pointer}
.choice input,.pill-choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:12px 14px;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line-light);color:var(--ink);font-weight:600;line-height:1.3;transition:box-shadow .2s ease,background-color .2s ease}
/* Auswahlkreis: zeigt, dass man klicken kann, und wird bei Auswahl zum Haken */
.choice span::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #a9b8bd;background:var(--paper);transition:background-color .2s ease,box-shadow .2s ease}
/* Haken aus Rahmenlinien (keine Bild-URL, CSP img-src 'self') */
.choice span::after{content:"";position:absolute;left:21px;top:50%;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-62%) rotate(45deg);opacity:0;transition:opacity .15s ease}
.choice:hover span{background:var(--mist);box-shadow:inset 0 0 0 1.5px #b9c9c6}
.choice input:checked + span{background:rgba(8,116,93,.06);box-shadow:inset 0 0 0 2px var(--petrol)}
.choice input:checked + span::before{background:var(--petrol);box-shadow:none;animation:choice-pop .32s var(--ease)}
.choice input:checked + span::after{opacity:1;animation:check-in .3s .06s var(--ease) both}
@keyframes choice-pop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:none}}
@keyframes check-in{from{opacity:0;transform:translateY(-62%) rotate(45deg) scale(.3)}to{opacity:1;transform:translateY(-62%) rotate(45deg)}}
.choice input:focus-visible + span,.pill-choice input:focus-visible + span{outline:2px solid var(--petrol);outline-offset:3px}
.field{display:grid;gap:6px;margin-top:16px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.fields .field{margin-top:0;margin-bottom:12px}
.field span,.field-label{color:var(--ink);font-size:.875rem;font-weight:600}
.field small,.field-label small{color:var(--ink-muted);font-weight:500}
.field input,.field textarea{width:100%;min-height:48px;padding:12px 14px;border:0;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line-light);color:var(--ink);font:inherit;font-size:1rem}
.field textarea{min-height:88px;resize:vertical}
.field input:hover,.field textarea:hover{box-shadow:inset 0 0 0 1.5px #b9c9c6}
.field input:focus,.field textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--petrol)}
.field input:user-invalid{box-shadow:inset 0 0 0 2px #c0392b}
.field-group{margin-top:4px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pill-choice{position:relative;cursor:pointer}
.pill-choice span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line-light);color:var(--ink);font-size:.9375rem;font-weight:600;transition:box-shadow .2s ease,background-color .2s ease}
.pill-choice:hover span{background:var(--mist)}
.pill-choice input:checked + span{background:rgba(8,116,93,.08);box-shadow:inset 0 0 0 2px var(--petrol)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.inquiry-privacy{margin-top:16px;color:var(--ink-muted);font-size:.8125rem;line-height:1.5}
.inquiry-privacy a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
.inquiry-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.inquiry-nav .button{flex:1 1 auto;width:auto}
.inquiry-nav .button[data-next],.inquiry-nav .button[data-submit]{flex-grow:3;background:var(--navy-900);color:#fff;box-shadow:none}
.inquiry-nav .button[data-next]:hover,.inquiry-nav .button[data-submit]:hover{background:var(--navy-700)}
.inquiry-nav .button-ghost{border:0;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-light)}
.inquiry-nav .button-ghost:hover{background:var(--mist);box-shadow:inset 0 0 0 1.5px #b9c9c6}
.inquiry-card .booking-footer{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-light);color:var(--ink-muted);font-weight:550}
.inquiry-card .booking-footer span{display:inline-flex;align-items:center;gap:7px}
.inquiry-card .booking-footer svg{width:15px;height:15px;color:var(--petrol)}
/* Schrittweise mit JavaScript */
.is-stepped .step{display:none}
/* Wechsel: alter Schritt gleitet kurz hinaus, neuer herein (rückwärts gespiegelt). Die Klickschritte sind gleich hoch
   (--step-h aus script.js), damit nur Deckkraft und Verschiebung animiert werden, keine Höhe. */
.is-stepped .step:not(:last-of-type){min-height:var(--step-h,0)}
.inquiry{position:relative}
.inquiry.is-measuring .step{display:block;position:absolute;left:0;right:0;min-height:0;visibility:hidden;animation:none}
.inquiry.is-measuring .field-other{display:none}
.is-stepped .step.is-current{display:block;animation:step-in .42s var(--ease) both}
.is-stepped .step.is-current.from-left{animation-name:step-in-back}
.is-stepped .step.is-leaving{animation:step-out .17s ease-in both}
.is-stepped .step.is-leaving.to-right{animation-name:step-out-back}
.is-stepped .step + .step{margin-top:0;padding-top:0;border-top:0}
.is-stepped .field-other.is-open{animation:field-in .3s var(--ease) both}
@keyframes step-in{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes step-in-back{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes step-out{to{opacity:0;transform:translateX(-18px)}}
@keyframes step-out-back{to{opacity:0;transform:translateX(18px)}}
@keyframes field-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Handy: Formular direkt unter Überschrift und Einleitung, Mail und Telefon darunter */
@media (max-width:1060px){
  .page-hero-grid:has(.inquiry-card){grid-template-columns:minmax(0,1fr);row-gap:28px}
  .page-hero-grid:has(.inquiry-card) .hero-copy{display:contents}
  .page-hero-grid:has(.inquiry-card) .contact{order:3}
  .page-hero-grid:has(.inquiry-card) .inquiry-card{order:2;max-width:640px}
}
@media (max-width:520px){
  .choices,.fields{grid-template-columns:minmax(0,1fr)}
  .choice span{min-height:54px}
  .inquiry-card .booking-card-inner{padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){
  .is-stepped .step.is-current,.is-stepped .field-other.is-open,.choice input:checked + span::before,.choice input:checked + span::after{animation:none}
  .inquiry-steps li::after{transition:none}
}

/* ---------- Einstieg als kleiner Film (29.10.2026) ----------
   Ein Lichtschnitt enthüllt beide Zeilen leicht versetzt von links nach rechts, über „Mehr Unternehmen.“ läuft danach ein Lichtstreifen in Mint,
   die Linien im Hintergrund leuchten mit auf. Beim ersten Aufruf im Besuch voll (.intro-licht), danach als Kurzfassung (.intro-kurz); bei reduzierter Bewegung gar nicht (.intro-skip).
   .intro-wait hält den Einstieg verdeckt, bis Schrift und Hintergrundbild geladen sind (höchstens 1,5 s), damit der Film nicht unsichtbar abläuft.
   intro-hold verdeckt die Überschrift kurz, bis script.js die Art gesetzt hat; ohne Skript ist sie nach 0,6 s sichtbar. */
.hero-home h1{animation:intro-hold .6s}
@keyframes intro-hold{from,to{opacity:0}}
.intro-skip .hero-home h1,.intro-licht .hero-home h1{animation:none}
.intro-wait .hero-home h1,.intro-wait .hero-home .hero-sub,.intro-wait .hero-home .hero-actions,.intro-wait .hero-home .hero-badge{animation:none;opacity:0}
.intro-wait .hero-home .hero-bg{opacity:.25}
.intro-licht .hero-home h1 .line > span{-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:intro-wipe 1.7s cubic-bezier(.45,0,.2,1) .1s both,intro-settle 2.1s var(--ease) .1s both}
.intro-licht .hero-home h1 .line:nth-child(2) > span{background:linear-gradient(92deg,#fff 5%,var(--mint) 27.5%,var(--sky) 50%,#fff 58%,var(--mint) 66%,#fff 74%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;animation:intro-wipe 1.7s cubic-bezier(.45,0,.2,1) .55s both,intro-settle 2.1s var(--ease) .55s both,intro-sweep 1.6s ease-in-out 1s both}
@keyframes intro-wipe{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes intro-settle{from{opacity:.4;transform:translate3d(-.12em,0,0)}to{opacity:1;transform:none}}
@keyframes intro-sweep{from{background-position:100% 0}to{background-position:0 0}}
.intro-licht .hero-home .hero-bg{animation:intro-glow 2.7s ease-out both}
@keyframes intro-glow{0%{opacity:.25}40%{opacity:.3}100%{opacity:1}}
.intro-licht .hero-home .hero-sub,.intro-licht .hero-home .hero-actions,.intro-licht .hero-home .hero-badge{animation-duration:1.1s}
.intro-licht .hero-home .hero-sub{animation-delay:1.6s}
.intro-licht .hero-home .hero-actions{animation-delay:1.8s}
.intro-licht .hero-home .hero-badge{animation-delay:2s}
/* Wiederholter Aufruf im selben Besuch (.intro-kurz): dieselbe Bewegung, etwa halb so lang */
.intro-kurz .hero-home h1 .line > span{animation-duration:.95s,1.2s;animation-delay:.05s,.05s}
.intro-kurz .hero-home h1 .line:nth-child(2) > span{animation-duration:.95s,1.2s,1s;animation-delay:.3s,.3s,.5s}
.intro-kurz .hero-home .hero-bg{animation-duration:1.4s}
.intro-kurz .hero-home .hero-sub,.intro-kurz .hero-home .hero-actions,.intro-kurz .hero-home .hero-badge{animation-duration:.8s}
.intro-kurz .hero-home .hero-sub{animation-delay:.75s}
.intro-kurz .hero-home .hero-actions{animation-delay:.85s}
.intro-kurz .hero-home .hero-badge{animation-delay:.95s}
/* Nach dem Film oder beim Anhalten: Endzustand, kein erneutes Abspielen */
.intro-done .hero-home h1,.intro-done .hero-home h1 *,.intro-done .hero-home .hero-bg,.intro-done .hero-home .hero-sub,.intro-done .hero-home .hero-actions,.intro-done .hero-home .hero-badge,
.is-paused .hero-home h1,.is-paused .hero-home h1 *,.is-paused .hero-home .hero-bg{animation:none!important}
.is-paused .hero-home h1 .line > span{-webkit-mask-image:none;mask-image:none}