/* ════════════════════════════════════════════════════════════
   Velero · Quartiers-Marken / Die Brand Engine — interaktives Deck
   Engine-Architektur nach healo.vipe.solutions · Design: Velero (TPA)
   ════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Freight Big Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/FreightBigProBook.otf") format("opentype");
}
@font-face{
  font-family:"TSTAR MINIGRAM";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/TSTARMINIGRAM-Regular.otf") format("opentype");
}
@font-face{
  font-family:"TSTAR MINIGRAM";font-style:normal;font-weight:800;font-display:swap;
  src:url("assets/fonts/TSTARMINIGRAM-Black.otf") format("opentype");
}

:root{
  /* Velero blues */
  --navy-1:#0a1730;   --navy-2:#11244a;   --navy-3:#16336b;
  --blue-deep:#123a78; --velero:#0a6cd0;  --velero-br:#2f8fe6;
  --sky:#7bb2ec;       --sky-soft:#a9cef4; --royal:#1d3b72;
  --paper:#eef3fb;     --paper-2:#dde8f6;  --paper-3:#cdddf1;
  --ink:#11244a;       --ink-2:#33486e;    --ink-3:#6177a0;
  --line:#c2d4ec;
  --glow:#bcdcff;

  --font-serif:"Freight Big Pro","Times New Roman",serif;
  --font-sans:"TSTAR MINIGRAM","Helvetica Neue",system-ui,sans-serif;
  --font-mono:"TSTAR MINIGRAM","SF Mono",monospace;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.64,0,.78,0);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);

  --pad-x:clamp(26px,6vw,120px);
  --pad-y:clamp(96px,11vh,118px);

  --shadow-card:0 1px 2px rgba(8,20,45,.06),0 16px 40px rgba(8,20,45,.13);
  --shadow-pop:0 2px 6px rgba(8,20,45,.10),0 26px 64px rgba(8,20,45,.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-sans);
  font-size:clamp(15px,1.12vw,19px);line-height:1.55;
  color:var(--ink);background:var(--navy-1);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow:hidden;transition:background-color .7s ease;
}
body[data-theme="dark"]{background:var(--navy-1)}
body[data-theme="blue"]{background:var(--blue-deep)}
body[data-theme="light"]{background:var(--paper)}
body.cursor-idle,body.cursor-idle *{cursor:none!important}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--velero);color:#fff}
:where(button,a,[tabindex]):focus-visible{outline:2px solid color-mix(in oklab,currentColor 70%,transparent);outline-offset:3px;border-radius:6px}

/* ───────────────── chrome ───────────────── */
.chrome{position:fixed;inset:0;z-index:60;pointer-events:none;color:var(--ink);transition:opacity .4s ease}
body[data-theme="dark"] .chrome,body[data-theme="blue"] .chrome{color:#eaf2ff}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

.progress{position:absolute;top:0;left:0;right:0;height:3px;background:color-mix(in oklab,currentColor 14%,transparent)}
.progress span{display:block;height:100%;width:0;background:var(--velero-br);transition:width .6s var(--ease-out)}
body[data-theme="light"] .progress span{background:var(--velero)}

.brand{position:absolute;top:clamp(16px,3vh,30px);left:var(--pad-x);pointer-events:auto;color:inherit;display:block;transition:opacity .3s ease,transform .15s ease}
.brand svg{height:clamp(60px,6vw,84px);width:auto;fill:currentColor;display:block}
.brand:hover{opacity:.7}.brand:active{transform:scale(.97)}

.credit{position:absolute;bottom:clamp(15px,2.7vh,26px);left:var(--pad-x);display:flex;align-items:center;gap:11px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.72;transition:opacity .5s ease}
.credit .pl-tpa{width:28px;height:28px;fill:currentColor}
body.chrome-min .credit{opacity:0}
body.ui-idle .hud,body.ui-idle .credit,body.ui-idle .keys-hint{opacity:0;pointer-events:none}
.hud,.keys-hint{transition:opacity .5s ease}

.hud{position:absolute;bottom:calc(clamp(13px,2.5vh,24px) + env(safe-area-inset-bottom,0px));right:var(--pad-x);display:flex;align-items:center;gap:2px;pointer-events:auto;padding:4px;border-radius:999px;background:color-mix(in oklab,currentColor 8%,transparent);backdrop-filter:blur(12px)}
.hud button{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;opacity:.75;transition:opacity .2s,background-color .2s,transform .15s ease}
.hud button:hover{opacity:1;background:color-mix(in oklab,currentColor 12%,transparent)}
.hud button:active{transform:scale(.95)}
.hud button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hud-sep{width:1px;height:18px;margin:0 6px;background:currentColor;opacity:.2}
.counter{font-family:var(--font-mono);font-size:11.5px;font-variant-numeric:tabular-nums;letter-spacing:.08em;opacity:.82;min-width:66px;text-align:center}

.keys-hint{position:absolute;bottom:clamp(20px,3.2vh,32px);left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;opacity:0;transition:opacity .8s ease;white-space:nowrap;text-transform:uppercase}
.keys-hint.show{opacity:.5}
.keys-hint kbd{font:inherit;display:inline-block;padding:1px 5px;margin:0 1px;border:1px solid color-mix(in oklab,currentColor 35%,transparent);border-radius:5px}

/* ───────────────── agenda overlay (Raster der Schritte) ───────────────── */
.agenda{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:color-mix(in oklab,var(--navy-1) 90%,transparent);backdrop-filter:blur(22px);opacity:0;transition:opacity .35s ease;color:#eaf2ff}
.agenda[hidden]{display:none}
.agenda:not(.open){pointer-events:none}
.agenda.open{opacity:1}
.agenda-inner{width:min(940px,90vw);max-height:86vh;overflow-y:auto;padding:10px}
.agenda .kicker{color:var(--sky);margin-bottom:24px}
.agenda-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;counter-reset:ag}
.agenda-grid li{counter-increment:ag}
.agenda-grid button{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;width:100%;height:104px;text-align:left;padding:16px;border-radius:16px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);font-size:clamp(14px,1.2vw,17px);font-weight:500;opacity:.82;transition:opacity .2s,background-color .25s,transform .25s var(--ease-out)}
.agenda-grid button::before{content:counter(ag,decimal-leading-zero);position:absolute;top:14px;left:16px;font-family:var(--font-mono);font-size:12px;color:var(--sky);opacity:.85}
.agenda-grid button:hover{opacity:1;background:rgba(123,178,236,.16);transform:translateY(-3px)}
.agenda-grid li.current button{opacity:1;background:rgba(123,178,236,.22);box-shadow:inset 0 0 0 1px var(--sky)}

/* ───────────────── deck & slides ───────────────── */
.deck{position:fixed;inset:0}
.slide{position:absolute;inset:0;visibility:hidden;opacity:0;transform:translateX(calc(var(--dir,1)*5vw));transition:opacity .6s ease,transform .78s var(--ease-out),visibility 0s linear .82s}
.slide.is-active{visibility:visible;opacity:1;transform:none;z-index:2;transition:opacity .55s ease .12s,transform .82s var(--ease-out) .12s}
.slide.is-leaving{visibility:visible;z-index:1;opacity:0;transform:translateX(calc(var(--dir,1)*-4vw)) scale(.992)}
.wrap{position:relative;z-index:3;width:min(1640px,100%);height:100%;margin-inline:auto;padding:var(--pad-y) var(--pad-x);display:flex;flex-direction:column;justify-content:center}

/* themes */
.slide[data-theme="dark"]{background:linear-gradient(160deg,#16294f 0%,#0c1a36 55%,#0a1730 100%);color:#eaf2ff}
.slide[data-theme="blue"]{background:linear-gradient(157deg,#1a47a0 0%,#0f5fc4 52%,#0a4ba0 100%);color:#f1f7ff}
.slide[data-theme="light"]{background:linear-gradient(160deg,#f4f8fd 0%,#e3edfa 55%,#cfe0f5 100%);color:var(--ink)}

/* seagull motif (the flight line) */
.seam{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.seam svg{position:absolute;width:auto}
.seam .gull{fill:none;stroke:currentColor;stroke-width:.7;opacity:.16;stroke-linecap:round}
.slide[data-theme="light"] .seam .gull{opacity:.12}
.watermark{position:absolute;left:-2%;bottom:-12%;width:62%;opacity:.06;fill:currentColor;z-index:1;pointer-events:none}

/* ───────────────── typography ───────────────── */
.kicker{display:flex;align-items:center;gap:11px;font-family:var(--font-mono);font-size:clamp(10px,.78vw,13px);letter-spacing:.24em;text-transform:uppercase;margin-bottom:clamp(16px,3vh,32px);color:color-mix(in oklab,currentColor 72%,transparent)}
.kicker::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:2px;background:var(--velero-br);transform:rotate(45deg)}
.display{font-family:var(--font-serif);font-size:clamp(46px,8.4vw,138px);font-weight:400;line-height:1.0;letter-spacing:-.01em;text-wrap:balance}
.display-s{font-family:var(--font-serif);font-size:clamp(38px,6vw,98px);font-weight:400;line-height:1.04;letter-spacing:-.005em;text-wrap:balance;margin-bottom:clamp(14px,2.6vh,28px)}
.headline{font-family:var(--font-serif);font-size:clamp(30px,4.4vw,72px);font-weight:400;line-height:1.05;letter-spacing:-.005em;text-wrap:balance;margin-bottom:clamp(16px,3vh,32px);max-width:24ch}
.headline.center{max-width:none;text-align:center}
.lede{font-size:clamp(17px,1.7vw,29px);font-weight:400;color:color-mix(in oklab,currentColor 78%,transparent);letter-spacing:.005em;line-height:1.4}
.body-l{font-size:clamp(15px,1.3vw,21px);color:color-mix(in oklab,currentColor 80%,transparent);text-wrap:pretty}
.body-m{font-size:clamp(13.5px,1.05vw,17px);color:color-mix(in oklab,currentColor 76%,transparent);text-wrap:pretty}
.measure{max-width:56ch}
.accent{color:var(--velero-br)}
.slide[data-theme="light"] .accent{color:var(--velero)}
.display .line,.display-s .line,.split-lines .line{display:block}

/* ───────────────── enter animations ───────────────── */
[data-a]{opacity:0;translate:0 26px;filter:blur(6px);transition:opacity .76s var(--ease-out),translate .76s var(--ease-out),filter .76s var(--ease-out);transition-delay:var(--d,0s)}
.slide.is-active [data-a].in{opacity:1;translate:0 0;filter:blur(0)}
.split-lines .line{opacity:0;translate:0 30px;filter:blur(6px);transition:opacity .76s var(--ease-out),translate .76s var(--ease-out),filter .76s var(--ease-out)}
.slide.is-active .split-lines .line{opacity:1;translate:0 0;filter:blur(0)}
.slide.is-active .split-lines .line:nth-child(1){transition-delay:.14s}
.slide.is-active .split-lines .line:nth-child(2){transition-delay:.24s}
.slide.is-active .split-lines .line:nth-child(3){transition-delay:.34s}
.split-chars .w{display:inline-block;white-space:nowrap}
.split-chars .c{display:inline-block;opacity:0;translate:0 16px;filter:blur(12px);transition:opacity .9s var(--ease-out),translate .9s var(--ease-out),filter .9s var(--ease-out)}
.slide.is-active .split-chars .c{opacity:1;translate:0 0;filter:blur(0)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01s!important;animation:none!important}}

/* ───────────────── components ───────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,26px)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,60px)}
@media(max-width:820px){.grid3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}

.os-card{position:relative;padding:clamp(20px,2.4vh,32px) clamp(18px,1.7vw,28px);border-radius:20px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 18px 44px rgba(6,16,40,.28)}
.slide[data-theme="light"] .os-card{background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-card)}
.os-card .c-num{font-family:var(--font-mono);font-size:clamp(15px,1.3vw,20px);font-weight:800;color:var(--sky);letter-spacing:.04em}
.slide[data-theme="light"] .os-card .c-num{color:var(--velero)}
.os-card h3{font-family:var(--font-sans);font-weight:800;font-size:clamp(14px,1.12vw,18px);letter-spacing:.04em;text-transform:uppercase;margin:12px 0 11px;line-height:1.2}
.os-card p{font-size:clamp(13px,1.02vw,16.5px);line-height:1.5;color:color-mix(in oklab,currentColor 80%,transparent);text-wrap:pretty}
.os-card .c-tag{display:inline-block;margin-top:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.os-card .ic{display:block;width:clamp(38px,3.4vw,50px);height:clamp(38px,3.4vw,50px);margin-bottom:14px;background:var(--velero);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:left center;mask-position:left center}
.slide[data-theme="blue"] .os-card .ic,.slide[data-theme="dark"] .os-card .ic{background:var(--sky)}
.ic1{-webkit-mask-image:url(assets/icons/ic9.png);mask-image:url(assets/icons/ic9.png)}
.ic2{-webkit-mask-image:url(assets/icons/ic10.png);mask-image:url(assets/icons/ic10.png)}
.ic3{-webkit-mask-image:url(assets/icons/ic11.png);mask-image:url(assets/icons/ic11.png)}

.ticks{list-style:none;max-width:46ch}
.ticks li{position:relative;padding-left:34px;font-size:clamp(16px,1.4vw,24px);line-height:1.35;color:color-mix(in oklab,currentColor 88%,transparent)}
.ticks li+li{margin-top:clamp(14px,2.4vh,26px)}
.ticks li::before{content:"";position:absolute;left:0;top:.18em;width:19px;height:19px;border-radius:6px;background:var(--velero-br);-webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.5 8.5 6 12l7.5-8" stroke="black" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/12px no-repeat;mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.5 8.5 6 12l7.5-8" stroke="black" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/12px no-repeat}
.ticks.warn li::before{background:#e8a23a;-webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 4v5M8 11.5v.5" stroke="black" stroke-width="2" fill="none" stroke-linecap="round"/></svg>') center/13px no-repeat;mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 4v5M8 11.5v.5" stroke="black" stroke-width="2" fill="none" stroke-linecap="round"/></svg>') center/13px no-repeat}

/* ── 01 title hero ── */
.s-title .wrap{align-items:flex-start;justify-content:center}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.s-title .title-head{position:relative;z-index:3}
.s-title .meta{position:absolute;left:var(--pad-x);bottom:clamp(78px,12vh,120px);z-index:3;font-family:var(--font-mono);font-size:clamp(11px,.9vw,14px);letter-spacing:.18em;text-transform:uppercase;opacity:.78}

/* ── interactive 3-Ebenen ── */
.layers{display:flex;flex-direction:column;gap:12px;margin-top:clamp(10px,2vh,22px)}
.layer{position:relative;display:grid;grid-template-columns:minmax(220px,2.4fr) 5fr;gap:clamp(14px,2vw,40px);align-items:center;padding:clamp(14px,2vh,24px) clamp(16px,1.6vw,28px);border-radius:18px;cursor:pointer;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transition:background-color .35s,box-shadow .35s,transform .35s var(--ease-out)}
.slide[data-theme="light"] .layer{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.layer:hover{transform:translateX(6px)}
.slide[data-theme] .layer.active{background:linear-gradient(120deg,var(--velero),var(--velero-br));color:#fff;box-shadow:0 18px 46px rgba(10,80,190,.4)}
.layer .l-name{font-family:var(--font-sans);font-weight:800;font-size:clamp(14px,1.25vw,21px);letter-spacing:.03em;text-transform:uppercase;line-height:1.15}
.layer .l-sub{display:block;margin-top:5px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;opacity:.66;text-transform:none}
.layer .l-items{display:flex;flex-wrap:wrap;gap:8px}
.layer .l-items span{font-size:clamp(12px,.98vw,15.5px);font-weight:500;padding:.42em .9em;border-radius:999px;background:color-mix(in oklab,currentColor 9%,transparent);transition:opacity .3s}
.layer:not(.active) .l-items span{opacity:.62}
.layer .l-num{position:absolute;top:10px;right:16px;font-family:var(--font-mono);font-size:11px;opacity:.5}

/* ── interactive flowchart (journey + funnel) ── */
.flowwrap{margin-top:clamp(8px,1.6vh,20px)}
.zones{display:grid;grid-template-columns:3fr 3fr;gap:18px;margin-bottom:10px}
.zone-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding-bottom:7px;border-bottom:1.5px solid currentColor}
.zone-label.be{color:var(--ink-2)}.zone-label.ex{color:var(--velero)}
.slide[data-theme="dark"] .zone-label.be,.slide[data-theme="blue"] .zone-label.be{color:var(--sky-soft)}
.journey{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(7px,.7vw,12px)}
@media(max-width:820px){.journey{grid-template-columns:repeat(2,1fr)}.zones{grid-template-columns:1fr}}
.station{position:relative;border-radius:14px;padding:clamp(12px,1.6vh,20px) 12px;cursor:pointer;background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s var(--ease-out),box-shadow .3s,background-color .3s}
.slide[data-theme="blue"] .station,.slide[data-theme="dark"] .station{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#eef5ff}
.station .st-num{font-family:var(--font-mono);font-size:11px;color:var(--velero);opacity:.8}
.station h3{font-family:var(--font-sans);font-weight:800;font-size:clamp(11px,.92vw,14px);letter-spacing:.02em;text-transform:uppercase;line-height:1.12;margin:7px 0 6px;min-height:2.2em}
.station p{font-size:clamp(10.5px,.82vw,12.5px);line-height:1.32;color:color-mix(in oklab,currentColor 70%,transparent)}
.station.end{background:linear-gradient(140deg,var(--velero),var(--velero-br));color:#fff;box-shadow:0 12px 30px rgba(10,80,190,.34)}
.station.end .st-num{color:#fff}
.station:hover,.station.hot{transform:translateY(-6px);box-shadow:0 16px 38px rgba(8,30,80,.28),inset 0 0 0 1.5px var(--velero)}
.station.pinned{box-shadow:0 16px 38px rgba(8,30,80,.3),inset 0 0 0 2px var(--velero)}
.os-band{margin-top:14px;border-radius:16px;padding:clamp(16px,2.2vh,26px) clamp(20px,2vw,34px);background:linear-gradient(120deg,var(--royal),var(--velero));color:#fff;box-shadow:0 18px 44px rgba(8,40,110,.34)}
.os-band b{font-family:var(--font-sans);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(13px,1.05vw,16px)}
.os-band span{display:block;margin-top:5px;font-size:clamp(12px,.98vw,15.5px);opacity:.9}
.funnel{display:flex;align-items:center;gap:6px;margin-top:16px;flex-wrap:wrap}
.funnel .fstage{flex:1 1 0;text-align:center;font-family:var(--font-mono);font-size:clamp(9.5px,.78vw,12px);letter-spacing:.04em;text-transform:uppercase;padding:8px 4px;border-radius:8px;background:color-mix(in oklab,currentColor 8%,transparent);transition:background-color .3s,color .3s,transform .3s}
.funnel .fstage.hot{background:var(--velero);color:#fff;transform:scale(1.06)}
.flow-result{margin-top:clamp(14px,2.4vh,22px);font-family:var(--font-mono);font-size:clamp(12px,1.05vw,16px);letter-spacing:.02em;color:var(--ink-2);display:flex;align-items:baseline;gap:12px}
.slide[data-theme="dark"] .flow-result,.slide[data-theme="blue"] .flow-result{color:var(--sky-soft)}
.flow-result .fr-arrow{color:var(--velero);font-size:1.25em;font-family:var(--font-sans)}

/* ── AI fan-out ── */
.fan{display:grid;grid-template-columns:minmax(230px,1fr) 2.1fr;gap:clamp(24px,3.4vw,72px);align-items:center;margin-top:clamp(8px,1.6vh,20px)}
@media(max-width:820px){.fan{grid-template-columns:1fr}}
.fan-in{position:relative}
.brief-card{border-radius:18px;padding:22px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.brief-card .bk{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.66}
.brief-card .bl{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:clamp(13px,1.05vw,16px)}
.brief-card .bl .dot{width:7px;height:7px;border-radius:50%;background:var(--sky)}
.run-btn{margin-top:18px;display:inline-flex;align-items:center;gap:10px;pointer-events:auto;padding:.7em 1.3em;border-radius:999px;background:linear-gradient(120deg,var(--velero),var(--velero-br));color:#fff;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 12px 30px rgba(10,80,190,.4);transition:transform .2s,box-shadow .2s}
.run-btn:hover{transform:translateY(-2px)}
.run-btn .spark{width:14px;height:14px}
.fan-out{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:560px){.fan-out{grid-template-columns:1fr}}
.out-card{border-radius:16px;overflow:hidden;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);opacity:0;transform:translateY(18px) scale(.96);filter:blur(6px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),filter .6s var(--ease-out);transition-delay:var(--d,0s)}
.fan.run .out-card{opacity:1;transform:none;filter:blur(0)}
.out-card .oc-bar{height:7px;background:linear-gradient(90deg,var(--velero),var(--sky))}
.out-card .oc-body{padding:16px}
.out-card .oc-k{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);opacity:.9}
.out-card h4{font-family:var(--font-sans);font-weight:800;font-size:clamp(13px,1.05vw,16px);margin:8px 0 6px;text-transform:uppercase;letter-spacing:.02em}
.out-card .ln{height:8px;border-radius:4px;background:color-mix(in oklab,currentColor 14%,transparent);margin-top:7px}
.out-card .ln.s{width:62%}
.fan-note{grid-column:1 / -1;margin-top:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;display:flex;align-items:center;gap:9px}
.fan-note::before{content:"";width:7px;height:7px;border-radius:50%;background:#56d08a;box-shadow:0 0 0 0 rgba(86,208,138,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(86,208,138,.5)}70%{box-shadow:0 0 0 9px rgba(86,208,138,0)}100%{box-shadow:0 0 0 0 rgba(86,208,138,0)}}

/* ── AI generation animations (slide 9) ── */
.oc-k .dotpulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sky);margin-right:8px;vertical-align:1px;opacity:.4}
.fan.run .oc-k .dotpulse{animation:blink 1.3s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.gen{margin-top:8px}
/* exposé — lines write in */
.gen-doc{display:flex;flex-direction:column;gap:8px;padding-top:2px}
.gen-doc .g-h{height:11px;width:72%;border-radius:3px;background:linear-gradient(90deg,var(--velero-br),var(--sky));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.gen-doc .g-line{height:7px;border-radius:3px;background:color-mix(in oklab,currentColor 18%,transparent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.gen-doc .g-line.s{width:56%}
.fan.run .oc-expose .g-h{transform:scaleX(1);transition-delay:.10s}
.fan.run .oc-expose .g-line{transform:scaleX(1)}
.fan.run .oc-expose .l1{transition-delay:.32s}
.fan.run .oc-expose .l2{transition-delay:.48s}
.fan.run .oc-expose .l3{transition-delay:.64s}
.fan.run .oc-expose .l4{transition-delay:.80s}
/* visual — empty room gets staged + scan sweep */
.gen-room{position:relative;height:104px;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#27406e 0%,#27406e 60%,#182d52 60%,#16284a 100%)}
.gen-room .fz{position:absolute;opacity:0;transform:translateY(8px) scale(.92);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);border-radius:4px}
.gen-room .rug{left:9%;bottom:9%;width:58%;height:7%;background:rgba(123,178,236,.42);border-radius:6px}
.gen-room .sofa{left:12%;bottom:15%;width:42%;height:19%;background:rgba(190,212,244,.9);border-radius:7px}
.gen-room .lamp{left:64%;bottom:16%;width:4.5%;height:40%;background:rgba(205,224,250,.85);border-radius:3px}
.gen-room .plant{left:74%;bottom:14%;width:12%;height:27%;background:rgba(118,196,150,.8);border-radius:50% 50% 5px 5px}
.gen-room .art{left:20%;top:13%;width:24%;height:24%;background:rgba(150,186,236,.55);border-radius:3px;box-shadow:inset 0 0 0 2px rgba(210,228,252,.6)}
.fan.run .oc-visual .fz{opacity:1;transform:none}
.fan.run .oc-visual .rug{transition-delay:.32s}
.fan.run .oc-visual .sofa{transition-delay:.42s}
.fan.run .oc-visual .lamp{transition-delay:.54s}
.fan.run .oc-visual .plant{transition-delay:.64s}
.fan.run .oc-visual .art{transition-delay:.74s}
.gen-room .scan{position:absolute;top:0;bottom:0;width:55%;background:linear-gradient(90deg,transparent,rgba(160,200,250,.55),transparent);transform:translateX(-120%)}
.fan.run .oc-visual .scan{animation:scansweep 1.15s var(--ease-out) .26s 1}
@keyframes scansweep{from{transform:translateX(-120%)}to{transform:translateX(300%)}}
/* campaign — bars fill */
.gen-plan{display:flex;flex-direction:column;gap:9px;padding-top:2px}
.gen-plan .p-row{display:flex;align-items:center;gap:9px}
.gen-plan .p-row i{flex:0 0 40%;font-style:normal;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;opacity:.72}
.gen-plan .p-row b{flex:1;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--velero),var(--sky));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.fan.run .oc-plan .p-row b{transform:scaleX(1)}
.fan.run .oc-plan .r1 b{transition-delay:.32s}
.fan.run .oc-plan .r2 b{transition-delay:.46s}
.fan.run .oc-plan .r3 b{transition-delay:.60s}
.fan.run .oc-plan .r4 b{transition-delay:.74s}

/* ── KPI tiles ── */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,34px);margin-top:clamp(10px,2vh,24px)}
@media(max-width:820px){.kpis{grid-template-columns:1fr}}
.kpi{border-radius:20px;padding:clamp(22px,3vh,40px) clamp(20px,2vw,32px);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.slide[data-theme="light"] .kpi{background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-card)}
.kpi .k-num{font-family:var(--font-serif);font-size:clamp(46px,6.4vw,104px);line-height:.95;letter-spacing:-.01em;color:var(--velero-br)}
.slide[data-theme="light"] .kpi .k-num{color:var(--velero)}
.kpi .k-unit{font-size:.42em;vertical-align:.4em;margin-left:2px}
.kpi h3{font-family:var(--font-sans);font-weight:800;font-size:clamp(13px,1.05vw,16px);letter-spacing:.03em;text-transform:uppercase;margin:14px 0 8px}
.kpi p{font-size:clamp(12.5px,1vw,15.5px);line-height:1.45;color:color-mix(in oklab,currentColor 78%,transparent)}

/* ── closing ── */
.s-closing .wrap{justify-content:center}
.close-contact{margin-top:clamp(34px,6vh,72px);display:grid;grid-template-columns:auto auto;gap:7px 30px;justify-content:start;font-family:var(--font-mono);font-size:clamp(12px,1vw,15px);letter-spacing:.04em;line-height:1.7;opacity:.86}
.close-contact a{color:var(--sky)}
.disc{margin-top:24px;max-width:80ch;font-size:10px;line-height:1.5;opacity:.4}

/* tag pill row */
.tagrow{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(18px,3vh,34px)}
.tag{font-family:var(--font-mono);font-size:clamp(11px,.92vw,14px);letter-spacing:.04em;padding:.5em 1em;border-radius:999px;background:color-mix(in oklab,currentColor 9%,transparent);scale:.7;opacity:0;filter:blur(4px);transition:scale .6s var(--ease-spring),opacity .45s,filter .45s;transition-delay:var(--d,0s)}
.slide.is-active .tag.in{scale:1;opacity:1;filter:blur(0)}

@media(max-width:680px){
  .layer{grid-template-columns:1fr}
  .close-contact{grid-template-columns:1fr;gap:6px}
}

/* ── timeline (Werte) ── */
.timeline{margin-top:clamp(24px,5vh,56px)}
.tl-heads,.tl-descs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,56px);text-align:center}
.tl-heads{align-items:end}
.tl-heads>div{display:flex;flex-direction:column;gap:8px}
.tl-date{font-family:var(--font-serif);font-size:clamp(34px,4.2vw,60px);line-height:1;color:var(--velero)}
.tl-label{font-weight:800;font-size:clamp(13px,1.15vw,18px);letter-spacing:.04em;text-transform:uppercase}
.tl-axis{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:40px;margin:14px 0}
.tl-axis::before{content:"";position:absolute;left:16.66%;right:16.66%;top:50%;transform:translateY(-50%);height:2px;background:color-mix(in oklab,currentColor 24%,transparent)}
.tl-dot{justify-self:center;align-self:center;width:15px;height:15px;border-radius:50%;background:var(--velero);position:relative;z-index:2;box-shadow:0 0 0 5px color-mix(in oklab,var(--velero) 16%,transparent)}
.tl-descs p{font-size:clamp(13px,1.05vw,16.5px);line-height:1.45;color:color-mix(in oklab,currentColor 76%,transparent);max-width:32ch;margin:0 auto}
.slide[data-theme="dark"] .tl-date,.slide[data-theme="blue"] .tl-date{color:var(--sky)}
.slide[data-theme="dark"] .tl-dot,.slide[data-theme="blue"] .tl-dot{background:var(--sky);box-shadow:0 0 0 5px rgba(123,178,236,.18)}
@media(max-width:820px){.tl-heads,.tl-descs{grid-template-columns:1fr;gap:18px}.tl-axis{display:none}}

/* ── two-column ticks (Rollout) ── */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);margin-top:clamp(20px,4vh,44px)}
.twocol .tc-head{font-family:var(--font-sans);font-weight:800;font-size:clamp(15px,1.4vw,22px);letter-spacing:.04em;text-transform:uppercase;color:var(--velero);margin-bottom:clamp(14px,2.4vh,26px)}
.slide[data-theme="dark"] .twocol .tc-head,.slide[data-theme="blue"] .twocol .tc-head{color:var(--sky)}
.tc-note{margin-top:clamp(22px,4vh,42px);font-style:italic;font-size:clamp(13px,1.1vw,17px);color:color-mix(in oklab,currentColor 64%,transparent)}
@media(max-width:820px){.twocol{grid-template-columns:1fr;gap:28px}}

/* ── card quote (Purpose) ── */
.os-card .c-quote{display:block;font-family:var(--font-sans);font-weight:800;font-size:clamp(14px,1.18vw,19px);line-height:1.32;color:var(--velero);margin:11px 0 12px}
.slide[data-theme="blue"] .os-card .c-quote,.slide[data-theme="dark"] .os-card .c-quote{color:var(--sky)}