/* ezrushes.com — seit 2026-09-28 im Design des Review-Portals (portal/lib.php + theme.php):
   dieselben Farbwerte, dieselbe Display-Schrift, dieselben Radien wie Portal und App.
   Werte = theme_tokens('dark', '#ff6b00'). Wer hier etwas ändert, ändert es auch dort. */
:root{
  --bg:#0e1013; --bg2:#15181d; --card:#15181d; --panel2:#1b202a; --line:#242a33; --line2:#242a33;
  --ctl:#323a47; --ctl-h:#48536a;                 /* Rand von Buttons/Feldern, gedrückt */
  --acc:#ff6b00; --acc-dark:#d95a00; --acc-soft:#ff9564;
  --t1:#e9ecf1; --t2:#b8bec7; --t3:#9099a8;
  --t4:#7d8594;                                    /* Portal-t4 ist #6d7580 (4,0:1) — hier AA-sicher 5,0:1 */
  --ok:#3ddc84; --warn:#f0b24a; --bad:#ff5f56; --r:6px; --maxw:1080px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --disp:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--t1);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.btn{display:inline-block;background:var(--acc-dark);color:#fff;font-weight:500;font-size:15px;letter-spacing:.02em;
  padding:13px 26px;border-radius:var(--r);border:0;cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover{background:var(--acc)}
.btn.sm{padding:8px 16px;font-size:14px;border-radius:5px}
.btn-ghost{background:transparent;border:1px solid var(--ctl);color:var(--t1)}
.btn-ghost:hover{background:var(--panel2);border-color:var(--ctl-h)}

/* header */
header{position:sticky;top:0;z-index:10;background:rgba(14,16,19,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line2)}
header .wrap{display:flex;align-items:center;gap:12px;height:64px}
.brand{font-weight:800;font-size:21px;letter-spacing:-.01em}
.brand span{color:var(--acc)}
header nav{margin-left:auto;display:flex;gap:8px;align-items:center}
header nav a.nav-link{color:var(--t3);font-size:14px;padding:8px 12px;border-radius:8px}
header nav a.nav-link:hover{color:var(--t1)}

/* sections */
section{padding:56px 0}
.section-head{text-align:center;margin-bottom:40px}
.section-head h2{font-size:32px;font-weight:800;letter-spacing:-.02em}
.section-head p{color:var(--t3);margin-top:8px;font-size:17px}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
@media(max-width:860px){.tiers{grid-template-columns:1fr;max-width:440px;margin:0 auto}}
.tier{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:30px;
  display:flex;flex-direction:column;text-align:center}
.tier.hot{border-color:var(--acc);box-shadow:0 10px 34px rgba(255,107,0,.14)}
.tier .tname{font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.tier.hot .tname{color:var(--acc)}
.tier .amount{font-size:42px;font-weight:800;letter-spacing:-.02em;margin-top:10px}
.tier .amount small{font-size:16px;color:var(--t3);font-weight:500}
.tier .amount .was{font-size:22px;font-weight:600;color:var(--t4);text-decoration:line-through;margin-right:8px}
.tier .amount .from{font-size:16px;font-weight:500;color:var(--t3);margin-right:6px}
.tier .eb-note{color:var(--t3);font-size:12.5px;margin-top:4px}
/* Self-hosted: zwei Sätze statt Feature-Liste — für wen und warum */
.tier .tdesc{text-align:left;margin:22px 0;display:grid;gap:12px}
.tier .tdesc p{color:var(--t2);font-size:14.5px;line-height:1.55}
.tier .tdesc p+p{color:var(--t3)}
.tier li a,.contract-sum li a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.tier li a:hover,.contract-sum li a:hover{color:var(--t1)}
.tier ul{list-style:none;text-align:left;margin:22px 0;display:grid;gap:10px}
.tier li{display:flex;gap:10px;color:var(--t2);font-size:14.5px}
.tier li::before{content:"";flex:none;width:13px;height:7px;margin-top:6px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.tier .btn,.tier .btn-ghost{margin-top:auto;width:100%;text-align:center;padding:13px 0;border-radius:var(--r);display:inline-block;font-weight:500;font-size:15px}
.tier .badge-hot{display:inline-block;background:rgb(255 107 0 / .16);color:var(--acc);font-size:11px;font-weight:600;
  padding:4px 9px;border-radius:4px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.pay-note{color:var(--t4);font-size:12.5px;margin-top:16px;text-align:center}

/* compatibility table */
.compat-wrap{max-width:680px;margin:0 auto;overflow-x:auto}
table.compat{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;font-size:14.5px}
table.compat th{color:var(--t4);text-transform:uppercase;font-size:11.5px;letter-spacing:.05em;
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
table.compat td{padding:12px 16px;border-bottom:1px solid var(--line2);color:var(--t2)}
table.compat tr:last-child td{border-bottom:0}
.cpill{display:inline-block;padding:3px 9px;border-radius:4px;font-size:11px;font-weight:600;white-space:nowrap;
  letter-spacing:.06em;text-transform:uppercase}
.cpill.ok{background:rgb(61 220 132 / .16);color:var(--ok)}
.cpill.no{background:rgb(255 95 86 / .16);color:var(--bad)}
.cpill.tba{background:rgb(255 107 0 / .16);color:var(--acc)}
.compat-note{max-width:680px;margin:14px auto 0;color:var(--t4);font-size:13px;text-align:center}

/* forms */
.formcard{color-scheme:dark;max-width:560px;margin:44px auto 70px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:32px}
.formcard h1{font-size:26px;line-height:1.2;margin-bottom:6px}
.formcard .sub{color:var(--t3);font-size:14.5px;margin-bottom:22px}
.frow{display:grid;gap:6px;margin-bottom:14px}
.frow label{font-size:13px;color:var(--t3);font-weight:600}
.frow input,.frow select,.frow textarea{background:var(--panel2);border:1px solid var(--ctl);border-radius:var(--r);
  color:var(--t1);font:inherit;font-size:15px;padding:10px 12px;width:100%}
.frow input:focus,.frow select:focus,.frow textarea:focus{outline:none;border-color:var(--acc)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.f2{grid-template-columns:1fr;row-gap:0}}
.fhint{color:var(--t4);font-size:12px}
.msg{border-radius:var(--r);padding:11px 14px;font-size:14px;margin-bottom:16px;color:var(--t1)}
.msg.err{background:rgb(255 95 86 / .1);border:1px solid var(--bad)}
.msg.ok{background:rgb(61 220 132 / .1);border:1px solid #22a05e}
.formcard .btn{width:100%;margin-top:8px}
/* Terminanfrage /book: Wunschzeiten als Raster (Mo–Fr × Tageszeit), Honeypot unsichtbar */
.formcard.book{max-width:620px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.slots-set{border:0;padding:0;margin:0 0 14px;min-width:0}
.slots-set legend{font-size:13px;color:var(--t3);font-weight:600;padding:0;margin-bottom:6px}
.slots{display:grid;grid-template-columns:44px repeat(3,minmax(0,1fr));gap:6px;align-items:center;margin-bottom:8px}
.slots .sh{font-size:12px;color:var(--t4);text-align:center;font-weight:600}
.slots .sd{font-size:13.5px;color:var(--t3);font-weight:600}
.slots .slot{display:grid;place-items:center;height:40px;border:1px solid var(--ctl);border-radius:var(--r);
  background:var(--panel2);cursor:pointer}
.slots .slot:hover{border-color:var(--t4)}
.slots .slot:has(input:checked){border-color:var(--acc);background:rgb(255 107 0 / .12)}
.slots .slot:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px;border-color:var(--acc)}
.slots .slot input{width:17px;height:17px;accent-color:var(--acc);cursor:pointer}
.formcard .consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--t3);margin:6px 0 14px}
.formcard .consent input{width:17px;height:17px;margin-top:2px;flex:none;accent-color:var(--acc)}
.formcard .consent a{color:var(--acc)}
.subline{text-align:center;color:var(--t4);font-size:13.5px;margin-top:16px}
.subline a{color:var(--acc)}

/* account / contract */
.acct{max-width:760px;margin:40px auto 70px}
.acct h1{font-size:28px;margin-bottom:20px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px 24px;margin-bottom:18px}
.panel h2{font-size:16px;font-weight:700;margin-bottom:12px}
.kv{display:grid;grid-template-columns:180px 1fr;gap:7px 16px;font-size:14.5px}
.kv .k{color:var(--t3)}
@media(max-width:560px){.kv{grid-template-columns:1fr}}
.contract-sum li{display:flex;gap:10px;color:var(--t2);font-size:14.5px;margin:6px 0;list-style:none}
.contract-sum li::before{content:"";flex:none;width:13px;height:7px;margin-top:6px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.quotabar{height:9px;border-radius:6px;background:rgb(255 255 255 / .10);overflow:hidden;margin-top:6px}
.quotabar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#ff6b00,#ff9564)}

/* install guide */
.guide{max-width:680px;margin:auto;padding:36px 24px 70px}
.guide h1{font-size:30px;margin:0 0 6px}
.guide .sub{color:var(--t3);margin:0 0 26px;line-height:1.6}
.dlbtn{display:inline-flex;align-items:center;gap:10px;background:var(--acc-dark);color:#fff;
  font-weight:500;padding:14px 22px;border-radius:var(--r);font-size:16px}
.dlbtn:hover{background:var(--acc)}
.dlbtn svg{width:20px;height:20px}
.dlhint{color:var(--t4);font-size:13px;margin:10px 0 30px}
ol.steps{list-style:none;counter-reset:s;margin:0;padding:0}
ol.steps li{counter-increment:s;position:relative;padding:0 0 22px 52px;border-left:1px solid var(--line);margin-left:18px}
ol.steps li:last-child{border-left:1px solid transparent}
ol.steps li::before{content:counter(s);position:absolute;left:-18px;top:-2px;width:36px;height:36px;
  border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--acc);font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:15px}
ol.steps h3{margin:0 0 4px;font-size:16px;color:var(--t1)}
ol.steps p{margin:0;color:var(--t2);line-height:1.7;font-size:14px}
ol.steps code{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--acc-soft);font-size:13px}
.note{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:28px 0 0;color:var(--t2);line-height:1.7;font-size:14px}
.note b{color:var(--t1)}

/* FAQ */
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:10px}
.faq-item summary{list-style:none;cursor:pointer;font-size:16px;font-weight:600;color:var(--t1);
  padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--acc)}
.faq-item summary::after{content:"";flex:none;width:8px;height:8px;margin-top:-3px;
  border-right:2px solid var(--t3);border-bottom:2px solid var(--t3);transform:rotate(45deg);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.faq-item p{color:var(--t3);font-size:14px;margin:0;padding:0 20px 18px}
.faq-item p+p{margin-top:-6px}
.faq-item a{color:var(--acc)}

/* ops admin */
.ops{max-width:1200px;margin:34px auto 70px;padding:0 24px}
.ops h1{font-size:26px;margin-bottom:18px}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.stat .n{font-size:26px;font-weight:800}
.stat .l{color:var(--t3);font-size:12.5px;margin-top:2px}
table.opst{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
table.opst th{color:var(--t4);text-transform:uppercase;font-size:11px;letter-spacing:.05em;
  text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
table.opst td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
table.opst tr:last-child td{border-bottom:0}
table.opst .mut{color:var(--t4);font-size:12px}
.tierpill{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em}
.tierpill.free{background:var(--panel2);color:var(--t3)}
.tierpill.pro{background:rgb(255 107 0 / .16);color:var(--acc)}
.tierpill.teams{background:#12232a;color:#5ab8ff}
.tierpill.none{background:var(--panel2);color:var(--t4)}
.q{min-width:130px}
.q .quotabar{margin-top:4px}
.q .quotabar i.warn{background:linear-gradient(90deg,#e04b3a,#ff7a5c)}
.opswrap{overflow-x:auto}
table.opst select{background:var(--bg);border:1px solid var(--line);border-radius:7px;
  color:var(--t3);font-size:12px;padding:3px 6px;margin-top:6px;display:block}
/* Ablaufdatum eines Pro-Vertrags (ops) */
table.opst .endform{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:8px;max-width:190px}
table.opst .endform label{width:100%}
table.opst .endform input[type=date]{background:var(--bg);border:1px solid var(--line);border-radius:7px;
  color:var(--t2);font:inherit;font-size:12px;padding:3px 6px;color-scheme:dark}
table.opst .endform .btn.sm{font-size:11.5px;padding:4px 10px}

/* footer */
footer{border-top:1px solid var(--line2);padding:32px 0;margin-top:40px;color:var(--t4);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
footer a{color:var(--t3)}footer a:hover{color:var(--t1)}
footer .sp{margin-left:auto}

/* legal */
.legal{max-width:760px;margin:40px auto 70px;padding:0 24px;color:var(--t2);font-size:14.5px}
.legal h1{font-size:28px;margin-bottom:18px;color:var(--t1)}
.legal h2{font-size:17px;margin:24px 0 8px;color:var(--t1)}
.legal p{margin-bottom:10px}

@media(max-width:720px){
  .section-head h2{font-size:26px}
  header nav .nav-link{display:none}
}

/* ── Startseite (Redesign 2026-10 „Produktgeschichte“, Taste-Skill): alles unter .home ─────────────── */
.home{--ink:#0e1013;--ease:cubic-bezier(.16,1,.3,1);overflow-x:clip}
.home .w{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.home section{padding:0}
.home h1,.home h2,.home h3{font-family:var(--disp);text-wrap:balance}
.home :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.home .c-acc{color:var(--acc)}
.home .btn{transition:background .15s,border-color .15s,transform .3s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  .home .btn:hover{transform:translateY(-2px)}
  .home .btn:active{transform:translateY(0) scale(.98)}
}

/* ── Hero: Text links, Set-Loop (9:16) rechts im Seitenraster ───────────────────────────────────── */
.home .c-hero-copy{padding:44px 24px 40px;container-type:inline-size}
.home .c-h1{font-size:clamp(36px,11vw,84px);font-size:clamp(36px,15cqi,96px);font-weight:800;line-height:.98;
  letter-spacing:-.042em;margin:0 0 22px}
/* Kategorie-Zeile unter der h1: leiht „camera-to-cloud“ und grenzt im selben Satz ab */
.home .c-cat{font:700 clamp(19px,2.2vw,24px)/1.25 var(--disp);letter-spacing:-.015em;color:var(--t1);
  max-width:30ch;margin-bottom:14px;text-wrap:balance}
.home .c-h1 .l{display:block}
.home .c-h1 .l3{margin-top:.07em}
/* Markierung = Upload-Balken: orange Fläche läuft von links ein, dann erscheint die Schrift (dunkel, 6,6:1) */
.home .c-hl{position:relative;display:inline-block;color:var(--ink);padding:.03em .12em .11em;
  margin-left:-.12em;isolation:isolate}
.home .c-hl::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acc);border-radius:6px;transform-origin:0 50%}
.home .c-hl>span{display:inline-block}
.home .c-lead{color:var(--t2);font-size:19px;line-height:1.55;max-width:38ch;text-wrap:pretty}
.home .c-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.home .c-cta .btn{font-size:16px;padding:15px 30px}
.home .c-shot{margin:0}
.home .c-shot-frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg2)}
/* Handy/Tablet: 4:5-Ausschnitt des Loops — Köpfe der Piloten und die Remotes bleiben im Bild */
.home .c-shot .c-clip{position:absolute;inset:0;aspect-ratio:auto}
.home .c-shot .c-clip :is(img,video){object-position:50% 35%}
.home .c-shot figcaption{color:var(--t3);font-size:13.5px;line-height:1.5;padding:12px 24px 0;max-width:56ch}
@media (min-width:900px){
  /* Im Seitenraster wie Logo, Navigation und alle Abschnitte: Text links, Set-Loop rechts bis zur Rasterkante. */
  .home .c-hero{display:grid;align-items:center;max-width:var(--maxw);margin:0 auto;padding:40px 24px 24px;
    grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(36px,5vw,72px)}
  /* Die Hochkant-Spalte ist schmal — Textspalte und Headline deckeln, sonst wächst die h1 (cqi) auf
     niedrigen Laptop-Fenstern so weit, dass die Buttons unter den Rand rutschen */
  .home .c-hero-copy{grid-column:1;padding:16px 0 48px;max-width:560px}
  .home .c-h1{font-size:min(clamp(36px,15cqi,96px),12svh)}
  .home .c-shot{grid-column:2}
  /* Ungekürzt 9:16, Höhe nach dem Fenster — die Breite ergibt sich daraus */
  .home .c-shot-frame{border-radius:10px;aspect-ratio:9/16;height:clamp(460px,calc(100svh - 190px),720px)}
  .home .c-shot .c-clip :is(img,video){object-position:50% 50%}
  .home .c-shot figcaption{padding:12px 0 0;contain:inline-size}     /* Bildunterschrift weitet die Spalte nicht */
}
/* Niedrige Laptop-Fenster: mit der Kategorie-Zeile wird der Text höher — enger setzen, damit die
   Buttons im ersten Bild bleiben (gemessen bis 1366 × 657) */
@media (min-width:900px) and (max-height:800px){
  .home .c-hero{padding-top:24px}
  .home .c-hero-copy{padding-top:0}
  .home .c-h1{font-size:min(clamp(36px,15cqi,96px),10.5svh);margin-bottom:16px}
  .home .c-lead{font-size:17px;max-width:44ch}
  .home .c-cta{margin-top:22px}
}
@media (prefers-reduced-motion:no-preference){
  .home .c-h1 .l1,.home .c-cat,.home .c-lead,.home .c-cta{animation:c-up .9s var(--ease) both}
  .home .c-h1 .l1{animation-delay:.08s}
  .home .c-cat{animation-delay:.56s}
  .home .c-lead{animation-delay:.66s}
  .home .c-cta{animation-delay:.78s}
  .home .c-hl::before{animation:c-wipe .85s var(--ease) both}
  .home .l2 .c-hl::before{animation-delay:.22s}
  .home .l3 .c-hl::before{animation-delay:.4s}
  .home .c-hl>span{animation:c-fade .35s ease-out both}
  .home .l2 .c-hl>span{animation-delay:.42s}
  .home .l3 .c-hl>span{animation-delay:.6s}
  .home .c-shot-frame{animation:c-fade .8s ease-out both}
}
@keyframes c-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes c-fade{from{opacity:0}to{opacity:1}}
@keyframes c-wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── Nutzerversprechen: ruhiger Gegenschlag nach dem Hero, groß gesetzt ──────────────────────────── */
.home .c-promise{padding:clamp(80px,11vw,148px) 0 clamp(64px,9vw,120px)}
.home .c-promise h2{font-size:clamp(34px,5.4vw,66px);font-weight:800;line-height:1.02;letter-spacing:-.04em;max-width:16ch}
.home .c-promise p{margin-top:22px;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--t2);max-width:52ch;text-wrap:pretty}
/* Kundenstimme im Versprechen-Abschnitt: hängendes Anführungszeichen in Akzent, Logo weiß */
.home .c-voices{margin-top:clamp(48px,6vw,72px);padding-top:clamp(32px,4vw,44px);border-top:1px solid var(--line)}
.home .c-voices-h{font-size:clamp(22px,2.4vw,30px);font-weight:700;line-height:1.15;letter-spacing:-.025em;color:var(--t1)}
.home .c-testis{display:grid;gap:clamp(36px,5vw,56px);margin-top:clamp(24px,3vw,36px)}
.home .c-testi{margin:0;display:flex;flex-direction:column;max-width:64ch}
.home .c-testi blockquote{margin:0}
.home .c-testi p{font:500 clamp(18px,1.6vw,21px)/1.45 var(--disp);letter-spacing:-.01em;color:var(--t1);text-wrap:pretty}
.home .c-testi .qm{color:var(--acc);margin-left:-.5em;display:inline-block;width:.5em}
.home .c-testi figcaption{display:flex;align-items:center;gap:18px;margin-top:auto;padding-top:24px;flex-wrap:wrap}
.home .c-testi-logo{display:inline-flex;border-radius:4px}
.home .c-testi figcaption img{display:block;height:30px;width:auto;opacity:.92;transition:opacity .15s}
.home .c-testi-logo:hover img{opacity:1}
.home .c-testi figcaption img.c-logo-upup{height:40px}     /* gestapeltes Zeichen: höher, damit es optisch gleich groß wirkt */
.home .c-testi figcaption img.c-logo-ch{height:26px}       /* breite Wortmarke: flacher, damit sie nicht dominiert */
.home .c-testi-who{display:grid;gap:2px;padding-left:18px;border-left:1px solid var(--line);font-size:14px;line-height:1.35}
.home .c-testi-who b{color:var(--t1);font-weight:600}
.home .c-testi-who span{color:var(--t3)}
@media (min-width:900px){
  .home .c-promise-in,.home .c-voices{margin-left:8.5%}
  .home .c-testis:has(.c-testi + .c-testi){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}     /* zwei Spalten erst ab zwei Stimmen */
  .home .c-testi--wide{grid-column:1/-1;max-width:none}     /* kurze Stimme über beide Spalten */
  .home .c-testi--wide p{font-size:clamp(20px,2vw,26px);max-width:44ch}
}

/* ── Features: Kopf + Scrollytelling ────────────────────────────────────────────────────────────── */
.home #features{padding:0 0 clamp(72px,9vw,128px)}
.home .c-head h2{font-size:clamp(34px,5.4vw,66px);font-weight:800;line-height:1.02;letter-spacing:-.04em;max-width:19ch}

.home .c-story{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:clamp(48px,6vw,80px)}
.home .c-stage{display:contents}
.home .c-route{display:none}
.home .b1{order:1}.home .fig1{order:2}.home .b2{order:3}.home .fig2{order:4}.home .b3{order:5}.home .fig3{order:6}
.home .c-beat-in{max-width:44ch}
.home .c-bic{width:46px;height:46px;border-radius:6px;display:grid;place-items:center;background:rgb(255 107 0 / .14);color:var(--acc)}
.home .c-bic svg{width:24px;height:24px}
.home .c-beat h3{font-size:clamp(25px,2.8vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin:18px 0 12px}
.home .c-beat p{color:var(--t2);font-size:17px;line-height:1.62}
.home .c-fig{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:230px;padding:clamp(28px,5vw,52px) 20px;border-radius:10px;
  border:1px solid var(--line);background:radial-gradient(90% 80% at 88% 0%,rgb(255 107 0 / .11),transparent 62%),var(--bg2)}
.home .fig2,.home .fig3{margin-bottom:28px}
.home .fig1{margin-bottom:28px}
@media (min-width:760px){
  .home .c-story{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);column-gap:clamp(32px,5vw,72px);row-gap:28px;align-items:center}
  .home .fig1{grid-area:1/1}.home .fig2{grid-area:2/1}.home .fig3{grid-area:3/1}
  .home .b1{grid-area:1/2}.home .b2{grid-area:2/2}.home .b3{grid-area:3/2}
  .home .fig1,.home .fig2,.home .fig3{margin-bottom:0}
}

/* Echte Bausteine, groß gesetzt */
.home .c-pill{width:min(100%,384px);background:rgb(9 11 14 / .94);border:1px solid #2c333e;border-radius:10px;
  padding:18px 22px 22px;font-family:var(--disp);box-shadow:0 34px 60px -32px rgb(0 0 0 / .9),inset 0 1px 0 rgb(255 255 255 / .05)}
.home .c-pill-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px}
.home .c-pill-brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--t1)}
.home .c-pill-brand svg{width:19px;height:19px;color:var(--ok)}
.home .c-pill-rate{color:var(--t2)}
.home .c-pill-state{font-size:clamp(25px,3vw,32px);font-weight:700;letter-spacing:-.02em;margin-top:10px;line-height:1.15}
.home .c-pill-file{color:var(--t3);font-size:14.5px;margin-top:4px}
.home .c-pill-bar{height:5px;border-radius:4px;background:rgb(255 255 255 / .09);margin-top:18px;overflow:hidden}
.home .c-pill-bar i{display:block;height:100%;width:49%;border-radius:4px;background:linear-gradient(90deg,#ff6b00,#ff9564);transform-origin:0 50%}

.home .c-meta{width:min(100%,460px);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:22px 24px 24px}
.home .c-meta-file{font:700 clamp(20px,2.2vw,24px)/1.2 var(--disp);letter-spacing:-.01em;color:var(--t1)}
.home .c-meta-toks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font:500 16px/1.3 var(--disp);color:var(--t3)}
.home .c-meta-toks span{display:inline-block}
.home .c-meta-toks .on{color:var(--acc);font-weight:700}

.home .c-status{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.home .c-status span{position:relative;display:inline-block;font:600 clamp(16px,1.7vw,19px)/1 var(--disp);padding:16px 26px;border-radius:6px;
  border:1px solid var(--ctl);color:var(--t2);background:var(--bg)}
.home .c-status .st-sel{color:var(--ok);border-color:#22a05e;background:rgb(61 220 132 / .14)}

/* Scrollytelling (nur mit JS, Bewegung erlaubt, Fenster ≥ 960 × 620 und ≤ 1400 hoch — in höheren Fenstern passt die ganze Geschichte ohnehin ins Bild): Bühne klebt, Takte schalten um */
.home .c-story.is-live{row-gap:0;align-items:stretch}
.home .c-story.is-live .c-stage{display:grid;grid-area:1/1/4/2;position:sticky;align-self:start;
  top:clamp(88px,calc(50vh - 280px),180px);min-height:min(560px,calc(100vh - 120px));
  grid-template-rows:auto minmax(0,1fr);padding:28px 30px 34px;border:1px solid var(--line);border-radius:10px;
  background:radial-gradient(90% 70% at 88% 0%,rgb(255 107 0 / .13),transparent 62%),var(--bg2)}
.home .c-story.is-live .c-route{display:flex;justify-content:space-between;position:relative;list-style:none;margin:0 0 8px}
.home .c-route::before,.home .c-route::after{content:"";position:absolute;top:19px;left:20px;right:20px;height:2px;border-radius:2px}
.home .c-route::before{background:var(--line)}
.home .c-route::after{background:var(--acc);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.home .c-route li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;
  font:600 13px/1 var(--disp);color:var(--t3)}
.home .c-route li:first-child{align-items:flex-start}
.home .c-route li:last-child{align-items:flex-end}
.home .c-route i{width:40px;height:40px;border-radius:6px;display:grid;place-items:center;background:var(--panel2);
  border:1px solid var(--ctl);color:var(--t3)}
.home .c-route svg{width:20px;height:20px}
.home .c-story[data-step="2"] .c-route::after{transform:scaleX(.5)}
.home .c-story[data-step="3"] .c-route::after{transform:scaleX(1)}
.home .c-story[data-step="1"] .r1 i,.home .c-story[data-step="2"] .r2 i,.home .c-story[data-step="3"] .r3 i{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.home .c-story[data-step="2"] .r1 i,.home .c-story[data-step="3"] .r1 i,.home .c-story[data-step="3"] .r2 i{background:rgb(255 107 0 / .14);border-color:rgb(255 107 0 / .45);color:var(--acc)}
.home .c-story[data-step="1"] .r1,.home .c-story[data-step="2"] .r2,.home .c-story[data-step="3"] .r3{color:var(--t1)}

.home .c-story.is-live .c-fig{grid-area:2/1/3/2;min-height:0;padding:0;border:0;background:none;
  opacity:0;transform:translateY(36px) scale(.95);transition:opacity .45s ease,transform .8s var(--ease)}
.home .c-story.is-live[data-step="2"] .fig1,.home .c-story.is-live[data-step="3"] .fig1,
.home .c-story.is-live[data-step="3"] .fig2{transform:translateY(-36px) scale(.95)}
.home .c-story.is-live[data-step="1"] .fig1,.home .c-story.is-live[data-step="2"] .fig2,
.home .c-story.is-live[data-step="3"] .fig3{opacity:1;transform:none;transition-delay:.12s}
.home .c-story.is-live .c-pill{transform:scale(1.08)}

.home .c-story.is-live .c-beat{position:relative;display:flex;align-items:center;min-height:clamp(380px,62vh,560px);
  padding-left:clamp(28px,3vw,44px);opacity:.65;transition:opacity .5s ease}
.home .c-story.is-live .c-beat::before,.home .c-story.is-live .c-beat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px}
.home .c-story.is-live .c-beat::before{background:var(--line)}
.home .c-story.is-live .c-beat::after{background:var(--acc);transform:scaleY(0);transform-origin:50% 0;transition:transform .7s var(--ease)}
.home .c-story.is-live .c-bic{background:var(--panel2);color:var(--t3)}
.home .c-story.is-live[data-step="1"] .b1,.home .c-story.is-live[data-step="2"] .b2,.home .c-story.is-live[data-step="3"] .b3{opacity:1}
.home .c-story.is-live[data-step="1"] .b1::after,.home .c-story.is-live[data-step="2"] .b2::after,
.home .c-story.is-live[data-step="3"] .b3::after{transform:scaleY(1)}
.home .c-story.is-live[data-step="1"] .b1 .c-bic,.home .c-story.is-live[data-step="2"] .b2 .c-bic,
.home .c-story.is-live[data-step="3"] .b3 .c-bic{background:var(--acc);color:var(--ink)}

/* Takt-Animationen: Balken füllt sich, Filter rastet ein, „Select“ wird gedrückt */
@media (prefers-reduced-motion:no-preference){
  .home.js .c-story:not(.is-live) .fig1.in .c-pill-bar i,.home .c-story.is-live .fig1.play .c-pill-bar i{animation:c-fill 1.5s var(--ease) .25s both}
  .home .c-story.is-live[data-step="1"] .fig1 .c-pill-brand svg{animation:c-blink 1.6s ease-in-out infinite}
  .home.js .c-story:not(.is-live) .fig2.in .c-meta-toks span,.home .c-story.is-live .fig2.play .c-meta-toks span{animation:c-up .6s var(--ease) both}
  .home .c-meta-toks span:nth-child(2){animation-delay:.05s!important}.home .c-meta-toks span:nth-child(3){animation-delay:.1s!important}
  .home .c-meta-toks span:nth-child(4){animation-delay:.15s!important}.home .c-meta-toks span:nth-child(5){animation-delay:.2s!important}
  .home .c-meta-toks span:nth-child(6){animation-delay:.25s!important}
  .home .c-meta-toks span.on{animation-delay:.1s,.75s!important}
  .home.js .c-story:not(.is-live) .fig2.in .c-meta-toks .on,.home .c-story.is-live .fig2.play .c-meta-toks .on{animation:c-up .6s var(--ease) .1s both,c-pop .45s var(--ease) .75s both}
  .home.js .c-story:not(.is-live) .fig3.in .st-sel,.home .c-story.is-live .fig3.play .st-sel{animation:c-press .5s var(--ease) .45s both}
}
@keyframes c-fill{from{transform:scaleX(.08)}to{transform:scaleX(1)}}
@keyframes c-blink{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes c-pop{0%{scale:1}45%{scale:1.14}100%{scale:1}}   /* eigene scale-Eigenschaft: verträgt sich mit c-up (transform) */
@keyframes c-press{0%{transform:scale(1)}40%{transform:scale(.93)}100%{transform:scale(1)}}

/* ── Restliche Features: asymmetrisches Raster ──────────────────────────────────────────────────── */
.home .c-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:clamp(64px,8vw,112px)}
.home .c-cell{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;padding:28px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.home .c-cell h3{font-size:clamp(21px,2vw,25px);font-weight:700;letter-spacing:-.025em;line-height:1.15;margin:18px 0 8px}
.home .c-cell p{color:var(--t3);font-size:15px;line-height:1.6;max-width:46ch}
.home .c-cell a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.home .c-cell a:hover{color:var(--t1)}
.home .c-ic{width:42px;height:42px;border-radius:6px;display:grid;place-items:center;flex:none;background:rgb(255 107 0 / .14);color:var(--acc)}
.home .c-ic svg{width:22px;height:22px}
.home .c-priv{background:radial-gradient(130% 100% at 0% 100%,rgb(255 107 0 / .2),transparent 62%),var(--bg2);justify-content:flex-end;min-height:300px}
.home .c-priv .c-ic{width:64px;height:64px;margin-bottom:auto}
.home .c-priv .c-ic svg{width:32px;height:32px}
.home .c-priv p{color:var(--t2)}
.home .c-lbw{gap:28px}
.home .c-lbw-copy{display:flex;flex-direction:column;height:100%}
.home .c-lbw-copy .c-ic{margin-bottom:auto}
.home .c-lbw-copy h3{margin-top:28px}
.home .c-lbw .c-lbw-sub{color:var(--t1);font-weight:600;margin-bottom:6px}
.home .c-third{display:flex;flex-direction:column;justify-content:flex-end;font-family:var(--disp)}
.home .c-third span{font-size:clamp(76px,9vw,128px);font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--acc)}
.home .c-third small{margin-top:10px;font-size:14px;font-weight:600;color:var(--t3)}
/* Clip-Kachel (Remotes): echter 9:16-Set-Clip. Handy = Clip oben als 4:5-Ausschnitt, darunter der Text.
   Ab 640 px steht der Clip ungekürzt hochkant als Spalte in voller Kachelhöhe rechts neben dem Text. */
.home .c-media{padding:0}
.home .c-clip{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--bg)}
.home .c-clip :is(img,video){position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.home .c-clip:not(.is-live) video{display:none}     /* ohne JS/bei reduzierter Bewegung nur das Standbild */
.home .c-hw .c-clip{order:-1}                       /* Handy: Clip über dem Text (im DOM steht der Text vorn) */
.home .c-hw .c-clip :is(img,video){object-position:50% 33%}     /* Flugbahn der Drohne liegt bei 12–77 % der Höhe */
.home .c-media-copy{display:flex;flex-direction:column;padding:28px}
.home .c-media-copy h3{text-wrap:balance}
.home .c-int{padding:0}
.home .c-int-copy{display:flex;flex-direction:column;padding:28px}
.home .c-int-img{position:relative;order:-1;aspect-ratio:4/3;overflow:hidden;background:var(--bg)}
.home .c-int-img picture{display:contents}
/* Ausschnitt um die Pille („Uploading 49 % · 1.7 MB/s“) und den RDY-AUTO-Knopf */
.home .c-int-img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:30% 40%}
@media (min-width:640px){
  .home .c-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense}
  .home .c-int{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .home .c-int-img{order:0;aspect-ratio:auto;min-height:340px}
  .home .c-int-copy .c-ic{margin-bottom:auto}
  .home .c-lbw{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
  /* Zwei Spalten wären für Clip + Text zu schmal: bis 959 px jede Kachel über die volle Breite */
  .home .c-priv,.home .c-media{grid-column:1/-1}
  .home .c-priv{min-height:240px}     /* volle Breite: weniger Höhe, sonst wirkt die Kachel leer */
  .home .c-media{--clip-w:clamp(190px,26vw,232px);display:grid;grid-template-columns:var(--clip-w) minmax(0,1fr)}
  .home .c-hw{grid-template-columns:minmax(0,1fr) var(--clip-w)}
  .home .c-hw .c-clip{grid-column:2;grid-row:1}
  .home .c-hw .c-media-copy{grid-column:1;grid-row:1}
  /* Clip mindestens ungekürzt 9:16; wird der Text höher, wächst er mit (object-fit schneidet seitlich) */
  .home .c-media .c-clip{aspect-ratio:auto;min-height:calc(var(--clip-w) * 16 / 9);align-self:stretch}
  .home .c-hw .c-clip :is(img,video){object-position:50% 50%}
  .home .c-media-copy .c-ic{margin-bottom:auto}
}
@media (min-width:960px){
  .home .c-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  /* 12 / 4+8 / 12: oben das Camera-to-cloud-Argument, unten der Low-Bandwidth-Modus */
  .home .c-int{grid-column:1/13;grid-row:1;min-height:360px}
  .home .c-priv{grid-column:1/5;grid-row:2;min-height:300px}
  .home .c-media{--clip-w:clamp(180px,19vw,214px)}
  .home .c-hw{grid-column:5/13;grid-row:2}
  .home .c-lbw{grid-column:1/13;grid-row:3;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:36px}
}

/* ── Installation: drei Verben auf Orange — der eine Farbblock der Seite ───────────────────────── */
.home #install{padding:0 0 clamp(72px,9vw,128px)}
.home .c-ibox{background:var(--acc);color:var(--ink);border-radius:10px;padding:clamp(28px,5.5vw,72px)}
.home .c-ihead h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.home .c-ihead p{margin-top:12px;font-size:17px;line-height:1.55;color:rgb(14 16 19 / .84);max-width:56ch;text-wrap:pretty}
.home .c-nw{white-space:nowrap}
@media (max-width:359px){.home .c-vrow .c-nw{white-space:normal}}     /* sonst läuft die Adresse unter den Pfeil */
.home .c-verbs{list-style:none;margin-top:clamp(32px,4vw,56px)}
.home .c-verbs li{border-top:1px solid rgb(14 16 19 / .24)}
/* Ganze Zeile = Link; Fläche ragt 16 px über die Textkante, damit der Text bündig bleibt */
.home .c-vrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;margin:0 -16px;padding:20px 16px 22px;
  border-radius:6px;color:inherit;text-decoration:none}
.home .c-vrow .c-verb{grid-column:1/-1}
.home .c-varr{grid-column:2;grid-row:2;align-self:end;display:flex;padding-bottom:1px}
.home .c-varr svg{width:26px;height:26px}
.home .c-vrow:hover{background:rgb(14 16 19 / .07)}
.home .c-ibox .c-vrow:focus-visible{outline-offset:0;border-radius:6px}
.home .c-verb{overflow:visible;overflow-y:clip;font-size:clamp(58px,10.6vw,136px);font-weight:800;line-height:.98;letter-spacing:-.055em;
  padding-bottom:.08em;margin-bottom:-.08em}
.home .c-verb span{display:inline-block}
.home .c-verbs p{font-size:17px;line-height:1.5;color:rgb(14 16 19 / .86);max-width:34ch;text-wrap:pretty}
@media (min-width:760px){
  .home .c-vrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 40px}
  /* Alle Verben gleich breit (≈ „Register“), damit die Erklärtexte in einer Flucht stehen */
  .home .c-verb{flex:0 0 3.85em;min-width:max-content}
  .home .c-verbs p{flex:1 1 0;min-width:min(100%,18ch);padding-bottom:.9em}
  /* Pfeil immer bündig rechts; der Text hält mindestens 24 px Abstand */
  .home .c-verbs p{margin-right:-16px}
  .home .c-varr{flex:none;margin-left:auto;padding-bottom:calc(.9em + 1px);font-size:17px}
}
@media (prefers-reduced-motion:no-preference){
  .home .c-vrow{transition:background-color .2s ease}
  .home .c-varr svg{transition:transform .35s var(--ease)}
  .home .c-vrow:hover .c-varr svg{transform:translateX(6px)}
}
.home .c-icta{margin-top:clamp(28px,3.5vw,44px)}
.home .c-btn-ink{background:var(--ink);color:var(--t1);display:inline-flex;align-items:center;gap:10px}
.home .c-btn-ink:hover{background:#1b202a}
.home .c-arr{display:inline-flex}
.home .c-arr svg{width:17px;height:17px}
.home .c-ibox :focus-visible{outline-color:var(--ink)}

/* ── Preise: ruhiges Band, Karten aus site_tier_cards() unverändert, nur linksbündig ───────────── */
.home #pricing{padding:clamp(72px,9vw,120px) 0;background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.home .c-phead,.home .c-chead{margin-bottom:clamp(32px,4vw,52px)}
.home .c-phead h2,.home .c-faq-h,.home .c-chead h2{font-size:clamp(34px,5.4vw,66px);font-weight:800;line-height:1.02;letter-spacing:-.04em}
.home .c-phead p,.home .c-chead p{margin-top:16px;color:var(--t3);font-size:18px;line-height:1.55;max-width:46ch}
.home .tier{text-align:left;background:var(--bg);padding:32px 28px}
.home .tier .amount{font-size:46px;letter-spacing:-.035em}
.home .pay-note{text-align:left;max-width:92ch;margin-top:22px;line-height:1.65}
@media (prefers-reduced-motion:no-preference){
  .home .tier{transition:transform .35s var(--ease),border-color .2s}
  .home .tier:hover{transform:translateY(-3px)}
}

/* ── FAQ: zwei unabhängige Spalten, Trennlinien statt Karten ───────────────────────────────────── */
.home #faq{padding:clamp(72px,9vw,128px) 0 clamp(56px,7vw,96px)}
.home .c-faq-h{margin-bottom:clamp(28px,3.5vw,48px)}
.home .c-faq-cols{display:grid;grid-template-columns:minmax(0,1fr)}
.home .c-faq-col{min-width:0}
.home .faq-item{background:none;border:0;border-top:1px solid var(--line);border-radius:0}
.home .c-faq-col:last-child .faq-item:last-child{border-bottom:1px solid var(--line)}
.home .faq-item summary{padding:21px 4px 21px 0;font:600 17.5px/1.35 var(--disp);letter-spacing:-.01em}
.home .faq-item summary:hover{color:var(--acc)}
.home .faq-item summary::after{width:14px;height:14px;margin:0;border:0;transform:none;
  background:linear-gradient(var(--acc),var(--acc)) center/14px 2px no-repeat,linear-gradient(var(--acc),var(--acc)) center/2px 14px no-repeat;
  transition:transform .35s var(--ease)}
.home .faq-item[open] summary::after{transform:rotate(45deg);margin-top:0}
.home .faq-item p{padding:0 0 18px;font-size:15px;line-height:1.65;color:var(--t3);max-width:62ch}
.home .faq-item p+p{margin-top:-4px}
.home .faq-item summary:focus-visible{outline-offset:2px}
@media (min-width:960px){
  .home .c-faq-cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;align-items:start}
  .home .c-faq-col .faq-item:last-child{border-bottom:1px solid var(--line)}
}

/* ── Kompatibilität: Kopf links, Tabelle rechts ─────────────────────────────────────────────────── */
.home #compatibility{padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,112px)}
.home .c-compat-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}   /* C: nie breiter als der Bildschirm (320 px) */
.home section[id]{scroll-margin-top:88px}   /* /#features & Co. landen unter dem klebenden Header */
.home #compatibility .compat-wrap{max-width:none;margin:0}
.home table.compat{font-size:15px;background:var(--bg2)}
.home table.compat td{padding:15px 16px}
.home table.compat td b{font-family:var(--disp);font-weight:600;color:var(--t1)}
.home #compatibility .compat-note{max-width:none;margin:16px 0 0;font-size:13.5px}
@media (min-width:960px){
  .home .c-compat-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:start}
  .home .c-chead{margin-bottom:0}
}

/* ── Scroll-Einblendung (nur mit JS + Bewegung; ohne JS ist alles sofort sichtbar) ─────────────── */
@media screen and (prefers-reduced-motion:no-preference){
  .home.js [data-rv]{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform 1s var(--ease)}
  .home.js [data-rv].in{opacity:1;transform:none}
  .home.js [data-rv]:focus-within{opacity:1;transform:none;transition:none}     /* per Tab erreicht: sofort sichtbar */
  .home.js .c-grid>:nth-child(2),.home.js .c-verbs li:nth-child(2){transition-delay:.08s}
  .home.js .c-grid>:nth-child(3),.home.js .c-verbs li:nth-child(3){transition-delay:.16s}
  .home.js .c-grid>:nth-child(4){transition-delay:.24s}
  .home.js .c-verbs li .c-verb span{transform:translateY(102%);transition:transform 1s var(--ease) .1s}
  .home.js .c-verbs li.in .c-verb span{transform:none}
}

/* ── Display-Schrift wie das Portal: dieselbe Datei (/fonts/), dieselbe Deklaration wie
   portal/lib.php — Überschriften, Knöpfe, Labels und Badges; Fließtext bleibt Systemschrift. */
@font-face{font-family:'Schibsted Grotesk';src:url('/fonts/SchibstedGrotesk-VF.woff2') format('woff2');
font-weight:400 900;font-display:swap}
.brand,.section-head h2,.tier .tname,.tier .amount,.formcard h1,.acct h1,
.panel h2,.guide h1,ol.steps h3,.stat .n,.ops h1,.legal h1,.legal h2,table.compat th,table.opst th,
.btn,.btn-ghost,.dlbtn,.badge-hot,.cpill,.tierpill{font-family:var(--disp)}
/* Handy: Knöpfe sind Daumen-Ziele (≥ 44px), wie im Portal */
@media(max-width:640px){.btn,.btn.sm{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}