/* =====================================================================
   Wertrechner – Gestaltung
   Farben, Schriften und Maße entsprechen index.html und fachwissen/artikel.css.
   Mobil zuerst; keine externen Ressourcen.
   ===================================================================== */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-v20-latin-regular.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-v20-latin-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-v20-latin-600.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/space-grotesk-v22-latin-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/space-grotesk-v22-latin-600.woff2') format('woff2');}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/fira-sans-v18-latin-300.woff2') format('woff2');}

:root{
  --ink-950:#0a121d; --ink-900:#0f1a28; --ink-800:#172334;
  --ink-line:rgba(255,255,255,.08); --ink-line-2:rgba(255,255,255,.16);
  --on-ink:#edeff2; --on-ink-2:#aeb6c2; --on-ink-3:#848e9c;
  --paper:#f4f3ef; --surface:#ffffff; --line:#e0ddd5; --line-strong:#c9c5bb;
  --text:#0f1a28; --text-2:#475262; --text-3:#5e6876;
  --accent:#c2410c; --accent-hover:#a3360a; --accent-bright:#f26b2a; --accent-soft:rgba(194,65,12,.10);
  --ok:#3f6b5a; --ok-soft:rgba(63,107,90,.12); --warn:#8a5a2f; --warn-soft:rgba(138,90,47,.12); --error:#b42318;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display:'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-logo:'Fira Sans', 'Inter', system-ui, sans-serif;
  --radius-sm:6px; --radius:10px; --radius-lg:16px;
  --ease:cubic-bezier(.2,.7,.2,1); --dur:220ms;
  --wrap:1200px; --gutter:clamp(20px, 4vw, 40px);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--text); font-family:var(--font-body); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased;}
img,svg{display:block; max-width:100%;}
a{color:var(--accent); text-decoration:underline; text-underline-offset:2px;}
a:hover{color:var(--accent-hover);}
button,input,select,textarea{font:inherit; color:inherit;}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:600; line-height:1.15; letter-spacing:-.015em; text-wrap:balance;}
p{margin:0;}
:focus-visible{outline:2px solid var(--accent-bright); outline-offset:3px; border-radius:4px;}
[hidden]{display:none !important;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);}
.wrap.schmal{max-width:880px;}

.skip-link{position:absolute; left:-9999px; top:0; z-index:10; background:var(--ink-950); color:#fff; padding:12px 18px; border-radius:0 0 var(--radius-sm) 0; text-decoration:none;}
.skip-link:focus{left:0;}

/* ---------------------------------------------------------------- Kopf */
.seiten-kopf{background:var(--ink-950); color:var(--on-ink); border-bottom:1px solid var(--ink-line);}
.kopf-innen{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px; flex-wrap:wrap;}
.logo{display:inline-flex; flex-direction:column; line-height:1; padding-block:10px; text-decoration:none; color:inherit;}
.logo b{font-family:var(--font-logo); font-size:26px; font-weight:300; letter-spacing:.02em; color:#fff;}
.logo span{margin-top:5px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-ink-2);}
.seiten-kopf nav{display:flex; gap:22px; flex-wrap:wrap; align-items:center; padding-bottom:6px;}
.seiten-kopf nav a{color:var(--on-ink-2); text-decoration:none; font-size:.9375rem; font-weight:500; min-height:44px; display:inline-flex; align-items:center;}
.seiten-kopf nav a:hover,.seiten-kopf nav a[aria-current]{color:#fff;}
.seiten-kopf nav .sprache{border:1px solid var(--ink-line-2); border-radius:999px; padding:0 14px; min-height:36px; font-size:.8125rem; letter-spacing:.04em;}

/* ---------------------------------------------------------------- Hero */
.hero{position:relative; isolation:isolate; overflow:hidden; background:var(--ink-950); color:var(--on-ink); padding:clamp(40px, 7vw, 88px) 0 clamp(96px, 12vw, 150px);}
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 30%, #000 20%, transparent 80%); mask-image:radial-gradient(ellipse 80% 70% at 70% 30%, #000 20%, transparent 80%);}
.eyebrow{display:inline-flex; align-items:center; gap:14px; margin-bottom:22px; font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-2);}
.eyebrow::before{content:""; width:32px; height:1px; background:var(--accent-bright);}
.hero h1{font-size:clamp(2.125rem, 4.6vw, 3.5rem); line-height:1.05; letter-spacing:-.025em; color:#fff; max-width:18ch;}
.hero h1 .accent{color:var(--accent-bright);}
.hero-lead{max-width:60ch; margin-top:22px; font-size:clamp(1rem, 1.3vw, 1.125rem); line-height:1.65; color:var(--on-ink-2);}
.vertrauen{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px;}
.vertrauen li{list-style:none; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--ink-line-2); border-radius:999px; font-size:.8125rem; color:var(--on-ink-2);}
.vertrauen li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent-bright);}
.vertrauen{margin-left:0; padding-left:0;}

/* ------------------------------------------------------------ Assistent */
.assistent{position:relative; margin-top:clamp(-72px, -9vw, -110px); margin-bottom:clamp(56px, 8vw, 96px);}
.karte{background:var(--surface); border-radius:var(--radius-lg); box-shadow:0 30px 70px -40px rgba(10,18,29,.45), 0 1px 2px rgba(15,26,40,.06); border:1px solid var(--line);}
.karte-inhalt{padding:clamp(22px, 4vw, 44px);}

.fortschritt{display:grid; gap:10px; padding:clamp(18px, 3vw, 26px) clamp(22px, 4vw, 44px) 0;}
.fortschritt-zeile{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:.8125rem; color:var(--text-3);}
.fortschritt-zeile b{font-family:var(--font-display); font-weight:600; font-size:.9375rem; color:var(--text); letter-spacing:-.01em;}
.fortschritt-schiene{position:relative; height:4px; border-radius:999px; background:var(--line);}
.fortschritt-balken{position:absolute; inset:0 auto 0 0; width:0; border-radius:999px; background:linear-gradient(90deg, var(--accent), var(--accent-bright)); transition:width .5s var(--ease);}
.fortschritt-punkte{display:flex; justify-content:space-between; margin:0; padding:0; list-style:none;}
.fortschritt-punkte li{flex:1; font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:8px;}
.fortschritt-punkte li[aria-current]{color:var(--accent); font-weight:600;}
.fortschritt-punkte li.erledigt{color:var(--text-2);}

.schritt-kopf{margin-bottom:28px;}
.schritt-kopf h2{font-size:clamp(1.5rem, 2.8vw, 2rem);}
.schritt-kopf p{margin-top:10px; color:var(--text-2); max-width:64ch;}

.block{display:grid; gap:10px; align-content:start; margin-bottom:26px;}
#schritt-titel:focus{outline:none;}
.block > label, .block > .legende{font-size:.9375rem; font-weight:500; color:var(--text);}
.block .optional{font-weight:400; color:var(--text-3);}
.hilfe{font-size:.8125rem; line-height:1.55; color:var(--text-3);}
.block .fehler{font-size:.8125rem; color:var(--error);}
.block .fehler:empty{display:none;}
fieldset{border:0; margin:0; padding:0; min-width:0;}
legend{padding:0;}

.eingabe{display:flex; align-items:stretch; max-width:420px;}
.eingabe input, .eingabe select, input.feld, select.feld{width:100%; min-height:50px; padding:12px 14px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:1.0625rem; line-height:1.4; color:var(--text); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);}
.eingabe input:hover, .eingabe select:hover{border-color:var(--line-strong);}
.eingabe input:focus, .eingabe select:focus, input.feld:focus, select.feld:focus{outline:none; background:#fff; border-color:var(--ink-900); box-shadow:0 0 0 3px rgba(15,26,40,.1);}
.eingabe input[aria-invalid="true"]{border-color:var(--error); background:#fffbfa;}
.eingabe .einheit{display:flex; align-items:center; padding:0 14px; margin-left:-1px; border:1px solid var(--line); border-radius:0 var(--radius-sm) var(--radius-sm) 0; background:#fff; color:var(--text-3); font-size:.9375rem; white-space:nowrap;}
.eingabe input:has(+ .einheit){border-radius:var(--radius-sm) 0 0 var(--radius-sm);}
.eingabe select{-webkit-appearance:none; appearance:none; padding-right:42px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475262' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px;}
.eingabe.kurz{max-width:220px;}
.eingabe.mittel{max-width:260px;}
.eingabe.breit{max-width:520px;}
.zeile{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px 20px;}
.gruppe-titel{font-family:var(--font-display); font-weight:600; font-size:1.0625rem; margin:6px 0 14px;}
.gruppe-titel .optional{font-family:var(--font-body); font-weight:400; font-size:.875rem; color:var(--text-3);}
.hilfe.abstand{margin-top:14px;}
.ergebnis-verfahren{margin:-16px 0 18px; color:var(--text-3); font-size:.8125rem;}
.kein-wert .gruende.neutral{background:var(--paper); border-color:var(--line);}

/* Auswahlkarten (Radio): feste Spaltenzahl je Gruppe (data-spalten), alle
   Karten einer Gruppe gleich hoch, Radio an der ersten Textzeile ausgerichtet. */
.wahl{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:1fr; gap:12px; margin:0; padding:0; list-style:none;}
.wahl[data-spalten="3"]{grid-template-columns:repeat(3, minmax(0, 1fr));}
.wahl[data-spalten="4"]{grid-template-columns:repeat(4, minmax(0, 1fr));}
.wahl li{min-width:0; display:flex;}
.wahl label{flex:1 1 auto; display:grid; grid-template-columns:18px minmax(0, 1fr); column-gap:12px; row-gap:3px; align-items:start; align-content:center; min-height:64px; padding:14px 16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.wahl label:hover{border-color:var(--line-strong); background:#fff;}
.wahl input{grid-row:1 / span 2; width:18px; height:18px; margin:2px 0 0; accent-color:var(--accent);}
.wahl input:focus-visible{outline:none;}
.wahl label:has(input:checked){border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-soft);}
.wahl label:has(input:focus-visible){outline:2px solid var(--accent-bright); outline-offset:2px;}
.wahl .titel{grid-column:2; font-weight:500; line-height:1.3; overflow-wrap:break-word; hyphens:auto;}
.wahl .text{grid-column:2; font-size:.8125rem; line-height:1.45; color:var(--text-3); overflow-wrap:break-word; hyphens:auto;}
@media (max-width:860px){
  .wahl[data-spalten="4"]{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:520px){
  .wahl, .wahl[data-spalten]{grid-template-columns:1fr;}
}

/* Ja/Nein/Weiß nicht */
.dreier{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--paper);}
.dreier label{position:relative; padding:9px 16px; font-size:.875rem; cursor:pointer; color:var(--text-2);}
.dreier label + label{border-left:1px solid var(--line);}
.dreier input{position:absolute; opacity:0; width:0; height:0;}
.dreier label:has(input:checked){background:var(--ink-900); color:#fff;}
.dreier label:has(input:focus-visible){outline:2px solid var(--accent-bright); outline-offset:-2px;}
.frage{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding:14px 0; border-top:1px solid var(--line);}
.frage:last-child{border-bottom:1px solid var(--line);}
.frage span{max-width:48ch;}

/* Aufklappbare Erklärung */
.erklaerung{border:0; margin:0;}
.erklaerung summary{list-style:none; display:inline-flex; align-items:center; gap:8px; min-height:36px; font-size:.8125rem; font-weight:500; color:var(--accent); cursor:pointer;}
.erklaerung summary::-webkit-details-marker{display:none;}
.erklaerung summary::before{content:"?"; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; border:1px solid currentColor; font-size:.6875rem; font-weight:600;}
.erklaerung[open] summary::before{content:"–";}
.erklaerung p{margin-top:6px; padding:12px 16px; font-size:.875rem; line-height:1.6; color:var(--text-2); background:var(--paper); border-left:3px solid var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; max-width:70ch;}

/* Checkbox */
.haken{display:flex; align-items:flex-start; gap:12px; padding:10px 0; cursor:pointer; font-size:.9375rem;}
.haken input{width:18px; height:18px; margin:3px 0 0; accent-color:var(--accent); flex-shrink:0;}

/* Autovervollständigung */
.vorschlaege{position:relative;}
.vorschlaege ul{position:absolute; z-index:5; left:0; right:0; top:calc(100% + 4px); max-height:260px; overflow:auto; margin:0; padding:6px; list-style:none; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 18px 40px -20px rgba(15,26,40,.35);}
.vorschlaege li{padding:10px 12px; border-radius:var(--radius-sm); cursor:pointer; font-size:.9375rem;}
.vorschlaege li:hover, .vorschlaege li[aria-selected="true"]{background:var(--accent-soft); color:var(--accent-hover);}
.vorschlaege li small{display:block; font-size:.75rem; color:var(--text-3);}

/* Adressfund */
.fund{display:grid; gap:18px; padding:22px 24px; margin-top:6px; background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius);}
.fund-kopf{display:flex; align-items:center; gap:10px; font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);}
.fund-brw{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;}
.fund-brw .zahl{font-family:var(--font-display); font-size:clamp(1.75rem, 3.6vw, 2.5rem); font-weight:600; letter-spacing:-.02em;}
.fund-brw .zahl small{font-size:.5em; font-weight:500; color:var(--text-3); margin-left:4px;}
.fund-brw .label{font-size:.875rem; color:var(--text-2);}
.fund-brw .aktuell{font-size:.875rem; color:var(--text-3);}
.fund-raster{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px 20px; padding-top:14px; border-top:1px solid var(--line);}
.fund-raster dt{font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin:0 0 3px;}
.fund-raster dd{margin:0; font-weight:500;}
.fund-quelle{font-size:.75rem; line-height:1.5; color:var(--text-3);}

/* Meldungen */
.meldung{display:grid; gap:6px; padding:14px 18px; border-radius:var(--radius); font-size:.9375rem; line-height:1.55; border:1px solid transparent;}
.meldung.warnung{background:var(--warn-soft); border-color:rgba(138,90,47,.25); color:var(--text);}
.meldung.fehler{background:#fff5f3; border-color:rgba(180,35,24,.3); color:var(--text);}
.meldung.info{background:var(--paper); border-color:var(--line); color:var(--text-2);}
.meldung strong{font-weight:600;}

/* Navigation des Assistenten */
.navigation{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:30px; padding-top:22px; border-top:1px solid var(--line);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 24px; border:1px solid transparent; border-radius:var(--radius-sm); font-size:.96875rem; font-weight:500; line-height:1; white-space:nowrap; cursor:pointer; text-decoration:none; transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-hover); color:#fff;}
.btn-outline{border-color:var(--line-strong); color:var(--text); background:transparent;}
.btn-outline:hover{border-color:var(--text);}
.btn-ghost{border-color:var(--ink-line-2); color:var(--on-ink);}
.btn-ghost:hover{border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.04); color:#fff;}
.btn .pfeil{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur) var(--ease);}
.btn:hover .pfeil{transform:translateX(3px);}
.btn.zurueck .pfeil{transform:scaleX(-1);}
.btn.zurueck:hover .pfeil{transform:scaleX(-1) translateX(3px);}

/* ------------------------------------------------------------- Ergebnis */
.ergebnis-kopf{display:grid; gap:8px; margin-bottom:26px;}
.ergebnis-kopf .verfahren{font-size:.8125rem; color:var(--text-3);}
.ergebnis-kopf h2{font-size:clamp(1.5rem, 2.8vw, 2rem);}
.spanne{padding:clamp(22px, 4vw, 34px); background:var(--ink-950); color:var(--on-ink); border-radius:var(--radius-lg);}
.spanne .label{font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-3);}
.spanne .zahlen{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-top:10px; font-family:var(--font-display); font-weight:600; letter-spacing:-.025em; color:#fff; font-size:clamp(1.75rem, 5vw, 3rem); line-height:1.05;}
.spanne .zahlen .bis{font-size:.55em; font-weight:500; color:var(--on-ink-2);}
.spanne .mitte{margin-top:10px; font-size:.9375rem; color:var(--on-ink-2);}
.spanne .mitte b{color:#fff; font-weight:600;}
.spanne .balken{position:relative; height:6px; margin:22px 0 10px; border-radius:999px; background:rgba(255,255,255,.12);}
.spanne .balken i{position:absolute; top:0; bottom:0; left:20%; right:20%; border-radius:999px; background:linear-gradient(90deg, var(--accent), var(--accent-bright));}
.spanne .balken b{position:absolute; top:50%; left:50%; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--accent-bright); transform:translate(-50%, -50%);}
.spanne .skala{display:flex; justify-content:space-between; font-size:.75rem; color:var(--on-ink-3);}
.spanne .stand{margin-top:16px; font-size:.8125rem; color:var(--on-ink-3);}

.eckdaten{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin:26px 0 0; padding:0; list-style:none;}
.eckdaten li{padding:14px 16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);}
.eckdaten .k{display:block; font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:4px;}
.eckdaten .v{font-weight:500;}
.eckdaten .v small{display:block; font-weight:400; font-size:.75rem; color:var(--text-3); margin-top:2px;}

.abschnitt{margin-top:26px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.abschnitt > summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; padding:0 20px; font-family:var(--font-display); font-weight:600; font-size:1.0625rem; cursor:pointer; background:var(--surface); transition:background-color var(--dur) var(--ease);}
.abschnitt > summary::-webkit-details-marker{display:none;}
.abschnitt > summary:hover{background:var(--paper);}
.abschnitt > summary::after{content:""; width:10px; height:10px; border-right:2px solid var(--text-3); border-bottom:2px solid var(--text-3); transform:rotate(45deg); transition:transform var(--dur) var(--ease); flex-shrink:0; margin-right:4px;}
.abschnitt[open] > summary::after{transform:rotate(-135deg);}
.abschnitt-inhalt{padding:4px 20px 22px; border-top:1px solid var(--line); font-size:.9375rem; color:var(--text-2);}
.abschnitt-inhalt > p{margin:14px 0 0;}
.abschnitt-inhalt ul{margin:14px 0 0; padding-left:1.2em;}
.abschnitt-inhalt li{margin-bottom:6px;}

.tabelle-huelle{overflow-x:auto; margin-top:14px; -webkit-overflow-scrolling:touch;}
table.rechenweg{width:100%; border-collapse:collapse; font-size:.875rem;}
table.rechenweg th, table.rechenweg td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}
table.rechenweg th{font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); font-weight:600; white-space:nowrap;}
table.rechenweg td.nr{color:var(--text-3); width:2.5em;}
table.rechenweg td.wert{font-family:var(--font-display); font-weight:600; white-space:nowrap; text-align:right; color:var(--text);}
table.rechenweg td.formel{color:var(--text-2);}
table.rechenweg td.grundlage{font-size:.75rem; color:var(--text-3); max-width:28ch;}
table.rechenweg tr.summe td{background:var(--paper); font-weight:600; color:var(--text);}
table.rechenweg tr.ergebnis td{background:var(--accent-soft); color:var(--text);}
.bestandteile{margin:12px 0 0; padding:0; list-style:none; font-size:.875rem;}
.bestandteile li{display:flex; justify-content:space-between; gap:16px; padding:6px 0; border-bottom:1px dashed var(--line);}
.bestandteile li b{font-family:var(--font-display); white-space:nowrap;}
.bestandteile li.summe{border-bottom:0; font-weight:600; color:var(--text);}
dl.parameter{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:10px 24px; margin:14px 0 0;}
dl.parameter div{padding:8px 0; border-bottom:1px solid var(--line);}
dl.parameter dt{font-size:.75rem; color:var(--text-3);}
dl.parameter dd{margin:0; font-weight:500; color:var(--text);}

.rechtlich{margin-top:26px; padding:18px 20px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); font-size:.8125rem; line-height:1.6; color:var(--text-2);}
.rechtlich strong{color:var(--text);}

.cta{margin-top:26px; padding:clamp(24px, 4vw, 36px); background:var(--ink-900); color:var(--on-ink); border-radius:var(--radius-lg); display:grid; gap:14px;}
.cta h3{font-size:1.375rem; color:#fff;}
.cta p{color:var(--on-ink-2); max-width:60ch;}
.cta .aktionen{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px;}
.cta .klein{font-size:.8125rem; color:var(--on-ink-3);}

.kein-wert{display:grid; gap:16px;}
.kein-wert .gruende{margin:0; padding:18px 20px 18px 38px; background:var(--warn-soft); border:1px solid rgba(138,90,47,.25); border-radius:var(--radius); color:var(--text);}
.kein-wert .gruende li{margin-bottom:6px;}

/* -------------------------------------------------- Feste Erläuterungen */
.infos{padding:clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 96px); background:var(--surface); border-top:1px solid var(--line);}
.infos h2{font-size:clamp(1.5rem, 2.8vw, 2rem); margin-bottom:22px;}
.infos h3{font-size:1.125rem; margin-bottom:10px;}
.infos p{color:var(--text-2); line-height:1.7;}
.infos strong{color:var(--text); font-weight:600;}
.ablauf{counter-reset:schritt; list-style:none; margin:0 0 44px; padding:0; display:grid; gap:16px;}
.ablauf li{position:relative; padding:18px 22px 18px 66px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); color:var(--text-2); line-height:1.65;}
.ablauf li::before{counter-increment:schritt; content:counter(schritt); position:absolute; left:20px; top:16px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:600; font-size:.9375rem;}
.ablauf li b{color:var(--text); font-weight:600;}
.info-raster{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:28px 40px; margin-bottom:48px;}
.leistung{padding:clamp(26px, 4vw, 40px); margin-bottom:48px; background:var(--ink-950); color:var(--on-ink); border-radius:var(--radius-lg);}
.leistung .eyebrow.dunkel{color:var(--on-ink-2);}
.leistung h2{color:#fff; margin-bottom:16px;}
.leistung p{color:var(--on-ink-2); max-width:70ch;}
.leistung-liste{margin:18px 0 24px; padding:0; list-style:none; display:grid; gap:10px;}
.leistung-liste li{position:relative; padding-left:26px; color:var(--on-ink-2); line-height:1.55;}
.leistung-liste li::before{content:""; position:absolute; left:0; top:.6em; width:14px; height:2px; background:var(--accent-bright);}
.leistung .aktionen{display:flex; flex-wrap:wrap; gap:12px;}
.leistung .btn-outline{border-color:var(--ink-line-2); color:var(--on-ink);}
.leistung .btn-outline:hover{border-color:rgba(255,255,255,.5); color:#fff;}
.faq .abschnitt{margin-top:12px;}
.faq .abschnitt-inhalt p{margin:14px 0 0;}

/* ----------------------------------------------- Leistungsseite (Due Diligence) */
.hero-leistung{padding-bottom:clamp(56px, 8vw, 96px);}
.hero-leistung h1{max-width:22ch;}
.hero-actionen{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px;}
.karten3{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-bottom:48px;}
.karten3 article{padding:22px 24px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);}
.karten3 h3{margin-bottom:8px;}
.karten3 p{font-size:.9375rem;}
.pruefliste{list-style:none; margin:0 0 44px; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:10px 28px;}
.pruefliste li{position:relative; padding:10px 0 10px 32px; border-bottom:1px solid var(--line); color:var(--text-2); line-height:1.55;}
.pruefliste li::before{content:""; position:absolute; left:2px; top:16px; width:14px; height:8px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg);}
.pruefliste li b{color:var(--text); font-weight:600;}
.wrap.leistungsseite{max-width:1040px;}
.pakete{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin:22px 0 48px; align-items:stretch;}
@media (max-width:900px){.pakete{grid-template-columns:1fr;}}
.paket{display:flex; flex-direction:column; gap:12px; padding:26px 24px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);}
.paket.hervorgehoben{background:#fff; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), 0 24px 50px -30px rgba(10,18,29,.35);}
.paket h3{font-size:1.1875rem;}
.paket .preis{margin:4px 0 0; font-family:var(--font-display); font-weight:600; font-size:2rem; letter-spacing:-.02em; color:var(--text); line-height:1.1;}
.paket .preis span{display:block; font-family:var(--font-body); font-weight:500; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:2px;}
.paket .preis small{display:block; font-family:var(--font-body); font-weight:400; font-size:.8125rem; color:var(--text-3); margin-top:4px; letter-spacing:0;}
.paket .preis-zusatz{font-size:.8125rem; color:var(--text-3); margin:-4px 0 6px;}
.paket ul{margin:0; padding:0; list-style:none; display:grid; gap:8px; flex:1;}
.paket li{position:relative; padding-left:22px; font-size:.9375rem; color:var(--text-2); line-height:1.5;}
.paket li::before{content:""; position:absolute; left:0; top:.65em; width:10px; height:2px; background:var(--accent);}
.paket .btn{margin-top:10px; width:100%;}
.leistung .klein{font-size:.8125rem; color:var(--on-ink-3); margin-top:8px;}
.leistung .klein a{color:var(--on-ink-2);}

/* ------------------------------------------------------------------ Fuß */
.seiten-fuss{background:var(--ink-950); color:var(--on-ink-2); padding:48px 0 40px; font-size:.9375rem;}
.seiten-fuss p{margin:0 0 10px;}
.seiten-fuss strong{color:#fff; font-weight:600;}
.seiten-fuss a{color:var(--on-ink-2);}
.seiten-fuss a:hover{color:#fff;}
.seiten-fuss .klein{margin-top:18px; font-size:.8125rem; color:var(--on-ink-3); max-width:80ch;}

/* ------------------------------------------------- Mobiler Schnellkontakt
   Feste Leiste am unteren Rand (Anruf, Anfrage), nur bis 860 px Breite –
   dieselbe Leiste wie auf Startseite und Fachbeiträgen. */
.schnellkontakt{display:none;}
@media (max-width:860px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom));}
  .schnellkontakt{position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); background:rgba(10,18,29,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--ink-line);}
  .schnellkontakt a{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 12px; border:1px solid var(--ink-line-2); border-radius:var(--radius-sm); color:#fff; font-size:.9375rem; font-weight:500; text-decoration:none; white-space:nowrap;}
  .schnellkontakt a.primaer{background:var(--accent); border-color:var(--accent);}
  .schnellkontakt svg{width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
}

/* ----------------------------------------------------------------- Motion */
.einblenden{animation:einblenden .45s var(--ease) both;}
@keyframes einblenden{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* ------------------------------------------------------------ Responsive */
@media (max-width:640px){
  .kopf-innen{min-height:0; padding-block:10px;}
  .seiten-kopf nav{gap:14px;}
  .fortschritt-punkte{display:none;}
  .navigation .btn{flex:1 1 auto;}
  .eingabe{max-width:none;}
}

/* ----------------------------------------------------------------- Druck */
@media print{
  .seiten-kopf,.seiten-fuss,.hero,.navigation,.fortschritt,.cta,.skip-link,.schnellkontakt{display:none !important;}
  body{background:#fff; font-size:10.5pt;}
  .assistent{margin:0;}
  .karte{box-shadow:none; border:0;}
  .spanne{background:#fff; color:#000; border:1px solid #000;}
  .spanne .zahlen, .spanne .mitte b{color:#000;}
  .abschnitt{break-inside:avoid;}
  .abschnitt > summary::after{display:none;}
  details.abschnitt:not([open]) > .abschnitt-inhalt{display:block;}
  a{color:inherit; text-decoration:none;}
}