/* =====================================================================
   LaufbahnFinanz · Variante B „Dunkel“ (Kundenwunsch 12.10.2026)
   Farben aus dem Erstgespräch: Schwarz als Grund, Grün für Handlung und
   Vermögen (CTA, Ersparnis, „Vermögen mit Plan“), Blau für Vertrauen und
   Dienst (Nachweise, Dienstbezüge, dunkle Flächen).
   Greift, wenn <html> die Klasse v-dunkel trägt. Seit 14.10.2026 fest auf
   allen Seiten gesetzt (Kunde hat Variante B gewählt). Ohne die Klasse
   erscheint wieder die helle Variante A.
   ===================================================================== */
html.v-dunkel{
  color-scheme:dark;
  --mist:#0A0E0D; --mist-2:#131A18; --white:#FFFFFF;
  --ink:#E8F1EC; --muted:#A9BBB1; --muted-2:#8C9F95;
  --green:#56CC7E; --green-deep:#F2F8F4; --forest:#050807; --forest-2:#0C2238;
  --leaf:#35B058; --mint:#9FE2B5; --mint-bg:rgba(53,176,88,.15); --mint-line:#BFE8CC;
  --blue:#3B86D6; --blue-hell:#8DC1F1; --blue-deep:#0C2238; --blue-bg:rgba(59,134,214,.16);
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.2); --line-ctrl:#3F5A6E;
  --glass:rgba(20,28,26,.7); --glass-line:rgba(255,255,255,.08);
  --shadow-glass:0 24px 48px -22px rgba(0,0,0,.75), 0 2px 6px -2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-lift:0 34px 60px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(86,204,126,.18), inset 0 1px 0 rgba(255,255,255,.08);
  --shadow-btn:0 14px 30px -14px rgba(53,176,88,.65);
}
.v-dunkel body{background:radial-gradient(120% 60% at 85% -10%, rgba(59,134,214,.10), transparent 60%) no-repeat, var(--mist)}
.v-dunkel ::selection{background:var(--leaf); color:#04140A}

/* Bedienelemente: Grün mit dunkler Schrift (Kontrast > 5:1) */
.v-dunkel .btn--primary, .v-dunkel .dark .btn--primary{background:var(--leaf); color:#04140A; box-shadow:var(--shadow-btn)}
.v-dunkel .btn--primary:hover, .v-dunkel .dark .btn--primary:hover{background:var(--mint); color:#04140A}
.v-dunkel .btn--primary:active, .v-dunkel .dark .btn--primary:active{background:var(--mint-line); color:#04140A}
.v-dunkel .btn--primary:focus-visible{outline-color:var(--mint)}
.v-dunkel .btn--ghost{background:rgba(255,255,255,.04); border-color:var(--line-ctrl); color:var(--ink)}
.v-dunkel .btn--ghost:hover{background:rgba(255,255,255,.09); border-color:var(--blue-hell)}
.v-dunkel .btn--ghost:active{background:rgba(255,255,255,.14)}
.v-dunkel .link:hover{color:var(--mint)}
.v-dunkel .link:active{color:var(--leaf)}
.v-dunkel .skip{background:#1F6633}
.v-dunkel :focus-visible{outline-color:var(--mint)}
.v-dunkel .lit::before{background:radial-gradient(460px circle at var(--mx) var(--my), rgba(141,193,241,.10), rgba(141,193,241,0) 62%)}

/* Kopfzeile, Menü, schwebender Knopf */
.v-dunkel .hd{background:rgba(10,14,13,.72)}
.v-dunkel .hd.is-scrolled{background:rgba(10,14,13,.9); box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
.v-dunkel .burger:hover{background:rgba(255,255,255,.08)}
.v-dunkel .burger:active{background:rgba(255,255,255,.14)}
.v-dunkel .drawer{background:radial-gradient(130% 55% at 100% 100%, rgba(59,134,214,.16), transparent 62%), var(--mist)}
.v-dunkel .drawer__karte{background:rgba(255,255,255,.05)}
.v-dunkel .fab{background:rgba(20,28,26,.9); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 22px -10px rgba(0,0,0,.6), 0 28px 50px -24px rgba(0,0,0,.8)}
.v-dunkel .fab .ico{color:#04140A; background:linear-gradient(145deg, #6FD993, var(--leaf) 55%, #1F8A43)}
.v-dunkel .avatar{box-shadow:0 0 0 2px rgba(255,255,255,.14), 0 6px 14px -6px rgba(0,0,0,.6)}

/* Aufmacher: Dienstbezüge in Blau, Vermögen mit Plan in Grün */
.v-dunkel .laufbahn .lb-dienst{stroke:var(--blue-hell); stroke-opacity:.75}
.v-dunkel .laufbahn .lb-ende{stroke:var(--blue-hell); stroke-opacity:.55}
.v-dunkel #lb-schraffur line{stroke:var(--blue-hell)}
.v-dunkel .laufbahn .lb-luecke{opacity:.75}
.v-dunkel .laufbahn .lb-ereignis{fill:var(--blue-hell); opacity:.8}
.v-dunkel .laufbahn .lb-label{fill:var(--ink)}
.v-dunkel .laufbahn .lb-label--plan{fill:var(--green)}
.v-dunkel .laufbahn .lb-plan{filter:drop-shadow(0 0 12px rgba(53,176,88,.55))}
.v-dunkel .laufbahn .lb-punkt{fill:#0A0E0D}
.v-dunkel .laufbahn .lb-spitze{stroke:#0A0E0D}
.v-dunkel .laufbahn .lb-griff circle:not(.lb-fokus){fill:var(--leaf); stroke:#0A0E0D}
.v-dunkel .laufbahn .lb-griff:hover circle:not(.lb-fokus), .v-dunkel .laufbahn .lb-griff.is-drag circle:not(.lb-fokus){fill:var(--mint)}
.v-dunkel .laufbahn .lb-griff .lb-griff-text{fill:var(--ink)}
.v-dunkel .laufbahn .lb-tip rect{fill:rgba(20,28,26,.92); stroke:rgba(255,255,255,.1); filter:drop-shadow(0 12px 24px rgba(0,0,0,.6))}
.v-dunkel .laufbahn .lb-tip-t{fill:var(--ink)}
.v-dunkel .info__btn{background:var(--mist-2); border-color:var(--line-strong); color:var(--blue-hell)}
.v-dunkel .info__btn:hover, .v-dunkel .info__btn[aria-expanded="true"]{background:var(--blue); color:#fff}
.v-dunkel .info__pop{background:rgba(20,28,26,.96)}
.v-dunkel .note.pos-0{background:#18211E}
.v-dunkel .note.pos-1, .v-dunkel .note.pos-2{background:rgba(24,33,30,.96)}
.v-dunkel .note__ico{background:linear-gradient(135deg,var(--blue),#1C4E86); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 8px 16px -8px rgba(0,0,0,.7)}
.v-dunkel .note.is-done .note__ico{background:linear-gradient(135deg,var(--leaf),#1F8A43)}
.v-dunkel .notes__hd i{background:var(--leaf)}
.v-dunkel .chip--a{background:var(--blue-bg); color:var(--blue-hell)}

/* Nachweise: Vertrauen in Blau */
.v-dunkel .trust__row::after, .v-dunkel .promise__grid::after{background:linear-gradient(100deg, transparent 30%, rgba(141,193,241,.16) 50%, transparent 70%)}
.v-dunkel .proof > .ico, .v-dunkel .proof__go{color:var(--blue-hell)}
.v-dunkel .trust__row.in .proof:hover{background:rgba(255,255,255,.05); box-shadow:0 22px 40px -24px rgba(0,0,0,.8)}
.v-dunkel .proof:active{background:rgba(255,255,255,.08)}
.v-dunkel .badge__ico, .v-dunkel .tile__ico{background:linear-gradient(135deg, rgba(59,134,214,.26), rgba(59,134,214,.08)); color:var(--blue-hell); box-shadow:inset 0 0 0 1px rgba(141,193,241,.22)}
.v-dunkel .badge__year{color:var(--blue-hell)}
.v-dunkel .promise__item > .ico{color:var(--blue-hell)}
.v-dunkel .promise__item:hover{background:rgba(255,255,255,.04)}
.v-dunkel .promise__item::after{background:linear-gradient(90deg, var(--blue), var(--leaf))}
.v-dunkel .person__fig figcaption.glass{background:rgba(14,20,18,.88)}

/* 24 Monate */
.v-dunkel .frist__bg{background:radial-gradient(60% 60% at 80% 40%, rgba(59,134,214,.16), transparent 70%), radial-gradient(40% 40% at 20% 80%, rgba(53,176,88,.08), transparent 70%)}
.v-dunkel .step.is-on .step__dot{background:var(--leaf); border-color:var(--leaf); color:#04140A}
.v-dunkel .plan__bar{background:linear-gradient(100deg,#123B26,#0F2E46)}
.v-dunkel .frist[data-stage="3"] .plan__bar{background:linear-gradient(100deg,#1F6633,#123B26)}
.v-dunkel .plan__row{border-top-color:rgba(255,255,255,.06)}
.v-dunkel .plan__kurve .pk-dienst, .v-dunkel .plan__kurve .pk-ende{stroke:var(--blue-hell)}

/* Dunkle Flächen: Schwarz → Nachtblau, grünes Licht */
.v-dunkel .ledger{background:linear-gradient(112deg,#050807 0%,#0C2238 55%,#0F3A22 100%); border-block:1px solid rgba(255,255,255,.06)}
.v-dunkel .cta__box, .v-dunkel .wa, .v-dunkel .erfahrung__story{background:linear-gradient(118deg,#050807 0%,#0C2238 62%,#0E2A1C 100%); border:1px solid rgba(255,255,255,.07); box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.v-dunkel .cta__box::before, .v-dunkel .wa::before, .v-dunkel .erfahrung__story::before{background:radial-gradient(closest-side, rgba(53,176,88,.3), rgba(53,176,88,0))}
.v-dunkel .spar__zahl{background:linear-gradient(118deg,#0F3A22 0%,#0A2416 60%,#071A10 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(86,204,126,.25), 0 22px 40px -22px rgba(0,0,0,.8)}
.v-dunkel .ft{background:#050807; border-top:1px solid rgba(255,255,255,.06)}
.v-dunkel .mband{background:#0E1412}

/* Ablauf */
.v-dunkel .ablauf__stage::after{background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.3px)}
.v-dunkel .ablauf__glow{background:radial-gradient(closest-side, rgba(59,134,214,.3), rgba(59,134,214,0))}
.v-dunkel .ablauf__bar{background:linear-gradient(90deg, var(--blue), var(--leaf)); box-shadow:0 0 14px rgba(59,134,214,.5)}
.v-dunkel .ablauf__tip{background:#0A0E0D}
.v-dunkel .ablauf__nav button:hover{background:rgba(255,255,255,.04)}
.v-dunkel .ablauf__nav button:active{background:rgba(255,255,255,.08)}
.v-dunkel .ablauf__nav button::before{background:var(--mist-2)}
.v-dunkel .ablauf__nav li.is-on button{background:rgba(255,255,255,.06); color:var(--green); box-shadow:0 10px 24px -16px rgba(0,0,0,.8)}
.v-dunkel .ablauf__nav li.is-on button::before{background:var(--leaf); border-color:var(--leaf); color:#04140A}
.v-dunkel .wpanel__big, .v-dunkel .stufe__big{-webkit-text-stroke-color:rgba(141,193,241,.16)}
.v-dunkel .bub--you{background:#1F6633; color:#fff; box-shadow:0 12px 24px -16px rgba(0,0,0,.8)}
.v-dunkel .bub--rl{background:rgba(24,33,30,.92)}
.v-dunkel .docu::after{background:linear-gradient(110deg, transparent 35%, rgba(141,193,241,.14) 50%, transparent 65%)}
.v-dunkel .docu__row{border-bottom-color:rgba(255,255,255,.06)}
.v-dunkel .mini i{background:var(--blue-bg); color:var(--blue-hell)}
.v-dunkel .mini em{color:#04140A}

/* Stufen, Lehren, Listen */
.v-dunkel .stufe__n{background:var(--mint-bg); color:var(--mint)}
.v-dunkel .stufe__tiefe i{background:rgba(255,255,255,.18)}
.v-dunkel .stufe:nth-child(1) .stufe__tiefe i:nth-child(-n+1), .v-dunkel .stufe:nth-child(2) .stufe__tiefe i:nth-child(-n+2), .v-dunkel .stufe:nth-child(3) .stufe__tiefe i{background:var(--leaf); box-shadow:0 0 10px rgba(53,176,88,.55)}
.v-dunkel .lehre__ico{background:var(--blue-bg); color:var(--blue-hell); box-shadow:inset 0 0 0 1px rgba(141,193,241,.22)}
.v-dunkel .spar__txt b{color:var(--ink)}

/* Unterseiten, Tabellen, Fragen, Formular, Blog */
.v-dunkel .phero__veil{background:linear-gradient(90deg, var(--mist) 0%, var(--mist) 36%, rgba(10,14,13,.6) 56%, rgba(10,14,13,0) 78%)}
.v-dunkel .phero__art .pa-dienst, .v-dunkel .phero__art .pa-ende{stroke:var(--blue-hell)}
.v-dunkel .matrix thead th{background:rgba(255,255,255,.03); color:var(--blue-hell)}
.v-dunkel .matrix tbody tr:hover td, .v-dunkel .matrix tbody tr:hover th{background:rgba(255,255,255,.03)}
.v-dunkel .qa__btn:hover{background:rgba(255,255,255,.04)}
.v-dunkel .qa__btn:active{background:rgba(255,255,255,.08)}
.v-dunkel .field input, .v-dunkel .field textarea, .v-dunkel .field select{background:rgba(255,255,255,.04); color:var(--ink)}
.v-dunkel .field input:focus-visible, .v-dunkel .field textarea:focus-visible, .v-dunkel .field select:focus-visible, .v-dunkel .field input:active, .v-dunkel .field textarea:active{background:rgba(255,255,255,.07)}
.v-dunkel .kat{background:rgba(255,255,255,.04)}
.v-dunkel .kat:hover{background:rgba(255,255,255,.09)}
.v-dunkel .kat[aria-pressed="true"]{background:var(--leaf); border-color:var(--leaf); color:#04140A}
.v-dunkel .kat[aria-pressed="true"] span{color:#0A2416}
.v-dunkel .tl__tip{background:#0A0E0D}
.v-dunkel .toc b, .v-dunkel .article__kicker time{color:var(--blue-hell)}
@media (max-width:900px){
  .v-dunkel .wpanel{background:rgba(255,255,255,.03)}
  .v-dunkel .phero__veil{background:linear-gradient(180deg, var(--mist) 0%, rgba(10,14,13,.75) 50%, rgba(10,14,13,.2) 100%)}
}
.v-dunkel .li-knopf{background:rgba(255,255,255,.03)}
.v-dunkel .li-knopf:hover{background:rgba(255,255,255,.07); border-color:var(--line-ctrl)}
.v-dunkel .li-knopf:hover .ico{color:#70B5F9}
.v-dunkel .li-knopf:active{background:rgba(255,255,255,.11)}