/* ============================================================
   KINOVO — Design System  ·  Direction "Navy Authority"
   Palette: Navy #0A1424 · Orange #F6890C · Grün #0DA45A
   ============================================================ */
/* Self-hosted variable fonts (DSGVO-safe, no Google CDN) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-var-latin.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/space-grotesk-var-latin.woff2') format('woff2')}

:root{
  /* brand */
  --navy:#0A1424; --navy-1:#0c1a30; --navy-2:#16243d; --navy-3:#1f3151;
  --orange:#F6890C; --orange-d:#b9650a; --orange-ink:#1a1100;
  --green:#0DA45A; --green-d:#0a7d45; --blue:#2f86c9;
  /* neutrals */
  --slate:#5d6f88; --slate-2:#93a4bd; --slate-3:#c0cad8;
  --ink:#0A1424; --ink-2:#243149;
  --bg:#F5F7FA; --bg-soft:#EEF1F6; --card:#fff;
  --line-l:#E6EBF1; --line-l2:#D7DEE8; --line-d:rgba(255,255,255,.09);
  /* system */
  --r-sm:11px; --r:16px; --r-lg:20px; --r-xl:24px;
  --maxw:1200px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:128px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --shadow-card:0 30px 60px -30px rgba(10,20,36,.25);
  --shadow-pop:0 24px 50px -24px rgba(10,20,36,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'Inter Tight',sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;font-size:17px}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;line-height:1.04;letter-spacing:-0.025em}

/* ---------- typographic helpers ---------- */
.eyebrow{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--orange);display:inline-flex;align-items:center;gap:9px}
.eyebrow.green{color:var(--green)}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor;opacity:.7}
.lead{font-size:20px;color:var(--slate)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:13px 24px;border-radius:11px;transition:all .22s var(--ease);cursor:pointer;border:1px solid transparent;font-family:'Inter Tight'}
.btn svg{width:15px;height:15px}
.btn-primary{background:var(--orange);color:var(--orange-ink)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(246,137,12,.5);filter:brightness(1.04)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-2);transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(10,20,36,.5)}
.btn-light{background:#fff;color:var(--navy);border-color:var(--line-l2)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop);border-color:transparent}
.btn-glass{background:rgba(255,255,255,.07);color:#fff;border-color:var(--line-d)}
.btn-glass:hover{background:rgba(255,255,255,.13)}
.btn-outline{border-color:var(--line-l2);color:var(--ink);background:#fff}
.btn-outline:hover{border-color:var(--navy)}
.btn-lg{padding:15px 30px;font-size:16px}.btn-lg svg{width:16px;height:16px}

/* ---------- header / nav ---------- */
header{position:sticky;top:0;z-index:60}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Bricolage Grotesque';font-size:21px;font-weight:700;letter-spacing:-0.02em}
.brand .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(150deg,var(--green),var(--blue));display:grid;place-items:center}
.brand .mark svg{width:20px;height:20px}
.navlinks{display:flex;gap:4px}
.navlinks a{font-size:15px;font-weight:500;padding:9px 14px;border-radius:9px;transition:.18s}
.navcta{display:flex;align-items:center;gap:14px}
.navcta .login{font-size:15px;font-weight:500}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:8px}
.menu-btn svg{width:26px;height:26px}
/* dark header (on navy hero pages) */
header.on-dark{background:rgba(10,20,36,.7);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-d)}
header.on-dark .brand{color:#fff}
header.on-dark .navlinks a{color:var(--slate-2)}
header.on-dark .navlinks a:hover{color:#fff;background:rgba(255,255,255,.06)}
header.on-dark .navcta .login{color:var(--slate-2)}header.on-dark .navcta .login:hover{color:#fff}
header.on-dark .menu-btn svg{stroke:#fff}
/* light header (on light pages) */
header.on-light{background:rgba(245,247,250,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-l)}
header.on-light .brand{color:var(--navy)}
header.on-light .navlinks a{color:var(--slate)}
header.on-light .navlinks a:hover{color:var(--ink);background:#fff}
header.on-light .navcta .login{color:var(--slate)}header.on-light .navcta .login:hover{color:var(--ink)}
header.on-light .menu-btn svg{stroke:var(--navy)}

/* ---------- dark canvas + texture ---------- */
.dark{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.dark .aura{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(600px 320px at 78% 6%,rgba(246,137,12,.16),transparent 60%),
  radial-gradient(560px 360px at 12% 92%,rgba(13,164,90,.16),transparent 60%)}
.dark .gridtex{position:absolute;inset:0;background-image:linear-gradient(var(--line-d) 1px,transparent 1px),linear-gradient(90deg,var(--line-d) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000,transparent 75%);opacity:.5}

/* ---------- sections ---------- */
section{position:relative}
.block{padding:var(--s7) 0}
.block-sm{padding:var(--s6) 0}
.sec-head{max-width:720px;margin:0 auto var(--s5);text-align:center}
.sec-head.left{margin-left:0;text-align:left}
.sec-head h2{font-size:clamp(34px,4.4vw,56px);margin:16px 0 16px}
.sec-head p{font-size:19px;color:var(--slate)}

/* ---------- announce pill ---------- */
.announce{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid var(--line-d);padding:7px 8px 7px 16px;border-radius:999px;font-size:13.5px;color:var(--slate-3);font-weight:500}
.announce .tagx{background:var(--green);color:#04210f;font-weight:700;font-size:11.5px;padding:3px 10px;border-radius:999px;letter-spacing:.03em}

/* ---------- pillars / cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-lg);padding:34px 30px;transition:.3s var(--ease);position:relative}
.card.hover:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:transparent}
.card .tag{position:absolute;top:30px;right:30px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--slate-2)}
.ico{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin-bottom:22px}
.ico svg{width:27px;height:27px}
.ico.green{background:rgba(13,164,90,.12)} .ico.orange{background:rgba(246,137,12,.13)} .ico.blue{background:rgba(47,134,201,.12)}
.card h3{font-size:24px;margin-bottom:11px}
.card p{color:var(--slate);font-size:16px;margin-bottom:20px}
.flist{list-style:none;display:flex;flex-direction:column;gap:11px}
.flist li{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:500;color:var(--ink-2)}
.flist li svg{width:18px;height:18px;flex:none}

/* ---------- feature split rows ---------- */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center;margin-bottom:var(--s6)}
.frow:last-child{margin-bottom:0}
.frow.rev .ftext{order:2}
.ftext h3{font-size:clamp(28px,3.4vw,40px);margin:16px 0 16px}
.ftext p{font-size:18px;color:var(--slate);margin-bottom:24px}
.mini{display:flex;flex-direction:column;gap:13px}
.mini div{display:flex;align-items:center;gap:12px;font-weight:500;color:var(--ink-2);font-size:15.5px}
.mini svg{width:20px;height:20px;flex:none}
.fvisual{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-lg);padding:30px;min-height:320px;box-shadow:0 30px 70px -40px rgba(10,20,36,.2);position:relative;overflow:hidden}
.fv-glow{position:absolute;width:240px;height:240px;border-radius:50%;filter:blur(60px);opacity:.18;top:-40px;right:-40px}

/* row items (in visuals) */
.row-i{background:var(--bg);border:1px solid var(--line-l);border-radius:13px;padding:14px 16px;display:flex;align-items:center;gap:13px;margin-bottom:11px;position:relative}
.row-i .av{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:700;color:#fff;font-size:14px;flex:none}
.row-i .meta{flex:1}.row-i .meta .n{font-weight:700;font-size:14.5px}.row-i .meta .s{font-size:12.5px;color:var(--slate)}
.row-i .st{font-size:12px;font-weight:700;padding:5px 11px;border-radius:7px}

/* ---------- trust band ---------- */
.trustband{background:var(--navy);color:#fff;border-radius:var(--r-xl);padding:var(--s5);display:grid;grid-template-columns:repeat(4,1fr);gap:30px;position:relative;overflow:hidden}
.tb{position:relative;z-index:1}
.tb .ti{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.07);display:grid;place-items:center;margin-bottom:16px}
.tb .ti svg{width:23px;height:23px}
.tb h4{font-size:18px;margin-bottom:7px}
.tb p{color:var(--slate-2);font-size:14.5px}

/* ---------- founder ---------- */
.founder-wrap{background:var(--navy);color:#fff;border-radius:var(--r-xl);overflow:hidden;display:grid;grid-template-columns:.85fr 1.15fr;position:relative}
.fphoto{background:linear-gradient(160deg,var(--navy-3),var(--navy-1));position:relative;display:grid;place-items:center;min-height:340px}
.fphoto .ini{font-family:'Bricolage Grotesque';font-size:96px;font-weight:800;color:rgba(255,255,255,.12)}
.fphoto .pin{position:absolute;bottom:22px;left:22px;background:rgba(255,255,255,.08);border:1px solid var(--line-d);border-radius:10px;padding:8px 13px;font-size:13px;display:flex;align-items:center;gap:8px}
.fphoto .pin svg{width:14px;height:14px}
.fcontent{padding:var(--s5)}
.fcontent blockquote{font-family:'Bricolage Grotesque';font-weight:600;font-size:clamp(24px,3vw,34px);line-height:1.22;letter-spacing:-0.02em;margin:18px 0 26px}
.fcontent .by b{font-weight:700;font-size:17px}.fcontent .by span{color:var(--slate-2);font-size:14.5px}

/* ---------- compare ---------- */
.compare{background:var(--navy);color:#fff;border-radius:var(--r-xl);padding:var(--s6) var(--s5);position:relative;overflow:hidden}
.compare h2{color:#fff;text-align:center;font-size:clamp(30px,4vw,46px);margin-bottom:12px}
.compare .sub{text-align:center;color:var(--slate-2);margin-bottom:var(--s5);font-size:18px;position:relative}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:880px;margin:0 auto;position:relative}
.cmp{border-radius:18px;padding:32px 30px}
.cmp.bad{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.cmp.good{background:linear-gradient(160deg,rgba(13,164,90,.16),rgba(246,137,12,.08));border:1px solid rgba(13,164,90,.3)}
.cmp h4{font-size:15px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:22px;display:flex;align-items:center;gap:10px}
.cmp.bad h4{color:var(--slate-2)}.cmp.good h4{color:var(--green)}
.cmp ul{list-style:none;display:flex;flex-direction:column;gap:15px}
.cmp li{display:flex;gap:13px;font-size:16px;color:#d7dee9}
.cmp li svg{width:20px;height:20px;flex:none;margin-top:2px}
.cmp.bad li{color:var(--slate-2)}

/* ---------- accordion (FAQ) ---------- */
.acc{max-width:820px;margin:0 auto;border-top:1px solid var(--line-l)}
.acc details{border-bottom:1px solid var(--line-l)}
.acc summary{list-style:none;cursor:pointer;padding:26px 8px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:'Bricolage Grotesque';font-weight:600;font-size:19px;letter-spacing:-0.01em}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{width:26px;height:26px;flex:none;position:relative;transition:.25s}
.acc summary .pm::before,.acc summary .pm::after{content:"";position:absolute;background:var(--orange);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)}
.acc summary .pm::before{width:14px;height:2px}.acc summary .pm::after{width:2px;height:14px;transition:.25s}
.acc details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc .body{padding:0 8px 28px;color:var(--slate);font-size:16.5px;max-width:90%}

/* ---------- forms ---------- */
.form{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--shadow-card)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:7px;letter-spacing:.02em}
.field input,.field textarea{width:100%;font-family:'Inter Tight';font-size:15.5px;padding:13px 15px;border:1px solid var(--line-l2);border-radius:11px;background:var(--bg);transition:.18s;color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px rgba(246,137,12,.12)}
.field textarea{min-height:130px;resize:vertical}

/* ---------- final CTA ---------- */
.finalcta{text-align:center;padding:var(--s7) 0;position:relative}
.finalcta h2{font-size:clamp(40px,5.5vw,78px);font-weight:800;letter-spacing:-0.035em;margin-bottom:22px}
.finalcta p{font-size:20px;color:var(--slate-3);max-width:46ch;margin:0 auto 38px;position:relative}
.finalcta .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}

/* ---------- page hero (subpages) ---------- */
.phero{text-align:center;padding:var(--s6) 0 var(--s5)}
.phero h1{font-size:clamp(40px,5.5vw,72px);font-weight:800;letter-spacing:-0.035em;margin:22px auto 22px;max-width:16ch}
.phero h1 .grad{background:linear-gradient(100deg,var(--orange),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.phero p{font-size:20px;color:var(--slate-3);max-width:48ch;margin:0 auto}
.phero .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.crumbs{font-size:13px;color:var(--slate-2);letter-spacing:.02em}
.crumbs a:hover{color:#fff}

/* ---------- footer ---------- */
footer.site{background:#060d18;color:var(--slate-2);padding:var(--s6) 0 var(--s4)}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:var(--s5);border-bottom:1px solid var(--line-d)}
footer.site .brand{color:#fff}
.footer-about{font-size:15px;max-width:30ch;margin-top:16px;color:var(--slate-2)}
.fcol h5{color:#fff;font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;margin-bottom:16px}
.fcol a{display:block;font-size:15px;margin-bottom:11px;transition:color .18s}.fcol a:hover{color:#fff}
.fbottom{display:flex;justify-content:space-between;padding-top:26px;font-size:14px;flex-wrap:wrap;gap:12px}

/* ---------- utilities ---------- */
.center{text-align:center}
.mt-s3{margin-top:var(--s3)}.mt-s4{margin-top:var(--s4)}
.muted{color:var(--slate)}

/* ---------- mobile nav drawer ---------- */
.drawer{position:fixed;inset:0;z-index:80;background:var(--navy);color:#fff;transform:translateX(100%);transition:transform .3s var(--ease);display:flex;flex-direction:column;padding:24px 28px}
.drawer.open{transform:translateX(0)}
.drawer .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
.drawer .top .x{background:none;border:0;color:#fff;cursor:pointer}.drawer .top .x svg{width:28px;height:28px}
.drawer a.dl{font-family:'Bricolage Grotesque';font-weight:600;font-size:26px;padding:14px 0;border-bottom:1px solid var(--line-d);color:#fff}
.drawer .dcta{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:24px}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .grid-3{grid-template-columns:1fr}
  .frow,.frow.rev .ftext{grid-template-columns:1fr;order:0}
  .trustband{grid-template-columns:1fr 1fr}
  .founder-wrap,.fcols,.cmp-grid{grid-template-columns:1fr}
  .navlinks,.navcta .login{display:none}
  .menu-btn{display:grid}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .trustband{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr}
  .block{padding:var(--s6) 0}
}

/* ============================================================
   v2 ADDITIONS  ·  real screenshots, depth, motion
   ============================================================ */

/* ---------- browser frame (real screenshots) ---------- */
.bframe{background:rgba(255,255,255,.05);border:1px solid var(--line-d);border-radius:18px;padding:10px 10px 0;box-shadow:0 70px 130px -50px rgba(0,0,0,.75),0 12px 40px -20px rgba(0,0,0,.5);position:relative;overflow:hidden}
.bframe .bar{display:flex;align-items:center;gap:7px;padding:6px 8px 12px}
.bframe .bar i{width:11px;height:11px;border-radius:50%;background:var(--navy-3)}
.bframe .bar .url{margin-left:14px;font-size:12.5px;color:var(--slate-2);background:rgba(255,255,255,.05);border:1px solid var(--line-d);padding:4px 14px;border-radius:8px;letter-spacing:.01em}
.bframe img{border-radius:10px 10px 0 0;display:block;width:100%}
/* light variant for use on light sections */
.bframe.light{background:#fff;border-color:var(--line-l);box-shadow:var(--shadow-card)}
.bframe.light .bar i{background:var(--line-l2)}
.bframe.light .bar .url{color:var(--slate);background:var(--bg);border-color:var(--line-l)}

/* ---------- hero screenshot stage ---------- */
.heroshot{position:relative;max-width:1060px;margin:var(--s6) auto -190px;z-index:2}
.heroshot .stage{transition:transform .5s var(--ease)}
.shot-halo{position:absolute;inset:-12% -8% 18%;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;
  background:radial-gradient(closest-side,rgba(246,137,12,.5),transparent 70%),radial-gradient(closest-side,rgba(13,164,90,.45),transparent 70%);
  background-position:18% 30%,82% 60%;background-repeat:no-repeat;background-size:60% 70%,55% 65%}

/* ---------- floating live cards ---------- */
.floatcard{position:absolute;background:rgba(13,20,36,.72);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:13px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 26px 60px -22px rgba(0,0,0,.7);z-index:4;color:#fff}
.floatcard .fc-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.floatcard .fc-ic svg{width:20px;height:20px}
.floatcard .n{font-weight:700;font-size:14px;line-height:1.2}
.floatcard .s{font-size:12px;color:var(--slate-2);margin-top:2px}
.fc-a{top:24%;left:-3%;animation:floaty 6s var(--ease) infinite}
.fc-b{bottom:30%;right:-4%;animation:floaty 6s var(--ease) infinite .8s}
.fc-c{bottom:9%;left:8%;animation:floaty 7s var(--ease) infinite .4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(max-width:760px){.floatcard{display:none}.heroshot{margin-bottom:-90px}}

/* ---------- metrics strip ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:900px;margin:0 auto}
.metric{text-align:center}
.metric .num{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(34px,4.4vw,52px);letter-spacing:-.03em;background:linear-gradient(120deg,var(--orange),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.metric .lab{font-size:14.5px;color:var(--slate);margin-top:8px;font-weight:500}
@media(max-width:680px){.metrics{grid-template-columns:1fr 1fr;gap:34px 18px}}

/* ---------- bento showcase ---------- */
.bento{display:grid;grid-template-columns:1.4fr 1fr;grid-auto-rows:1fr;gap:22px}
.bento .cell{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-xl);padding:30px 30px 0;overflow:hidden;position:relative;transition:.35s var(--ease)}
.bento .cell:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:transparent}
.bento .cell.span2{grid-row:span 2}
.bento .cell .cap{margin-bottom:20px}
.bento .cell .cap .k{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--green)}
.bento .cell .cap h4{font-size:21px;margin:9px 0 7px}
.bento .cell .cap p{color:var(--slate);font-size:15px;max-width:42ch}
.bento .cell .shot{border:1px solid var(--line-l);border-top-left-radius:14px;border-top-right-radius:14px;box-shadow:0 -2px 0 rgba(0,0,0,0),0 30px 50px -34px rgba(10,20,36,.4);overflow:hidden}
.bento .cell .shot img{display:block;width:100%}
@media(max-width:860px){.bento{grid-template-columns:1fr}.bento .cell.span2{grid-row:auto}}

/* ---------- sport marquee ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:flex;gap:18px;width:max-content;animation:slide 32s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.mq{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border:1px solid var(--line-d);border-radius:999px;font-weight:600;font-size:15px;color:var(--slate-3);white-space:nowrap;background:rgba(255,255,255,.03)}
.mq svg{width:18px;height:18px;color:var(--green)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- scroll reveal (robust: only hides when JS active) ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}.js .reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .fc-a,.fc-b,.fc-c,.marquee .track{animation:none!important}.heroshot .stage{transform:none!important}}

/* ---------- single large showcase frame ---------- */
.showcase{max-width:1080px;margin:0 auto;position:relative}
.showcase .bframe{box-shadow:var(--shadow-card)}
.showcase::after{content:"";position:absolute;inset:auto 6% -30px;height:60px;background:radial-gradient(closest-side,rgba(13,164,90,.25),transparent 75%);filter:blur(20px);z-index:-1}

/* ============================================================
   v3 ADDITIONS  ·  real logo, sticky header, founder photo, lightbox
   ============================================================ */

/* ---------- real logo ---------- */
.brand .logo{height:30px;width:auto;display:block}
header.on-dark .brand .logo,footer.site .brand .logo,.drawer .brand .logo{filter:brightness(0) invert(1)}
header.on-dark.scrolled .brand .logo{filter:none}

/* ---------- sticky header scroll state ---------- */
header{transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
header.on-dark.scrolled{background:rgba(245,247,250,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-l);box-shadow:0 10px 34px -20px rgba(10,20,36,.3)}
header.on-dark.scrolled .navlinks a{color:var(--slate)}
header.on-dark.scrolled .navlinks a:hover{color:var(--ink);background:#fff}
header.on-dark.scrolled .navcta .login{color:var(--slate)}
header.on-dark.scrolled .navcta .login:hover{color:var(--ink)}
header.on-dark.scrolled .menu-btn svg{stroke:var(--navy)}

/* ---------- founder real photo ---------- */
.fphoto .fimg{width:172px;height:172px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:4px solid rgba(255,255,255,.14);box-shadow:0 24px 60px -22px rgba(0,0,0,.7);position:relative;z-index:1}

/* ---------- lightbox ---------- */
.zoomable{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(6,13,24,.93);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);cursor:zoom-out}
.lightbox.open{display:flex;animation:lbfade .2s var(--ease)}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
.lightbox img{max-width:96vw;max-height:92vh;width:auto;border-radius:12px;box-shadow:0 50px 120px -30px #000;border:1px solid rgba(255,255,255,.14)}
.lb-close{position:fixed;top:22px;right:26px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.18s}
.lb-close:hover{background:rgba(255,255,255,.2)}
.lb-close svg{width:24px;height:24px}

/* ============================================================
   v4 FIXES  ·  clickability, logo in color + larger, light header
   ============================================================ */

/* overlays must never eat clicks */
.dark .gridtex,.dark .aura,.shot-halo,.showcase::after{pointer-events:none}

/* logo: always full color, larger */
.brand .logo{height:50px}
header.on-dark .brand .logo,footer.site .brand .logo,.drawer .brand .logo,header.on-dark.scrolled .brand .logo{filter:none}

/* header: light + frosted at all times so the color logo reads, stays sticky */
header.on-dark{background:rgba(245,247,250,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-l)}
header.on-dark .brand{color:var(--navy)}
header.on-dark .navlinks a{color:var(--slate)}
header.on-dark .navlinks a:hover{color:var(--ink);background:#fff}
header.on-dark .navcta .login{color:var(--slate)}
header.on-dark .navcta .login:hover{color:var(--ink)}
header.on-dark .menu-btn svg{stroke:var(--navy)}
header.on-dark.scrolled{background:rgba(245,247,250,.92);box-shadow:0 10px 34px -20px rgba(10,20,36,.3)}

/* footer + drawer are dark: keep the logo readable on dark by lifting it onto a soft chip */
footer.site .brand .logo,.drawer .top .brand .logo{background:#fff;border-radius:10px;padding:7px 11px;box-shadow:0 8px 22px -12px rgba(0,0,0,.5)}

/* ============================================================
   v5  ·  big transparent animated hero-header, bigger logo,
          trustband grid fix, favicon
   ============================================================ */

:root{ --hdr-top:108px }

/* --- trustband: the gridtex overlay was a static grid child, stealing cell 1
       and pushing the 4th tile to a new row. Pin it absolute. --- */
.trustband{align-items:start}
.trustband>.gridtex{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-d) 1px,transparent 1px),linear-gradient(90deg,var(--line-d) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000,transparent 75%)}

/* --- header has two states over the dark hero --- */
.nav{transition:height .35s var(--ease)}
.brand .logo{transition:height .35s var(--ease)}

/* TOP (not yet scrolled): same light frosted bar, just TALLER + bigger logo.
   Logo stays in full color and reads cleanly on the light bar (no glow). */
header.on-dark:not(.scrolled) .nav{height:var(--hdr-top)}
header.on-dark:not(.scrolled) .brand .logo{height:78px}

/* SCROLLED: compact bar */
header.on-dark.scrolled .nav{height:72px}
header.on-dark.scrolled .brand .logo{height:54px}

/* entrance: header glides down on load */
@keyframes hdrIn{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
#siteheader{animation:hdrIn .85s var(--ease) .06s both}
@media(prefers-reduced-motion:reduce){#siteheader{animation:none}}

/* mobile: a touch shorter so the hero still breathes */
@media(max-width:980px){
  :root{ --hdr-top:86px }
  header.on-dark:not(.scrolled) .brand .logo{height:60px}
  header.on-dark.scrolled .brand .logo{height:46px}
}

/* ============================================================
   v6  ·  WARM LIGHT HERO  ·  living network, animated logo,
          Kinovo+ spotlight, warm palette
   Kundenfeedback: warm statt schwarz, Logo + Netz zurück,
   Kinovo+ als Herzstück sichtbar machen.
   ============================================================ */

:root{
  --cream:#FBF5EC; --cream-2:#F6ECDD; --cream-3:#FFFDF9;
  --warm-line:rgba(28,18,4,.08);
  --peach:#FDEBD2;
}

/* warm frosted header so it sits on cream cleanly */
header.on-dark:not(.scrolled){background:rgba(251,245,236,.78)}
header.on-dark.scrolled{background:rgba(251,245,236,.9)}

/* ---------- the warm hero canvas ---------- */
.hero-light{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 50% -10%,var(--cream-3),var(--cream) 46%,var(--cream-2) 100%)}
.hero-light .net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.9}
.hero-light .warm-aura{position:absolute;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(640px 360px at 82% 4%,rgba(246,137,12,.18),transparent 62%),
  radial-gradient(620px 420px at 8% 96%,rgba(13,164,90,.14),transparent 62%),
  radial-gradient(520px 300px at 50% 120%,rgba(47,134,201,.10),transparent 60%)}
.hero-light .wrap{position:relative;z-index:2}
.hero-light .lead{color:var(--ink-2)}
.hero-light .announce{background:rgba(255,255,255,.7);border:1px solid var(--warm-line);color:var(--ink-2);box-shadow:0 10px 30px -18px rgba(28,18,4,.3);backdrop-filter:blur(6px)}
.hero-light .announce .tagx{background:var(--orange);color:var(--orange-ink)}
.hero-light .scroll-cue{margin-top:22px;font-size:14px;color:var(--slate);display:flex;gap:8px;justify-content:center;align-items:center}

/* ---------- animated brand logo in hero ---------- */
.hero-logo{width:clamp(120px,16vw,176px);height:auto;margin:0 auto 6px;display:block;
  filter:drop-shadow(0 22px 36px rgba(28,18,4,.16));
  animation:logoFloat 7s var(--ease) infinite}
.hero-logo svg{width:100%;height:auto;display:block;overflow:visible}
/* each colour group assembles in, then rests */
.hero-logo g{transform-box:fill-box;transform-origin:50% 60%;opacity:0;animation:logoPop .7s var(--ease) forwards}
.hero-logo g.g-green{animation-delay:.10s}
.hero-logo g.g-navy{animation-delay:.26s}
.hero-logo g.g-orange{animation-delay:.40s}
.hero-logo g.g-blue{animation-delay:.52s}
/* a slow shine sweep across the mark */
.hero-logo::after{content:"";position:absolute;inset:0;pointer-events:none}
@keyframes logoPop{0%{opacity:0;transform:translateY(10px) scale(.86)}60%{opacity:1;transform:translateY(0) scale(1.03)}100%{opacity:1;transform:none}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* differentiator strip: Organisation kann jeder, Kinovo+ keiner */
.diff{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px 14px;justify-content:center;
  margin:6px auto 34px;padding:11px 20px;border-radius:999px;font-size:16px;font-weight:600;
  background:rgba(255,255,255,.66);border:1px solid var(--warm-line);box-shadow:0 14px 36px -22px rgba(28,18,4,.4);backdrop-filter:blur(6px)}
.diff .o{color:var(--slate)}
.diff .p{display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
.diff .p b{background:linear-gradient(100deg,var(--orange),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.diff .arrow{color:var(--orange);font-weight:800}

/* hero screenshot on light: warm frame + soft halo (no 3D) */
.hero-light .heroshot{margin-bottom:-150px}
.hero-light .bframe{background:#fff;border:1px solid var(--warm-line);
  box-shadow:0 60px 120px -50px rgba(28,18,4,.5),0 14px 40px -22px rgba(28,18,4,.3)}
.hero-light .bframe .bar i{background:var(--line-l2)}
.hero-light .bframe .bar .url{color:var(--slate);background:var(--bg);border-color:var(--line-l)}
.hero-light .shot-halo{background:radial-gradient(closest-side,rgba(246,137,12,.4),transparent 70%),radial-gradient(closest-side,rgba(13,164,90,.34),transparent 70%);
  background-position:18% 30%,82% 60%;background-repeat:no-repeat;background-size:60% 70%,55% 65%;opacity:.6}
.hero-light .floatcard{background:rgba(255,255,255,.86);border:1px solid var(--warm-line);color:var(--ink);
  box-shadow:0 26px 60px -26px rgba(28,18,4,.45);backdrop-filter:blur(10px)}
.hero-light .floatcard .s{color:var(--slate)}

/* light marquee (was dark; now flows from the cream hero) */
.marquee-light{background:var(--cream-2)}
.marquee-light .lbl{color:var(--slate)}
.marquee-light .mq{border:1px solid var(--warm-line);color:var(--ink-2);background:rgba(255,255,255,.6)}
.marquee-light .mq svg{color:var(--green)}

/* ---------- pillars: emphasise Kinovo+ as the heart ---------- */
.card.heart{background:linear-gradient(165deg,#fff,var(--peach));border-color:rgba(246,137,12,.35);box-shadow:0 30px 60px -34px rgba(246,137,12,.5)}
.card.heart:hover{box-shadow:0 38px 70px -34px rgba(246,137,12,.6)}
.card .heart-tag{position:absolute;top:26px;right:26px;background:var(--orange);color:var(--orange-ink);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.card.heart h3 .plus{background:linear-gradient(100deg,var(--orange),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.card .cardlink{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-weight:700;font-size:14.5px;color:var(--orange)}
.card .cardlink svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.card .cardlink:hover svg{transform:translateX(4px)}

/* ============================================================
   KINOVO+ SPOTLIGHT  ·  the differentiator, premium warm-dark
   Stylised teaser (NOT a real screenshot) to protect the concept
   ============================================================ */
.kplus{position:relative;overflow:hidden;background:
  radial-gradient(700px 420px at 88% -6%,rgba(246,137,12,.26),transparent 60%),
  radial-gradient(620px 460px at 6% 108%,rgba(13,164,90,.20),transparent 60%),
  linear-gradient(165deg,#13182b,#0a1424 70%)}
.kplus .gridtex{position:absolute;inset:0;background-image:linear-gradient(var(--line-d) 1px,transparent 1px),linear-gradient(90deg,var(--line-d) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 85% 75% at 50% 25%,#000,transparent 78%);opacity:.5;pointer-events:none}
.kplus .wrap{position:relative;z-index:1}
.kplus-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s5);align-items:center}
.kplus .kp-eyebrow{color:var(--orange)}
.kplus h2{color:#fff;font-size:clamp(34px,4.6vw,58px);margin:16px 0 18px}
.kplus h2 .plus{background:linear-gradient(100deg,var(--orange),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.kplus .kp-lead{color:var(--slate-3);font-size:19px;max-width:46ch;margin-bottom:30px}
.kplus .kp-feats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:32px}
.kp-feat{background:rgba(255,255,255,.05);border:1px solid var(--line-d);border-radius:15px;padding:18px}
.kp-feat .kf-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:12px}
.kp-feat .kf-ic svg{width:22px;height:22px}
.kp-feat h4{color:#fff;font-size:16.5px;margin-bottom:5px}
.kp-feat p{color:var(--slate-2);font-size:14px;line-height:1.45}
.kplus .kp-note{display:flex;align-items:center;gap:10px;color:var(--slate-2);font-size:14.5px;margin-top:4px}
.kplus .kp-note svg{width:18px;height:18px;flex:none;color:var(--green)}

/* stylised Kinovo+ teaser device (pure CSS, reveals no real UI) */
.kp-stage{position:relative;display:grid;place-items:center;min-height:420px}
.kp-stage .glow{position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(70px);
  background:radial-gradient(closest-side,rgba(246,137,12,.5),transparent 70%);opacity:.6}
.kp-card{position:relative;z-index:2;width:min(330px,82%);background:linear-gradient(165deg,#fff,#fff6ea);
  border-radius:26px;padding:24px;box-shadow:0 50px 100px -40px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.6)}
.kp-card .kc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.kp-card .kc-kid{display:flex;align-items:center;gap:10px}
.kp-card .kc-av{width:40px;height:40px;border-radius:12px;background:linear-gradient(150deg,var(--green),var(--blue));display:grid;place-items:center;color:#fff;font-weight:800;font-family:'Bricolage Grotesque';font-size:17px}
.kp-card .kc-kid b{font-size:15px;color:var(--ink);display:block;line-height:1.1}
.kp-card .kc-kid span{font-size:12px;color:var(--slate)}
.kp-card .kc-streak{font-size:12px;font-weight:800;color:var(--orange-d);background:rgba(246,137,12,.14);padding:5px 10px;border-radius:999px;display:flex;align-items:center;gap:5px}
.kp-card .kc-streak svg{width:14px;height:14px}
.kp-ring{display:flex;align-items:center;gap:14px;background:var(--bg);border-radius:16px;padding:14px;margin-bottom:16px}
.kp-ring svg{width:54px;height:54px;flex:none;transform:rotate(-90deg)}
.kp-ring .rt b{font-size:14.5px;color:var(--ink);display:block}
.kp-ring .rt span{font-size:12.5px;color:var(--slate)}
.kp-stickers{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.kp-st{aspect-ratio:1;border-radius:13px;display:grid;place-items:center;font-size:21px}
.kp-st.on{background:linear-gradient(155deg,#fff0d8,#ffe0b0);border:1px solid rgba(246,137,12,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.kp-st.off{background:var(--bg);border:1px dashed var(--line-l2);opacity:.7}
.kp-badge{position:absolute;z-index:3;background:#fff;border-radius:14px;padding:10px 13px;display:flex;align-items:center;gap:9px;box-shadow:0 24px 50px -22px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.7)}
.kp-badge .bi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.kp-badge .bi svg{width:19px;height:19px}
.kp-badge b{font-size:13px;color:var(--ink);display:block;line-height:1.15}
.kp-badge span{font-size:11.5px;color:var(--slate)}
.kp-badge.b1{top:8%;right:-2%;animation:floaty 6s var(--ease) infinite}
.kp-badge.b2{bottom:6%;left:-4%;animation:floaty 6.5s var(--ease) infinite .7s}

@media(max-width:980px){
  .kplus-grid{grid-template-columns:1fr;gap:var(--s4)}
  .kp-stage{min-height:360px;order:-1}
}
@media(max-width:560px){
  .kplus .kp-feats{grid-template-columns:1fr}
  .diff{font-size:14.5px}
}

/* respect reduced motion for all the new motion */
@media(prefers-reduced-motion:reduce){
  .hero-logo,.hero-logo g,.kp-badge.b1,.kp-badge.b2{animation:none!important;opacity:1!important;transform:none!important}
}

/* ============================================================
   v7  ·  MOBILE APP  ·  native app highlight (das Krasseste)
   Stylised phone (no distortion). Swap in real app screens later.
   ============================================================ */
.appsec{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,var(--cream-3),var(--cream) 60%)}
.appsec .app-aura{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(560px 320px at 14% 6%,rgba(13,164,90,.14),transparent 62%),
  radial-gradient(560px 360px at 90% 96%,rgba(246,137,12,.16),transparent 62%)}
.appsec .wrap{position:relative;z-index:1}
.app-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:var(--s5);align-items:center}
.app-text h2{font-size:clamp(32px,4.4vw,54px);margin:16px 0 16px}
.app-text h2 .grad{background:linear-gradient(100deg,var(--orange),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.app-text .lead2{font-size:19px;color:var(--ink-2);max-width:46ch;margin-bottom:30px}
.app-points{display:flex;flex-direction:column;gap:18px;margin-bottom:30px}
.app-point{display:flex;gap:14px;align-items:flex-start}
.app-point .pi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none}
.app-point .pi svg{width:22px;height:22px}
.app-point h4{font-size:16.5px;margin-bottom:3px}
.app-point p{font-size:14.5px;color:var(--slate)}
.app-platforms{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--slate);font-size:14.5px;font-weight:600}
.app-platforms .pf{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.7);border:1px solid var(--warm-line);border-radius:999px;padding:8px 14px;color:var(--ink-2)}
.app-platforms .pf svg{width:16px;height:16px}

/* app capability visual: brand tile + floating feature chips (NOT a screenshot) */
.phone-stage{position:relative;display:grid;place-items:center;min-height:480px}
.phone-stage .glow{position:absolute;width:360px;height:360px;border-radius:50%;filter:blur(80px);opacity:.55;
  background:radial-gradient(closest-side,rgba(246,137,12,.5),transparent 70%),radial-gradient(closest-side,rgba(13,164,90,.42),transparent 70%);
  background-position:20% 25%,80% 75%;background-repeat:no-repeat;background-size:60% 60%,55% 55%}
.appicon{position:relative;z-index:2;width:212px;height:212px;border-radius:28%;background:linear-gradient(160deg,#fff,#fff4e6);
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.85);
  box-shadow:0 60px 120px -42px rgba(28,18,4,.5),0 16px 44px -22px rgba(28,18,4,.35);
  animation:logoFloat 8s var(--ease) infinite}
.appicon img{width:64%;height:auto}
.app-badge{position:absolute;z-index:3;background:#fff;border-radius:14px;padding:10px 13px;display:flex;align-items:center;gap:9px;box-shadow:0 24px 50px -22px rgba(28,18,4,.5);border:1px solid rgba(255,255,255,.7)}
.app-badge .bi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.app-badge .bi svg{width:19px;height:19px}
.app-badge b{font-size:13px;color:var(--ink);display:block;line-height:1.15}
.app-badge span{font-size:11.5px;color:var(--slate)}
.app-badge.a1{top:8%;right:-2%;animation:floaty 6s var(--ease) infinite}
.app-badge.a2{bottom:9%;left:-4%;animation:floaty 6.5s var(--ease) infinite .8s}
.app-badge.a3{top:20%;left:-4%;animation:floaty 6.2s var(--ease) infinite .4s}
.app-badge.a4{bottom:20%;right:-3%;animation:floaty 6.8s var(--ease) infinite 1.1s}

@media(max-width:980px){
  .app-grid{grid-template-columns:1fr;gap:var(--s4)}
  .phone-stage{min-height:440px;order:-1}
}
@media(prefers-reduced-motion:reduce){.appicon,.app-badge{animation:none!important}}
@media(max-width:560px){.app-badge.a3,.app-badge.a4{display:none}}

/* ============================================================
   v8  ·  SAMMELKARTEN (Fußball-Cards, the showstopper)
          + FAMILIE & CHAT (Eltern sehen Kinder, Vereins-Chat)
   ============================================================ */
.cards-sec{position:relative;overflow:hidden;background:
  radial-gradient(700px 460px at 90% -8%,rgba(246,137,12,.22),transparent 60%),
  radial-gradient(640px 480px at 4% 110%,rgba(13,164,90,.18),transparent 60%),
  linear-gradient(165deg,#11182c,#0a1424 72%)}
.cards-sec .gridtex{position:absolute;inset:0;background-image:linear-gradient(var(--line-d) 1px,transparent 1px),linear-gradient(90deg,var(--line-d) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 85% 75% at 50% 25%,#000,transparent 78%);opacity:.5;pointer-events:none}
.cards-sec .wrap{position:relative;z-index:1}
.cards-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--s5);align-items:center}
.cards-text .eyebrow{color:var(--orange)}
.cards-text h2{color:#fff;font-size:clamp(34px,4.6vw,56px);margin:16px 0 18px}
.cards-text h2 .grad{background:linear-gradient(100deg,var(--orange),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.cards-text .lead2{color:var(--slate-3);font-size:19px;max-width:46ch;margin-bottom:26px}
.cards-list{display:flex;flex-direction:column;gap:14px;margin-bottom:30px}
.cards-list .ci{display:flex;align-items:center;gap:12px;color:#e7ecf4;font-size:16px;font-weight:500}
.cards-list .ci svg{width:20px;height:20px;flex:none}
.cards-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(246,137,12,.16);border:1px solid rgba(246,137,12,.3);color:#ffce9a;font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;margin-bottom:6px}

/* the collectible card (illustrative, animated holo sheen) */
.card-stage{position:relative;display:grid;place-items:center;min-height:620px}
.card-stage .glow{position:absolute;width:380px;height:380px;border-radius:50%;filter:blur(80px);opacity:.6;
  background:radial-gradient(closest-side,rgba(246,137,12,.55),transparent 70%),radial-gradient(closest-side,rgba(13,164,90,.4),transparent 70%);
  background-position:30% 25%,70% 75%;background-repeat:no-repeat;background-size:60% 60%,55% 55%}
/* echte Portal-FUT-Card (gerendert via futcard.js, Klasse .fc-card) */
.card-stage .fc-card{position:relative;z-index:3;margin:0 auto;animation:logoFloat 8s var(--ease) infinite}
/* peeking blank cards behind for the "collection" feel (2D rotate, no perspective) */
.cardstack{position:absolute;z-index:1;width:328px;height:548px;border-radius:26px;opacity:.16;filter:blur(1px);
  background:linear-gradient(150deg,#19b85f 0%,#2f86f0 44%,#0a2236 66%,#f6890c 100%)}
.cardstack.b-l{transform:rotate(-9deg) translateX(-50px)}
.cardstack.b-r{transform:rotate(9deg) translateX(50px)}
.card-badge{position:absolute;z-index:4;background:#fff;border-radius:14px;padding:10px 13px;display:flex;align-items:center;gap:9px;box-shadow:0 24px 50px -22px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.7)}
.card-badge .bi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:rgba(246,137,12,.16)}
.card-badge .bi svg{width:19px;height:19px}
.card-badge b{font-size:13px;color:var(--ink);display:block;line-height:1.15}
.card-badge span{font-size:11.5px;color:var(--slate)}
.card-badge.c1{top:9%;left:-3%;animation:floaty 6s var(--ease) infinite}
.card-badge.c2{bottom:10%;right:-3%;animation:floaty 6.6s var(--ease) infinite .7s}

/* ---------- Familie & Chat ---------- */
.family{background:var(--cream-2)}
.fam-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fam-card{background:#fff;border:1px solid var(--line-l);border-radius:var(--r-lg);padding:34px 30px;box-shadow:0 30px 60px -38px rgba(28,18,4,.3)}
.fam-card .fi{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px}
.fam-card .fi svg{width:27px;height:27px}
.fam-card h3{font-size:23px;margin-bottom:10px}
.fam-card>p{color:var(--slate);font-size:16px;margin-bottom:18px}
.fam-card .flist li{font-size:15px}

@media(max-width:980px){
  .cards-grid{grid-template-columns:1fr;gap:var(--s4)}
  .card-stage{min-height:600px;order:-1}
  .fam-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.card-stage .fc-card,.card-badge{animation:none!important}}
@media(max-width:760px){.card-badge{display:none}}


/* ============================================================
   V14 — "Dark Court trifft Freundlich" (App-Design-Sprache)
   Navy #1A1A2E · Grün #0AA758→#088A48 · Orange #FC8B09
   Gleiche Sprache wie Kinovo-App & Portal.
   ============================================================ */
:root{
  --navy:#1A1A2E; --navy-1:#15152A; --navy-2:#23233C; --navy-3:#30304E;
  --orange:#FC8B09; --orange-d:#D97607; --orange-ink:#221200;
  --green:#0AA758; --green-2:#12C96A; --green-d:#088A48; --blue:#2E6BA8;
  --slate:#5C5C70; --slate-2:#9C9CB2; --slate-3:#CACAD8;
  --ink:#16161F; --ink-2:#2C2C3E;
  --bg:#F7F8FA; --bg-soft:#F1F2F6; --card:#fff;
  --line-l:#E8E9EF; --line-l2:#DBDCE5; --line-d:rgba(255,255,255,.09);
  --cream:#F7F8FA; --cream-2:#F1F2F6; --cream-3:#FFFFFF;
  --warm-line:rgba(17,17,34,.08);
  --shadow-card:0 30px 60px -30px rgba(17,17,34,.28);
  --shadow-pop:0 24px 50px -24px rgba(17,17,34,.3);
}

/* Typography: Space Grotesk display, Inter text */
body{font-family:'Inter',sans-serif}
h1,h2,h3,h4,.brand,.acc summary,.fcontent blockquote,.fcol h5,.drawer a.dl,.metric .num,.fphoto .ini{font-family:'Space Grotesk',sans-serif}
.btn{font-family:'Inter',sans-serif}
.field input,.field textarea{font-family:'Inter',sans-serif}

/* Primary CTA: Kinovo green gradient (App-Signatur) */
.btn-primary{background:linear-gradient(180deg,var(--green) 0%,var(--green-d) 100%);color:#fff;box-shadow:0 10px 24px -8px rgba(10,167,88,.45)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(10,167,88,.55);filter:none}

/* Header on navy */
header.on-dark{background:rgba(26,26,46,.78);border-bottom-color:rgba(255,255,255,.08)}

/* ===== HERO: Navy Stage mit Court-Lines & Grün-Glow ===== */
.hero-light{background:
  radial-gradient(900px 520px at 78% -10%,rgba(18,201,106,.20),transparent 60%),
  radial-gradient(700px 460px at 4% 34%,rgba(252,139,9,.09),transparent 55%),
  linear-gradient(180deg,#20203A 0%,var(--navy) 36%,#111122 100%)}
.hero-light::before,.hero-light::after{content:'';position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:0}
.hero-light::before{top:-420px;width:1280px;height:1280px;border:1.5px solid rgba(255,255,255,.045)}
.hero-light::after{top:-420px;width:880px;height:880px;border:1.5px solid rgba(255,255,255,.07)}
.hero-light .warm-aura{background:
  radial-gradient(640px 380px at 82% 6%,rgba(18,201,106,.14),transparent 62%),
  radial-gradient(560px 340px at 10% 92%,rgba(46,107,168,.12),transparent 62%)}
.hero-light h1{color:#fff}
.hero-light .lead{color:var(--slate-3)}
.hero-light .announce{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff;box-shadow:none;backdrop-filter:blur(8px)}
.hero-light .announce .tagx{background:var(--orange);color:var(--orange-ink)}
.hero-light .scroll-cue{color:var(--slate-2)}
.hero-light .diff{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13);box-shadow:none}
.hero-light .diff .o{color:var(--slate-2)}
.hero-light .diff .p{color:#fff}
.hero-light .floatcard{background:rgba(26,26,46,.74);border-color:rgba(255,255,255,.14);color:#fff}
.hero-light .floatcard .s{color:var(--slate-2)}
.hero-light .shot-halo{background:
  radial-gradient(closest-side,rgba(18,201,106,.30),transparent 70%),
  radial-gradient(closest-side,rgba(252,139,9,.16),transparent 70%)}
.hero-light .bframe{background:#fff;border-color:rgba(255,255,255,.18);
  box-shadow:0 60px 130px -40px rgba(0,0,0,.65),0 12px 40px -20px rgba(0,0,0,.4)}

/* Logo: Navy-Pfade werden Weiß, Blau aufgehellt (sonst unsichtbar auf Navy) */
.hero-logo .g-navy{fill:#ffffff}
.hero-logo .g-blue{fill:#4A90CB}

/* ===== Weißes Sheet steigt aus der Navy-Bühne (App-Signatur) ===== */
.marquee-light{background:#fff;border-radius:28px 28px 0 0;margin-top:-28px;position:relative;z-index:1}
.marquee-light .mq{border:1px solid var(--line-l);color:var(--ink-2);background:var(--bg)}
.marquee-light .mq svg{color:var(--green)}

/* Dark stages: neue Navy-Hues */
.dark{background:linear-gradient(180deg,var(--navy) 0%,#111122 100%)}
.kplus{background:
  radial-gradient(700px 420px at 88% -6%,rgba(252,139,9,.20),transparent 60%),
  radial-gradient(620px 460px at 6% 108%,rgba(18,201,106,.16),transparent 60%),
  linear-gradient(165deg,#20203A,#15152A 70%)}
.cards-sec{background:
  radial-gradient(700px 460px at 90% -8%,rgba(252,139,9,.18),transparent 60%),
  radial-gradient(640px 480px at 4% 110%,rgba(18,201,106,.15),transparent 60%),
  linear-gradient(165deg,#1E1E36,#15152A 72%)}
.appsec{background:radial-gradient(120% 90% at 50% 0%,#fff,var(--bg) 60%)}
.appsec .app-aura{background:
  radial-gradient(560px 320px at 14% 6%,rgba(18,201,106,.10),transparent 62%),
  radial-gradient(560px 360px at 90% 96%,rgba(252,139,9,.10),transparent 62%)}
.family{background:var(--bg-soft)}
footer.site{background:#0D0D1A}

/* V14 header: navy glass at top, white sheet once scrolled */
header.on-dark:not(.scrolled){background:rgba(26,26,46,.72);border-bottom:1px solid rgba(255,255,255,.08)}
header.on-dark:not(.scrolled) .brand{color:#fff}
header.on-dark:not(.scrolled) .brand .logo{filter:brightness(0) invert(1)}
header.on-dark:not(.scrolled) .navlinks a{color:var(--slate-2)}
header.on-dark:not(.scrolled) .navlinks a:hover{color:#fff;background:rgba(255,255,255,.06)}
header.on-dark:not(.scrolled) .navcta .login{color:var(--slate-2)}
header.on-dark:not(.scrolled) .navcta .login:hover{color:#fff}
header.on-dark:not(.scrolled) .menu-btn svg{stroke:#fff}
header.on-dark.scrolled{background:rgba(255,255,255,.92);border-bottom:1px solid var(--line-l);box-shadow:0 10px 34px -24px rgba(17,17,34,.25)}
header.on-dark.scrolled .brand{color:var(--navy)}
header.on-dark.scrolled .brand .logo{filter:none}

/* Footer/Drawer logo: white mono, no white box */
footer.site .brand .logo,.drawer .top .brand .logo{background:none;border-radius:0;padding:0;box-shadow:none}
footer.site .brand .logo,.drawer .brand .logo{filter:brightness(0) invert(1)}

/* V14 serious: no giant hero logo (brand lives in the header), calmer accents */
.hero-logo{display:none}
.hero-light .announce .tagx{background:var(--green);color:#04210f}
.hero-light .diff .p b{background:linear-gradient(120deg,var(--green-2),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-light .diff .arrow{color:var(--green-2)}
.eyebrow{color:var(--green)}
.hero-light section{padding-top:calc(var(--s6) + var(--hdr-top)) !important}

/* V14: real app screens in the app section */
.phone-stage .phone-shot{position:relative;z-index:2;width:min(290px,74%);border-radius:38px;overflow:hidden;
  box-shadow:0 60px 110px -36px rgba(17,17,34,.5),0 18px 44px -20px rgba(17,17,34,.3)}
.phone-stage .phone-shot img{display:block;width:100%;height:auto}
.phone-stage .glow{background:radial-gradient(closest-side,rgba(18,201,106,.22),transparent 70%)}
.app-screens{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:var(--s6);align-items:start}
.ascr{margin:0}
.ascr img{display:block;width:100%;height:auto;border-radius:26px;
  box-shadow:0 34px 70px -32px rgba(17,17,34,.4),0 10px 26px -14px rgba(17,17,34,.2);
  transition:transform .3s var(--ease)}
.ascr:hover img{transform:translateY(-8px)}
.ascr:nth-child(even){margin-top:34px}
.ascr figcaption{text-align:center;font-size:13.5px;font-weight:600;color:var(--slate);margin-top:14px}
@media(max-width:900px){
  .app-screens{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;
    margin-inline:-28px;padding-inline:28px;padding-bottom:10px;-webkit-overflow-scrolling:touch}
  .ascr{flex:0 0 46%;scroll-snap-align:start}
  .ascr:nth-child(even){margin-top:0}
}

/* V14 serious: calm green gradients instead of orange-green rainbows */
.phero h1 .grad,.app-text h2 .grad,.cards-text h2 .grad{background:linear-gradient(120deg,var(--green-2),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.kplus h2 .plus{background:linear-gradient(120deg,var(--green-2),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.metric .num{background:linear-gradient(120deg,var(--green-2),var(--green));-webkit-background-clip:text;background-clip:text}

/* V14: Herzstück card in green (App-Signatur) instead of warm peach */
.card.heart{background:linear-gradient(165deg,#fff,#EDFAF3);border-color:rgba(10,167,88,.35);box-shadow:0 30px 60px -34px rgba(10,167,88,.4)}
.card.heart:hover{box-shadow:0 38px 70px -34px rgba(10,167,88,.5)}
.card .heart-tag{background:linear-gradient(180deg,var(--green),var(--green-d));color:#fff}
.card.heart h3 .plus{background:linear-gradient(120deg,var(--green-2),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.card .cardlink{color:var(--green-d)}

/* ============================================================
   V14.1 — KRASSE Phones: 3D-Tilt, laufender Gradient-Border,
   Shine-Sweep, Glow (Kinovo+ Membercard-Signatur)
   ============================================================ */
@property --pa { syntax:'<angle>'; inherits:false; initial-value:0deg; }

/* Haupt-Phone: schwebt in 3D mit laufendem Grün→Orange-Ring */
.phone-stage{perspective:1400px}
.phone-stage .phone-shot{
  width:min(300px,76%);border-radius:42px;overflow:hidden;
  padding:3px;
  background:conic-gradient(from var(--pa),#0AA758,#12C96A,#FC8B09,#0AA758);
  animation:phoneRing 6s linear infinite;
  transform:rotateY(-16deg) rotateX(5deg) rotateZ(1.5deg);
  transform-style:preserve-3d;
  box-shadow:-50px 70px 110px -38px rgba(17,17,34,.55),0 24px 60px -24px rgba(10,167,88,.25);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
  position:relative;z-index:2}
.phone-stage .phone-shot img{border-radius:39px}
.phone-stage:hover .phone-shot{transform:rotateY(-5deg) rotateX(2deg) rotateZ(0deg);
  box-shadow:-24px 60px 110px -38px rgba(17,17,34,.5),0 30px 70px -24px rgba(10,167,88,.35)}
@keyframes phoneRing{to{--pa:360deg}}
.phone-stage .phone-shot::after{content:'';position:absolute;inset:3px;border-radius:39px;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);
  background-size:220% 100%;animation:phoneShine 4.5s var(--ease) infinite}
@keyframes phoneShine{0%{background-position:120% 0}55%{background-position:-60% 0}100%{background-position:-60% 0}}
.phone-stage .glow{width:460px;height:460px;opacity:.8;
  background:radial-gradient(closest-side,rgba(18,201,106,.30),transparent 68%),
             radial-gradient(closest-side at 70% 70%,rgba(252,139,9,.16),transparent 70%)}

/* Galerie: Phones fächern sich in 3D auf, Hover holt sie nach vorn */
.app-screens{perspective:1800px}
.ascr img{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.ascr:nth-child(1) img{transform:rotateY(14deg) rotateX(2deg)}
.ascr:nth-child(2) img{transform:rotateY(7deg) rotateX(1deg)}
.ascr:nth-child(3) img{transform:none}
.ascr:nth-child(4) img{transform:rotateY(-7deg) rotateX(1deg)}
.ascr:nth-child(5) img{transform:rotateY(-14deg) rotateX(2deg)}
.ascr:hover img{transform:rotateY(0) translateY(-12px) scale(1.05);
  box-shadow:0 50px 90px -34px rgba(17,17,34,.5),0 0 0 3px rgba(10,167,88,.35),0 20px 50px -20px rgba(10,167,88,.3)}
.ascr figcaption{transition:color .3s}
.ascr:hover figcaption{color:var(--green-d);font-weight:700}
@media(max-width:900px){
  .ascr img{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .phone-stage .phone-shot{animation:none;transform:none}
  .phone-stage .phone-shot::after{animation:none}
}

/* V14.2: real sticker artwork in the Kinovo+ card, gallery now 4 phones */
.kp-stickers.real{display:flex;gap:10px;justify-content:space-between;margin-top:18px}
.kp-sti{width:17.5%;height:auto;border-radius:50%;filter:drop-shadow(0 8px 16px rgba(17,17,34,.18));
  transition:transform .3s var(--ease)}
.kp-sti:hover{transform:scale(1.12) rotate(-4deg)}
.kp-sti.locked{filter:grayscale(1) opacity(.38)}
.app-screens{grid-template-columns:repeat(4,1fr)}
.ascr:nth-child(4) img{transform:rotateY(-7deg) rotateX(1deg)}
.ascr:nth-child(5) img{transform:none}
/* symmetric fan for 4 phones */
.ascr:nth-child(1) img{transform:rotateY(12deg) rotateX(2deg)}
.ascr:nth-child(2) img{transform:rotateY(4deg)}
.ascr:nth-child(3) img{transform:rotateY(-4deg)}
.ascr:nth-child(4) img{transform:rotateY(-12deg) rotateX(2deg)}
.ascr:hover img{transform:rotateY(0) translateY(-12px) scale(1.05)}

/* ============================================================
   V14.3 — App-Galerie als Navy-Bühne, Phones angeschnitten
   ============================================================ */
.app-gallery{position:relative;overflow:hidden;border-radius:28px;margin-top:var(--s6);
  padding:clamp(36px,5vw,60px) clamp(22px,4vw,56px) 0;
  background:
    radial-gradient(700px 420px at 86% -12%,rgba(18,201,106,.22),transparent 60%),
    radial-gradient(520px 340px at 4% 110%,rgba(252,139,9,.12),transparent 60%),
    linear-gradient(165deg,#20203A,#15152A 72%)}
.app-gallery .gridtex{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line-d) 1px,transparent 1px),linear-gradient(90deg,var(--line-d) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse 85% 75% at 50% 20%,#000,transparent 78%)}
.app-gallery .ag-glow{position:absolute;left:50%;bottom:-30%;transform:translateX(-50%);width:80%;height:60%;
  background:radial-gradient(closest-side,rgba(18,201,106,.22),transparent 70%);filter:blur(40px);pointer-events:none}
.ag-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  flex-wrap:wrap;margin-bottom:clamp(30px,4vw,48px)}
.ag-head h3{color:#fff;font-size:clamp(23px,2.8vw,34px);letter-spacing:-0.02em;margin-top:10px}
.app-gallery .app-screens{position:relative;z-index:1;margin-top:0;gap:clamp(16px,2.6vw,36px);align-items:start}
.app-gallery .ascr{margin:0 0 -11%}
.app-gallery .ascr:nth-child(even){margin-top:34px}
.app-gallery .ascr img{border-radius:26px 26px 0 0;
  box-shadow:0 -14px 50px -20px rgba(0,0,0,.55),0 30px 80px -30px rgba(0,0,0,.6)}
.app-gallery .ascr:hover img{transform:rotateY(0) translateY(-14px) scale(1.02);
  box-shadow:0 0 0 3px rgba(18,201,106,.45),0 -14px 60px -18px rgba(18,201,106,.25),0 34px 80px -30px rgba(0,0,0,.65)}
@media(max-width:900px){
  .app-gallery{border-radius:22px}
  .app-gallery .app-screens{margin-inline:0;padding-inline:0}
  .app-gallery .ascr{flex:0 0 58%;margin-bottom:-12%}
  .app-gallery .ascr:nth-child(even){margin-top:0}
  .ag-head .btn{display:none}
}

/* ============================================================
   V14.4 — Echter iPhone-Rahmen (CSS): Bezel + Dynamic Island
   ============================================================ */
.iphone{position:relative;display:block;border-radius:52px;background:#101018;padding:11px;
  box-shadow:0 0 0 1.5px #4A4A58,0 0 0 3px rgba(255,255,255,.06)}
.iphone::after{content:'';position:absolute;top:24px;left:50%;transform:translateX(-50%);
  width:31%;height:26px;background:#0B0B10;border-radius:999px;z-index:2}
.iphone img{display:block;width:100%;height:auto;border-radius:42px;
  transform:none!important;box-shadow:none!important;transition:none}

/* tilts/hover move to the frame */
.ascr .iphone{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.ascr:nth-child(1) .iphone{transform:rotateY(12deg) rotateX(2deg)}
.ascr:nth-child(2) .iphone{transform:rotateY(4deg)}
.ascr:nth-child(3) .iphone{transform:rotateY(-4deg)}
.ascr:nth-child(4) .iphone{transform:rotateY(-12deg) rotateX(2deg)}
.app-gallery .ascr .iphone{border-radius:52px 52px 0 0;padding-bottom:0;
  box-shadow:0 0 0 1.5px #4A4A58,0 -14px 50px -20px rgba(0,0,0,.55),0 30px 80px -30px rgba(0,0,0,.6)}
.app-gallery .ascr .iphone img{border-radius:42px 42px 0 0}
.app-gallery .ascr:hover .iphone{transform:rotateY(0) translateY(-14px) scale(1.02);
  box-shadow:0 0 0 1.5px #4A4A58,0 0 0 4px rgba(18,201,106,.4),0 34px 80px -30px rgba(0,0,0,.65)}

/* main phone keeps the running gradient ring around the frame */
.phone-stage .phone-shot{padding:4px;border-radius:58px;overflow:visible}
.phone-stage .phone-shot .iphone{border-radius:54px}
.phone-stage .phone-shot .iphone img{border-radius:44px}
.phone-stage .phone-shot::after{border-radius:54px;inset:4px}
/* island: smaller, higher, like real hardware */
.iphone::after{top:15px;height:21px;width:25%}