/* ==========================================================================
   Squarehouse · styles
   Tokens from the Squarehouse design system, Farbstand 1.1 (Preußisch).
   Ink canvas, Paper text, Preußisch blue as the one coloured part.
   ========================================================================== */
:root{
  --canvas:#14120F;
  --canvas-2:#1A1712;
  --panel:#1F1B16;
  --panel-2:#292419;
  --paper:#F7F4EF;
  --paper-2:#E9E5DE;
  --text-secondary:#A9A296;
  --text-on-paper:#14120F;
  --text-on-paper-2:#6B655C;
  --accent:#5B8CC8;            /* sh-blue-300: the accent on Ink planes (marks, rules, accent text) */
  --accent-deep:#1D4E89;       /* sh-blue-500 Preußisch: button fill, accent on Paper surfaces */
  --accent-hover:#163D6C;      /* sh-blue-600 */
  --accent-muted:rgba(91,140,200,.16);
  --accent-glow:rgba(91,140,200,.45);
  --accent-line:rgba(91,140,200,.5);
  --text-on-accent:#FFFFFF;
  --signal:#3D8BDB;            /* sh-signal-500: data and links only, never in the mark */
  --signal-dark:#3D8BDB;
  --line:rgba(233,229,222,.14);
  --line-strong:rgba(233,229,222,.44);
  --line-ink:rgba(20,18,15,.14);
  --line-ink-strong:rgba(20,18,15,.42);

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  --wrap:1200px;
  --gutter:clamp(20px,5vw,72px);
  --S:min(38vh,28vw);          /* the frame's side in the hero: holds the blue-lit cluster at dead center */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--paper);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden;overflow-x:clip;opacity:0;animation:page-in .9s var(--ease-out) forwards}
@keyframes page-in{to{opacity:1}}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--accent);color:var(--paper);padding:10px 14px;border-radius:4px;font-family:var(--mono);font-size:13px}
.skip:focus{top:12px}

.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.dim{color:var(--text-secondary)}
.accent-text{color:var(--accent)!important}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:820px}

/* ---------- type ---------- */
.h2{font-family:var(--display);font-stretch:118%;font-weight:800;letter-spacing:-.02em;line-height:.98;font-size:clamp(34px,4.6vw,66px);margin:.35em 0 .4em;max-width:22ch}
.h2.big{font-size:clamp(56px,9vw,132px);max-width:none}
h3{font-family:var(--display);font-stretch:110%;font-weight:700;letter-spacing:-.01em;font-size:clamp(20px,1.6vw,24px);line-height:1.15;margin:.2em 0 .35em}
h4{font-family:var(--display);font-stretch:110%;font-weight:700;font-size:15px;letter-spacing:.01em;margin:0 0 .35em}
.lede{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--text-secondary);max-width:58ch;margin:0 0 2.2rem}
.paper .lede{color:var(--text-on-paper-2)}
.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--accent);margin:0 0 .6rem}
.kicker .kb{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset 1s var(--ease-out) .2s}
.reveal.in .kicker .kb{stroke-dashoffset:0}
.kicker.right{color:var(--text-secondary);margin-left:auto}
.paper .kicker.right{color:var(--text-on-paper-2)}
.kicker-row{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.src{color:var(--text-secondary);margin:1.4rem 0 0;font-size:11px;letter-spacing:.1em;line-height:1.6}
.paper .src{color:var(--text-on-paper-2)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:3px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;border:1px solid transparent;transition:transform .5s var(--ease-out),background-color .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out),box-shadow .5s var(--ease-out);text-shadow:none;position:relative;isolation:isolate}
.btn-accent{background:var(--accent-deep);color:var(--text-on-accent);border-color:var(--accent)}
.btn-accent::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 10px 40px var(--accent-glow);opacity:0;transition:opacity .5s var(--ease-out);z-index:-1}
.btn-accent:hover{background:var(--accent-hover);border-color:var(--accent);transform:translateY(-1px)}
.btn-accent:hover::after{opacity:1}
.paper .btn-accent{border-color:var(--accent-deep)}
.paper .kicker{color:var(--accent-deep)}
.paper .accent-text{color:var(--accent-deep)!important}
.btn-ghost{border-color:var(--line-strong);color:var(--paper);background:rgba(20,18,15,.35)}
.btn-ghost:hover{border-color:var(--paper);transform:translateY(-1px)}
.paper .btn-ghost{color:var(--text-on-paper);border-color:var(--line-ink-strong);background:transparent}
.btn-nav{padding:10px 16px;border-color:var(--line-strong);color:var(--paper)}
.btn-nav:hover{border-color:var(--paper);transform:translateY(-1px)}
.btn-wide{width:100%}
@media (pointer:coarse){.btn{min-height:44px}}

/* ---------- environment layer ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-grid{position:absolute;inset:-10%;background-image:linear-gradient(rgba(233,229,222,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(233,229,222,.035) 1px,transparent 1px);background-size:96px 96px;animation:drift 120s linear infinite}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(96px,96px)}}
.env-grain{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px;mix-blend-mode:screen}
.env-dots i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:var(--paper-2);opacity:0;animation:blink var(--t) ease-in-out var(--d) infinite}
@keyframes blink{0%,100%{opacity:0}50%{opacity:.55}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:28px;padding:16px var(--gutter);background:linear-gradient(rgba(20,18,15,.82),rgba(20,18,15,0));transition:background .5s var(--ease-out)}
.nav.solid{background:rgba(20,18,15,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:12px}
.signet{width:28px;height:28px;flex:0 0 auto}
.signet path{fill:var(--paper)}
.signet path.accent,.signet .accent{fill:var(--accent)}
.wordmark{font-family:var(--display);font-weight:600;font-stretch:100%;letter-spacing:.1em;text-transform:uppercase;font-size:14px;margin:0}
.nav nav{display:flex;gap:22px;margin-left:auto}
.nav nav a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);padding:6px 0;position:relative;transition:color .35s var(--ease-out)}
.nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .45s var(--ease-out)}
.nav nav a:hover{color:var(--paper)}
.nav nav a:hover::after{right:0}
@media (max-width:900px){.nav nav{display:none}}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;height:500vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas)}
.poster{position:absolute;inset:0;background:var(--canvas) center/cover no-repeat}
#hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease-out);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero{opacity:1}
.stage.video-failed #hero{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}

/* the frame: four signet corners, scroll-driven */
.frame{position:absolute;z-index:3;left:calc(50% - var(--S)/2);top:calc(50% - var(--S)/2);width:var(--S);height:var(--S);pointer-events:none;--fb:0;--fbc:0}
.frame .corner{position:absolute;width:38%;height:38%;filter:drop-shadow(0 6px 30px rgba(5,5,10,.55))}
.frame .corner path{fill:var(--paper)}
.frame .corner.accent path{fill:var(--accent)}
/* the left brackets drop and rise along the frame's own edge, the right ones slide in from the right: none of them crosses the text column */
.frame .c-tl{left:0;top:0;transform:translate(0,calc((1 - var(--fb))*-70vh))}
.frame .c-tr{right:0;top:0;transform:translate(calc((1 - var(--fb))*70vw),0)}
.frame .c-bl{left:0;bottom:0;transform:translate(0,calc((1 - var(--fb))*70vh))}
.frame .c-br{right:0;bottom:0;transform:translate(calc((1 - var(--fbc))*70vw),0) scale(calc(1 + .18*var(--fbc)*(1 - var(--fbc))*4))}

/* bands */
.bands{position:absolute;inset:0;z-index:2;pointer-events:none}
.band{position:absolute;opacity:0;--k:0;text-shadow:var(--tshadow);pointer-events:none}
.band a{pointer-events:auto}
.band .btn{text-shadow:none}
/* the per-band scrim: a soft-edged panel that covers the whole text box at full depth, so the worst pixel under any glyph passes 3.5:1 */
.band::before{content:"";position:absolute;inset:-10% -8%;pointer-events:none;z-index:-1;border-radius:24px;opacity:calc(.3 + .7*var(--k,1));background:rgba(5,5,10,.78);filter:blur(34px)}
.band.b1::before{background:rgba(5,5,10,.82)}
.b1,.b2,.b3{left:6vw;top:50%;transform:translateY(-50%);width:min(34vw,34rem)}
.band h1,.band h2{font-family:var(--display);font-stretch:118%;font-weight:800;letter-spacing:-.02em;line-height:.98;margin:.5rem 0 .7rem}
.b1 h1{font-size:clamp(28px,3.3vw,50px);max-width:16ch}
.b2 h2{font-size:clamp(28px,3.3vw,50px);max-width:16ch}
.b3 h2{font-size:clamp(28px,3.3vw,50px);max-width:15ch}
.band .sub{font-size:clamp(15px,1.25vw,19px);line-height:1.5;color:var(--paper-2);max-width:40ch;margin:0;--ks:clamp(0,(var(--k,0) - .45)*3,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*10px))}
.chip{display:inline-block;background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);border-radius:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:6px 10px;text-shadow:0 1px 3px rgba(5,5,10,.85);color:var(--paper-2)}
.stac{list-style:none;margin:0;padding:0;font-family:var(--display);font-stretch:110%;font-weight:700;font-size:clamp(17px,1.5vw,23px);line-height:1.3;color:var(--paper-2)}
.stac li{--th:calc(.42 + var(--i,0)*.14);--kc:clamp(0,(var(--k,0) - var(--th))*3.2,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*-18px));padding:.15em 0}
.stac li::before{content:"";display:inline-block;width:.5em;height:2px;background:var(--accent);margin-right:.6em;vertical-align:middle}

/* split spans */
.stext .w{display:inline-block;white-space:pre}
.stext .c{display:inline-block}
/* (a) approach-from-depth, band 1 */
.band[data-fx="depth"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:scale(calc(.82 + .18*var(--kc)));transform-origin:50% 100%}
/* (b) grid snap-align, band 2 */
.band[data-fx="grid"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
/* corner-lock, band 3: words arrive from the four corners of their box */
.band[data-fx="corners"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))}
/* (e) word-by-word rise into a staged settle, band 4 */
.band[data-fx="rise"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*24px))}
.band[data-fx="rise"] .w.em{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks2:clamp(0,(var(--k,0) - var(--th,0) - .16)*2.6,1);color:var(--accent);transform:translateY(calc((1 - var(--kc))*24px)) scale(calc(.6 + .64*var(--kc) - .24*var(--ks2)))}
.band[data-fx="rise"] .sub{--ks:clamp(0,(var(--k,0) - .62)*4,1)}
.band[data-fx="rise"] .cta-row{--kb:clamp(0,(var(--k,0) - .76)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px))}
.band em{font-style:normal}

/* settle band: centered above and below the frame */
.b4{left:0;right:0;top:0;bottom:0;transform:none}
.b4::before{display:none}
.settle-top,.settle-bottom{position:absolute;left:50%;transform:translateX(-50%);width:min(92vw,1100px);text-align:center}
.settle-top{bottom:calc(50% + var(--S)/2 + 2.2vh)}
.settle-bottom{top:calc(50% + var(--S)/2 + 3vh)}
.settle-top::before,.settle-bottom::before{content:"";position:absolute;inset:-16% -6%;z-index:-1;pointer-events:none;border-radius:24px;opacity:calc(.55 + .45*var(--k,1));background:rgba(5,5,10,.84);filter:blur(34px)}
.b4 h2{font-size:clamp(30px,3.9vw,58px);max-width:none;margin:0}
.b4 .sub{max-width:52ch;margin:0 auto 1.4rem;font-size:clamp(15px,1.3vw,19px)}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.b1 .cta-row,.b2 .cta-row,.b3 .cta-row{justify-content:flex-start}

/* cue + ring */
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--paper-2);opacity:.85;transition:opacity .6s var(--ease-out)}
.cue.hidden{opacity:0}
.ring{width:34px;height:34px;transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .2s linear}
.chev{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (max-height:560px){.cue{display:none}}

/* static hero: hidden by default, shown at the five gates */
.static-hero{display:none}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{position:relative;z-index:1;padding:clamp(72px,10vw,140px) 0;background:var(--canvas)}
.sec.alt{background:var(--canvas-2)}
.sec.paper{background:var(--paper-2);color:var(--text-on-paper)}
.paper .h2,.paper h3{color:var(--text-on-paper)}
.sec + .sec{border-top:1px solid var(--line)}
.sec.paper,.sec.paper + .sec{border-top:0}

/* entrance choreography */
.reveal .part{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in .part{opacity:1;transform:none}
.reveal.in .part:nth-child(2){transition-delay:.09s}
.reveal.in .part:nth-child(3){transition-delay:.18s}
.reveal.in .part:nth-child(4){transition-delay:.27s}
.reveal.in .part:nth-child(5){transition-delay:.36s}
.reveal.in .part:nth-child(6){transition-delay:.45s}
.reveal.in .part:nth-child(7){transition-delay:.54s}
.reveal.in .part:nth-child(8){transition-delay:.63s}
.reveal.in .part:nth-child(9){transition-delay:.72s}
.reveal.in.done .part{transition-delay:0s!important}

/* 01 market: bracket-cornered tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:1rem}
.tile{position:relative;background:var(--panel);padding:28px 24px 22px;border:1px solid var(--line);min-height:300px;display:flex;flex-direction:column;transition:transform .6s var(--ease-out),border-color .6s var(--ease-out),background-color .6s var(--ease-out)}
.tile:hover{transform:translateY(-4px);border-color:var(--line-strong);background:var(--panel-2)}
.tile-corner{position:absolute;left:12px;top:12px;width:16px;height:16px;border-left:3px solid var(--paper);border-top:3px solid var(--paper)}
.tile-corner.accent{left:auto;right:12px;top:auto;bottom:12px;border:0;border-right:3px solid var(--accent);border-bottom:3px solid var(--accent)}
.reveal.in .tile-corner{animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
.num{font-family:var(--display);font-stretch:118%;font-weight:800;letter-spacing:-.03em;font-size:clamp(34px,3vw,48px);line-height:1;margin:1.4rem 0 auto;white-space:nowrap}
.tile-body{color:var(--text-secondary);margin:1.4rem 0 .8rem;font-size:15px;line-height:1.5}
.tile .src{margin:0;font-size:10px}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}.tile{min-height:0}.num{margin-top:.8rem}}

/* ticker */
.ticker{position:relative;z-index:1;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--canvas);padding:14px 0}
.track{display:flex;gap:0;white-space:nowrap;width:max-content;color:var(--text-secondary);will-change:transform}
.ticker.in .track{animation:marquee 60s linear infinite}
.track span{padding:0 28px;position:relative}
.track span::after{content:"·";position:absolute;right:-6px;color:var(--accent)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 02 routes table */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:1.5rem}
table{border-collapse:collapse;width:100%;min-width:820px;text-align:left}
.routes-table th,.routes-table td{padding:18px 16px;vertical-align:top;border-top:1px solid var(--line);font-size:15px;line-height:1.5}
.routes-table thead th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);font-weight:500;border-top:0;padding-top:0}
.routes-table tbody th{font-family:var(--display);font-stretch:110%;font-weight:700;font-size:17px;width:22%;position:relative;padding-left:22px}
.routes-table td.mono{text-transform:none;letter-spacing:.02em;font-size:13px;color:var(--paper-2)}
.routes-table td{color:var(--text-secondary)}
.routes-table tr.us{background:var(--accent-muted)}
.routes-table tr.us th,.routes-table tr.us td{color:var(--paper);border-top:1px solid var(--accent-line);border-bottom:1px solid var(--accent-line)}
.routes-table tr.us th{color:color-mix(in srgb,var(--accent) 88%,var(--paper))}
.us-mark{position:absolute;left:0;top:18px;bottom:18px;width:3px;background:var(--accent)}
.reveal.in .us-mark{animation:pulse-bar 8s ease-in-out infinite}
@keyframes pulse-bar{0%,100%{opacity:.55}50%{opacity:1}}

/* 03 how it works */
.how .wrap{position:relative}
.steps{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:22px;position:relative;z-index:1}
/* the loop line draws itself through the dots on enter (transform only) */
.steps::before{content:"";position:absolute;left:6px;right:6px;top:5px;height:2px;background:var(--line-strong);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.8s var(--ease-in-out) .2s}
.reveal.in .steps::before{transform:scaleX(1)}
.step{position:relative;padding-top:26px}
.step .dot{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 0 rgba(247,244,239,0)}
.step .dot.accent{background:var(--accent)}
.reveal.in .step.decide .dot{animation:glow 4.5s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(91,140,200,0)}50%{box-shadow:0 0 0 10px rgba(91,140,200,.22)}}
.step-num{font-family:var(--display);font-stretch:118%;font-weight:800;font-size:clamp(28px,2.6vw,40px);color:var(--text-secondary);letter-spacing:-.02em;margin:.3rem 0 .2rem;line-height:1}
.step p{color:var(--text-secondary);font-size:15px;margin:0 0 .8rem}
.step .when{color:var(--text-secondary);font-size:11px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}.steps::before{display:none}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* 04 report (paper) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 1.6rem}
.stat{background:var(--paper);border:1px solid var(--line-ink);padding:16px 18px 14px;position:relative}
.stat-label{color:var(--text-on-paper-2);font-size:10px;margin:0 0 .6rem}
.stat-num{font-size:clamp(28px,2.4vw,36px);letter-spacing:0;text-transform:none;font-weight:400;margin:0;line-height:1}
.stat.accent-rule::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent-deep)}
.spec th,.spec td{padding:14px 14px;border-top:1px solid var(--line-ink);font-size:14px;vertical-align:middle;color:var(--text-on-paper)}
.spec thead th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-on-paper-2);font-weight:500;border-top:0;padding-top:0}
.spec tbody th{font-family:var(--body);font-weight:500}
.spec td.mono{text-transform:none;letter-spacing:.02em;font-size:13px;color:var(--text-on-paper-2)}
.spec td.sig{text-transform:uppercase;letter-spacing:.1em;font-size:11px}
.spec td.sig.high{color:var(--accent-deep)}
.spec tr.row{background:var(--paper);transition:background-color .5s var(--ease-out)}
.spec tr.row:nth-child(even){background:transparent}
.spec tr.row.done{background:var(--accent-muted)}
.spec tr.row.done td.sig{color:var(--accent)}
.hold{position:relative;overflow:hidden;border:1px solid var(--line-ink-strong);border-radius:3px;padding:9px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-paper);white-space:nowrap;user-select:none;-webkit-user-select:none;touch-action:none;transition:border-color .35s var(--ease-out),color .35s var(--ease-out)}
.hold-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:0 50%;opacity:.9;z-index:0}
.hold-label{position:relative;z-index:1}
.hold:hover{border-color:var(--text-on-paper)}
.row.done .hold{border-color:var(--accent);color:var(--paper);pointer-events:none}
.row.done .hold-fill{transform:scaleX(1)}
.hint{color:var(--text-on-paper-2);margin:1.2rem 0 0;font-size:11px}
.hold-result{margin:.8rem 0 0;color:var(--text-on-paper);font-size:16px;min-height:1.6em;opacity:0;transform:translateY(6px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.hold-result.show{opacity:1;transform:none}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (pointer:coarse){.hold{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* 05 datenkern split */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.datenkern .h2{font-size:clamp(28px,2.9vw,42px);max-width:none}
.framed{position:relative;padding:8%;}
.framed img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;filter:saturate(.95)}
.framed .corner{position:absolute;width:20%;height:20%;filter:drop-shadow(0 6px 24px rgba(5,5,10,.5))}
.framed .corner path{fill:var(--paper)}
.framed .corner.accent path{fill:var(--accent)}
.framed .c-tl{left:0;top:0}.framed .c-tr{right:0;top:0}.framed .c-bl{left:0;bottom:0}.framed .c-br{right:0;bottom:0}
.core-list{list-style:none;margin:0 0 1.6rem;padding:0;border-top:1px solid var(--line)}
.core-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
.core-list .live{color:var(--signal-dark);font-size:10px;position:relative;padding-left:14px}
.core-list .live::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:currentColor}
.reveal.in .core-list .live::before{animation:blink-live 5s ease-in-out infinite}
.core-list li:nth-child(2) .live::before{animation-delay:-1.2s}
.core-list li:nth-child(3) .live::before{animation-delay:-2.4s}
.core-list li:nth-child(4) .live::before{animation-delay:-3.6s}
.core-list li:nth-child(5) .live::before{animation-delay:-4.8s}
@keyframes blink-live{0%,100%{opacity:.35}50%{opacity:1}}
.closing{color:var(--text-secondary);font-size:16px;line-height:1.55;max-width:52ch;margin:0}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* 06 packages */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:1.4rem;align-items:stretch}
.card{position:relative;background:var(--paper-2);color:var(--text-on-paper);padding:28px 26px 26px;border:1px solid var(--line-ink);display:flex;flex-direction:column;transition:transform .6s var(--ease-out)}
.card:hover{transform:translateY(-4px)}
.card.featured{background:var(--panel);color:var(--paper);border-color:var(--line)}
.card h3{font-size:clamp(22px,1.8vw,28px);margin:.2rem 0 1rem}
.tier{color:var(--text-on-paper-2);margin:0}
.featured .tier{color:var(--text-secondary)}
.tag{position:absolute;right:0;top:0;background:var(--accent);color:var(--paper);padding:6px 10px;font-size:10px}
.reveal.in .featured .tag{animation:tag-glow 5s ease-in-out infinite}
@keyframes tag-glow{0%,100%{box-shadow:0 0 0 rgba(91,140,200,0)}50%{box-shadow:0 8px 28px rgba(91,140,200,.45)}}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 1.2rem}
.amount{font-family:var(--display);font-stretch:118%;font-weight:800;letter-spacing:-.03em;font-size:clamp(40px,3.6vw,56px);line-height:1}
.per{color:var(--text-on-paper-2);font-size:10px;white-space:nowrap}
.featured .per{color:var(--text-secondary)}
.rows{margin:0 0 1.2rem;padding:0;border-top:1px solid var(--line-ink)}
.featured .rows{border-color:var(--line)}
.rows div{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line-ink);font-size:14px}
.featured .rows div{border-color:var(--line)}
.rows dt{margin:0;color:var(--text-on-paper-2)}
.featured .rows dt{color:var(--text-secondary)}
.rows dd{margin:0;text-transform:none;letter-spacing:.02em;font-size:13px}
.fit{color:var(--text-on-paper-2);font-size:14px;margin:0 0 1.4rem;flex:1}
.featured .fit{color:var(--text-secondary)}
.card .btn{align-self:stretch}
.card:not(.featured) .btn-ghost{color:var(--text-on-paper);border-color:var(--line-ink-strong);background:transparent}
.card:not(.featured) .btn-ghost:hover{border-color:var(--accent-deep);color:var(--accent-deep)}
.terms{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line)}
.term p{color:var(--text-secondary);font-size:14px;margin:0;line-height:1.5}
.addons{margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line)}
.addons .kicker{color:var(--text-secondary)}
.addon-list{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin:.6rem 0 1rem;padding:0}
.addon-list div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.addon-list dt{margin:0;color:var(--paper-2)}
.addon-list dd{margin:0;text-transform:none;letter-spacing:.02em;font-size:13px;color:var(--text-secondary);white-space:nowrap}
.pass{color:var(--text-secondary);font-size:14px;margin:0}
@media (max-width:1000px){.cards{grid-template-columns:1fr}.terms{grid-template-columns:repeat(2,1fr)}.addon-list{grid-template-columns:1fr}}

/* 07 compare bars */
.bars{margin-top:2rem;display:grid;gap:14px}
.bar{display:grid;grid-template-columns:200px 1fr 110px;align-items:center;gap:18px}
.bar-label{font-size:15px}
.bar-track{position:relative;height:30px;background:var(--panel)}
.bar-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v)/var(--max)*100%);background:var(--paper);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease-in-out)}
.reveal.in .bar-fill{transform:scaleX(1)}
.reveal.in .bar:nth-child(2) .bar-fill{transition-delay:.1s}
.reveal.in .bar:nth-child(3) .bar-fill{transition-delay:.2s}
.reveal.in .bar:nth-child(4) .bar-fill{transition-delay:.3s}
.reveal.in .bar:nth-child(5) .bar-fill{transition-delay:.4s}
.bar.accent .bar-fill{background:var(--accent)}
.bar.rep .bar-fill{background:var(--text-secondary)}
.bar.rep{margin-top:6px}
.bar.rep + .bar.rep{margin-top:0}
.bar-val{text-transform:none;letter-spacing:.02em;font-size:13px;text-align:right;color:var(--paper-2)}
@media (max-width:640px){.bar{grid-template-columns:1fr;gap:6px}.bar-val{text-align:left}}

/* 08 who */
.points{list-style:none;margin:1.6rem 0 2.6rem;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.points li{padding:16px 0 16px 26px;border-bottom:1px solid var(--line);position:relative;color:var(--text-secondary);font-size:16px}
.points li::before{content:"";position:absolute;left:0;top:22px;width:12px;height:12px;border-left:2px solid var(--paper);border-top:2px solid var(--paper)}
.points li:nth-child(4)::before{border-color:var(--accent)}
.pull{font-family:var(--display);font-stretch:118%;font-weight:800;letter-spacing:-.02em;font-size:clamp(24px,2.6vw,38px);line-height:1.1;margin:0 0 .6rem;position:relative;display:inline-block}
.pull::after{content:"";position:absolute;left:0;bottom:-8px;height:2px;width:80px;background:var(--accent)}
.reveal.in .pull::after{animation:slide-rule 7s ease-in-out infinite}
@keyframes slide-rule{0%,100%{width:80px}50%{width:160px}}
.cities{color:var(--text-secondary);margin:1.4rem 0 0}
@media (max-width:700px){.points{grid-template-columns:1fr}}

/* 09 first 90 days */
.weeks{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.week{border-top:1px solid var(--line-strong);padding-top:16px}
.week.decide{border-top-color:var(--accent)}
.week .when{color:var(--text-secondary);margin:0 0 .6rem}
.week p{color:var(--text-secondary);font-size:15px;margin:0}
@media (max-width:900px){.weeks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.weeks{grid-template-columns:1fr}}

/* 10 faq */
.qa{margin-top:1.4rem;border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font-family:var(--display);font-stretch:110%;font-weight:700;font-size:clamp(17px,1.4vw,20px);position:relative;transition:color .35s var(--ease-out)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .45s var(--ease-out)}
.qa details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.qa summary:hover{color:var(--accent)}
.qa p{margin:0 0 20px;color:var(--text-secondary);max-width:64ch;line-height:1.6}

/* 11 talk */
.talk .split{align-items:start}
.contact{font-style:normal;display:grid;gap:8px;color:var(--text-secondary);text-transform:none;letter-spacing:.03em;font-size:13px;margin-top:2rem}
.contact a:hover{color:var(--paper)}
.form{background:var(--panel);border:1px solid var(--line);padding:28px}
.field{display:grid;gap:8px;margin-bottom:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.field input,.field select,.field textarea{width:100%;background:var(--canvas);color:var(--paper);border:1px solid var(--line-strong);border-radius:3px;padding:12px 14px;font:inherit;font-size:15px;transition:border-color .35s var(--ease-out)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:rgba(169,162,150,.55)}
.field textarea{resize:vertical;min-height:110px}
.form-note{color:var(--text-secondary);font-size:10px;margin:12px 0 0;text-transform:none;letter-spacing:.04em;line-height:1.6}
.form-success{margin:16px 0 0;padding:14px;border:1px solid var(--accent-line);background:var(--accent-muted);font-size:15px;line-height:1.55}
.form-success a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.field.invalid input{border-color:var(--accent)}
@media (max-width:560px){.field-row{grid-template-columns:1fr}.form{padding:20px}}

/* footer */
.foot{position:relative;z-index:1;background:var(--canvas);border-top:1px solid var(--line);padding:56px 0 28px;color:var(--text-secondary);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1.4fr 1.2fr;gap:36px}
.foot-brand .wordmark{margin:14px 0 6px;color:var(--paper)}
.foot p{margin:0 0 .6rem;line-height:1.55}
.foot a{color:var(--paper-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.foot a:hover{text-decoration-color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.foot-bottom a{text-decoration:none}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ==========================================================================
   THE STATIC-HERO GATES (identical strings in main.js)
   ========================================================================== */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{height:auto;min-height:100vh;min-height:100svh}
  .stage{position:relative;height:auto;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end}
  .poster,#hero,.bands,.cue{display:none}
  .stage{background:var(--canvas) url("hero-ending.webp") center/cover no-repeat}
  .scrim{background:linear-gradient(rgba(20,18,15,.35),rgba(20,18,15,.88) 70%,var(--canvas))}
  .stage{--S:min(46vw,40vh)}
  .frame{--fb:1;--fbc:1;top:14vh;left:calc(50% - var(--S)/2)}
  .frame .corner{filter:none}
  .frame .c-br{transform:none}
  .static-hero{display:block;position:relative;z-index:2;width:100%;padding:calc(14vh + var(--S) + 28px) var(--gutter) 64px}
  .static-inner{max-width:720px}
  .static-hero h1,.static-hero .sh-h1{font-family:var(--display);font-stretch:118%;font-weight:800;letter-spacing:-.02em;line-height:.98;font-size:clamp(34px,8.6vw,64px);margin:.6rem 0 .8rem;text-shadow:var(--tshadow)}
  .static-hero .sub{color:var(--paper-2);font-size:clamp(15px,3.8vw,19px);max-width:44ch;margin:0 0 1.6rem;text-shadow:var(--tshadow)}
  .static-hero .cta-row{justify-content:flex-start}
}

/* ==========================================================================
   REDUCED MOTION: final states, no drives
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  body{opacity:1}
  .reveal .part{opacity:1;transform:none}
  .kicker .kb{stroke-dashoffset:0}
  .steps::before{transform:scaleX(1)}
  .bar-fill{transform:scaleX(1)}
  .ticker .track{animation:none}
  .band{opacity:1;--k:1}
  .hold-result{opacity:1;transform:none}
}

/* revision 12.10.2026: four-step loop, report recommendation, five plans */
.steps{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.spec td.rec{font-size:13px;color:var(--text-on-paper)}
.call{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-paper);cursor:pointer;white-space:nowrap}
.call input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;border:1px solid var(--line-ink-strong);border-radius:3px;background:transparent;display:grid;place-content:center;cursor:pointer}
.call input::before{content:"";width:10px;height:10px;background:var(--accent-deep);transform:scale(0);transition:transform .2s var(--ease-out)}
.call input:checked{border-color:var(--accent-deep)}
.call input:checked::before{transform:scale(1)}
.call input:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.spec tr.row:has(input:checked){background:var(--accent-muted)}
.cards-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.cards-5 .project .per{white-space:normal}
.cards-5 .card{padding:24px 18px 20px}
.cards-5{margin-top:2.6rem;grid-auto-flow:row}
.cards-5 .card{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:0;align-content:start}
.cards-5 .tag{top:auto;bottom:100%;right:-1px}
.cards-5 .tier{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cards-5 .price{align-content:flex-start}
.cards-5 .fit{align-self:start}
.cards-5 .btn{align-self:end}
.cards-5 .rows dt{white-space:nowrap}
.cards-5 h3{font-size:clamp(18px,1.45vw,21px);white-space:nowrap}
.cards-5 .rows dd{white-space:nowrap}
.cards-5 .tier{font-size:10px}
.cards-5 .amount.range{font-size:clamp(22px,1.7vw,27px);white-space:nowrap}
.cards-5 .amount{font-size:clamp(32px,2.5vw,40px)}
.cards-5 .price{margin-bottom:1rem}
.cards-5 .rows dt{font-size:13px}
.cards-5 .rows dd{font-size:12px;text-align:right}
.cards-5 .rows div{gap:10px}
.cards-5 .fit{font-size:13px}
.cards-5 .btn{padding-left:10px;padding-right:10px;font-size:11px}
.area-note{color:var(--text-secondary);font-size:11px;letter-spacing:.08em;line-height:1.6;margin:1.2rem 0 0}
@media (max-width:1240px){.cards-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){.cards-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards-5{grid-template-columns:1fr}}

/* year one: 1, 2 and 3 areas */
.bar{grid-template-columns:200px 1fr 250px}
.bar-fill.a2{width:calc(var(--v2)/var(--max)*100%);background:color-mix(in srgb,var(--paper) 72%,var(--panel))}
.bar-fill.a3{width:calc(var(--v3)/var(--max)*100%);background:color-mix(in srgb,var(--paper) 46%,var(--panel))}
.bar.accent .bar-fill.a2{background:color-mix(in srgb,var(--accent) 72%,var(--panel))}
.bar.accent .bar-fill.a3{background:color-mix(in srgb,var(--accent) 46%,var(--panel))}
.bar-val b{font-weight:500;color:var(--paper)}
.bar-val i{font-style:normal}
.bar-val .v2{color:color-mix(in srgb,var(--paper-2) 75%,transparent)}
.bar-val .v3{color:color-mix(in srgb,var(--paper-2) 55%,transparent)}
.bar-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:-1rem 0 0;padding:0;font-size:11px;letter-spacing:.08em;color:var(--text-secondary)}
.bar-legend li{display:flex;align-items:center;gap:8px}
.bar-legend .sw{width:22px;height:10px;display:inline-block}
.bar-legend .a1{background:var(--paper)}
.bar-legend .a2{background:color-mix(in srgb,var(--paper) 72%,var(--panel))}
.bar-legend .a3{background:color-mix(in srgb,var(--paper) 46%,var(--panel))}
@media (max-width:900px){.bar{grid-template-columns:150px 1fr 210px;gap:12px}.bar-val{font-size:11px}}
@media (max-width:640px){.bar{grid-template-columns:1fr;gap:6px}.bar-val{text-align:left;font-size:12px}}

/* review round: included line, ruler from-price */
.included{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:0 0 1.4rem;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.06em;line-height:1.6;color:var(--paper-2)}
.included span{color:var(--accent)}
.cards-5 .amount .from{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin-right:6px;vertical-align:middle}

/* UX round 12.10.2026: self-hosted fonts, readable sizes, first-screen CTA, form, report feedback */
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-ext-standard-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-standard-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.b1 .cta-row{margin-top:1.5rem}
.band.off a{pointer-events:none;visibility:hidden}
/* readable floor: 12px for every label, note and figure */
.src,.tile .src,.routes-table thead th,.step .when,.stat-label,.spec thead th,.spec td.sig,.hint,.core-list .live,.tag,.per,.field label,.form-note,.call,.area-note,.bar-legend,.included,.cards-5 .amount .from{font-size:12px}
.bar-val{font-size:12px}
.cards-5 .tier{font-size:12px;letter-spacing:.05em}
.cards-5 .per{white-space:normal;letter-spacing:.06em}
.cards-5 .btn{font-size:12px;letter-spacing:.08em}
.call-result{margin:.8rem 0 0;color:var(--text-on-paper);font-size:15px;min-height:1.5em}
@media (max-width:900px){.bar-val{font-size:12px}}

/* sources: quiet, but clearly clickable */
.tile .src a{color:inherit;text-decoration:underline;text-decoration-color:rgba(247,244,239,.35);text-underline-offset:3px}
.tile .src a:hover{color:var(--paper);text-decoration-color:var(--accent)}
/* plans on phones: one row, swipeable, rows stay aligned */
.swipe-hint{display:none;color:var(--text-secondary);font-size:12px;margin:0 0 .8rem}
@media (max-width:760px){
  .swipe-hint{display:block}
  .cards-5{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding:2px var(--gutter) 14px;scroll-padding-left:var(--gutter);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .cards-5 .card{scroll-snap-align:start}
  .cards-5 .card:hover{transform:none}
}

/* Stand 16.10.2026: Gebietspreise in den Plankarten, sechs Konditionen, Plattform und Vision im Who-Abschnitt */
.price .areas{flex-basis:100%;color:var(--text-on-paper-2);font-size:12px;letter-spacing:.04em;line-height:1.5;white-space:normal;text-transform:none}
.featured .price .areas{color:var(--text-secondary)}
.price .areas span{display:block}
.cards-5 .card{grid-template-columns:minmax(0,1fr)}
.cards-5 .amount{font-size:32px}
@media (min-width:1241px){.cards-5 .amount{font-size:30px}}
.cards-5 .amount .from{letter-spacing:.06em;margin-right:5px}
.terms{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.terms{grid-template-columns:repeat(2,1fr)}}
.points li strong{color:var(--paper);font-weight:500}
.vision{color:var(--paper-2);font-size:clamp(16px,1.2vw,19px);line-height:1.5;margin:2.4rem 0 0;max-width:60ch}
.vision .mono{display:block;color:var(--text-secondary);margin:0 0 .5rem}