/* ==========================================================================
   Share2Flow — Design-System v8
   Quelle: _preview/homepage_v8.html (freigegeben), 1:1 übernommen.

   WICHTIG
   - Diese Datei wird NUR von der Homepage geladen (views/page-homepage.ejs).
   - style.css, home.css und Bootstrap werden dort NICHT eingebunden,
     damit es keine Kollisionen gibt.
   - Andere Seiten (Blog, Tools, Use-Cases, Pricing) sind davon unberührt.

   Typo-Regeln des Projekts: 16px-Floor, clamp() in px, Leerzeichen um + und -.
   ========================================================================== */

/* ==========================================================================
   SCHRIFTEN — lokal ausgeliefert
   Kein Aufruf von fonts.googleapis.com, damit beim Seitenaufruf keine
   IP-Adresse an Google übertragen wird (vgl. LG München, Az. 3 O 17493/20).
   Dateien erwartet unter: public/assets/fonts/
   font-display:swap → Text ist sofort lesbar, auch bevor die Schrift geladen ist.
   ========================================================================== */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/poppins-700.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/poppins-800.woff2') format('woff2')}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/libre-caslon-text-400-italic.woff2') format('woff2')}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/libre-caslon-text-400.woff2') format('woff2')}

@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  --paper:#F4F7FF;--paper-2:#E6EDFF;--white:#fff;--ink:#0B192F;--ink-2:#131C3D;
  --text:#48546C;--muted:#8790A6;--line:rgba(11,25,47,.13);--line-dark:rgba(255,255,255,.14);
  --blue:#3B5BDB;--cyan:#6B9AEB;--amber:#F9D149;--coral:#EF7A6B;--mint:#4FC38C;
  --max:1320px;--ease:cubic-bezier(.16,1,.3,1);--state:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);scroll-padding-top:96px}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:Poppins,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.menu-open{overflow:hidden}
/* Der Shell-Spacer (aus s2f-shell.css, 98px) ist nur für die Bootstrap-Seiten nötig,
   wo der Inhalt im Fluss liegt. Die v8-Homepage lässt den fixen Header bewusst ÜBER
   dem Hero schweben (Hero hat padding-top:130px) — der Spacer erzeugt sonst einen
   grauen Balken zwischen Header und Hero. Nur hier (Homepage) ausblenden. */
.s2f-shell-spacer{display:none}
img{display:block;max-width:100%}
svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
::selection{background:var(--blue);color:white}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;box-shadow:0 0 0 6px rgba(255,255,255,.96)}
.skip{position:fixed;z-index:999;left:16px;top:12px;padding:10px 16px;border-radius:10px;background:var(--ink);color:white;transform:translateY(-160%);transition:transform .2s}
.skip:focus{transform:none}
.wrap{position:relative;width:min(calc(100% - 48px),var(--max));margin-inline:auto}
.serif{font-family:"Libre Caslon Text",Georgia,serif;font-style:italic;font-weight:400}
.kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.kicker::before{content:"";width:20px;height:1px;background:currentColor}
.display{margin:0;font-size:clamp(40px,5.2vw,76px);font-weight:700;letter-spacing:-.062em;line-height:.94;text-wrap:balance}
.section-title{margin:0;font-size:clamp(38px,5vw,74px);font-weight:700;letter-spacing:-.052em;line-height:.98;text-wrap:balance}
.lead{margin:0;color:var(--text);font-size:clamp(17px,1.55vw,21px);line-height:1.65;text-wrap:pretty}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 20px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase}
.eyebrow b{display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--line);border-radius:50%;color:var(--ink);font-size:10px}
.section{position:relative;padding:clamp(96px,11vw,170px) 0}
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:52px;padding:14px 22px;border:1px solid transparent;border-radius:999px;font-size:15px;font-weight:700;cursor:pointer;overflow:hidden;transition:transform .22s var(--ease),box-shadow .3s var(--ease),border-color .3s,color .3s,background .3s}
.btn::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.3),transparent 72%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover::before{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--primary{background:var(--blue);color:white;box-shadow:0 15px 38px rgba(59,91,219,.28)}
.btn--primary:hover{box-shadow:0 20px 50px rgba(59,91,219,.36)}
.btn--ghost{border-color:var(--line);background:rgba(255,255,255,.62);color:var(--ink)}
.btn--light{background:white;color:var(--ink)}
.btn__arrow{font-size:20px;line-height:1;transition:transform .3s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.reveal{opacity:1;transform:none}
.reveal-ready .reveal{opacity:0;transform:translateY(24px)}
.reveal-ready .reveal.is-in{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}
.motion-pending .hero-enter,.motion-pending .metric{opacity:0!important}
.motion-pending .hero-enter{transform:translateY(24px)}
.progress{position:fixed;z-index:190;top:0;left:0;width:100%;height:2px;pointer-events:none}
.progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--amber));transform:scaleX(0);transform-origin:left}

/* navigation */
.nav-shell{position:fixed;z-index:180;top:16px;left:0;right:0;padding-inline:18px;pointer-events:none}
.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;width:min(100%,1380px);height:70px;margin:auto;padding:0 10px 0 18px;border:1px solid rgba(11,25,47,.1);border-radius:20px;background:rgba(247,249,255,.9);box-shadow:0 14px 44px rgba(11,25,47,.07);pointer-events:auto;transition:height .3s var(--ease),box-shadow .3s,background .3s}
.nav.is-scrolled{height:60px;background:rgba(247,249,255,.96);box-shadow:0 18px 50px rgba(11,25,47,.11)}
.brand{display:inline-flex;align-items:center;gap:11px;font-size:17px;font-weight:800;letter-spacing:-.035em;white-space:nowrap}
.brand__mark{position:relative;width:30px;height:30px;border:1px solid var(--ink);border-radius:50%}
.brand__mark::before,.brand__mark::after{content:"";position:absolute;border-radius:50%}
.brand__mark::before{width:8px;height:8px;left:5px;top:10px;background:var(--blue);box-shadow:12px -5px 0 var(--amber),12px 6px 0 var(--coral)}
.brand__mark::after{inset:7px;border:1px solid rgba(11,25,47,.25)}
.brand em{color:var(--blue);font-style:normal}
.brand img{height:34px;width:auto;display:block}
.brand--foot img{height:32px;filter:brightness(0) invert(1)}
.nav__links{display:flex;align-items:center;gap:2px}
.nav__links a{padding:11px 13px;border-radius:999px;color:var(--text);font-size:16px;font-weight:600;transition:background .2s,color .2s}
.nav__links a:hover,.nav__links a:focus-visible{background:white;color:var(--ink)}
.nav__actions{display:flex;align-items:center;gap:8px}
.nav__login{padding:10px 13px;font-size:14px;font-weight:700}
.nav .btn{min-height:46px;padding:11px 20px;font-size:15px}
/* --- Untermenüs --- */
.nav-item{position:relative}
.nav-item>a{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.nav-item .cav{width:13px;height:13px;opacity:.6;transition:transform .25s var(--ease)}
.nav-item:hover .cav{transform:rotate(180deg)}
.dropdown{position:absolute;top:100%;left:50%;min-width:252px;padding-top:14px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown__panel{padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(247,249,255,.98);box-shadow:0 24px 60px rgba(11,25,47,.16)}
.dropdown a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;color:var(--text);font-size:16px;font-weight:600;white-space:nowrap;transition:background .2s,color .2s}
.dropdown a:hover{background:white;color:var(--ink)}
.dropdown a i{width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0}
.menu-btn{display:none;position:relative;width:46px;height:46px;border:0;border-radius:14px;background:var(--ink);color:white;cursor:pointer}
.menu-btn span{position:absolute;left:13px;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease),opacity .2s}
.menu-btn span:first-child{top:18px}.menu-btn span:last-child{top:26px}
.menu-btn[aria-expanded="true"] span:first-child{top:22px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{top:22px;transform:rotate(-45deg)}
.menu-panel{position:fixed;z-index:175;inset:0;display:grid;align-content:center;padding:110px 28px 40px;background:var(--ink);color:white;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.menu-panel.is-open{opacity:1;visibility:visible;transform:none}
.menu-panel nav{display:flex;flex-direction:column;gap:4px}
.menu-panel nav a{padding:11px 0;border-bottom:1px solid var(--line-dark);font-size:clamp(28px,9vw,48px);font-weight:600;letter-spacing:-.04em}
.menu-panel .btn{margin-top:28px;width:100%}

/* hero */
.hero{position:relative;min-height:100svh;padding:104px 0 44px;background:radial-gradient(80% 65% at 70% 16%,rgba(107,154,235,.23),transparent 60%),linear-gradient(180deg,#FFFFFF 0%,var(--paper) 70%);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(11,25,47,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,25,47,.045) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,#000,transparent 78%)}
.hero__orbit{position:absolute;width:780px;height:780px;right:-230px;top:-300px;border:1px solid rgba(59,91,219,.15);border-radius:50%}
.hero__orbit::before,.hero__orbit::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(59,91,219,.12)}
.hero__orbit::before{inset:80px}.hero__orbit::after{inset:172px}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(38px,6vw,86px);align-items:center;min-height:calc(100svh - 150px)}
.hero__copy{max-width:650px}
.hero__status{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;padding:8px 12px 8px 9px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.68);color:var(--text);font-size:12px;font-weight:700}
.hero__status i{width:9px;height:9px;border:2px solid white;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(79,195,140,.28)}
.hero h1 .accent{display:block;color:var(--blue);font-family:"Libre Caslon Text",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.045em}
.hero__sub{max-width:600px;margin:20px 0 26px;color:var(--text);font-size:clamp(17px,1.4vw,20px);line-height:1.55}
.hero__actions{display:flex;flex-wrap:wrap;gap:11px}
.hero__micro{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0;list-style:none}
.hero__micro li{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:600}
.hero__micro svg{width:15px;height:15px;color:var(--blue)}
.product-theatre{position:relative;perspective:1200px}
.product-theatre::before{content:"";position:absolute;inset:7% -5% -8%;border-radius:44px;background:radial-gradient(circle at 55% 35%,rgba(59,91,219,.28),rgba(107,154,235,.15) 38%,transparent 70%);filter:blur(28px);opacity:.65}
.product-card{position:relative;border:1px solid rgba(255,255,255,.62);border-radius:25px;background:rgba(255,255,255,.78);box-shadow:0 45px 110px rgba(11,25,47,.2),0 1px 0 white inset;transform:rotateY(-2deg) rotateX(1.5deg);transform-style:preserve-3d;overflow:hidden;transition:transform .32s var(--ease)}
.product-card.is-tilting{transition:none}
.product-card__bar{display:flex;align-items:center;gap:7px;height:50px;padding:0 16px;border-bottom:1px solid var(--line);background:rgba(250,250,248,.88)}
.product-card__bar i{width:8px;height:8px;border-radius:50%;background:#cfd2d8}.product-card__bar i:first-child{background:var(--coral)}.product-card__bar i:nth-child(2){background:var(--amber)}.product-card__bar i:nth-child(3){background:var(--mint)}
.product-card__url{margin-left:8px;padding:5px 15px;border-radius:7px;background:var(--paper-2);color:var(--muted);font:600 10px/1.4 Poppins,sans-serif}
.product-card__live{display:flex;align-items:center;gap:6px;margin-left:auto;color:#2F8F63;font-size:10px;font-weight:700}
.product-card__live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}
/* --- Hero-Video mit Zwei-Klick-Consent ---
   Vor dem Klick geht KEINE Anfrage an Google: Das Vorschaubild kommt aus Strapi,
   das iframe wird erst im Click-Handler erzeugt (s2f-v8.js).
   Muster übernommen von Share2Create (Pattern 9), aber mit eigenem Thumbnail
   statt i.ytimg.com — dort schützt ein globales Consent-Tool, hier nicht. */
.hero-video{position:relative;aspect-ratio:16/9;background:#0B192F;overflow:hidden}
.hero-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-lite{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#0B192F;cursor:pointer;overflow:hidden}
.yt-lite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .4s ease}
.yt-lite:hover img{transform:scale(1.03);filter:brightness(.88)}
.yt-lite::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,25,47,.1) 0%,rgba(11,25,47,.55) 100%)}
.yt-lite__play{position:absolute;z-index:2;left:50%;top:50%;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--blue);color:#fff;box-shadow:0 18px 44px rgba(11,25,47,.4),0 0 0 0 rgba(59,91,219,.5);transform:translate(-50%,-50%);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.yt-lite__play svg{width:26px;height:26px;margin-left:4px;fill:currentColor}
.yt-lite:hover .yt-lite__play{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 22px 54px rgba(11,25,47,.5),0 0 0 14px rgba(59,91,219,.16)}
.yt-lite__note{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:14px 18px;color:rgba(255,255,255,.92);font-size:16px;font-weight:600;line-height:1.45;text-align:left}
.yt-lite__note b{display:block;font-size:16px}
@media(max-width:820px){
  .yt-lite__play{width:62px;height:62px}.yt-lite__play svg{width:21px;height:21px}
  .yt-lite__note{padding:11px 13px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .yt-lite img,.yt-lite:hover img{transform:none;transition:none}
  .yt-lite:hover .yt-lite__play{transform:translate(-50%,-50%)}
}
.metric{position:absolute;z-index:5;padding:12px 14px;border:1px solid rgba(255,255,255,.8);border-radius:14px;background:rgba(11,25,47,.94);color:white;box-shadow:0 20px 50px rgba(11,25,47,.25);transform:translateZ(36px)}
.metric small{display:block;color:rgba(255,255,255,.58);font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.metric strong{display:block;margin-top:2px;font:400 25px/1 "Libre Caslon Text",Georgia,serif;font-style:italic}.metric--one{top:12%;right:-20px}.metric--two{bottom:8%;left:-24px;background:var(--blue)}
.hero__hint{position:absolute;z-index:3;left:50%;bottom:24px;display:flex;align-items:center;gap:9px;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;transform:translateX(-50%)}
.hero__hint::before{content:"";width:26px;height:1px;background:currentColor}

/* proof rail */
.proof{position:relative;z-index:3;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#F7F9FF}
.proof__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.proof__item{padding:28px clamp(18px,3vw,44px);border-left:1px solid var(--line)}
.proof__item:first-child{border-left:0}
.proof__item strong{display:block;font:400 clamp(24px,2.5vw,42px)/1.08 "Libre Caslon Text",Georgia,serif;font-style:italic;letter-spacing:-.04em}.proof__item span{display:block;margin-top:7px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* friction story */
.friction{position:relative;min-height:220vh;background:var(--ink);color:white}
.friction__sticky{position:sticky;top:0;display:grid;align-items:center;min-height:100svh;padding:96px 0;overflow:hidden}
.friction__sticky::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 65% at 65% 50%,rgba(59,91,219,.24),transparent 68%),linear-gradient(110deg,transparent 0 55%,rgba(255,255,255,.025) 55% 56%,transparent 56%);background-size:auto,44px 44px}
.friction__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;align-items:center}
.friction__copy{position:relative;z-index:4}
.friction .kicker{color:var(--cyan)}
.friction__copy .lead{margin-top:28px;color:rgba(255,255,255,.62)}
.friction h2{margin:0;font-size:clamp(46px,6.5vw,96px);font-weight:600;letter-spacing:-.06em;line-height:.95}
.friction h2 .serif{color:var(--amber)}
.friction__stage{position:relative;min-height:560px}
.chaos,.flow-state{position:absolute;inset:0;border:1px solid var(--line-dark);border-radius:28px;overflow:hidden;background:#0C1330;box-shadow:0 40px 100px rgba(0,0,0,.35)}
.chaos{filter:saturate(.2);opacity:.55}
.flow-state{clip-path:none}
.state-label{position:absolute;z-index:8;top:18px;left:18px;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line-dark);border-radius:999px;background:rgba(11,25,47,.72);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.state-label i{width:7px;height:7px;border-radius:50%;background:var(--coral)}.flow-state .state-label i{background:var(--mint)}
.map{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:36px 36px}
.map svg{position:absolute;inset:8%;width:84%;height:84%}.map path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2}.chaos .map path{stroke-dasharray:7 9}.flow-state .map .route{stroke:url(#routeGradient);stroke-width:5}.map circle{fill:#16224A;stroke:rgba(255,255,255,.45);stroke-width:2}.map circle.blocked{fill:var(--coral);stroke:white}.flow-state .map circle.done{fill:var(--mint);stroke:white}
.story-card{position:absolute;padding:13px 16px;border:1px solid var(--line-dark);border-radius:13px;background:#16224A;box-shadow:0 16px 36px rgba(0,0,0,.24);font-size:10px;font-weight:700}.story-card small{display:block;margin-top:4px;color:rgba(255,255,255,.5);font-size:8px}.sc1{top:23%;left:8%}.sc2{top:43%;left:43%}.sc3{right:8%;bottom:19%}.flow-state .story-card{background:#141F42}.flow-state .sc2{border-color:rgba(79,195,140,.55)}
.friction__progress{position:absolute;left:0;bottom:0;width:100%;height:3px;background:rgba(255,255,255,.1)}.friction__progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--coral),var(--amber),var(--mint));transform:scaleX(0);transform-origin:left}

/* product explorer */
.explorer{background:var(--paper)}
.explorer__head{display:grid;grid-template-columns:1.05fr .55fr;gap:6vw;align-items:end;margin-bottom:64px}
.explorer__head .lead{max-width:450px;justify-self:end}
.explorer__shell{display:grid;grid-template-columns:270px 1fr;min-height:650px;border:1px solid var(--line);border-radius:28px;background:white;box-shadow:0 34px 90px rgba(11,25,47,.1);overflow:hidden}
.explorer__tabs{position:relative;z-index:3;padding:18px;border-right:1px solid var(--line);background:#EDF2FF}
.explorer__tabs p{margin:5px 9px 18px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.tab{display:grid;grid-template-columns:35px 1fr;gap:12px;width:100%;padding:15px 10px;border:0;border-radius:14px;background:transparent;color:var(--muted);text-align:left;cursor:pointer;transition:background .3s,color .3s,transform .3s var(--ease)}
.tab:hover{transform:translateX(3px)}
.tab[aria-selected="true"]{background:white;color:var(--ink);box-shadow:0 10px 24px rgba(11,25,47,.07)}
.tab__no{display:grid;place-items:center;width:35px;height:35px;border:1px solid var(--line);border-radius:10px;font-family:"Libre Caslon Text",Georgia,serif;font-style:italic}
.tab[aria-selected="true"] .tab__no{border-color:var(--blue);background:var(--blue);color:white}
.tab b{display:block;margin-bottom:4px;font-size:13px}.tab small{display:block;color:inherit;font-size:9px;line-height:1.45;opacity:.7}
.explorer__canvas{position:relative;padding:34px 34px 30px;background:radial-gradient(80% 55% at 60% 0,rgba(107,154,235,.18),transparent 70%),#F7F9FF;overflow:hidden}
.explorer__meta{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;margin-bottom:24px}
.explorer__meta span{color:var(--blue);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.explorer__meta h3{margin:7px 0 0;font-size:clamp(24px,3vw,38px);letter-spacing:-.04em;line-height:1.04}.explorer__metric{text-align:right}.explorer__metric strong{display:block;font:400 clamp(30px,3vw,46px)/1 "Libre Caslon Text",Georgia,serif;font-style:italic;color:var(--blue)}.explorer__metric small{color:var(--muted);font-size:9px;font-weight:700}
.screen{position:relative;border:1px solid rgba(11,25,47,.16);border-radius:15px;background:white;box-shadow:0 26px 60px rgba(11,25,47,.16);overflow:hidden}.screen__bar{display:flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-bottom:1px solid var(--line);background:#F2F5FD}.screen__bar i{width:7px;height:7px;border-radius:50%;background:#d1d4dc}.screen__bar span{margin-left:8px;color:var(--muted);font-size:8px;font-weight:600}.screen__viewport{position:relative;aspect-ratio:16/8.7;background:#EDF2FF;overflow:hidden}.screen__viewport img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;pointer-events:none;transform:scale(1.012);transition:opacity .32s var(--state),transform .42s var(--ease)}
.screen__viewport img.is-active{opacity:1;transform:none}
.screen__fallback{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;color:var(--muted);background:linear-gradient(135deg,#edf2ff,#fff)}.screen__fallback b{display:block;color:var(--ink);font-size:18px}.screen__fallback small{display:block;margin-top:8px}

/* value bento */
.value{background:var(--ink);color:white;overflow:hidden}
.value::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle at 72% 40%,#000,transparent 70%)}
.value__head{display:grid;grid-template-columns:1fr .55fr;gap:6vw;align-items:end;margin-bottom:60px}.value .kicker{color:var(--cyan)}.value__head .lead{max-width:440px;justify-self:end;color:rgba(255,255,255,.62)}
.value .section-title .serif{color:var(--amber)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bento-card{--acc:var(--blue);position:relative;min-height:310px;padding:32px;border:1px solid rgba(11,25,47,.07);border-radius:22px;background:linear-gradient(180deg,#fff,#F6F9FF);color:var(--ink);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.28);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.bento-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--acc),transparent 72%);z-index:4}
.bento-card:hover{transform:translateY(-5px);box-shadow:0 36px 84px rgba(0,0,0,.34),0 0 46px color-mix(in srgb,var(--acc) 30%,transparent)}
.bento-card.has-visual{padding-bottom:118px}
.bento-card:has(.dot--amber){--acc:var(--amber)}
.bento-card:has(.dot--mint){--acc:var(--mint)}
.bento-card:has(.dot--coral){--acc:var(--coral)}
.bento-card--wide{grid-column:span 7}.bento-card--narrow{grid-column:span 5}.bento-card--third{grid-column:span 4}
.bento-card__no{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.bento-card__no i{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 22%,transparent)}
.bento-card__no .dot--amber{background:var(--amber);box-shadow:0 0 0 4px rgba(249,209,73,.24)}.bento-card__no .dot--mint{background:var(--mint);box-shadow:0 0 0 4px rgba(79,195,140,.22)}.bento-card__no .dot--coral{background:var(--coral);box-shadow:0 0 0 4px rgba(239,122,107,.22)}
.bento-card h3{max-width:520px;margin:40px 0 12px;font-size:clamp(25px,3vw,38px);line-height:1.06;letter-spacing:-.045em;color:var(--ink)}.bento-card p{max-width:520px;margin:0;color:var(--text);font-size:14.5px;line-height:1.7}
.bento-card__visual{position:absolute;right:22px;bottom:22px}
.mini-users{display:flex;align-items:center}.mini-users span{display:grid;place-items:center;width:49px;height:49px;margin-left:-9px;border:3px solid #fff;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-weight:800;box-shadow:0 8px 20px rgba(11,25,47,.14)}.mini-users span:nth-child(2){background:var(--coral)}.mini-users span:nth-child(3){background:var(--amber);color:var(--ink)}.mini-users span:nth-child(4){background:var(--mint);color:var(--ink)}
.mini-meter{width:170px}.mini-meter b{display:flex;justify-content:space-between;margin-bottom:8px;font-size:10px;font-weight:700;color:var(--muted)}.mini-meter div{height:8px;border-radius:8px;background:rgba(11,25,47,.09);overflow:hidden}.mini-meter i{display:block;width:74%;height:100%;background:linear-gradient(90deg,var(--coral),var(--amber),var(--mint));transform-origin:left}
.mini-flow{display:grid;grid-template-columns:repeat(3,34px);gap:20px}.mini-flow span{position:relative;width:34px;height:34px;border:1px solid rgba(11,25,47,.12);border-radius:10px;background:#EEF3FF}.mini-flow span+span::before{content:"";position:absolute;right:100%;top:50%;width:21px;height:2px;background:var(--cyan)}.mini-flow span:last-child{border-color:var(--mint);box-shadow:0 0 0 3px rgba(79,195,140,.18)}

/* journey */
.journey{background:#F7F9FF}
.journey__head{max-width:850px;margin-bottom:70px}
.journey__grid{display:grid;grid-template-columns:.74fr 1.26fr;gap:7vw;align-items:start}
.journey__steps{position:relative}
.journey-step{min-height:58vh;padding:16vh 0 50px;border-bottom:1px solid var(--line);opacity:1;transition:opacity .45s}
.journey-ready .journey-step{opacity:.34}.journey-step:first-child{padding-top:9vh}.journey-step.is-active{opacity:1}
.journey-step__no{display:flex;align-items:center;gap:10px;color:var(--blue);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.journey-step__no::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px rgba(59,91,219,.12)}
.journey-step h3{margin:22px 0 12px;font-size:clamp(27px,3.5vw,46px);letter-spacing:-.045em;line-height:1.02}.journey-step p{max-width:480px;margin:0;color:var(--muted);font-size:15px;line-height:1.7}
.journey__visual{position:sticky;top:16vh}
.journey__frame{position:relative;padding:13px;border:1px solid var(--line);border-radius:24px;background:white;box-shadow:0 32px 80px rgba(11,25,47,.13)}
.journey__frame::before{content:"";position:absolute;inset:-8%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(59,91,219,.18),transparent 67%);filter:blur(24px)}
.journey__images{position:relative;aspect-ratio:16/9;border-radius:13px;background:#EDF2FF;overflow:hidden}.journey__images::before,.journey__mobile-shot::before{content:"Produktvorschau nicht verfügbar";position:absolute;inset:0;display:grid;place-items:center;padding:20px;color:var(--muted);font-size:11px;font-weight:700;text-align:center}.journey__images img{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.018);transition:opacity .42s var(--state),transform .65s var(--ease)}.journey__images img.is-active{opacity:1;transform:none}
.journey__bar{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:10px}.journey__bar i{height:4px;border-radius:4px;background:var(--paper-2);overflow:hidden}.journey__bar i::after{content:"";display:block;width:100%;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--state)}.journey__bar i.is-active::after{transform:scaleX(1)}
.journey__mobile-shot{display:none}

/* testimonial + close */
.voices{background:var(--paper)}
.voices__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:60px}
.quote{position:relative;padding:clamp(34px,5vw,68px);border:1px solid var(--line);border-radius:24px;background:white;overflow:hidden}.quote::before{content:"“";position:absolute;right:25px;top:-32px;color:var(--paper-2);font:400 180px/1 "Libre Caslon Text",Georgia,serif}.quote blockquote{position:relative;margin:0;font:400 clamp(25px,3vw,42px)/1.36 "Libre Caslon Text",Georgia,serif;letter-spacing:-.025em}.quote__person{display:flex;align-items:center;gap:13px;margin-top:35px}.quote__avatar{position:relative;width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--paper-2);flex-shrink:0;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(59,91,219,.28)}.quote__avatar img{width:100%;height:100%;object-fit:cover}
.voice-card__who{display:flex;align-items:center;gap:12px;margin-top:22px}.voice-card__who img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.3);flex-shrink:0}.voice-card__who span{margin-top:0}.quote__person b{display:block;font-size:13px}.quote__person small{display:block;margin-top:3px;color:var(--muted);font-size:10px}
.voice-stack{display:grid;gap:16px}.voice-card{padding:30px;border:1px solid var(--line);border-radius:24px;background:var(--ink);color:white}.voice-card:nth-child(2){background:var(--blue)}.voice-card p{margin:0;font:400 clamp(18px,2vw,25px)/1.5 "Libre Caslon Text",Georgia,serif}.voice-card span{display:block;margin-top:22px;color:rgba(255,255,255,.72);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.voice-card:nth-child(2) span{color:rgba(255,255,255,.92)}
.final{position:relative;padding:clamp(110px,14vw,210px) 0;background:var(--blue);color:white;text-align:center;overflow:hidden}.final::before,.final::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.2);border-radius:50%}.final::before{width:780px;height:780px;left:-390px;top:-340px}.final::after{width:620px;height:620px;right:-290px;bottom:-360px}.final__inner{position:relative;z-index:2;max-width:980px;margin:auto}.final .kicker{justify-content:center;color:rgba(255,255,255,.9)}.final h2{margin:0;font-size:clamp(48px,7.5vw,108px);font-weight:600;letter-spacing:-.065em;line-height:.91}.final h2 .serif{color:var(--amber)}.final p{max-width:600px;margin:28px auto 34px;color:rgba(255,255,255,.9);font-size:17px;line-height:1.7}.final__micro{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 22px;margin-top:22px;color:rgba(255,255,255,.9);font-size:11px;font-weight:700}.final__micro span::before{content:"✓";margin-right:6px;color:var(--amber)}
.footer{padding:70px 0 26px;background:var(--ink);color:white}.footer__grid{display:grid;grid-template-columns:1.6fr repeat(3,.7fr);gap:50px}.footer__brand p{max-width:390px;margin:18px 0 0;color:rgba(255,255,255,.7);font-size:13px;line-height:1.7}.footer h3{margin:5px 0 18px;color:rgba(255,255,255,.62);font-size:10px;text-transform:uppercase;letter-spacing:.12em}.footer ul{display:grid;gap:11px;margin:0;padding:0;list-style:none}.footer li a{color:rgba(255,255,255,.74);font-size:12px;transition:color .2s}.footer li a:hover{color:white}.footer__bottom{display:flex;justify-content:space-between;gap:20px;margin-top:60px;padding-top:20px;border-top:1px solid var(--line-dark);color:rgba(255,255,255,.62);font-size:10px}

/* ticker / laufleiste */
.ticker{position:relative;z-index:3;border-bottom:1px solid var(--line);background:var(--white);overflow:hidden}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:130px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--white),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--white),transparent)}
.ticker__row{display:flex;white-space:nowrap;will-change:transform;animation:tickerRun 34s linear infinite}
.ticker__row span{display:inline-flex;align-items:center;gap:14px;padding:15px clamp(18px,3vw,40px);color:var(--ink);font-size:clamp(13px,1vw,15px);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.ticker__row span::after{content:"◆";color:var(--cyan);font-size:8px}
@keyframes tickerRun{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker__row{animation:none}}

/* newsletter modal */
.news__cta{position:relative;z-index:2;display:grid;gap:12px;justify-items:start}
.nl-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(14px,3vw,40px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.nl-modal.is-open{opacity:1;visibility:visible}
.nl-modal__backdrop{position:absolute;inset:0;background:rgba(11,25,47,.74)}
.nl-modal__panel{position:relative;width:min(100%,780px);max-height:90svh;overflow:auto;border-radius:28px;background:var(--white);box-shadow:0 60px 140px rgba(11,25,47,.5),0 0 80px rgba(59,91,219,.2);transform:translateY(16px) scale(.985);transition:transform .3s var(--ease)}
.nl-modal.is-open .nl-modal__panel{transform:none}
.nl-modal__close{position:absolute;top:18px;right:18px;z-index:4;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(11,25,47,.5);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:transform .25s var(--ease),background .2s}
.nl-modal__close:hover{transform:rotate(90deg);background:rgba(11,25,47,.75)}
.nl-modal__img{position:relative;aspect-ratio:21/9;overflow:hidden;background:var(--paper-2)}
.nl-modal__img img{width:100%;height:100%;object-fit:cover;object-position:center}
.nl-modal__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,25,47,.18) 0%,transparent 38%,rgba(255,255,255,.95) 100%)}
.nl-modal__badge{position:absolute;left:clamp(20px,3vw,32px);top:20px;z-index:2;padding:8px 15px;border-radius:999px;background:var(--amber);color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 10px 26px rgba(249,209,73,.45)}
.nl-modal__body{position:relative;z-index:2;margin-top:-38px;padding:0 clamp(22px,3.4vw,44px) clamp(28px,3.4vw,40px)}
.nl-modal__body h3{margin:0 0 8px;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.04em;line-height:1.12}
.nl-modal__body h3 b{color:var(--blue)}
.nl-modal__body h4{margin:0 0 24px;color:var(--text);font-size:16px;font-weight:600}
.nl-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nl-field{display:grid;gap:7px}
.nl-field label{color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.02em}
.nl-field input{width:100%;padding:15px 17px;border:1px solid var(--line);border-radius:13px;background:#F7F9FF;font:inherit;font-size:16px;color:var(--ink);transition:border-color .2s,background .2s,box-shadow .2s}
.nl-field input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(59,91,219,.14)}
.nl-check{display:flex;align-items:flex-start;gap:13px;margin-top:18px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#F7F9FF;cursor:pointer;transition:border-color .2s,background .2s}
.nl-check:hover{border-color:rgba(59,91,219,.4);background:#fff}
.nl-check input{flex-shrink:0;width:21px;height:21px;margin:1px 0 0;accent-color:var(--blue);cursor:pointer}
.nl-check span{color:var(--text);font-size:14px;line-height:1.6}
.nl-check a{color:var(--blue);font-weight:700;text-decoration:underline}
.nl-details{margin-top:12px;border:1px solid var(--line);border-radius:14px;background:#F7F9FF;overflow:hidden}
.nl-details summary{padding:13px 17px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;list-style:none}
.nl-details summary::-webkit-details-marker{display:none}
.nl-details summary::after{content:"+";float:right;font-size:15px}
.nl-details[open] summary::after{content:"–"}
.nl-details p{margin:0;padding:0 17px 16px;max-height:190px;overflow:auto;color:var(--muted);font-size:12px;line-height:1.7}
.nl-modal__actions{display:flex;justify-content:center;margin-top:24px}
.btn[disabled]{opacity:.42;pointer-events:none}
@media(max-width:600px){.nl-fields{grid-template-columns:1fr}}

/* vision */
.vision{background:var(--paper)}
.vision .aura span{width:540px;height:540px;top:-150px;right:-130px;background:radial-gradient(circle,rgba(107,154,235,.32),transparent 70%)}
.vision__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(38px,5vw,80px);align-items:center}
.vision-pill{display:inline-block;margin:0 0 22px;padding:9px 18px;border-radius:999px;background:var(--amber);color:var(--ink);font-size:13px;font-weight:700;box-shadow:0 10px 26px rgba(249,209,73,.35)}
.vision .section-title .serif{color:var(--blue)}
.vision-checks{display:grid;gap:14px;margin:26px 0 32px;padding:0;list-style:none}
.vision-checks li{display:flex;align-items:flex-start;gap:13px;font-size:clamp(16px,1.4vw,19px);font-weight:500;color:var(--ink)}
.vision-checks li>span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(59,91,219,.12);color:var(--blue);flex-shrink:0;margin-top:2px}
.vision-checks svg{width:15px;height:15px}
.vwow{position:relative;width:min(100%,470px);margin-inline:auto}
.vwow::before{content:"";position:absolute;inset:-8% -6% -12% -6%;z-index:-1;border-radius:40px;background:radial-gradient(circle at 55% 40%,rgba(107,154,235,.45),rgba(59,91,219,.2) 45%,transparent 72%);filter:blur(44px)}
.vwow__img{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.7);box-shadow:0 40px 90px rgba(11,25,47,.2),0 0 60px rgba(107,154,235,.3)}
.vwow__img img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}
.vchip{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid var(--line);border-radius:13px;background:white;font-size:13.5px;font-weight:700;box-shadow:0 18px 44px rgba(11,25,47,.16),0 0 24px rgba(107,154,235,.2)}
.vchip .ic{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:rgba(59,91,219,.12);color:var(--blue);flex-shrink:0}
.vchip .ic svg{width:13px;height:13px}
.vchip--1{top:11%;left:-22px}.vchip--2{bottom:12%;right:-18px}
@media(max-width:900px){.vision__grid{grid-template-columns:1fr;gap:40px}.vchip--1{left:2px}.vchip--2{right:2px}}

/* blog teaser */
.blog{background:#F7F9FF}
.blog__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px}
.blog__all{display:inline-flex;align-items:center;gap:9px;padding-bottom:6px;border-bottom:2px solid var(--blue);color:var(--ink);font-size:15px;font-weight:700;transition:gap .25s var(--ease)}
.blog__all:hover{gap:15px}
.blog__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:54px}
.post{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 14px 40px rgba(11,25,47,.06);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.post::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--blue),transparent 72%);opacity:0;transition:opacity .35s;z-index:3}
.post:hover{transform:translateY(-6px);box-shadow:0 32px 74px rgba(11,25,47,.14),0 0 42px rgba(107,154,235,.22)}
.post:hover::before{opacity:1}
.post__img{position:relative;overflow:hidden;background:var(--paper-2)}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post:hover .post__img img{transform:scale(1.06)}
.post__cat{position:absolute;left:16px;top:16px;z-index:2;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 8px 20px rgba(11,25,47,.16)}
.post__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:24px}
.post__meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px;font-weight:600}
.post__meta i{display:block;width:4px;height:4px;border-radius:50%;background:var(--muted)}
.post h3{margin:0;line-height:1.18;letter-spacing:-.035em}
.post p{margin:0;flex:1;color:var(--muted);font-size:14.5px;line-height:1.65}
.post__more{display:inline-flex;align-items:center;gap:8px;margin-top:4px;color:var(--ink);font-size:14px;font-weight:700}
.post__more span{transition:transform .3s var(--ease)}.post:hover .post__more span{transform:translateX(5px)}
/* Drei gleichwertige Karten nebeneinander.
   Die frühere Variante (eine große Karte über zwei Zeilen, zwei kleine daneben)
   erzeugte Leerraum, sobald die große Karte kürzer war als die beiden kleinen
   zusammen — die Zeilenhöhe richtet sich im Grid nach dem höchsten Element.
   Gleich hohe Karten lösen das ohne Sonderfälle. */
.blog__grid{align-items:stretch}
.post--lead,.post--small{grid-column:span 4;display:flex;flex-direction:column}
.post--lead .post__img,.post--small .post__img{aspect-ratio:16/9;width:100%;flex:0 0 auto}
.post--lead h3,.post--small h3{font-size:clamp(20px,1.6vw,24px)}
.post--lead .post__body,.post--small .post__body{padding:24px 26px 26px;gap:11px}
.post--small .post__cat,.post--lead .post__cat{left:14px;top:14px;padding:7px 13px;font-size:16px}
/* Excerpt auf vier Zeilen begrenzen, damit die Karten gleich hoch bleiben */
.post p{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1050px){.post--lead,.post--small{grid-column:span 6}}
@media(max-width:720px){.post--lead,.post--small{grid-column:span 12}.post p{-webkit-line-clamp:3;line-clamp:3}}

/* newsletter */
.news{background:var(--paper)}
.news__inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,60px);align-items:center;padding:clamp(34px,4vw,56px);border-radius:26px;background:var(--ink);color:white;overflow:hidden;box-shadow:0 40px 90px rgba(11,25,47,.25)}
.news__inner::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(circle at 78% 30%,#000,transparent 72%)}
.news__copy{position:relative;z-index:2}
.news__label{display:inline-block;margin-bottom:16px;padding:7px 15px;border-radius:8px;background:var(--amber);color:var(--ink);font-size:13px;font-weight:800}
.news__copy h2{margin:0 0 12px;font-size:clamp(26px,3vw,40px);letter-spacing:-.04em;line-height:1.06}
.news__copy p{margin:0;color:rgba(255,255,255,.68);font-size:15px;line-height:1.7;max-width:46ch}
.news__form{position:relative;z-index:2;display:grid;gap:10px}
.news__form input{width:100%;padding:15px 18px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.06);color:white;font:inherit;font-size:15px}
.news__form input::placeholder{color:rgba(255,255,255,.45)}
.news__form .btn{width:100%}
.news__note{margin:4px 0 0;color:rgba(255,255,255,.45);font-size:11px;line-height:1.5}
@media(max-width:900px){.news__inner{grid-template-columns:1fr}}

/* ===== CRAFT LAYER ===== */
.grain{position:fixed;inset:-60%;z-index:150;pointer-events:none;opacity:.032;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px;animation:grain 8s steps(8) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(3%,-4%)}50%{transform:translate(-4%,3%)}75%{transform:translate(4%,2%)}100%{transform:translate(0,0)}}
.cursor-glow{position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(circle,rgba(107,154,235,.13),transparent 60%);opacity:0;transition:opacity .35s ease;will-change:transform}
.aura{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aura span{position:absolute;border-radius:50%;filter:blur(100px)}
.explorer .aura span{width:580px;height:580px;top:-170px;right:-150px;background:radial-gradient(circle,rgba(107,154,235,.38),transparent 68%)}
.journey .aura span{width:540px;height:540px;bottom:-150px;left:-130px;background:radial-gradient(circle,rgba(59,91,219,.24),transparent 70%)}
.voices .aura span{width:520px;height:520px;top:-130px;left:38%;background:radial-gradient(circle,rgba(249,209,73,.22),transparent 72%)}
.dotbg::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(59,91,219,.14) 1.1px,transparent 1.1px);background-size:26px 26px;-webkit-mask:radial-gradient(120% 80% at 50% 0%,#000,transparent 72%);mask:radial-gradient(120% 80% at 50% 0%,#000,transparent 72%);opacity:.55}
.spot{position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px 220px at var(--mx,80%) var(--my,12%),rgba(107,154,235,.15),transparent 60%);opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:1}
.spot:hover::after{opacity:1}
.bento-card .ring{position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--spin),transparent 0 62%,var(--cyan) 80%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:2}
.bento-card:hover .ring{opacity:1;animation:spinring 5s linear infinite}
@keyframes spinring{to{--spin:360deg}}
.bento-card>.bento-card__no,.bento-card>h3,.bento-card>p{position:relative;z-index:3}
.bento-card__visual{z-index:3}
/* Glow-Pass */
.btn--primary{box-shadow:0 15px 38px rgba(59,91,219,.3),0 0 34px rgba(59,91,219,.26)}
.btn--primary:hover{box-shadow:0 20px 50px rgba(59,91,219,.4),0 0 54px rgba(107,154,235,.5)}
.product-card{box-shadow:0 45px 110px rgba(11,25,47,.2),0 0 74px rgba(107,154,235,.3),0 1px 0 white inset}
.metric{box-shadow:0 20px 50px rgba(11,25,47,.25),0 0 26px rgba(107,154,235,.28)}
.hero__status{box-shadow:0 0 26px rgba(107,154,235,.22)}
.screen{box-shadow:0 26px 60px rgba(11,25,47,.16),0 0 52px rgba(107,154,235,.24)}
.journey__frame{box-shadow:0 32px 80px rgba(11,25,47,.13),0 0 52px rgba(107,154,235,.22)}
.explorer__shell{box-shadow:0 34px 90px rgba(11,25,47,.1),0 0 60px rgba(107,154,235,.18)}
/* Flow-Spine (Signature)
   height:100% statt per JS gesetzter scrollHeight — sonst trägt die Spine zur
   Seitenhöhe bei, die daraufhin neu gemessen wird: die Seite wächst bei jedem
   Durchlauf und erzeugt Leerraum unter dem Footer. */
body{position:relative}
.spine{position:absolute;top:0;left:clamp(14px,2.2vw,38px);width:2px;height:100%;z-index:90;pointer-events:none}
.spine__track{position:absolute;inset:0;background:linear-gradient(180deg,rgba(59,91,219,.18),rgba(59,91,219,.05));border-radius:2px}
.spine__fill{position:absolute;top:0;left:0;width:100%;height:0;background:linear-gradient(180deg,var(--cyan),var(--blue));box-shadow:0 0 12px rgba(59,91,219,.6);border-radius:2px}
.spine-node{position:absolute;left:1px;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid rgba(59,91,219,.35);box-shadow:0 0 0 4px rgba(59,91,219,.06);transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.spine-node.on{border-color:var(--blue);box-shadow:0 0 0 5px rgba(59,91,219,.14),0 0 16px rgba(59,91,219,.6);transform:translate(-50%,-50%) scale(1.15)}
@media(max-width:1240px){.spine{display:none}}
@media(prefers-reduced-motion:reduce){.grain{animation:none}.cursor-glow{display:none}.bento-card:hover .ring{animation:none}}

@media(max-width:1050px){
  .nav__links,.nav__login{display:none}.menu-btn{display:block}.nav .btn{display:none}.nav{padding-right:8px}
  .hero{padding-top:116px}.hero__grid{grid-template-columns:1fr;gap:62px}.hero__copy{max-width:830px}.product-theatre{width:min(100%,760px);margin-inline:auto}.hero__hint{display:none}
  .friction{min-height:auto}.friction__sticky{position:relative;min-height:auto}.friction__grid{grid-template-columns:1fr;gap:45px}.friction__copy{max-width:780px}.friction__stage{min-height:470px}.chaos{display:none}.flow-state{clip-path:none}.friction__progress{display:none}
  .explorer__shell{grid-template-columns:1fr}.explorer__tabs{display:flex;gap:7px;padding:10px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}.explorer__tabs p{display:none}.tab{min-width:220px}.explorer__canvas{padding:26px}
  .bento-card--wide,.bento-card--narrow{grid-column:span 6}.bento-card--third{grid-column:span 4}
  .journey__grid{grid-template-columns:.88fr 1.12fr;gap:4vw}.journey-step{min-height:52vh}
  .footer__grid{grid-template-columns:1.5fr repeat(3,1fr);gap:30px}
}
@media(max-width:820px){
  .wrap{width:min(calc(100% - 32px),var(--max))}.section{padding:88px 0}.display{font-size:clamp(46px,15vw,72px)}.section-title{font-size:clamp(37px,11vw,56px)}
  .nav-shell{top:10px;padding-inline:10px}.nav{height:58px;border-radius:16px}.nav.is-scrolled{height:54px}.brand{font-size:15px}.brand__mark{width:27px;height:27px}.menu-btn{width:42px;height:42px}
  .hero{padding:105px 0 70px}.hero__grid{min-height:auto;gap:48px}.hero__sub{margin:23px 0 27px}.hero__actions{display:grid}.hero__actions .btn{width:100%}.hero__micro{gap:8px 12px}.hero__orbit{display:none}
  .hero__status{max-width:100%;white-space:normal;line-height:1.4}
  .product-card{border-radius:18px;transform:none}.product-card__bar{height:42px}.product-card__url{display:none}.metric{padding:9px 11px}.metric strong{font-size:18px}.metric--one{right:-7px}.metric--two{left:-7px}
  .proof__grid{grid-template-columns:1fr}.proof__item{border-left:0;border-top:1px solid var(--line);padding:22px 0}.proof__item:first-child{border-top:0}
  .friction{min-height:auto}.friction__sticky{position:relative;min-height:auto;padding:100px 0}.friction__grid{gap:38px}.friction__stage{min-height:360px}.chaos{display:none}.flow-state{clip-path:none}.story-card{font-size:8px;padding:10px}.friction__progress{display:none}
  .explorer__head,.value__head{grid-template-columns:1fr;gap:25px}.explorer__head{margin-bottom:42px}.explorer__head .lead,.value__head .lead{justify-self:start}.explorer__shell{min-height:auto;border-radius:20px}.explorer__tabs{scroll-snap-type:x mandatory}.tab{min-width:200px;scroll-snap-align:start}.explorer__canvas{padding:20px 14px 16px}.explorer__meta{gap:12px}.explorer__metric strong{font-size:28px}.explorer__metric small{display:none}.screen__viewport{aspect-ratio:4/3}
  .bento{grid-template-columns:1fr}.bento-card,.bento-card--wide,.bento-card--narrow,.bento-card--third{grid-column:auto;min-height:300px}.bento-card.has-visual{padding-bottom:104px}.bento-card__visual{right:20px;bottom:20px}.bento-card h3{margin-top:38px}
  .journey__head{margin-bottom:40px}.journey__grid{display:block}.journey__visual{display:none}.journey-step{min-height:auto;padding:54px 0;opacity:1}.journey-step:first-child{padding-top:20px}.journey__mobile-shot{position:relative;display:block;margin-top:24px;padding:7px;border:1px solid var(--line);border-radius:15px;background:white;overflow:hidden}.journey__mobile-shot img{position:relative;z-index:1;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;border-radius:9px}
  .voices__grid{grid-template-columns:1fr}.quote{padding:34px 25px}.footer__grid{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}.footer__bottom{flex-direction:column}.final{padding:110px 0}.final h2{font-size:clamp(46px,14vw,72px)}
}
@media(max-width:420px){.footer__grid{grid-template-columns:1fr}.footer__brand{grid-column:auto}.hero__status{font-size:10px}.metric--one{top:18%}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal,.hero-enter,.metric{opacity:1!important;transform:none!important}.product-card{transform:none!important}.friction{min-height:auto}.friction__sticky{position:relative;min-height:auto}.chaos{display:none}.flow-state{clip-path:none}.friction__progress{display:none}.journey-step{opacity:1}
}
@media(max-height:720px) and (min-width:761px){.friction{min-height:auto}.friction__sticky{position:relative;min-height:auto}.chaos{display:none}.flow-state{clip-path:none}.friction__progress{display:none}}

/* ==========================================================================
   TYPO-KORREKTUR — 16px-Untergrenze
   Das v8-Preview arbeitet an vielen Stellen mit 8–14px. Die Projektregel lautet:
   Minimum 16px für ALLES, auch Eyebrows, Badges, Footer-Links und Nav.
   Dieser Block steht bewusst am Ende und überschreibt die Werte oben, damit der
   Bezug zum Original erhalten bleibt und nachvollziehbar ist, was geändert wurde.
   Wo nötig wurden Abstände und Laufweiten mit angepasst, damit die größeren
   Schriften nicht drängen.
   ========================================================================== */

/* Auszeichnungen über Überschriften */
.kicker{font-size:16px;letter-spacing:.12em;gap:12px}
.eyebrow{font-size:16px;letter-spacing:.12em}
.eyebrow b{width:30px;height:30px;font-size:16px}

/* Hero */
.hero__status{padding:10px 16px 10px 12px;font-size:16px;gap:11px}
.hero__micro{gap:10px 22px;margin-top:28px}
.hero__micro li{font-size:16px;gap:9px}
.hero__micro svg{width:18px;height:18px}
.hero__hint{font-size:16px;letter-spacing:.14em;gap:11px}

/* AUSNAHME von der 16px-Regel: Beschriftungen INNERHALB von Illustrationen.
   Die Metrik-Chips und die Browserleiste sind Teil der Produktdarstellung, kein
   Lesetext — bei 16px sprengen sie die Grafik. Sie tragen keine Information,
   die ohne die Abbildung Sinn ergibt. */
.metric{padding:12px 15px}
.metric small{font-size:12px;letter-spacing:.06em}
.metric strong{margin-top:3px;font-size:26px}
.product-card__url{font:600 12px/1.4 Poppins,sans-serif;padding:5px 14px}
.product-card__live{font-size:12px;gap:7px}
.screen__bar span{font-size:12px}
.state-label{font-size:12px;letter-spacing:.1em;padding:8px 13px}
.story-card{font-size:13px;padding:13px 16px}
.story-card small{margin-top:4px;font-size:12px}

/* Proof-Rail */
.proof__item span{margin-top:9px;font-size:16px;letter-spacing:.05em}

/* Ticker */
.ticker__row span{font-size:16px;letter-spacing:.08em}

/* Friction — Kicker/Titel/Lead folgen der 16px-Regel; die Beschriftungen in der
   Vorher-Nachher-Grafik sind oben als Illustrationstext ausgenommen. */

/* Explorer */
.explorer__tabs p{font-size:16px;letter-spacing:.1em;margin-bottom:20px}
.tab b{font-size:17px;margin-bottom:5px}
.tab small{font-size:16px;line-height:1.5}
.tab__no{width:40px;height:40px;font-size:17px}
.tab{grid-template-columns:40px 1fr}
.explorer__meta span{font-size:16px;letter-spacing:.09em}
.explorer__metric small{font-size:16px}
.screen__bar span{font-size:16px}

/* Value-Bento */
.bento-card__no{font-size:16px;letter-spacing:.1em}
.bento-card p{font-size:16px;line-height:1.7}
.mini-users span{width:52px;height:52px;font-size:16px}
.mini-meter b{font-size:16px;margin-bottom:10px}

/* Journey */
.journey-step__no{font-size:16px;letter-spacing:.1em}
.journey-step p{font-size:17px}

/* Voices */
.quote__person b{font-size:17px}
.quote__person small{margin-top:4px;font-size:16px}
.voice-card span{margin-top:24px;font-size:16px;letter-spacing:.05em}

/* Final-CTA */
.final__micro{font-size:16px;gap:14px 26px}

/* Blog — Tag kompakt + kategorie-farbig (konsistent mit der Blog-Übersicht).
   Ersetzt die uppercase-Variante aus dem Original: nicht mehr uppercase, kein
   letter-spacing, dadurch brechen lange Kategorienamen nicht mehr auf zwei Zeilen. */
.post{--cat:var(--blue)}
.post__cat{left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;font-size:16px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--cat);background:rgba(255,255,255,.95)}
.post__cat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cat);flex-shrink:0}
.post__meta{font-size:16px}
.post p{font-size:16px}
.post__more{font-size:16px;color:var(--cat)}
.post::before{background:linear-gradient(90deg,var(--cat),transparent 72%)}
.post:hover{box-shadow:0 32px 74px rgba(11,25,47,.14),0 0 42px color-mix(in srgb,var(--cat) 20%,transparent)}

/* Newsletter */
.news__note{font-size:16px}
.nl-details summary{font-size:16px;letter-spacing:.05em}
.nl-details p{font-size:16px}
.nl-modal__badge{font-size:16px}

/* Footer */
.footer h3{font-size:16px;letter-spacing:.09em;margin-bottom:20px}
.footer li a{font-size:16px}
.footer__brand p{font-size:16px;line-height:1.75}
.footer__bottom{font-size:16px;gap:24px}

/* Navigation */
.nav__login{font-size:16px}
.nav .btn{font-size:16px}
.btn{font-size:16px}

@media(max-width:820px){
  .hero__status{font-size:16px}
  .metric strong{font-size:22px}
  .story-card{font-size:16px;padding:12px}
  .explorer__metric strong{font-size:30px}
}
/* K47 (28.09.2026): YouTube – echte Zwei-Klick-Einwilligung. Erst Hinweis, dann laden.
   Das Vorschaubild bleibt abgedunkelt und unscharf sichtbar; der Hinweis liegt darüber. */
.hero-video{container-type:inline-size}
.hero-video.is-asking{aspect-ratio:auto}
.hero-video.is-asking .yt-lite{pointer-events:none;cursor:default}
.hero-video.is-asking .yt-lite__play,.hero-video.is-asking .yt-lite__note{opacity:0;transition:opacity .2s ease}
.hero-video.is-asking .yt-lite img,.hero-video.is-asking .yt-lite:hover img{transform:scale(1.06);filter:blur(4px) brightness(.5)}
.yt-consent{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;min-height:56.25cqw;padding:clamp(20px,5cqw,40px);background:linear-gradient(180deg,rgba(11,25,47,.5) 0%,rgba(11,25,47,.86) 100%);color:#fff;opacity:0;transform:translateY(8px);transition:opacity .32s var(--ease),transform .32s var(--ease)}
.yt-consent.is-in{opacity:1;transform:none}
.yt-consent__tag{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.9);font-size:12.5px;font-weight:600;letter-spacing:.01em}
.yt-consent__tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber)}
.yt-consent h3{margin:2px 0 0;color:#fff;font-size:clamp(19px,3.4cqw,24px);font-weight:700;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.yt-consent p{margin:0;max-width:58ch;color:rgba(255,255,255,.88);font-size:15px;line-height:1.55;text-wrap:pretty}
.yt-consent a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:3px}
.yt-consent a:hover{text-decoration-color:var(--amber)}
.yt-consent__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.yt-consent__actions .btn{margin:0;width:auto;min-height:46px;padding:11px 22px}
.yt-consent__cancel{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff}
.yt-consent__cancel:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.12)}
.yt-consent :focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media (max-width:520px){.yt-consent p{font-size:14.5px}.yt-consent__actions{width:100%}.yt-consent__actions .btn{flex:1 1 auto}}
@media (prefers-reduced-motion:reduce){.yt-consent{transition:none;transform:none}.hero-video.is-asking .yt-lite img{transform:none}}