/* elbfon — Designsystem */
:root{color-scheme:dark;
  --ink:#08080a; --ink-2:#0f0f12; --card:#141417; --card-2:#1b1b1f;
  --paper:#aaaaaa; --paper-2:#b8b8b6; --text:#ecebe8; --muted:#92929a; --muted-dark:#3b3b40;
  --line:rgba(255,255,255,.10); --line-dark:rgba(0,0,0,.14);
  --accent:#e9e6df;
  --ease:cubic-bezier(.32,.72,0,1); --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --f-display:"Hanken Grotesk",Tahoma,Verdana,system-ui,sans-serif;
  --f-body:"Hanken Grotesk",Tahoma,Verdana,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --gut:clamp(20px,4vw,56px); --max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--text);font-family:var(--f-body);font-size:clamp(16px,1.05vw,18px);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:#fff;color:#000}
.wrap{width:min(100% - 2*var(--gut),var(--max));margin-inline:auto}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,6rem)}
h2{font-size:clamp(2rem,4.2vw,3.8rem)}
h3{font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.15;letter-spacing:-.015em}
p{text-wrap:pretty}
.lead{font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.5;color:#c9c8c4;max-width:46ch}
.eyebrow{display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:7px 14px;border:1px solid var(--line);border-radius:99px;margin-bottom:28px}
.on-paper .eyebrow{color:#333;border-color:var(--line-dark)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* sections */
section{position:relative}
.sec{padding:clamp(88px,12vw,170px) 0}
.on-ink{background:var(--ink);color:var(--text)}
.on-ink-2{background:var(--ink-2);color:var(--text)}
.on-paper{background:var(--paper);color:#0a0a0b}
.on-paper .lead{color:#2a2a2d}
.sec-head{max-width:820px;margin-bottom:clamp(40px,6vw,80px)}
.sec-head h2{margin-bottom:22px}

/* tear divider */
.tear{display:block;width:100%;height:clamp(54px,8vw,120px);margin:calc(-1px) 0;position:relative;z-index:2;pointer-events:none;overflow:visible}
.tear svg{display:block;width:100%;height:100%;overflow:visible}
.tear.flip{transform:scaleY(-1)}

/* buttons: Island pill + nested arrow */
.btn{--bg:#ecebe8;--fg:#08080a;display:inline-flex;align-items:center;gap:14px;padding:8px 8px 8px 26px;border-radius:99px;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-weight:600;font-size:16px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .5s var(--ease),background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);-webkit-tap-highlight-color:transparent}
.btn .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.10);transition:transform .5s var(--ease),background .5s var(--ease)}
.btn .ic svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.btn:hover .ic{background:rgba(0,0,0,.18)}
.btn:hover .ic svg{transform:translate(2px,-2px)}
.btn:active{transform:scale(.97)}
.btn.ghost{--bg:transparent;--fg:var(--text);border-color:rgba(255,255,255,.22);padding-left:24px}
.btn.ghost .ic{background:rgba(255,255,255,.10)}
.btn.ghost:hover{border-color:rgba(255,255,255,.5)}
.btn.dark{--bg:#0a0a0b;--fg:#ecebe8}
.btn.dark .ic{background:rgba(255,255,255,.14)}
.btn.sm{font-size:14px;padding:6px 6px 6px 20px}.btn.sm .ic{width:32px;height:32px}
.btn:focus-visible,.nav a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.on-paper .btn:focus-visible{outline-color:#000}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* nav */
.nav{position:fixed;top:16px;left:0;right:0;z-index:60;display:flex;justify-content:center;pointer-events:none;padding:0 12px}
.nav-in{pointer-events:auto;display:flex;align-items:center;gap:6px;padding:7px 8px 7px 20px;border-radius:99px;background:rgba(14,14,16,.62);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border:1px solid rgba(255,255,255,.10);box-shadow:0 10px 40px -12px rgba(0,0,0,.6);transition:transform .6s var(--ease)}
.nav.hide .nav-in{transform:translateY(-130%)}
.nav .logo{display:block;height:22px;margin-right:18px}
.nav .logo img{height:100%;width:auto}
.nav ul{display:flex;list-style:none;gap:2px}
.nav ul a{display:block;padding:10px 16px;border-radius:99px;font-size:15px;font-weight:500;text-decoration:none;color:#b9b8b4;transition:color .3s,background .3s}
.nav ul a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav ul a[aria-current=page]{color:#fff;background:rgba(255,255,255,.10)}
.nav .btn{margin-left:10px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.08);position:relative;cursor:pointer;margin-left:6px}
.burger i{position:absolute;left:14px;right:14px;height:1.6px;background:#fff;border-radius:2px;transition:transform .6s var(--ease),top .6s var(--ease)}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:25px}
.menu-open .burger i:nth-child(1){top:21.5px;transform:rotate(45deg)}
.menu-open .burger i:nth-child(2){top:21.5px;transform:rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:55;background:rgba(8,8,10,.92);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);display:flex;flex-direction:column;justify-content:center;padding:100px var(--gut) 40px;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.menu-open .sheet{opacity:1;visibility:visible}
.sheet a.big{display:block;font-family:var(--f-display);font-size:clamp(2.2rem,9vw,3.4rem);font-weight:600;letter-spacing:-.03em;text-decoration:none;padding:6px 0;opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.menu-open .sheet a.big{opacity:1;transform:none}
.menu-open .sheet a.big:nth-of-type(1){transition-delay:.08s}.menu-open .sheet a.big:nth-of-type(2){transition-delay:.14s}.menu-open .sheet a.big:nth-of-type(3){transition-delay:.2s}.menu-open .sheet a.big:nth-of-type(4){transition-delay:.26s}
.sheet .btn{margin-top:28px;align-self:flex-start}
@media(max-width:860px){.nav ul,.nav-in>.btn{display:none}.burger{display:block}.nav-in{padding-left:18px}}

/* reveal */
.rv{opacity:0;transform:translateY(34px);filter:blur(8px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out),filter 1s var(--ease-out);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none;filter:none}
.noanim .rv{opacity:1;transform:none;filter:none;transition:none}

/* double bezel */
.bz{padding:7px;border-radius:30px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.bz>.core{border-radius:23px;background:var(--card);box-shadow:inset 0 1px 1px rgba(255,255,255,.10);padding:clamp(24px,2.6vw,38px);height:100%}
.on-paper .bz{background:rgba(0,0,0,.06);border-color:var(--line-dark)}
.on-paper .bz>.core{background:#0b0b0d;color:var(--text)}

/* ===== journey (pinned scroll scene) ===== */
.journey{height:620vh;background:#05070b}
.stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;perspective:1100px;background:#05070b}
.layer{position:absolute;inset:-2%;opacity:0;will-change:transform,opacity;backface-visibility:hidden}
.layer img{width:100%;height:100%;object-fit:cover}
.stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 100%),linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.7))}
.cap{position:absolute;z-index:5;left:0;right:0;bottom:clamp(60px,12vh,140px);opacity:0;transform:translateY(24px);will-change:transform,opacity;pointer-events:none}
.cap.on{pointer-events:auto}
.cap h2,.cap h1{max-width:15ch}
.cap .lead{margin-top:20px;color:#e0dfdb;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.cap h1,.cap h2{text-shadow:0 4px 50px rgba(0,0,0,.55)}
.cap.mid{top:0;bottom:0;display:flex;align-items:center}
.cap.mid .wrap>*{max-width:900px}
.hero-top{position:absolute;z-index:5;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(56px,11vh,120px);will-change:transform,opacity}
.hero-top h1{max-width:13ch;text-shadow:0 4px 60px rgba(0,0,0,.6)}
.hero-top .lead{margin:26px 0 34px;color:#e6e5e1;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.scrollhint{position:absolute;z-index:6;right:var(--gut);bottom:34px;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#cfcfcf;display:flex;align-items:center;gap:12px;transition:opacity .5s}
.scrollhint:after{content:"";width:1px;height:46px;background:linear-gradient(#fff,transparent);animation:drip 2.2s var(--ease-io) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.pbar{position:absolute;z-index:6;left:var(--gut);bottom:34px;display:flex;gap:6px}
.pbar i{width:26px;height:2px;background:rgba(255,255,255,.28);border-radius:2px;overflow:hidden;position:relative}
.pbar i b{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
@media(max-width:700px){.scrollhint{display:none}.journey{height:560vh}}
.static-mode .journey{height:auto}
.static-mode .stage{position:relative;height:auto;display:grid}
.static-mode .layer{position:relative;inset:0;opacity:1;height:70vh;display:none}
.static-mode .layer:first-child{display:block}
.static-mode .cap,.static-mode .pbar,.static-mode .scrollhint{display:none}
.static-mode .hero-top{position:relative;padding:160px 0 80px;background:linear-gradient(#05070b,#0a0a0d)}

/* page hero (inner pages) */
.phero{padding:clamp(150px,19vw,230px) 0 clamp(70px,9vw,120px);background:var(--ink);position:relative;overflow:hidden}
.phero:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 85% 10%,rgba(255,255,255,.07),transparent 60%);pointer-events:none}
.phero h1{max-width:14ch;margin-bottom:28px;font-size:clamp(2.4rem,5.2vw,5rem)}
.grid2>*{min-width:0}
.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* feature grid */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.cards3{grid-template-columns:1fr}}
.cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:800px){.cards2{grid-template-columns:1fr}}
.core .num{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:var(--muted);display:block;margin-bottom:60px}
.core h3{margin-bottom:14px}
.core p{color:#b5b4b0}

/* statement */
.statement{font-family:var(--f-display);font-weight:600;letter-spacing:-.035em;line-height:.98;font-size:clamp(2.6rem,8.2vw,8rem)}
.statement span{display:block}
.statement .dim{color:#5e5e64}
.on-paper .statement .dim{color:#6a6a6c}

/* providers */
.prov{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:1000px){.prov{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.prov{grid-template-columns:repeat(2,1fr)}}
.tile{aspect-ratio:3/2;border-radius:22px;background:#ecebe8;display:grid;place-items:center;padding:18px;overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.tile:hover{transform:translateY(-4px) scale(1.015)}
.tile img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.tile.fill{padding:0;background:#0a0a0b}
.tile.fill img{width:100%;height:100%;object-fit:cover;border-radius:0}
.tile.sq{padding:0}
.tile.sq img{height:100%;width:auto;aspect-ratio:1;border-radius:0}

/* facts */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-dark)}
.fact{padding:34px 24px 10px 0;border-right:1px solid var(--line-dark)}
.fact:last-child{border:0}
.fact b{display:block;font-family:var(--f-display);font-weight:600;font-size:clamp(2.6rem,6vw,5.4rem);letter-spacing:-.04em;line-height:1}
.fact span{display:block;margin-top:12px;color:#2b2b2e;font-size:15px}
@media(max-width:800px){.facts{grid-template-columns:repeat(2,1fr)}.fact{border-bottom:1px solid var(--line-dark);padding-bottom:26px}}

/* portrait */
.portrait{position:relative;border-radius:28px;overflow:hidden;background:#111;aspect-ratio:4/5;max-width:440px}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform:scale(1.03);transition:transform 1.4s var(--ease)}
.portrait:hover img{transform:scale(1.07)}
.portrait figcaption{position:absolute;left:18px;bottom:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#d8d8d8;text-shadow:0 1px 12px #000}
.portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.55))}

/* reviews */
.revs{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--gut) 24px;margin:0 calc(-1*var(--gut));scrollbar-width:none}
.revs::-webkit-scrollbar{display:none}
.rev{flex:0 0 min(86vw,420px);scroll-snap-align:start}
.rev q{display:block;quotes:none;font-family:var(--f-display);font-size:clamp(1.2rem,1.8vw,1.55rem);line-height:1.3;letter-spacing:-.01em;margin-bottom:34px}
.rev footer{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}
.stars{color:#e9e6df;letter-spacing:3px}
.rate{display:flex;align-items:center;gap:14px;color:#c9c8c4;font-size:15px;margin-top:6px}
.revctl{display:flex;gap:10px}
.revctl button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .4s var(--ease),transform .4s var(--ease)}
.revctl button:hover{background:rgba(255,255,255,.08)}.revctl button:active{transform:scale(.94)}
.rev-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:44px;flex-wrap:wrap}

/* accordion (engagement) */
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
.on-paper .acc details{border-color:var(--line-dark)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-family:var(--f-display);font-size:clamp(1.2rem,2vw,1.7rem);font-weight:500;letter-spacing:-.015em}
.acc summary::-webkit-details-marker{display:none}
.acc summary i{flex:0 0 40px;height:40px;border-radius:50%;border:1px solid currentColor;opacity:.5;position:relative;transition:transform .6s var(--ease),opacity .3s}
.acc summary i:before,.acc summary i:after{content:"";position:absolute;left:12px;right:12px;top:19px;height:1.5px;background:currentColor}
.acc summary i:after{transform:rotate(90deg);transition:transform .6s var(--ease)}
.acc details[open] summary i{opacity:1;transform:rotate(180deg)}
.acc details[open] summary i:after{transform:rotate(0)}
.acc .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.acc details[open] .body{grid-template-rows:1fr}
.acc .body>div{overflow:hidden}
.acc .body p{padding:0 60px 28px 0;color:#b5b4b0;max-width:70ch}
.on-paper .acc .body p{color:#2a2a2d}

/* checks */
.checks{list-style:none;display:grid;gap:12px}
.checks li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-weight:500}
.checks li:before{content:"";flex:0 0 22px;height:22px;margin-top:2px;border-radius:50%;background:#ecebe8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}

/* ui mock (contract overview) */
.mock{border-radius:26px;background:#0d0d10;border:1px solid var(--line);box-shadow:0 40px 100px -30px rgba(0,0,0,.8),inset 0 1px 1px rgba(255,255,255,.08);overflow:hidden;font-size:14px}
.mock-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--muted);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:#2a2a2f}
.mock-bar span{margin-left:auto}
.mrow{display:grid;grid-template-columns:1.2fr 1fr auto;gap:12px;align-items:center;padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.06)}
.mrow:last-child{border:0}
.mrow b{font-weight:600}.mrow small{display:block;color:var(--muted);font-size:12px}
.pill{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:99px;border:1px solid var(--line);color:#cfcfcf;white-space:nowrap}
.pill.ok{background:#ecebe8;color:#000;border-color:transparent}
.pill.run{border-color:#8a8a90}
.mock-foot{padding:16px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:12.5px;font-family:var(--f-mono)}
.floatcard{position:absolute;right:-6%;bottom:-8%;width:62%;padding:16px 18px;border-radius:20px;background:rgba(22,22,26,.85);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14);font-size:13px;animation:bob 6s var(--ease-io) infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.mockwrap{position:relative}
@media(max-width:900px){.floatcard{right:0;bottom:-30px}.mockwrap{margin-bottom:40px}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-dark)}
.step{padding:30px 30px 10px 0}
.step .n{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;color:#444}
.step h3{margin:46px 0 12px}
.step p{color:#2a2a2d}
@media(max-width:800px){.steps{grid-template-columns:1fr}.step{border-bottom:1px solid var(--line-dark);padding-bottom:30px}}

/* prose (legal) */
.prose{max-width:760px}
.prose h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:56px 0 16px;letter-spacing:-.02em}
.prose h3{font-size:1.15rem;margin:30px 0 10px}
.prose p,.prose li{color:#c4c3bf;margin-bottom:14px}
.prose ul{padding-left:1.2em;margin-bottom:14px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose .tbl{display:grid;grid-template-columns:200px 1fr;gap:10px 24px;margin:12px 0 30px}
.prose .tbl dt{color:var(--muted);font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding-top:5px}
.prose .tbl dd{color:#e6e5e1}
@media(max-width:600px){.prose .tbl{grid-template-columns:1fr}}

/* booking */
.book{border-radius:28px;background:#0e0e11;border:1px solid var(--line);min-height:560px;display:grid;place-items:center;padding:clamp(24px,5vw,60px);text-align:center}
.book .meetings-iframe-container{width:100%;min-height:680px}

/* footer */
.foot-cta{padding:clamp(100px,14vw,200px) 0;background:var(--ink)}
.foot-cta h2{font-size:clamp(2.6rem,7vw,6.6rem);max-width:14ch;margin-bottom:40px}
footer.site{background:#050507;border-top:1px solid var(--line);padding:70px 0 40px;font-size:15px;color:#a5a4a0}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media(max-width:800px){.fgrid{grid-template-columns:1fr 1fr}}
.fgrid h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#6d6d74;margin-bottom:18px;font-weight:500}
.fgrid a{display:block;text-decoration:none;padding:4px 0;color:#d0cfcb;transition:color .3s}
.fgrid a:hover{color:#fff}
.fgrid img{height:26px;margin-bottom:18px}
.fbottom{margin-top:60px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#6d6d74}
.fbottom button{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}

/* consent */
.consent{position:fixed;z-index:80;left:16px;right:16px;bottom:16px;max-width:520px;margin-left:auto;padding:7px;border-radius:28px;background:rgba(255,255,255,.06);border:1px solid var(--line);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);transform:translateY(140%);opacity:0;transition:transform .8s var(--ease),opacity .8s var(--ease)}
.consent.show{transform:none;opacity:1}
.consent .core{background:rgba(14,14,17,.94);border-radius:22px;padding:22px 24px;box-shadow:inset 0 1px 1px rgba(255,255,255,.1)}
.consent h4{font-family:var(--f-display);font-size:1.15rem;margin-bottom:8px}
.consent p{font-size:14px;color:#b5b4b0;margin-bottom:16px}
.consent p a{text-decoration:underline}
.consent .cta-row{gap:10px}
.consent .btn{font-size:14px;padding:5px 5px 5px 18px}.consent .btn .ic{width:32px;height:32px}
.consent .btn.ghost{padding:12px 20px}



@media(max-width:600px){h1,.phero h1{font-size:clamp(2.1rem,9.4vw,3rem)}.mrow{grid-template-columns:1fr auto}.mrow>span:nth-child(2){display:none}.floatcard{width:82%;right:0}.mock-foot span:last-child{display:none}}

/* 3D-Szene */
.glcv{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage.gl-on .layer{display:none}
.stage.gl-on:after{background:radial-gradient(130% 100% at 50% 40%,rgba(0,0,0,0) 45%,rgba(0,0,0,.28) 100%),linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(0,0,0,.5))}
.stage.gl-on .hero-top h1{color:#08080a;text-shadow:none}
.stage.gl-on .hero-top .lead{color:#1b1b1e;text-shadow:none}
.stage.gl-on .hero-top .eyebrow{color:#26262a;border-color:rgba(0,0,0,.28)}
.stage.gl-on .hero-top .btn.ghost{color:#08080a;border-color:rgba(0,0,0,.4)}
.stage.gl-on .hero-top .btn.ghost .ic{background:rgba(0,0,0,.08)}
.stage.gl-on .hero-top .btn:not(.ghost){--bg:#08080a;--fg:#ecebe8}
.stage.gl-on .hero-top .btn:not(.ghost) .ic{background:rgba(255,255,255,.16)}
.stage.gl-on .scrollhint{color:#1b1b1e}.stage.gl-on .scrollhint:after{background:linear-gradient(#08080a,transparent)}
.stage.gl-on .pbar i{background:rgba(255,255,255,.35)}
.stage.gl-on .pbar i b{background:#fff}
.stage:not(.gl-on) .hero-top h1{color:#fff}
/* Logo-Slider */
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq-track{display:flex;width:max-content;animation:marq 42s linear infinite;will-change:transform}
.marq:hover .marq-track,.marq:focus-within .marq-track{animation-play-state:paused}
.marq-group{display:flex;align-items:center;gap:clamp(56px,8vw,120px);padding-right:clamp(56px,8vw,120px)}
.lg{flex:none;height:68px;display:flex;align-items:center}
.lg img{height:100%;width:auto;display:block}
.lg.o2 img{height:auto;width:216px}
@keyframes marq{to{transform:translateX(-50%)}}
/* Fotos: ein Motiv pro Stelle, einheitlich dunkel abgestimmt */
.shot{position:relative;margin:clamp(40px,6vw,80px) 0 0;border-radius:28px;overflow:hidden;aspect-ratio:21/9;background:#0b0b0c;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.6)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 1.6s var(--ease,cubic-bezier(.32,.72,0,1))}
.shot.in img,.rv.in .shot img{transform:scale(1)}
.shot:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35));pointer-events:none}
.shot.tall{aspect-ratio:4/5;margin:0;max-height:620px}
.shot.mid{aspect-ratio:16/9}
.shot.flat{margin:0}
.phero.has-bg>img.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;z-index:0}
.phero.has-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,10,.92) 0%,rgba(8,8,10,.6) 55%,rgba(8,8,10,.85) 100%),linear-gradient(180deg,rgba(8,8,10,.5),var(--ink));z-index:0;pointer-events:none}
.phero.has-bg>.wrap{position:relative;z-index:1}
.band-photo{position:relative;overflow:hidden}
.band-photo>img.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;z-index:0}
.band-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink),rgba(8,8,10,.55) 40%,var(--ink));z-index:0;pointer-events:none}
.band-photo>.wrap{position:relative;z-index:1}
@media(max-width:700px){.shot{aspect-ratio:4/3;border-radius:20px}}
.phero.has-bg>img.bgimg{opacity:1;object-position:50% 70%}
.phero.has-bg:after{background:linear-gradient(90deg,rgba(8,8,10,.88) 0%,rgba(8,8,10,.55) 45%,rgba(8,8,10,.12) 100%),linear-gradient(180deg,rgba(8,8,10,.35),rgba(8,8,10,0) 40%,rgba(8,8,10,.55))}
.hero-gk{min-height:min(88vh,820px)}
.shot:after{background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.18))}
.shot img{filter:brightness(1.18) contrast(1.04)}
.band-photo>img.bgimg{opacity:.55}
.mockwrap{margin:0 0 clamp(30px,4vw,50px)}
@media(max-width:700px){.phero.has-bg:after{background:linear-gradient(180deg,rgba(8,8,10,.75),rgba(8,8,10,.35) 55%,rgba(8,8,10,.7))}}

/* ===== Runde 5: Grau-CI, Bewertungen, Footer, Fotos ===== */
:root{--ci:#aaaaaa}
.btn{--bg:#aaaaaa;--fg:#08080a}
.btn:hover{--bg:#bcbcbc}
.btn.ghost{--bg:transparent;--fg:var(--text)}
.btn.dark{--bg:#0a0a0b;--fg:#ecebe8}
.nav-in{background:rgba(120,120,122,.34)!important;border-color:rgba(170,170,170,.35)!important}
.nav ul a{color:#d4d4d4}
.nav ul a:hover{color:#fff;background:rgba(170,170,170,.18)}
.nav ul a[aria-current=page]{color:#fff;background:rgba(170,170,170,.28)}
.sheet .btn{--bg:#aaaaaa}
/* Google-Bewertungen */
.gstars{display:inline-flex;gap:3px;color:#fbbc04}
.gstars svg{width:20px;height:20px;fill:currentColor}
.gstars.big svg{width:30px;height:30px}
.rate{gap:18px;font-size:16px}
.rate b{color:#fff;font-size:1.25em}
.revs{gap:16px}
.gr{flex:0 0 min(86vw,380px);scroll-snap-align:start;background:#14141a;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:26px 26px 30px;display:flex;flex-direction:column;gap:16px;min-height:260px}
.gr-top{display:flex;align-items:center;gap:14px}
.gr .av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#aaa;color:#08080a;font-weight:700;font-size:20px;flex:none}
.gr b{display:block;font-size:19px;line-height:1.2;color:#fff}
.gr small{display:block;color:#8a8a90;font-size:13px;margin-top:3px}
.gr .gstars svg{width:26px;height:26px}
.gr p{color:#dcdbd7;font-size:17px;line-height:1.5}
/* Fakten */
.facts{border-top:0;grid-template-columns:repeat(4,1fr);gap:20px}
.fact{border:0!important;padding:10px 12px;text-align:center}
.fact span{margin-left:auto;margin-right:auto;max-width:18ch}
/* Schritte symmetrisch */
.steps{border-top:0;gap:20px}
.step{padding:30px;border:1px solid var(--line-dark);border-radius:24px;background:rgba(0,0,0,.04)}
/* Abschluss-CTA mittig */
.foot-cta .wrap{text-align:center;display:flex;flex-direction:column;align-items:center}
.foot-cta h2{max-width:16ch;margin-left:auto;margin-right:auto}
.foot-cta .lead{max-width:44ch;margin-left:auto;margin-right:auto}
/* Footer gleichmäßig */
.fgrid{grid-template-columns:repeat(4,auto)!important;justify-content:space-between;gap:40px}
.fgrid>div:nth-child(2),.fgrid>div:nth-child(3){text-align:left}
.fgrid>div:last-child{text-align:left}
@media(max-width:800px){.fgrid{grid-template-columns:1fr 1fr!important}}
/* Fotos: kleiner, unten ausgeblendet */
.shot{aspect-ratio:3/2;width:min(100%,760px);margin-left:auto;margin-right:auto;border-radius:28px 28px 0 0;box-shadow:none;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
.shot.wide{width:100%;aspect-ratio:21/9;margin-top:clamp(40px,6vw,80px)}
.shot.mid{aspect-ratio:16/10;-webkit-mask-image:none;mask-image:none;border-radius:28px}
.shot.mid.flat{width:100%}
.shot:after{display:none}
/* Hero-Foto geht unten ins Schwarz über */
.phero.has-bg:after{background:linear-gradient(90deg,rgba(8,8,10,.88) 0%,rgba(8,8,10,.5) 45%,rgba(8,8,10,.1) 100%),linear-gradient(180deg,rgba(8,8,10,.35),rgba(8,8,10,0) 35%,rgba(8,8,10,.6) 70%,#08080a 100%)}
/* Anbieter-Logos in Privatkunden-Links */
.plink .pl{height:24px;width:auto;max-width:110px;object-fit:contain}
.plink .pl-t{margin-right:auto;margin-left:6px;font-weight:500;font-size:14px;color:#a5a4a0}
.fgrid>div:last-child{text-align:right}
.fgrid>div:first-child{text-align:left}
@media(max-width:800px){.fgrid>div:last-child{text-align:left}}
.plink{background:#aaaaaa!important;color:#08080a!important;border-color:transparent!important}
.plink:hover{background:#bdbdbd!important}
.plink .pl{height:30px;max-width:130px}
.plink .pl-t{color:#2a2a2d;font-weight:600}
.plink svg{opacity:.8}

/* ===== Runde 6 ===== */
.nav .logo{background:#050507;border-radius:99px;padding:9px 18px;height:auto;margin-right:12px;display:flex;align-items:center}
.nav .logo img{height:20px}
.tear{margin:-1px 0 -2px}
/* Startseite: Foto-Reise, schwarze Headline */
.stage.blk:after{background:radial-gradient(130% 100% at 50% 40%,rgba(0,0,0,0) 45%,rgba(0,0,0,.28) 100%),linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,0) 40%,rgba(0,0,0,.5))}
.stage.blk .hero-top h1{color:#08080a;text-shadow:none}
.stage.blk .hero-top .lead{color:#1b1b1e;text-shadow:none}
.stage.blk .hero-top .eyebrow{color:#26262a;border-color:rgba(0,0,0,.28)}
.stage.blk .hero-top .btn.ghost{color:#08080a;border-color:rgba(0,0,0,.4)}
.stage.blk .hero-top .btn.ghost .ic{background:rgba(0,0,0,.08)}
.stage.blk .hero-top .btn:not(.ghost){--bg:#08080a;--fg:#ecebe8}
.stage.blk .hero-top .btn:not(.ghost) .ic{background:rgba(255,255,255,.16)}
/* Geschäftskunden-Hero: Foto rechts, Text links */
.phero.hero-gk>img.bgimg{left:auto;right:0;width:74%;object-position:50% 72%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 38%);mask-image:linear-gradient(90deg,transparent,#000 38%)}
.hero-gk:after{background:linear-gradient(180deg,rgba(8,8,10,.3),rgba(8,8,10,0) 30%,rgba(8,8,10,.55) 72%,#08080a 100%)!important}
@media(max-width:860px){.hero-gk{padding-bottom:clamp(240px,70vw,420px)}.phero.hero-gk>img.bgimg{width:100%;object-position:50% 100%;-webkit-mask-image:linear-gradient(180deg,transparent 15%,#000 55%);mask-image:linear-gradient(180deg,transparent 15%,#000 55%)}}
/* Privatkunden-Links kompakt */
.plinks{grid-template-columns:1fr 1fr;gap:10px}
.plabel{grid-column:1/-1;font-size:13px;color:#8a8a90;margin:0 0 2px}
.plink{padding:14px 18px}
.plink .pl{width:96px;height:28px;max-width:none;object-fit:contain;object-position:left center}
.plink .pl-t{display:none}
.nav-in{background:rgba(88,88,90,.62)!important}
.nav ul a{color:#ececec}
.nav ul a:hover{color:#fff}

/* ===== Runde 7 ===== */
.nav .logo{background:none;border-radius:0;padding:0;height:22px;margin-right:18px;display:block}
.nav .logo img{height:100%}
footer.site{background:var(--ink)!important;border-top:0!important}
.fbottom{border-top:1px solid rgba(255,255,255,.08)}
/* Startseite: Netzwerk-Grafik */
.net{position:absolute;right:var(--gut);top:50%;width:min(540px,40vw);aspect-ratio:520/560;transform:translateY(-50%);pointer-events:none}
.net svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nl{fill:none;stroke:rgba(236,236,234,.55);stroke-width:1.4;stroke-dasharray:6 7;animation:nflow 1.6s linear infinite,ndraw 1.6s var(--ease) both;animation-delay:calc(var(--i)*.15s + .4s),calc(var(--i)*.15s + .4s)}
.np{fill:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
.nring{fill:none;stroke:#aaa;stroke-width:1.2;transform-origin:396px 260px;animation:nring 3.4s ease-out infinite}
.nring.r2{animation-delay:1.7s}
@keyframes nflow{to{stroke-dashoffset:-26}}
@keyframes ndraw{from{opacity:0}to{opacity:1}}
@keyframes nring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.nn{position:absolute;width:24%;aspect-ratio:112/56;border-radius:16px;background:#aaaaaa;display:grid;place-items:center;padding:0 12%;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);animation:nin .9s var(--ease) both;animation-delay:calc(var(--i)*.12s + .2s)}
.nn img{max-width:100%;max-height:52%;object-fit:contain}
@keyframes nin{from{opacity:0;transform:translateX(-24px) scale(.92)}to{opacity:1;transform:none}}
.nc{position:absolute;left:calc(396/520*100% - 74/520*100%);top:calc(260/560*100% - 74/520*100%*520/560);width:calc(148/520*100%);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:rgba(8,8,10,.72);border:1px solid rgba(170,170,170,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:nin 1s var(--ease) both;animation-delay:.9s}
.nc img{width:66%}
.ncap{position:absolute;left:0;right:0;bottom:-6%;text-align:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#e6e5e1;text-shadow:0 1px 12px rgba(0,0,0,.8)}
@media(max-width:1000px){.net{display:none}}
/* Gesicht hinter elbfon: Foto füllt die Textspalte */
.gesicht .portrait.big{max-width:none;aspect-ratio:auto;min-height:100%}
.gesicht .portrait.big img{position:absolute;inset:0}
@media(max-width:800px){.gesicht{grid-template-columns:1fr!important}.gesicht .portrait.big{aspect-ratio:4/5;min-height:0}}
/* Privatkunden: Logo + Pfeil mittig, Hinweis zentriert */
.plink{justify-content:center!important;gap:14px}
.plink .pl{width:auto;max-width:96px;object-position:center}
.note{text-align:center;font-size:12px!important;margin:34px auto 0!important;max-width:60ch!important}
.nn img{width:100%;height:58%;max-width:none;max-height:none;object-fit:contain}
.nn{display:flex!important;align-items:center;justify-content:center;padding:0}
.nn img{width:auto;height:56%;max-width:76%;object-fit:contain}
.nl{stroke:rgba(255,255,255,.9);stroke-width:2;filter:drop-shadow(0 0 4px rgba(0,0,0,.55))}
.nn{width:30%!important}
.nn img{width:84%;height:60%;max-width:none;object-fit:contain}

/* ===== Runde 8: Ein Hero-Foto, Hamburg-Grafik ===== */
.hero1{position:relative;background:#05070b}
.hero1 .stage{position:relative;height:100vh;height:100dvh;min-height:640px;overflow:hidden}
.hero1 .kb{position:absolute;inset:0}
.hero1 .kb img{width:100%;height:100%;object-fit:cover;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.09) translate(-1%,-1%)}}
.hero1 .stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 30%,rgba(0,0,0,.35) 70%,#08080a 100%),linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 60%)}
.hero1 .hero-top{padding-bottom:clamp(120px,22vh,230px)}
.hero1 .scrollhint{z-index:7}
.sky{position:absolute;z-index:4;right:0;bottom:0;width:min(62vw,880px);height:auto;pointer-events:none;filter:drop-shadow(0 2px 14px rgba(0,0,0,.55))}
.sk path,.sk circle{stroke-dasharray:1;stroke-dashoffset:1;animation:skdraw 2.4s var(--ease) forwards;animation-delay:calc(var(--i)*.35s + .5s)}
@keyframes skdraw{to{stroke-dashoffset:0}}
.water path{stroke-dasharray:6 10;animation:wflow 5s linear infinite}
@keyframes wflow{to{stroke-dashoffset:-64}}
.boat{animation:sail 40s linear infinite;opacity:0;animation-fill-mode:both}
.boat>g{animation:bob 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.b1{animation-duration:46s;animation-delay:2.5s}
.b2{animation-duration:34s;animation-delay:6s}.b2>g{animation-delay:-1s}
.b3{animation-duration:58s;animation-delay:11s}.b3>g{animation-delay:-2s}
@keyframes sail{0%{transform:translateX(-80px);opacity:0}6%{opacity:1}94%{opacity:1}100%{transform:translateX(840px);opacity:0}}
@keyframes bob{0%,100%{transform:rotate(-1.6deg) translateY(0)}50%{transform:rotate(1.6deg) translateY(1.5px)}}
@media(max-width:700px){.sky{width:100vw}.hero1 .hero-top{padding-bottom:clamp(110px,22vh,180px)}}
.hero1 .scrollhint{right:auto;left:var(--gut);bottom:26px}
.hero1 .eyebrow{background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ===== Runde 9: Hero mit echtem Alster-Foto + Zoom ===== */
.hero1 .kbz{position:absolute;inset:0;overflow:hidden}
.hero1 .kb{position:absolute;left:50%;top:50%;translate:-50% -50%;width:max(100vw,calc(100vh*1.217));aspect-ratio:2016/1657;transform-origin:66.4% 33%;will-change:scale}
.hero1 .kb img{width:100%;height:100%;display:block;object-fit:cover;animation:none;transform-origin:66.4% 33%;animation:kb2 30s ease-in-out infinite alternate}
@keyframes kb2{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero1 .stage:after{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 26%,rgba(0,0,0,0) 62%,rgba(0,0,0,.5) 100%),linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.12) 55%,rgba(0,0,0,0))}
.hero1 .hero-top{padding-bottom:clamp(100px,18vh,200px)}
.hero1 .tear{position:absolute;left:0;right:0;bottom:-2px;margin:0;z-index:6}
.pin{position:absolute;left:66.4%;top:31%;width:0;height:0;z-index:3}
.pin .pd{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 14px 3px rgba(255,255,255,.8)}
.pin .pr{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);animation:pring 2.8s ease-out infinite}
.pin .pr.r2{animation-delay:1.4s}
@keyframes pring{0%{transform:scale(.3);opacity:.95}100%{transform:scale(1.9);opacity:0}}
.pin .pl-line{position:absolute;left:12px;top:-6px;width:0;height:1.5px;background:#fff;transform-origin:left;animation:pline 1.1s var(--ease) 1.6s forwards;transform:rotate(-28deg)}
@keyframes pline{to{width:90px}}
.pin .pl-txt{position:absolute;left:100px;top:-62px;white-space:nowrap;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.7);opacity:0;animation:pin 1s var(--ease) 2.3s forwards}
@keyframes pin{to{opacity:1}}
@media(max-width:700px){.hero1 .kb{translate:-70% -50%;width:max(100vw,calc(100dvh*1.217))}.pin .pl-line,.pin .pl-txt{display:none}}

/* Runde 10: weicher Fade statt Zackenkante unter dem Hero */
.hero1 .hero-fade{position:absolute;left:0;right:0;bottom:-1px;height:clamp(220px,38vh,380px);z-index:5;pointer-events:none;background:linear-gradient(180deg,rgba(8,8,10,0) 0%,rgba(8,8,10,.08) 14%,rgba(8,8,10,.25) 32%,rgba(8,8,10,.52) 52%,rgba(8,8,10,.78) 72%,rgba(8,8,10,.93) 88%,#08080a 100%)}
.hero1 .hero-top{z-index:7}
.hero1 .scrollhint{z-index:8}

/* Runde 11: Statement-Foto deutlich heller */
.band-photo>img.bgimg{opacity:1;filter:brightness(1.55) contrast(1.05)}
.band-photo:after{background:linear-gradient(180deg,var(--ink) 0%,rgba(8,8,10,.12) 22%,rgba(8,8,10,.12) 78%,var(--ink) 100%),linear-gradient(90deg,rgba(8,8,10,.45),rgba(8,8,10,0) 70%)}
.band-photo .statement,.band-photo .wrap p{text-shadow:0 2px 24px rgba(0,0,0,.55)}
.band-photo .statement .dim{color:#b9b9bd!important}

/* Runde 12: Foto-Band fadet sauber in Schwarz */
.band-photo{margin-bottom:-1px}
.band-photo:after{background:linear-gradient(180deg,var(--ink) 0%,rgba(8,8,10,.12) 22%,rgba(8,8,10,.12) 55%,rgba(8,8,10,.6) 80%,var(--ink) 100%),linear-gradient(90deg,rgba(8,8,10,.45),rgba(8,8,10,0) 70%)}

/* Runde 13: Fotos als weich auslaufende Bildbänder (Fade an allen Rändern) */
.shot:not(.mid):not(.tall){width:100%;aspect-ratio:2.1/1;border-radius:0;box-shadow:none;background:transparent;overflow:visible;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%),linear-gradient(180deg,transparent 0,#000 22%,#000 68%,transparent 100%);
 -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%),linear-gradient(180deg,transparent 0,#000 22%,#000 68%,transparent 100%);mask-composite:intersect}
.shot:not(.mid):not(.tall) img{border-radius:0}
.shot.wide{aspect-ratio:2.1/1}
@media(max-width:700px){.shot:not(.mid):not(.tall){aspect-ratio:4/3;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 20%,#000 70%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 20%,#000 70%,transparent 100%)}}

/* ===== Runde 14 ===== */
/* Hero: mehr Wasser, bewegtes Wasser */
.hero1 .kb{top:57%}
.hero1 .kb .wtr{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 67%,#000 73%,#000 84%,transparent 92%);mask-image:linear-gradient(180deg,transparent 0,transparent 67%,#000 73%,#000 84%,transparent 92%)}
.hero1 .kb .wtr img{filter:url(#ripple);animation:none;transform:none}
@media(max-width:700px){.hero1 .kb{top:50%}.hero1 .kb .wtr{display:none}}
/* Mock-Übersicht: feste Spalten, alles in einer Linie */
.mrow{grid-template-columns:minmax(0,1.5fr) 150px 130px;gap:14px}
.mrow>span:nth-child(2){color:#cfcfcf;white-space:nowrap}
.mrow>.pill{justify-self:start}
@media(max-width:600px){.mrow{grid-template-columns:1fr auto}}
/* Fotos: kompakt, scharf, weiche Ränder */
.shot:not(.mid):not(.tall),.shot.wide{width:min(100%,780px);aspect-ratio:3/2;margin:clamp(8px,2vw,24px) auto 0;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%,#000 68%,transparent 100%),linear-gradient(180deg,transparent 0,#000 28%,#000 58%,transparent 100%);
 mask-image:linear-gradient(90deg,transparent 0,#000 32%,#000 68%,transparent 100%),linear-gradient(180deg,transparent 0,#000 28%,#000 58%,transparent 100%);
 -webkit-mask-composite:source-in;mask-composite:intersect}
.shot:not(.mid):not(.tall) img{transform:none!important}
@media(max-width:700px){.shot:not(.mid):not(.tall),.shot.wide{aspect-ratio:4/3}}

/* Runde 15: Hero Sonnenuntergang + Hintergrund-Bandfotos (GK) */
.hero1 .kb{top:50%;aspect-ratio:16/9;width:max(100vw,calc(100vh*1.7778));transform-origin:55% 48%}
.hero1 .kb img{transform-origin:55% 48%;animation:none}
.hero1 .kb .wtr{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 58%,#000 64%,#000 86%,transparent 96%);mask-image:linear-gradient(180deg,transparent 0,transparent 58%,#000 64%,#000 86%,transparent 96%)}
.hero1 .stage:after{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.05) 30%,rgba(0,0,0,0) 62%,rgba(0,0,0,.5) 100%),linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.2) 55%,rgba(0,0,0,0))}
@media(max-width:700px){.hero1 .kb{top:50%;translate:-62% -50%;width:max(100vw,calc(100dvh*1.7778))}}
.bshot{position:relative;width:100%;margin:clamp(30px,5vw,70px) 0 calc(-1*clamp(88px,12vw,170px));aspect-ratio:21/9;max-height:78vh;overflow:hidden;pointer-events:none}
.bshot img{width:100%;height:100%;object-fit:cover;display:block;transform:none!important}
.bshot.b-light{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 100%)}
.bshot.b-narrow{width:min(100%,1000px);margin-left:auto;margin-right:auto;aspect-ratio:16/8;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 100%),linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 100%),linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.bshot.b-dark{aspect-ratio:21/9;margin-bottom:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40%,#000 80%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 40%,#000 80%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.bshot.b-dark img{filter:brightness(1.3) contrast(1.02)}
@media(max-width:700px){.bshot,.bshot.b-narrow,.bshot.b-dark{aspect-ratio:4/3}}
.bshot.b-narrow{margin-bottom:clamp(20px,4vw,50px);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 70%,transparent 100%),linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 70%,transparent 100%),linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
/* Runde 16 */
.h1-gk span{display:block;white-space:nowrap}
@media(max-width:480px){.h1-gk{font-size:clamp(34px,10.4vw,48px)}}
.ovl{margin-top:calc(-1*clamp(54px,8vw,120px));position:relative;z-index:3}
.bshot.b-narrow{width:min(100%,1240px);aspect-ratio:16/8.6}
/* Runde 17: Fotos nur mit Fade, Skyline ausgeblendet */
.bshot.b-light{margin-bottom:0;aspect-ratio:21/8.6;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 22%,#000 58%,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 22%,#000 58%,#000 74%,transparent 100%)}
.bshot.b-light img{object-position:50% 100%}
.bshot.b-dark{width:min(100%,980px);margin-left:auto;margin-right:auto;aspect-ratio:16/6;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.3) 30%,#000 62%,#000 78%,transparent 100%),linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.3) 30%,#000 62%,#000 78%,transparent 100%),linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.bshot.b-dark img{object-position:50% 100%;filter:brightness(1.3) contrast(1.02)}
@media(max-width:700px){.bshot.b-light,.bshot.b-dark{aspect-ratio:4/3}}
.bshot.b-dark{margin-bottom:calc(-.55*clamp(88px,12vw,170px))}
/* Runde 18: Linien-Animation statt Foto */
.flowfig{width:min(100%,920px);margin:clamp(36px,5vw,64px) auto 0;padding:0 var(--gut,20px);color:#0b0b0c}
.flowfig svg{display:block;width:100%;height:auto;overflow:visible}
.flowfig path,.flowfig rect,.flowfig circle.ring{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.flowfig .sim{animation:simIn 9s ease-in-out infinite;animation-delay:calc(var(--i)*.25s)}
@keyframes simIn{0%{opacity:0;transform:translateX(-26px)}8%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.flowfig path.flow{stroke-dasharray:3 9;stroke-width:2;opacity:.55;animation:flowd 1.4s linear infinite}
@keyframes flowd{to{stroke-dashoffset:-24}}
.flowfig .dot{fill:currentColor}
.flowfig .hub rect{fill:#aaa;stroke-width:2.6}
.flowfig .hub text{font:700 17px/1 'Hanken Grotesk',system-ui,sans-serif;fill:currentColor;stroke:none;letter-spacing:-.02em}
.flowfig .ring{stroke-width:1.6;opacity:0;transform-origin:412px 170px;animation:ringp 3s ease-out infinite}
@keyframes ringp{0%{opacity:.8;transform:scale(.7)}100%{opacity:0;transform:scale(1.5)}}
.flowfig .scr{stroke-width:1.4;opacity:.5}
.flowfig .notch{stroke-width:3}
.flowfig .bar{stroke-width:6;opacity:.15;animation:barb 3s ease-in-out infinite}
.flowfig .b2{animation-delay:.25s}.flowfig .b3{animation-delay:.5s}.flowfig .b4{animation-delay:.75s}
@keyframes barb{0%,12%{opacity:.15}30%,70%{opacity:1}90%,100%{opacity:.15}}
.flowfig .chk{stroke-width:3.4;stroke-dasharray:60;stroke-dashoffset:60;animation:chkd 3s ease-in-out infinite}
@keyframes chkd{0%,35%{stroke-dashoffset:60}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:60}}
.flowfig .w{stroke-width:2.4;opacity:0;animation:wv 3s ease-out infinite}
.flowfig .w2{animation-delay:.3s}.flowfig .w3{animation-delay:.6s}
@keyframes wv{0%{opacity:0}30%{opacity:.9}70%,100%{opacity:0}}
@media(max-width:700px){.flowfig{margin-top:28px}}
.flowfig{width:min(100%,1040px);margin-bottom:calc(-.45*clamp(88px,12vw,170px))}
@media(max-width:700px){.flowfig path,.flowfig rect{stroke-width:3}.flowfig path.flow{stroke-width:3}.flowfig .hub text{font-size:22px}}
/* Runde 19: neues Hero-Foto (fast quadratisch) */
.hero1 .kb{aspect-ratio:1018/941;width:max(100vw,calc(100vh*1.0818));transform-origin:50% 52%}
.hero1 .kb img{transform-origin:50% 52%}
.hero1 .kb .wtr{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 57%,#000 62%,#000 86%,transparent 96%);mask-image:linear-gradient(180deg,transparent 0,transparent 57%,#000 62%,#000 86%,transparent 96%)}
@media(max-width:700px){.hero1 .kb{translate:-54% -50%;width:max(100vw,calc(100dvh*1.0818))}}
/* Runde 19: Netz-Animation */
.netfig path,.netfig rect,.netfig circle.nb,.netfig circle.halo,.netfig ellipse{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.netfig .thread{stroke-width:1.2;stroke-dasharray:2 7;opacity:.45}
.netfig path.link{stroke-width:1.6;stroke-dasharray:none;opacity:.55;animation:none}
.netfig path.link.faint{opacity:.28;stroke-dasharray:2 7}
.netfig .node circle.nb{fill:#aaa;stroke-width:2.2}
.netfig .node{animation:nodeIn 7s ease-in-out infinite;animation-delay:calc(var(--i)*.12s)}
@keyframes nodeIn{0%,100%{opacity:1}}
.netfig .halo{stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center;animation:halo 3.2s ease-out infinite;animation-delay:calc(var(--i,0)*.4s)}
.netfig .halo.big{animation-delay:0s}
@keyframes halo{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.netfig .hqb{fill:#aaa;stroke-width:2.6}
.netfig .win{stroke-width:1.6;fill:currentColor;opacity:.12;animation:win 4.5s ease-in-out infinite;animation-delay:calc(var(--w)*.37s)}
@keyframes win{0%,100%{opacity:.12}40%,60%{opacity:.9}}
.netfig .dot{fill:currentColor}
.netfig{width:min(100%,1080px)}
@media(max-width:700px){.netfig svg{width:124%;margin-left:-12%}.netfig{overflow:visible;padding:0}}
/* Runde 20: Hero 1132:941, Netz als Hintergrund der Sektion */
.hero1 .kb{aspect-ratio:1132/941;width:max(100vw,calc(100vh*1.203))}
@media(max-width:700px){.hero1 .kb{translate:-50% -50%;width:max(100vw,calc(100dvh*1.203))}}
[data-sec=verstaendnis]{position:relative;overflow:hidden}
[data-sec=verstaendnis]>.wrap{position:relative;z-index:1}
.netbg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;color:#0b0b0c;opacity:.9}
.netbg path.lk{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.38}
.netbg path.lk.dash{stroke-dasharray:2 7;opacity:.3}
.netbg .nd circle.nb{fill:#aaa;stroke:currentColor;stroke-width:2.2}
.netbg .nd path,.netbg .nd rect{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.netbg .nd .halo{fill:none;stroke:currentColor;stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center;animation:halo 3.4s ease-out infinite;animation-delay:var(--hd,0s)}
.netbg .dot{fill:currentColor}
.netbg .hq .hqb{fill:#aaa;stroke:currentColor;stroke-width:2.6}
.netbg .hq path,.netbg .hq rect.win{stroke:currentColor;stroke-width:1.8;fill:none}
.netbg .hq .win{fill:currentColor;opacity:.12;animation:win 4.5s ease-in-out infinite;animation-delay:calc(var(--w)*.37s)}
.netbg path.lk{opacity:.5;stroke-width:1.9}
@media(max-width:700px){[data-sec=verstaendnis]{padding-bottom:350px}}
.netbg path.lk{opacity:.5;stroke-width:1.9}
/* Runde 21: Hero Jungfernstieg (2576x1467) */
.hero1 .kb{aspect-ratio:2576/1467;width:max(100vw,calc(100vh*1.756));transform-origin:50% 55%}
.hero1 .kb img{transform-origin:50% 55%}
.hero1 .kb .wtr{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 57%,#000 62%,#000 86%,transparent 96%);mask-image:linear-gradient(180deg,transparent 0,transparent 57%,#000 62%,#000 86%,transparent 96%)}
.hero1 .stage:after{background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.05) 28%,rgba(0,0,0,0) 60%,rgba(0,0,0,.5) 100%),linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.35) 50%,rgba(0,0,0,0) 85%)}
@media(max-width:700px){.hero1 .kb{translate:-42% -50%;width:max(100vw,calc(100dvh*1.756))}}

/* Runde 22: Kennzahlen auf Handy in 2 Spalten, kein Überlauf */
.facts>.fact{min-width:0}
@media(max-width:800px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}.fact b{font-size:clamp(2.4rem,11vw,3.6rem)}.fact span{font-size:14px;max-width:16ch}}
html{overflow-x:clip}
@media(max-width:600px){.portrait figcaption{left:12px;right:8px;bottom:12px;font-size:9px;letter-spacing:.1em;line-height:1.5}}
.book.loaded{display:block;padding:clamp(10px,2vw,24px);min-height:0}
.book.loaded #book-slot{width:100%}
.book.loaded iframe{display:block;width:100%}