/* Hauptseite im Nuvaro-CI (Stand 16.10.2026, Bens Vorgabe: Styling der Agentur-Seite übernehmen).
   Lädt nach css/style.css und stellt Farben, Schriften und Formen auf Nuvaro um. Die Grundbausteine
   (Variablen, Grund, Knöpfe, Kopfzeile, Gerät, Fragen, Fuß) sind aus agenturen/agentur.css übernommen,
   darunter die Anpassungen für die Bausteine der Hauptseite. Ohne diese Datei sieht die Seite aus wie vorher. */

:root{
  --shell:#ECE8DD; --shell2:#E0DBCD; --card:#F6F3EC; --nv-line:#CFC8B8;
  --ink:#0E1424; --ink2:#3A4258; --mute:#6B7186; --screen:#131A2C;
  --teal:#00E0C6; --teal-d:#00A894; --violet:#6C5CE7; --violet-l:#9C90FF;
  --corner:44px;
  --sans:'Archivo',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --pxf:'Silkscreen',monospace;
  /* Variablen der Hauptseite auf Nuvaro umbiegen */
  --navy:#ECE8DD; --navy-2:#E0DBCD; --navy-3:#F6F3EC;
  --text:#0E1424; --soft:#3A4258; --muted:#6B7186;
  --line:rgba(14,20,36,.16); --line-2:rgba(14,20,36,.30);
  --teal-dark:#00A894; --teal-light:#6C5CE7; --teal-dim:rgba(108,92,231,.12); --teal-line:rgba(108,92,231,.45);
  --font-h:var(--sans); --font-b:var(--sans);
  --r-btn:0; --r-card:4px; --r-chip:3px;
  --maxw:1200px;
}

/* ---------- Grund ---------- */
body{font-family:var(--sans);font-weight:500;color:var(--ink);background-color:var(--shell);
  background-image:radial-gradient(rgba(14,20,36,.07) 1px,transparent 1px);background-size:14px 14px}
.wrap{padding:0 40px}
h1,h2,h3,h4{font-family:var(--sans)}
h2{font-weight:900;font-size:clamp(28px,3.6vw,46px);line-height:.98;letter-spacing:-.03em;text-transform:uppercase}
h3{font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.12}
.px{font-family:var(--pxf);font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:0}
.lead{color:var(--ink2);font-weight:500}
.sec{padding:110px 0}
.sec-tint{background-color:var(--shell2);background-image:radial-gradient(rgba(14,20,36,.08) 1px,transparent 1px);background-size:14px 14px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--pxf);font-size:12px;font-weight:400;letter-spacing:.06em;color:var(--violet-ink)}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--violet);flex:none}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:64px}
.sec-tag{display:block;color:var(--violet-ink);margin-bottom:18px}
.sec-intro{font-size:18px;color:var(--ink2);max-width:52ch;font-weight:500;line-height:1.55}

/* ---------- Knöpfe ---------- */
.btn{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;border:2px solid var(--ink);border-radius:0;min-height:50px;padding:0 24px;transition:transform .12s ease,box-shadow .12s ease,background .12s,color .12s}
.btn-p{background:var(--teal);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn-p:hover{background:var(--teal);transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn-p:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn-g{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-g:hover{background:var(--ink);color:var(--shell);border-color:var(--ink)}
.btn-sm{min-height:42px;padding:0 16px;font-size:12px}
.btn-sm.btn-p{box-shadow:4px 4px 0 var(--ink)}
.af-link{color:var(--violet-ink);font-weight:700}

/* ---------- Kopfzeile ---------- */
.nav{background:rgba(236,232,221,.92);border-bottom:2px solid var(--ink)}
.nav-in{height:72px}
.nv-logo{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:900;font-size:20px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.brand.nv-logo span{font-family:var(--pxf);font-weight:400;font-size:11px;letter-spacing:.06em;color:var(--violet-ink);padding-left:12px;border-left:2px solid var(--ink)}
.led{display:block;width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(0,224,198,.25);animation:led 2.4s ease-in-out infinite;flex:none}
@keyframes led{50%{box-shadow:0 0 0 6px rgba(0,224,198,.08)}}
.nav-links a{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--ink2);padding:0 11px}
.nav-links a:hover,.nav-links a.on{color:var(--violet-ink)}
.nav-links a.on{box-shadow:inset 0 -2px 0 var(--violet)}
.nav-login{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--ink2)}
.nav-login:hover{color:var(--violet-ink)}
.nav-prog{background:var(--violet);bottom:-2px}
.burger{border:2px solid var(--ink);border-radius:0}
.burger i,.burger i::before,.burger i::after{background:var(--ink)}
@media(max-width:1120px){
  .nav-links{top:72px;background:var(--shell);border-bottom:2px solid var(--ink)}
  .nav-links a{border-bottom:1px solid var(--nv-line);font-size:14px}
  .nav-links a.on{color:var(--violet-ink)}
}

/* Gerät (Hero, Kontozahlen) */
.device,.konto-dev{background:var(--shell2);border:2px solid var(--ink);border-radius:6px 6px var(--corner) 6px;padding:20px 20px 26px;box-shadow:10px 10px 0 var(--ink)}
.dev-head{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink2);font-size:10px;margin-bottom:14px}
.dev-head .on{display:flex;align-items:center;gap:8px}
.dev-head .on i{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.screen{background:var(--screen);border-radius:4px;padding:16px 16px 18px;position:relative;overflow:hidden;color:#D7DBE6}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:4px 4px}
.scr-top{display:flex;justify-content:space-between;gap:10px;color:#7C849C;font-size:10px;margin-bottom:12px}
.scr-top b{color:var(--teal);font-weight:400;font-variant-numeric:tabular-nums}
.ava{background:#1E2740;color:var(--violet-l);border:1px solid #2C3654;font-family:var(--mono);font-weight:700}

/* ---------- Fragen ---------- */
.faq{margin-top:0}
.faq details{border-top:2px solid var(--ink)}
.faq details:last-child{border-bottom:2px solid var(--ink)}
.faq summary{font-family:var(--sans);font-weight:800;font-size:18px}
.faq summary::after{border-color:var(--violet);border-width:0 3px 3px 0}
.faq details p{color:var(--ink2)}

/* ---------- Fuß und Rechtstexte ---------- */
footer{background:#090D18;color:#8A93AB;font-family:var(--sans);padding:40px 0 48px}
.foot .nv-logo{color:var(--shell);font-size:17px}
.foot p{margin-top:14px;font-size:13px}
.foot a{color:#B9BFCF}
.foot nav a,.foot nav button{font-family:var(--mono);font-size:13px;color:#8A93AB}
.foot nav a:hover,.foot nav button:hover{color:var(--teal)}
dialog.legal{background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:4px;box-shadow:10px 10px 0 var(--ink)}
dialog.legal::backdrop{background:rgba(14,20,36,.55)}
.legal h2{font-size:24px}
.legal h3{text-transform:none;font-size:15.5px}
.legal p{color:var(--ink2)}
.legal a{color:var(--violet-ink)}
.legal-x{background:var(--shell);color:var(--ink);border:2px solid var(--ink);border-radius:0}


/* ========== Bausteine der Hauptseite ========== */
/* Dunkle Vorführungen (Freigabe-Stapel, Rechner, Netzwerk, Lead Magnet, Aufnahmen, Akzentkacheln):
   Bildschirm im Nuvaro-Gehäuse, darin gelten die dunklen Werte der alten Seite. */
.draft,.stack-done,.calc,.netz,.lm-card,.shot,.cell-teal,.final-box,.plan.best{
  --text:#E6E9F2; --soft:#B4BBCE; --muted:#8A93AB;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --navy:#131A2C; --navy-2:#1A2236; --navy-3:#222B42; --ink:#0B1020;
  --teal-light:#9C90FF; --teal-dim:rgba(156,144,255,.16); --teal-line:rgba(156,144,255,.45);
  color:var(--text)}
.draft,.stack-done{background:var(--screen);border:2px solid #0E1424;border-radius:4px;box-shadow:8px 8px 0 #0E1424}
.stack-done{border-style:dashed}
.d-msg{background:#0B1020;border-radius:3px}
.d-act .btn{box-shadow:none}
.d-act .btn-p{box-shadow:3px 3px 0 #000}
.d-act .btn-g{color:var(--text);border-color:rgba(255,255,255,.3)}
.d-act .btn-g:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.btn-q{border-color:transparent!important}
.stack-head span{color:var(--mute)}
.stack-log{color:var(--violet-ink)}
.hero::before{background:radial-gradient(800px 480px at 85% 0%,rgba(108,92,231,.10),transparent 62%)}
.hero h1{font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:1}
.hero h1 em{color:var(--violet-ink)}
.eyebrow{color:var(--violet-ink)}

/* Zahlen */
.seg{background:var(--card);border:2px solid var(--ink);border-radius:0;padding:3px}
.seg button{font-family:var(--mono);text-transform:uppercase;font-size:12px;letter-spacing:.04em;border-radius:0;color:var(--ink2)}
.seg button.on{background:var(--ink);color:var(--shell)}
.f-top em{border-radius:0;font-family:var(--mono)}
.f-bar{border-radius:0;background:linear-gradient(90deg,var(--ink),var(--violet))}
.f-bar.f-alt{background:var(--violet-l)}
.calc{background:var(--screen);border:2px solid var(--ink);border-radius:6px 6px var(--corner) 6px;box-shadow:10px 10px 0 var(--ink)}
.calc-sub,.fld label,.fld small,.calc-out span,.calc-note{color:var(--soft)}
.calc .btn-g{color:var(--text);border-color:rgba(255,255,255,.35)}
.calc .btn-g:hover{background:#fff;color:var(--ink)}

/* Ablauf */
.netz{background:var(--screen);border:2px solid var(--ink);border-radius:6px 6px var(--corner) 6px;box-shadow:10px 10px 0 var(--ink)}
.netz-toast{background:#1A2236;border-radius:4px}
.flow-step::before{background:var(--shell);border-color:var(--violet)}
.flow-step.you::before{background:var(--teal);border-color:var(--ink)}
.flow-line i{background:linear-gradient(90deg,var(--ink),var(--violet))}

/* Module als helle Kacheln */
.cell{background:var(--card);border:2px solid var(--ink);border-radius:4px;box-shadow:6px 6px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.cell:hover{border-color:var(--ink);transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.cell p{color:var(--ink2)}
.cell .in{color:var(--mute);font-family:var(--mono);font-weight:400}
.cell .in b{color:var(--violet-ink)}
.cell-deep{background:var(--shell2)}
.cell-grad{background:var(--card)}
.cell-teal{background:var(--screen)}
.cell-teal p{color:#D7DBE6}
.cell-teal h3{color:var(--teal)}
.mini-row,.day,.steps3 span{background:rgba(14,20,36,.04);border-radius:3px}
.mini-row span strong{color:var(--violet-ink)}
.md{background:rgba(14,20,36,.035);border-radius:3px}
.md-off{background:transparent}
.mp-pub{background:rgba(108,92,231,.16);color:#4B3DC4}
.mp-plan{background:var(--teal);color:var(--ink)}
.mp-nl{background:rgba(14,20,36,.12);color:var(--ink)}
.lg-pub::before{background:rgba(108,92,231,.35)}.lg-nl::before{background:rgba(14,20,36,.2)}

/* Arbeitsalltag */
.tab{border-radius:0}
.tab:hover{background:rgba(14,20,36,.04)}
.tab[aria-selected="true"]{background:var(--card);border-left-color:var(--violet);box-shadow:inset 0 0 0 2px var(--ink)}
.tab-prog::after{background:var(--violet)}
.shot{border:2px solid var(--ink);border-radius:4px;box-shadow:10px 10px 0 var(--ink)}
.shot-bar{background:var(--ink)}
.shot-bar span{color:#8A93AB}

/* Lead Magnet */
.lm-card{background:var(--screen);border:2px solid var(--ink);border-radius:4px;box-shadow:6px 6px 0 var(--ink)}
.lm-c.lm-me{background:rgba(0,224,198,.12)}
.lm-lead{border-color:rgba(0,224,198,.4);background:rgba(0,224,198,.06);border-radius:3px}

/* Vergleich */
.mx-wrap{background:var(--card);border:2px solid var(--ink);border-radius:4px;box-shadow:8px 8px 0 var(--ink)}
.mx th,.mx td{border-color:var(--nv-line)}
.mx thead th,.mx thead th:first-child,.mx tfoot th,.mx tfoot td,.mx tfoot th:first-child{background:var(--shell2);color:var(--ink)}
.mx th:first-child{background:var(--card)}
.mx .us{background:rgba(108,92,231,.08);border-left-color:var(--violet);border-right-color:var(--violet);color:var(--violet-ink)}
.mx thead .us,.mx tfoot .us{background:var(--ink);color:var(--shell)}
.mx thead .us small{color:var(--teal)}
.mx .n{background:rgba(14,20,36,.25)}

/* Agentur, Kontrolle, Rückmeldungen */
.duo-card,.agency,.fb-liste{background:var(--card);border:2px solid var(--ink);border-radius:4px;box-shadow:6px 6px 0 var(--ink)}
.duo-us{background:var(--card);border-color:var(--ink);box-shadow:6px 6px 0 var(--violet)}
.honest{border-left:3px solid var(--violet);background:rgba(108,92,231,.07);border-radius:0;color:var(--ink2)}
.fb-liste li b{color:var(--violet-ink);background:rgba(108,92,231,.1);border-radius:0}

/* Pakete */
.plan{background:var(--card);border:2px solid var(--ink);border-radius:4px;box-shadow:6px 6px 0 var(--ink)}
.plan.best{background:var(--screen);border-color:var(--ink);box-shadow:8px 8px 0 var(--violet)}
.plan-komplett{background:var(--shell2);border-color:var(--ink)}
.flag{background:var(--teal);color:var(--ink);border-radius:0;font-family:var(--pxf);font-weight:400}
.trial{background:rgba(108,92,231,.12);color:var(--violet-ink);border-radius:0}
.plan.best .trial{background:rgba(0,224,198,.14);color:var(--teal)}
.plan.best .btn-g{color:var(--text);border-color:rgba(255,255,255,.4)}

/* Über mich */
.pt-logo{border:2px solid var(--ink);border-radius:4px}

/* Abschluss als dunkle Kontaktbox */
.final{background:var(--shell);border-top:2px solid var(--ink)}
.start li{background:var(--card);border:2px solid var(--ink);border-radius:4px;color:var(--ink)}
.start li::before{color:var(--violet-ink)}

/* Concierge-Formular */
.af-fld input,.af-fld textarea{background:#fff;border:2px solid var(--ink);border-radius:0;color:var(--ink)}
.af-link{color:var(--violet-ink)}

/* Türkis nur für die Hauptaktion: Zahlen, Links und Haken auf hellem Grund in Tinte oder Violett */
.stat-hero b{color:var(--ink)}
.fb-zahlen b{color:var(--violet-ink)}
.lead a,.honest a,.plan-note a{color:var(--violet-ink)}
.mx .y{border-color:var(--ink)}
.mx .us .y{border-color:var(--violet)}
.plan li::before{border-color:var(--violet)}
.plan.best li::before{border-color:var(--teal)}
.flow-step.you .who,.flow-step.jetzt h3{color:var(--violet-ink)}
.foot .slogan{color:var(--teal)}
.duo-us h3{color:var(--violet-ink)}
.mx thead .us small{color:var(--teal)}
.base{color:var(--violet-ink)}
.af-fld input:focus,.af-fld textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(108,92,231,.18)}
.btn-g.zg-hover{border-color:var(--ink);background:var(--ink);color:var(--shell)}
.zg-ring{border-color:var(--violet)}

/* Ablauf am Rechner: Schritte links untereinander, Grafik rechts, alles auf einen Blick (Bens Befund 17.10.) */
@media(min-width:1000px){
  #ablauf.sec{padding:56px 0}
  #ablauf .wrap > h2{display:inline}
  #ablauf .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:48px;align-items:end}
  #ablauf .wrap > h2,#ablauf .wrap > .lead{margin:0}
  #ablauf .wrap > .lead{font-size:16.5px;line-height:1.5}
  .ablauf-grid{grid-column:1 / -1;display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:44px;align-items:center;margin-top:32px}
  .ablauf-grid .netz{grid-column:2;grid-row:1;margin-top:0}
  .ablauf-grid .flow{grid-column:1;grid-row:1;margin-top:0;grid-template-columns:1fr;gap:0}
  .ablauf-grid .netz[hidden] + .flow{grid-column:1 / -1}
  .ablauf-grid .flow-line{left:7px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .ablauf-grid .flow-line i{transform-origin:50% 0;background:linear-gradient(180deg,var(--ink),var(--violet))}
  .ablauf-grid .flow-step{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;padding:0 0 14px 36px}
  .ablauf-grid .flow-step:last-child{padding-bottom:0}
  .ablauf-grid .flow-step::before{top:3px}
  .ablauf-grid .flow-step .who{order:2;margin:0;font-size:10.5px}
  .ablauf-grid .flow-step h3{order:1;font-size:15.5px}
  .ablauf-grid .flow-step p{order:3;flex-basis:100%;font-size:14px;margin-top:3px;line-height:1.45}
}

/* ---------- Umschalter Monatlich / Jährlich (2026-10-19) ---------- */
.seg-takt[hidden]{display:none}
.seg-takt{margin-top:30px}
.seg-takt button{min-height:42px;padding:0 18px;white-space:nowrap}
.seg-rabatt{margin-left:10px;padding:3px 7px;background:rgba(108,92,231,.14);color:var(--violet-ink);font-size:11px;letter-spacing:.02em}
.seg-takt button.on .seg-rabatt{background:rgba(0,224,198,.18);color:var(--teal)}
.plans .pj{display:none}
.plans.jahr .pj{display:inline}
.plans.jahr .pm{display:none}
.plans.jahr .price small .pj{display:block}
.seg-takt + .plans{margin-top:28px}
@media(max-width:520px){.seg-takt{display:flex;width:100%}.seg-takt button{flex:1;padding:0 10px}.seg-rabatt{margin-left:6px}}

/* ---------- Preise im Vergleich und Abgleich mit KI-Chats (2026-10-19) ---------- */
.mx tfoot .mx-preis td{font-size:15px;color:var(--ink);vertical-align:top}
.mx tfoot .mx-preis td small{display:block;margin-top:5px;font-size:11.5px;font-weight:500;line-height:1.35;color:var(--mute)}
.mx tfoot .mx-preis .us{color:var(--shell)}
.mx tfoot .mx-preis .us small{color:var(--teal)}
.mx-ki-kopf{margin-top:84px;font-size:clamp(22px,2.4vw,30px)}
.mx-ki-kopf + .lead{margin-top:14px}
.mx-ki{min-width:760px}
.mx-ki td{text-align:left;vertical-align:top;font-size:14.5px;font-weight:500;line-height:1.45;color:var(--ink2)}
.mx-ki th:first-child{width:24%}
.mx-ki td.us{color:var(--ink);font-weight:600}
@media(max-width:700px){.mx-ki{min-width:640px}.mx-ki td{font-size:13px}.mx tfoot .mx-preis td{font-size:13px}}

/* Aktionscode unter dem Umschalter (#309, 2026-10-21) */
.code-zeile[hidden]{display:none}
.code-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.code-zeile label{font-family:var(--mono);text-transform:uppercase;font-size:12px;letter-spacing:.04em;color:var(--ink2)}
.code-zeile input{font-family:var(--mono);font-size:14px;text-transform:uppercase;padding:9px 12px;border:2px solid var(--ink);border-radius:0;background:var(--card);color:var(--ink);min-width:180px;min-height:42px}
.code-zeile input:focus{outline:2px solid var(--teal);outline-offset:2px}
.code-zeile .btn{min-height:42px;padding:0 16px}
.code-hinweis:empty{display:none}
.code-hinweis{font-size:13px;color:var(--ink2);flex-basis:100%}
.code-hinweis.ok{color:var(--ink)}

/* ---------- Lesbarkeit (23.10.2026, impeccable-Prüfung) ----------
   Text-Grau und Text-Violett dunkler, damit Text auf allen hellen Flächen mindestens 4,5:1 erreicht.
   Flächen, Linien, Verläufe und Fokusrahmen behalten das CI-Violett #6C5CE7.
   Kleinste Schrift 11 px, kleine Fließtexte ab 12 px. */
:root{--mute:#545A6E; --muted:#545A6E; --violet-ink:#4B3DC4; --teal-light:#4B3DC4}
.f-bar{background:linear-gradient(90deg,var(--teal-dark),var(--violet))}
.flow-line i{background:linear-gradient(90deg,var(--teal),var(--violet))}
@media(max-width:900px){.flow-line i{background:linear-gradient(180deg,var(--teal),var(--violet))}}
.flow-puls{background:var(--violet)}
.flow-step .who,.lg,.netz-hinweis,.shot-bar span,.mx thead th.mx-task{font-size:12px}
.ablauf-grid .flow-step .who{font-size:11px}
.mx tfoot .mx-preis td small{font-size:12px}
.md i,.month-wd i,.mp{font-size:11px}
@media(max-width:700px){.mx thead th small{font-size:11px;letter-spacing:.02em}}
/* Auf den dunklen Bildschirmen bleibt Text-Violett hell; „Nochmal ansehen“ im Freigabe-Stapel war dunkel auf dunkel. */
.draft,.stack-done,.calc,.netz,.lm-card,.shot,.cell-teal,.final-box,.plan.best{--violet-ink:#9C90FF}
.stack-done .btn-g{color:var(--text);border-color:rgba(255,255,255,.35)}
.stack-done .btn-g:hover{background:#fff;color:#0E1424;border-color:#fff}

/* Wortmarke mit Tusche-2 (28.10.2026): PLAYER in der Hausschrift, die 2 als roter Pinselhieb */
.p2{display:inline-flex;align-items:center;white-space:nowrap;font-weight:inherit;text-transform:uppercase}
h1 .p2-zwei,h2 .p2-zwei{width:2.15em;height:1.16em;margin:-.36em -.48em -.3em -.1em}
.p2-zwei{display:inline-block;flex:none;width:2.5em;height:1.35em;margin:-.5em -.55em -.42em -.12em;background:url(../img/marke/p2-zwei.png) left center/contain no-repeat}

/* Vergleich v2 (28.10.2026): Kernzahlen, Deckungsbalken, Zeitbalken, drei Gründe; Haarlinien statt Kästen */
.vg-kern{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:44px}
.vg-k{border-top:2px solid var(--ink);padding-top:18px}
.vg-k b{display:block;font-weight:900;font-size:clamp(40px,4.6vw,60px);line-height:1;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.vg-k:first-child b{color:var(--violet-ink)}
.vg-k span{display:block;margin-top:10px;font-size:16px;line-height:1.5;color:var(--ink2);max-width:28em}
.mx tbody td.us{background:rgba(108,92,231,.14)}
.mx tfoot td{font-family:var(--mono);font-weight:700}
.mx tfoot .vg-bar{display:block;width:72px;height:6px;margin:8px auto 0;background:linear-gradient(90deg,currentColor calc(var(--a) / 8 * 100%),rgba(14,20,36,.14) 0)}
.mx tfoot .us .vg-bar{color:var(--teal);background:linear-gradient(90deg,var(--teal) 100%,transparent 0)}
.vg-zeit{margin-top:40px;max-width:860px}
.vg-zeile{display:grid;grid-template-columns:260px minmax(0,1fr) 120px;align-items:center;gap:18px;padding:14px 0;border-top:1px solid var(--nv-line)}
.vg-wer{font-weight:700;font-size:15px;color:var(--ink)}
.vg-balken{height:20px;background:rgba(14,20,36,.07)}
.vg-balken i{display:block;height:100%;width:var(--w);background:var(--ink2)}
.vg-us .vg-balken i{background:var(--violet)}
.vg-zeile b{font-family:var(--mono);font-size:15px;text-align:right;color:var(--ink);white-space:nowrap}
.vg-us b{color:var(--violet-ink)}
.vg-zeit-note{margin-top:10px;font-size:12px;color:var(--mute)}
.vg-gruende{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;counter-reset:g}
.vg-gruende li{counter-increment:g;border-top:2px solid var(--ink);padding-top:16px}
.vg-gruende li::before{content:"0" counter(g);display:block;margin-bottom:10px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--violet-ink)}
.vg-gruende b{display:block;font-size:19px;font-weight:800;line-height:1.25;color:var(--ink)}
.vg-gruende span{display:block;margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink2)}
.plan-komplett .price{font-size:34px}
@media(max-width:860px){
  .vg-kern,.vg-gruende{grid-template-columns:minmax(0,1fr);gap:26px}
  .vg-zeile{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .vg-balken{grid-column:1/-1;grid-row:2}
}

/* Mobile first (29.10.2026): 16 px Seitenrand am Telefon, Hero oben enger, damit der Gameboy früher ins Bild kommt */
@media(max-width:600px){
  .wrap{padding:0 16px}
  .hero{padding:32px 0 56px}
  .hero-cta{margin-top:26px}
}

/* Weniger Text (29.10.2026): Liste „Auf LinkedIn / Mit Player Two“, Vorteile über den Zahlen, Vergleich zum Aufklappen */
.lv{margin-top:44px;border-top:2px solid var(--ink)}
.lv-kopf,.lv-zeile{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,1fr) minmax(0,1.35fr);gap:0 32px}
.lv-kopf{padding:12px 0 10px;font-family:var(--px);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.lv-kopf span:last-child{color:var(--violet-ink)}
.lv-zeile{padding:18px 0;border-top:1px solid var(--nv-line);align-items:start}
.lv-zeile h3{margin:0;font-size:17px;font-weight:800;line-height:1.3}
.lv-zeile p{margin:0;font-size:15.5px;line-height:1.5}
.lv-li{color:var(--mute)}
.lv-p2{color:var(--ink);font-weight:500}
.lv-p2 b{color:var(--violet-ink);font-weight:700}
@media(max-width:760px){
  .lv-kopf{display:none}
  .lv-zeile{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 0}
  .lv-zeile p::before{display:block;font-family:var(--px);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
  .lv-li::before{content:"Auf LinkedIn";color:var(--mute)}
  .lv-p2::before{content:"Mit Player Two";color:var(--violet-ink)}
}
.lead-zahlen{margin-top:56px;font-size:16px}
.vg-auf{margin-top:36px}
.vg-auf details{border-top:2px solid var(--ink)}
.vg-auf details:last-child{border-bottom:2px solid var(--ink)}
.vg-auf summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-family:var(--sans);font-weight:800;font-size:18px;min-height:44px}
.vg-auf summary::-webkit-details-marker{display:none}
.vg-auf summary::after{content:"";flex:none;width:10px;height:10px;border-right:3px solid var(--violet);border-bottom:3px solid var(--violet);transform:rotate(45deg);transition:transform .25s;margin-right:6px}
.vg-auf details[open] summary::after{transform:rotate(-135deg)}
.vg-inhalt{padding-bottom:36px}
.vg-inhalt .mx-hint,.vg-inhalt .lead,.vg-inhalt .duo{margin-top:0}
.vg-inhalt .mx-wrap{margin-top:18px}
.wer-fb{font-family:var(--mono);font-size:13.5px;line-height:1.5;color:var(--mute);margin-top:18px;max-width:54ch}

/* Live im Hero und Bühne für die zehn Dinge (29.10.2026) */
.hero-live{display:flex;align-items:center;gap:10px;margin:22px 0 0;font-family:var(--mono);font-size:13px;line-height:1.45;color:var(--ink2)}
.hero-live .led{flex:none;width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(0,224,198,.22);animation:hlPuls 1.6s ease-in-out infinite}
@keyframes hlPuls{50%{box-shadow:0 0 0 6px rgba(0,224,198,.08)}}
.hl-zeit{flex:none;color:var(--violet-ink);font-weight:700;white-space:nowrap}
.hl-text b{color:var(--ink);font-weight:700}
.hl-text.neu{animation:hlRein .35s steps(4)}
@keyframes hlRein{from{opacity:0;transform:translateY(5px)}}
.lv-nr{display:block;margin-bottom:5px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--violet-ink)}
.lv-li span{background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 56%/0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .7s cubic-bezier(.2,.8,.2,1) .15s}
.lv-zeile.an .lv-li span{background-size:100% 2px}
.lv-lcd{grid-column:2/4;margin:12px 0 0;padding:6px 10px;font-family:var(--mono);font-size:12.5px;line-height:1.4;color:#132838;background:#D8ECE2;border:2px solid #47777A;box-shadow:inset 0 0 0 2px rgba(19,40,56,.12),3px 3px 0 #47777A}
.lv-lcd::before{content:"\25B6  ";color:#47777A}
.lv-lcd.tippt span::after{content:"\258C";animation:lvCursor .7s steps(2) infinite}
@keyframes lvCursor{50%{opacity:0}}
@media(max-width:760px){
  .lv-lcd{grid-column:1;margin-top:8px}
  .hero-live{align-items:flex-start}
  .hero-live .led{margin-top:5px}
}