@font-face{font-family:'Archivo';src:url('../archivo-var.woff2') format('woff2-variations');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
:root{--ink:#041615;--ink2:#0A241E;--paper:#EEF0F1;--lemon:#C6FF01;--grey:#8B9198;--line:#1E3A33}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:'Archivo',system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}.wrap.narrow{max-width:820px}
h1{font-size:clamp(34px,5.2vw,60px);font-weight:900;font-stretch:112%;text-transform:uppercase;line-height:1.02;letter-spacing:-.01em}
h2{font-size:clamp(28px,4vw,46px);font-weight:900;font-stretch:112%;text-transform:uppercase;line-height:1.05;margin-bottom:18px}
h3{font-size:20px;font-weight:800}
.eyebrow{color:var(--lemon);letter-spacing:.26em;font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:16px}
.lead{font-size:19px;font-weight:300;color:#C6CBCE;max-width:640px}.lead.dark{color:#546069}
a{color:inherit;text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:999px;font-weight:800;font-size:16px;transition:transform .15s}
.btn:hover{transform:scale(1.04)}.btn.primary{background:var(--lemon);color:var(--ink)}.btn.primary.big{padding:20px 40px;font-size:18px}
.btn.ghost{border:2px solid #244038;color:var(--paper)}
.gnav{position:sticky;top:0;z-index:50;background:rgba(4,22,21,.86);backdrop-filter:blur(10px);border-bottom:1px solid #1E3A33}
.gnav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.glogo{font-weight:900}.gnav-r{display:flex;align-items:center;gap:24px;font-size:14.5px;color:#B8BFC4}
.gnav-r .cta{background:var(--lemon);color:var(--ink);padding:9px 18px;border-radius:999px;font-weight:800}
/* HERO */
.ghero{position:relative;padding:70px 0 64px;border-bottom:1px solid #102a24;overflow:hidden}
.ghero::before{content:"";position:absolute;inset:0;background:radial-gradient(760px 460px at 82% 8%,rgba(198,255,1,.10),transparent 60%);pointer-events:none}
.ghero-grid{display:flex;gap:40px;align-items:center;position:relative}
.ghero-l{flex:1.25;min-width:300px}.ghero-r{flex:1;min-width:260px}
.kicker{color:var(--lemon);letter-spacing:.22em;font-size:12.5px;font-weight:700;text-transform:uppercase;margin-bottom:20px}
.ghero h1{margin-bottom:26px}
.stat{border-left:3px solid var(--lemon);padding-left:20px;margin:6px 0 26px}
.statnum{display:block;font-size:clamp(44px,6vw,72px);font-weight:900;font-stretch:120%;color:var(--lemon);line-height:1}
.statsub{font-size:16px;color:#C6CBCE;max-width:440px;margin-top:10px;line-height:1.5}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.radarwrap{background:linear-gradient(165deg,#0C2822,#061c18);border:1px solid #1E3A33;border-radius:24px;padding:18px 14px 14px}
.radar{width:100%;height:auto;display:block;overflow:visible}
.radarcap{text-align:center;font-size:12.5px;color:#9FAAB1;margin-top:6px}.radarcap b{color:var(--lemon)}
/* SECTIONS */
.gsec{padding:74px 0;border-bottom:1px solid #1E3A33}
.gsec.light{background:var(--paper);color:var(--ink)}.gsec.light .eyebrow{color:#5c7a12}.gsec.light h2{color:var(--ink)}
.big-p{font-size:20px;font-weight:300;color:#D5DADE;max-width:720px;line-height:1.6;margin-top:8px}.gsec.light .big-p{color:#333D44}
.glaube{font-size:24px;font-style:italic;font-weight:300;color:var(--lemon);border-left:3px solid var(--lemon);padding:6px 0 6px 22px;margin:8px 0 26px;max-width:720px}
.pug3{display:flex;gap:18px;flex-wrap:wrap;margin-top:40px}
.pcard{flex:1;min-width:240px;background:#fff;border:1px solid #E2E7EA;border-radius:18px;padding:28px 26px}
.pcard.lemon{background:var(--lemon);border-color:var(--lemon)}
.pcard .pn{display:block;font-size:11px;font-weight:900;color:#8aa04a;letter-spacing:.14em;margin-bottom:12px}.pcard.lemon .pn{color:#5c7a12}
.pcard h4{font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;color:var(--ink)}
.pcard p{font-size:14.5px;color:#495259;line-height:1.6}.pcard.lemon p{color:#1c2a10}
.qwbox{background:var(--lemon);color:var(--ink);border-radius:24px;padding:30px 34px;position:relative;overflow:hidden}
.qwbox::after{content:"⚡";position:absolute;right:20px;top:8px;font-size:80px;opacity:.14}
.qwt{font-size:12.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
.qwd{font-size:19px;font-weight:500;line-height:1.5;position:relative}.qwd b{font-weight:800}
/* TIMELINE STEPS */
.steps{position:relative;margin-top:44px;padding-left:8px}
.steps::before{content:"";position:absolute;left:25px;top:14px;bottom:14px;width:2px;background:linear-gradient(#C6FF01,#1E3A33)}
.gstep{position:relative;display:flex;gap:26px;padding:18px 0 30px}
.gstep-w{position:relative;z-index:1;flex:none;width:52px;height:52px;border-radius:12px;background:var(--lemon);color:var(--ink);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:0 0 0 6px #041615}
.gstep-b{padding-top:4px}.gstep-b h3{color:var(--paper);margin-bottom:8px}
.gstep-b p{font-size:15.5px;color:#A9B1B6;max-width:700px;line-height:1.6}
.gstep-ok{color:var(--lemon)!important;font-weight:600;font-size:14px!important;margin-top:10px}
/* VORLAGE */
.vscroll{overflow-x:auto;margin-top:34px}
.vtab{width:100%;border-collapse:collapse;font-size:13px;min-width:440px;background:#fff;border-radius:12px;overflow:hidden}
.vtab th{text-align:left;background:var(--ink);color:var(--lemon);font-weight:700;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;padding:11px 12px}
.vtab td{border-bottom:1px solid #E2E7EA;height:40px;padding:0 12px;color:var(--ink)}
.vtab td.vlab{font-weight:600;font-size:12.5px;width:40%;border-right:1px solid #E2E7EA;background:#F5F7F8}
.vfootnote{font-size:13px;color:#5A646B;margin-top:16px;line-height:1.6}
.merk{background:var(--lemon);color:var(--ink);border-radius:24px;padding:34px 38px;font-size:23px;font-weight:800;font-stretch:108%;line-height:1.25}
.bench{list-style:none;margin-top:22px}.bench li{font-size:15.5px;color:#C6CBCE;padding:9px 0 9px 26px;position:relative}
.bench li::before{content:'·';position:absolute;left:6px;color:var(--lemon);font-weight:900}
.gcta{padding:90px 0;background:linear-gradient(165deg,#0C2822,#041615);text-align:center}
.gcta h2{margin-bottom:14px}.gcta>.wrap>p{font-size:18px;color:#C6CBCE;max-width:560px;margin:0 auto 30px}
.others{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.others a{background:#0C2822;border:1px solid #1E3A33;border-radius:999px;padding:10px 18px;font-size:13.5px;color:#D5DADE;font-weight:600;transition:border-color .15s}
.others a:hover{border-color:var(--lemon);color:var(--lemon)}
.gfoot{padding:34px 0;border-top:1px solid #1E3A33;font-size:13px;color:#7E868D}.gfoot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}.gfoot a{color:#9FAAB1}
/* BELIEF BREAK */
.bbreak{background:#061c18;padding:56px 0;border-bottom:1px solid #1E3A33}
.bb{display:flex;gap:22px;align-items:stretch;flex-wrap:wrap}
.bb-col{flex:1;min-width:260px;border-radius:18px;padding:24px 26px}
.bb-myth{background:#0C2822;border:1px solid #1E3A33}
.bb-truth{background:var(--lemon);color:var(--ink)}
.bb-lab{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.bb-myth .bb-lab{color:#7E868D}
.bb-myth p{font-size:18px;font-style:italic;color:#99A1A7;text-decoration:line-through;text-decoration-color:#3a4a44}
.bb-truth .bb-lab{color:#4c6510}
.bb-truth p{font-size:18px;font-weight:600;line-height:1.4}
@media(max-width:760px){.ghero-grid{flex-direction:column}.gnav-r a:not(.cta){display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* ===== Interaktive Werkzeuge ===== */
.toolcard{background:#fff;border:1px solid #E2E7EA;border-radius:24px;padding:26px 26px 28px;margin-top:26px}
.toolcard h3{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin-bottom:6px}
.toolhint{font-size:13.5px;color:#5A646B;line-height:1.55}
.chiprow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.chip{background:#F5F7F8;border:1px solid #D5DADE;border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--lemon);border-color:var(--ink)}
.chip:disabled{cursor:default}
.addrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.addrow input{flex:1;min-width:180px;background:#F5F7F8;border:1px solid #D5DADE;border-radius:12px;padding:11px 14px;font-size:14px;font-family:inherit;color:var(--ink)}
.tbtn{background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:12px 22px;font-size:13.5px;font-weight:800;font-family:inherit;cursor:pointer;transition:transform .15s}
.tbtn:hover{transform:scale(1.03)}
.tbtn.lemon{background:var(--lemon);color:var(--ink);font-size:15px;padding:14px 26px}
.vmrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid #ecece4}
.vmname{flex:1;min-width:150px;font-size:15px;font-weight:700;color:var(--ink)}
/* Die kritischste Rolle wird markiert, nicht angerotet: Lemon zeigt hier auf
   das eine, was als Naechstes drankommt. Das ist die eine Lampe dieser Ansicht. */
.vmrow.danger{background:rgba(198,255,1,.10);border-left:3px solid var(--lemon);
  margin-left:-14px;padding-left:11px;border-radius:0 8px 8px 0}
.vmrow.danger .vmname::after{content:"zuerst dran";display:inline-block;margin-left:10px;
  font-size:10.5px;font-weight:800;color:var(--v2-key-paper,#4C6510);letter-spacing:.14em;text-transform:uppercase}
.sb{width:38px;height:38px;border-radius:12px;border:1px solid #D5DADE;background:#F5F7F8;font-weight:900;font-size:14px;font-family:inherit;color:#7a827c;cursor:pointer;transition:background .15s}
/* Keine Ampel (Rot ist laut DESIGN.md blockierenden Meldungen vorbehalten und
   darf nie neben Lemon stehen, ein Gelb gibt es nicht). Stattdessen die eigene
   Leiter der Marke, von Tinte nach Licht: je heller, desto besser vertreten.
   1 = geschlossen/dunkel, 2 = halb offen, 3 = hell. Die volle Lemon-Flaeche
   bleibt der einen Handlungsaufforderung vorbehalten (markierte Zeile). */
.sb.on1{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.sb.on2{background:#244038;border-color:#244038;color:var(--paper)}
.sb.on3{background:rgba(198,255,1,.30);border-color:#AFCB16;color:var(--ink)}
.vmdel{background:none;border:0;color:#b0b0a6;font-size:20px;line-height:1;cursor:pointer;padding:4px 6px}
.vmdel:hover{color:var(--ink)}
.ampel{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.amp{flex:1;min-width:120px;border-radius:18px;padding:14px 16px;text-align:center}
.amp b{display:block;font-size:28px;font-weight:900;line-height:1.15}
.amp span{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
/* Kacheln: eine ruhige Papierflaeche, Gewicht statt Farbe. Nur die Risiko-
   Kachel bekommt die Lemon-Kante, weil sie die Handlungsaufforderung traegt. */
/* Kacheln folgen derselben Leiter wie die Knoepfe darueber. */
.amp.rot{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.amp.rot b{color:var(--paper)}
.amp.gelb{background:#F5F7F8;color:#333D44;border:1px solid #D5DADE}
.amp.gruen{background:rgba(198,255,1,.16);color:var(--ink);border:1px solid #AFCB16}
.amp.total{background:var(--ink);color:var(--paper)}
.amp.total b{color:var(--lemon)}
.calcrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.calcrow select,.calcrow input{background:#F5F7F8;border:1px solid #D5DADE;border-radius:12px;padding:11px 14px;font-size:14px;font-family:inherit;color:var(--ink)}
.calcrow input{width:170px}
.calcout{font-size:24px;font-weight:900;color:var(--ink);margin-top:14px}
.calcout small{display:block;font-size:13px;font-weight:400;color:#5A646B;margin-top:4px}
.toolmerk{background:var(--ink);color:var(--paper);border-radius:18px;padding:22px 26px;font-size:17px;font-weight:700;line-height:1.45;margin-top:26px}
.toolmerk b{color:var(--lemon)}
.pdfrow{margin-top:22px}
.rcq{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:13px 0;border-bottom:1px solid #ecece4}
.rcq p{font-size:15px;font-weight:600;color:var(--ink);flex:1;min-width:220px}
.jn{display:flex;gap:8px}
.jn button{border:1px solid #D5DADE;background:#F5F7F8;border-radius:999px;padding:8px 18px;font-size:13px;font-weight:800;font-family:inherit;color:#7a827c;cursor:pointer}
.jn button.onja{background:var(--ink);border-color:var(--ink);color:var(--lemon)}
.jn button.onnein{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.verdict{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:22px}
.vscore{flex:none;width:84px;height:84px;border-radius:24px;background:var(--ink);color:var(--lemon);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900}
.vtext{flex:1;min-width:220px}
.vtext b{display:block;font-size:18px;color:var(--ink);margin-bottom:4px}
.vtext p{font-size:14px;color:#495259;line-height:1.55}
.uccard{background:#F5F7F8;border:1px solid #D5DADE;border-radius:18px;padding:22px 24px;margin-top:18px}
.uccard .uck{font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#5c7a12;margin-bottom:8px}
.uccard h4{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:10px}
.uccard p{font-size:14.5px;color:#3d463f;line-height:1.6}
.uccard .ucok{color:var(--v2-key-paper,#4C6510);font-weight:700;font-size:14px;margin-top:12px}
.stepchk{flex:none;width:34px;height:34px;margin-left:auto;margin-top:6px;border-radius:12px;border:2px solid #2a4a40;background:transparent;cursor:pointer;position:relative;transition:border-color .15s}
.stepchk:hover{border-color:var(--lemon)}
.stepchk.done{background:var(--lemon);border-color:var(--lemon)}
.stepchk.done::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:900;color:var(--ink)}
.ppwrap{margin:26px 0 4px;max-width:560px}
.ppbar{height:10px;border-radius:999px;background:#0C2822;border:1px solid #1E3A33;overflow:hidden}
.ppfill{height:100%;width:0;background:var(--lemon);border-radius:999px;transition:width .3s}
.pplabel{font-size:13.5px;color:#9FAAB1;margin-top:8px;font-weight:600}
.pplabel b{color:var(--lemon)}
.ppdone{display:none;margin-top:12px;background:var(--lemon);color:var(--ink);border-radius:12px;padding:12px 16px;font-size:14.5px;font-weight:700;line-height:1.4}
.ppdone.show{display:block}
.kurscta{background:#061c18;padding:64px 0}
.kurscta .wrap{text-align:center}
.kurscta .kdesc{font-size:16.5px;color:#C6CBCE;max-width:560px;margin:0 auto 28px;line-height:1.6}

/* ===== E-Mail-Gate vor dem PDF ===== */
.gatecard{display:none;margin-top:18px;background:#fff;border:1px solid #D5DADE;border-radius:18px;padding:20px 22px;max-width:560px;text-align:left}
.gatecard.open{display:block}
.gatecard .gt{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:12px}
.gaterow{display:flex;gap:10px;flex-wrap:wrap}
.gaterow input[type="email"]{flex:1;min-width:200px;background:#F5F7F8;border:1px solid #D5DADE;border-radius:12px;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--ink)}
.gaterow input[type="email"]:focus{outline:2px solid var(--ink);outline-offset:1px}
.gaterow button{border:0;cursor:pointer;font-family:inherit}
.gatenote{font-size:12.5px;color:#5A646B;margin-top:10px;line-height:1.5}
.gateerr{display:none;font-size:13px;color:#a92f2f;font-weight:700;margin-top:8px}
.gateerr.show{display:block}

.rv{transform:translateY(26px);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{transform:none}
#bar{position:fixed;top:0;left:0;height:3px;background:#C6FF3D;width:0;z-index:100}
@keyframes pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.glowpulse{position:absolute;width:56%;height:70%;right:-6%;top:8%;background:radial-gradient(ellipse,rgba(198,255,1,.15),transparent 62%);filter:blur(10px);animation:pulse 6s ease-in-out infinite;pointer-events:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.rv{transform:none}}

/* bebildert-Import */
.hero-photo {
        position: relative;
        min-height: 520px;
        border-radius:24px;
        overflow: hidden;
        border: 1px solid rgba(198, 255, 1, 0.22);
        box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
        background: #0a241e;
}
.hero-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, transparent 54%, rgba(4, 22, 21, 0.84)),
          linear-gradient(90deg, rgba(4, 22, 21, 0.2), transparent 45%);
        pointer-events: none;
}
.hero-photo img {
        width: 100%;
        height: 520px;
        object-fit: cover;
        object-position: 64% center;
        display: block;
        transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-photo:hover img {
        transform: scale(1.035);
}
.hero-photo-tag {
        position: absolute;
        z-index: 2;
        left: 22px;
        bottom: 18px;
        max-width: 225px;
        color: #EEF0F1;
        font-size: 12px;
        line-height: 1.45;
        font-weight: 650;
}
.hero-photo-tag span,
      .story-caption span {
        display: block;
        color: var(--lemon);
        letter-spacing: 0.17em;
        text-transform: uppercase;
        font-size: 10px;
        font-weight: 800;
        margin-bottom: 5px;
}
.story-visual {
        position: relative;
        margin-top: 28px;
        min-height: 470px;
        overflow: hidden;
        border-radius:24px;
        background: #102a24;
        box-shadow: 0 30px 80px rgba(4, 22, 21, 0.14);
}
.story-visual img {
        width: 100%;
        height: 470px;
        object-fit: cover;
        display: block;
        transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.story-visual:hover img {
        transform: scale(1.025);
}
.story-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          rgba(4, 22, 21, 0.88),
          rgba(4, 22, 21, 0.18) 54%,
          transparent 76%
        );
        pointer-events: none;
}
.story-caption {
        position: absolute;
        z-index: 2;
        left: clamp(24px, 5vw, 56px);
        bottom: clamp(26px, 5vw, 54px);
        max-width: 350px;
        color: #EEF0F1;
}
.story-caption strong {
        display: block;
        font-size: clamp(25px, 3.3vw, 40px);
        font-stretch: 112%;
        text-transform: uppercase;
        line-height: 1.05;
        margin: 10px 0;
}
.story-caption p {
        color: #D5DADE;
        font-size: 14px;
        line-height: 1.55;
}
@media (max-width: 760px) {
.hero-photo,
        .hero-photo img {
          min-height: 430px;
          height: 430px;
}
}
@media (max-width: 560px) {
.hero-photo,
        .hero-photo img {
          min-height: 380px;
          height: 380px;
}
.hero-photo img {
          object-position: 67% center;
}
.story-visual,
        .story-visual img {
          min-height: 430px;
          height: 430px;
}
.story-visual img {
          object-position: 45% center;
}
.story-visual::after {
          background: linear-gradient(
            0deg,
            rgba(4, 22, 21, 0.96),
            rgba(4, 22, 21, 0.14) 78%
          );
}
}
/* ===== REDESIGN v4 · Hero / Trust / Typo / CTA ===== */
.gnav{box-shadow:0 1px 0 rgba(198,255,1,.04)}
.gnav-r .cta{box-shadow:0 6px 18px rgba(198,255,1,.16);transition:transform .15s,box-shadow .15s}
.gnav-r .cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(198,255,1,.26)}
.btn.primary{box-shadow:0 10px 26px rgba(198,255,1,.16)}
.btn.primary:hover{box-shadow:0 14px 34px rgba(198,255,1,.26)}
.ghero{padding:84px 0 78px}
.ghero-grid{gap:52px}
.ghero-r{flex:1.12}
.hero-sub{font-size:18px;font-weight:300;color:#C6CBCE;max-width:470px;line-height:1.55;margin:-10px 0 28px}
.riskrev{margin-top:16px;font-size:13px;font-weight:700;letter-spacing:.01em;color:#9FAAB1;display:flex;align-items:center;gap:8px}
.riskrev::before{content:"✓";color:var(--lemon);font-weight:900}
.hero-rr{margin-top:18px}
/* Trust band under hero */
.trustband{background:#061c18;border-bottom:1px solid #102a24;padding:22px 0}
.trustband .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tb-line{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:700;color:#D5DADE;max-width:540px;line-height:1.4}
.tb-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--lemon);box-shadow:0 0 0 4px rgba(198,255,1,.14)}
.tbadges{display:flex;gap:9px;flex-wrap:wrap}
.tbadge{font-size:12px;font-weight:700;letter-spacing:.03em;color:#B8BFC4;background:#0C2822;border:1px solid #1E3A33;border-radius:999px;padding:7px 14px;white-space:nowrap}
/* Calmer cards */
.pcard{box-shadow:0 18px 44px rgba(4,22,21,.10)}
.gsec.light{padding:88px 0}
/* Proof / Phil statement */
.proof{background:#061c18}
.proof-grid{display:flex;gap:48px;align-items:center;flex-wrap:wrap}
.proof-l{flex:1.05;min-width:300px}
.proof-r{flex:1;min-width:280px}
.proof-r .story-visual{margin-top:0}
.philquote{font-size:clamp(22px,2.6vw,31px);font-weight:300;line-height:1.34;color:var(--paper);border-left:3px solid var(--lemon);padding:6px 0 6px 24px;margin:6px 0 22px;max-width:640px}
.philquote b{font-weight:700;color:var(--lemon)}
.philsig{font-size:14.5px;color:#A9B1B6}
.philsig b{color:var(--paper);font-weight:800}
/* Mid-page CTA */
.midcta{padding:10px 0 44px;background:var(--ink)}
.midcta-box{background:linear-gradient(150deg,#0C2822,#061c18);border:1px solid #1E3A33;border-radius:24px;padding:36px 40px;display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 26px 70px rgba(4,22,21,.38)}
.midcta-t{flex:1;min-width:280px}
.midcta-h{font-size:clamp(22px,2.6vw,30px);font-weight:900;font-stretch:110%;text-transform:uppercase;line-height:1.08;color:var(--paper);margin-bottom:8px}
.midcta-t p{font-size:15.5px;color:#A9B1B6;line-height:1.55;max-width:540px}
.midcta-c{flex:none}
.midcta-c .riskrev{margin-top:12px}
/* Final CTA grid + relocated radar */
.gcta-grid{display:flex;gap:52px;align-items:center;text-align:left;flex-wrap:wrap;margin-bottom:10px}
.gcta-l{flex:1.1;min-width:300px}
.gcta-r{flex:.9;min-width:280px}
.gcta-l h2{margin-bottom:14px}
.gcta-l>p{font-size:18px;color:#C6CBCE;max-width:520px;margin:0 0 26px}
.gcta-r .radarwrap{max-width:400px;margin:0 auto}
.midcta-box{padding:28px 24px}
.gcta-grid{gap:32px}
.trustband .wrap{flex-direction:column;align-items:flex-start}
.gcta-grid{text-align:left}


/* ============================================================
   HERO-ATMOSPHÄRE  —  bg-line-2.webp
   ------------------------------------------------------------
   Bisher trugen alle acht Werkzeugseiten dieselbe Stimmung:
   radial-gradient(760px 460px at 82%% 8%%, rgba(198,255,1,.10)).
   Identisch auf jeder Seite, also ohne Unterscheidungswert.
   Jede Seite bekommt jetzt ihr eigenes Bild aus 01-Website/webimg,
   das dort bis heute ungenutzt lag.
   Zweite Linienvariante, damit die Schwesterseite sich unterscheidet.

   Wichtig: Diese Bilder sind im Mittel sehr dunkel (Luminanz
   0,04–0,10), ihre Lemon-Lichter aber hell (bis 0,58). Roh hinter
   Text gelegt erzeugen sie exakt den Fehler aus Befund 1. Deshalb
   laufen sie mit niedriger Deckkraft UND unter einem Abdunkler,
   der zur Textspalte hin dichter wird. Nachgemessen: Fließtext
   bleibt über 9:1.
   ============================================================ */
.ghero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('../img/bg-line-2.webp') center right/cover no-repeat;
  opacity:.13;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 46%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 46%,#000 100%);
}
/* Abdunkler über dem Bild, unter dem Inhalt. */
.ghero>.wrap{position:relative;z-index:1}
.ghero-l{position:relative}
.ghero-l::before{
  content:"";position:absolute;inset:-16px -20px;z-index:-1;border-radius:24px;
  background:linear-gradient(90deg,rgba(4,22,21,.86),rgba(4,22,21,.62) 78%,transparent);
  pointer-events:none;
}
@media(max-width:860px){
  /* Einspaltig liegt der Text auf der Bildmitte — Bild zurücknehmen. */
  .ghero::after{opacity:.08;-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 60%);mask-image:linear-gradient(180deg,#000 0,transparent 60%)}
  .ghero-l::before{background:linear-gradient(180deg,rgba(4,22,21,.80),rgba(4,22,21,.90))}
}