/* Schriften: selbst gehostet (OFL), keine Anfragen an Google - siehe assets/fonts/LICENSE-*.txt */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/inter-latin-var.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url("/fonts/plus-jakarta-sans-latin-var.woff2") format("woff2")}
/* Ersatzschrift mit passenden Massen, damit beim Nachladen nichts springt */
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107.6%;ascent-override:89.7%;descent-override:22.4%;line-gap-override:0%}
/* =========================================================================
   Rechnercenter — Designsystem "Bundesrot"
   Klar und sachlich, Schwarz-Rot-Gold als Akzent, eigene Farbe je Kategorie,
   helles und dunkles Farbschema ueber Tokens.
   ========================================================================= */
:root{
  --bg:#F6F6F4;
  --card:#ffffff;
  --soft:#F2F2EF;
  --soft2:#E9E9E5;
  --soft3:#EFEFEC;
  --ink:#16161A;
  --ink-2:#45454D;
  --ink-3:#303036;
  --muted:#66666F;
  --teal:#C8102E;        /* Bundesrot (Primaerakzent; Name aus Kompatibilitaet) */
  --teal-dark:#9E0B23;
  --teal-soft:#FDECEE;
  --gold:#FFCE00;        /* Gold der Flagge - nur Flaechen, nie Text */
  --gold-tint:#FFF6CC;
  --gold-ink:#6E5300;
  --de-black:#111111;--de-red:#DD0000;--de-gold:#FFCE00;
  --border:#E3E3DE;
  --border-2:#EBEBE7;
  --page-glow:200,16,46;
  --lightmix:100%;
  --darkmix:100%;
  --r-lg:20px;
  --r-md:16px;
  --r:12px;
  --r-sm:9px;
  --pill:999px;
  --shadow-card:0 1px 2px rgba(22,22,26,.05),0 10px 26px -16px rgba(22,22,26,.14);
  --shadow-pop:0 2px 4px rgba(22,22,26,.05),0 22px 44px -22px rgba(22,22,26,.28);
  --font-body:"Inter","Inter Fallback","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-disp:"Plus Jakarta Sans","Inter","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-num:"Inter","Inter Fallback","Segoe UI",system-ui,-apple-system,sans-serif;
  --maxw:1180px;
  --readw:760px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#111114;--card:#1A1A1F;--soft:#1F1F25;--soft2:#2A2A31;--soft3:#16161A;
  --ink:#F2F2F4;--ink-2:#BEBEC7;--ink-3:#D4D4DC;--muted:#9C9CA8;
  --teal:#FF6B7A;--teal-dark:#FF8E99;--teal-soft:#3A1C21;
  --gold:#FFD84D;--gold-tint:#3A3214;--gold-ink:#FFE27A;
  --border:#2C2C33;--border-2:#26262D;--page-glow:255,107,122;
  --lightmix:8%;--darkmix:22%;
  --shadow-card:0 1px 0 rgba(255,255,255,.03),0 10px 28px -14px rgba(0,0,0,.7);
  --shadow-pop:0 22px 44px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111114;--card:#1A1A1F;--soft:#1F1F25;--soft2:#2A2A31;--soft3:#16161A;
    --ink:#F2F2F4;--ink-2:#BEBEC7;--ink-3:#D4D4DC;--muted:#9C9CA8;
    --teal:#FF6B7A;--teal-dark:#FF8E99;--teal-soft:#3A1C21;
    --gold:#FFD84D;--gold-tint:#3A3214;--gold-ink:#FFE27A;
    --border:#2C2C33;--border-2:#26262D;--page-glow:255,107,122;
    --lightmix:8%;--darkmix:22%;color-scheme:dark;
  }
}

/* Calculator components consume the centrally assigned category variables. */
.calc-theme .calc-card-main::before{background:linear-gradient(90deg,var(--teal) 0 76%,var(--gold) 76% 100%)}
.calc-theme .card:focus-within{border-color:color-mix(in srgb,var(--teal) 48%,transparent);box-shadow:0 24px 48px -28px rgba(var(--page-glow),.5)}
/* Ergebnisflaeche deutlich eingefaerbt: der fruehere Verlauf startete bei
   Weiss und war neben dem weissen Formular kaum zu erkennen. Die Farbe kommt
   weiterhin aus der Kategorievariable, jede Kategorie behaelt also ihren Ton. */
.calc-theme .result{background:linear-gradient(158deg,color-mix(in srgb,var(--teal-soft) 30%,var(--card)) 0%,color-mix(in srgb,var(--teal-soft) 70%,var(--card)) 100%);border-color:color-mix(in srgb,var(--teal) 42%,transparent);box-shadow:0 22px 50px -32px rgba(var(--page-glow),.62)}
.calc-theme .result::before{background:radial-gradient(circle,rgba(var(--page-glow),.09),transparent 70%)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(900px 440px at 92% 2%,rgba(229,185,79,.17),transparent 67%),
    radial-gradient(720px 380px at -8% 28%,rgba(11,117,104,.08),transparent 68%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
::selection{background:color-mix(in srgb,#f0dca6 var(--lightmix),var(--card))}
img{max-width:100%;height:auto}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-disp);font-weight:800;letter-spacing:-.012em;word-spacing:.04em;line-height:1.12;color:var(--ink);margin:0}
p{margin:0 0 1rem}
hr{border:0;border-top:1px solid var(--border);margin:2rem 0}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.reading{max-width:var(--readw)}

/* flag chip */
.flag{display:inline-flex;width:18px;height:12px;border-radius:2px;overflow:hidden;vertical-align:middle}
.flag span{flex:1}
.flag .b{background:#1a1a1a}.flag .r{background:#D7141A}.flag .g{background:#E8C26A}

/* ---------- transitions ---------- */
.tile,.cta,.pill,.pop-item,.sr-item,.related-card,.cat-tile{transition:transform .18s ease,box-shadow .18s ease,background .16s ease,color .16s ease,border-color .16s ease}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(244,240,231,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(211,202,183,.8)}
.site-header .bar{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;flex:none}
.logo:hover{text-decoration:none}
.logo .word{font-family:var(--font-disp);font-weight:800;font-size:22px;letter-spacing:-.025em}
.main-nav{display:flex;gap:28px;margin-left:auto;font-size:15px;font-weight:600;color:var(--ink-3)}
.main-nav a{color:inherit}.main-nav a:hover{color:var(--teal);text-decoration:none}
.nav-cta{background:var(--ink);color:#fff;font-weight:600;font-size:14px;padding:10px 18px;border-radius:var(--pill)}
.nav-cta:hover{text-decoration:none;transform:translateY(-1px)}
.lang-switch{font-weight:700;font-size:13px;color:var(--ink-3);border:1px solid var(--border-strong,color-mix(in srgb,#d1d5db var(--lightmix),var(--card)));border:1px solid var(--border);padding:8px 12px;border-radius:var(--pill);letter-spacing:.03em}
.lang-switch:hover{text-decoration:none;border-color:var(--teal);color:var(--teal)}
.menu-toggle{display:none;margin-left:auto;align-items:center;gap:8px;height:44px;border:none;background:var(--teal);color:#fff;border-radius:var(--r-sm);cursor:pointer;padding:0 16px;font-family:inherit;font-weight:700;font-size:15px}

/* drawer */
.drawer{display:none}
.drawer.open{display:block}
.drawer-overlay{position:fixed;inset:0;z-index:60;background:rgba(33,31,26,.4)}
.drawer-panel{position:fixed;top:0;right:0;bottom:0;z-index:61;height:100vh;height:100dvh;width:min(88vw,360px);min-width:280px;background:var(--bg);box-shadow:-26px 0 64px -30px rgba(31,36,33,.55);display:flex;flex-direction:column}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.drawer-head .x{width:40px;height:40px;border:none;background:var(--soft2);border-radius:var(--r-sm);cursor:pointer;font-size:20px;line-height:1;color:var(--ink)}
.drawer-body{flex:1;overflow:auto;padding:14px}
.drawer-body .lbl{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:8px 8px 8px}
.drawer-body a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 12px;border-radius:var(--r-sm);color:var(--ink);font-weight:600;font-size:15.5px}
.drawer-body a:hover{background:var(--soft2);text-decoration:none}
.drawer-body a .cnt{font-size:12px;font-weight:700;color:var(--teal)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(680px 360px at 78% -10%,rgba(232,194,106,.28) 0%,rgba(232,194,106,0) 60%)}
.hero .wrap{position:relative;max-width:var(--maxw);margin:0 auto;padding:38px 24px 14px}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--gold-ink)}
.hero h1{font-size:clamp(40px,6.4vw,70px);line-height:.98;letter-spacing:-.04em;margin:18px 0 0}
.hero h1 .accent{font-style:italic;font-weight:500;color:var(--teal)}
.hero .lead{font-size:clamp(16px,2vw,19px);line-height:1.55;color:var(--ink-2);margin:20px 0 0;max-width:470px}

/* search */
.searchwrap{position:relative;margin-top:26px;max-width:520px}
.searchbox{display:flex;align-items:center;gap:12px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);padding:7px 7px 7px 18px;box-shadow:0 1px 2px rgba(31,36,33,.04),0 22px 44px -28px rgba(31,36,33,.5)}
.searchbox svg{flex:none}
.searchbox input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:16px;color:var(--ink);padding:12px 0}
.searchbox input::placeholder{color:var(--muted)}
.searchbox .go{background:var(--teal);color:#fff;font-weight:700;font-size:14.5px;padding:12px 20px;border-radius:var(--r-sm);white-space:nowrap;border:none;cursor:pointer;font-family:inherit}
.search-results{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:30;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 24px 50px -24px rgba(31,36,33,.42);padding:8px;max-height:360px;overflow:auto;display:none}
.sr-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;color:inherit}
.sr-item:hover{background:var(--bg);text-decoration:none}
.sr-ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--gold-tint);flex:none;color:var(--gold-ink)}
.sr-ic i{font-size:18px;}
.sr-t{flex:1;min-width:0}
.sr-t b{display:block;font-weight:700;font-size:15px}
.sr-t i.cat-desc{display:block;font-style:normal;font-size:12.5px;color:var(--muted)}
.sr-r{font-size:13px;font-weight:700;color:var(--teal);white-space:nowrap}
.sr-empty{padding:16px 14px;font-size:14px;color:var(--muted)}

.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;max-width:560px;align-items:center}
.pills .pl{font-size:13px;color:var(--ink-2);font-weight:700;margin-right:2px}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--ink);background:var(--card);border:1px solid #d6cdba;padding:8px 14px 8px 10px;border-radius:var(--pill);box-shadow:0 1px 2px rgba(31,36,33,.05);line-height:1}
.pill .pill-e{font-size:15px;line-height:1}
.pill:hover{transform:translateY(-1px);background:var(--teal);color:#fff;border-color:var(--teal);text-decoration:none;box-shadow:0 6px 14px -6px rgba(14,122,111,.5)}

/* featured card */
.feat{position:relative}
.feat .shadow{position:absolute;top:-14px;left:14px;right:-14px;bottom:14px;background:var(--gold);border-radius:var(--r-lg);opacity:.5}
.feat-card{position:relative;background:var(--card);border:1px solid var(--border-2);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-card)}
.feat-card .top{display:flex;align-items:center;justify-content:space-between}
.feat-card .tag{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);background:var(--gold-tint);padding:5px 10px;border-radius:var(--pill)}
.feat-card h3{font-size:23px;margin:16px 0 2px;font-weight:700}
.feat-card .desc{font-size:13.5px;color:var(--muted);margin:0}
.feat-inner{margin-top:18px;background:var(--bg);border-radius:var(--r-sm);padding:16px}
.feat-inner .row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2)}
.feat-inner .row b{color:var(--ink)}
.feat-bar{height:6px;background:var(--border);border-radius:99px;margin:9px 0 14px;overflow:hidden}
.feat-bar span{display:block;height:100%;background:var(--teal)}
.feat-inner .res{display:flex;align-items:baseline;justify-content:space-between}
.feat-inner .res .big{font-family:var(--font-disp);font-weight:800;font-size:26px;color:var(--teal);font-variant-numeric:tabular-nums}
.feat-status{font-size:12px;font-weight:700;color:var(--teal)}
.feat-points{display:grid;gap:9px;margin:18px 0 20px;padding:0;list-style:none}
.feat-points li{position:relative;padding-left:23px;color:var(--ink-2);font-size:.94rem}
.feat-points li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:800}
.feat-card .cta{display:block;text-align:center;margin-top:16px;background:var(--teal);color:#fff;font-weight:700;font-size:15px;padding:13px;border-radius:var(--r-sm)}
.feat-card .cta:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(14,122,111,.55)}

/* ---------- sections ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:58px 24px 10px}
.section-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.section-head h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.03em}
.section-head .meta{font-size:14px;color:var(--muted)}
.section>.sub{color:var(--ink-2);font-size:15px;margin:-14px 0 18px}

/* category tiles */
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:14px}
.cat-tile{text-decoration:none;color:var(--ink);border-radius:var(--r-md);padding:18px 20px;display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border-2)}
.cat-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop);border-color:var(--teal);text-decoration:none}
.cat-ic{flex:none;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:15px;font-size:27px;line-height:1;box-shadow:inset 0 0 0 1px rgba(31,36,33,.05);transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.cat-ph-icon{font-size:26px;}
.cat-tile:hover .cat-ic{transform:scale(1.12) rotate(-5deg)}
.cat-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cat-name{font-family:var(--font-disp);font-weight:700;font-size:1.06rem;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.cat-tile .cnt{font-size:12.5px;color:var(--muted)}
.cat-arrow{flex:none;color:var(--muted);font-size:18px;transition:transform .16s ease,color .16s ease}
.cat-tile:hover .cat-arrow{color:var(--teal);transform:translateX(3px)}

/* popular numbered list / icon list */
.poplist{background:rgba(251,249,243,0.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid color-mix(in srgb,var(--card) 60%,transparent);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-pop)}
.pop-item{display:flex;align-items:center;gap:18px;padding:17px 20px;border-bottom:1px solid rgba(236,230,217,0.5);color:inherit}
.pop-item:last-child{border-bottom:0}
.pop-item:hover{background:color-mix(in srgb,var(--card) 70%,transparent);text-decoration:none}
.pop-ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--gold-tint);color:var(--gold-ink);flex:none;font-size:21px;box-shadow:inset 0 0 0 1px rgba(31,36,33,.05);transition:transform .18s cubic-bezier(.34,1.56,.64,1);}
.pop-item:hover .pop-ic{transform:scale(1.12) rotate(-5deg)}
.pop-t{flex:1;min-width:0}
.pop-t b{display:block;font-weight:700;font-size:16px;letter-spacing:-.01em}
.pop-t i{display:block;font-style:normal;font-size:12.5px;color:var(--muted)}
.pop-range{font-size:13.5px;font-weight:700;color:var(--teal);white-space:nowrap}
.pop-arrow{color:#cdbf9f;font-size:18px}

/* trust strip */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.trust-card{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--border-2);border-radius:var(--r);padding:16px 18px;transition:transform .18s ease,box-shadow .18s ease}
.trust-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.trust-card .ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--gold-tint);flex:none;font-size:21px;line-height:1;box-shadow:inset 0 0 0 1px rgba(31,36,33,.05)}
.trust-card .tt{font-weight:700;font-size:15px;line-height:1.3}
.trust-card .td{font-size:13px;color:var(--ink-3);margin-top:3px;line-height:1.45}

/* CTA band */
.cta-band{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;background:var(--ink);border-radius:var(--r-lg);padding:38px 36px}
.cta-band h2{color:#fff;font-size:clamp(24px,3.2vw,32px);letter-spacing:-.025em}
.cta-band p{color:#b8b3a6;font-size:15.5px;margin:9px 0 0}
.cta-band .btn-gold{display:inline-block;background:var(--gold);color:color-mix(in srgb,#3a2f10 var(--darkmix),var(--ink));font-weight:700;font-size:15px;padding:14px 26px;border-radius:var(--r-sm);white-space:nowrap}
.cta-band .btn-gold:hover{text-decoration:none;transform:translateY(-2px)}

/* ---------- Calculator page ---------- */
.page-head{padding:12px 0 18px}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--teal)}
.page-head h1{font-size:clamp(30px,4.6vw,46px);letter-spacing:-.03em;margin-top:8px}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:100%;margin-top:14px;line-height:1.55}

/* Unified Page Container & Main Card */
.calc-page-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}
.calc-card-main {
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow:0 30px 80px -44px rgba(23,63,57,.55),0 2px 10px rgba(33,31,26,.035);
  padding: 44px;
  margin-top: 32px;
  margin-bottom: 32px;
  position:relative;
  overflow:hidden;
}
.calc-card-main::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,var(--teal) 0 74%,var(--gold) 74% 100%);
}
.calc-card-main .page-head,
.calc-card-main .content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.calc-page-container .related-section {
  max-width: 1000px;
  margin: 44px auto 56px;
}
.calc-page-container .related-section h2 {
  font-size: 1.6rem;
  margin: 0 0 16px;
  letter-spacing: -.02em;
}

.calc-wrap{margin:28px auto;max-width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.calc-wrap>.card,.calc-wrap>.result{grid-column:1;width:100%;min-width:0}
.card{background:linear-gradient(180deg,var(--card) 0%,color-mix(in srgb,#fdfcf8 var(--lightmix),var(--card)) 100%);border:1px solid var(--border-2);border-radius:var(--r-md);padding:28px;box-shadow:0 18px 42px -28px rgba(20,76,67,.38);border-top:4px solid var(--teal);transition:box-shadow .25s ease,border-color .25s ease}
.card:focus-within{border-color:rgba(11,117,104,.42);box-shadow:0 24px 48px -28px rgba(11,117,104,.48)}
/* Ein Feld je Zeile, volle Breite. Zwei Spalten sahen zerrissen aus, sobald
   ein Auswahlfeld ueber beide Spalten lief: daneben blieb eine halbe Zeile
   leer und das Eingabefeld wirkte abgeschnitten. */
.field-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 20px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1 / -1}
.semantic-field-grid>.field-orphan{grid-column:1/-1}
.semantic-field-grid>.field-orphan>select,
.semantic-field-grid>.field-orphan>input,
.semantic-field-grid>.field-orphan>.input-row,
.semantic-field-grid>.field-orphan>.check-row{width:100%}
.field label{font-weight:700;font-size:.95rem;color:var(--ink)}
.field .hint{font-size:.82rem;color:var(--muted);font-weight:400;margin-top:-2px}
.field .input-row{display:flex;align-items:stretch}
.field input,.field select{font:inherit;font-size:1rem;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);width:100%;color:var(--ink);background:var(--card);transition:border-color .2s ease, box-shadow .2s ease}
.field .input-row input{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.field .unit{display:flex;align-items:center;padding:0 15px;border:1.5px solid var(--border);border-left:0;border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--soft);color:var(--muted);font-size:.95rem;white-space:nowrap;transition:border-color .15s ease}
.field input:focus,.field select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14, 122, 111, 0.12)}
.field input:focus+.unit{border-color:var(--teal)}

/* Beschriftung und zulaessiger Bereich in einer Zeile. */
.field .feld-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.field .feld-kopf label{margin:0}
.field .feld-bereich{flex:none;font-size:.74rem;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.01em}

/* Schieberegler unter dem Zahlenfeld. Bewusst flach - die Formulare sind
   ohnehin lang genug, der Regler darf sie nicht weiter strecken. */
.field .feld-regler{-webkit-appearance:none;appearance:none;display:block;width:100%;
  height:4px;margin:9px 0 1px;padding:0;border:0;border-radius:999px;cursor:pointer;
  /* Gefuellter Teil bis zum Griff, Rest neutral. --regler-fuell setzt calc.js. */
  background:linear-gradient(to right,
    var(--teal) 0 var(--regler-fuell,0%),
    var(--border) var(--regler-fuell,0%) 100%)}
.field .feld-regler:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.field .feld-regler::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:17px;height:17px;border-radius:50%;background:var(--teal);border:2.5px solid var(--card);
  box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:grab;margin-top:-6.5px}
.field .feld-regler::-webkit-slider-thumb:active{cursor:grabbing}
.field .feld-regler::-moz-range-thumb{width:17px;height:17px;border-radius:50%;
  background:var(--teal);border:2.5px solid var(--card);box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:grab}
.field .feld-regler::-moz-range-track{height:4px;border-radius:999px;background:var(--border)}

/* Plus/Minus fuer kleine Anzahlen. */
.field .input-row--stepper .stepper-btn{flex:none;width:46px;font:inherit;font-size:1.25rem;
  font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--border);background:var(--soft);color:var(--ink-2);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.field .input-row--stepper .stepper-btn:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm);border-right:0}
.field .input-row--stepper .stepper-btn:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0;border-left:0}
.field .input-row--stepper .stepper-btn:hover{background:var(--teal-soft);color:var(--teal-dark);
  border-color:color-mix(in srgb,var(--teal) 40%,var(--border))}
.field .input-row--stepper .stepper-btn:active{background:var(--teal);color:#fff}
/* Zwischen den Schaltflaechen laeuft das Feld ohne eigene Rundung durch. */
.field .input-row--stepper input{border-radius:0;text-align:center;font-weight:700}
.field .input-row--stepper .unit{border-left:0}

/* Umschalter Monat/Jahr statt fester Einheit im Euro-Feld. */
/* flex:none ist wichtig: das Eingabefeld waechst (flex:1 1 auto) und wuerde
   den Umschalter sonst zusammendruecken, bis overflow:hidden die zweite
   Schaltflaeche abschneidet. */
.field .unit-zeitraum{align-items:stretch;padding:0;overflow:hidden;flex:none}
.field .unit-zeitraum .uz-btn{font:inherit;font-size:.82rem;font-weight:700;line-height:1;
  display:flex;align-items:center;padding:0 11px;border:0;background:transparent;
  color:var(--muted);cursor:pointer;white-space:nowrap;
  transition:background .15s ease,color .15s ease}
.field .unit-zeitraum .uz-btn+.uz-btn{border-left:1px solid var(--border)}
.field .unit-zeitraum .uz-btn:hover{color:var(--ink-2)}
.field .unit-zeitraum .uz-btn.is-on{background:var(--teal);color:#fff}
.field .unit-zeitraum .uz-btn:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}

/* Auf schmalen Displays unter das Feld, damit die Eingabe breit bleibt. */
@media (max-width:560px){
  .field .input-row--zeitraum{flex-wrap:wrap}
  .field .input-row--zeitraum input{flex:1 1 100%;border-radius:var(--r-sm)}
  .field .input-row--zeitraum .unit-zeitraum{flex:1 1 100%;margin-top:8px;
    border-left:1.5px solid var(--border);border-radius:var(--r-sm)}
  .field .input-row--zeitraum .uz-btn{flex:1 1 50%;justify-content:center;
    padding:11px 8px;font-size:.88rem}
}
.checkbox-field{justify-content:flex-end}
.field .check-row{display:flex;align-items:center;gap:11px;min-height:50px;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--card);cursor:pointer}
.field .check-row:hover{border-color:#c9bfa8}
.field .check-row:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,122,111,.12)}
.field .check-row input[type=checkbox]{width:22px;height:22px;min-width:22px;margin:0;padding:0;accent-color:var(--teal);box-shadow:none}
.field .check-row span{font-weight:700;color:var(--ink);line-height:1.35}
.form-note{margin:11px 0 0;color:var(--muted);font-size:.82rem;line-height:1.45;text-align:center}

/* Zeit-Rechner: Beziehungen sichtbar machen statt fünf Felder im Zickzack. */
.time-field-grid{grid-template-columns:minmax(0,1fr);gap:16px;align-items:stretch}
.time-input-step{min-width:0;padding:18px;border:1px solid color-mix(in srgb,var(--teal) 22%,var(--border));border-radius:18px;background:linear-gradient(145deg,var(--card) 0%,color-mix(in srgb,var(--teal-soft) 24%,var(--card)) 100%)}
.time-duration-first{background:linear-gradient(145deg,var(--card) 0%,color-mix(in srgb,var(--teal-soft) 34%,var(--card)) 100%);border-color:color-mix(in srgb,var(--teal) 24%,var(--border))}.time-duration-second{background:linear-gradient(145deg,var(--card) 0%,color-mix(in srgb,var(--teal-soft) 48%,var(--card)) 100%);border-color:color-mix(in srgb,var(--teal) 30%,var(--border))}
.time-input-step-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:15px}.time-input-step-head>span{display:grid;place-items:center;width:28px;height:28px;min-width:28px;border-radius:9px;background:var(--teal);color:#fff;font:850 .8rem/1 var(--font-disp)}
.time-duration-first .time-input-step-head>span,.time-duration-second .time-input-step-head>span{background:var(--teal)}
.time-input-step h2{margin:0;font:850 1rem/1.25 var(--font-disp);color:var(--ink)}.time-input-step p{margin:3px 0 0;font-size:.78rem;line-height:1.4;color:var(--ink-2)}
.time-duration-step .time-step-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.time-duration-step .field{min-width:0}.time-duration-step .field label{font-size:.82rem;color:var(--ink-2)}.time-duration-step .field .unit{padding-inline:10px;background:var(--card);font-size:.83rem}
.time-operation-step{padding-block:16px;background:var(--card)}.time-operation-step .time-input-step-head{margin-bottom:12px}.time-operation-native{display:none!important}
.time-operation-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.time-operation-choices button{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:12px 14px;border:1.5px solid color-mix(in srgb,var(--teal) 26%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--teal-soft) 28%,var(--card));color:var(--ink);cursor:pointer;box-shadow:none}
.time-operation-choices button>span{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--teal-soft);color:var(--teal-dark);font:900 1.45rem/1 var(--font-disp)}.time-operation-choices button strong{font-size:.9rem}.time-operation-choices button small{font-size:.72rem;color:var(--ink-2)}
.time-operation-choices button:hover{border-color:var(--teal);background:color-mix(in srgb,var(--teal-soft) 48%,var(--card));transform:translateY(-1px)}.time-operation-choices button:focus-visible{outline:3px solid rgba(var(--page-glow),.2);outline-offset:2px}.time-operation-choices button.is-selected{border-color:var(--teal);background:color-mix(in srgb,var(--teal-soft) 68%,var(--card));box-shadow:0 8px 22px -17px rgba(var(--page-glow),.7)}.time-operation-choices button.is-selected>span{background:var(--teal);color:#fff}
.time-calculator-form{border-top-color:var(--teal)}.time-calculator-form:focus-within{border-color:color-mix(in srgb,var(--teal) 38%,var(--border));box-shadow:0 24px 48px -30px rgba(var(--page-glow),.35)}
@media(max-width:700px){.time-input-step{padding:15px}.time-operation-choices{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.time-operation-choices{grid-template-columns:1fr}.time-duration-step .time-step-body{gap:9px}.time-duration-step .field input{padding-inline:10px}.time-input-step-head p{font-size:.74rem}}
.method-card{margin:26px 0 8px;padding:22px;background:var(--card);border:1px solid var(--border-2);border-radius:var(--r-md)}
.method-card h2{font-size:1.25rem;margin:0 0 15px}
.method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.method-grid>div{padding:13px 14px;background:var(--soft);border:1px solid var(--border);border-radius:10px;display:grid;gap:3px}
.method-grid span{font-size:.76rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.045em}
.method-grid strong,.method-grid a{font-size:.92rem;color:var(--ink);line-height:1.35}
.method-grid a{font-weight:700;text-decoration-color:var(--gold)}
.method-source-links{display:grid;gap:7px}.method-source-links a{display:grid;grid-template-columns:1fr auto;align-items:start;gap:7px}.method-source-links small{font-size:.67rem;font-weight:750;color:var(--muted);text-transform:none;letter-spacing:0}
.scope-card{margin:30px 0 12px;padding:24px;background:linear-gradient(145deg,color-mix(in srgb,#f5fbf8 var(--lightmix),var(--card)) 0%,color-mix(in srgb,#fffdf7 var(--lightmix),var(--card)) 100%);border:1px solid rgba(11,117,104,.2);border-radius:var(--r-md);box-shadow:0 18px 38px -34px rgba(11,117,104,.6)}
.scope-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:16px}
.scope-head h2{font-size:1.3rem;margin:0;letter-spacing:-.015em}
.scope-kicker{order:2;font-size:.7rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:var(--teal);padding:6px 9px;border:1px solid rgba(11,117,104,.18);border-radius:999px;background:var(--card);white-space:nowrap}
.scope-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.scope-grid>div{position:relative;padding:14px 15px 14px 42px;background:color-mix(in srgb,var(--card) 84%,transparent);border:1px solid var(--border-2);border-radius:11px;min-width:0}
.scope-grid>div::before{content:"✓";position:absolute;left:14px;top:15px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--teal);color:#fff;font-size:.68rem;font-weight:900}
.scope-grid>div:last-child::before{content:"–";background:var(--gold);color:#5d470c}
.scope-grid span{display:block;margin-bottom:4px;font-size:.7rem;font-weight:850;text-transform:uppercase;letter-spacing:.055em;color:var(--muted)}
.scope-grid p{margin:0;font-size:.9rem;line-height:1.48;color:var(--ink-2)}
.category-intro{margin:18px 0 8px;color:var(--ink-2)}

/* result card & visualizations */
/* Die Ergebnisflaeche ist die einzige deutlich eingefaerbte Flaeche der
   Seite. Der fruehere Verlauf war so hell, dass er neben dem weissen
   Formular verschwand - das Ergebnis soll aber sofort als Ergebnis
   erkennbar sein. */
.result {
  background:linear-gradient(158deg,color-mix(in srgb,#f0f9f5 var(--lightmix),var(--card)) 0%,color-mix(in srgb,#e3f3ec var(--lightmix),var(--card)) 100%);
  border:1px solid rgba(11,117,104,.34);
  border-radius: var(--r-md);
  padding: 28px 32px 32px;
  box-shadow:0 22px 50px -32px rgba(11,117,104,.62);
  border-top: 4px solid var(--teal);
  position: relative;
  overflow: hidden;
}

/* Bestaetigungszeile: gruener Haken plus "Berechnet". */
.result-status{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;
  padding:5px 12px 5px 7px;border-radius:999px;background:rgba(11,117,104,.11);
  color:var(--teal-dark);font-size:.74rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.07em}
.result-tick{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;background:var(--teal);color:#fff;flex:none}
.result[hidden]{display:none!important}
.result::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(14, 122, 111, 0.05) 0%, rgba(14, 122, 111, 0) 70%);
  pointer-events: none;
}
.result .label{font-size:.8rem;color:var(--teal);font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.result .value{font-family:var(--font-disp);font-size:clamp(2.25rem,7vw,3.2rem);font-weight:800;color:var(--teal);letter-spacing:-.04em;line-height:1.02;font-variant-numeric:tabular-nums;text-wrap:balance}
.result .note{margin:14px 0 0;color:var(--ink-2);font-size:.92rem;line-height:1.5}

.result .breakdown {
  margin-top: 24px;
  border-top: 1px dashed var(--border-2);
  padding-top: 20px;
  display: grid;
  gap: 8px;
}
.result .breakdown div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .95rem;
  color: var(--ink-2);
  background: rgba(243, 239, 230, 0.25);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(227, 221, 207, 0.3);
}
.result .breakdown div span:last-child {
  font-weight: 700;
  color: var(--teal-dark);
}

@keyframes rp-reveal{0%{opacity:0;transform:translateY(16px) scale(.985);filter:blur(3px)}100%{opacity:1;transform:none;filter:none}}
.result.reveal{animation:rp-reveal .52s cubic-bezier(.16,1,.3,1) both}
@media(prefers-reduced-motion:reduce){.result.reveal{animation:none}}

/* visual rendering styles */
.calc-visual-container{margin:20px 0 10px;border-top:1px dashed var(--border);padding-top:18px;min-height:100px;display:flex;justify-content:center;align-items:center;flex-direction:column}

/* Explanatory calculator visuals: small SVG stories driven by the current
   calculator family. Motion is decorative; the adjacent result stays the
   authoritative numeric output. */
.tech-visual-card{width:100%;max-width:390px;border:1px solid var(--border-2);border-radius:18px;padding:10px 12px 12px;background:linear-gradient(145deg,var(--card) 0%,color-mix(in srgb,#f5faf8 var(--lightmix),var(--card)) 100%);box-shadow:0 14px 30px -25px rgba(14,122,111,.45);overflow:hidden}
.tech-svg{display:block;width:100%;height:auto;max-height:220px;overflow:visible}
.tech-visual-caption{text-align:center;color:var(--ink-2);font-size:.74rem;font-weight:750;line-height:1.35;margin-top:2px}
.tech-small-label{fill:var(--muted);font:800 10px/1 var(--font);letter-spacing:.08em}
.tech-main-label{fill:var(--ink);font:800 13px/1 var(--font-disp)}
.tech-axis,.tech-measure-line{fill:none;stroke:#a8b5b0;stroke-width:2;stroke-dasharray:5 5}

/* Converter */
.tech-panel{stroke-width:1.5}.tech-panel-a{fill:#e6f5f2;stroke:#8dc9bf}.tech-panel-b{fill:#fff5dc;stroke:#e0bd64}
.tech-flow-line{fill:none;stroke:#C18A24;stroke-width:3;stroke-linecap:round;stroke-dasharray:8 7;animation:tech-dash 1.2s linear infinite}
.tech-flow-line-back{stroke:var(--teal);animation-direction:reverse}
.tech-flow-dot{fill:#C18A24;filter:drop-shadow(0 2px 4px rgba(193,138,36,.35));animation:tech-unit-dot 1.2s ease-in-out infinite}
@keyframes tech-dash{to{stroke-dashoffset:-30}}
@keyframes tech-unit-dot{0%,100%{transform:translateX(0);opacity:.3}50%{transform:translateX(54px);opacity:1}}

/* Mechanics */
.tech-support{fill:#eff4f2;stroke:#536b64;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.tech-beam{fill:none;stroke:var(--teal);stroke-width:13;stroke-linecap:round;filter:drop-shadow(0 7px 7px rgba(14,122,111,.18))}
.tech-beam-bend{animation:tech-beam-breathe 2.3s ease-in-out infinite;transform-origin:160px 110px}
.tech-load-arrow,.tech-force-arrow-left,.tech-force-arrow-right{fill:none;stroke:#C18A24;stroke-width:4;stroke-linecap:round}
.tech-load-arrow{animation:tech-load-bob 1.5s ease-in-out infinite}
.tech-column{fill:none;stroke:var(--teal);stroke-width:13;stroke-linecap:round}
.tech-column-buckle{animation:tech-column-sway 2.5s ease-in-out infinite;transform-origin:160px 96px}
.tech-shaft{fill:#d9eeea;stroke:var(--teal);stroke-width:2}.tech-shaft-end{fill:#fff;stroke:var(--teal);stroke-width:3}
.tech-shaft-spin{animation:tech-shaft-pulse 1.5s ease-in-out infinite;transform-origin:260px 95px}
.tech-torque-arrow{fill:none;stroke:#C18A24;stroke-width:4;stroke-linecap:round}
.tech-twist-lines{fill:none;stroke:#72aaa0;stroke-width:2;stroke-dasharray:5 4;animation:tech-dash 1.4s linear infinite}
.tech-specimen{fill:#d9eeea;stroke:var(--teal);stroke-width:2;animation:tech-stretch 2.2s ease-in-out infinite;transform-origin:160px 90px}
.tech-strain-zone{stroke:#79ada5;stroke-width:2;stroke-dasharray:4 4}
@keyframes tech-beam-breathe{0%,100%{transform:scaleY(.93)}50%{transform:scaleY(1.08)}}
@keyframes tech-load-bob{0%,100%{transform:translateY(-4px)}50%{transform:translateY(5px)}}
@keyframes tech-column-sway{0%,100%{transform:skewX(-1deg)}50%{transform:skewX(3deg)}}
@keyframes tech-shaft-pulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.72)}}
@keyframes tech-stretch{0%,100%{transform:scaleX(.97)}50%{transform:scaleX(1.035)}}

/* Fluid and heat */
.tech-pipe{fill:#d9eeea;stroke:#5b9d92;stroke-width:3}.tech-pipe-highlight{fill:none;stroke:#fff;stroke-opacity:.75;stroke-width:2}
.tech-fluid-dot{fill:#3f9eb9;opacity:.7;animation:tech-fluid-move var(--flow-speed,1.6s) linear infinite;animation-delay:var(--dot-delay,0s)}
.tech-gauge{fill:#fff;stroke:var(--teal);stroke-width:3}.tech-gauge-needle{stroke:#C18A24;stroke-width:4;stroke-linecap:round;animation:tech-needle 2.4s ease-in-out infinite;transform-origin:235px 48px}
.tech-heat-wave{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-dasharray:16 9;animation:tech-heat-flow 1.7s linear infinite}
.tech-hot-orb{fill:#e55c45;animation:tech-hot-pulse 1.8s ease-in-out infinite}.tech-hot-ray{fill:none;stroke:#e55c45;stroke-width:3;stroke-linecap:round}.tech-cold-mark{fill:none;stroke:#397ec1;stroke-width:3;stroke-linecap:round}
@keyframes tech-fluid-move{0%{transform:translateX(-28px);opacity:0}20%,80%{opacity:.9}100%{transform:translateX(34px);opacity:0}}
@keyframes tech-needle{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes tech-heat-flow{to{stroke-dashoffset:-50}}
@keyframes tech-hot-pulse{0%,100%{transform:scale(.92);transform-origin:62px 42px}50%{transform:scale(1.12);transform-origin:62px 42px}}

/* Drives, spring and welding */
.tech-spring{fill:none;stroke:var(--teal);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;animation:tech-spring-move 1.8s ease-in-out infinite;transform-origin:52px 95px}
.tech-spring-mass{fill:#fff0c8;stroke:#C18A24;stroke-width:3}
.tech-bolt-circle{fill:#f5faf8;stroke:var(--teal);stroke-width:3;stroke-dasharray:5 5;animation:tech-spin 10s linear infinite;transform-origin:160px 92px}
.tech-bolt-hole{fill:#fff;stroke:#C18A24;stroke-width:3;animation:tech-hole-pop 1.8s ease-in-out infinite;animation-delay:var(--hole-delay,0s);transform-box:fill-box;transform-origin:center}
.tech-weld-plate{stroke:#536b64;stroke-width:13;stroke-linecap:round}.tech-weld-torch{fill:#7b8f89;stroke:#455c55;stroke-width:2}.tech-weld-arc{fill:none;stroke:#4ca9df;stroke-width:5;filter:drop-shadow(0 0 7px #63c9ff);animation:tech-arc 1s ease-in-out infinite}
.tech-spark{fill:#efad32;animation:tech-spark .9s ease-out infinite}.tech-spark.s2{animation-delay:-.3s}.tech-spark.s3{animation-delay:-.6s}
.tech-gear{fill:#e6f5f2;stroke:var(--teal);stroke-width:8;stroke-dasharray:8 5}.tech-gear-a{animation:tech-spin 7s linear infinite;transform-origin:112px 96px}.tech-gear-b{animation:tech-spin-reverse 5s linear infinite;transform-origin:217px 96px}.tech-gear-hub{fill:#C18A24}.tech-gear-spokes{stroke:#7b9d96;stroke-width:4;stroke-linecap:round}
@keyframes tech-spring-move{0%,100%{transform:scaleX(.92)}50%{transform:scaleX(1.04)}}
@keyframes tech-spin{to{transform:rotate(360deg)}}@keyframes tech-spin-reverse{to{transform:rotate(-360deg)}}
@keyframes tech-hole-pop{0%,100%{transform:scale(.82)}50%{transform:scale(1.12)}}
@keyframes tech-arc{0%,100%{opacity:.65;stroke-width:4}50%{opacity:1;stroke-width:7}}
@keyframes tech-spark{0%{transform:translate(0,0);opacity:1}100%{transform:translate(16px,-24px);opacity:0}}

/* Electrical, wave and chemistry */
.tech-circuit-wire{fill:none;stroke:var(--teal);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.tech-battery{fill:#fff6de;stroke:#C18A24;stroke-width:3}.tech-battery-lines{stroke:#C18A24;stroke-width:3}.tech-resistor{fill:none;stroke:#C18A24;stroke-width:4;stroke-linejoin:round}
.tech-charge{fill:#5AA9E6;filter:drop-shadow(0 0 5px rgba(90,169,230,.7));animation:tech-charge-pulse 1.4s ease-in-out infinite}.tech-charge.c2{animation-delay:-.35s}.tech-charge.c3{animation-delay:-.7s}.tech-charge.c4{animation-delay:-1.05s}
.tech-wave-line{fill:none;stroke:var(--teal);stroke-width:5;stroke-linecap:round;stroke-dasharray:18 7;animation:tech-wave 1.5s linear infinite}.tech-wave-measure{fill:none;stroke:#C18A24;stroke-width:2;stroke-linecap:round}
.tech-ph-pointer{stroke:#211f1a;stroke-width:3}.tech-ph-dot{fill:#fff;stroke:#211f1a;stroke-width:3;animation:tech-ph-bob 1.7s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.tech-flask{fill:#fff;stroke:#536b64;stroke-width:3;stroke-linejoin:round}.tech-liquid-stock{fill:var(--teal);opacity:.72}.tech-liquid-target{fill:#73b9ad;opacity:.55}.tech-pour-line{fill:none;stroke:var(--teal);stroke-width:4;stroke-dasharray:7 5;animation:tech-dash 1s linear infinite}.tech-drop{fill:var(--teal);animation:tech-drop 1.35s ease-in infinite}
@keyframes tech-charge-pulse{0%,100%{opacity:.25;transform:scale(.75);transform-origin:center}50%{opacity:1;transform:scale(1.25);transform-origin:center}}
@keyframes tech-wave{to{stroke-dashoffset:-50}}
@keyframes tech-ph-bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@keyframes tech-drop{0%{transform:translate(-18px,-8px);opacity:0}45%{opacity:1}100%{transform:translate(36px,18px);opacity:0}}

/* Selected everyday calculator stories */
.story-bar{transform-box:fill-box;transform-origin:center bottom;animation:story-bar-rise .7s cubic-bezier(.16,1,.3,1) both}.story-bar-main{fill:var(--teal)}.story-bar-gold{fill:#E8C26A;animation-delay:.1s}.story-bar-soft{fill:#bcd6c6;animation-delay:.2s}.story-growth-line{fill:none;stroke:#C18A24;stroke-width:3;stroke-dasharray:7 5;animation:tech-dash 1.3s linear infinite}
.story-calendar{fill:#fff;stroke:var(--teal);stroke-width:2}.story-calendar-head{stroke:#E8C26A;stroke-width:9}.story-ring{fill:var(--teal)}.story-time-line{stroke:#C18A24;stroke-width:4;stroke-dasharray:8 6;animation:tech-dash 1.2s linear infinite}
.story-sun{fill:#E8C26A;animation:tech-hot-pulse 2s ease-in-out infinite;transform-origin:52px 58px}.story-sun-ray{stroke:#C18A24;stroke-width:3;stroke-linecap:round}.story-roof,.story-house{fill:none;stroke:#536b64;stroke-width:5;stroke-linejoin:round}.story-panel{fill:#d9eeea;stroke:var(--teal);stroke-width:3}.story-panel-grid{stroke:var(--teal);stroke-width:1.5}.story-energy-flow{fill:none;stroke:#C18A24;stroke-width:4;stroke-dasharray:8 6;animation:tech-dash 1.1s linear infinite}.story-bolt{fill:#E8C26A;animation:tech-charge-pulse 1.3s ease-in-out infinite;transform-origin:center}
.story-road{stroke:#536b64;stroke-width:14;stroke-linecap:round}.story-road-dash{stroke:#fff;stroke-width:3;stroke-dasharray:12 11;animation:story-road 1s linear infinite}.story-wheel{fill:#2d3432;stroke:#171b19;stroke-width:4}.story-rim{fill:#f3efe6;stroke:#8b9692;stroke-width:4}.story-hub{fill:#C18A24}.story-spokes{stroke:#536b64;stroke-width:4;stroke-linecap:round;animation:tech-spin 3.5s linear infinite;transform-origin:160px 104px}.story-speed-line{stroke:var(--teal);stroke-width:4;stroke-linecap:round;animation:story-speed 1s ease-in-out infinite}.story-speed-line.l2{animation-delay:-.25s}.story-speed-line.l3{animation-delay:-.5s}
@keyframes story-bar-rise{from{transform:scaleY(.08);opacity:.2}to{transform:scaleY(1);opacity:1}}
@keyframes story-road{to{stroke-dashoffset:-46}}
@keyframes story-speed{0%,100%{transform:translateX(0);opacity:.25}50%{transform:translateX(14px);opacity:1}}

/* Result-driven niche scenes. Every moving position or size is derived from
   the submitted values; text beside the SVG remains the authoritative result. */
.niche-svg{overflow:visible}.niche-track{fill:none;stroke:#dfe7e4;stroke-width:12;stroke-linecap:round}.niche-progress{fill:none;stroke:var(--teal);stroke-width:7;stroke-linecap:round;stroke-dasharray:700;stroke-dashoffset:700;animation:precision-line-draw .85s ease forwards}.niche-family-marker{transform:translateX(var(--marker-x));animation:niche-marker-in .72s cubic-bezier(.2,.85,.2,1) both}.niche-family-marker circle{fill:var(--teal);stroke:#fff;stroke-width:4}.niche-family-marker path{fill:none;stroke:var(--teal-dark);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.niche-heart{fill:#d96887;transform-origin:76px 63px;animation:niche-heart 1.35s ease-in-out infinite}.niche-bar{transform-box:fill-box;transform-origin:center bottom;animation:story-bar-rise .65s var(--bar-delay,0s) cubic-bezier(.16,1,.3,1) both}.niche-bar-1{fill:var(--teal)}.niche-bar-2{fill:#d39a42}.niche-bar-3{fill:var(--teal-dark)}.niche-flow{fill:none;stroke:#d39a42;stroke-width:3;stroke-linecap:round;stroke-dasharray:7 6;animation:tech-dash 1.2s linear infinite}.niche-block{fill:var(--teal-soft);stroke:var(--teal);stroke-width:2;transform-box:fill-box;transform-origin:center bottom;animation:niche-block-in .45s var(--block-delay) ease both}.niche-measure{fill:none;stroke:#d39a42;stroke-width:3;stroke-linecap:round}.niche-dial{fill:none;stroke:var(--teal-soft);stroke-width:18;stroke-linecap:round}.niche-needle{fill:none;stroke:var(--teal);stroke-width:6;stroke-linecap:round;transform-origin:160px 145px;transform:rotate(var(--needle-angle));animation:niche-needle .8s cubic-bezier(.2,.9,.2,1) both}.niche-hub{fill:var(--teal-dark);stroke:#fff;stroke-width:4}.niche-battery{fill:#fff;stroke:var(--teal-dark);stroke-width:5}.niche-battery-cap{fill:var(--teal-dark)}.niche-energy-fill{fill:var(--teal);transform-box:fill-box;transform-origin:left center;animation:rank2-grow .8s ease both}.niche-node{fill:#fff;stroke:var(--teal);stroke-width:5}.niche-node-end{fill:var(--teal)}.niche-clock{transform-origin:160px 73px;animation:niche-clock-in .7s ease both}.niche-clock circle{fill:#fff;stroke:var(--teal);stroke-width:5}.niche-clock path{fill:none;stroke:var(--teal-dark);stroke-width:4;stroke-linecap:round}.niche-pulse{fill:none;stroke:var(--teal);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:700;stroke-dashoffset:700;animation:precision-line-draw 1s ease forwards}.niche-track-fill{fill:var(--teal-soft)}.niche-health-dot{fill:var(--teal);stroke:#fff;stroke-width:4;animation:niche-dot-in .6s .2s ease both}.niche-balance{fill:none;stroke:var(--teal-dark);stroke-width:5;stroke-linecap:round}.niche-orbit{fill:none;stroke:var(--teal-soft);stroke-width:8;stroke-dasharray:8 7}.niche-orbit-dot{fill:var(--teal);transform-origin:160px 94px;animation:niche-orbit 3s linear infinite}
@keyframes niche-marker-in{from{transform:translateX(0);opacity:.2}to{transform:translateX(var(--marker-x));opacity:1}}@keyframes niche-heart{50%{transform:scale(1.12)}}@keyframes niche-block-in{from{transform:scaleY(.1);opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes niche-needle{from{transform:rotate(-118deg)}to{transform:rotate(var(--needle-angle))}}@keyframes niche-clock-in{from{transform:rotate(-35deg) scale(.8);opacity:.2}to{transform:none;opacity:1}}@keyframes niche-dot-in{from{transform:scale(.25);opacity:0}to{transform:scale(1);opacity:1}}@keyframes niche-orbit{to{transform:rotate(360deg)}}

/* Truthful fallback scenes: two submitted fields flow into the exact result.
   Category motifs differ, but unlike units never share a quantitative scale. */
.niche-flow-svg{max-height:230px}.niche-input-card rect{fill:#fff;stroke:color-mix(in srgb,var(--teal) 30%,#dfe7e4);stroke-width:1.6;filter:drop-shadow(0 7px 10px rgba(25,54,47,.06));animation:niche-card-enter .5s cubic-bezier(.16,1,.3,1) both}.niche-input-card--two rect{animation-delay:.08s}.niche-card-value{fill:var(--ink);font:800 11px/1 var(--font);font-variant-numeric:tabular-nums}.niche-flow-path{fill:none;stroke:var(--teal);stroke-width:2.8;stroke-linecap:round;stroke-dasharray:90;stroke-dashoffset:90;animation:niche-path-enter .62s .15s ease forwards}.niche-flow-path--out{stroke:#d39a42;animation-delay:.42s}.niche-flow-tip{fill:#d39a42;opacity:0;animation:niche-tip-enter .3s .72s ease forwards}.niche-calc-node>circle{fill:color-mix(in srgb,var(--teal-soft) 52%,var(--card));stroke:var(--teal);stroke-width:2.5;transform-origin:160px 95px;animation:niche-node-enter .55s .24s cubic-bezier(.16,1,.3,1) both}.niche-output-card rect{fill:color-mix(in srgb,var(--teal-soft) 60%,var(--card));stroke:var(--teal);stroke-width:2;animation:niche-output-enter .55s .58s cubic-bezier(.16,1,.3,1) both}.niche-output-value{fill:var(--teal-dark);font:850 12px/1 var(--font-disp);font-variant-numeric:tabular-nums}.niche-output-note{fill:var(--muted);font:750 8px/1 var(--font);letter-spacing:.08em;text-transform:uppercase}.niche-flow-foot{fill:var(--muted);font:800 8px/1 var(--font);letter-spacing:.075em}.niche-motif-stroke,.niche-motif-ticks{fill:none;stroke:var(--teal-dark);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.niche-motif-ticks{stroke:#d39a42;stroke-width:1.8}.niche-motif-ring,.niche-motif-paper{fill:#fff;stroke:var(--teal-dark);stroke-width:2}.niche-motif-core,.niche-motif-fill{fill:var(--teal)}.niche-motif-copy{fill:#fff;font:900 9px/1 var(--font)}.niche-motif-pulse{fill:none;stroke:#c95663;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:90;animation:niche-path-enter .75s .42s ease forwards}.niche-motif-bolt{fill:#d39a42;transform-origin:center;animation:niche-energy-pulse 1.35s .7s ease-in-out infinite}
.niche-engineering .niche-motif-ring{transform-origin:160px 95px;animation:niche-gear-turn 3s .75s linear infinite}.niche-career .niche-motif-fill{transform-origin:center;animation:niche-briefcase-lift 1.7s .72s ease-in-out infinite}.niche-service .niche-motif-stroke{stroke-dasharray:80;stroke-dashoffset:80;animation:niche-path-enter .7s .45s ease forwards}.niche-household .niche-motif-paper{stroke-dasharray:130;stroke-dashoffset:130;animation:niche-path-enter .75s .4s ease forwards}.niche-pet .niche-motif-fill{transform-box:fill-box;transform-origin:center;animation:niche-paw-enter .5s .46s cubic-bezier(.16,1,.3,1) both}.niche-finance .niche-motif-paper,.niche-finance .niche-motif-fill{transform-box:fill-box;transform-origin:center;animation:niche-coin-enter .55s .4s cubic-bezier(.16,1,.3,1) both}.niche-finance .niche-motif-fill{animation-delay:.53s}.niche-auto .niche-motif-paper{animation:niche-car-enter .68s .38s cubic-bezier(.16,1,.3,1) both}.niche-converter .niche-motif-stroke{stroke-dasharray:60;stroke-dashoffset:60;animation:niche-path-enter .65s .42s ease forwards}
@keyframes niche-card-enter{from{transform:translateX(-12px);opacity:.15}to{transform:none;opacity:1}}@keyframes niche-path-enter{to{stroke-dashoffset:0}}@keyframes niche-tip-enter{to{opacity:1}}@keyframes niche-node-enter{from{transform:scale(.3);opacity:.15}to{transform:scale(1);opacity:1}}@keyframes niche-output-enter{from{transform:translateX(14px);opacity:.15}to{transform:none;opacity:1}}@keyframes niche-gear-turn{to{transform:rotate(360deg)}}@keyframes niche-briefcase-lift{50%{transform:translateY(-3px)}}@keyframes niche-energy-pulse{50%{transform:scale(1.14)}}@keyframes niche-paw-enter{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes niche-coin-enter{from{transform:translateY(9px) scale(.75);opacity:0}to{transform:none;opacity:1}}@keyframes niche-car-enter{from{transform:translateX(-13px);opacity:.2}to{transform:none;opacity:1}}
@media(max-width:560px){.tech-visual-card{max-width:100%;border-radius:14px;padding:7px 8px 10px}.tech-svg{max-height:190px}.tech-visual-caption{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){.tech-visual-card *,.tech-svg *{animation:none!important}.tech-flow-dot,.tech-fluid-dot,.tech-charge,.tech-drop,.tech-spark{opacity:.85!important}}

/* Page-specific result stories. The scene labels and values come from the
   submitted form; motif and movement are selected by the calculator spec. */
.spec-svg{max-height:238px;overflow:hidden}
.spec-page-signature{transform-box:fill-box;transform-origin:center;transform:rotate(var(--spec-signature-tilt,0deg));opacity:.72;pointer-events:none}.spec-page-signature polyline{fill:none;stroke-linecap:round;stroke-linejoin:round}.spec-signature-glow{stroke:color-mix(in srgb,var(--teal) 30%,transparent);stroke-width:var(--spec-signature-glow,6px);opacity:.3;filter:blur(1.5px)}.spec-signature-line{stroke:color-mix(in srgb,var(--teal) 72%,var(--card));stroke-width:1.8;stroke-dasharray:260;stroke-dashoffset:260;animation:spec-signature-draw var(--spec-signature-duration,2400ms) var(--spec-signature-delay,0ms) cubic-bezier(.16,1,.3,1) forwards}.spec-signature-node{fill:#fff;stroke:var(--teal);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:spec-signature-node .46s var(--spec-node-delay,0ms) cubic-bezier(.16,1,.3,1) forwards}.spec-signature-traveller{fill:#d89d3f;filter:drop-shadow(0 0 4px color-mix(in srgb,#d89d3f 70%,transparent));offset-anchor:center;offset-distance:100%;opacity:0;animation:spec-signature-travel var(--spec-signature-duration,2400ms) var(--spec-particle-delay,0ms) cubic-bezier(.4,0,.2,1) infinite}.spec-signature-traveller--2,.spec-signature-traveller--3{fill:var(--teal);filter:none}.spec-page-signature--1 .spec-signature-line{stroke-dasharray:3 4}.spec-page-signature--2 .spec-signature-line{stroke-dasharray:8 4}.spec-page-signature--3 .spec-signature-line{stroke:#d89d3f}.spec-page-signature--4 .spec-signature-node{fill:var(--teal-soft)}.spec-page-signature--5 .spec-signature-line{stroke-width:2.4}.spec-page-signature-rhythm--1 .spec-signature-traveller{animation-timing-function:ease-in-out}.spec-page-signature-rhythm--2 .spec-signature-traveller{animation-timing-function:cubic-bezier(.16,1,.3,1)}.spec-page-signature-rhythm--3 .spec-signature-traveller{animation-direction:alternate}.spec-page-signature-rhythm--4 .spec-signature-node{stroke:#d89d3f}
.spec-fact-card rect{fill:#fff;stroke:color-mix(in srgb,var(--teal) 26%,#dfe7e4);stroke-width:1.4;filter:drop-shadow(0 6px 9px rgba(25,54,47,.05));animation:spec-card-in .48s cubic-bezier(.16,1,.3,1) both}
.spec-fact-card--2 rect{animation-delay:.07s}.spec-fact-card--3 rect{animation-delay:.14s}
.spec-fact-label{fill:var(--muted);font:800 8.5px/1 var(--font);letter-spacing:.045em}
.spec-fact-value{fill:var(--ink);font:850 11.5px/1 var(--font);font-variant-numeric:tabular-nums}
.spec-result-card rect{fill:color-mix(in srgb,var(--teal-soft) 56%,var(--card));stroke:var(--teal);stroke-width:2;filter:drop-shadow(0 9px 14px rgba(25,54,47,.08));animation:spec-result-in .55s .55s cubic-bezier(.16,1,.3,1) both}
.spec-result-kicker{fill:var(--muted);font:850 8.5px/1 var(--font);letter-spacing:.08em}
.spec-result-value{fill:var(--teal-dark);font:900 12.5px/1 var(--font-disp);font-variant-numeric:tabular-nums}
.spec-result-label{fill:var(--ink-2);font:750 8.5px/1 var(--font)}
.spec-foot{fill:var(--muted);font:850 8px/1 var(--font);letter-spacing:.045em}
.spec-motif{transform-origin:162px 95px;animation:spec-motif-in .52s .3s cubic-bezier(.16,1,.3,1) both}
.spec-icon-line,.spec-icon-accent-line{fill:none;stroke:var(--teal-dark);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.spec-icon-accent-line{stroke:#c88728}.spec-icon-paper{fill:#fff;stroke:var(--teal-dark);stroke-width:2.1;stroke-linejoin:round}.spec-icon-fill{fill:var(--teal)}.spec-icon-accent{fill:#d89d3f}.spec-icon-copy{fill:var(--teal-dark);font:900 9px/1 var(--font)}.spec-icon-copy--light{fill:#fff}
.spec-icon-pulse,.spec-icon-fluid{fill:none;stroke:#cf5863;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;animation:spec-line-draw .82s .52s ease forwards}.spec-icon-fluid{stroke:#3e91aa}
.spec-motif--gear .spec-icon-gear{animation:spec-rotate 3.5s .8s linear infinite;transform-origin:162px 95px}
.spec-motion{fill:none;stroke:color-mix(in srgb,var(--teal) 70%,#c8d8d3);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;animation:spec-line-draw .8s .18s ease forwards}
.spec-route,.spec-flow,.spec-pulse{stroke-dasharray:8 6;animation:spec-dash 1.15s linear infinite}
.spec-motion-dot{fill:#d89d3f;offset-path:path("M105 138 C132 48 190 48 220 92");animation:spec-dot-route 2.2s .45s ease-in-out infinite}
.spec-motion-node{fill:#fff;stroke:var(--teal);stroke-width:3}.spec-motion-node--end{fill:var(--teal)}
.spec-motion-tip{fill:none;stroke:#c88728;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.spec-motion-needle{fill:none;stroke:#c88728;stroke-width:4;stroke-linecap:round;transform-origin:165px 114px;animation:spec-needle .82s .35s cubic-bezier(.16,1,.3,1) both}
.spec-motion-shell{fill:#fff;stroke:var(--teal-dark);stroke-width:2.5}.spec-motion-fill{fill:color-mix(in srgb,var(--teal) 75%,var(--card));transform-box:fill-box;transform-origin:center bottom;animation:spec-fill .85s .3s cubic-bezier(.16,1,.3,1) both}
.spec-layer{stroke:var(--teal);stroke-width:1.5;transform-box:fill-box;transform-origin:center bottom;animation:spec-layer-in .48s cubic-bezier(.16,1,.3,1) both}.spec-layer-1{fill:color-mix(in srgb,var(--teal) 25%,var(--card));animation-delay:.2s}.spec-layer-2{fill:color-mix(in srgb,var(--teal) 45%,var(--card));animation-delay:.3s}.spec-layer-3{fill:color-mix(in srgb,var(--teal) 68%,var(--card));animation-delay:.4s}
.spec-svg--b .spec-result-card rect{stroke-width:2.5}.spec-svg--c .spec-fact-card rect{stroke-dasharray:3 2}.spec-svg--d .spec-result-card rect{fill:color-mix(in srgb,#f6e5bd 42%,var(--card))}.spec-svg--e .spec-motif{filter:drop-shadow(0 5px 7px rgba(25,54,47,.12))}.spec-svg--f .spec-result-card rect{filter:drop-shadow(0 11px 17px rgba(25,54,47,.12))}
@keyframes spec-card-in{from{transform:translateX(-12px);opacity:.1}to{transform:none;opacity:1}}
@keyframes spec-result-in{from{transform:translateX(15px);opacity:.1}to{transform:none;opacity:1}}
@keyframes spec-motif-in{from{transform:scale(.4);opacity:.1}to{transform:scale(1);opacity:1}}
@keyframes spec-signature-draw{to{stroke-dashoffset:0}}
@keyframes spec-signature-node{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:.9}}
@keyframes spec-signature-travel{0%{offset-distance:0%;opacity:0}10%{opacity:1}78%{opacity:1}88%,100%{offset-distance:100%;opacity:0}}
@keyframes spec-line-draw{to{stroke-dashoffset:0}}
@keyframes spec-dash{to{stroke-dashoffset:-28}}
@keyframes spec-dot-route{0%,100%{offset-distance:0%;opacity:.2}15%,85%{opacity:1}50%{offset-distance:100%}}
@keyframes spec-needle{from{transform:rotate(-65deg)}to{transform:rotate(10deg)}}
@keyframes spec-fill{from{transform:scaleY(.08);opacity:.2}to{transform:scaleY(1);opacity:1}}
@keyframes spec-layer-in{from{transform:translateY(12px) scaleY(.25);opacity:0}to{transform:none;opacity:1}}
@keyframes spec-rotate{to{transform:rotate(360deg)}}
@media(max-width:560px){.spec-svg{max-height:210px}.spec-fact-label{font-size:8.5px}.spec-fact-value{font-size:11px}.spec-result-kicker{font-size:8.5px}.spec-result-value{font-size:12px}.spec-result-label{font-size:8.5px}}
@media(prefers-reduced-motion:reduce){.spec-signature-line{stroke-dashoffset:0!important}.spec-signature-node{opacity:.9!important;transform:none!important}.spec-signature-traveller{display:none!important}}

/* Result explanations inherit the page category. This keeps every calculator
   coherent instead of applying a second, competing visual-family palette. */

/* Generic scenes are explanations, not side decorations. Giving them the
   full result width prevents cramped labels on desktop, tablet and mobile. */
.result:has(.spec-svg) .result-main-grid{grid-template-columns:1fr!important}
.result:has(.spec-svg) .calc-visual-container{border-top:1px solid var(--border-2);padding-top:18px}
.result:has(.spec-svg) .tech-visual-card{width:min(100%,720px);max-width:720px;margin-inline:auto;overflow:hidden}

/* Truthful high-priority scenes. These use wide viewBoxes and only animate
   calculated geometry; labels stay inside reserved text areas. */
.codex-svg{max-height:330px;overflow:hidden}.codex-track{fill:#e8ecef}.codex-input-box{fill:#fff;stroke:color-mix(in srgb,var(--teal) 38%,#d9e0e5);stroke-width:2}.codex-result-box{fill:color-mix(in srgb,var(--teal-soft) 72%,var(--card));stroke:var(--teal);stroke-width:2.4}.codex-positive{fill:#16a34a}.codex-fee{fill:#ef6a5b}.codex-finance{fill:var(--teal)}.codex-health{fill:#e11d48}.codex-family{fill:#c24178}.codex-family-soft{fill:#f0a1bd}.codex-parent-net{fill:#596579}.codex-distance{fill:#2563eb}.codex-base{fill:var(--teal)}.codex-wait{fill:#f59e0b}.codex-energy-export{fill:#0ea5e9}.codex-band{fill:color-mix(in srgb,var(--teal) 32%,var(--card));stroke:var(--teal);stroke-width:2}.codex-scale{fill:none;stroke:#9aa7b1;stroke-width:4;stroke-linecap:round}.codex-marker,.codex-limit{stroke:var(--teal-dark);stroke-width:3;stroke-linecap:round}.codex-marker-dot{fill:var(--teal);stroke:#fff;stroke-width:4}.codex-flow{fill:none;stroke:var(--teal);stroke-width:4;stroke-linecap:round}.codex-flow--moving{stroke-dasharray:10 8;animation:codex-flow 1.1s linear infinite}.codex-tip{fill:var(--teal)}.codex-legend text{fill:var(--ink-2);font:800 10px/1 var(--font);letter-spacing:.02em}.codex-balance-line{fill:none;stroke:var(--teal);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;animation:codex-line-in 1s .12s ease forwards}.codex-tooth{fill:#fff;stroke:#e11d48;stroke-width:5;filter:drop-shadow(0 8px 12px rgba(136,19,55,.12))}.codex-sun{fill:#f59e0b}.codex-sun-rays{fill:none;stroke:#f59e0b;stroke-width:5;stroke-linecap:round;animation:codex-sun 2.8s linear infinite;transform-origin:88px 72px}.codex-roof{fill:none;stroke:#713f12;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.codex-panel{fill:#2563eb;stroke:#1e3a8a;stroke-width:3}.codex-house{fill:#fff7ed;stroke:#c2410c;stroke-width:5;stroke-linejoin:round}.codex-door{fill:#fed7aa;stroke:#c2410c;stroke-width:3}.codex-contract{fill:#fff;stroke:var(--teal);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.codex-break{fill:none;stroke:#ef6a5b;stroke-width:6;stroke-linecap:round}.codex-grade-dots circle{fill:#fff;stroke:#d7dde2;stroke-width:4}.codex-care-marker{fill:var(--teal);stroke:#fff;stroke-width:5;filter:drop-shadow(0 7px 10px rgba(0,0,0,.15));animation:codex-marker-in .62s cubic-bezier(.16,1,.3,1) both}.codex-fit-copy{font-size:25px}.precision-caption-copy{fill:var(--muted);font:700 12px/1.2 var(--font)}
.codex-svg rect[class^="codex-"]:not(.codex-input-box):not(.codex-result-box):not(.codex-track){transform-box:fill-box;transform-origin:left center;animation:codex-bar-in .7s cubic-bezier(.16,1,.3,1) both}
@keyframes codex-bar-in{from{transform:scaleX(.04);opacity:.2}to{transform:scaleX(1);opacity:1}}@keyframes codex-flow{to{stroke-dashoffset:-36}}@keyframes codex-line-in{to{stroke-dashoffset:0}}@keyframes codex-marker-in{from{transform:scale(.25);opacity:.1}to{transform:scale(1);opacity:1}}@keyframes codex-sun{to{transform:rotate(360deg)}}
@media(max-width:560px){.codex-svg{max-height:260px}.codex-fit-copy{font-size:20px}}

/* donut chart styling */
.donut-wrapper{display:flex;align-items:center;gap:20px;width:100%;flex-wrap:wrap;justify-content:center}
.donut-svg{transform:rotate(-90deg);flex-shrink:0}
.donut-segment{stroke-linecap:round}
.donut-segment:hover{stroke-width:5;cursor:pointer}
.chart-legend{display:grid;gap:8px;font-size:13.5px;min-width:140px;flex:1}
.legend-item{display:flex;align-items:center;gap:8px}
.legend-item .dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.legend-item .lbl{color:var(--ink-2);font-weight:500}

/* range gauge styling */
.range-gauge-wrapper{width:100%;margin:10px 0}
.range-gauge-labels{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:8px;text-transform:uppercase;letter-spacing:.02em}
.range-gauge-track{height:8px;background:var(--border-2);border-radius:99px;position:relative;margin:12px 0}
.range-gauge-fill{height:100%;background:var(--teal-soft);border-radius:99px;position:absolute;opacity:0.85}
.range-gauge-pointer{width:14px;height:14px;background:var(--teal);border:2.5px solid var(--card);border-radius:50%;position:absolute;top:-3px;transform:translateX(-50%);box-shadow:0 2px 6px rgba(0,0,0,0.25);transition:left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.range-gauge-pointer::after{content:"";position:absolute;width:6px;height:6px;background:var(--teal);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);animation:pulse 2s infinite}
.range-gauge-helper{font-size:11.5px;color:var(--muted);text-align:center;margin-top:8px}

/* health gauge styling */
.health-gauge-wrapper{width:100%;margin:8px 0}
.health-status-text{font-size:14.5px;margin-bottom:10px;text-align:center}
.health-status-text strong{font-size:16px}
.health-gauge-track{height:10px;background:var(--border-2);border-radius:99px;position:relative;margin:12px 0;overflow:hidden}
.health-gauge-segment{height:100%;position:absolute}
.health-gauge-pointer{width:4px;height:16px;background:var(--ink);position:absolute;top:-3px;transform:translateX(-50%);border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,0.3);z-index:2;transition:left 0.4s ease}
.health-gauge-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-weight:600}

/* geo visualization shapes */
.geo-wrapper{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.geo-svg{background:var(--card);border-radius:var(--r-sm);border:1px solid var(--border-2);box-shadow:none}
.geo-caption{font-size:11.5px;color:var(--muted);text-align:center;font-style:italic}

/* flowing dashes along the flight route */
.flight-arc-flow{animation:fa-flow 1.1s linear infinite}
@keyframes fa-flow{to{stroke-dashoffset:-16}}



@keyframes pulse {
  0% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2.5); opacity: 0; }
}

/* ---------- content / guide ---------- */
.content{padding-top:20px;padding-bottom:8px}
.content h2{font-size:1.6rem;margin:2.4rem 0 1rem;letter-spacing:-.02em}
.content h3{font-size:1.22rem;margin:1.8rem 0 .6rem;letter-spacing:-.01em}
.content ul,.content ol{margin:0 0 1.25rem;padding-left:1.3rem}
.content li{margin-bottom:.5rem}
/* formula callouts + derivation steps */
.content .formula {
  background: linear-gradient(90deg, var(--gold-tint) 0%, rgba(253, 244, 221, 0.4) 100%);
  border: 1px solid color-mix(in srgb,#f5ebd0 var(--lightmix),var(--card));
  border-left: 4px solid var(--gold);
  border-radius: var(--r-sm);
  padding: 16px 20px;
  margin: 1.5rem 0;
  font-size: 1.15rem;
  font-family: var(--font-disp);
  font-weight: 600;
  text-align: center;
  letter-spacing: .01em;
  color: var(--ink-3);
  box-shadow: 0 4px 12px rgba(232, 194, 106, 0.08);
  overflow-x: auto;
}
.content .formula b {
  color: var(--gold-ink);
  font-weight: 800;
}
.content ul.steps{list-style:none;padding-left:0;margin:0 0 1.1rem;display:grid;gap:7px;counter-reset:step}
.content ul.steps li{margin:0;background:var(--soft);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:9px 14px;font-size:1rem;position:relative;padding-left:42px}
.content ul.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:10px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center}

.input-data-card{margin:0 0 28px;border:1px solid var(--border-2);border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,#fbfdfc var(--lightmix),var(--card)),color-mix(in srgb,#fffdf8 var(--lightmix),var(--card)));overflow:hidden}
.input-data-card>details>summary{cursor:pointer;padding:16px 18px;font-weight:800;color:var(--teal);list-style-position:inside}
.input-data-card>details[open]>summary{border-bottom:1px solid var(--border-2)}
.input-data-body{padding:4px 18px 18px}
.input-data-body>p:first-child{margin-top:12px;color:var(--ink-2)}
.input-data-card table{margin:14px 0}
.input-data-card th[scope="row"]{min-width:170px;background:var(--card);font-weight:750}
.input-data-source{margin:12px 0 0;padding:12px 14px;border-radius:10px;background:var(--soft);font-size:.92rem;color:var(--ink-2)}

.reference-panel{margin:0 0 1.6rem;padding:20px 22px;border:1px solid color-mix(in srgb,var(--teal) 20%,var(--border-2));border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--teal-soft) 22%,var(--card)),var(--card));box-shadow:0 14px 28px -28px rgba(20,50,43,.55)}
.reference-panel>p:first-child{margin-top:0}.reference-panel>p:last-child{margin-bottom:0}
.reference-panel table{background:var(--card);margin:1.1rem 0}
.reference-panel--scenarios{background:linear-gradient(145deg,color-mix(in srgb,#fffaf0 var(--lightmix),var(--card)),var(--card))}
.reference-panel--result{background:linear-gradient(145deg,color-mix(in srgb,var(--teal-soft) 30%,var(--card)),var(--card))}
.reference-panel--sources{background:var(--card);border-left:4px solid var(--teal)}
.source-list{list-style:none;padding:0!important;display:grid;gap:9px}.source-list li{margin:0!important;padding:11px 13px;border:1px solid var(--border-2);border-radius:10px;background:var(--soft);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}.source-list a{font-weight:800}.source-list span{font-size:.75rem;color:var(--muted);font-weight:750;text-align:right}

/* premium tables */
.content table {
  display: block;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0;
  font-size: .95rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-2);
  box-shadow: 0 4px 15px rgba(31, 36, 33, 0.02);
}
.content th, .content td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-2);
  border-right: 1px solid var(--border-2);
}
.content th:last-child, .content td:last-child {
  border-right: none;
}
.content tr:last-child td {
  border-bottom: none;
}
.content th {
  background: var(--teal);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.9rem;
  text-transform: uppercase;
}
.content tr:nth-child(even) {
  background: rgba(243, 239, 230, 0.2);
}
.content tr:hover td {
  background: rgba(14, 122, 111, 0.03);
}

.disclaimer{font-size:.85rem;color:var(--ink-2);background:var(--soft);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:14px 16px;margin:1.6rem 0}

/* Herkunftszeile: ersetzt die frueheren Methodik- und Transparenzkarten. */
.page-trust{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  margin:-.8rem 0 1.6rem;font-size:.8rem;color:var(--muted)}
.page-trust-quellen{display:flex;flex-wrap:wrap;gap:4px 12px}
.page-trust a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--border)}
.page-trust a:hover{color:var(--teal-dark);border-bottom-color:var(--teal)}

/* interactive practice problems */
.content .ex-intro{color:var(--ink-2);margin:-.4rem 0 1rem}
.exercises{display:grid;gap:14px;margin:0 0 1rem}
.exercise{background:var(--card);border:1px solid var(--border-2);border-radius:var(--r);padding:16px 18px}
.exercise .ex-q{margin:0 0 12px;font-weight:600}
.exercise .ex-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;font-size:.78rem;font-weight:700;margin-right:9px;vertical-align:middle}
.ex-input{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.ex-input input{flex:1;min-width:130px;font:inherit;font-size:1rem;padding:11px 13px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}
.ex-input input:focus{outline:none;border-color:var(--teal)}
.ex-input .ex-unit{display:flex;align-items:center;color:var(--muted);font-size:.95rem;padding:0 4px}
.ex-check{font:inherit;font-weight:700;font-size:.95rem;padding:11px 20px;border:none;border-radius:var(--r-sm);background:var(--teal);color:#fff;cursor:pointer}
.ex-check:hover{background:var(--teal-dark)}
.ex-feedback{min-height:1.2em;margin-top:10px;font-weight:700;font-size:.95rem}
.ex-feedback.ok{color:var(--teal-dark)}
.ex-feedback.no{color:#b4541f}
.ex-solution{margin-top:10px;border-top:1px dashed var(--border-2);padding-top:8px}
.ex-solution summary{cursor:pointer;color:var(--teal);font-weight:600;font-size:.92rem;list-style:none}
.ex-solution summary::-webkit-details-marker{display:none}
.ex-solution summary::before{content:"▸ ";color:var(--muted)}
.ex-solution[open] summary::before{content:"▾ "}
.ex-sol-body{margin-top:8px;color:var(--ink-2);font-size:.96rem}

.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--card);overflow:hidden}
.faq summary{cursor:pointer;padding:16px 18px;font-weight:700;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;color:var(--muted);font-weight:400;font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 18px 16px;color:var(--ink-2)}

.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.related-card{border:1px solid var(--border-2);border-radius:var(--r);padding:16px 18px;display:block;background:var(--card)}
.related-card:hover{border-color:var(--teal);text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-pop)}
.related-card .t{font-weight:700;color:var(--ink)}
.related-card .d{font-size:.88rem;color:var(--muted);margin-top:3px}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border);background:var(--soft3);margin-top:56px}
.foot-grid{max-width:var(--maxw);margin:0 auto;padding:40px 24px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot-brand .word{font-family:var(--font-disp);font-weight:800;font-size:18px}
.foot-brand p{font-size:13.5px;color:var(--muted);margin:13px 0 0;max-width:240px;line-height:1.5}
.foot-col h4{font-weight:700;font-size:13.5px;margin:0 0 11px;font-family:var(--font-body);letter-spacing:0}
.foot-col a{display:block;color:var(--ink-2);font-size:13.5px;margin-bottom:8px}
.foot-col a:hover{color:var(--teal)}
.foot-bottom{border-top:1px solid var(--border)}
.foot-bottom .inner{max-width:var(--maxw);margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--muted)}
.foot-bottom .made{display:inline-flex;align-items:center;gap:7px}

/* ---------- cookie banner ---------- */
.btn{font:inherit;font-weight:700;font-size:.92rem;padding:11px 20px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--card);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--teal);border-color:var(--teal);color:#fff}

/* ---------- responsive & grid layout on desktop ---------- */
.result-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.calc-visual-container:empty {
  display: none;
}

@media(min-width:881px){
  .calc-wrap{
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 100%;
    margin-top: 24px;
  }
  .result{
    position: relative;
    top: auto;
    z-index: auto;
  }
  .result-main-grid:has(.calc-visual-container:not(:empty)) {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
  }
}

@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr}
  .feat{display:none}
  .main-nav,.nav-cta,.lang-switch{display:none}
  .menu-toggle{display:inline-flex}
  .cta-band{grid-template-columns:1fr;text-align:left}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
  .foot-brand{grid-column:1 / -1}
  .foot-brand p{max-width:none}
  .field-grid{grid-template-columns:1fr}
  .method-grid{grid-template-columns:1fr}
  .scope-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:16px}
  .calc-page-container{padding:0 12px}
  .calc-card-main{padding:30px 20px;margin-top:20px;border-radius:20px}
  .calc-card-main .page-head{padding-left:2px;padding-right:2px}
  .calc-wrap{margin-top:22px}
  .calc-wrap .card{padding:20px}
  .scope-card{padding:18px}
  .reference-panel{padding:16px 14px}
  .source-list li{grid-template-columns:1fr}
  .source-list span{text-align:left}
  .input-data-body{padding:4px 12px 14px}
  .input-data-card>details>summary{padding:14px}
  .scope-head{display:block}
  .scope-kicker{display:inline-block;margin-bottom:8px}
  .field{min-width:0}
  .field input,.field select{min-width:0}
  /* Footer bleibt 2-spaltig – eine Spalte wirkt „endlos lang“ mit leerer rechter Seite */
  .foot-grid{grid-template-columns:1fr 1fr;gap:20px;padding:32px 20px}
  .foot-col a{margin-bottom:10px}
  .foot-bottom .inner{flex-direction:column;align-items:flex-start;gap:6px}
  .searchbox .go{display:none}
}
@media(max-width:340px){
  .foot-grid{grid-template-columns:1fr}
}

/* =========================================================================
   Flight Time Calculator Dashboard & SVG Arc Animation
   ========================================================================= */
.flight-dashboard {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.flight-map-card {
  background: linear-gradient(135deg, rgba(14, 122, 111, 0.05) 0%, rgba(232, 194, 106, 0.08) 100%);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.airport-info {
  text-align: center;
  flex: 1;
}

.airport-info .iata {
  font-family: var(--font-disp);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--teal);
  line-height: 1;
  letter-spacing: -0.02em;
}

.airport-info .city {
  font-size: 0.95rem;
  font-weight: 700;
  margin-top: 6px;
  color: var(--ink);
  white-space: nowrap;
}

.airport-info .country {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2px;
}

.flight-path-svg-wrap {
  flex: 1.5;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.flight-svg {
  width: 100%;
  max-width: 240px;
  height: auto;
  overflow: visible;
}

.animated-plane-g .plane-icon-path {
  filter: drop-shadow(0 1px 1.5px rgba(31, 36, 33, 0.3));
}

.flight-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  width: 100%;
}

.flight-stat-card {
  background: var(--soft);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.flight-stat-card:hover {
  border-color: var(--teal-soft);
}

.flight-stat-card .stat-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.flight-stat-card .stat-body {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.flight-stat-card .stat-lbl {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.flight-stat-card .stat-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}

.flight-stat-card.highlight {
  border-color: var(--teal);
  background: rgba(14, 122, 111, 0.04);
}

.flight-stat-card.highlight .stat-val {
  color: var(--teal);
}

.flight-stat-card.prompt {
  border-style: dashed;
  background: transparent;
}

.flight-stat-card .stat-desc {
  font-size: 0.82rem;
  color: var(--muted);
}

.flight-stat-card .day-offset {
  font-size: 0.85rem;
  color: #b4541f;
  font-weight: 700;
  margin-left: 4px;
}

.jetlag-card {
  background: var(--card);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 20px 24px;
  width: 100%;
  text-align: left;
  box-shadow: 0 4px 15px rgba(31, 36, 33, 0.02);
}

.jetlag-title {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--teal-dark);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.jetlag-tips-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jetlag-tip-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.jetlag-tip-item .tip-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  background: var(--gold-tint);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jetlag-tip-item .tip-content {
  display: flex;
  flex-direction: column;
}

.jetlag-tip-item .tip-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

.jetlag-tip-item .tip-desc {
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.45;
  margin-top: 2px;
}

@media(max-width: 600px) {
  .flight-map-card {
    flex-direction: column;
    padding: 16px;
    gap: 12px;
  }
  .flight-path-svg-wrap {
    width: 100%;
    max-width: 120px;
    height: 60px;
  }
  .flight-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Calculator emoji ---------- */
.h1-emoji{display:inline-block;margin-right:6px;font-size:.85em;vertical-align:-2px}
.card-emoji{display:inline-block;margin-right:4px;font-size:1.05em}
.pop-emoji{font-size:20px;line-height:1}
.sr-emoji{font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center}

/* ---------- History chart ---------- */
.history-block{margin:34px 0 8px;padding:22px 22px 16px;background:var(--card);border:1px solid var(--border-2);border-radius:var(--r-md)}
.history-block h2{margin:0 0 14px;font-size:1.25rem}
.history-chart{position:relative;width:100%}
.hc-svg{width:100%;height:auto;display:block}
.hc-dot{cursor:pointer;transition:r .12s ease}
.hc-line.hc-draw{animation:hc-draw 1.6s ease-out forwards}
@keyframes hc-draw{to{stroke-dashoffset:0}}
.hc-tip{position:absolute;background:var(--ink);color:#fff;font-size:12.5px;padding:6px 10px;border-radius:8px;pointer-events:none;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.18);z-index:5}
.history-note{font-size:14px;color:var(--ink-2);margin:12px 0 6px}
.history-change{display:inline-block;font-weight:700;color:var(--teal);background:var(--gold-tint);padding:2px 8px;border-radius:6px;margin-left:4px}
.history-table summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--teal);padding:4px 0}
.history-table table{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
.history-table th,.history-table td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--border)}
.history-source{font-size:12px;color:var(--muted);margin:10px 0 0}

/* ---------- UX-Polish: Formular, Tabellen, FAQ ---------- */
.field input:hover:not(:focus),.field select:hover:not(:focus){border-color:#c9bfa8}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E7A6F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer}
.field input[type=number]{font-variant-numeric:tabular-nums}
/* Datums- und Zeitfelder an die uebrigen Formularfelder angleichen.
   Ohne diese Regeln zeichnet der Browser sein eigenes Widget: andere Hoehe
   (54px statt 52px, dadurch springen Felder nebeneinander), ein fremdes
   Icon und eine andere Ziffernbreite als im Rest des Formulars. */
.field input[type=date],
.field input[type=time]{
  position:relative;
  cursor:pointer;
  min-height:52px;
  font-variant-numeric:tabular-nums;
  color-scheme:light;
  padding-right:40px;
  background-repeat:no-repeat;
  background-position:right 13px center;
}
.field input[type=date]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%234B5563' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='2' y='3.2' width='12' height='11' rx='2.2'/%3E%3Cpath d='M2 6.9h12M5.4 1.6v3M10.6 1.6v3'/%3E%3C/svg%3E")}
.field input[type=time]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%234B5563' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.1'/%3E%3Cpath d='M8 4.4V8l2.6 1.6'/%3E%3C/svg%3E")}
/* Das native Icon wird unsichtbar, deckt aber weiterhin die rechte Seite ab -
   ein Klick auf unser Icon oeffnet also den Kalender des Browsers. */
.field input[type=date]::-webkit-calendar-picker-indicator,
.field input[type=time]::-webkit-calendar-picker-indicator{
  position:absolute;
  inset:0 0 0 auto;
  width:40px;
  margin:0;
  padding:0;
  opacity:0;
  cursor:pointer;
}
.field input[type=date]::-webkit-datetime-edit,
.field input[type=time]::-webkit-datetime-edit{padding:0}
/* Noch nicht ausgefuelltes Feld: Platzhalterziffern zuruecknehmen. */
.field input[type=date]:invalid::-webkit-datetime-edit,
.field input[type=time]:invalid::-webkit-datetime-edit{color:var(--muted)}
.field input[type=date]:hover:not(:focus),
.field input[type=time]:hover:not(:focus){background-color:color-mix(in srgb,#fdfcfa var(--lightmix),var(--card))}
.result:hover{box-shadow:var(--shadow-pop)}

/* Every calculator follows the same flow on every viewport:
   inputs first, the submitted result in a separate full-width box below. */
.calc-wrap--flugzeit-rechner{grid-template-columns:minmax(0,1fr)}

.flight-globe-card{width:100%;display:grid;justify-items:center;gap:10px;padding:14px;border:1px solid var(--border-2);border-radius:18px;background:linear-gradient(180deg,var(--card),color-mix(in srgb,#f2faf7 var(--lightmix),var(--card)));overflow:hidden}
.flight-globe-head{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;text-align:center;font-size:.78rem;color:var(--ink-2)}
.flight-globe-head>span:first-child,.flight-globe-head>span:last-child{min-width:0;overflow-wrap:anywhere}
.flight-globe-head strong{display:block;color:var(--teal);font:800 1.25rem/1 var(--font-disp)}
.flight-route-arrow{font-size:1.2rem;color:var(--gold-ink)}
.flight-globe{width:min(100%,720px);height:auto;display:block}
.flight-world-map{aspect-ratio:2/1;border:1px solid rgba(14,122,111,.22);border-radius:14px;background:color-mix(in srgb,#dff1ed var(--lightmix),var(--card));box-shadow:inset 0 0 24px rgba(14,122,111,.08)}
.flight-country-start{fill:rgba(11,117,104,.28);stroke:var(--teal-dark);stroke-width:.42;stroke-linejoin:round}
.flight-country-dest{fill:rgba(229,185,79,.72);stroke:#7b5d0c;stroke-width:.55;stroke-linejoin:round}
.flight-map-label{fill:var(--teal-dark);stroke:#fff;stroke-linejoin:round;paint-order:stroke fill;font-family:var(--font-disp);font-weight:900;letter-spacing:.03em;pointer-events:none}
.flight-map-label-dest{fill:#7b5d0c}
.flight-map-pulse{transform-box:fill-box;transform-origin:center;animation:flight-map-pulse 2s ease-out infinite}
.flight-globe-foot{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;font-size:.72rem;font-weight:750;color:var(--teal-dark)}
.flight-globe-foot span{padding:5px 8px;border-radius:999px;background:var(--card);border:1px solid var(--border-2)}
.flight-globe-foot .flight-destination-country{background:var(--gold-tint);border-color:rgba(229,185,79,.55);color:#6f540d}
.flight-visual-note{margin:0;font-size:.68rem;color:var(--muted)}
@keyframes flight-map-pulse{0%{opacity:.75;transform:scale(.7)}75%,100%{opacity:0;transform:scale(1.8)}}

/* Flugzeit-Formular: Route zuerst, Ankunftszeit bewusst als Zusatzfunktion. */
.flight-form-intro{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding-bottom:2px}
.flight-form-intro strong{display:block;font:800 1.08rem/1.2 var(--font-disp);color:var(--ink)}
.flight-form-intro p{margin:3px 0 0;font-size:.86rem;line-height:1.4;color:var(--muted)}
.flight-step{display:inline-grid;place-items:center;width:30px;height:30px;min-width:30px;border-radius:50%;background:var(--teal);color:#fff;font:800 .82rem/1 var(--font-disp);box-shadow:0 5px 12px -7px rgba(11,117,104,.8)}
.flight-options{grid-column:1/-1;border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--soft);overflow:hidden}
.flight-options>summary{display:flex;align-items:center;gap:12px;padding:13px 14px;cursor:pointer;list-style:none;color:var(--ink-2);transition:background .16s ease}
.flight-options>summary::-webkit-details-marker{display:none}
.flight-options>summary:hover{background:var(--gold-tint)}
.flight-options>summary:focus-visible{outline:3px solid rgba(14,122,111,.18);outline-offset:-3px}
.flight-options>summary>span:nth-child(2){display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.flight-options>summary strong{font-size:.91rem;line-height:1.3}
.flight-options>summary small{padding:3px 7px;border-radius:999px;background:var(--card);border:1px solid var(--border);color:var(--muted);font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.flight-options>summary::after{content:"⌄";margin-left:auto;color:var(--teal);font-size:1.2rem;font-weight:800;transition:transform .18s ease}
.flight-options[open]>summary::after{transform:rotate(180deg)}
.flight-options-body{padding:0 14px 15px;border-top:1px solid var(--border-2);background:var(--card)}
.flight-options-body>p{margin:12px 0;color:var(--muted);font-size:.82rem;line-height:1.45}
.flight-options-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.calc-wrap--flugzeit-rechner .field select{min-height:44px}
@media(max-width:560px){
  .flight-options-grid{grid-template-columns:1fr}
  .flight-options>summary>span:nth-child(2){align-items:flex-start;flex-direction:column;gap:3px}
}

.bmi-visual-layout{width:100%;display:grid;grid-template-columns:minmax(110px,.72fr) minmax(190px,1.3fr);gap:22px;align-items:center}
.bmi-body-card{display:grid;justify-items:center;gap:2px;padding:10px;border-radius:16px;background:linear-gradient(180deg,var(--card),color-mix(in srgb,#f5faf8 var(--lightmix),var(--card)));border:1px solid var(--border-2)}
.bmi-body-svg{width:110px;max-width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(14,122,111,.14));animation:bmi-enter .65s cubic-bezier(.16,1,.3,1) both}
.bmi-body-card span{font-size:.73rem;font-weight:800;color:var(--ink-2);text-align:center}
.bmi-body-card small{font-size:.62rem;line-height:1.3;color:var(--muted);text-align:center}
.bmi-gauge-col{min-width:0}
@keyframes bmi-enter{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:620px){.bmi-visual-layout{grid-template-columns:1fr}.bmi-body-svg{width:92px}}
@media(max-width:560px){.flight-globe-card{padding:10px;border-radius:14px}.flight-world-map{border-radius:10px}.flight-globe-head{font-size:.7rem;gap:6px}.flight-globe-head strong{font-size:1.05rem}}
@media(prefers-reduced-motion:reduce){.globe-halo,.animated-plane-g,.flight-arc-flow,.flight-map-pulse,.bmi-body-svg{animation:none!important}}
.route-table{margin:14px 0 24px;border:1px solid var(--border-2);border-radius:14px;background:var(--soft);overflow:hidden}
.route-table>summary{cursor:pointer;padding:14px 16px;font-weight:800;color:var(--teal);list-style-position:inside}
.route-table[open]>summary{border-bottom:1px solid var(--border-2)}
.route-table table{margin:0;border:0;border-radius:0}
.result .breakdown div{transition:background .15s ease;border-radius:6px}
.result .breakdown div:hover{background:var(--gold-tint)}
/* Zebra + Hover für Inhalts-Tabellen */
.content table thead th{background:var(--gold-tint);color:var(--ink);font-weight:700;white-space:nowrap}
.content table tbody tr:nth-child(even){background:color-mix(in srgb,#faf8f2 var(--lightmix),var(--card))}
.content table tbody tr:hover{background:color-mix(in srgb,#f3efe3 var(--lightmix),var(--card))}
.content table td,.content table th{padding:9px 12px}
/* FAQ: Teal-Akzent + sanftes Öffnen */
.faq details{transition:border-color .15s ease,box-shadow .15s ease}
.faq details:hover{border-color:var(--teal)}
.faq details[open]{border-color:var(--teal);box-shadow:0 4px 14px rgba(14,122,111,.07)}
.faq details[open] summary{color:var(--teal)}
.faq .answer{animation:faq-in .22s ease}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Externe Gesetzes-Links kenntlich machen */
.content a[target="_blank"]{font-weight:600;border-bottom:1px dotted var(--teal)}
.content a[target="_blank"]::after{content:" ↗";font-size:.8em;color:var(--teal)}

/* ---------- Microinteractions ---------- */
html{scroll-behavior:smooth}


/* sanfter Druck-Effekt auf allem Klickbaren */
.pill:active,.cta:active,.searchbox .go:active,.cat-tile:active,.related-card:active,.pop-item:active,.tile:active{transform:scale(.975)}
button{transition:transform .12s ease}

/* Karten-Emoji: freundliches Anheben beim Hover */
.card-emoji{display:inline-block;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.related-card:hover .card-emoji,.pop-item:hover .card-emoji{transform:scale(1.25) rotate(-6deg)}

/* Drawer: hereingleiten statt aufpoppen */
.drawer.open .drawer-panel{animation:drawer-in .28s cubic-bezier(.2,.7,.2,1)}
.drawer.open .drawer-overlay{animation:fade-in .25s ease}
@keyframes drawer-in{from{transform:translateX(40px)}to{transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* Suchergebnisse: weiches Aufklappen */
.search-results{animation:dd-in .18s ease}
@keyframes dd-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sr-item{transition:background .14s ease,transform .14s ease}
.sr-item:hover{transform:translateX(3px)}

/* Suchfeld: Fokus-Glow */
.searchbox:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,122,111,.12),0 22px 44px -28px rgba(31,36,33,.5)}
.searchbox .go:hover{background:var(--teal-dark, #0a5a52)}

/* Ergebnis-Update: kurzer Aufmerksamkeits-Puls des Werts */
.result .value{transition:color .2s ease}
.result.tick .value{animation:val-pulse .45s ease}
@keyframes val-pulse{0%{transform:scale(1)}35%{transform:scale(1.035)}100%{transform:scale(1)}}

/* Guide-Überschriften: dezente Unterstreichung wächst */
.content h2{position:relative}
.content h2::after{content:"";display:block;width:34px;height:3px;border-radius:2px;background:var(--gold);margin-top:6px;transition:width .4s ease}
.content h2:hover::after{width:64px}

/* Back-to-top */
.to-top{position:fixed;right:18px;bottom:18px;z-index:50;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;background:var(--teal);color:#fff;font-size:20px;line-height:1;box-shadow:0 10px 24px -10px rgba(14,122,111,.6);opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease,background .15s ease}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--teal-dark,#0a5a52)}

/* Barrierefreiheit: Animationen respektieren Systemeinstellung */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hc-line,.flight-trail,.result.reveal,.faq .answer{animation:none !important}
  *{transition-duration:.01ms !important}
}


/* ---------- Homepage-Content ---------- */
.home-content{padding-top:8px}
.reading-narrow{max-width:820px;margin:0 auto}
.home-content h2{font-size:1.5rem;margin:0 0 14px}
.home-content h3{font-size:1.15rem;margin:26px 0 10px}
.home-content p,.home-content li{color:var(--ink-2);line-height:1.7}
.home-content ul{padding-left:20px;margin:10px 0}
.home-content li{margin:6px 0}
.home-content .faq{margin-top:16px}

/* ---------- Berechnen-Button ---------- */
.calc-go{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin-top:20px;padding:15px 20px;border:1px solid rgba(0,0,0,.05);border-radius:var(--r-sm);background:var(--teal);color:#fff;font-family:var(--font-disp);font-weight:700;font-size:1.05rem;letter-spacing:.01em;cursor:pointer;box-shadow:0 13px 28px -14px rgba(11,117,104,.72);transition:background .18s ease,transform .14s ease,box-shadow .18s ease;position:relative;overflow:hidden;isolation:isolate}
.calc-go::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 34%,color-mix(in srgb,var(--card) 22%,transparent) 48%,transparent 62%);transform:translateX(-140%);transition:transform .55s ease;z-index:-1}
.calc-go:hover{background:var(--teal-dark,#07564d);transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(7,86,77,.72)}
.calc-go:hover::before{transform:translateX(140%)}
.calc-go-arrow{font-size:1.25em;line-height:1;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.calc-go:hover .calc-go-arrow{transform:translateX(4px)}
.calc-go.is-calculating .calc-go-arrow{transform:translateX(8px)}
.calc-go:active{transform:scale(.985)}

/* ---------- Premium reference calculators ---------- */
.premium-reference-form{
  border-top-color:#15384d;
  background:linear-gradient(180deg,var(--card) 0%,color-mix(in srgb,#f8faf9 var(--lightmix),var(--card)) 100%);
  box-shadow:0 24px 60px -38px rgba(16,42,59,.48);
}
.premium-form-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:11px}
.premium-form-head>div{display:grid;gap:2px}
.premium-form-head strong{font-family:var(--font-disp);font-size:1rem;line-height:1.35;color:color-mix(in srgb,#102a3b var(--darkmix),var(--ink))}
.premium-form-eyebrow{font-size:.7rem;line-height:1;font-weight:850;letter-spacing:.14em;color:var(--teal)}
.premium-progress-copy{font-size:.75rem;font-weight:750;color:#6a756f;white-space:nowrap}
.premium-progress{height:4px;margin:0 0 24px;background:color-mix(in srgb,#e7ece9 var(--lightmix),var(--card));border-radius:99px;overflow:hidden}
.premium-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--teal),#d19a3d);border-radius:inherit;transition:width .25s cubic-bezier(.2,.8,.2,1)}
.premium-reference-form .field{position:relative;padding:11px;border:1px solid transparent;border-radius:14px;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.premium-reference-form .field:focus-within{background:var(--card);border-color:color-mix(in srgb,#c8d8d3 var(--lightmix),var(--card));box-shadow:0 12px 26px -24px rgba(16,42,59,.72)}
.premium-reference-form .field[data-field-state="valid"]::after{content:"";position:absolute;top:14px;right:13px;width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,#d8eee8 var(--lightmix),var(--card))}
.premium-reference-form .field[data-field-state="invalid"] input{border-color:#b14e48;box-shadow:0 0 0 3px rgba(177,78,72,.1)}
.premium-reference-form .field[data-field-state="invalid"] label{color:#8d3430}
.premium-reference-form .calc-go{background:var(--teal);box-shadow:0 14px 30px -18px rgba(var(--page-glow),.72)}
.premium-reference-form .calc-go.is-ready{background:linear-gradient(100deg,var(--teal-dark) 0%,var(--teal) 100%);box-shadow:0 17px 34px -18px rgba(var(--page-glow),.82)}
.premium-reference-form .calc-go.is-ready .calc-go-arrow{color:#f2c761}
@keyframes premium-field-attention{0%,100%{transform:none}30%{transform:translateX(-4px)}65%{transform:translateX(4px)}}
.premium-reference-form .field-attention{animation:premium-field-attention .36s ease}
.premium-distance-form .field-grid{grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);align-items:end}
.premium-distance-form .distance-swap{align-self:end;display:grid;place-items:center;width:48px;height:48px;margin:0 auto 12px;border:1px solid color-mix(in srgb,#c6d5d0 var(--lightmix),var(--card));border-radius:14px;background:var(--card);color:color-mix(in srgb,#15384d var(--darkmix),var(--ink));cursor:pointer;box-shadow:0 10px 22px -20px rgba(16,42,59,.7);transition:transform .18s ease,border-color .18s ease,background .18s ease}
.premium-distance-form .distance-swap:hover{transform:translateY(-2px);border-color:var(--teal);background:color-mix(in srgb,#f2f8f6 var(--lightmix),var(--card))}
.premium-distance-form .distance-swap span:first-child{font-size:1.45rem;line-height:1}.distance-swap-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.result:has(.precision-scene){background:linear-gradient(160deg,var(--card) 0%,color-mix(in srgb,#f6faf9 var(--lightmix),var(--card)) 100%);border-color:#bfd3cd;border-top-color:#15384d}
.result:has(.precision-scene) .result-main-grid{grid-template-columns:1fr!important;gap:18px}
.result:has(.precision-scene) .calc-visual-container{margin-top:4px;padding-top:22px;border-top:1px solid color-mix(in srgb,#dbe4e0 var(--lightmix),var(--card))}
.precision-scene{width:100%;max-width:780px;margin:0;padding:16px 16px 12px;border:1px solid color-mix(in srgb,#cfdcd8 var(--lightmix),var(--card));border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,#fbfdfc var(--lightmix),var(--card)) 0%,color-mix(in srgb,#eef5f3 var(--lightmix),var(--card)) 100%);box-shadow:0 22px 44px -36px rgba(16,42,59,.72);overflow:hidden;color:color-mix(in srgb,#102a3b var(--darkmix),var(--ink))}
.precision-scene__head{display:flex;justify-content:space-between;gap:16px;padding:0 4px 10px;border-bottom:1px solid color-mix(in srgb,#d9e3df var(--lightmix),var(--card));font-size:.68rem;line-height:1.2;font-weight:850;letter-spacing:.13em;color:var(--teal)}
.precision-scene__head span:last-child{color:#77827d;letter-spacing:.04em;text-transform:none}
.precision-scene figcaption{padding:8px 4px 0;color:#68746f;font-size:.76rem;line-height:1.45;text-align:left}

/* Date & Time result system: light pastel, locally scoped, and data-led. */
.result:has(.date-scene){background:linear-gradient(155deg,var(--card) 0%,color-mix(in srgb,#fbfaff var(--lightmix),var(--card)) 55%,color-mix(in srgb,#f7f9ff var(--lightmix),var(--card)) 100%);border-color:color-mix(in srgb,#dcd8f5 var(--lightmix),var(--card));border-top-color:#8b7cf6}
.result:has(.date-scene) .calc-visual-container{border-top-color:color-mix(in srgb,#e9e5f7 var(--lightmix),var(--card))}
.result:has(.date-scene) .result-label{color:#6d5ed5}.result:has(.date-scene) .result-value{color:#303653}.result:has(.date-scene) .result-item strong{color:#554b9e}
.date-scene{--dt-lavender:#8b7cf6;--dt-blue:#8fc7f7;--dt-pink:#f6afc4;--dt-peach:#f8c89a;--dt-yellow:#f7e7a2;--dt-ink:#28304a;width:100%;border-color:color-mix(in srgb,#dedaf3 var(--lightmix),var(--card));background:linear-gradient(145deg,var(--card) 0%,color-mix(in srgb,#fbfaff var(--lightmix),var(--card)) 52%,color-mix(in srgb,#f5f8ff var(--lightmix),var(--card)) 100%);box-shadow:0 24px 50px -38px rgba(65,55,122,.42);color:var(--dt-ink)}
.date-scene .precision-scene__head{border-bottom-color:color-mix(in srgb,#e9e5f7 var(--lightmix),var(--card));color:#6d5ed5}.date-scene .precision-scene__head span:last-child{color:#77758a}.date-scene figcaption{color:#69677a}.date-svg{display:block;width:100%;height:auto;max-height:340px;margin:4px auto 0;font-family:inherit}.date-svg text{fill:var(--dt-ink)}
.dt-kicker{font-size:12px;font-weight:900;letter-spacing:.12em;fill:#7568d6!important}.dt-label{font-size:11px;font-weight:850;letter-spacing:.08em;fill:#67657c!important}.dt-caption{font-size:12px;font-weight:650;fill:#5e5c70!important}.dt-mini{font-size:10px;font-weight:700;fill:#747187!important}.dt-big{font-size:43px;font-weight:950;fill:#303653!important}.dt-big-small{font-size:26px}.dt-date{font-size:22px;font-weight:900;fill:#303653!important}.dt-date-small{font-size:14px}.dt-card-label{font-size:10px;font-weight:900;letter-spacing:.09em;fill:#66637d!important}.dt-card-value{font-size:18px;font-weight:950;fill:#303653!important}.dt-note{font-size:12px;font-weight:800;fill:#69677a!important}.dt-rule{stroke:#ddd9ee;stroke-width:1}.dt-card{stroke-width:1}.dt-card-blue{fill:#eff7ff;stroke:#c8e4fb}.dt-card-pink{fill:#fff0f5;stroke:#f8cede}.dt-soft-panel{fill:#f4f1ff;stroke:#ded8f6;stroke-width:1}
.dt-orbit-base{fill:none;stroke:#ece9f8;stroke-width:20}.dt-orbit-fill,.dt-birthday-arc{fill:none;stroke:var(--dt-lavender);stroke-width:20;stroke-linecap:round;transform:rotate(-90deg);transform-origin:184px 153px;animation:dt-ring .85s cubic-bezier(.22,.82,.2,1) both}.dt-birthday-arc{stroke:var(--dt-pink);transform-origin:184px 150px}.dt-marker{fill:#fff;stroke:var(--dt-lavender);stroke-width:4;filter:drop-shadow(0 3px 5px rgba(89,75,180,.2));animation:dt-pop .45s .5s cubic-bezier(.2,.9,.2,1.2) both}.dt-birthday-star{fill:var(--dt-yellow);stroke:#d9bd57;stroke-width:2;transform-origin:184px 84px;animation:dt-pop .5s .25s cubic-bezier(.2,.9,.2,1.2) both}
.dt-timeline,.dt-deadline-track{fill:none;stroke:#ded9ef;stroke-width:7;stroke-linecap:round}.dt-day-cell{fill:#dceefe;stroke:#bcdcf7;stroke-width:1;transform-box:fill-box;transform-origin:center bottom;animation:dt-rise .38s var(--dt-delay) ease both}.dt-day-cell:nth-of-type(3n){fill:#eeeaff}.dt-day-cell-open{fill:#fff!important;stroke:#f2a8c0;stroke-width:3;stroke-dasharray:5 4}.dt-result-pill{fill:#fff0f5;stroke:#f5bfd1}.dt-included{fill:var(--dt-lavender)}.dt-excluded{fill:#fff;stroke:#ee91af;stroke-width:3}
.dt-ledger-track{fill:#f2f0fa}.dt-ledger-work{fill:var(--dt-blue);animation:dt-grow .65s ease both;transform-origin:left}.dt-ledger-weekend{fill:var(--dt-lavender);opacity:.68;animation:dt-grow .65s .1s ease both;transform-origin:left}.dt-ledger-holiday{fill:var(--dt-pink);animation:dt-grow .65s .2s ease both;transform-origin:left}.dt-dot-work{fill:var(--dt-blue)}.dt-dot-weekend{fill:var(--dt-lavender)}.dt-dot-holiday{fill:var(--dt-pink)}
.dt-clock-face{fill:#fff;stroke:#dcd7f3;stroke-width:7;filter:drop-shadow(0 7px 10px rgba(74,62,130,.09))}.dt-clock-hand,.dt-hour-hand,.dt-minute-hand{stroke:#59617e;stroke-width:5;stroke-linecap:round;transform-origin:center;animation:dt-hand .6s cubic-bezier(.2,.82,.2,1) both}.dt-minute-hand{stroke-width:3;stroke:#8b7cf6}.dt-op{font-size:32px;font-weight:900;fill:#8b7cf6!important}.dt-arrow,.dt-zone-arc,.dt-zone-arrow{fill:none;stroke:#b9b1eb;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:7 7;animation:dt-dash 1s ease both}.dt-result-card{fill:#fff0f5;stroke:#f4c1d2;stroke-width:2}.dt-result-time{font-size:23px;font-weight:950;fill:#303653!important}
.dt-duration-card rect{fill:#eff7ff;stroke:#c9e3f9;stroke-width:1.5}.dt-duration-card:nth-of-type(2) rect{fill:#f3f0ff;stroke:#d9d1fa}.dt-duration-card.is-result rect{fill:#fff0f5;stroke:#f2bed0;stroke-width:2}.dt-duration-value{font-size:17px;font-weight:950;fill:#303653!important}.dt-equation-op{font-size:28px;font-weight:950;fill:#7568d6!important}.dt-bar-label{font-size:11px;font-weight:800;fill:#5e5c70!important}.dt-bar-value{font-size:11px;font-weight:900;fill:#3d4057!important}.dt-duration-track{fill:#ece9f6}.dt-duration-bar{transform-box:fill-box;transform-origin:left center;animation:dt-grow .65s ease both}.dt-duration-a{fill:var(--dt-blue)}.dt-duration-b{fill:var(--dt-lavender)}.dt-duration-result{fill:var(--dt-pink)}
.dt-zone-card rect{stroke-width:1.5}.dt-zone-source rect{fill:#eff7ff;stroke:#c7e2f8}.dt-zone-target rect{fill:#fff0f5;stroke:#f2c2d2}.dt-zone-place{font-size:16px;font-weight:900;fill:#3c405b!important}.dt-zone-time{font-size:34px;font-weight:950;fill:#303653!important}.dt-zone-connector{fill:none;stroke:#b9b1eb;stroke-width:5;stroke-linecap:round}.dt-zone-arrow{stroke-dasharray:none;animation:dt-slide .45s .18s ease both}
.dt-responsive-kicker{margin:0 0 12px;font-size:.68rem;font-weight:900;letter-spacing:.12em;color:#7568d6}.dt-time-explanation,.dt-zone-explanation{padding:18px 12px 8px}.dt-time-equation{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1.15fr);gap:8px;align-items:center}.dt-time-box{display:grid;gap:7px;min-width:0;padding:16px 12px;border:1px solid color-mix(in srgb,#c9e3f9 var(--lightmix),var(--card));border-radius:16px;background:color-mix(in srgb,#eff7ff var(--lightmix),var(--card));text-align:center}.dt-time-box:nth-of-type(2){border-color:color-mix(in srgb,#d9d1fa var(--lightmix),var(--card));background:color-mix(in srgb,#f3f0ff var(--lightmix),var(--card))}.dt-time-box.is-result{border:2px solid #f2bed0;background:color-mix(in srgb,#fff0f5 var(--lightmix),var(--card))}.dt-time-box span{font-size:.61rem;font-weight:900;letter-spacing:.08em;color:#6b687b}.dt-time-box strong{font:900 clamp(.88rem,2.1vw,1.16rem)/1.25 var(--font-disp);color:#303653;overflow-wrap:anywhere}.dt-time-symbol{font:900 1.55rem/1 var(--font-disp);color:#7568d6;text-align:center}.dt-time-bars{display:grid;gap:10px;margin-top:18px}.dt-time-bar{display:grid;grid-template-columns:92px minmax(90px,1fr) 64px;gap:10px;align-items:center}.dt-time-bar>span,.dt-time-bar>strong{font-size:.7rem;color:#5e5c70}.dt-time-bar>strong{text-align:right;color:#3d4057}.dt-time-bar>div{height:14px;border-radius:99px;background:color-mix(in srgb,#ece9f6 var(--lightmix),var(--card));overflow:hidden}.dt-time-bar i{display:block;height:100%;border-radius:inherit;transform-origin:left;animation:dt-grow .65s ease both}.dt-time-bar .dt-duration-a{background:var(--dt-blue)}.dt-time-bar .dt-duration-b{background:var(--dt-lavender)}.dt-time-bar .dt-duration-result{background:var(--dt-pink)}
.dt-zone-html-grid{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);gap:12px;align-items:center}.dt-zone-html-card{display:grid;gap:6px;min-width:0;padding:17px;border:1px solid color-mix(in srgb,#c7e2f8 var(--lightmix),var(--card));border-radius:18px;background:color-mix(in srgb,#eff7ff var(--lightmix),var(--card))}.dt-zone-html-card.is-target{border-color:#f2c2d2;background:color-mix(in srgb,#fff0f5 var(--lightmix),var(--card))}.dt-zone-html-card span{font-size:.61rem;font-weight:900;letter-spacing:.09em;color:#6b687b}.dt-zone-html-card strong{font-size:.9rem;color:#3c405b;overflow-wrap:anywhere}.dt-zone-html-card b{font:950 1.8rem/1.05 var(--font-disp);color:#303653}.dt-zone-html-card small{font-size:.7rem;color:#747187}.dt-zone-html-arrow{display:grid;place-items:center;gap:4px;color:#7568d6}.dt-zone-html-arrow span{font-size:.55rem;font-weight:900;letter-spacing:.07em}.dt-zone-html-arrow b{font-size:1.7rem}.dt-zone-html-note{margin:14px auto 0;max-width:480px;padding:10px 12px;border:1px solid color-mix(in srgb,#ded8f6 var(--lightmix),var(--card));border-radius:12px;background:color-mix(in srgb,#f4f1ff var(--lightmix),var(--card));text-align:center;font-size:.72rem;color:#5e5c70}
@media(max-width:560px){.dt-time-explanation,.dt-zone-explanation{padding:13px 2px 5px}.dt-time-equation{grid-template-columns:1fr}.dt-time-symbol{font-size:1.15rem}.dt-time-box{padding:12px 10px}.dt-time-bar{grid-template-columns:76px minmax(60px,1fr) 57px;gap:7px}.dt-zone-html-grid{grid-template-columns:1fr}.dt-zone-html-arrow{grid-template-columns:auto auto;justify-content:center}.dt-zone-html-card{padding:14px}.dt-zone-html-card b{font-size:1.55rem}}
.dt-protection-base{fill:#f0edf9}.dt-protection-before{fill:var(--dt-blue);animation:dt-grow .65s ease both;transform-origin:left}.dt-protection-after{fill:var(--dt-pink);animation:dt-grow .65s .12s ease both;transform-origin:left}.dt-baby-marker{fill:var(--dt-yellow);stroke:#d4b94d;stroke-width:3;animation:dt-pop .45s .5s cubic-bezier(.2,.9,.2,1.2) both}.dt-tick{stroke:#8b7cf6;stroke-width:2;stroke-dasharray:4 4}
.dt-weekday circle{fill:#f1effa;stroke:#dad5f2;stroke-width:2;transition:.2s}.dt-weekday text{font-size:11px;font-weight:900;fill:#77738a!important}.dt-weekday.is-active circle{fill:var(--dt-pink);stroke:#e78da9;animation:dt-pop .48s .18s cubic-bezier(.2,.9,.2,1.2) both}.dt-weekday.is-active text{fill:#3e3145!important}.dt-wheel-center{fill:#fff;stroke:#e1ddf2;stroke-width:2}.dt-wheel-day{font-size:18px;font-weight:950;fill:#303653!important}.dt-clock-a .dt-marker{stroke:var(--dt-blue)}.dt-clock-b .dt-marker{stroke:var(--dt-pink)}
.dt-deadline-fill{fill:none;stroke:var(--dt-blue);stroke-width:9;stroke-linecap:round;animation:dt-line .7s ease both}.dt-deadline-shift{fill:none;stroke:var(--dt-pink);stroke-width:9;stroke-linecap:round;stroke-dasharray:8 5;animation:dt-line .55s .35s ease both}.dt-deadline-node circle{fill:#fff;stroke:var(--dt-blue);stroke-width:5}.dt-deadline-raw circle{stroke:var(--dt-lavender)}.dt-deadline-due circle{fill:var(--dt-pink);stroke:#fff;filter:drop-shadow(0 4px 6px rgba(194,93,126,.25))}
.dt-month rect{fill:#f3f1fa;stroke:#dfdbef}.dt-month text{font-size:10px;font-weight:900;fill:#6d6980!important}.dt-month circle{fill:var(--dt-blue)}.dt-month.has-chance rect{fill:#fff0f5;stroke:#f3c4d3}.dt-month.has-chance circle{fill:var(--dt-pink);animation:dt-pop .4s ease both}.dt-month-count{font-size:9px!important;fill:#3d3a50!important}.dt-bridge-row rect{fill:#f6f3ff;stroke:#ded8f4;animation:dt-slide .45s var(--dt-delay) ease both}.dt-bridge-row:nth-of-type(2) rect{fill:#fff2f6;stroke:#f3cbd8}
@keyframes dt-ring{from{stroke-dashoffset:520}}@keyframes dt-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes dt-rise{from{opacity:0;transform:scaleY(.15)}to{opacity:1;transform:scaleY(1)}}@keyframes dt-grow{from{opacity:.4;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes dt-hand{from{opacity:0;transform:rotate(-70deg)}to{opacity:1;transform:rotate(0)}}@keyframes dt-dash{from{stroke-dashoffset:70;opacity:.25}to{stroke-dashoffset:0;opacity:1}}@keyframes dt-line{from{stroke-dasharray:0 800}to{stroke-dasharray:800 0}}@keyframes dt-slide{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
.precision-svg{display:block;width:100%;height:auto;max-height:380px;margin:3px auto 0;overflow:visible}
.precision-svg text{font-family:var(--font-body);fill:#102a3b}
.precision-kicker{font-size:17px;font-weight:850;letter-spacing:.035em}
.precision-subline{font-size:12px;font-weight:650;fill:#65736e!important}
.precision-value-label{font-size:13px;font-weight:850;font-variant-numeric:tabular-nums}
.precision-axis-label{font-size:10px;font-weight:800;letter-spacing:.06em;fill:#62716b!important;font-variant-numeric:tabular-nums}
.precision-month-label{font-size:9px;font-weight:800;fill:#708079!important}
.precision-scale-note{font-size:10px;font-weight:850;letter-spacing:.11em;fill:#a16e23!important}
.precision-chart-axis,.precision-tick,.precision-guide,.precision-dimension{fill:none;stroke:#9eb0a9;stroke-width:1.5}
.precision-guide{stroke-dasharray:4 5}.precision-dimension{stroke:#58716a;stroke-dasharray:5 4}

/* Braking: one physical journey, no loop. */
.precision-road-dash{fill:none;stroke:#eaf0ee;stroke-width:3;stroke-dasharray:24 18;opacity:.75}
.precision-measure{fill:none;stroke-width:8;stroke-linecap:round}.precision-measure--reaction{stroke:#2a8b80}.precision-measure--brake{stroke:#d39a42}
.precision-car{fill:#e4b34d;transform:translateX(var(--car-end));animation:precision-drive 1.12s cubic-bezier(.18,.72,.2,1) both}
.precision-car circle{fill:#102a3b;stroke:#dce7e4;stroke-width:4}.precision-car-window{fill:#d9e8ec}
.precision-brake-pedal rect{fill:#f8faf9;stroke:#d39a42;stroke-width:3}.precision-brake-pedal path{stroke:#d39a42;stroke-width:3}
@keyframes precision-drive{0%{transform:translateX(var(--car-start))}100%{transform:translateX(var(--car-end))}}

/* Tyres: old and new share an exact drawing scale. */
.precision-tyre-legend text,.precision-stat-row text{font-size:10px;font-weight:850;letter-spacing:.055em;fill:#62716b!important}
.precision-old-stroke{stroke:#73857f;stroke-width:4;stroke-dasharray:7 5}.precision-new-stroke{stroke:var(--teal);stroke-width:5}
.precision-tyre{fill:none;stroke-width:15}.precision-tyre--old{stroke:#7f8d88;stroke-dasharray:8 7;opacity:.7}.precision-tyre--new{stroke:#15384d}
.precision-rim{fill:none;stroke-width:3}.precision-rim--old{stroke:#9daaa5;stroke-dasharray:5 5}.precision-rim--new{stroke:#d39a42}
.precision-tyre-new{transform-origin:260px 177px;transform:scale(1);animation:precision-tyre-fit .78s cubic-bezier(.2,.82,.2,1) both}
.precision-speedometer>path:first-child{fill:none;stroke:#15384d;stroke-width:11;stroke-linecap:round}.precision-speedometer circle{fill:#d39a42}.precision-needle{stroke:#d39a42;stroke-width:5;stroke-linecap:round}
@keyframes precision-tyre-fit{from{transform:scale(var(--tyre-start));opacity:.35}to{transform:scale(1);opacity:1}}

/* Credit: actual month-by-month amortisation. */
.precision-credit-line{fill:none;stroke:var(--teal);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1100;stroke-dashoffset:1100;animation:precision-line-draw 1s cubic-bezier(.3,.75,.25,1) forwards}
.precision-data-dot{fill:#d39a42;stroke:#fff;stroke-width:3}
.precision-payment-track{fill:#e5ebe8}.precision-payment-principal{fill:var(--teal);transform-box:fill-box;transform-origin:left center;animation:precision-bar-grow .72s .3s cubic-bezier(.2,.8,.2,1) both}

/* Energy: cumulative months, explicitly assuming equal distribution. */
.precision-energy-month{transform-box:fill-box;transform-origin:center bottom;animation:precision-month-rise .62s var(--month-delay) cubic-bezier(.2,.8,.2,1) both}
.precision-energy-work{fill:#15384d}.precision-energy-base{fill:#d39a42}.precision-energy-legend text{font-size:10px;font-weight:800;fill:#61716b!important}

/* Beam: exact Euler-Bernoulli curve with disclosed display scale. */
.precision-beam-reference{fill:none;stroke:#99aaa4;stroke-width:2;stroke-dasharray:6 6}
.precision-beam-curve{fill:none;stroke:#15384d;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;animation:precision-line-draw .9s ease forwards}
.precision-support{fill:#e1eae7;stroke:#536a63;stroke-width:3;stroke-linejoin:round}.precision-load-arrow{stroke:#d39a42;stroke-width:5;stroke-linecap:round;animation:precision-load-in .55s ease both}.precision-load-tip{fill:#d39a42}
.precision-deflection-line{stroke:var(--teal);stroke-width:2;stroke-dasharray:4 4}

/* pH: the marker lands once at the calculated logarithmic position. */
.precision-ph-equation rect,.precision-ph-class{fill:#fff;stroke:#cbd9d5;stroke-width:1.5}.precision-ph-equation path{fill:none;stroke:#d39a42;stroke-width:3;stroke-linecap:round}.precision-ph-equation path:last-of-type{fill:#d39a42}
.precision-ph-marker{transform:translateX(var(--ph-x));animation:precision-ph-land .72s cubic-bezier(.2,.85,.2,1) both}.precision-ph-marker path{stroke:#102a3b;stroke-width:3}.precision-ph-marker circle{fill:#fff;stroke:#102a3b;stroke-width:4;filter:drop-shadow(0 5px 5px rgba(16,42,59,.2))}

/* Ranking-gap batch: every scene is calculated from the submitted values. */
.precision-stair-floor{fill:#dfe8e5}.precision-stair-body{fill:#d5e9e3;stroke:none}.precision-stair-line{fill:none;stroke:#15384d;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1700;stroke-dashoffset:1700;animation:precision-line-draw .9s ease forwards}
.precision-stair-status rect{fill:#fff;stroke:#cbd9d5;stroke-width:1.5}.precision-stair-status circle{fill:var(--teal)}.precision-stair-status text{font-size:10px;font-weight:900;letter-spacing:.065em}.precision-stair-status.is-warn circle{fill:#d39a42}.precision-stair-status.is-warn text{fill:#8a5a18}

.precision-deadline-track{fill:none;stroke:#cad8d3;stroke-width:12;stroke-linecap:round}.precision-deadline-tick{stroke:#fff;stroke-width:2}.precision-deadline-shift{fill:none;stroke:#d39a42;stroke-width:12;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;animation:precision-line-draw .65s ease forwards}
.precision-deadline-node circle{fill:#fff;stroke:var(--teal);stroke-width:4}.precision-deadline-node path{fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.precision-deadline-node text{font-size:10px;font-weight:850;letter-spacing:.04em}.precision-deadline-node--raw circle{stroke:#d39a42;stroke-width:3}.precision-deadline-node--raw text{fill:#8a5a18}.precision-deadline-node--due circle{fill:var(--teal)}.precision-deadline-node--due path{stroke:#fff}.precision-deadline-summary{fill:#edf4f2;stroke:#d2e0dc;stroke-width:1}

.precision-segment-circle{fill:#f8fbfa;stroke:#9fb2ac;stroke-width:2}.precision-segment-fill{fill:#d7eee8;stroke:var(--teal);stroke-width:3;stroke-linejoin:round;transform-origin:250px 168px;animation:precision-segment-open .72s cubic-bezier(.2,.8,.2,1) both}.precision-segment-chord{stroke:#d39a42;stroke-width:5;stroke-linecap:round}.precision-segment-radius{stroke:#91a59e;stroke-width:2;stroke-dasharray:5 5}.precision-segment-center{fill:#15384d}

.precision-pipe-body{fill:#e3eeeb;stroke:#829a92;stroke-width:2}.precision-pipe-edge{fill:none;stroke:#7e958e;stroke-width:2}.precision-pipe-back{fill:#c3d6d0;stroke:#69827a;stroke-width:2}.precision-pipe-front{fill:#edf4f2;stroke:#15384d;stroke-width:4}.precision-pipe-opening{fill:#15384d;stroke:#d8e7e3;stroke-width:4}.precision-pipe-meter{fill:#e4ece9;stroke:#9dafaa;stroke-width:2}.precision-pipe-fill{fill:var(--teal);transform-box:fill-box;transform-origin:center bottom;animation:precision-pipe-rise .72s cubic-bezier(.2,.8,.2,1) both}.precision-pipe-meter-tick{stroke:#657a73;stroke-width:2}

.precision-dew-track{fill:#d8e8e3}.precision-dew-risk{fill:#e8bc68;opacity:.72}.precision-dew-line{stroke:#9a6820;stroke-width:2;stroke-dasharray:5 4}.precision-dew-marker{transform:translateX(var(--dew-x));animation:precision-dew-land .7s cubic-bezier(.2,.82,.2,1) both}.precision-dew-marker path{fill:none;stroke-width:3}.precision-dew-marker text{font-size:10px;font-weight:850;letter-spacing:.035em}.precision-dew-marker--air path{stroke:#15384d}.precision-dew-marker--air circle{fill:#15384d;stroke:#fff;stroke-width:3}.precision-dew-marker--surface path{stroke:var(--teal)}.precision-dew-marker--surface rect{fill:var(--teal);stroke:#fff;stroke-width:3}.precision-dew-marker--point path{stroke:#a16e23}.precision-dew-marker--point path:last-of-type{fill:#d39a42;stroke:none}.precision-dew-drop{fill:#4b99b8;filter:drop-shadow(0 5px 6px rgba(34,92,116,.22));animation:precision-dew-drop .9s ease both}

.precision-triangle-shape{fill:#d8ebe5;stroke:#15384d;stroke-width:5;stroke-linejoin:round;stroke-dasharray:1600;stroke-dashoffset:1600;animation:precision-line-draw .85s ease forwards}.precision-triangle-height{stroke:var(--teal);stroke-width:2;stroke-dasharray:6 5}.precision-triangle-right{fill:none;stroke:var(--teal);stroke-width:2}.precision-triangle-vertex circle{fill:#fff;stroke:#d39a42;stroke-width:3}.precision-triangle-vertex text{font-size:14px;font-weight:900}.precision-scene--triangle .precision-value-label{paint-order:stroke;stroke:#f7fbfa;stroke-width:5;stroke-linejoin:round}

/* Ranking batch 2: result-driven diagrams, all proportional to submitted data. */
.precision-scene--size .precision-kicker,.precision-scene--route .precision-kicker,.precision-scene--capacity .precision-kicker,.precision-scene--railing .precision-kicker,.precision-scene--roof .precision-kicker{font-size:11px}
.rank2-grid{fill:none;stroke:#dce6e2;stroke-width:1}.rank2-baseline{fill:none;stroke:#71857e;stroke-width:2}.rank2-size-a,.rank2-size-b{transform-box:fill-box;transform-origin:center bottom;animation:rank2-rise .68s cubic-bezier(.2,.82,.2,1) both}.rank2-size-a{fill:var(--teal)}.rank2-size-b{fill:#d39a42;animation-delay:.08s}.rank2-compare-arrow{fill:none;stroke:#15384d;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 5}

.rank2-route-track{fill:none;stroke:#d7e2de;stroke-width:12;stroke-linecap:round}.rank2-route-drive{fill:var(--teal)}.rank2-route-break{fill:#e4b45c}.rank2-route-rest{fill:#8ea9b7}.rank2-route-node{fill:#fff;stroke:var(--teal);stroke-width:4}.rank2-route-node-end{stroke:#d39a42}.rank2-route-text{fill:#fff!important;font-size:10px;font-weight:900;letter-spacing:.04em}.rank2-route-text-dark{fill:#513c19!important}.precision-scene--route rect{transform-box:fill-box;transform-origin:left center;animation:rank2-grow .65s cubic-bezier(.2,.82,.2,1) both}

.rank2-hour-tile{fill:#d6e9e3;stroke:var(--teal);stroke-width:1.5;animation:rank2-tile-in .38s var(--tile-delay) ease both}.rank2-pay-track{fill:#e3ebe8}.rank2-pay-base{fill:var(--teal);transform-box:fill-box;transform-origin:left center;animation:rank2-grow .65s .15s ease both}.rank2-pay-surcharge{fill:#d39a42;animation:rank2-fade .45s .55s ease both}.rank2-big-number{font-size:24px;font-weight:900;fill:#15384d!important;font-variant-numeric:tabular-nums}

.rank2-capacity-used,.rank2-capacity-free{transform-box:fill-box;transform-origin:center bottom;animation:rank2-rise .42s var(--cell-delay) ease both}.rank2-capacity-used{fill:var(--teal)}.rank2-capacity-free{fill:#dfe8e5;stroke:#c6d5d0;stroke-width:1}.rank2-capacity-pointer{stroke:#15384d;stroke-width:2.5;stroke-dasharray:5 4}.rank2-capacity-dot{fill:#d39a42;stroke:#fff;stroke-width:3}.rank2-over-track{fill:#ede5d7}.rank2-over-fill{fill:#b56b4d}.precision-scene--capacity .rank2-over-fill{transform-box:fill-box;transform-origin:left center;animation:rank2-grow .6s ease both}

.rank2-rail-post{fill:#15384d}.rank2-rail-top{fill:none;stroke:#15384d;stroke-width:14;stroke-linecap:round}.rank2-rail-bar{fill:var(--teal);transform-box:fill-box;transform-origin:center top;animation:rank2-rail-drop .5s var(--bar-delay) cubic-bezier(.2,.82,.2,1) both}.rank2-measure{fill:none;stroke:#d39a42;stroke-width:2;stroke-linecap:round}

.rank2-roll-material{fill:#d7ebe5;stroke:var(--teal);stroke-width:4;animation:rank2-roll-in .7s cubic-bezier(.2,.82,.2,1) both;transform-origin:224px 164px}.rank2-roll-average{fill:none;stroke:#d39a42;stroke-width:2;stroke-dasharray:6 5}.rank2-roll-core{fill:#f7faf9;stroke:#15384d;stroke-width:5}.rank2-roll-hub{fill:#d39a42}.rank2-roll-radius{fill:none;stroke:#15384d;stroke-width:2;stroke-dasharray:5 4}

.rank2-ramp-ground{fill:none;stroke:#83958f;stroke-width:4;stroke-linecap:round}.rank2-ramp-shape{fill:#d7ebe5;stroke:var(--teal);stroke-width:4;stroke-linejoin:round;transform-origin:72px 246px;animation:rank2-ramp-open .7s cubic-bezier(.2,.82,.2,1) both}.rank2-ramp-target{fill:none;stroke:#d39a42;stroke-width:4;stroke-dasharray:9 7;stroke-linecap:round;stroke-dashoffset:200;animation:precision-line-draw .7s .25s ease forwards}

.rank2-term-positive,.rank2-term-negative{transform-box:fill-box;transform-origin:center bottom;animation:rank2-rise .58s var(--term-delay) cubic-bezier(.2,.82,.2,1) both}.rank2-term-positive{fill:var(--teal)}.rank2-term-negative{fill:#c8755b}.precision-scene--binomial .precision-kicker{font-size:17px;text-transform:none}.precision-scene--binomial .rank2-big-number{font-size:22px}

.rank2-attic-floor{fill:none;stroke:#15384d;stroke-width:5;stroke-linecap:round}.rank2-attic-roof{fill:none;stroke:#15384d;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1300;stroke-dashoffset:1300;animation:precision-line-draw .75s ease forwards}.rank2-attic-level{fill:none;stroke:#82958f;stroke-width:1.5;stroke-dasharray:6 5}.rank2-attic-zero{fill:#cfd7d4}.rank2-attic-half{fill:#e4b45c}.rank2-attic-full{fill:var(--teal)}.precision-scene--attic rect{animation:rank2-fade .55s .25s ease both}

.rank2-roof-plan{fill:#dbece7;stroke:#15384d;stroke-width:4;animation:rank2-fade .5s ease both}.rank2-roof-ridge{fill:none;stroke:#d39a42;stroke-width:5;stroke-linecap:round}.rank2-roof-flow{fill:none;stroke:var(--teal);stroke-width:2;stroke-dasharray:7 5}.rank2-roof-arrow{fill:var(--teal)}.rank2-roof-hip{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linejoin:round}.precision-scene--roof .precision-subline{font-size:13px}

/* Priority-demand batch: each graphic is driven by the submitted result. */
.priority-bra-outline{fill:none;stroke:#b9c9c4;stroke-width:4;stroke-linecap:round}.priority-bra-loop{fill:none;stroke-width:8;stroke-dasharray:900;stroke-dashoffset:900;animation:precision-line-draw .8s ease forwards}.priority-bra-loop--bust{stroke:#d39a42}.priority-bra-loop--under{stroke:var(--teal);animation-delay:.12s}.priority-bra-measure{fill:none;stroke:#15384d;stroke-width:2;stroke-dasharray:5 4}.priority-main-size{font-size:32px;font-weight:950;fill:#15384d!important}
.priority-insurance-axis{fill:none;stroke:#d5dfdc;stroke-width:12;stroke-linecap:round}.priority-insurance-range{fill:none;stroke:#d39a42;stroke-width:12;stroke-linecap:round;stroke-dasharray:700;stroke-dashoffset:700;animation:precision-line-draw .7s ease forwards}.priority-insurance-cap{stroke:#8a5a18;stroke-width:3}.priority-insurance-basis{fill:#fff;stroke:#15384d;stroke-width:4}.priority-insurance-estimate{fill:var(--teal);stroke:#fff;stroke-width:4;filter:drop-shadow(0 4px 5px rgba(16,42,59,.18))}.priority-factor{animation:priority-factor-in .44s var(--factor-delay) ease both}.priority-factor rect{stroke-width:1.5}.priority-factor text{font-size:9px;font-weight:850}.priority-factor--up rect{fill:#f3e7cf;stroke:#d39a42}.priority-factor--down rect{fill:#d9ece6;stroke:var(--teal)}.priority-factor--flat rect{fill:#e8eeec;stroke:#a5b4af}
.priority-taxi-track{fill:#e4ebe9}.priority-taxi-base,.priority-taxi-distance,.priority-taxi-wait,.priority-taxi-extra{transform-box:fill-box;transform-origin:left center;animation:priority-taxi-grow .56s var(--taxi-delay) cubic-bezier(.2,.82,.2,1) both}.priority-taxi-base{fill:#15384d}.priority-taxi-distance{fill:var(--teal)}.priority-taxi-wait{fill:#d39a42}.priority-taxi-extra{fill:#8fa7b1}
.priority-copay-track{fill:#e0e9e6}.priority-copay-paid{fill:var(--teal);transform-box:fill-box;transform-origin:left center;animation:rank2-grow .65s ease both}.priority-copay-limit{stroke:#d39a42;stroke-width:4;stroke-dasharray:7 5}.priority-copay-marker{fill:#15384d;stroke:#fff;stroke-width:4}.priority-copay-status{font-size:20px;font-weight:950;fill:var(--teal)!important}
.priority-refinance-grid{fill:none;stroke:#dce6e2;stroke-width:1}.priority-refinance-axis{fill:none;stroke:#71857e;stroke-width:2}.priority-refinance-line{fill:none;stroke:var(--teal);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1400;stroke-dashoffset:1400;animation:precision-line-draw 1s ease forwards}.priority-refinance-dot{fill:#d39a42;stroke:#fff;stroke-width:3}
.priority-calorie-grid{fill:none;stroke:#dce6e2;stroke-width:1}.priority-calorie-area{fill:#d9ece6;opacity:.72}.priority-calorie-line{fill:none;stroke:var(--teal);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;animation:precision-line-draw .85s ease forwards}.priority-calorie-dot{fill:#d39a42;stroke:#fff;stroke-width:3;animation:priority-calorie-dot .35s var(--calorie-delay) ease both}.priority-calorie-track{fill:#e2e9e7}.priority-calorie-active{fill:var(--teal);transform-box:fill-box;transform-origin:left center;animation:rank2-grow .7s ease both}.priority-calorie-active-label,.priority-calorie-rest-label{font-size:10px;font-weight:900;letter-spacing:.05em}.priority-calorie-active-label{fill:#fff!important}.priority-calorie-rest-label{fill:#536b64!important}
.priority-implant-track{fill:#e2e9e7}.priority-implant-segment{transform-box:fill-box;transform-origin:left center;animation:priority-implant-grow .62s var(--implant-delay) cubic-bezier(.2,.82,.2,1) both}.priority-implant-op{fill:#15384d}.priority-implant-prosthetic{fill:var(--teal)}.priority-implant-diagnostics{fill:#d39a42}.priority-implant-bone{fill:#86a9a0}.priority-implant-other{fill:#b6c6c1}.priority-implant-legend{font-size:8px;font-weight:900;letter-spacing:.035em;fill:#15384d!important}.priority-implant-coverage{fill:#d39a42;transform-box:fill-box;transform-origin:left center;animation:priority-implant-grow .65s ease both}.priority-implant-own{fill:var(--teal);transform-box:fill-box;transform-origin:right center;animation:priority-implant-grow .65s .08s ease both}.priority-implant-bar-label{font-size:10px;font-weight:900;letter-spacing:.04em;fill:#15384d!important}.priority-implant-bar-label--dark{fill:#fff!important}
.priority-u-track{fill:#e2e9e7}.priority-u-layer{transform-box:fill-box;transform-origin:left center;animation:priority-u-grow .66s var(--u-delay) cubic-bezier(.2,.82,.2,1) both}.priority-u-layer-1{fill:#15384d}.priority-u-layer-2{fill:var(--teal)}.priority-u-layer-3{fill:#d39a42}.priority-u-layer-4{fill:#8fa7b1}.priority-u-layer-label{font-size:9px;font-weight:900;letter-spacing:.035em;fill:#fff!important}.priority-u-legend{font-size:8px;font-weight:900;letter-spacing:.035em;fill:#15384d!important}.priority-u-axis{fill:none;stroke:#d5dfdc;stroke-width:12;stroke-linecap:round}.priority-u-target{fill:none;stroke:#d39a42;stroke-width:4;stroke-dasharray:6 5}.priority-u-marker{stroke:#fff;stroke-width:4;filter:drop-shadow(0 3px 4px rgba(16,42,59,.18));animation:priority-u-marker-in .48s .35s ease both}.priority-u-marker--ok{fill:var(--teal)}.priority-u-marker--high{fill:#b64b45}.priority-u-status{font-size:10px;font-weight:950;letter-spacing:.035em;fill:#15384d!important}
.priority-build-track,.priority-lease-track,.priority-care-track{fill:#e2e9e7}.priority-build-segment,.priority-lease-segment,.priority-care-segment{transform-box:fill-box;transform-origin:left center;animation:rank2-grow .65s var(--build-delay,0s) cubic-bezier(.2,.82,.2,1) both}.priority-build-plan{fill:#15384d}.priority-build-authority{fill:var(--teal)}.priority-build-finance{fill:#d39a42}.priority-build-connections{fill:#6e99a7}.priority-build-outside{fill:#91aa88}.priority-build-reserve{fill:#b4c4bf}
.priority-life-track{fill:#e2e9e7}.priority-life-lived{fill:#15384d;transform-box:fill-box;transform-origin:left center;animation:rank2-grow .65s ease both}.priority-life-remaining{fill:#d39a42;transform-box:fill-box;transform-origin:left center;animation:rank2-grow .65s .16s ease both}.priority-life-label{font-size:11px;font-weight:950;letter-spacing:.04em;fill:#fff!important}.priority-life-label--dark{fill:#15384d!important}.priority-life-tick{fill:none;stroke:#6f847e;stroke-width:2}
.priority-care-mobility{fill:#6e99a7}.priority-care-mind{fill:#8d78a6}.priority-care-self{fill:var(--teal)}.priority-care-therapy{fill:#d39a42}.priority-care-daily{fill:#91aa88}.priority-care-axis{fill:none;stroke:#d5dfdc;stroke-width:12;stroke-linecap:round}.priority-care-threshold{fill:none;stroke:#6f847e;stroke-width:1.5;stroke-dasharray:4 4}.priority-care-marker{fill:#15384d;stroke:#fff;stroke-width:4}.priority-care-status{font-size:11px;font-weight:950;letter-spacing:.04em;fill:#15384d!important}
.priority-wallpaper-roll{fill:#e5efe9;stroke:#15384d;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.priority-wallpaper-core{fill:#f8f5ec;stroke:#d39a42;stroke-width:6}.priority-wallpaper-strip{fill:#cfe7dd;stroke:var(--teal);stroke-width:2;transform-box:fill-box;transform-origin:top center;animation:priority-wallpaper-drop .5s var(--wall-delay) ease both}
.priority-lease-rates{fill:#15384d}.priority-lease-special{fill:var(--teal)}.priority-lease-transfer{fill:#d39a42}.priority-lease-other{fill:#9fb1ab}

@keyframes rank2-rise{from{transform:scaleY(.04);opacity:.2}to{transform:scaleY(1);opacity:1}}
@keyframes rank2-grow{from{transform:scaleX(.02);opacity:.3}to{transform:scaleX(1);opacity:1}}
@keyframes rank2-fade{from{opacity:0}to{opacity:1}}
@keyframes rank2-tile-in{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}
@keyframes rank2-rail-drop{from{transform:scaleY(.05);opacity:.2}to{transform:scaleY(1);opacity:1}}
@keyframes rank2-roll-in{from{transform:scale(.6);opacity:.15}to{transform:scale(1);opacity:1}}
@keyframes rank2-ramp-open{from{transform:scaleX(.08);opacity:.25}to{transform:scaleX(1);opacity:1}}
@keyframes priority-factor-in{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes priority-taxi-grow{from{transform:scaleX(.02);opacity:.25}to{transform:scaleX(1);opacity:1}}
@keyframes priority-calorie-dot{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes priority-implant-grow{from{transform:scaleX(.02);opacity:.3}to{transform:scaleX(1);opacity:1}}
@keyframes priority-u-grow{from{transform:scaleX(.02);opacity:.25}to{transform:scaleX(1);opacity:1}}
@keyframes priority-u-marker-in{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}
@keyframes priority-wallpaper-drop{from{transform:scaleY(.05);opacity:.2}to{transform:scaleY(1);opacity:1}}

@keyframes precision-segment-open{from{transform:scale(.82);opacity:.2}to{transform:scale(1);opacity:1}}
@keyframes precision-pipe-rise{from{transform:scaleY(.02);opacity:.25}to{transform:scaleY(1);opacity:1}}
@keyframes precision-dew-land{from{transform:translateX(var(--dew-x)) translateY(-18px);opacity:.25}to{transform:translateX(var(--dew-x));opacity:1}}
@keyframes precision-dew-drop{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}

/* Distance: real Natural Earth geometry and submitted city coordinates. */
.distance-map-svg{max-height:430px;border-radius:14px;background:color-mix(in srgb,#dbeaf3 var(--lightmix),var(--card))}
.distance-map-ocean{fill:#dbeaf3}.distance-map-context{opacity:.55;fill:#e3ece0}.distance-germany-shape{fill:#bcdcbe!important;stroke:#2f6b45!important;stroke-width:.16!important;vector-effect:non-scaling-stroke}
.distance-route-halo{fill:none;stroke:#fff;stroke-width:.72;stroke-linecap:round}.distance-route{fill:none;stroke:#d39a42;stroke-width:.28;stroke-linecap:round;stroke-dasharray:32;stroke-dashoffset:32;animation:precision-line-draw .8s ease forwards}
.distance-city-start{fill:var(--teal);stroke:#fff;stroke-width:.16}.distance-city-dest{fill:#d39a42;stroke:#fff;stroke-width:.16}.distance-traveller{fill:#15384d;stroke:#fff;stroke-width:.1}.distance-midpoint{fill:#fff;stroke:#15384d;stroke-width:.12}
.distance-city-label{font-size:1.02px!important;font-weight:850!important;fill:#15384d!important;stroke:#fff;stroke-width:.22;paint-order:stroke;letter-spacing:.01em}.distance-city-label--dest{fill:#8a5a18!important}
.distance-route-label{font-size:.9px!important;font-weight:900!important;fill:#15384d!important;stroke:#fff;stroke-width:.24;paint-order:stroke;font-variant-numeric:tabular-nums}
.distance-compass circle:first-child{fill:rgba(255,255,255,.9);stroke:#70857e;stroke-width:.1}.distance-compass circle:last-child{fill:#d39a42}.distance-compass path{stroke:#15384d;stroke-width:.2;stroke-linecap:round}.distance-compass text{font-size:.7px!important;font-weight:900!important;fill:#15384d!important}
.distance-scale path{fill:none;stroke:#15384d;stroke-width:.11}.distance-scale text{font-size:.62px!important;font-weight:800!important;fill:#536b64!important}

@keyframes precision-line-draw{to{stroke-dashoffset:0}}
@keyframes precision-bar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes precision-month-rise{from{transform:scaleY(.05);opacity:.2}to{transform:scaleY(1);opacity:1}}
@keyframes precision-load-in{from{transform:translateY(-22px);opacity:0}to{transform:none;opacity:1}}
@keyframes precision-ph-land{from{transform:translateX(var(--ph-x)) translateY(-28px);opacity:0}to{transform:translateX(var(--ph-x));opacity:1}}

@media(max-width:700px){
  .premium-form-head{align-items:flex-start;flex-direction:column;gap:6px}.premium-progress-copy{white-space:normal}
  .premium-reference-form .field{padding:7px 3px}
  .result:has(.precision-scene){padding:22px 12px}
  .precision-scene{padding:12px 8px 10px;border-radius:14px}
  .precision-scene__head{font-size:.61rem}.precision-scene figcaption{font-size:.7rem}
  .precision-svg{max-height:330px}
  .precision-kicker{font-size:21px}.precision-subline{font-size:16px}
  .precision-value-label{font-size:18px}.precision-axis-label{font-size:15px}
  .precision-month-label{font-size:13px}.precision-scale-note{font-size:15px}
  .precision-tyre-legend text,.precision-stat-row text,.precision-energy-legend text{font-size:14px}
  .precision-stair-status text,.precision-deadline-node text,.precision-dew-marker text{font-size:18px}
  .precision-scene--triangle .precision-value-label{font-size:14px}
  .premium-distance-form .field-grid{grid-template-columns:1fr}
  .premium-distance-form .distance-swap{width:100%;height:40px;margin:0;display:flex;gap:9px}.premium-distance-form .distance-swap span:first-child{transform:rotate(90deg);font-size:1.2rem}.premium-distance-form .distance-swap-copy{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-size:.78rem;font-weight:800}
}
/* Demand batch 5: result-driven timelines, comparisons and repayment curves. */
.next5-track{fill:none;stroke:#dfe7e4;stroke-width:16;stroke-linecap:round}.next5-progress{fill:none;stroke:var(--teal);stroke-width:8;stroke-linecap:round;stroke-dasharray:800;stroke-dashoffset:800;animation:precision-line-draw .85s ease forwards}.next5-dot{fill:#fff;stroke:var(--teal);stroke-width:5}.next5-dot-end{fill:var(--teal);stroke:#fff}.next5-track-fill{fill:#e5ebe9}.next5-primary{fill:var(--teal);transform-box:fill-box;transform-origin:left center;animation:rank2-grow .65s ease both}.next5-secondary{fill:#d39a42;transform-box:fill-box;transform-origin:left center;animation:rank2-grow .65s .08s ease both}.next5-positive{fill:#507e62}.next5-negative{fill:#bb604f}.next5-loan-normal,.next5-loan-special{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.next5-loan-normal{stroke:#8b9b96}.next5-loan-special{stroke:var(--teal);stroke-dasharray:1400;stroke-dashoffset:1400;animation:precision-line-draw 1s ease forwards}.next5-interest-card{fill:color-mix(in srgb,var(--teal-soft) 40%,var(--card));stroke:color-mix(in srgb,var(--teal) 30%,#dfe7e4);stroke-width:2}

/* High-demand calculator scenes: factual, result-driven and niche-coloured. */
.featured-big-copy{font-size:23px;font-weight:950;fill:var(--teal-dark)!important;font-variant-numeric:tabular-nums}.featured-track{fill:#e2eae7}.featured-value{transform-box:fill-box;transform-origin:left center;animation:featured-grow .68s var(--feature-delay,0s) cubic-bezier(.16,1,.3,1) both}.featured-value--source{fill:#8ca19a}.featured-value--gross{fill:#d39a42}.featured-value--assessed{fill:color-mix(in srgb,var(--teal) 68%,var(--card))}.featured-value--net{fill:var(--teal)}.featured-value-copy{font-size:11px;font-weight:900;fill:#fff!important;paint-order:stroke;stroke:rgba(21,56,77,.28);stroke-width:2px;stroke-linejoin:round}.featured-flow-spine{fill:none;stroke:#9cafaa;stroke-width:2;stroke-dasharray:5 5}
.featured-house{fill:color-mix(in srgb,var(--teal-soft) 70%,var(--card));stroke:var(--teal-dark);stroke-width:5;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;animation:precision-line-draw .75s ease forwards}.featured-house-door{fill:var(--teal);opacity:.88}.featured-ground{stroke:#879b94;stroke-width:4;stroke-linecap:round}.featured-step-card{fill:#fff;stroke:#cddbd7;stroke-width:2;animation:featured-card-in .48s ease both}.featured-step-card--middle{fill:color-mix(in srgb,var(--teal-soft) 34%,var(--card))}.featured-step-card--result{fill:color-mix(in srgb,var(--teal-soft) 72%,var(--card));stroke:var(--teal)}.featured-step-arrow{fill:none;stroke:#d39a42;stroke-width:3;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:80;animation:precision-line-draw .5s .2s ease forwards}.featured-step-tip{fill:#d39a42}.featured-dimension{fill:none;stroke:#d39a42;stroke-width:2;stroke-linecap:round}
.pressure-band{stroke:#fff;stroke-width:2}.pressure-band--optimal{fill:#5b9b7c}.pressure-band--normal{fill:#7eb18a}.pressure-band--high-normal{fill:#d7b85b}.pressure-band--grade1{fill:#dc984e}.pressure-band--grade2{fill:#cd7351}.pressure-band--grade3{fill:#a94e4e}.pressure-marker{transform:translateX(var(--pressure-x));animation:pressure-marker-in .65s cubic-bezier(.2,.85,.2,1) both}.pressure-marker path{stroke:var(--teal-dark);stroke-width:3}.pressure-marker circle{fill:var(--teal-dark);stroke:#fff;stroke-width:3}.pressure-result{fill:color-mix(in srgb,var(--teal-soft) 62%,var(--card));stroke:var(--teal);stroke-width:2}
.clearance-plan{fill:#fff;stroke:var(--teal-dark);stroke-width:5;stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200;animation:precision-line-draw .75s ease forwards}.clearance-zone{fill:color-mix(in srgb,var(--teal-soft) 58%,var(--card));stroke:var(--teal);stroke-width:2}.clearance-door{fill:none;stroke:#d39a42;stroke-width:5;stroke-linecap:round}.clearance-level{fill:#e1e9e6;stroke:#c5d3cf;stroke-width:1;animation:featured-level-in .42s var(--feature-delay,0s) ease both}.clearance-level--active{fill:var(--teal);stroke:var(--teal-dark)}.clearance-result{fill:color-mix(in srgb,var(--teal-soft) 67%,var(--card));stroke:var(--teal);stroke-width:2}
.percent-ring-track{fill:#fff;stroke:#dfe8e5;stroke-width:30}.percent-ring-value{fill:none;stroke:var(--teal);stroke-width:30;stroke-linecap:round;transform:rotate(-90deg);transform-origin:200px 150px;stroke-dashoffset:100;animation:featured-ring .82s cubic-bezier(.2,.82,.2,1) forwards}.percent-rule{fill:none;stroke:#d8e3df;stroke-width:2}
.sleep-moon{fill:color-mix(in srgb,var(--teal) 78%,var(--card));animation:sleep-float 2.6s ease-in-out infinite}.sleep-star{fill:#d39a42;animation:sleep-star 1.5s ease-in-out infinite}.sleep-star--2{animation-delay:.42s}.sleep-onset{fill:#b7c6c1;transform-box:fill-box;transform-origin:left center;animation:featured-grow .5s ease both}.sleep-cycle{transform-box:fill-box;transform-origin:left center;animation:featured-grow .52s var(--feature-delay,0s) ease both}.sleep-cycle--1{fill:var(--teal)}.sleep-cycle--2{fill:color-mix(in srgb,var(--teal) 64%,var(--card))}.sleep-cycle-copy{font-size:11px;font-weight:900;fill:#fff!important}.sleep-time-line{fill:none;stroke:#a5b7b1;stroke-width:5;stroke-linecap:round}.sleep-time-node{fill:#fff;stroke:var(--teal);stroke-width:4}.sleep-time-node--end{fill:var(--teal)}
.salary-track{fill:#e2eae7}.salary-part{transform-box:fill-box;transform-origin:left center;animation:featured-grow .68s var(--feature-delay,0s) cubic-bezier(.16,1,.3,1) both}.salary-part--net{fill:var(--teal)}.salary-part--tax{fill:#d39a42}.salary-part--social{fill:#738e9d}.salary-dot--net{fill:var(--teal)}.salary-dot--tax{fill:#d39a42}.salary-dot--social{fill:#738e9d}
.fuel-route{fill:none;stroke:var(--teal);stroke-width:5;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:precision-line-draw .8s ease forwards}.fuel-route-node{fill:#fff;stroke:var(--teal);stroke-width:4}.fuel-route-node--end{fill:#d39a42;stroke:#fff}.fuel-step{fill:#fff;stroke:#cddbd7;stroke-width:2;animation:featured-card-in .45s var(--feature-delay,0s) ease both}.fuel-step--result{fill:color-mix(in srgb,var(--teal-soft) 70%,var(--card));stroke:var(--teal)}.fuel-flow{fill:none;stroke:#d39a42;stroke-width:3;stroke-linecap:round;stroke-dasharray:40;stroke-dashoffset:40;animation:precision-line-draw .4s .25s ease forwards}.fuel-flow-tip{fill:#d39a42}

@keyframes featured-grow{from{transform:scaleX(.02);opacity:.2}to{transform:scaleX(1);opacity:1}}@keyframes featured-card-in{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}@keyframes featured-level-in{from{transform:scale(.72);opacity:.15}to{transform:scale(1);opacity:1}}@keyframes featured-ring{to{stroke-dashoffset:0}}@keyframes pressure-marker-in{from{transform:translateX(var(--pressure-x)) translateY(-14px);opacity:0}to{transform:translateX(var(--pressure-x));opacity:1}}@keyframes sleep-float{50%{transform:translateY(-5px)}}@keyframes sleep-star{50%{opacity:.35;transform:scale(.72)}}

/* Important-page batch: each scene maps submitted values to one exact visual model. */
.family-child{animation:featured-fade .45s var(--feature-delay,0s) ease both}.family-child circle{fill:var(--teal);stroke:#fff;stroke-width:3}.family-child path{fill:none;stroke:var(--teal-dark);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.family-benefit,.family-tax-saving{transform-box:fill-box;transform-origin:left center;animation:featured-grow .65s ease both}.family-benefit{fill:var(--teal)}.family-tax-saving{fill:#d39a42;animation-delay:.1s}
.consumption-road{fill:none;stroke:#263d4c;stroke-width:34;stroke-linecap:round}.consumption-road-dash{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}.consumption-marker{transform:translateX(var(--consumption-x));animation:consumption-marker-in .66s cubic-bezier(.2,.85,.2,1) both}.consumption-marker path{stroke:#d39a42;stroke-width:4}.consumption-marker circle{fill:#d39a42;stroke:#fff;stroke-width:4}.consumption-card{fill:#fff;stroke:#cfdcd8;stroke-width:2;animation:featured-card-in .45s ease both}.consumption-result-ring{fill:color-mix(in srgb,var(--teal-soft) 58%,var(--card));stroke:var(--teal);stroke-width:8;stroke-dasharray:350;stroke-dashoffset:350;animation:precision-line-draw .8s ease forwards}
.auto-finance-track{fill:none;stroke:#dce6e3;stroke-width:14;stroke-linecap:round}.auto-finance-progress{fill:none;stroke:var(--teal);stroke-width:6;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:precision-line-draw .8s ease forwards}.auto-finance-node{fill:#fff;stroke:var(--teal);stroke-width:5}.auto-finance-node--end{fill:#d39a42;stroke:#fff}.auto-finance-principal,.auto-finance-interest{transform-box:fill-box;transform-origin:left center;animation:featured-grow .65s ease both}.auto-finance-principal{fill:var(--teal)}.auto-finance-interest{fill:#d39a42;animation-delay:.12s}
.metabolism-ring{fill:none;stroke:color-mix(in srgb,var(--teal-soft) 75%,var(--card));stroke-width:22}.metabolism-core{fill:#fff;stroke:var(--teal);stroke-width:4}.metabolism-tick{stroke:var(--teal-dark);stroke-width:3;stroke-linecap:round;animation:metabolism-tick-in .32s var(--feature-delay,0s) ease both}.metabolism-card{fill:color-mix(in srgb,var(--teal-soft) 48%,var(--card));stroke:color-mix(in srgb,var(--teal) 36%,#dfe7e4);stroke-width:2;animation:featured-card-in .48s ease both}.metabolism-card--input{fill:#fff;animation-delay:.12s}
.ideal-weight-axis{fill:none;stroke:#dfe8e5;stroke-width:18;stroke-linecap:round}.ideal-weight-band{fill:color-mix(in srgb,var(--teal) 76%,var(--card));transform-box:fill-box;transform-origin:left center;animation:featured-grow .7s ease both}.ideal-weight-marker{transform:translateX(var(--ideal-x));animation:ideal-marker-in .68s cubic-bezier(.2,.85,.2,1) both}.ideal-weight-marker path{stroke:var(--teal-dark);stroke-width:3}.ideal-weight-marker circle{fill:#d39a42;stroke:#fff;stroke-width:4}.ideal-weight-ticks{stroke:#73877f;stroke-width:2}.ideal-weight-note{fill:color-mix(in srgb,var(--teal-soft) 50%,var(--card));stroke:#d6e2de;stroke-width:1.5}
.sickness-value{transform-box:fill-box;transform-origin:left center;animation:featured-grow .65s var(--feature-delay,0s) ease both}.sickness-value--income{fill:#879c95}.sickness-value--net-income{fill:#6f8995}.sickness-value--gross-benefit{fill:#d39a42}.sickness-value--payout{fill:var(--teal)}.sickness-deduction-dot{fill:#b65e50}
.slope-area{fill:color-mix(in srgb,var(--teal-soft) 62%,var(--card));stroke:var(--teal);stroke-width:3;stroke-linejoin:round;transform-origin:86px 248px;animation:slope-open .7s cubic-bezier(.2,.85,.2,1) both}.slope-line{fill:none;stroke:var(--teal-dark);stroke-width:6;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:precision-line-draw .8s .12s ease forwards}.slope-result{fill:color-mix(in srgb,var(--teal-soft) 52%,var(--card));stroke:var(--teal);stroke-width:2;animation:featured-card-in .45s ease both}
.concrete-face{stroke:var(--teal-dark);stroke-width:3;stroke-linejoin:round;animation:featured-fade .55s ease both}.concrete-face--front{fill:color-mix(in srgb,var(--teal) 68%,var(--card))}.concrete-face--side{fill:color-mix(in srgb,var(--teal) 45%,var(--card));animation-delay:.08s}.concrete-face--top{fill:color-mix(in srgb,var(--teal-soft) 76%,var(--card));animation-delay:.16s}.concrete-edge{fill:none;stroke:#d39a42;stroke-width:3}.concrete-result{fill:#fff;stroke:var(--teal);stroke-width:2;animation:featured-card-in .48s ease both}
.gas-pipe{fill:none;stroke:color-mix(in srgb,var(--teal-soft) 72%,var(--card));stroke-width:24;stroke-linecap:round}.gas-node{fill:#fff;stroke:var(--teal);stroke-width:5}.gas-node--end{fill:var(--teal);stroke:#fff}.gas-card{fill:#fff;stroke:#cfdcd8;stroke-width:2;animation:featured-card-in .45s ease both}.gas-card--factor{fill:color-mix(in srgb,var(--teal-soft) 38%,var(--card));animation-delay:.1s}.gas-card--result{fill:color-mix(in srgb,var(--teal-soft) 70%,var(--card));stroke:var(--teal);animation-delay:.2s}.gas-flow-dot{fill:#d39a42;stroke:#fff;stroke-width:3;animation:gas-pulse 1.15s ease-in-out infinite}.gas-flow-dot--2{animation-delay:.35s}
.housing-baseline{fill:none;stroke:#758a83;stroke-width:3}.housing-grid{fill:none;stroke:#dfe7e4;stroke-width:1;stroke-dasharray:6 5}.housing-bar{transform-box:fill-box;transform-origin:center bottom;animation:rank2-rise .65s var(--feature-delay,0s) cubic-bezier(.2,.85,.2,1) both}.housing-bar--buy{fill:var(--teal)}.housing-bar--rent{fill:#d39a42}.housing-house{fill:none;stroke:#fff;stroke-width:4;stroke-linejoin:round}.housing-depot{fill:none;stroke:#fff;stroke-width:4;stroke-linejoin:round}.housing-winner{fill:color-mix(in srgb,var(--teal-soft) 57%,var(--card));stroke:var(--teal);stroke-width:2;animation:featured-card-in .45s ease both}
.electricity-day-track{fill:#e1e9e6}.electricity-active{fill:var(--teal);transform-box:fill-box;transform-origin:left center;animation:featured-grow .72s ease both}.electricity-hour-tick{stroke:#fff;stroke-width:2;opacity:.75}.electricity-stat{fill:#fff;stroke:#cfdcd8;stroke-width:2;animation:featured-card-in .45s ease both}.electricity-stat--cost{fill:color-mix(in srgb,var(--teal-soft) 55%,var(--card));stroke:var(--teal);animation-delay:.1s}
.vehicle-tax-axis{fill:none;stroke:#dfe8e5;stroke-width:15;stroke-linecap:round}.vehicle-tax-threshold{stroke:#d39a42;stroke-width:3;stroke-dasharray:5 4}.vehicle-tax-marker{transform:translateX(var(--vehicle-tax-x));animation:vehicle-tax-marker-in .66s cubic-bezier(.2,.85,.2,1) both}.vehicle-tax-marker path{stroke:var(--teal-dark);stroke-width:3}.vehicle-tax-marker circle{fill:var(--teal);stroke:#fff;stroke-width:4}.vehicle-tax-engine,.vehicle-tax-carbon{transform-box:fill-box;transform-origin:left center;animation:featured-grow .65s ease both}.vehicle-tax-engine{fill:var(--teal)}.vehicle-tax-carbon{fill:#d39a42;animation-delay:.1s}

/* Second important-page batch: exact timelines, transformations and decompositions. */
.age-cycle-track{fill:none;stroke:#dce7e3;stroke-width:18;stroke-linecap:round}.age-cycle-progress{fill:none;stroke:var(--teal);stroke-width:9;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:precision-line-draw .8s ease forwards}.age-cycle-node{fill:#fff;stroke:var(--teal);stroke-width:4}.age-cycle-node--next{stroke:#d39a42}.age-cycle-marker{transform:translateX(var(--age-x));animation:age-marker-in .65s cubic-bezier(.2,.85,.2,1) both}.age-cycle-marker path{stroke:var(--teal-dark);stroke-width:3}.age-cycle-marker circle{fill:#d39a42;stroke:#fff;stroke-width:4}.age-stat{fill:#fff;stroke:#cfdcd8;stroke-width:2;animation:featured-card-in .45s ease both}.age-stat--today{fill:color-mix(in srgb,var(--teal-soft) 52%,var(--card));stroke:var(--teal);animation-delay:.1s}
.power-card{fill:#fff;stroke:#ccd9d5;stroke-width:2;animation:featured-card-in .48s ease both}.power-card--result{fill:color-mix(in srgb,var(--teal-soft) 62%,var(--card));stroke:var(--teal);animation-delay:.16s}.power-convert-line{fill:none;stroke:#d39a42;stroke-width:5;stroke-linecap:round;stroke-dasharray:180;stroke-dashoffset:180;animation:precision-line-draw .65s .1s ease forwards}.power-convert-tip{fill:#d39a42}.power-factor-disc{fill:#fff;stroke:var(--teal);stroke-width:4;animation:featured-card-in .5s ease both}
.fraction-axis{fill:none;stroke:#dce6e2;stroke-width:12;stroke-linecap:round}.fraction-marker{transform:translateX(var(--fraction-x));animation:fraction-marker-in .62s cubic-bezier(.2,.85,.2,1) both}.fraction-marker path{stroke:var(--teal-dark);stroke-width:3}.fraction-marker circle{stroke:#fff;stroke-width:3}.fraction-marker--one circle{fill:#718f9f}.fraction-marker--two circle{fill:#d39a42}.fraction-marker--result circle{fill:var(--teal)}.fraction-operation{fill:color-mix(in srgb,var(--teal-soft) 55%,var(--card));stroke:var(--teal);stroke-width:2}
.dividend-net,.dividend-tax{transform-box:fill-box;transform-origin:left center;animation:featured-grow .65s ease both}.dividend-net{fill:var(--teal)}.dividend-tax{fill:#d39a42;animation-delay:.12s}.dividend-stat{fill:#fff;stroke:#ccd9d5;stroke-width:2;animation:featured-card-in .45s ease both}.dividend-stat--yield{fill:color-mix(in srgb,var(--teal-soft) 55%,var(--card));stroke:var(--teal);animation-delay:.1s}
.timezone-clock{fill:#fff;stroke:#6e8894;stroke-width:5}.timezone-clock--target{fill:color-mix(in srgb,var(--teal-soft) 42%,var(--card));stroke:var(--teal)}.timezone-ticks{stroke:#81958e;stroke-width:4;stroke-linecap:round}.timezone-hands path{stroke:var(--teal-dark);stroke-width:6;stroke-linecap:round;animation:timezone-hand-in .55s ease both}.timezone-hands path+path{stroke-width:3}.timezone-hands circle{fill:#d39a42;stroke:#fff;stroke-width:3}.timezone-shift{fill:none;stroke:#d39a42;stroke-width:4;stroke-dasharray:150;stroke-dashoffset:150;animation:precision-line-draw .65s ease forwards}.timezone-shift-tip{fill:#d39a42}
.cylinder-body{fill:color-mix(in srgb,var(--teal-soft) 46%,var(--card));stroke:var(--teal-dark);stroke-width:4;stroke-linejoin:round;animation:cylinder-rise .55s ease both}
.cylinder-front{fill:none;stroke:var(--teal-dark);stroke-width:4;stroke-linecap:round;animation:cylinder-rise .55s .1s ease both}
.cylinder-hidden{fill:none;stroke:color-mix(in srgb,var(--teal-dark) 42%,var(--card));stroke-width:2.5;stroke-dasharray:7 6;stroke-linecap:round;animation:cylinder-rise .55s .1s ease both}
.cylinder-top{fill:color-mix(in srgb,var(--teal-soft) 20%,var(--card));stroke:var(--teal-dark);stroke-width:4;animation:cylinder-rise .55s .16s ease both}
.cylinder-stat{fill:#fff;stroke:color-mix(in srgb,var(--teal) 24%,var(--card));stroke-width:2;animation:featured-card-in .45s ease both}

/* Jahresuebersicht Kalender: zwoelf Monatsspalten mit Feiertagspunkten. */
.kal-spalte{fill:color-mix(in srgb,var(--teal-soft) 26%,var(--card))}
.kal-spalte--alt{fill:color-mix(in srgb,var(--teal-soft) 48%,var(--card))}
.kal-monat{font-size:12px;font-weight:800;letter-spacing:.05em;fill:var(--ink-2)!important}
/* Gefuellt = freier Werktag, offen = faellt aufs Wochenende. */
.kal-tag{fill:var(--teal);stroke:#fff;stroke-width:2.5;animation:featured-card-in .4s ease both}
.kal-tag--frei-nein{fill:#fff;stroke:color-mix(in srgb,var(--teal) 62%,var(--card));stroke-width:2.5}
.kal-legende text{font-size:11px;font-weight:700;fill:var(--ink-2)!important}
/* Tagesskala: ohne sie sagt die Lage eines Punktes nichts aus. */
.kal-skala{font-size:10px;font-weight:800;letter-spacing:.04em;fill:var(--muted)!important}
.kal-raster{fill:none;stroke:color-mix(in srgb,var(--teal) 16%,transparent);stroke-width:1;stroke-dasharray:3 4}

/* ---- Blutdruck: Leitlinienfeld ----------------------------------------- */
/* Ampelfarben statt Kategoriefarben: hier steht eine medizinische Einstufung
   dahinter, keine Rubrik. Die Zonen werden ineinander gezeichnet, deshalb
   braucht keine von ihnen Transparenz. */
.bd-z1{fill:#15803d}
.bd-z2{fill:#4ba35f}
.bd-z3{fill:#d9b23c}
.bd-z4{fill:#e08a3c}
.bd-z5{fill:#d9603f}
.bd-z6{fill:#b3372c}
.bd-raster{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1;stroke-dasharray:3 5}
.bd-tick{font-size:10px;font-weight:800;fill:var(--muted)!important;font-variant-numeric:tabular-nums}
.bd-achse{font-size:10px;font-weight:800;letter-spacing:.07em;fill:var(--ink-3)!important}
.bd-fadenkreuz{fill:none;stroke:#fff;stroke-width:1.5;stroke-dasharray:4 4;opacity:.9}
.bd-punkt{fill:#fff;stroke:#15384d;stroke-width:3.5;
  animation:bd-setzen .5s cubic-bezier(.16,1,.3,1) both}
.bd-messwert{font-size:15px;font-weight:900;fill:#fff!important;
  paint-order:stroke;stroke:rgba(21,56,77,.72);stroke-width:4;stroke-linejoin:round;
  font-variant-numeric:tabular-nums}
@keyframes bd-setzen{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}
.bd-punkt{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){.bd-punkt{animation:none}}

/* ---- Jahreskalender: zwoelf Monatsgitter ------------------------------- */
.kal-jahr{display:grid;grid-template-columns:1fr;gap:14px;margin:18px 0 14px}
@media(min-width:520px){.kal-jahr{grid-template-columns:repeat(2,1fr)}}
/* Hoechstens drei Spalten: bei vier blieben je Wochentag nur 18 Punkte, die
   zweibuchstabigen Kuerzel stiessen aneinander und "Mo" wurde beschnitten. */
@media(min-width:860px){.kal-jahr{grid-template-columns:repeat(3,1fr);gap:16px}}

.kal-monat{border:1px solid color-mix(in srgb,var(--teal) 18%,var(--border));
  border-radius:var(--r-sm);background:var(--card);padding:12px 12px 10px;
  box-shadow:0 8px 20px -18px rgba(11,117,104,.5)}
.kal-monat-kopf{font-weight:800;font-size:.94rem;color:var(--teal-dark);
  margin-bottom:9px;letter-spacing:.01em}

/* Eigenes Raster, unabhaengig von der allgemeinen Tabellengestaltung. */
.content .kal-tab{width:100%;border-collapse:collapse;table-layout:fixed;margin:0;font-variant-numeric:tabular-nums}
/* Feste Spaltenbreiten: die Wochenspalte schmal, die sieben Tage gleich
   breit. Ohne das laufen die Zahlen versetzt untereinander. */
.content .kal-tab .kal-kw{width:15%}
.content .kal-tab thead th:not(.kal-kw){width:12.14%}
.content .kal-tab th,.content .kal-tab td{border:0;padding:1px 0;text-align:center;
  font-size:.8rem;line-height:1.95;font-weight:600;background:transparent}
.content .kal-tab thead th{font-size:.66rem;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:0;padding-bottom:5px}
.content .kal-tab td{border-radius:5px;color:var(--ink)}
.content .kal-tab .kal-kw{font-size:.64rem;font-weight:700;color:var(--muted);
  border-right:1px solid var(--border)}
.content .kal-tab td.kal-we{color:var(--muted)}
.content .kal-tab td.kal-leer{color:transparent}
/* Diese Regeln muessen die Grundregel oben ueberbieten - sonst setzt deren
   transparenter Hintergrund die Hervorhebung zurueck und die weisse Schrift
   des bundesweiten Feiertags steht unsichtbar auf Weiss. */
.content .kal-tab td.kal-f{background:var(--teal);color:#fff;font-weight:800}
.content .kal-tab td.kal-f-reg{background:color-mix(in srgb,var(--teal-soft) 80%,var(--card));
  color:var(--teal-dark);font-weight:800;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal) 34%,transparent)}
.content .kal-tab td[title]{cursor:help}

.kal-legende-html{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  font-size:.84rem;color:var(--ink-2);margin:4px 0 0}
.kal-punkt{display:inline-block;width:13px;height:13px;border-radius:4px;
  vertical-align:-2px;margin-right:5px}
.kal-punkt.kal-f{background:var(--teal)}
.kal-punkt.kal-f-reg{background:color-mix(in srgb,var(--teal-soft) 78%,var(--card));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal) 34%,transparent)}
.kal-punkt.kal-we{background:var(--soft);box-shadow:inset 0 0 0 1px var(--border)}.cylinder-result{fill:color-mix(in srgb,var(--teal-soft) 60%,var(--card));stroke:var(--teal);stroke-width:2;animation:featured-card-in .45s ease both}
.fine-speed-track{fill:none;stroke:#dce6e2;stroke-width:18;stroke-linecap:round}.fine-threshold{stroke:#d39a42;stroke-width:3;stroke-dasharray:5 4}.fine-threshold--ban{stroke:#b65e50}.fine-speed-marker{transform:translateX(var(--fine-x));animation:fine-marker-in .65s cubic-bezier(.2,.85,.2,1) both}.fine-speed-marker path{stroke:var(--teal-dark);stroke-width:3}.fine-speed-marker circle{fill:var(--teal);stroke:#fff;stroke-width:4}.fine-card{fill:#fff;stroke:#ccd9d5;stroke-width:2;animation:featured-card-in .45s ease both}.fine-card--money{fill:color-mix(in srgb,var(--teal-soft) 58%,var(--card));stroke:var(--teal)}.fine-card--ban{fill:color-mix(in srgb,#f1d8d2 42%,var(--card));animation-delay:.12s}
.saving-grid{fill:none;stroke:#dce6e2;stroke-width:2}.saving-growth-line{fill:none;stroke:var(--teal);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1300;stroke-dashoffset:1300;animation:precision-line-draw .9s ease forwards}.saving-end-dot{fill:#d39a42;stroke:#fff;stroke-width:4}.saving-paid,.saving-interest{transform-box:fill-box;transform-origin:left center;animation:featured-grow .65s ease both}.saving-paid{fill:var(--teal)}.saving-interest{fill:#d39a42;animation-delay:.12s}
.income-gross,.income-net,.income-building,.income-land{transform-box:fill-box;transform-origin:left center;animation:featured-grow .65s ease both}.income-gross{fill:#77919c}.income-net{fill:var(--teal);animation-delay:.08s}.income-building{fill:var(--teal)}.income-land{fill:#d39a42;animation-delay:.12s}
.heat-house{fill:color-mix(in srgb,var(--teal-soft) 62%,var(--card));stroke:var(--teal-dark);stroke-width:5;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;animation:precision-line-draw .75s ease forwards}.heat-door{fill:var(--teal)}.heat-window{fill:#fff;stroke:#6f8a95;stroke-width:3}.heat-loss-arrow{fill:none;stroke:#d39a42;stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:precision-line-draw .65s .15s ease forwards}.heat-loss-tip{fill:#d39a42}.heat-result{fill:color-mix(in srgb,var(--teal-soft) 60%,var(--card));stroke:var(--teal);stroke-width:2;animation:featured-card-in .45s ease both}.heat-base,.heat-reserve{transform-box:fill-box;transform-origin:left center;animation:featured-grow .65s ease both}.heat-base{fill:var(--teal)}.heat-reserve{fill:#d39a42;animation-delay:.12s}

@keyframes age-marker-in{from{transform:translateX(var(--age-x)) translateY(-14px);opacity:0}to{transform:translateX(var(--age-x));opacity:1}}@keyframes fraction-marker-in{from{transform:translateX(var(--fraction-x)) translateY(-12px);opacity:0}to{transform:translateX(var(--fraction-x));opacity:1}}@keyframes timezone-hand-in{from{opacity:0}to{opacity:1}}@keyframes cylinder-rise{from{transform:translateY(12px);opacity:.2}to{transform:none;opacity:1}}@keyframes fine-marker-in{from{transform:translateX(var(--fine-x)) translateY(-14px);opacity:0}to{transform:translateX(var(--fine-x));opacity:1}}
@keyframes featured-fade{from{opacity:0}to{opacity:1}}@keyframes consumption-marker-in{from{transform:translateX(var(--consumption-x)) translateY(-14px);opacity:0}to{transform:translateX(var(--consumption-x));opacity:1}}@keyframes metabolism-tick-in{from{opacity:0}to{opacity:1}}@keyframes ideal-marker-in{from{transform:translateX(var(--ideal-x)) translateY(-16px);opacity:0}to{transform:translateX(var(--ideal-x));opacity:1}}@keyframes slope-open{from{transform:scale(.12);opacity:.2}to{transform:scale(1);opacity:1}}@keyframes gas-pulse{50%{transform:scale(1.35);opacity:.55}}@keyframes vehicle-tax-marker-in{from{transform:translateX(var(--vehicle-tax-x)) translateY(-15px);opacity:0}to{transform:translateX(var(--vehicle-tax-x));opacity:1}}

@media(prefers-reduced-motion:reduce){
  .premium-reference-form .field-attention,.precision-scene *{animation:none!important}
  .precision-car{transform:translateX(var(--car-end))}
  .precision-tyre-new{transform:scale(1)}
  .precision-credit-line,.precision-beam-curve{stroke-dashoffset:0}
  .precision-payment-principal,.precision-energy-month{transform:none;opacity:1}
  .precision-ph-marker{transform:translateX(var(--ph-x));opacity:1}
  .precision-stair-line,.precision-triangle-shape,.precision-deadline-shift{stroke-dashoffset:0}
  .precision-segment-fill{transform:none;opacity:1}.precision-pipe-fill{transform:none;opacity:1}
  .precision-dew-marker{transform:translateX(var(--dew-x));opacity:1}.precision-dew-drop{transform:none;opacity:1}
  .distance-route{stroke-dashoffset:0}
  .priority-bra-loop,.priority-insurance-range,.priority-refinance-line,.priority-calorie-line{stroke-dashoffset:0}
  .priority-factor,.priority-taxi-base,.priority-taxi-distance,.priority-taxi-wait,.priority-taxi-extra,.priority-copay-paid,.priority-calorie-active,.priority-calorie-dot,.priority-implant-segment,.priority-implant-coverage,.priority-implant-own,.priority-u-layer,.priority-u-marker,.priority-build-segment,.priority-life-lived,.priority-life-remaining,.priority-care-segment,.priority-wallpaper-strip,.priority-lease-segment{transform:none;opacity:1}
}

/* ===== Portiert aus der Claude-Quelle: Cluster-Szenen =====
   Aufmass/Handwerk (18), Steuer (8), Sozialleistung (6), Erbe (1),
   Niessbrauch/Wohnrecht (2). Nur ergaenzt, nichts ueberschrieben. */

/* ---------- Haus überschreiben & Geschwister auszahlen ----------
   Der verteilbare Betrag wird in gleich große Erbteile zerlegt: einer bleibt
   bei der übernehmenden Person, die übrigen sind die Auszahlung. Ersetzt die
   generische Grafik, deren Beschriftungen abgeschnitten wurden. */
.erb-svg .erb-cap{fill:var(--muted);font-size:11px;font-weight:800;letter-spacing:.06em}
.erb-svg .erb-bar-net{fill:var(--teal-soft);stroke:var(--teal);stroke-width:1.5}
.erb-svg .erb-bar-debt{fill:var(--soft2);stroke:var(--border);stroke-width:1.5}
.erb-svg .erb-bar-val{fill:var(--ink);font-family:var(--font-disp);font-size:17px;font-weight:800}
.erb-svg .erb-sub{fill:var(--gold-ink);font-size:13.5px;font-weight:700}
.erb-svg .erb-net{fill:var(--ink-2);font-size:13.5px;font-weight:700}

.erb-svg .erb-card{fill:var(--card);stroke:var(--teal);stroke-width:2}
.erb-svg .erb-big{fill:var(--ink);font-family:var(--font-disp);font-size:30px;font-weight:800}
.erb-svg .erb-sub2{fill:var(--muted);font-size:12.5px}

/* Erbteile: der eigene Anteil hebt sich farblich von der Auszahlung ab */
.erb-svg .erb-tile rect{stroke-width:1.5}
.erb-svg .erb-tile--mine rect{fill:var(--teal);stroke:var(--teal-dark)}
.erb-svg .erb-tile--pay rect{fill:var(--gold);stroke:var(--gold-ink);opacity:.92}
.erb-svg .erb-tile{animation:erb-in .3s cubic-bezier(.2,.8,.25,1) both;animation-delay:var(--erb-d,0s)}
@keyframes erb-in{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.erb-svg .erb-tile{transform-box:fill-box;transform-origin:center}

.erb-svg .erb-key-mine{fill:var(--teal)}
.erb-svg .erb-key-pay{fill:var(--gold)}
.erb-svg .erb-key-t{fill:var(--ink-2);font-size:12px;font-weight:600}
.erb-svg .erb-more{fill:var(--gold-ink);font-size:15px;font-weight:800}
.erb-svg .erb-foot{fill:var(--muted);font-size:12.5px}

@media (prefers-reduced-motion: reduce){
  .erb-svg .erb-tile{animation:none}
}

/* ---------- Nießbrauch / Wohnrecht: Zeitachse statt Motiv-Ikone ----------
   Der Kapitalwert entsteht aus Jahreswert x Vervielfältiger über die
   Restlebenserwartung - das war in der generischen Grafik unsichtbar. */
.nb-svg .nb-axis{stroke:var(--border);stroke-width:2}
.nb-svg .nb-cap{fill:var(--muted);font-size:11px;font-weight:800;letter-spacing:.05em}
.nb-svg .nb-yearval{fill:var(--ink);font-family:var(--font-disp);font-size:16px;font-weight:800}
.nb-svg .nb-more{fill:var(--gold-ink);font-size:13px;font-weight:800}

.nb-svg .nb-bar{fill:var(--teal);opacity:.85}
.nb-svg .nb-bar{animation:nb-rise .32s cubic-bezier(.2,.8,.25,1) both;animation-delay:var(--nb-d,0s)}
@keyframes nb-rise{0%{opacity:0;transform:scaleY(.3)}100%{opacity:.85;transform:none}}
.nb-svg .nb-bar{transform-box:fill-box;transform-origin:bottom}

.nb-svg .nb-op{fill:var(--gold-ink);font-family:var(--font-disp);font-size:20px;font-weight:800}
.nb-svg .nb-op-val{fill:var(--ink);font-family:var(--font-disp);font-size:18px;font-weight:800}

.nb-svg .nb-card{fill:var(--card);stroke:var(--teal);stroke-width:2}
.nb-svg .nb-big{fill:var(--ink);font-family:var(--font-disp);font-size:26px;font-weight:800}
.nb-svg .nb-sub{fill:var(--muted);font-size:12px}

@media (prefers-reduced-motion: reduce){
  .nb-svg .nb-bar{animation:none;opacity:.85}
}


/* ============================================================================
   AREA-SCENE — „Aufmaß und Einheitspreis"
   Alle Klassen mit `area-` präfixiert, alle Regeln über `.area-svg` gescopt,
   damit nichts mit bestehenden Szenen kollidiert.

   Farbrollen (bewusst mehrfarbig):
     TEAL      = die abgezählte Menge (Kästchen)
     GOLD      = das Messen (Massketten, Schlüssel-Kästchen, Legende, Einheitspreis)
     INK/MUTED = Zahlen und Hilfstexte
   ============================================================================ */

/* ---------- Raster: eine Einheit = ein Kästchen ---------- */
.area-svg .area-cell{
  fill:var(--teal);
  stroke:var(--teal-dark);
  stroke-width:1;
  /* Pflicht bei skalierter Animation, sonst wächst das Rechteck aus der Canvas-Ecke */
  transform-box:fill-box;
  transform-origin:center center;
  animation:area-cell-in .34s cubic-bezier(.2,.8,.25,1) both;
  animation-delay:var(--area-d,0s);
}
@keyframes area-cell-in{
  0%{opacity:0;transform:scale(.34)}
  100%{opacity:1;transform:none}
}

/* Schlüssel-Kästchen: erklärt die Legende, deshalb in der Mess-Farbe Gold */
.area-svg .area-cell--key{fill:var(--gold);stroke:var(--gold-ink);stroke-width:1.4}

/* angebrochene Einheit (z. B. 82,5 m²) — sichtbar schmaler und blasser */
.area-svg .area-cell--part{fill:var(--teal-soft);stroke:var(--teal)}

/* ---------- Bemassung ---------- */
.area-svg .area-dim{
  fill:none;stroke:var(--gold-ink);stroke-width:1.6;stroke-dasharray:5 4;
  stroke-dashoffset:220;
  animation:area-dim-draw .55s ease-out .1s forwards;
}
@keyframes area-dim-draw{to{stroke-dashoffset:0}}
.area-svg .area-tick{fill:none;stroke:var(--gold-ink);stroke-width:2;stroke-linecap:round}
.area-svg .area-dim-t{
  fill:var(--gold-ink)!important;font-size:12px;font-weight:850;
  font-variant-numeric:tabular-nums;
}

/* ---------- Legende unter dem Raster ---------- */
.area-svg .area-legend{
  fill:var(--gold-ink)!important;font-size:12px;font-weight:750;
  font-variant-numeric:tabular-nums;
  animation:area-fade .4s ease-out .5s both;
}

/* ---------- Rechte Spalte ---------- */
.area-svg .area-label{
  fill:var(--muted)!important;font-size:10px;font-weight:800;letter-spacing:.06em;
}
.area-svg .area-choice{fill:var(--ink-2);font-size:11px;font-weight:750;letter-spacing:.01em}
.area-svg .area-big{
  fill:var(--ink)!important;font-family:var(--font-disp);font-size:30px;font-weight:800;
  font-variant-numeric:tabular-nums;
}
.area-svg .area-sub{fill:var(--muted)!important;font-size:11px;font-weight:600}

.area-svg .area-total{animation:area-rise .42s cubic-bezier(.2,.8,.25,1) .3s both}
.area-svg .area-total-tile{fill:var(--soft);stroke:var(--teal-soft);stroke-width:2}
.area-svg .area-total-label{
  fill:var(--muted)!important;font-size:10px;font-weight:800;letter-spacing:.06em;
}
/* Grundgrad 26px; die Szene setzt bei langen Spannen einen kleineren
   font-size inline, damit der Betrag nie aus der Kachel läuft. */
.area-svg .area-total-copy{
  fill:var(--teal-dark)!important;font-size:26px;font-weight:950;
  font-variant-numeric:tabular-nums;
}

.area-svg .area-unit{animation:area-fade .4s ease-out .55s both}
.area-svg .area-unit-copy{
  fill:var(--gold-ink)!important;font-family:var(--font-disp);font-size:28px;font-weight:850;
  font-variant-numeric:tabular-nums;
}
.area-svg .area-row-copy{
  fill:var(--ink-2)!important;font-size:17px;font-weight:800;
  font-variant-numeric:tabular-nums;
}

@keyframes area-fade{0%{opacity:0}100%{opacity:1}}
@keyframes area-rise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}

/* Gesamtbewegung: Kästchen max. 1,05 s Verzögerung + 0,34 s = ~1,4 s. Nichts läuft endlos. */

/* ---------- Reduzierte Bewegung: alles steht, alle Zahlen bleiben sichtbar ---------- */
@media (prefers-reduced-motion: reduce){
  .area-svg .area-cell,
  .area-svg .area-legend,
  .area-svg .area-total,
  .area-svg .area-unit{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .area-svg .area-dim{
    animation:none!important;
    stroke-dashoffset:0!important;
  }
}


/* =========================================================================
   Steuer-Cluster — „Bemessungsgrundlage und Steuer"
   Ein Balken = 100 % des Ausgangsbetrags. Schraffur = ausgesparter Teil,
   Teal = Bemessungsgrundlage, Gold = die Steuer daraus.
   Alle Klassen mit tax- präfixiert.
   ========================================================================= */

.tax-svg{overflow:visible}

/* --- Schraffur für den nicht besteuerten Teil ---------------------------- */
.tax-svg .tax-hatch-bg{fill:var(--card)}
.tax-svg .tax-hatch-line{stroke:var(--soft2);stroke-width:3.4;fill:none}

/* --- Balken --------------------------------------------------------------- */
.tax-svg .tax-seg--shield{fill:url(#tax-hatch)}
.tax-svg .tax-seg--rest{fill:var(--teal)}
.tax-svg .tax-slice{fill:var(--gold)}
.tax-svg .tax-slice-edge{stroke:var(--card);stroke-width:2.4;fill:none}
.tax-svg .tax-bar-frame{fill:none;stroke:var(--border);stroke-width:2}
.tax-svg .tax-divider{stroke:var(--teal-dark);stroke-width:2;fill:none;opacity:.55}
.tax-svg .tax-tick{stroke:var(--border-2);stroke-width:2;fill:none}
.tax-svg .tax-link{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-dasharray:5 4;stroke-linecap:round}
.tax-svg .tax-rule{stroke:var(--border-2);stroke-width:1.5;fill:none}

/* --- Typografie ----------------------------------------------------------- */
.tax-svg .tax-eyebrow{font-size:10px;font-weight:800;letter-spacing:.06em;fill:var(--muted)}
.tax-svg .tax-eyebrow--shield{fill:var(--ink-2)}
.tax-svg .tax-axis{font-size:10px;font-weight:800;letter-spacing:.055em;fill:var(--muted)}
.tax-svg .tax-axis--card{fill:var(--ink-2)}
.tax-svg .tax-base-amount{font-family:var(--font-disp);font-size:21px;font-weight:900;fill:var(--ink);font-variant-numeric:tabular-nums}
.tax-svg .tax-shield-amount{font-family:var(--font-disp);font-size:21px;font-weight:900;fill:var(--ink-3);font-variant-numeric:tabular-nums}
.tax-svg .tax-in-bar{font-size:12.5px;font-weight:900;fill:#fff;font-variant-numeric:tabular-nums;paint-order:stroke;stroke:rgba(7,86,77,.34);stroke-width:2.4px;stroke-linejoin:round}
.tax-svg .tax-row-label{font-size:11.5px;font-weight:700;fill:var(--ink-2)}
.tax-svg .tax-row-value{font-size:11.5px;font-weight:900;fill:var(--ink);font-variant-numeric:tabular-nums}
.tax-svg .tax-card{fill:var(--soft);stroke:var(--gold);stroke-width:1.6}
.tax-svg .tax-card-value{font-family:var(--font-disp);font-size:23px;font-weight:950;fill:var(--gold-ink);font-variant-numeric:tabular-nums}
.tax-svg .tax-rate{font-family:var(--font-disp);font-size:21px;font-weight:900;fill:var(--teal-dark);font-variant-numeric:tabular-nums}

/* --- Legendenfarben: jede Position eine eigene Farbe ---------------------- */
.tax-svg .tax-key--0{fill:var(--teal-dark)}
.tax-svg .tax-key--1{fill:var(--gold)}
.tax-svg .tax-key--2{fill:color-mix(in srgb,var(--teal) 48%,var(--card))}
.tax-svg .tax-key--3{fill:var(--ink-3)}

/* --- Bewegung: zusammen unter 1,4 s, kein infinite ------------------------ */
@keyframes tax-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tax-carve{from{transform:scaleX(0);opacity:.4}to{transform:scaleX(1);opacity:1}}
@keyframes tax-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes tax-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes tax-fade{from{opacity:0}to{opacity:1}}

.tax-svg .tax-seg{transform-box:fill-box;transform-origin:left center;animation:tax-grow .62s var(--tax-d,0s) cubic-bezier(.16,1,.3,1) both}
.tax-svg .tax-slice{transform-box:fill-box;transform-origin:right center;animation:tax-carve .5s .5s cubic-bezier(.16,1,.3,1) both}
.tax-svg .tax-slice-edge,.tax-svg .tax-divider,.tax-svg .tax-tick{animation:tax-fade .4s .62s ease both}
.tax-svg .tax-in-bar{animation:tax-fade .4s .5s ease both}
.tax-svg .tax-link{animation:tax-fade .4s .82s ease both}
.tax-svg .tax-row{transform-box:fill-box;transform-origin:left center;animation:tax-rise .42s var(--tax-d,.5s) ease both}
.tax-svg .tax-card,.tax-svg .tax-card-value,.tax-svg .tax-rate{transform-box:fill-box;transform-origin:center center;animation:tax-pop .42s .74s cubic-bezier(.2,.82,.2,1) both}

/* --- Kleine Viewports: Beschriftung darf nicht zerlaufen ------------------ */
@media (max-width:560px){
  .tax-svg .tax-base-amount,.tax-svg .tax-shield-amount{font-size:19px}
  .tax-svg .tax-eyebrow,.tax-svg .tax-axis{font-size:11px}
  .tax-svg .tax-row-label,.tax-svg .tax-row-value{font-size:12.5px}
}

/* --- Reduzierte Bewegung: alles sofort sichtbar, nichts animiert ---------- */
@media (prefers-reduced-motion:reduce){
  .tax-svg .tax-seg,
  .tax-svg .tax-slice,
  .tax-svg .tax-slice-edge,
  .tax-svg .tax-divider,
  .tax-svg .tax-tick,
  .tax-svg .tax-in-bar,
  .tax-svg .tax-link,
  .tax-svg .tax-row,
  .tax-svg .tax-card,
  .tax-svg .tax-card-value,
  .tax-svg .tax-rate{animation:none!important;opacity:1!important}
}


/* ============================================================================
   Ergebnis-Szene „Sozialleistungen" — Bedarf gegen anrechenbares Einkommen.
   Alle Klassen sind mit ben- präfixiert, damit nichts kollidiert.
   Ton: sachlich und ruhig. Kein Alarmrot, keine dramatische Typografie —
   die Grafik stellt eine Rechnung dar, sie bewertet niemanden.
   ========================================================================== */

.ben-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-disp);
}

/* ---- Achse ---------------------------------------------------------------- */
.ben-axis {
  stroke: var(--border);
  stroke-width: 1.5;
  fill: none;
}

.ben-col-head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  fill: var(--teal-dark);
}

.ben-col-head--income {
  fill: var(--muted);
}

/* ---- Säulen: Bedarf in Teal-Tönen, Einkommen in warmem Neutral ---------- */
.ben-seg {
  stroke-width: 1;
}

/* Bedarfsseite */
.ben-seg--n0 { fill: var(--teal-dark); stroke: var(--teal-dark); }
.ben-seg--n1 { fill: var(--teal);      stroke: var(--teal); }
.ben-seg--n2 { fill: var(--teal-soft); stroke: var(--teal); }

/* Einkommensseite: warmes Neutral, bewusst zurückhaltend */
.ben-seg--i0 { fill: var(--soft2); stroke: var(--muted); }
.ben-seg--i1 { fill: var(--soft);  stroke: var(--muted); }
.ben-seg--i2 { fill: var(--border); stroke: var(--muted); }

.ben-seg-val {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}

.ben-seg-val--n0,
.ben-seg-val--n1 { fill: #fff; }
.ben-seg-val--n2 { fill: var(--teal-dark); }
.ben-seg-val--i0,
.ben-seg-val--i1,
.ben-seg-val--i2 { fill: var(--ink-3); }

/* ---- Die Lücke: das eigentliche Ergebnis -------------------------------- */
.ben-gap {
  fill: var(--gold);
  stroke: var(--gold-ink);
  stroke-width: 1;
}

.ben-gap-val {
  font-size: 13px;
  font-weight: 800;
  fill: var(--gold-ink);
}

/* Bedarfsniveau als ruhige Bezugslinie */
.ben-ref {
  stroke: var(--gold-ink);
  stroke-width: 1.25;
  stroke-dasharray: 5 4;
  fill: none;
  opacity: .75;
}

/* ---- Verbindung zur Ergebnisplakette ------------------------------------- */
.ben-link {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ben-link--gold  { stroke: var(--gold-ink); stroke-width: 1.75; }
.ben-link--soft  { stroke: var(--muted); stroke-dasharray: 4 4; }

/* ---- Legende -------------------------------------------------------------- */
.ben-swatch {
  stroke-width: 1;
}

.ben-legend-label {
  font-size: 10.5px;
  fill: var(--ink-2);
}

.ben-legend-val {
  font-size: 10.5px;
  font-weight: 700;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---- Ergebnisplakette ----------------------------------------------------- */
.ben-plate {
  fill: var(--soft);
  stroke: var(--gold);
  stroke-width: 2;
}

.ben-plate--none {
  stroke: var(--border-2);
  stroke-width: 1.5;
}

.ben-plate-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  fill: var(--gold-ink);
}

.ben-plate--none ~ .ben-plate-kicker {
  fill: var(--muted);
}

.ben-plate-val {
  font-size: 34px;
  font-weight: 800;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ben-plate-sub {
  font-size: 11px;
  fill: var(--ink-2);
}

.ben-extra {
  font-size: 11px;
  fill: var(--muted);
}

.ben-zero {
  font-size: 12px;
  font-weight: 600;
  fill: var(--muted);
}

/* ---- Bewegung: die Säulen wachsen aus der Achse nach oben ---------------
   Gesamtdauer inkl. aller Verzögerungen bleibt unter ~1,5 s.
   Jede skalierte Gruppe braucht transform-box/transform-origin.            */
.ben-col-grow {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ben-grow .6s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: var(--ben-d, 0s);
}

@keyframes ben-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Die Lücke öffnet sich, nachdem beide Säulen stehen. */
.ben-gap-g {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ben-open .42s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: var(--ben-d, 0s);
}

@keyframes ben-open {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

.ben-fade {
  animation: ben-fade-in .34s ease-out both;
  animation-delay: var(--ben-d, 0s);
}

@keyframes ben-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Reduzierte Bewegung: alles sofort sichtbar, nichts bewegt sich ------ */
@media (prefers-reduced-motion: reduce) {
  .ben-col-grow,
  .ben-gap-g,
  .ben-fade {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== "So rechnen wir" + interaktives Verlaufsdiagramm =====================
   Beide Bloecke nutzen die vorhandene Palette: teal fuer den Rechenweg,
   gold fuer die Kurve. Keine neuen Markenfarben, keine Aenderung am Header. */

.fx-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
  padding:26px 26px 22px;margin:22px 0}
.fx-head{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.fx-kicker{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-dark)}
.fx-card h2{margin:0;font-size:22px;line-height:1.25}
.fx-lead{color:var(--ink-2);margin:8px 0 18px;font-size:15px;line-height:1.6}

.fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fx-col h3{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
.fx-table{width:100%;border-collapse:collapse;font-size:14.5px}
.fx-table th,.fx-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border-2);
  vertical-align:top}
.fx-table th{font-weight:600;color:var(--ink-3)}
.fx-table td{color:var(--ink);font-variant-numeric:tabular-nums}
.fx-table tr:last-child th,.fx-table tr:last-child td{border-bottom:0}
.fx-steps .fx-n{width:26px;color:var(--teal);font-weight:800;font-variant-numeric:tabular-nums}
.fx-steps .fx-v{text-align:right;font-weight:700;white-space:nowrap}

.fx-final{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:18px;padding:14px 18px;background:var(--gold-tint);border:1px solid var(--gold);
  border-radius:var(--r-sm)}
.fx-final span{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.fx-final strong{font-size:21px;color:var(--ink);font-variant-numeric:tabular-nums}
.fx-note{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted)}

@media (max-width:760px){
  .fx-grid{grid-template-columns:1fr;gap:16px}
  .fx-card{padding:20px 18px 18px}
  .fx-card h2{font-size:19px}
  .fx-final strong{font-size:18px}
}

/* ===== Korrekturen Layout und Farbe ========================================
   1) Tabellen fuellten ihre Spalte nicht aus: `.content table` stand auf
      display:block. Damit ist das Element keine Tabellenbox mehr - width:100%
      gilt nur fuer den Block, die Spalten schrumpfen auf Inhaltsbreite und
      rechts bleibt Weissraum. Der Block-Modus ist nur fuer schmale Displays
      gedacht (horizontales Scrollen) und wird jetzt auch nur dort gesetzt.
   2) Das Ziegelrot des Coral-Themas wirkt neben Creme/Gold hart. Ersetzt durch
      einen warmen Bronzeton - gleiche Waerme, kein Rotstich. */

.content table{display:table;width:100%;table-layout:auto;overflow-x:visible}
.content table tbody,.content table thead{width:100%}
/* Lange Aufzaehlungen (Auswahllisten) duerfen umbrechen statt die Spalte zu sprengen */
.content table td{word-break:normal;overflow-wrap:anywhere}
.content table thead th{white-space:normal}
/* Erste Spalte traegt die Bezeichnung: etwas schmaler halten, Rest verteilt sich */
.content table th[scope="row"]{width:26%;min-width:150px}

@media (max-width:700px){
  /* Auf schmalen Displays wieder scrollbar - dort ist Weissraum kein Thema */
  .content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .content table th[scope="row"]{width:auto;min-width:120px}
}

/* ---- Eingabefelder: groesser, ruhiger, sauber ausgerichtet ---- */
.calc-page-container input[type="number"],
.calc-page-container input[type="text"],
.calc-page-container select{
  width:100%;box-sizing:border-box;
  font-size:17px;line-height:1.4;padding:14px 16px;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.calc-page-container input[type="number"]{font-variant-numeric:tabular-nums;font-weight:600}
.calc-page-container input:focus,.calc-page-container select:focus{
  outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 18%,transparent);
}
.calc-page-container select{
  appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--teal-dark) 50%),
                   linear-gradient(135deg,var(--teal-dark) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}

@media (prefers-reduced-motion: reduce){
  .calc-page-container input,.calc-page-container select{transition:none}
}

/* ===== Formularfelder auf eine gemeinsame Grundlinie ========================
   Problem: .field-grid ist ein Raster, .field eine Flex-Spalte. Felder MIT
   Hinweistext haben drei Kinder (Label, Hinweis, Eingabe), Felder OHNE nur
   zwei. Da Flex-Kinder oben beginnen, sass die Eingabe des ersten Feldes
   tiefer als die Auswahlfelder daneben - nichts lag auf einer Linie.

   Loesung: Das Bedienelement wird per margin-top:auto an den unteren Rand
   der Zelle geschoben. Rasterzellen sind ohnehin gleich hoch (align-items
   :stretch), damit stehen alle Eingaben einer Zeile exakt auf einer Linie -
   unabhaengig davon, ob ein Hinweis vorhanden ist oder wie lang er umbricht. */

.field{justify-content:flex-start}
.field>.input-row,
.field>select,
.field>input,
.field>textarea,
.field>.check-row{margin-top:auto}

/* Label und Hinweis bilden oben eine ruhige Einheit */
.field>label{margin-bottom:0}
.field>.hint{line-height:1.4}

/* Im Flex-Kontext darf die Eingabe nicht ueber die Zelle hinauswachsen */
.field .input-row{min-width:0}
.field .input-row input{min-width:0;flex:1 1 auto}
/* Einheitenfeld optisch auf Augenhoehe mit der groesseren Eingabeschrift */
.field .unit{font-size:1rem;font-weight:600;color:var(--ink-3)}

/* Einspaltig auf schmalen Displays: gleichmaessiger Abstand statt Bodenanker */
@media (max-width:700px){
  .field>.input-row,
  .field>select,
  .field>input,
  .field>textarea,
  .field>.check-row{margin-top:0}
}

/* ===========================================================================
   GLOBALER MARKENRAHMEN: KLAR UND NEUTRAL
   ---------------------------------------------------------------------------
   Die helle Seitenflaeche, weissen Karten, ruhigen Graukanten und fast schwarze
   Schrift bleiben auf allen Seiten gleich. Kategorieakzente werden weiter unten
   ausschliesslich innerhalb des jeweiligen Rechnerbereichs gesetzt.
   =========================================================================== */

/* (Token-Block entfernt: Farben kommen aus dem Rechnercenter-:root oben) */


/* Warme Restwerte, die noch fest verdrahtet waren */
.content table tbody tr:nth-child(even){background:color-mix(in srgb,#FAFBFC var(--lightmix),var(--card))}
.content table tbody tr:hover{background:color-mix(in srgb,#F2F4F5 var(--lightmix),var(--card))}
.content table thead th{background:var(--soft);color:var(--ink);border-bottom:1px solid var(--border)}
.field input:focus,.field select:focus{box-shadow:0 0 0 3px rgba(11,117,104,.14)}
.field .check-row:focus-within{box-shadow:0 0 0 3px rgba(11,117,104,.14)}
.field .check-row:hover{border-color:#C7CDD2}

/* Karten brauchen auf hellem Grund eine ruhige Kante statt warmer Schatten */
.card,.fx-card,.scope-card,.method-card{
  border-color:var(--border);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}

/* ===========================================================================
   GEMEINSAMER MARKENRAHMEN UND KATEGORIEAKZENTE
   ---------------------------------------------------------------------------
   Creme, Graphit und Gold bleiben im Seitenrahmen gleich. Innerhalb des
   Rechners sorgen abgestimmte Akzente fuer eine klare Kategoriezuordnung.

   Die Variable heisst historisch --teal; sie ist inzwischen schlicht "der
   Akzent". Umbenennen wuerde jede Regel im Projekt beruehren, deshalb wird sie
   nur umgehaengt.
   =========================================================================== */

/* (Akzent-Umhaengung entfernt: siehe Rechnercenter-:root) */

/* Premium editorial palettes. Each calculator category gets one semantic
   accent while the neutral, graphite and gold site chrome remains unchanged. */

/* Der Fokusring folgt dem Kategorieakzent. */
.field input:focus,.field select:focus,
.field .check-row:focus-within,
.calc-page-container input:focus,.calc-page-container select:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(var(--page-glow),.18);
}

/* Ergebnis und Beispielzeile bleiben die einzige farbige Flaeche */
.fx-final{background:var(--gold-tint);border-color:var(--gold)}
.fx-steps .fx-n{color:var(--ink-2)}

.fx-kicker{color:var(--ink-2)}


/* Ergebniskarte "Geld/Kosten" — reines Flow-Layout, kein SVG, kein absolut
   positionierter Text. Dadurch kann nichts ueberlappen und nichts abschneiden.
   Alle Farben stammen aus bestehenden CSS-Variablen, damit die Karte die
   Kategorie-Palette der Seite erbt (--teal wird je Kategorie umgesetzt).
   Alle Klassen tragen das Praefix gk- (geld-karte). */

/* Die Karte braucht die volle Breite, sonst quetscht sie das Raster in die
   schmale Visual-Spalte. Gleiche Vorgehensweise wie bei .precision-scene. */
.result:has(.gk-card) .result-main-grid { grid-template-columns: 1fr !important; }
.result:has(.gk-card) .calc-visual-container { align-items: stretch; }

.gk-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  animation: gk-in .45s cubic-bezier(.16, 1, .3, 1) both;
}
.gk-card *, .gk-card *::before, .gk-card *::after { box-sizing: border-box; }

/* Kopfzeile: Herkunftshinweis, keine Datenwerte. */
.gk-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
}
.gk-head span:last-child {
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 600;
}

.gk-sec { display: flex; flex-direction: column; gap: 8px; margin: 0; }

.gk-h {
  margin: 0;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Label/Wert-Paare. Lange Beschriftungen umbrechen, der Wert rutscht dann in
   die naechste Zeile — abgeschnitten wird nie etwas. */
.gk-dl { display: grid; gap: 6px; margin: 0; }
.gk-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 14px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--gold-tint);
}
.gk-dl--steps .gk-row { background: transparent; }
.gk-row-label {
  margin: 0;
  min-width: 0;
  flex: 1 1 11rem;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--ink-2);
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.gk-row-value {
  margin: 0;
  min-width: 0;
  flex: 0 1 auto;
  font-size: .95rem;
  line-height: 1.4;
  font-weight: 700;
  text-align: right;
  color: var(--teal-dark);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.gk-num { font-variant-numeric: tabular-nums; }

/* ---- Proportionaler Balken --------------------------------------------
   Breiten werden inline aus echten Betraegen gesetzt. Beschriftet wird
   ausserhalb in der Legende, damit auch schmale Segmente lesbar bleiben. */
.gk-sec--bar { gap: 12px; }
.gk-bar {
  display: flex;
  width: 100%;
  height: 20px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
  border: 1px solid var(--border);
}
.gk-seg {
  display: block;
  height: 100%;
  min-width: 2px;
  transform-origin: left center;
  animation: gk-grow .55s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--gk-i, 0) * .06s);
}

.gk-legend { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gk-leg-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.gk-swatch {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  align-self: center;
}
.gk-leg-label { flex: 1 1 9rem; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.gk-leg-value { font-weight: 700; color: var(--teal-dark); overflow-wrap: anywhere; }
.gk-leg-share { flex: 0 0 auto; color: var(--muted); }

.gk-barnote { margin: 0; font-size: .78rem; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }

/* Sechs unterscheidbare Toene, ausschliesslich aus vorhandenen Variablen. */
.gk-t1 { background: var(--teal); }
.gk-t2 { background: var(--gold); }
.gk-t3 { background: var(--teal-dark); }
.gk-t4 { background: var(--gold-ink); }
.gk-t5 { background: var(--teal-soft); }
.gk-t6 { background: color-mix(in srgb, var(--teal) 45%, var(--gold)); }

/* ---- Ergebnis ---------------------------------------------------------- */
.gk-sec--result {
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--teal-soft);
  border-radius: 12px;
  background: var(--gold-tint);
}
.gk-result-label { margin: 0; font-size: .84rem; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.gk-value {
  margin: 0;
  font-size: clamp(1.5rem, 5.2vw, 2.25rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-wrap: balance;
}

.gk-note { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---- Schmale Viewports -------------------------------------------------- */
@media (max-width: 480px) {
  .gk-card { padding: 14px; gap: 16px; }
  .gk-row { padding: 8px 10px; }
  .gk-row-label, .gk-row-value { flex-basis: 100%; text-align: left; }
  .gk-leg-share { margin-left: auto; }
}

/* ---- Bewegung ----------------------------------------------------------- */
/* Beide Animationen laufen genau einmal; kein `infinite`. */
@keyframes gk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes gk-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .gk-card, .gk-seg { animation: none !important; }
  .gk-card { opacity: 1 !important; transform: none !important; }
  .gk-seg { transform: none !important; }
}

/* Ergebniskarten "Verhaeltnis" (vk-) und "Rechenweg" (rw-).

   Reines Flow-Layout mit Grid/Flex, kein SVG und kein absolut positionierter
   Text. Dadurch kann sich nichts ueberlappen und nichts abgeschnitten werden.
   Lange Labels brechen um (overflow-wrap: anywhere), waagerechtes Scrollen
   entsteht nicht.

   Alle Farben stammen aus bestehenden CSS-Variablen, damit die Karte die
   Kategorie-Palette der Seite erbt (--teal wird je Kategorie umgesetzt).
   Es gibt keine festen Hex-Farben.

   Die Breite der Visual-Spalte wird per Container-Query ausgewertet, nicht per
   Viewport: die Karte steht je nach Seite in einer schmalen oder in einer
   breiten Spalte. */

/* Die Karten brauchen die volle Breite, sonst quetscht sie das Raster in die
   schmale Visual-Spalte. Gleiche Vorgehensweise wie bei .precision-scene. */
.result:has(.vk-card) .result-main-grid,
.result:has(.rw-card) .result-main-grid { grid-template-columns: 1fr !important; }
.result:has(.vk-card) .calc-visual-container,
.result:has(.rw-card) .calc-visual-container { align-items: stretch; }

.vk-card,
.rw-card {
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
  /* Lange Feldbezeichnungen und Formeln duerfen umbrechen statt zu ueberlaufen. */
  overflow-wrap: anywhere;
  animation: vk-rise .4s cubic-bezier(.16, 1, .3, 1) both;
}
.vk-card *,
.vk-card *::before,
.vk-card *::after,
.rw-card *,
.rw-card *::before,
.rw-card *::after { box-sizing: border-box; }

@keyframes vk-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------- */
/* Familie A: Ausgangswert -> Faktor -> Zielwert                           */
/* ---------------------------------------------------------------------- */

.vk-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.vk-head-main { color: var(--teal-dark); }

/* Einspaltig als Ausgangszustand; die Kette wird erst breit, wenn der
   Container wirklich Platz hat. */
.vk-chain {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.vk-step {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--teal-soft) 26%, var(--card));
}
.vk-step--factor {
  background: var(--gold-tint);
  border-color: color-mix(in srgb, var(--gold) 42%, var(--border));
}
.vk-step--target {
  background: color-mix(in srgb, var(--teal-soft) 58%, var(--card));
  border-color: color-mix(in srgb, var(--teal) 34%, var(--border));
}

.vk-kicker {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.vk-step--factor .vk-kicker { color: var(--gold-ink); }
.vk-step--target .vk-kicker { color: var(--teal-dark); }

.vk-value {
  font-size: 1.24rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.vk-value--factor { color: var(--gold-ink); }
.vk-value--target { color: var(--teal-dark); }

.vk-sub {
  font-size: .82rem;
  line-height: 1.35;
  color: var(--ink-2);
}

/* Mehrere Ausgangswerte: Label/Wert-Paare, die einzeln umbrechen duerfen. */
.vk-pairs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vk-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  font-size: .9rem;
  line-height: 1.35;
}
.vk-pair-label { color: var(--ink-2); min-width: 0; }
.vk-pair-value { font-weight: 700; color: var(--ink); }

.vk-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
  /* Einspaltig zeigt der Pfeil nach unten, dreispaltig nach rechts. */
  transform: rotate(90deg);
}

.vk-note {
  margin: 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Breiter Container: die Kette steht nebeneinander. */
@container (min-width: 600px) {
  .vk-chain {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .vk-arrow { transform: none; }
}

/* ---------------------------------------------------------------------- */
/* Familie B: neutrale Rechenwegkarte                                      */
/* ---------------------------------------------------------------------- */

.rw-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.rw-block + .rw-block {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.rw-title {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.rw-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Label und Wert in einer Zeile, solange Platz ist; sonst untereinander.
   Beides bleibt vollstaendig lesbar, es wird nichts gekuerzt. */
.rw-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 16px;
  padding: 7px 0;
  min-width: 0;
}
.rw-row + .rw-row { border-top: 1px dashed var(--border); }

.rw-row-label {
  margin: 0;
  min-width: 0;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.rw-row-value {
  margin: 0;
  min-width: 0;
  font-size: .92rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink);
}

.rw-block--result {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--teal-soft) 46%, var(--card));
}
.rw-block--result + .rw-block { border-top: 0; padding-top: 0; }
.rw-block--result .rw-title { color: var(--teal-dark); }

.rw-result-value {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--teal-dark);
}
.rw-result-label {
  margin: 0;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.rw-note {
  margin: 0;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Breiter Container: Label links, Wert rechtsbuendig auf einer Zeile. */
@container (min-width: 460px) {
  .rw-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }
  .rw-row-value { text-align: right; }
  .rw-result-value { font-size: 1.7rem; }
}

/* ---------------------------------------------------------------------- */
/* Bewegung abschaltbar - es gibt keine endlosen Animationen.              */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vk-card,
  .rw-card,
  .vk-card *,
  .rw-card * {
    animation: none !important;
    transition: none !important;
  }
}

/* Schaetzungs-Ergebniskarte (renderSchaetzungCard) - Gesundheit und Haustiere.
 *
 * Bewusst ohne Illustration, ohne Skala und ohne SVG: die Karte stellt den
 * Rechenweg als Text dar, damit keine Genauigkeit suggeriert wird, die eine
 * Schaetzformel nicht hergibt.
 *
 * Nur Flow-Layout (Grid/Flex), kein absolut positionierter Text. Alle Farben
 * kommen aus den bestehenden CSS-Variablen, damit die Karte der Kategorie-
 * Palette folgt (--teal wird je Kategorie umgesetzt).
 */

/* Die Karte ist eine Textkarte, keine schmale Grafik. Sie bekommt darum die
   volle Breite der Ergebnisbox statt der schmalen Visual-Spalte. Gleiche
   Technik, die style.css bereits fuer .spec-svg verwendet. */
.result:has(.sk-card) .result-main-grid {
  grid-template-columns: 1fr !important;
}

.sk-card {
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 16px;
  text-align: left;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.5;
  /* Blanko-Schutz gegen horizontales Ueberlaufen: sehr lange Beschriftungen
     oder Werte brechen notfalls innerhalb des Wortes um. */
  overflow-wrap: anywhere;
}

/* Eingaben und Annahmen nebeneinander, sobald Platz ist. min() verhindert,
   dass die Mindestbreite der Spalte breiter wird als der Container - sonst
   entstuende bei 390 px ein horizontaler Ueberlauf. */
.sk-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.sk-block,
.sk-out,
.sk-limit {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  padding: 14px 16px;
}

.sk-h {
  margin: 0 0 10px;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--teal);
}

/* ---- Label/Wert-Paare ---- */

.sk-list {
  margin: 0;
  display: grid;
  gap: 0;
}

.sk-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.sk-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Die Beschriftung darf schrumpfen und umbrechen; reicht der Platz nicht,
   rutscht der Wert in die naechste Zeile statt aus der Karte zu laufen. */
.sk-row__key {
  flex: 1 1 10rem;
  min-width: 0;
  color: var(--ink-2);
}

.sk-row__val {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  text-align: right;
  font-weight: 700;
  color: var(--teal-dark);
  font-variant-numeric: tabular-nums;
}

/* ---- Ergebnis ---- */

.sk-out {
  border-color: var(--teal-soft);
  border-left: 4px solid var(--teal);
}

.sk-out__label {
  margin: 0 0 4px;
  font-size: .9rem;
  color: var(--ink-2);
}

.sk-out__value {
  margin: 0;
  font-size: clamp(1.4rem, 4.4vw, 2rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--teal-dark);
  font-variant-numeric: tabular-nums;
}

/* ---- Grenzen der Schaetzung ---- */

.sk-limit {
  border-left: 4px solid var(--gold);
  background: var(--gold-tint);
}

.sk-h--limit {
  color: var(--gold-ink);
}

.sk-limit__text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ---- Bewegung ---- */
/* Einmaliges Einblenden der Abschnitte, keine Dauerschleife. */

@keyframes sk-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.sk-card > * {
  animation: sk-rise .42s cubic-bezier(.16, 1, .3, 1) both;
}

.sk-card > *:nth-child(2) { animation-delay: .06s; }
.sk-card > *:nth-child(3) { animation-delay: .12s; }
.sk-card > *:nth-child(4) { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .sk-card > * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- Kleine Viewports ---- */

@media (max-width: 560px) {
  .sk-card {
    gap: 14px;
    font-size: .92rem;
  }

  .sk-grid {
    gap: 14px;
  }

  .sk-block,
  .sk-out,
  .sk-limit {
    padding: 12px 13px;
  }

  /* Bei sehr schmalem Raum steht der Wert unter der Beschriftung und wird
     linksbuendig gesetzt - rechtsbuendig wirkt sonst wie ein Fehler. */
  .sk-row__key {
    flex-basis: 100%;
  }

  .sk-row__val {
    text-align: left;
  }
}

/* Date/Time keeps its useful illustrations but uses the site's dusty-blue
   category palette instead of the retired lavender/purple treatment. */
.calc-theme-date .time-duration-second{background:linear-gradient(145deg,var(--card) 0%,color-mix(in srgb,var(--teal-soft) 46%,var(--card)) 100%);border-color:color-mix(in srgb,var(--teal) 28%,var(--border))}
.calc-theme-date .time-calculator-form{border-top-color:var(--teal)}
.calc-theme-date .time-calculator-form:focus-within{border-color:color-mix(in srgb,var(--teal) 38%,var(--border));box-shadow:0 24px 48px -30px rgba(var(--page-glow),.35)}
.calc-theme-date .result:has(.date-scene){background:linear-gradient(155deg,var(--card) 0%,color-mix(in srgb,var(--teal-soft) 20%,var(--card)) 100%);border-color:color-mix(in srgb,var(--teal) 25%,var(--border));border-top-color:var(--teal)}
.calc-theme-date .result:has(.date-scene) .calc-visual-container{border-top-color:color-mix(in srgb,var(--teal) 18%,var(--border))}
.calc-theme-date .date-scene{--dt-lavender:var(--teal);--dt-ink:#283544;border-color:color-mix(in srgb,var(--teal) 22%,var(--border));background:linear-gradient(145deg,var(--card) 0%,color-mix(in srgb,var(--teal-soft) 24%,var(--card)) 100%);box-shadow:0 24px 50px -38px rgba(var(--page-glow),.42)}
.calc-theme-date .date-scene .precision-scene__head,.calc-theme-date .dt-kicker,.calc-theme-date .dt-equation-op,.calc-theme-date .dt-responsive-kicker,.calc-theme-date .dt-time-symbol,.calc-theme-date .dt-zone-html-arrow{color:var(--teal);fill:var(--teal)!important}
.calc-theme-date .dt-rule{stroke:color-mix(in srgb,var(--teal) 18%,var(--card))}
.calc-theme-date .dt-soft-panel,.calc-theme-date .dt-zone-html-note{fill:color-mix(in srgb,var(--teal-soft) 62%,var(--card));stroke:color-mix(in srgb,var(--teal) 24%,var(--card));background:color-mix(in srgb,var(--teal-soft) 62%,var(--card));border-color:color-mix(in srgb,var(--teal) 24%,var(--card))}
.calc-theme-date .dt-orbit-base,.calc-theme-date .dt-timeline,.calc-theme-date .dt-deadline-track,.calc-theme-date .dt-duration-track{stroke:color-mix(in srgb,var(--teal-soft) 72%,var(--card));fill:color-mix(in srgb,var(--teal-soft) 72%,var(--card))}
.calc-theme-date .dt-day-cell:nth-of-type(3n),.calc-theme-date .dt-ledger-track,.calc-theme-date .dt-protection-base{fill:color-mix(in srgb,var(--teal-soft) 68%,var(--card))}
.calc-theme-date .dt-clock-face,.calc-theme-date .dt-wheel-center{stroke:color-mix(in srgb,var(--teal) 22%,var(--card))}
.calc-theme-date .dt-minute-hand,.calc-theme-date .dt-op,.calc-theme-date .dt-tick{stroke:var(--teal);fill:var(--teal)!important}
.calc-theme-date .dt-arrow,.calc-theme-date .dt-zone-arc,.calc-theme-date .dt-zone-arrow{stroke:color-mix(in srgb,var(--teal) 48%,var(--card))}
.calc-theme-date .dt-duration-card:nth-of-type(2) rect,.calc-theme-date .dt-time-box:nth-of-type(2){fill:color-mix(in srgb,var(--teal-soft) 66%,var(--card));background:color-mix(in srgb,var(--teal-soft) 66%,var(--card));stroke:color-mix(in srgb,var(--teal) 26%,var(--card));border-color:color-mix(in srgb,var(--teal) 26%,var(--card))}
.calc-theme-date .dt-time-bar>div{background:color-mix(in srgb,var(--teal-soft) 72%,var(--card))}
.calc-theme-date .dt-weekday circle,.calc-theme-date .dt-month rect,.calc-theme-date .dt-bridge-row rect{fill:color-mix(in srgb,var(--teal-soft) 58%,var(--card));stroke:color-mix(in srgb,var(--teal) 22%,var(--card))}
.priority-care-mind{fill:#6E8795}

/* ==========================================================================
   SEMANTISCHE RECHNERFORMULARE
   Profile group existing native fields; no duplicated calculation inputs.
   ========================================================================== */
.ui-profile-form{--ui-section-bg:color-mix(in srgb,var(--teal-soft) 18%,var(--card))}
.ui-profile-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:16px!important;align-items:stretch}
.ui-profile-section{min-width:0;padding:18px;border:1px solid color-mix(in srgb,var(--teal) 18%,var(--border));border-radius:18px;background:linear-gradient(145deg,var(--card) 0%,var(--ui-section-bg) 100%);box-shadow:0 15px 30px -30px rgba(var(--page-glow),.5)}
.ui-profile-section-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.ui-profile-section-head>div{min-width:0;flex:1}.ui-profile-section-head h2{margin:1px 0 3px;font:850 1rem/1.25 var(--font-disp);color:var(--ink)}
.ui-profile-section-head p{margin:0;max-width:68ch;font-size:.78rem;line-height:1.45;color:var(--ink-2)}
.ui-profile-step{display:grid;place-items:center;width:30px;height:30px;min-width:30px;border-radius:10px;background:var(--teal);color:#fff;font:900 .78rem/1 var(--font-disp);box-shadow:0 8px 18px -12px rgba(var(--page-glow),.8)}
/* Ein Feld je Zeile. Bei zwei Spalten blieb neben einem Auswahlfeld, das
   ueber beide Spalten laeuft, eine halbe Zeile leer - das Eingabefeld sah
   dann abgeschnitten aus. Ausnahmen bleiben --dimensions (L x B x H fuellt
   die Zeile ohnehin) und --conversion (zwei Felder mit Tauschknopf dazwischen). */
.ui-profile-section-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.ui-profile-section-fields>.field{min-width:0;margin:0}.ui-profile-section-fields>.field.full{grid-column:1/-1}
.ui-profile-section--paired .ui-profile-section-fields{grid-template-columns:minmax(0,1fr)}
.ui-profile-section--dimensions .ui-profile-section-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
.ui-profile-section--conversion .ui-profile-section-fields{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end}
.ui-profile--quick-input .ui-profile-section{padding:22px}.ui-profile--quick-input .ui-profile-section-fields{max-width:760px;margin-inline:auto}
.ui-profile--quick-input .ui-profile-section-fields input{font-size:1.15rem;font-weight:800}
.ui-profile--comparison .ui-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.ui-profile--comparison .ui-profile-section{border-top:4px solid var(--teal)}
.ui-profile--comparison .ui-profile-section:last-child{grid-column:1/-1;border-top-color:var(--gold)}
.ui-profile--guided-steps .ui-profile-section,.ui-profile--date-journey .ui-profile-section{position:relative}
.ui-profile--guided-steps .ui-profile-section:not(:last-child)::after,.ui-profile--date-journey .ui-profile-section:not(:last-child)::after{content:"";position:absolute;left:32px;bottom:-17px;width:2px;height:17px;background:color-mix(in srgb,var(--teal) 35%,var(--border))}

.ui-choice-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.ui-choice-field{grid-column:1/-1}.ui-choice-grid{display:grid;gap:10px;margin-top:7px}
.ui-choice-grid--cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ui-choice-grid--segments{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.ui-choice-option{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:54px;padding:11px 13px;border:1.5px solid color-mix(in srgb,var(--teal) 23%,var(--border));border-radius:13px;background:color-mix(in srgb,var(--teal-soft) 24%,var(--card));color:var(--ink);font:750 .8rem/1.3 var(--font-body);text-align:center;cursor:pointer;box-shadow:none;transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease}
.ui-choice-grid--cards .ui-choice-option{flex-direction:column;min-height:78px;padding:13px}
.ui-choice-option:hover{border-color:var(--teal);background:color-mix(in srgb,var(--teal-soft) 50%,var(--card));transform:translateY(-1px)}
.ui-choice-option:focus-visible{outline:3px solid rgba(var(--page-glow),.2);outline-offset:2px}
/* Ausgewaehlte Auswahl hell statt satt gefuellt. Auf Seiten mit mehreren
   Ja/Nein-Fragen standen sonst mehrere grosse, voll gesaettigte Flaechen
   uebereinander - das erschlaegt die Seite. Der farbige Rahmen plus heller
   Grund kennzeichnet die Auswahl genauso eindeutig, bleibt aber ruhig. */
.ui-choice-option.is-selected{border-color:var(--teal);
  background:var(--teal-soft);
  color:var(--teal-dark);
  box-shadow:inset 0 0 0 1px var(--teal),0 6px 16px -14px rgba(var(--page-glow),.7)}
.ui-choice-icon{display:grid;place-items:center;min-width:34px;height:30px;padding-inline:7px;border-radius:9px;background:var(--card);color:var(--teal-dark);font:900 .94rem/1 var(--font-disp)}
.ui-choice-copy{min-width:0;overflow-wrap:anywhere}

.ui-profile-swap{align-self:end;display:grid;place-items:center;gap:1px;min-width:64px;height:54px;margin-bottom:0;padding:6px 10px;border:1.5px solid color-mix(in srgb,var(--teal) 30%,var(--border));border-radius:13px;background:var(--card);color:var(--teal-dark);font:800 .68rem/1.1 var(--font-body);cursor:pointer}
.ui-profile-swap>span:first-child{font-size:1.25rem}.ui-profile-swap:hover{background:var(--teal-soft);border-color:var(--teal)}
.ui-optional-toggle{display:flex;align-items:center;gap:7px;margin-left:auto;padding:8px 11px;border:1px solid color-mix(in srgb,var(--teal) 24%,var(--border));border-radius:11px;background:var(--card);color:var(--teal-dark);font:800 .72rem/1.2 var(--font-body);cursor:pointer;white-space:nowrap}
.ui-optional-toggle span{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:var(--teal-soft);font-size:1rem}.ui-optional-toggle:hover{border-color:var(--teal)}
.ui-profile-section--optional:not(.is-open){background:color-mix(in srgb,var(--teal-soft) 12%,var(--card))}

.ui-input-summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;margin:18px 0 2px;padding:13px 14px;border:1px solid color-mix(in srgb,var(--teal) 21%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--teal-soft) 28%,var(--card))}
.ui-input-summary-label{padding-top:5px;color:var(--teal-dark);font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.ui-input-summary-values{display:flex;flex-wrap:wrap;gap:7px}.ui-input-summary-values>span{display:grid;gap:1px;min-width:105px;padding:6px 9px;border-radius:9px;background:var(--card);border:1px solid color-mix(in srgb,var(--teal) 13%,var(--border))}
.ui-input-summary-values small{font-size:.59rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-input-summary-values strong{font-size:.75rem;color:var(--ink);overflow-wrap:anywhere}
.ui-input-summary-values .ui-summary-more{display:flex;align-items:center;min-width:auto;color:var(--teal-dark);font-size:.7rem;font-weight:850}
.ui-profile-validation{margin:13px 0 0;padding:10px 12px;border:1px solid #e7b8b2;border-radius:11px;background:color-mix(in srgb,#fff5f3 var(--lightmix),var(--card));color:#7a332d;font-size:.78rem;font-weight:750;text-align:center}

@media(max-width:800px){
  .ui-profile--comparison .ui-profile-grid{grid-template-columns:1fr!important}
  .ui-profile--comparison .ui-profile-section:last-child{grid-column:auto}
  .ui-profile-section--dimensions .ui-profile-section-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-profile-section--dimensions .ui-profile-section-fields>.field:last-child{grid-column:1/-1}
}
@media(max-width:560px){
  .ui-profile-section{padding:15px}.ui-profile-section-head{gap:10px;margin-bottom:14px}
  .ui-profile-section-fields,.ui-profile-section--paired .ui-profile-section-fields,.ui-profile-section--dimensions .ui-profile-section-fields{grid-template-columns:1fr}
  .ui-profile-section--dimensions .ui-profile-section-fields>.field:last-child{grid-column:auto}
  .ui-profile-section--conversion .ui-profile-section-fields{grid-template-columns:1fr}
  .ui-profile-swap{justify-self:center;width:112px;height:46px;margin-block:-2px}
  .ui-choice-grid--cards{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-choice-grid--segments{grid-template-columns:1fr}
  .ui-choice-option{min-height:50px}.ui-choice-grid--cards .ui-choice-option{min-height:70px;padding:10px 8px}
  .ui-optional-toggle{width:100%;margin:10px 0 0;justify-content:center;white-space:normal}.ui-profile-section-head:has(.ui-optional-toggle){flex-wrap:wrap}
  .ui-input-summary{grid-template-columns:1fr;gap:7px}.ui-input-summary-label{padding:0}
}
@media(prefers-reduced-motion:reduce){.ui-choice-option{transition:none}.ui-choice-option:hover{transform:none}}

/* ===== Auswahlfelder als Kachelraster ======================================
   Ersetzt optisch die Aufklappliste bei Feldern mit 2-6 Optionen. Farben
   kommen ausschliesslich aus den Kategorievariablen (--teal / --teal-soft /
   --teal-dark), damit jede Kategorie ihren Ton behaelt. Header, Menue und
   globale Marke bleiben unberuehrt.
   =========================================================================== */

.ot-hidden-select{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.ot-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2px}
.ot-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ot-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.ot-tile{
  display:flex;align-items:center;gap:10px;text-align:left;
  min-height:52px;padding:11px 13px;
  border:1.5px solid color-mix(in srgb, var(--teal) 22%, var(--border));
  border-radius:14px;
  background:var(--card);color:var(--ink);
  font:600 .9rem/1.3 var(--font);
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.ot-tile:hover{
  border-color:var(--teal);
  background:color-mix(in srgb, var(--teal-soft) 40%, var(--card));
}
.ot-tile:focus-visible{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 28%, transparent);
}
.ot-tile.is-on{
  border-color:var(--teal);
  background:color-mix(in srgb, var(--teal-soft) 62%, var(--card));
  box-shadow:inset 0 0 0 1px var(--teal);
}
.ot-tile.is-on .ot-text{color:var(--teal-dark);font-weight:800}

.ot-lead{display:grid;place-items:center;min-width:34px;width:34px;height:34px;
  border-radius:10px;background:color-mix(in srgb, var(--teal-soft) 70%, var(--card));flex:0 0 auto}
.ot-tile.is-on .ot-lead{background:var(--card)}
.ot-emoji{font-size:1.15rem;line-height:1}
.ot-text{min-width:0;overflow-wrap:anywhere}

/* Stufenanzeige fuer gering / mittel / stark - ehrlicher als ein Symbol */
.ot-level{display:flex;align-items:flex-end;gap:2.5px;height:17px}
.ot-level-bar{width:4.5px;border-radius:1.5px;background:color-mix(in srgb, var(--teal) 22%, var(--card));height:6px}
.ot-level-bar:nth-child(2){height:11px}
.ot-level-bar:nth-child(3){height:16px}
.ot-level-bar--on{background:var(--teal)}

@media (max-width:760px){
  .ot-grid,.ot-grid--2,.ot-grid--3{grid-template-columns:1fr}
  .ot-tile{min-height:48px;padding:10px 12px;font-size:.88rem}
}

@media (prefers-reduced-motion: reduce){
  .ot-tile{transition:none}
}

/* ===== Ergebnisgrafiken der vier neuen Rechner =============================
   Farben kommen aus den Kategorievariablen (--teal / --teal-soft /
   --teal-dark), damit jede Kategorie ihren eigenen Ton behaelt. Header,
   Menue und globale Marke bleiben unberuehrt.
   =========================================================================== */

.ns-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
  padding:20px 22px 18px;margin-top:16px;
}
.ns-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:12px;
}
.ns-eyebrow{
  font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--teal-dark);
}
.ns-head>span:last-child{font-size:12px;color:var(--muted)}
.ns-body{width:100%}
.ns-svg{width:100%;height:auto;display:block;overflow:visible}
.ns-foot{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}

/* gemeinsame Beschriftungen */
.ns-k{fill:var(--muted);font:800 11.5px/1 var(--font);letter-spacing:.07em}
.ns-v{fill:var(--ink);font:900 27px/1 var(--font-disp);font-variant-numeric:tabular-nums}
.ns-v--klein{font-size:19px}

/* ---- Tellerrock ---- */
.ns-tr-aussen{fill:color-mix(in srgb,var(--teal-soft) 55%,var(--card));stroke:var(--teal);stroke-width:2}
.ns-tr-innen{fill:var(--card);stroke:var(--teal-dark);stroke-width:2;stroke-dasharray:5 4}
.ns-tr-sektor{fill:color-mix(in srgb,var(--teal-soft) 55%,var(--card));stroke:var(--teal);stroke-width:2}
.ns-tr-mass{stroke:var(--teal-dark);stroke-width:1.5;stroke-dasharray:4 3}
.ns-tr-mass--lang{stroke:var(--gold-ink)}
.ns-tr-punkt{fill:var(--teal-dark)}

/* ---- Intervallfasten ---- */
.ns-if-grund{stroke:var(--soft2)}
.ns-if-fasten{stroke:color-mix(in srgb,var(--teal) 26%,var(--card));stroke-linecap:butt}
.ns-if-essen{stroke:var(--teal);stroke-linecap:butt}
.ns-if-tick{fill:var(--muted);font:800 12px/1 var(--font);font-variant-numeric:tabular-nums}
.ns-if-legende{fill:var(--ink-2);font:600 13.5px/1 var(--font)}
.ns-if-key-fasten{fill:color-mix(in srgb,var(--teal) 26%,var(--card))}
.ns-if-key-essen{fill:var(--teal)}

/* ---- Numerologie ---- */
.ns-nu-schritt{fill:var(--ink);font:700 19px/1 var(--font);font-variant-numeric:tabular-nums}
.ns-nu-pfeil{stroke:var(--teal);stroke-width:2;stroke-dasharray:3 3}
.ns-nu-kreis{fill:color-mix(in srgb,var(--teal-soft) 60%,var(--card));stroke:var(--teal);stroke-width:2.5}
.ns-nu-zahl{fill:var(--teal-dark);font:900 58px/1 var(--font-disp)}

/* ---- Cup / Gramm ---- */
.ns-cup-glas{fill:none;stroke:var(--teal-dark);stroke-width:2.5;stroke-linejoin:round}
.ns-cup-fuell{fill:color-mix(in srgb,var(--teal-soft) 75%,var(--card))}
.ns-cup-strich{stroke:var(--teal-dark);stroke-width:1.4}
.ns-cup-tick{fill:var(--muted);font:800 11.5px/1 var(--font)}

@media (max-width:760px){
  .ns-card{padding:16px 14px 14px}
  .ns-v{font-size:22px}
  .ns-v--klein{font-size:17px}
  .ns-nu-zahl{font-size:46px}
}

@media (prefers-reduced-motion: reduce){
  .ns-card *{animation:none!important;transition:none!important}
}

/* Alltag & Freizeit - eigener Ton, klar unterscheidbar von Blau (Datum)
   und Rot (Gesundheit). */

/* ===== "Was dieser Rechner leistet" + "So ist die Berechnung einzuordnen" ===
   Beide Karten wiederholten dieselbe Beschriftung-Wert-Folge acht Mal
   untereinander - dadurch wirkte der Abschnitt wie eine Textwand. Sie werden
   jetzt als ein zusammenhaengender Block gelesen: gemeinsame Kante, ruhigere
   Beschriftungen, klarere Rangfolge zwischen Label und Aussage. */

.scope-card{border-radius:var(--r-md) var(--r-md) 0 0;border-bottom:0;margin-bottom:0}
.method-card{border-radius:0 0 var(--r-md) var(--r-md);margin-top:0;
  background:color-mix(in srgb, var(--teal-soft) 22%, var(--card))}

.scope-kicker{color:var(--teal-dark)}
.scope-card h2,.method-card h2{font-size:19px;line-height:1.3}

/* Beschriftungen zurueckhaltender, Aussagen deutlicher */
.scope-grid>div>span,.method-grid>div>span{
  display:block;font-size:11px;font-weight:800;letter-spacing:.085em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.scope-grid>div>p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.method-grid>div>strong{font-size:14.5px;font-weight:650;color:var(--ink)}

/* Zwei ruhige Spalten statt vier gleich lauter Felder */
.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}

/* Quellenlinks als dezente Zeilen, nicht als Schaltflaechen */
.method-source-links a{
  display:block;font-size:13.5px;line-height:1.5;color:var(--teal-dark);
  text-decoration:none;padding:2px 0}
.method-source-links a:hover{text-decoration:underline}
.method-source-links small{display:block;color:var(--muted);font-size:11.5px;font-weight:500}

@media (max-width:760px){
  .scope-grid,.method-grid{grid-template-columns:1fr;gap:14px}
  .scope-card h2,.method-card h2{font-size:17px}
}

/* ===== Geprüfte Steuerwerte 2026 ==========================================
   Auf Steuerseiten ist die erste Frage, mit welchen Größen gerechnet wird.
   Der Block macht das sichtbar: Wert, Erläuterung, Rechtsgrundlage, Quelle. */

.sw-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
  padding:24px 24px 20px;margin:20px 0}
.sw-lead{margin:6px 0 16px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.sw-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 24px}
.sw-zeile{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  gap:0 14px;padding:11px 0;border-bottom:1px solid var(--border-2)}
.sw-label{font-size:14.5px;font-weight:650;color:var(--ink)}
.sw-wert{grid-column:2;grid-row:1;font-size:15px;font-weight:800;color:var(--teal-dark);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sw-zusatz{grid-column:1/3;grid-row:2;font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:3px}
.sw-quellen{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--border-2)}
.sw-quellen a{font-size:13px;color:var(--teal-dark);text-decoration:none}
.sw-quellen a:hover{text-decoration:underline}

@media (max-width:760px){
  .sw-card{padding:18px 16px 16px}
  .sw-grid{grid-template-columns:1fr;gap:0}
}

/* Cookie-Einstellungen in der Fusszeile: Widerruf muss so leicht erreichbar
   sein wie die Einwilligung (Art. 7 Abs. 3 DSGVO). */
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  opacity: .85;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Datumsfeld: Eingabe und Kalender ----------
   Das native <input type="date"> bleibt im Formular (Wert, Pflichtpruefung),
   wird aber wie .ui-choice-native nur noch fuer Hilfstechnik gefuehrt.
   Sichtbar sind ein Textfeld im Format TT.MM.JJJJ und ein Kalenderknopf.

   WICHTIG - Spezifitaet: Textfeld und Auswahllisten liegen innerhalb von
   .field. Die Grundregel ".field input,.field select" (0,1,1) schlaegt eine
   einfache Klasse (0,1,0). Deshalb ist hier alles mit ".kal " davor
   geschrieben (0,2,0) - sonst erben die Auswahllisten Polsterung und
   Schriftgroesse der Formularfelder, und ihr Text wird aus dem
   sichtbaren Bereich geschoben. */
.kal-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.kal{position:relative}

.kal .kal-feld{display:flex;gap:8px;align-items:stretch}
.kal .kal-text{
  flex:1 1 auto;width:auto;min-width:0;min-height:52px;
  padding:12px 14px;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);
  font:inherit;font-size:1rem;font-variant-numeric:tabular-nums;letter-spacing:.01em;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.kal .kal-text::placeholder{color:var(--muted);letter-spacing:.04em}
.kal .kal-text:hover:not(:focus){border-color:#c9bfa8}
.kal .kal-text:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,117,104,.14)}
.kal .kal-text.is-fehler{border-color:#c2554b;box-shadow:0 0 0 3px rgba(194,85,75,.13)}

.kal .kal-open{
  flex:0 0 auto;display:grid;place-items:center;
  width:52px;min-width:52px;min-height:52px;padding:0;
  border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--card);
  cursor:pointer;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 16 16' fill='none' stroke='%234B5563' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='2' y='3.2' width='12' height='11' rx='2.2'/%3E%3Cpath d='M2 6.9h12M5.4 1.6v3M10.6 1.6v3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.kal .kal-open:hover{border-color:var(--teal);background-color:color-mix(in srgb,var(--teal-soft) 32%,var(--card))}
.kal .kal-open:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,117,104,.14)}
.kal .kal-open[aria-expanded="true"]{border-color:var(--teal);background-color:color-mix(in srgb,var(--teal-soft) 45%,var(--card))}

.kal .kal-panel{
  position:absolute;z-index:60;top:calc(100% + 8px);left:0;
  width:min(340px,calc(100vw - 32px));padding:14px;
  border:1.5px solid var(--border);border-radius:var(--r);
  background:var(--card);box-shadow:var(--shadow-pop);
}
.kal .kal-panel[hidden]{display:none}

.kal .kal-kopf{display:flex;align-items:center;gap:7px;margin-bottom:11px}
.kal .kal-waehler{flex:1;display:flex;gap:6px;min-width:0}

/* Auswahllisten fuer Monat und Jahr: alle Werte ausdruecklich setzen, damit
   nichts aus der allgemeinen Formularregel durchschlaegt. */
.kal .kal-select{
  flex:1;width:auto;min-width:0;height:38px;min-height:38px;
  padding:0 26px 0 10px;
  border:1.5px solid var(--border);border-radius:10px;
  background-color:var(--card);color:var(--ink);
  font-family:var(--font-body);font-size:.86rem;font-weight:700;line-height:36px;
  cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;
}
.kal .kal-monat{flex:1.6}
.kal .kal-jahr{flex:1;font-variant-numeric:tabular-nums}
.kal .kal-select:hover{border-color:var(--teal)}
.kal .kal-select:focus,
.kal .kal-select:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,117,104,.14)}
.kal .kal-select option{font-size:.95rem;font-weight:600;color:var(--ink);background:var(--card)}

.kal .kal-nav{
  flex:0 0 auto;display:grid;place-items:center;
  width:36px;min-width:36px;height:38px;padding:0;
  border:1.5px solid var(--border);border-radius:10px;background:var(--card);
  color:var(--teal-dark);font-family:var(--font-body);font-size:1.2rem;font-weight:700;line-height:1;
  cursor:pointer;transition:border-color .15s ease,background-color .15s ease;
}
.kal .kal-nav:hover{border-color:var(--teal);background-color:color-mix(in srgb,var(--teal-soft) 35%,var(--card))}
.kal .kal-nav:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,117,104,.14)}

.kal .kal-wochentage{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.kal .kal-wochentage span{display:grid;place-items:center;height:26px;font-family:var(--font-body);font-size:.68rem;font-weight:700;line-height:1;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}

.kal .kal-gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.kal .kal-tag{
  display:grid;place-items:center;aspect-ratio:1;min-height:38px;padding:0;
  border:1.5px solid transparent;border-radius:10px;background:transparent;color:var(--ink);
  font-family:var(--font-body);font-size:.88rem;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;cursor:pointer;
  transition:background-color .13s ease,border-color .13s ease,color .13s ease;
}
.kal .kal-tag:hover:not(:disabled){background-color:color-mix(in srgb,var(--teal-soft) 45%,var(--card))}
.kal .kal-tag:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,117,104,.14)}
.kal .kal-tag.is-fremd{color:color-mix(in srgb,var(--muted) 62%,var(--card))}
.kal .kal-tag.is-heute{border-color:var(--teal)}
.kal .kal-tag.is-gewaehlt{background-color:var(--teal);border-color:var(--teal);color:#fff;font-weight:750}
.kal .kal-tag.is-gewaehlt:hover{background-color:var(--teal-dark)}
.kal .kal-tag:disabled{color:color-mix(in srgb,var(--muted) 45%,var(--card));cursor:not-allowed}

.kal .kal-fuss{display:flex;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid var(--border)}
.kal .kal-aktion{
  flex:1;min-height:38px;padding:8px 12px;
  border:1.5px solid var(--border);border-radius:10px;background:var(--card);color:var(--teal-dark);
  font-family:var(--font-body);font-size:.8rem;font-weight:700;line-height:1.2;
  cursor:pointer;transition:border-color .15s ease,background-color .15s ease;
}
.kal .kal-aktion:hover{border-color:var(--teal);background-color:color-mix(in srgb,var(--teal-soft) 35%,var(--card))}
.kal .kal-aktion:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,117,104,.14)}

@media (max-width:560px){
  .kal .kal-panel{left:auto;right:0;width:min(340px,calc(100vw - 28px))}
  .kal .kal-tag{min-height:40px}
}
@media (prefers-reduced-motion:reduce){
  .kal .kal-text,.kal .kal-open,.kal .kal-nav,.kal .kal-tag,.kal .kal-aktion,.kal .kal-select{transition:none}
}

/* ---------- Mobil: verschachtelte Rahmen aufloesen ----------
   Auf dem Telefon lagen bisher vier Container ineinander, jeder mit eigener
   Polsterung und eigenem Rahmen: Seitenrand, Hauptkarte, Formularkarte und
   Abschnittskarte. Zusammen kostete das 140 von 375 Pixeln — 37 % der
   Bildschirmbreite, bevor das erste Eingabefeld beginnt.

   Hier bleibt genau ein sichtbarer Rahmen uebrig: die nummerierte
   Abschnittskarte. Die Formularkarte darin ist auf kleinen Schirmen
   redundant und wird durchsichtig geschaltet. */
@media (max-width: 560px) {

  .calc-page-container{padding:0 8px}

  .calc-card-main{
    padding:16px 10px;
    margin-top:14px;
    margin-bottom:20px;
    border-radius:16px;
  }

  /* Formularkarte: nur noch Gruppierung, keine zweite Umrandung */
  .calc-wrap .card,
  .calc-wrap form.card{
    padding:0;
    border:0;
    background:none;
    box-shadow:none;
    border-radius:0;
  }

  /* Abschnittskarte bleibt sichtbar, aber schmaler gepolstert */
  .ui-profile-section{
    padding:14px 11px;
    border-radius:14px;
  }
  .ui-profile-section-head{margin-bottom:12px;gap:9px}
  .ui-profile-section-head p{font-size:.75rem;line-height:1.4}

  /* Weniger Luft zwischen den Feldern — die Seite war sehr lang */
  .field-grid{gap:12px}
  .ui-profile-section-fields{gap:11px}
  .field label{margin-bottom:5px}

  /* Eingabefelder duerfen die gewonnene Breite auch nutzen */
  .field input,
  .field select,
  .kal .kal-text{padding-left:13px;padding-right:13px}
}

/* Sehr schmale Geraete: noch eine Stufe enger */
@media (max-width: 380px) {
  .calc-page-container{padding:0 6px}
  .calc-card-main{padding:14px 8px}
  .ui-profile-section{padding:12px 9px}
}

/* Breite Tabellen auf dem Telefon in sich scrollen lassen, statt sie ueber
   die Textspalte hinausragen zu lassen. */
@media (max-width: 560px) {
  .content table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .content table thead,
  .content table tbody{width:max-content;min-width:100%}
}

/* Einheiten-Beschriftung neben Zahlenfeldern: auf dem Telefon schmaler.
   "€/Monat" belegte 94 von 317 Pixeln der Zeile, das Eingabefeld blieb
   dadurch deutlich schmaler als die Auswahlfelder daneben. */
@media (max-width: 560px) {
  .field .unit{
    padding:0 9px;
    font-size:.82rem;
    white-space:nowrap;
  }
  .field .input-row input{min-width:0}
}

/* ---------- Label/Wert-Tabellen auf dem Telefon stapeln ----------
   Die Rechenbeispiel-Tabellen bestehen aus Beschriftung und Wert. Seitliches
   Scrollen ist dafuer das falsche Mittel: der Wert steht dann ausserhalb des
   Bildschirms, und man muss nach rechts wischen, um ihn zu sehen.
   Auf schmalen Schirmen wird daraus je Zeile ein Block: Beschriftung oben,
   Wert darunter. Damit entfaellt das Scrollen ganz.

   Doppelte Klasse (.fx-table.fx-table) nur wegen der Spezifitaet — die
   allgemeine Regel ".content table" ist sonst staerker. */
@media (max-width: 560px) {

  .fx-table.fx-table,
  .fx-table.fx-table tbody,
  .fx-table.fx-table tr,
  .fx-table.fx-table th,
  .fx-table.fx-table td{
    display:block;
    width:auto;
    min-width:0;
    overflow-x:visible;
    white-space:normal;
  }

  .fx-table.fx-table{border-collapse:collapse}

  .fx-table.fx-table tr{
    padding:9px 0;
    border-bottom:1px solid var(--border);
  }
  .fx-table.fx-table tr:last-child{border-bottom:0}

  .fx-table.fx-table th[scope="row"]{
    padding:0 0 2px;
    border:0;
    background:none;
    font:600 .76rem/1.35 var(--font-body);
    color:var(--muted);
    text-align:left;
  }

  .fx-table.fx-table td{
    padding:0;
    border:0;
    font:700 .95rem/1.35 var(--font-body);
    color:var(--ink);
    text-align:left;
    overflow-wrap:anywhere;
  }

  /* Schritt-Tabelle: die Nummer wandert neben die Beschriftung,
     statt eine eigene Spalte zu belegen. */
  .fx-steps.fx-steps tr{
    position:relative;
    padding-left:25px;
  }
  .fx-steps.fx-steps .fx-n{
    position:absolute;
    left:0;
    top:9px;
    width:20px;
    padding:0;
    font:700 .72rem/1.35 var(--font-body);
    color:var(--teal);
  }
  .fx-steps.fx-steps .fx-v{
    font-variant-numeric:tabular-nums;
  }
}

/* ---------- Datentabellen auf dem Telefon stapeln ----------
   Tabellen mit Kopfzeile (Referenzdaten, Szenarien, Eingabeuebersicht) sind
   auf einem 375-Pixel-Schirm bis zu 600 Pixel breit. Seitliches Scrollen ist
   dafuer unbrauchbar: der Wert steht ausserhalb des Bildes.

   Stattdessen wird jede Zeile zu einem Block. Die Spaltenueberschrift steht
   als data-label an der Zelle (gesetzt in calc.js) und erscheint davor.
   Doppelte Klasse bzw. Attributselektor nur wegen der Spezifitaet gegenueber
   der allgemeinen Regel ".content table". */
@media (max-width: 560px) {

  .content table[data-gestapelt="1"],
  .content table[data-gestapelt="1"] tbody,
  .content table[data-gestapelt="1"] tr,
  .content table[data-gestapelt="1"] td,
  .content table[data-gestapelt="1"] th{
    display:block;
    width:auto;
    min-width:0;
    overflow-x:visible;
    white-space:normal;
  }

  /* Kopfzeile entfaellt - ihre Inhalte stehen jetzt an den Zellen */
  .content table[data-gestapelt="1"] thead{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    clip-path:inset(50%);
    white-space:nowrap;
  }

  .content table[data-gestapelt="1"]{border-collapse:collapse;margin:14px 0}

  .content table[data-gestapelt="1"] tbody tr{
    padding:11px 12px;
    margin-bottom:9px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--soft);
  }
  .content table[data-gestapelt="1"] tbody tr:last-child{margin-bottom:0}

  .content table[data-gestapelt="1"] tbody td,
  .content table[data-gestapelt="1"] tbody th{
    padding:4px 0;
    border:0;
    background:none;
    text-align:left;
    font:600 .88rem/1.4 var(--font-body);
    color:var(--ink);
    overflow-wrap:anywhere;
  }

  /* Spaltenueberschrift als kleine Zeile ueber dem Wert */
  .content table[data-gestapelt="1"] tbody td[data-label]::before,
  .content table[data-gestapelt="1"] tbody th[data-label]::before{
    content:attr(data-label);
    display:block;
    margin-bottom:1px;
    font:700 .68rem/1.35 var(--font-body);
    letter-spacing:.02em;
    color:var(--muted);
    text-transform:uppercase;
  }

  /* Erste Zelle einer Zeile als Ueberschrift des Blocks hervorheben */
  .content table[data-gestapelt="1"] tbody tr > *:first-child{
    font-weight:750;
    padding-top:0;
  }
}

/* ---------- Verdichtete Auswahl (kurzes Kuerzel + Erlaeuterung) ----------
   Optionen wie "V (verheiratet, geringeres Einkommen)" sind zu lang, um
   nebeneinander zu passen; sechs davon untereinander ergaben auf dem Telefon
   350 Pixel allein fuer die Steuerklasse. Steht nur das Kuerzel im Knopf,
   passen mehrere in eine Reihe, und die Erlaeuterung der getroffenen Auswahl
   erscheint darunter. Gesetzt wird die Klasse in calc.js, sobald jede Option
   dem Muster "Kurz (Beschreibung)" folgt. */
.ui-choice-grid--kompakt{
  grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
}
.ui-choice-grid--kompakt .ui-choice-option{
  min-height:46px;
  padding:9px 8px;
  font-weight:750;
  font-variant-numeric:tabular-nums;
}
.ui-choice-hinweis{
  margin:7px 0 0;
  font:600 .78rem/1.4 var(--font-body);
  color:var(--ink-2);
  min-height:1.1em;
}
.ui-choice-hinweis:empty{margin:0}

@media (max-width:560px){
  /* Auf dem Telefon feste drei Spalten: sechs Steuerklassen ergeben damit
     zwei Reihen statt sechs. Die allgemeine Mobilregel setzt --segments auf
     eine Spalte, deshalb hier ausdruecklich ueberschreiben. */
  .ui-choice-grid--segments.ui-choice-grid--kompakt,
  .ui-choice-grid--kompakt{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }
  .ui-choice-grid--kompakt .ui-choice-option{
    min-height:44px;
    padding:8px 5px;
    font-size:.82rem;
  }
  .ui-choice-hinweis{font-size:.75rem}
}

@media (max-width:340px){
  .ui-choice-grid--kompakt{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- Startseite: vollstaendiges Rechnerverzeichnis ---------------------- */
.directory{display:grid;gap:26px}
.dir-cat h2{font-size:1.18rem;margin:0 0 10px;display:flex;align-items:baseline;gap:10px}
.dir-cat h2 a{color:var(--ink);text-decoration:none}
.dir-cat h2 a:hover{color:var(--teal-dark);text-decoration:underline}
.dir-count{font-size:.78rem;font-weight:700;color:var(--muted);background:var(--soft);
  padding:2px 9px;border-radius:999px}
.dir-list{list-style:none;margin:0;padding:0;columns:1;column-gap:28px}
.dir-list li{break-inside:avoid;padding:4px 0;border-bottom:1px solid var(--border);font-size:.94rem}
.dir-list a{color:var(--ink-2);text-decoration:none}
.dir-list a:hover{color:var(--teal-dark);text-decoration:underline}
@media(min-width:640px){.dir-list{columns:2}}
@media(min-width:980px){.dir-list{columns:3}}

/* ---- Werkzeugseiten (Phase 5): Formel, Werte, Permalink, Einbetten, Zitieren ---- */
.wz-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:26px 26px 20px;margin:26px 0;box-shadow:var(--shadow-1)}
.wz-card h2{margin:0;font-size:22px;line-height:1.25}
.wz-block{margin-top:22px;padding-top:18px;border-top:1px solid var(--border-2)}
.wz-block h3{margin:0 0 10px;font-size:16.5px}
.wz-hinweis{margin:0 0 10px;color:var(--muted);font-size:14px;line-height:1.5}
.wz-formel{padding:12px 14px;margin:8px 0;background:var(--teal-soft,color-mix(in srgb,#f3f6f8 var(--lightmix),var(--card)));border-radius:12px}
.wz-formel-name{font-size:13px;font-weight:600;color:var(--teal);margin-bottom:6px;letter-spacing:.02em}
.wz-formel-math{font-size:1.25rem;overflow-x:auto;padding:4px 0}
.wz-formel-math math{font-family:"Cambria Math","STIX Two Math","Latin Modern Math",serif}
.wz-formel-text{display:block;margin-top:6px;font-size:13px;color:var(--muted);white-space:pre-wrap;background:transparent;padding:0}
.wz-formel-legende{margin:8px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5}
.wz-tabelle{width:100%;border-collapse:collapse;font-size:14.5px}
.wz-tabelle th,.wz-tabelle td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border-2);white-space:nowrap}
.wz-tabelle thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.wz-tabelle tbody th{font-weight:600}
.wz-code{margin:0 0 10px;padding:12px 14px;background:#1f2421;color:#e8ede9;border-radius:10px;font-size:12.5px;line-height:1.5;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.wz-zitat{margin:0 0 10px;padding:12px 14px;background:var(--bg-soft,color-mix(in srgb,#f6f8f7 var(--lightmix),var(--card)));border-radius:10px;font-size:14px;line-height:1.55;word-break:break-word}
.wz-kopieren{appearance:none;border:1px solid var(--teal);background:transparent;color:var(--teal);border-radius:999px;padding:7px 14px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;margin:0 8px 8px 0}
.wz-kopieren:hover{background:var(--teal);color:#fff}
.wz-permalink{display:flex;gap:8px;flex-wrap:wrap}
.wz-permalink input{flex:1 1 240px;min-width:0;font:inherit;font-size:13.5px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.wz-ausgabe{margin-top:16px}
.wz-ausgabe table{width:100%;border-collapse:collapse;font-size:14px}
.wz-ausgabe th,.wz-ausgabe td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--border-2)}
.wz-ausgabe .wz-zahlen{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.wz-ausgabe .wz-zahl{padding:6px 12px;border-radius:999px;background:var(--teal-soft,color-mix(in srgb,#eef3f1 var(--lightmix),var(--card)));color:var(--teal-dark,#11533B);font-weight:600;font-size:15px}
#wz-plot{margin-top:12px;border:1px solid var(--border-2);border-radius:12px;overflow:hidden;background:var(--card)}
#wz-plot canvas{display:block;max-width:100%}
.wz-neu{appearance:none;border:0;background:var(--teal);color:#fff;border-radius:999px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;margin-top:10px}
/* Einbettmodus (?embed=1): nur der Rechner, mit Herkunftslink */
html.is-embed .site-header,html.is-embed header,html.is-embed footer,html.is-embed .site-footer,html.is-embed .page-head,html.is-embed .content,html.is-embed .related-section,html.is-embed .fx-card,html.is-embed .wz-card,html.is-embed .history-block,html.is-embed .steuer-werte,html.is-embed .cookie-hinweis{display:none!important}
html.is-embed body{background:var(--card)}
html.is-embed .calc-page-container{padding:8px;max-width:none}
html.is-embed .embed-credit{display:block;margin:10px 0 0;font-size:12.5px;color:var(--muted);text-decoration:none}
html.is-embed .embed-credit:hover{color:var(--teal)}
@media (max-width:640px){.wz-card{padding:18px 16px 14px}.wz-formel-math{font-size:1.1rem}}

/* ---- Downloads & Einbetten (/downloads) ---- */
.dl-page .lead{max-width:760px}
.dl-sektion{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:26px 26px 22px;margin:22px 0}
.dl-sektion-kopf h2{margin:2px 0 8px;font-size:22px;line-height:1.25}
.dl-sektion-kopf p{margin:0 0 16px;color:var(--ink-2);line-height:1.6}
.dl-tabs{display:flex;gap:6px;margin:4px 0 16px;flex-wrap:wrap}
.dl-tab{appearance:none;border:1px solid var(--border);background:transparent;color:var(--ink);border-radius:999px;padding:8px 18px;font:inherit;font-weight:700;cursor:pointer}
.dl-tab.is-active{background:var(--teal);border-color:var(--teal);color:#fff}
.dl-alle{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.dl-card{border:1px solid var(--border-2);border-radius:14px;padding:12px 14px;background:var(--bg-soft,color-mix(in srgb,#fafaf7 var(--lightmix),var(--card)));display:flex;flex-direction:column;gap:4px}
.dl-card-t{font-weight:700;font-size:14.5px}
.dl-card-s{font-size:12.5px;color:var(--muted);flex:1}
.dl-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.dl-btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;border:1px solid var(--teal);color:var(--teal);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:700;background:transparent}
.dl-btn:hover{background:var(--teal);color:#fff;text-decoration:none}
.dl-btn--primary{background:var(--teal);color:#fff}
.dl-btn--primary:hover{background:var(--teal-dark,#0a5c52)}
.dl-details{margin-top:14px}
.dl-details summary{cursor:pointer;font-weight:600;color:var(--teal)}
.dl-tabelle{width:100%;border-collapse:collapse;font-size:14px;margin-top:10px}
.dl-tabelle th,.dl-tabelle td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-2);white-space:nowrap}
.dl-tabelle thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.dl-hinweis{font-size:13.5px;color:var(--muted);margin:14px 0 0;line-height:1.5}
.dl-widget,.dl-karte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:22px;align-items:start}
.dl-widget-vorschau{padding:18px;border:1px dashed var(--border);border-radius:14px;background:repeating-linear-gradient(45deg,color-mix(in srgb,#fafaf7 var(--lightmix),var(--card)) 0 10px,color-mix(in srgb,#f3f3ee var(--lightmix),var(--card)) 10px 20px)}
.dl-widget-code label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px}
.dl-widget-code select{font:inherit;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--card);margin-bottom:10px;max-width:100%}
.dl-karte-bild{margin:0}
.dl-karte-bild img{width:100%;max-width:424px;height:auto;border:1px solid var(--border-2);border-radius:14px}
.dl-karte-bild figcaption{font-size:12.5px;color:var(--muted);margin-top:6px}
@media (max-width:720px){.dl-widget,.dl-karte{grid-template-columns:1fr}.dl-sektion{padding:18px 16px 14px}}

.hero-stand{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.hero-stand time{font-weight:600;color:var(--ink-2)}

/* ===== RECHNERCENTER LAYER ===== */
/* Rechnercenter "Bundesrot": klar, sachlich, deutsch. Schwarz-Rot-Gold als
   Akzent, jede Kategorie mit eigener Farbe. Liegt am Ende und ueberschreibt
   nur das Aussehen; alle Klassennamen bleiben gueltig. */

/* ---------- Grundlagen ---------- */
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);background-attachment:scroll}
:root.theme-anim body,:root.theme-anim .site-header,:root.theme-anim .card,:root.theme-anim .cat-tile,:root.theme-anim .pop-list,:root.theme-anim .site-footer{transition:background-color .4s ease,color .4s ease,border-color .4s ease}
::selection{background:color-mix(in srgb,var(--de-gold) 55%,transparent);color:#111}
a{color:var(--teal)}
h1,h2,h3{font-family:var(--font-disp);font-weight:800;letter-spacing:-.022em;color:var(--ink)}
h4{font-family:var(--font-body);font-weight:700;color:var(--ink)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--teal) 55%,transparent);outline-offset:2px;border-radius:8px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r-sm);font-weight:700;transition:top .2s var(--ease-out)}
.skip-link:focus{top:12px;text-decoration:none}
.flag{display:none}
.de-flag{display:inline-flex;flex-direction:column;width:20px;height:14px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.de-flag i{flex:1}
.de-flag i:nth-child(1){background:var(--de-black)}.de-flag i:nth-child(2){background:var(--de-red)}.de-flag i:nth-child(3){background:var(--de-gold)}

/* ---------- Kopf: volle Breite mit Flaggenleiste ---------- */
.site-header{position:sticky;top:0;z-index:40;padding:0;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--border);transition:box-shadow .25s ease}
.site-header::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--de-black) 0 33.33%,var(--de-red) 33.33% 66.66%,var(--de-gold) 66.66% 100%)}
.site-header.is-scrolled{box-shadow:0 10px 28px -20px rgba(0,0,0,.35)}
.site-header .bar{max-width:var(--maxw);margin:0 auto;padding:12px 20px;gap:18px;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.logo{gap:10px}
.logo svg{transition:transform .45s var(--ease-spring)}
.logo:hover svg{transform:translateY(-2px) rotate(-6deg)}
.logo .word{font-family:var(--font-disp);font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--ink)}
.logo .word .w2,.drawer-brand .w2{color:var(--teal)}
.main-nav{gap:2px;margin-left:auto;font-size:14.5px;font-weight:600}
.main-nav a{position:relative;padding:8px 12px;color:var(--ink-2);border-radius:8px;transition:color .15s ease}
.main-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}
.main-nav a:hover{color:var(--ink);background:transparent;text-decoration:none}
.main-nav a:hover::after{transform:scaleX(1)}
.hdr-tools{display:flex;align-items:center;gap:6px;margin-left:auto}
.main-nav+.hdr-tools{margin-left:10px}
.hdr-search,.theme-toggle,.menu-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--ink);cursor:pointer;transition:border-color .15s ease,color .15s ease,transform .2s var(--ease-spring)}
.hdr-search:hover,.theme-toggle:hover,.menu-toggle:hover{border-color:var(--ink);transform:translateY(-1px);text-decoration:none}
.theme-toggle svg{transition:transform .5s var(--ease-spring),opacity .25s ease}
.theme-toggle .ico-sun{position:absolute;opacity:0;transform:rotate(-90deg) scale(.4)}
:root[data-theme="dark"] .theme-toggle .ico-moon{opacity:0;transform:rotate(90deg) scale(.4)}
:root[data-theme="dark"] .theme-toggle .ico-sun{opacity:1;transform:none}
.menu-toggle{margin-left:0;font-size:0;gap:0}
.mt-label{display:none}
.burger{display:inline-flex;flex-direction:column;gap:4px;width:18px}
.burger i{display:block;height:2px;border-radius:2px;background:currentColor}
.burger i:nth-child(2){width:65%}
.nav-cta{display:none}
@media(min-width:881px){.menu-toggle{display:none}}

/* Drawer */
.drawer.open .drawer-overlay{animation:rf-fade .25s ease both}
.drawer.open .drawer-panel{animation:rf-slide-in .4s var(--ease-out) both}
.drawer-overlay{background:rgba(10,10,12,.45);backdrop-filter:blur(3px)}
.drawer-panel{background:var(--card);border-radius:0;box-shadow:-30px 0 70px -30px rgba(0,0,0,.45)}
.drawer-panel::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--de-black) 0 33.33%,var(--de-red) 33.33% 66.66%,var(--de-gold) 66.66%)}
.drawer-brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-disp);font-weight:800;font-size:19px;color:var(--ink)}
.drawer-head{border-bottom:1px solid var(--border)}
.drawer-head .x{border-radius:10px;background:var(--soft2);color:var(--ink)}
.drawer-body a{border-radius:10px;color:var(--ink)}
.drawer-body a:hover{background:var(--soft2)}
.drawer-body a .cnt{color:var(--muted);background:var(--soft2);border-radius:var(--pill);padding:2px 9px}

/* ---------- Hero: geteilt, links Text, rechts Themen-Kompass ---------- */
.hero-de{position:relative;background:var(--card);border-bottom:1px solid var(--border);overflow:hidden}
.hero-de::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 0 calc(100% - 1px),color-mix(in srgb,var(--ink) 5%,transparent) 0) 0 0/100% 32px,
             linear-gradient(90deg,transparent 0 calc(100% - 1px),color-mix(in srgb,var(--ink) 5%,transparent) 0) 0 0/32px 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 75%);mask-image:linear-gradient(90deg,transparent 30%,#000 75%)}
.hero-split{position:relative;max-width:var(--maxw);margin:0 auto;padding:56px 20px 60px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.hero-de .badge{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.hero-de h1{font-size:clamp(34px,5.2vw,58px);line-height:1.05;letter-spacing:-.035em;margin:18px 0 0;font-weight:800;color:var(--ink)}
.hero-de h1 .accent{position:relative;z-index:0;white-space:nowrap;color:var(--ink)}
.hero-de h1 .accent::after{content:"";position:absolute;z-index:-1;left:-.06em;right:-.06em;bottom:.06em;height:.3em;background:var(--de-gold);transform:scaleX(0);transform-origin:left;animation:rf-marker .7s .4s var(--ease-out) forwards}
:root[data-theme="dark"] .hero-de h1 .accent::after{background:color-mix(in srgb,var(--de-gold) 70%,transparent)}
.hero-de .lead{color:var(--ink-2);font-size:clamp(16.5px,1.9vw,19px);line-height:1.6;max-width:560px;margin:18px 0 0}
.hero-de .searchwrap{max-width:560px;margin:28px 0 0}
.hero-de .searchbox{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:6px 6px 6px 16px;color:var(--muted);box-shadow:5px 5px 0 var(--ink);transition:box-shadow .2s ease,transform .2s var(--ease-out)}
.hero-de .searchbox:focus-within{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--teal)}
:root[data-theme="dark"] .hero-de .searchbox{border-color:var(--ink-2);box-shadow:5px 5px 0 #000}
.hero-de .searchbox input{color:var(--ink);font-size:16.5px}
.hero-de .searchbox input::placeholder{color:var(--muted)}
.hero-de .searchbox .go{background:var(--teal);color:#fff;border-radius:9px;padding:12px 22px;font-weight:700;transition:background-color .15s ease,transform .15s ease}
.hero-de .searchbox .go:hover{background:var(--teal-dark)}
.hero-de .searchbox .go:active{transform:scale(.96)}
:root[data-theme="dark"] .hero-de .searchbox .go{color:#16161A}
.search-results{background:var(--card);border:1px solid var(--border);border-radius:14px;color:var(--ink);text-align:left;box-shadow:var(--shadow-pop)}
.search-results .sr-item{color:var(--ink);border-radius:10px}
.search-results .sr-item:hover{background:var(--soft)}
.sr-ic{background:var(--teal-soft);color:var(--teal)}
.sr-r{color:var(--teal)}
.hero-de .pills{margin:18px 0 0;max-width:560px}
.hero-de .pills .pl{color:var(--muted);font-weight:600}
.hero-de .pill{background:var(--soft);border:1px solid var(--border);color:var(--ink-2);padding:7px 12px;font-weight:600;border-radius:8px;box-shadow:none}
.hero-de .pill:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:translateY(-1px)}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:26px 0 0;padding:0;font-size:14px;color:var(--ink-2)}
.hero-facts li{display:inline-flex;align-items:center;gap:7px}
.hero-facts li::before{content:"";width:16px;height:16px;border-radius:50%;background:color-mix(in srgb,#1F8F4E 14%,var(--card)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.4l2.2 2.2 4.8-5' fill='none' stroke='%231F8F4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.hero-facts b{color:var(--ink);font-variant-numeric:tabular-nums}

.hero-themen{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-card)}
.ht-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px 14px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ht-stand{font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.ht-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ht-tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 14px 14px;border-radius:14px;background:var(--card);border:1px solid var(--border);color:var(--ink);overflow:hidden;animation:rf-rise .6s var(--ease-out) both;animation-delay:calc(.25s + var(--i) * 70ms);transition:transform .25s var(--ease-out),box-shadow .25s ease,border-color .2s ease}
.ht-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cat)}
.ht-tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--cat) 45%,var(--border));box-shadow:var(--shadow-pop);text-decoration:none}
.ht-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;font-size:20px;background:color-mix(in srgb,var(--cat) 13%,var(--card));transition:transform .3s var(--ease-spring)}
.ht-tile:hover .ht-ic{transform:scale(1.1) rotate(-6deg)}
.ht-name{font-weight:700;font-size:14.5px;line-height:1.25}
.ht-cnt{font-size:12.5px;font-weight:700;color:var(--cat)}
:root[data-theme="dark"] .ht-cnt{color:color-mix(in srgb,var(--cat) 55%,#fff)}
.ht-all{display:block;margin-top:12px;padding:10px;text-align:center;font-size:14px;font-weight:700;color:var(--ink);border-radius:10px;border:1px dashed var(--border)}
.ht-all:hover{border-color:var(--ink);text-decoration:none}

/* alte Hero-Varianten neutralisieren */
.hero-glyphs,.hero-stats{display:none}
.hero:not(.hero-de)::before{background:none}
.hero:not(.hero-de) h1 .accent{font-style:normal;color:var(--teal)}

/* ---------- Abschnitte ---------- */
.section{max-width:var(--maxw);padding:72px 20px 8px}
.section-head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:22px}
.section-head h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.03em;line-height:1.15}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.kicker::before{content:"";width:18px;height:12px;border-radius:2px;background:linear-gradient(var(--de-black) 0 33.33%,var(--de-red) 33.33% 66.66%,var(--de-gold) 66.66%)}
.section>.sub{margin:-8px 0 24px;color:var(--ink-2);font-size:16px;line-height:1.6;max-width:680px}

/* Top-Rechner: Rangliste in zwei Spalten */
.pop-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:6px 24px;box-shadow:var(--shadow-card)}
.pop-item{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none;color:var(--ink);transition:none}
.pop-item:nth-last-child(-n+2){border-bottom:0}
.pop-item:hover{background:transparent;transform:none;box-shadow:none;text-decoration:none}
.pop-item::after{display:none}
.pop-no{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;font-family:var(--font-num);font-size:18px;font-weight:800;color:#fff;background:var(--cat);transition:transform .3s var(--ease-spring)}
.pop-item:hover .pop-no{transform:rotate(-8deg) scale(1.08)}
.pop-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pop-t b{font-family:var(--font-disp);font-size:16.5px;font-weight:700;line-height:1.3;color:var(--ink);transition:color .15s ease}
.pop-item:hover .pop-t b{color:var(--teal)}
.pop-d{font-size:13.5px;line-height:1.45;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-cat{font-size:12px;font-weight:700;color:var(--cat);background:color-mix(in srgb,var(--cat) 10%,var(--card));border-radius:6px;padding:4px 8px;white-space:nowrap}
:root[data-theme="dark"] .pop-cat{color:color-mix(in srgb,var(--cat) 55%,#fff)}
.pop-ic,.pop-top,.pop-go,.pop-arrow,.pop-range{display:none}

/* Kategorien mit Farbleiste */
.cat-tiles{grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:12px}
.cat-tile{position:relative;align-items:center;gap:14px;padding:16px 16px 16px 20px;border-radius:14px;background:var(--card);border:1px solid var(--border);box-shadow:none;overflow:hidden;transition:transform .25s var(--ease-out),box-shadow .25s ease,border-color .2s ease}
.cat-tile::before{content:"";display:block;position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cat,var(--teal));opacity:1;transition:width .25s var(--ease-out)}
.cat-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--cat,var(--teal)) 45%,var(--border));box-shadow:var(--shadow-pop);text-decoration:none}
.cat-tile:hover::before{width:7px}
.cat-ic{width:44px;height:44px;border-radius:12px;font-size:22px;background:color-mix(in srgb,var(--cat,var(--teal)) 12%,var(--card));box-shadow:none}
.cat-tile:hover .cat-ic{transform:scale(1.08) rotate(-6deg)}
.cat-name{font-family:var(--font-body);font-weight:700;font-size:15.5px;color:var(--ink)}
.cat-ex{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-tile .cnt{flex:none;font-size:13px;font-weight:800;color:var(--cat,var(--teal));background:transparent;padding:0;min-width:0}
:root[data-theme="dark"] .cat-tile .cnt{color:color-mix(in srgb,var(--cat) 55%,#fff)}

/* So funktioniert's: Zeitleiste */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border:0;background:transparent;overflow:visible}
.steps::before{content:"";position:absolute;left:24px;right:24px;top:22px;height:2px;background:repeating-linear-gradient(90deg,var(--border) 0 8px,transparent 8px 14px)}
.step{position:relative;padding:0;border:0;background:transparent;box-shadow:none}
.step:last-child{border:0}
.step-no{position:relative;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;font-family:var(--font-num);font-weight:800;font-size:18px;color:#fff;margin-bottom:14px;box-shadow:0 0 0 6px var(--bg)}
.step:nth-child(1) .step-no{background:var(--de-black)}
.step:nth-child(2) .step-no{background:var(--de-red)}
.step:nth-child(3) .step-no{background:var(--de-gold);color:#111}
:root[data-theme="dark"] .step:nth-child(1) .step-no{background:#3A3A42}
.step .tt{font-family:var(--font-disp);font-weight:800;font-size:18px}
.step .td{margin-top:6px;font-size:14.5px;color:var(--ink-2);line-height:1.55;max-width:320px}

/* Verzeichnis */
.directory{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.dir-cat{margin:0;padding:0;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:none;overflow:hidden;break-inside:avoid}
.dir-cat>summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none;font-weight:700;font-size:14.5px;color:var(--ink);border:0}
.dir-cat>summary::-webkit-details-marker{display:none}
.dir-cat>summary::after{content:"+";width:24px;height:24px;border:0;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;line-height:1;color:var(--ink-2);background:var(--soft);transform:none;transition:transform .3s var(--ease-spring),background-color .2s ease}
.dir-cat[open]>summary::after{transform:rotate(45deg);background:var(--ink);color:var(--bg)}
.dir-cat>summary:hover{background:var(--soft)}
.dir-ic{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:var(--soft);font-size:16px}
.dir-name{flex:1}
.dir-count{font-size:12px;font-weight:700;color:var(--muted);background:transparent;padding:0}
.dir-cat .dir-list{list-style:none;margin:0;padding:6px 14px 4px 54px;display:grid;gap:0;border-top:1px solid var(--border)}
.dir-cat .dir-list li{border:0;padding:0;margin:0}
.dir-cat .dir-list li::before{display:none}
.dir-cat .dir-list a{display:block;padding:5px 0;font-size:14px;color:var(--ink-2);opacity:1;transition:color .15s ease,transform .2s var(--ease-out)}
.dir-cat .dir-list a:hover{color:var(--teal);transform:translateX(3px);text-decoration:none}
.dir-all{display:block;padding:8px 14px 12px 54px;font-size:13px;font-weight:700}
.dir-cat[open] .dir-list{animation:rf-rise .35s var(--ease-out)}

/* Startseiten-Text + FAQ */
.home-content .content{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:36px 40px;max-width:820px;margin:0 auto;box-shadow:none}
.home-content .content h2{font-size:clamp(24px,3vw,30px)}
.faq details{border:1px solid var(--border);border-radius:10px;background:var(--soft);margin-bottom:8px;overflow:hidden}
.faq summary{padding:14px 16px;font-weight:700;cursor:pointer}
.faq .answer{padding:0 16px 14px;color:var(--ink-2)}

/* CTA */
.cta-band{position:relative;overflow:hidden;background:#16161A;border-radius:var(--r-lg);padding:42px 40px 42px 52px;isolation:isolate}
.cta-band::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:linear-gradient(var(--de-black) 0 33.33%,var(--de-red) 33.33% 66.66%,var(--de-gold) 66.66%)}
.cta-band::after{display:none}
:root[data-theme="dark"] .cta-band{background:#23232A}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.75)}
.cta-band .btn-gold{background:var(--de-gold);color:#111;border-radius:10px;padding:14px 24px;font-weight:800;transition:transform .2s var(--ease-spring),box-shadow .2s ease}
.cta-band .btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(255,206,0,.6)}

/* ---------- Footer ---------- */
.site-footer{background:#16161A;color:#B8B8C2;border-top:0;margin-top:88px;position:relative}
.site-footer::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--de-black) 0 33.33%,var(--de-red) 33.33% 66.66%,var(--de-gold) 66.66%)}
:root[data-theme="dark"] .site-footer{background:#0C0C0F}
.foot-top{max-width:var(--maxw);margin:0 auto;padding:54px 20px 36px;display:grid;grid-template-columns:minmax(240px,1fr) 2.2fr;gap:48px}
.foot-brand .logo .word{color:#fff;font-size:24px}
.foot-brand .logo .word .w2{color:#FF6B7A}
.foot-brand p{color:#9C9CA8;font-size:14px;max-width:320px;margin:14px 0 0;line-height:1.6}
.foot-cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:700;font-size:14px;color:var(--de-gold)}
.foot-cta:hover{text-decoration:none}
.foot-cta span{transition:transform .2s var(--ease-out)}
.foot-cta:hover span{transform:translateX(4px)}
.site-footer .foot-grid{max-width:none;margin:0;padding:0;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px}
.foot-col h4{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px}
.foot-col a{display:block;color:#A9A9B4;font-size:14px;margin-bottom:9px;transition:color .15s ease}
.foot-col a:hover{color:#fff;text-decoration:none}
.foot-col-cats .foot-links{columns:2;column-gap:18px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08)}
.foot-bottom .inner{max-width:var(--maxw);color:#85858F}

/* ---------- Rechnerseiten: Kategoriefarbe traegt den Rechner ---------- */
.calc-card-main,.calc-wrap .card,.card{background:var(--card);border-color:var(--border);box-shadow:var(--shadow-card)}
.calc-card-main{border-radius:22px}
.calc-theme .calc-card-main::before{background:var(--teal)}
.calc-theme .result{background:linear-gradient(160deg,color-mix(in srgb,var(--teal) 5%,var(--card)),color-mix(in srgb,var(--teal) 12%,var(--card)));border-color:color-mix(in srgb,var(--teal) 32%,var(--border))}
.calc-go,.btn-primary{background:var(--teal);border-color:var(--teal);color:#fff;border-radius:12px;transition:transform .15s var(--ease-out),box-shadow .2s ease,background-color .2s ease}
.calc-go:hover,.btn-primary:hover{background:var(--teal-dark);transform:translateY(-1px)}
.calc-go:active,.btn-primary:active{transform:scale(.97)}
:root[data-theme="dark"] .calc-go,:root[data-theme="dark"] .btn-primary{color:#16161A}
.field input,.field select,input[type=text],input[type=number],input[type=date],select,textarea{background:var(--card);color:var(--ink);border-color:var(--border);border-radius:10px}
.field input:focus,.field select:focus{border-color:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 15%,transparent)}
.btn{background:var(--card);color:var(--ink);border-color:var(--border);border-radius:10px}
.result.is-updated,.result[data-updated]{animation:rf-pop .5s var(--ease-spring)}
details[open]>.answer{animation:rf-rise .35s var(--ease-out)}
th{background:var(--soft2)}
:root[data-theme="dark"] .ui-profile-validation{color:#FFB4A8;border-color:#6B2C26}

/* ---------- Mobil ---------- */
@media(max-width:980px){
  .hero-split{grid-template-columns:1fr;gap:36px}
  .directory{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:880px){
  .main-nav{display:none}
  .main-nav+.hdr-tools{margin-left:auto}
  .foot-top{grid-template-columns:1fr;gap:32px}
  .site-footer .foot-grid{grid-template-columns:1fr 1fr}
  .foot-col-cats{grid-column:1 / -1}
  .pop-list{grid-template-columns:1fr}
  .pop-item:nth-last-child(2){border-bottom:1px solid var(--border)}
  .steps{grid-template-columns:1fr;gap:20px}
  .steps::before{left:22px;right:auto;top:22px;bottom:22px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--border) 0 8px,transparent 8px 14px)}
  .step{display:grid;grid-template-columns:46px 1fr;column-gap:16px}
  .step-no{grid-row:span 2;margin:0}
}
@media(max-width:560px){
  .site-header .bar{padding:10px 14px}
  .logo .word{font-size:20px}
  .logo svg{width:32px;height:32px}
  .hero-split{padding:36px 16px 40px}
  .hero-de h1{font-size:clamp(30px,8.4vw,40px)}
  .hero-de .searchbox .go{display:none}
  .hero-themen{padding:14px}
  .ht-tile{padding:14px 12px 12px}
  .section{padding:54px 16px 6px}
  .pop-list{padding:4px 16px}
  .pop-cat{display:none}
  .pop-item{grid-template-columns:40px minmax(0,1fr)}
  .cat-tiles{grid-template-columns:1fr}
  .directory{grid-template-columns:1fr}
  .home-content .content{padding:26px 20px}
  .cta-band{padding:32px 22px 32px 34px}
  .foot-top{padding:44px 16px 28px}
}

/* ---------- Bewegung ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
.js .reveal.is-in{opacity:1;transform:none}
.hero-copy>*{animation:rf-rise .7s var(--ease-out) both}
.hero-copy>*:nth-child(2){animation-delay:.07s}
.hero-copy>*:nth-child(3){animation-delay:.14s}
.hero-copy>*:nth-child(4){animation-delay:.21s}
.hero-copy>*:nth-child(5){animation-delay:.28s}
.hero-copy>*:nth-child(6){animation-delay:.35s}

@keyframes rf-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rf-fade{from{opacity:0}to{opacity:1}}
@keyframes rf-slide-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes rf-marker{to{transform:scaleX(1)}}
@keyframes rf-pop{0%{transform:scale(.985)}60%{transform:scale(1.008)}100%{transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .hero-de h1 .accent::after{transform:scaleX(1)}
}

/* Eigene Farbe je Kategorie (hell und dunkel) */
.calc-theme-finance .calc-page-container{--teal:#217D5C;--teal-dark:#11533B;--teal-soft:#E8FAF3;--page-glow:33,125,92}
.calc-theme-career .calc-page-container{--teal:#705ECC;--teal-dark:#452EB7;--teal-soft:#ECE9F9;--page-glow:112,94,204}
.calc-theme-health .calc-page-container{--teal:#C53C5E;--teal-dark:#89203A;--teal-soft:#F9E9ED;--page-glow:197,60,94}
.calc-theme-family .calc-page-container{--teal:#BB3E8E;--teal-dark:#81225F;--teal-soft:#F9E9F3;--page-glow:187,62,142}
.calc-theme-automotive .calc-page-container{--teal:#4869CE;--teal-dark:#2141A0;--teal-soft:#E8ECFA;--page-glow:72,105,206}
.calc-theme-energy .calc-page-container{--teal:#8F681B;--teal-dark:#60440D;--teal-soft:#FBF4E7;--page-glow:143,104,27}
.calc-theme-construction .calc-page-container{--teal:#A55D29;--teal-dark:#703B15;--teal-soft:#FAEFE8;--page-glow:165,93,41}
.calc-theme-technology .calc-page-container{--teal:#4670AC;--teal-dark:#284978;--teal-soft:#EAF0F8;--page-glow:70,112,172}
.calc-theme-geometry .calc-page-container{--teal:#27769E;--teal-dark:#144E6B;--teal-soft:#E8F4FA;--page-glow:39,118,158}
.calc-theme-mathematics .calc-page-container{--teal:#8D53C6;--teal-dark:#63299C;--teal-soft:#F1E9F9;--page-glow:141,83,198}
.calc-theme-date .calc-page-container{--teal:#5C65CC;--teal-dark:#2D38B3;--teal-soft:#E9EAF9;--page-glow:92,101,204}
.calc-theme-household .calc-page-container{--teal:#217C73;--teal-dark:#11524B;--teal-soft:#E8FAF8;--page-glow:33,124,115}
.calc-theme-garden .calc-page-container{--teal:#287F3E;--teal-dark:#155425;--teal-soft:#E9F9ED;--page-glow:40,127,62}
.calc-theme-painting .calc-page-container{--teal:#AA42BA;--teal-dark:#752481;--teal-soft:#F7E9F9;--page-glow:170,66,186}
.calc-theme-flooring .calc-page-container{--teal:#B74F35;--teal-dark:#7E301D;--teal-soft:#FAECE8;--page-glow:183,79,53}
.calc-theme-weather .calc-page-container{--teal:#2C6E93;--teal-dark:#174A66;--teal-soft:#E8F2F9;--page-glow:44,110,147}
.calc-theme-pets .calc-page-container{--teal:#7C701F;--teal-dark:#524910;--teal-soft:#FAF8E8;--page-glow:124,112,31}
.calc-theme-services .calc-page-container{--teal:#25798A;--teal-dark:#13505D;--teal-soft:#E8F7FA;--page-glow:37,121,138}
.calc-theme-neutral .calc-page-container{--teal:#334155;--teal-dark:#1C2735;--teal-soft:#E6EAF0;--page-glow:51,65,85}
.calc-theme-leisure .calc-page-container{--teal:#4D7B2B;--teal-dark:#2F5117;--teal-soft:#F0F9E9;--page-glow:77,123,43}
:root[data-theme="dark"] .calc-theme-finance .calc-page-container{--teal:#7EB4A0;--teal-dark:#A6CBBE;--teal-soft:#1B2C2A;--page-glow:126,180,160}
:root[data-theme="dark"] .calc-theme-career .calc-page-container{--teal:#ACA2E1;--teal-dark:#C6BFEB;--teal-soft:#29263E;--page-glow:172,162,225}
:root[data-theme="dark"] .calc-theme-health .calc-page-container{--teal:#DD8EA2;--teal-dark:#E8B1BF;--teal-soft:#39202A;--page-glow:221,142,162}
:root[data-theme="dark"] .calc-theme-family .calc-page-container{--teal:#D88FBD;--teal-dark:#E4B2D2;--teal-soft:#372033;--page-glow:216,143,189}
:root[data-theme="dark"] .calc-theme-automotive .calc-page-container{--teal:#95A8E3;--teal-dark:#B6C3EB;--teal-soft:#22283F;--page-glow:149,168,227}
:root[data-theme="dark"] .calc-theme-energy .calc-page-container{--teal:#BEA77B;--teal-dark:#D2C3A4;--teal-soft:#2F281E;--page-glow:190,167,123}
:root[data-theme="dark"] .calc-theme-construction .calc-page-container{--teal:#CBA183;--teal-dark:#DBBEA9;--teal-soft:#332621;--page-glow:203,161,131}
:root[data-theme="dark"] .calc-theme-technology .calc-page-container{--teal:#94ACCF;--teal-dark:#B5C6DE;--teal-soft:#222938;--page-glow:148,172,207}
:root[data-theme="dark"] .calc-theme-geometry .calc-page-container{--teal:#82B0C7;--teal-dark:#A9C8D8;--teal-soft:#1C2B36;--page-glow:130,176,199}
:root[data-theme="dark"] .calc-theme-mathematics .calc-page-container{--teal:#BD9BDE;--teal-dark:#D1BAE8;--teal-soft:#2F243D;--page-glow:189,155,222}
:root[data-theme="dark"] .calc-theme-date .calc-page-container{--teal:#A0A6E1;--teal-dark:#BEC1EB;--teal-soft:#26283E;--page-glow:160,166,225}
:root[data-theme="dark"] .calc-theme-household .calc-page-container{--teal:#7EB3AE;--teal-dark:#A6CBC7;--teal-soft:#1B2C2E;--page-glow:126,179,174}
:root[data-theme="dark"] .calc-theme-garden .calc-page-container{--teal:#82B58F;--teal-dark:#A9CCB2;--teal-soft:#1D2C25;--page-glow:130,181,143}
:root[data-theme="dark"] .calc-theme-painting .calc-page-container{--teal:#CE91D7;--teal-dark:#DDB3E3;--teal-soft:#34213B;--page-glow:206,145,215}
:root[data-theme="dark"] .calc-theme-flooring .calc-page-container{--teal:#D5998A;--teal-dark:#E2B9AE;--teal-soft:#362423;--page-glow:213,153,138}
:root[data-theme="dark"] .calc-theme-weather .calc-page-container{--teal:#85ABC0;--teal-dark:#ABC5D4;--teal-soft:#1D2934;--page-glow:133,171,192}
:root[data-theme="dark"] .calc-theme-pets .calc-page-container{--teal:#B3AC7D;--teal-dark:#CBC6A5;--teal-soft:#2C291F;--page-glow:179,172,125}
:root[data-theme="dark"] .calc-theme-services .calc-page-container{--teal:#81B1BB;--teal-dark:#A8C9D0;--teal-soft:#1C2B32;--page-glow:129,177,187}
:root[data-theme="dark"] .calc-theme-neutral .calc-page-container{--teal:#89919C;--teal-dark:#ADB3BB;--teal-soft:#1F2129;--page-glow:137,145,156}
:root[data-theme="dark"] .calc-theme-leisure .calc-page-container{--teal:#98B284;--teal-dark:#B8CAAA;--teal-soft:#232B21;--page-glow:152,178,132}

/* ===== Ruhige Fassung: weniger Effekte, schlichte Farben ===== */
h1,h2,h3{font-weight:700;letter-spacing:-.015em}
.hero-de h1{font-weight:700;letter-spacing:-.025em;font-size:clamp(32px,4.6vw,50px);line-height:1.1}
.section-head h2{font-weight:700;letter-spacing:-.02em}
.logo .word{font-weight:700;letter-spacing:-.02em}

/* Hero: kein Raster, kein Markerstrich, normales Suchfeld */
.hero-de::before{display:none}
.hero-de h1 .accent{color:var(--teal)}
.hero-de h1 .accent::after{display:none}
.hero-de .badge{font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
.hero-de .searchbox{border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.04);padding:6px 6px 6px 16px;transition:border-color .15s ease,box-shadow .15s ease}
.hero-de .searchbox:focus-within{transform:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 14%,transparent)}
:root[data-theme="dark"] .hero-de .searchbox{border-color:var(--border);box-shadow:none}
.hero-de .searchbox .go{border-radius:8px}
.hero-de .pill{background:transparent}
.hero-de .pill:hover{background:var(--soft);color:var(--ink);border-color:var(--border);transform:none}
.hero-facts{gap:6px 18px;color:var(--muted)}
.hero-facts li::before{width:5px;height:5px;background:var(--border);border-radius:50%}
.hero-facts li:first-child::before{display:none}
.hero-themen{background:var(--soft);box-shadow:none}
.ht-head{letter-spacing:.04em;font-weight:700;color:var(--muted)}
.ht-tile{animation:none;padding:14px}
.ht-tile::before{display:none}
.ht-tile:hover{transform:none;box-shadow:none;border-color:color-mix(in srgb,var(--cat) 40%,var(--border))}
.ht-tile:hover .ht-ic{transform:none}
.ht-cnt{color:var(--muted);font-weight:600}
:root[data-theme="dark"] .ht-cnt{color:var(--muted)}

/* Abschnittsmarken: schlichter Text statt Mini-Flagge */
.kicker{font-weight:700;letter-spacing:.08em;color:var(--muted)}
.kicker::before{display:none}

/* Top-Rechner: neutrale Nummern, ruhige Labels */
.pop-no{width:34px;height:34px;border-radius:9px;font-size:15px;font-weight:700;color:var(--ink-2);background:var(--soft);transition:none}
.pop-item:hover .pop-no{transform:none}
.pop-item{grid-template-columns:38px minmax(0,1fr) auto}
.pop-cat{background:transparent;color:var(--muted);font-weight:600;padding:0}
:root[data-theme="dark"] .pop-cat{color:var(--muted)}

/* Kategorien: nur die Symbolflaeche traegt die Farbe */
.cat-tile{padding:14px 16px}
.cat-tile::before{display:none}
.cat-tile:hover{transform:none;box-shadow:none;border-color:color-mix(in srgb,var(--cat,var(--teal)) 40%,var(--border))}
.cat-tile:hover .cat-ic{transform:none}
.cat-tile .cnt{color:var(--muted);font-weight:600}
:root[data-theme="dark"] .cat-tile .cnt{color:var(--muted)}

/* Schritte: einfache Nummern ohne Zeitleiste */
.steps::before{display:none}
.step-no,.step:nth-child(1) .step-no,.step:nth-child(2) .step-no,.step:nth-child(3) .step-no,:root[data-theme="dark"] .step:nth-child(1) .step-no{width:36px;height:36px;font-size:15px;font-weight:700;color:var(--ink);background:var(--soft2);box-shadow:none}

/* CTA und Footer ohne Flaggenstreifen */
.cta-band{padding:36px 36px}
.cta-band::before{display:none}
.cta-band .btn-gold{background:#fff;color:#16161A;font-weight:700}
.cta-band .btn-gold:hover{transform:none;box-shadow:none;background:#EDEDF0}
.site-footer::before{display:none}
.foot-cta{color:#fff}
.site-header::before{height:3px}

/* Karten auf Rechnerseiten: kein Anheben */
.calc-go:hover,.btn-primary:hover{transform:none}
.dir-cat[open] .dir-list,details[open]>.answer{animation:none}
.dir-cat .dir-list a:hover{transform:none}
.logo:hover svg{transform:none}

/* Bewegung: keine Scroll-Einblendung, kein gestaffelter Hero */
.js .reveal{opacity:1;transform:none;transition:none}
.hero-copy>*{animation:none}
.result.is-updated,.result[data-updated]{animation:none}
.hero-de h1 .accent{font-style:normal}

/* ===== Dezente Bewegung ===== */
/* Sanftes Einblenden beim Scrollen: nur Deckkraft + 8px, kurz, einmalig */
.js .reveal{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s var(--ease-out);transition-delay:calc(var(--i,0) * 40ms)}
.js .reveal.is-in{opacity:1;transform:none}
/* Hero erscheint einmal ruhig */
.hero-copy,.hero-themen{animation:rf-soft .5s ease both}
.hero-themen{animation-delay:.1s}
@keyframes rf-soft{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Hover: leichtes Anheben von Karten und Kacheln */
.cat-tile,.ht-tile,.dir-cat{transition:transform .2s ease,box-shadow .2s ease,border-color .15s ease}
.cat-tile:hover,.ht-tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px -14px rgba(0,0,0,.25)}
.pop-t b{transition:color .15s ease}
.pop-no{transition:background-color .15s ease,color .15s ease}
.pop-item:hover .pop-no{background:var(--teal);color:#fff}
:root[data-theme="dark"] .pop-item:hover .pop-no{color:#16161A}
/* Knoepfe */
.calc-go,.btn-primary,.hero-de .searchbox .go{transition:background-color .15s ease,transform .1s ease}
.calc-go:active,.btn-primary:active,.hero-de .searchbox .go:active{transform:scale(.97)}
/* Aufklapper und Ergebnis */
.dir-cat[open] .dir-list,details[open]>.answer{animation:rf-soft .25s ease}
.result.is-updated,.result[data-updated]{animation:rf-soft .3s ease}
.dir-cat>summary::after{transition:transform .2s ease,background-color .15s ease}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}.hero-copy,.hero-themen{animation:none}}


/* ===== Rechner-Oberflaeche "Schiefer": schieferblaue Bedienelemente, gruenes Ergebnis ===== */
:root{
  --bg:#F7F7F5;--card:#FFFFFF;--soft:#F3F4F6;--soft2:#E5E7EB;--soft3:#F3F4F6;
  --ink:#1F2937;--ink-2:#4B5563;--ink-3:#374151;--muted:#6B7280;
  --teal:#434C8F;--teal-dark:#353D78;--teal-soft:#EEF0F8;--page-glow:67,76,143;
  --border:#E5E7EB;--border-2:#EEF0F3;
  --ok-1:#2F7D5B;--ok-2:#256A4C;
  --shadow-card:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.08);
  --shadow-pop:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
}
:root[data-theme="dark"]{
  --bg:#111214;--card:#1A1B1F;--soft:#23252B;--soft2:#2C2F36;--soft3:#15161A;
  --ink:#F3F4F6;--ink-2:#CBD5E1;--ink-3:#E2E8F0;--muted:#94A3B8;
  --teal:#A3AAE8;--teal-dark:#C3C8F2;--teal-soft:#252A4A;--page-glow:163,170,232;
  --border:#2E3138;--border-2:#26282E;--ok-1:#2A6B4F;--ok-2:#1F5640;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111214;--card:#1A1B1F;--soft:#23252B;--soft2:#2C2F36;--soft3:#15161A;
  --ink:#F3F4F6;--ink-2:#CBD5E1;--ink-3:#E2E8F0;--muted:#94A3B8;
  --teal:#A3AAE8;--teal-dark:#C3C8F2;--teal-soft:#252A4A;--page-glow:163,170,232;
  --border:#2E3138;--border-2:#26282E;--ok-1:#2A6B4F;--ok-2:#1F5640;}}
/* Bedienelemente einheitlich blau; die Kategoriefarbe bleibt als Kennfarbe (--cat-c) */
.calc-theme-finance .calc-page-container{--cat-c:#217D5C}
.calc-theme-career .calc-page-container{--cat-c:#705ECC}
.calc-theme-health .calc-page-container{--cat-c:#C53C5E}
.calc-theme-family .calc-page-container{--cat-c:#BB3E8E}
.calc-theme-automotive .calc-page-container{--cat-c:#4869CE}
.calc-theme-energy .calc-page-container{--cat-c:#8F681B}
.calc-theme-construction .calc-page-container{--cat-c:#A55D29}
.calc-theme-technology .calc-page-container{--cat-c:#4670AC}
.calc-theme-geometry .calc-page-container{--cat-c:#27769E}
.calc-theme-mathematics .calc-page-container{--cat-c:#8D53C6}
.calc-theme-date .calc-page-container{--cat-c:#5C65CC}
.calc-theme-household .calc-page-container{--cat-c:#217C73}
.calc-theme-garden .calc-page-container{--cat-c:#287F3E}
.calc-theme-painting .calc-page-container{--cat-c:#AA42BA}
.calc-theme-flooring .calc-page-container{--cat-c:#B74F35}
.calc-theme-weather .calc-page-container{--cat-c:#2C6E93}
.calc-theme-pets .calc-page-container{--cat-c:#7C701F}
.calc-theme-services .calc-page-container{--cat-c:#25798A}
.calc-theme-neutral .calc-page-container{--cat-c:#334155}
.calc-theme-leisure .calc-page-container{--cat-c:#4D7B2B}
html body.calc-theme .calc-page-container,html body .calc-page-container{--teal:#434C8F;--teal-dark:#353D78;--teal-soft:#EEF0F8;--page-glow:67,76,143}
:root[data-theme="dark"] body.calc-theme .calc-page-container,:root[data-theme="dark"] body .calc-page-container{--teal:#A3AAE8;--teal-dark:#C3C8F2;--teal-soft:#252A4A;--page-glow:163,170,232}
.calc-theme .calc-card-main::before{background:var(--cat-c,var(--teal));height:5px}
.calc-card-main .badge{color:var(--cat-c,var(--muted))}
:root[data-theme="dark"] .calc-card-main .badge{color:color-mix(in srgb,var(--cat-c,#94A3B8) 50%,#fff)}

/* Karten: weiss, weiche grosse Schatten, keine Kanten */
.calc-card-main{border:0;border-radius:18px;box-shadow:var(--shadow-card)}
.calc-wrap .card,.premium-reference-form{background:var(--card);border:0!important;border-radius:16px;box-shadow:var(--shadow-card)}
.ui-profile-section{background:transparent;border:0;box-shadow:none;padding-left:0;padding-right:0}
.ui-profile-step{background:var(--teal);color:#fff;border-radius:8px}
:root[data-theme="dark"] .ui-profile-step{color:#111214}
.premium-form-eyebrow{color:var(--teal)}
.premium-progress{background:var(--soft)}

/* Eingaben: kraeftig, 2px Rand, blauer Fokus */
.field label,.feld-kopf{color:var(--ink);font-weight:600}
.field input:not([type=range]):not([type=checkbox]):not([type=radio]),.field select{border:2px solid var(--border);border-radius:12px;background:var(--card);color:var(--ink);font-size:18px;font-weight:700;min-height:52px;box-shadow:none}
.field input:not([type=range]):focus,.field select:focus{border-color:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 16%,transparent);outline:0}
.unit,.input-row .unit{background:var(--soft);border:2px solid var(--border);border-left:0;color:var(--muted);font-weight:600;border-radius:0 12px 12px 0}
input[type=range],.feld-regler{accent-color:var(--teal)}
input[type=checkbox],input[type=radio]{accent-color:var(--teal)}
.uz-btn{border-radius:8px;background:var(--soft);color:var(--ink-2);border:0;font-weight:600}
.uz-btn.is-on{background:var(--teal);color:#fff}

/* Auswahl als Segmentknoepfe */
.ui-choice-option{background:var(--soft);color:var(--ink-2);border:0!important;border-radius:12px;font-weight:700;box-shadow:none;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease,transform .1s ease}
.ui-choice-option:hover{background:var(--soft2);color:var(--ink)}
.ui-choice-option.is-selected{background:var(--teal)!important;color:#fff!important;box-shadow:0 10px 15px -3px rgba(67,76,143,.3),0 4px 6px -4px rgba(67,76,143,.3)}
.ui-choice-option.is-selected *{color:#fff!important}
:root[data-theme="dark"] .ui-choice-option.is-selected,:root[data-theme="dark"] .ui-choice-option.is-selected *{color:#111214!important}
.ui-choice-option:active{transform:scale(.97)}
.field .check-row{background:var(--soft);border:0;border-radius:12px;padding:14px 16px}
.field .check-row:hover{background:var(--soft2);border:0}

/* Rechenknopf */
.calc-go,.calc-go.is-ready,.premium-reference-form .calc-go,.premium-reference-form .calc-go.is-ready{background:var(--teal);color:#fff;border:0;border-radius:12px;font-weight:700;min-height:54px;box-shadow:0 10px 15px -3px rgba(67,76,143,.25)}
.calc-go:hover{background:var(--teal-dark)}
:root[data-theme="dark"] .calc-go,:root[data-theme="dark"] .premium-reference-form .calc-go{color:#111214}

/* Ergebnis: gruenes Hauptfeld mit weisser Zahl */
.calc-theme .result,.result{background:var(--card);border:0;border-radius:18px;box-shadow:var(--shadow-card)}
.result::before{display:none}
.result-text-col{background:linear-gradient(135deg,var(--ok-1),var(--ok-2));color:#fff;border-radius:16px;padding:22px 22px 18px}
.result-text-col *{color:#fff}
.result-text-col .value{font-size:clamp(34px,6vw,48px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.result-text-col .breakdown{margin-top:14px;display:grid;gap:6px}
.result-text-col .breakdown>div{background:rgba(255,255,255,.14);border:0;border-radius:10px;padding:9px 12px}
.result-text-col a{color:#fff;text-decoration:underline}

/* Info-Kaesten */
.fx-card,.sw-card,.scope-card,.method-card,.input-data-card,.reference-panel{background:var(--soft);border:0;border-radius:16px;box-shadow:none}
.fx-final{background:var(--teal-soft);border:0;border-radius:12px}
.result-text-col,.result-text-col *{color:#fff!important}
.result-text-col .breakdown span:last-child,.result-text-col .breakdown b,.result-text-col .breakdown strong{font-weight:700}
.result-text-col [class*="label"],.result-text-col .kicker,.result-text-col small{opacity:.85}
.result-text-col hr,.result-text-col [class*="divider"]{border-color:rgba(255,255,255,.3)!important}
.ui-choice-option{font-size:16px;min-height:48px}

/* ===== Dunkelmodus nachgeschaerft ===== */
:root[data-theme="dark"]{--teal:#9CA3E8;--teal-dark:#B9BEF0;--teal-soft:#23264A;--btn:#5A63B8;--btn-hover:#6A73C8}
:root[data-theme="dark"] body.calc-theme .calc-page-container,:root[data-theme="dark"] body .calc-page-container{--teal:#9CA3E8;--teal-dark:#B9BEF0;--teal-soft:#23264A}
/* Knoepfe: kraeftigeres Indigo mit weisser Schrift statt Pastell */
:root[data-theme="dark"] .calc-go,:root[data-theme="dark"] .calc-go.is-ready,:root[data-theme="dark"] .premium-reference-form .calc-go,
:root[data-theme="dark"] .hero-de .searchbox .go,:root[data-theme="dark"] .ui-choice-option.is-selected,:root[data-theme="dark"] .uz-btn.is-on,
:root[data-theme="dark"] .ui-profile-step,:root[data-theme="dark"] .to-top,:root[data-theme="dark"] .btn-primary{background:var(--btn)!important;color:#fff!important;box-shadow:none}
:root[data-theme="dark"] .ui-choice-option.is-selected *{color:#fff!important}
:root[data-theme="dark"] .calc-go:hover,:root[data-theme="dark"] .hero-de .searchbox .go:hover,:root[data-theme="dark"] .to-top:hover{background:var(--btn-hover)!important}
/* Flaggenschwarz und Logo auf dunklem Grund sichtbar machen */
:root[data-theme="dark"] .site-header::before{background:linear-gradient(90deg,#4A4A52 0 33.33%,var(--de-red) 33.33% 66.66%,var(--de-gold) 66.66%)}
:root[data-theme="dark"] .logo svg rect:first-child,:root[data-theme="dark"] .drawer-brand svg rect:first-child{fill:#50535E}
:root[data-theme="dark"] .de-flag{box-shadow:0 0 0 1px rgba(255,255,255,.18)}
/* Schatten wirken im Dunkeln nicht - feine Kante statt dessen */
:root[data-theme="dark"] .calc-card-main,:root[data-theme="dark"] .calc-wrap .card,:root[data-theme="dark"] .premium-reference-form,
:root[data-theme="dark"] .result,:root[data-theme="dark"] .pop-list,:root[data-theme="dark"] .cat-tile,:root[data-theme="dark"] .dir-cat,
:root[data-theme="dark"] .home-content .content,:root[data-theme="dark"] .hero-themen,:root[data-theme="dark"] .ht-tile{border:1px solid var(--border)!important;box-shadow:none}
:root[data-theme="dark"] .hero-de{background:#16171B}
:root[data-theme="dark"] .ui-choice-option{background:#26282F;color:var(--ink-2)}
:root[data-theme="dark"] .ui-choice-option:hover{background:#30333B}
:root[data-theme="dark"] .field input:not([type=range]):not([type=checkbox]):not([type=radio]),:root[data-theme="dark"] .field select{background:#15161A;border-color:#34373F}
:root[data-theme="dark"] .unit,:root[data-theme="dark"] .input-row .unit{background:#23252B;border-color:#34373F}
:root[data-theme="dark"] .fx-card,:root[data-theme="dark"] .sw-card,:root[data-theme="dark"] .scope-card,:root[data-theme="dark"] .method-card,:root[data-theme="dark"] .input-data-card,:root[data-theme="dark"] .reference-panel{background:#202227}
:root[data-theme="dark"] .result-text-col{background:linear-gradient(135deg,#2B6E51,#225A42)}
:root[data-theme="dark"] .hero-de h1 .accent{color:#B4BAF0}

/* ===== Weicher Farbhintergrund (Lichtschleier) ===== */
body{position:relative;isolation:isolate}
body::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:1150px;pointer-events:none;
  background:
    radial-gradient(40% 55% at 8% 4%,rgba(143,152,230,.55),transparent 72%),
    radial-gradient(40% 55% at 92% 0%,rgba(240,168,192,.55),transparent 72%),
    radial-gradient(45% 45% at 55% 30%,rgba(255,206,168,.45),transparent 74%),
    radial-gradient(50% 40% at 22% 62%,rgba(168,218,202,.38),transparent 74%),
    linear-gradient(180deg,rgba(236,232,250,.6),transparent 70%);
  filter:blur(10px);
  -webkit-mask-image:linear-gradient(#000 50%,transparent);mask-image:linear-gradient(#000 50%,transparent)}
:root[data-theme="dark"] body::before{
  background:
    radial-gradient(38% 52% at 10% 6%,rgba(98,106,200,.30),transparent 70%),
    radial-gradient(36% 48% at 90% 2%,rgba(170,80,120,.20),transparent 70%),
    radial-gradient(42% 42% at 58% 34%,rgba(190,120,70,.12),transparent 72%),
    radial-gradient(46% 38% at 26% 66%,rgba(60,150,120,.12),transparent 72%)}

/* Kopf und Hero liegen auf dem Schleier */
.site-header{background:color-mix(in srgb,var(--card) 62%,transparent);border-bottom-color:color-mix(in srgb,var(--border) 60%,transparent)}
.site-header.is-scrolled{background:color-mix(in srgb,var(--card) 86%,transparent)}
.hero-de,:root[data-theme="dark"] .hero-de{background:transparent;border-bottom:0}
.hero-split{padding-top:64px;padding-bottom:40px}
.hero-de .searchbox{background:var(--card);border-color:color-mix(in srgb,var(--border) 70%,transparent);box-shadow:0 1px 2px rgba(0,0,0,.03),0 14px 34px -14px rgba(67,76,143,.28)}
.hero-de .pill{background:color-mix(in srgb,var(--card) 60%,transparent);border-color:color-mix(in srgb,var(--border) 70%,transparent)}
.hero-themen{background:color-mix(in srgb,var(--card) 55%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.7);box-shadow:0 20px 50px -28px rgba(67,76,143,.35)}
.ht-tile{background:color-mix(in srgb,var(--card) 88%,transparent);border-color:rgba(255,255,255,.8)}
.ht-all{border-color:color-mix(in srgb,var(--ink) 15%,transparent)}
:root[data-theme="dark"] .hero-themen{background:color-mix(in srgb,var(--card) 60%,transparent);border-color:rgba(255,255,255,.08)!important}
:root[data-theme="dark"] .ht-tile{background:color-mix(in srgb,var(--card) 80%,transparent);border-color:rgba(255,255,255,.07)!important}
:root[data-theme="dark"] .hero-de .searchbox{box-shadow:0 14px 34px -16px rgba(0,0,0,.7)}

/* ===== Dunkelmodus "Kaminabend: warmes Anthrazit & Gold" =====
   Eigenes Farbschema statt eingefaerbtem Hellmodus: neutrale Flaechen,
   warmes Weiss, Gold der Flagge als Akzent. Kein Blau. */
:root[data-theme="dark"]{
  --bg:#14110F;--card:#1C1916;--soft:#231F1B;--soft2:#2C2723;--soft3:#110F0D;
  --ink:#F3EBE1;--ink-2:#CBC1B5;--ink-3:#E0D6CA;--muted:#9C9288;
  --teal:#E9BD58;--teal-dark:#F3CE77;--teal-soft:#2A2416;--page-glow:233,189,88;
  --gold:#E9BD58;--gold-tint:#2A2416;--gold-ink:#F0CC74;
  --border:#2F2A25;--border-2:#26221E;
  --btn:#E2B34A;--btn-hover:#EDC262;--btn-ink:#17140C;
  --ok-1:#2A6A4E;--ok-2:#205640;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#14110F;--card:#1C1916;--soft:#231F1B;--soft2:#2C2723;--soft3:#110F0D;
  --ink:#F3EBE1;--ink-2:#CBC1B5;--ink-3:#E0D6CA;--muted:#9C9288;
  --teal:#E9BD58;--teal-dark:#F3CE77;--teal-soft:#2A2416;--page-glow:233,189,88;
  --gold:#E9BD58;--gold-tint:#2A2416;--gold-ink:#F0CC74;
  --border:#2F2A25;--border-2:#26221E;
  --btn:#E2B34A;--btn-hover:#EDC262;--btn-ink:#17140C;--ok-1:#2A6A4E;--ok-2:#205640;}}
:root[data-theme="dark"] body.calc-theme .calc-page-container,:root[data-theme="dark"] body .calc-page-container{--teal:#E9BD58;--teal-dark:#F3CE77;--teal-soft:#2A2416;--page-glow:233,189,88}

/* Hintergrund: nur ein Hauch warmes Licht oben, keine Farbflecken */
:root[data-theme="dark"] body::before{
  background:
    radial-gradient(42% 55% at 42% 22%,rgba(118,38,72,.42),transparent 72%),
    radial-gradient(36% 48% at 88% 6%,rgba(150,92,40,.22),transparent 72%),
    radial-gradient(34% 44% at 6% 10%,rgba(90,40,70,.25),transparent 72%)}
:root[data-theme="dark"] .site-header{background:color-mix(in srgb,#14110F 72%,transparent)}
:root[data-theme="dark"] .site-header.is-scrolled{background:color-mix(in srgb,#14110F 92%,transparent)}
:root[data-theme="dark"] .hero-de h1 .accent{color:#F0CC74}
:root[data-theme="dark"] .logo .word .w2,:root[data-theme="dark"] .drawer-brand .w2{color:#E9BD58}

/* Knoepfe und Auswahl: Gold mit dunkler Schrift */
:root[data-theme="dark"] .calc-go,:root[data-theme="dark"] .calc-go.is-ready,:root[data-theme="dark"] .premium-reference-form .calc-go,
:root[data-theme="dark"] .hero-de .searchbox .go,:root[data-theme="dark"] .ui-choice-option.is-selected,:root[data-theme="dark"] .uz-btn.is-on,
:root[data-theme="dark"] .ui-profile-step,:root[data-theme="dark"] .to-top,:root[data-theme="dark"] .btn-primary{background:var(--btn)!important;color:var(--btn-ink)!important;box-shadow:none!important}
:root[data-theme="dark"] .ui-choice-option.is-selected *{color:var(--btn-ink)!important}
:root[data-theme="dark"] .calc-go:hover,:root[data-theme="dark"] .hero-de .searchbox .go:hover,:root[data-theme="dark"] .to-top:hover{background:var(--btn-hover)!important}
:root[data-theme="dark"] .ui-choice-option{background:#2A2521;color:var(--ink-2)}
:root[data-theme="dark"] .ui-choice-option:hover{background:#332D28;color:var(--ink)}
:root[data-theme="dark"] .pop-item:hover .pop-no{background:var(--btn);color:var(--btn-ink)}

/* Flaechen: ruhige Stufen, feine Kanten */
:root[data-theme="dark"] .hero-themen{background:color-mix(in srgb,#1C1916 75%,transparent);border-color:#2C2722!important}
:root[data-theme="dark"] .ht-tile{background:#211D19;border-color:#302A25!important}
:root[data-theme="dark"] .ht-tile:hover{border-color:#463E37!important}
:root[data-theme="dark"] .field input:not([type=range]):not([type=checkbox]):not([type=radio]),:root[data-theme="dark"] .field select{background:#110F0D;border-color:#39322C}
:root[data-theme="dark"] .field input:not([type=range]):focus,:root[data-theme="dark"] .field select:focus{border-color:#E9BD58;box-shadow:0 0 0 4px rgba(233,189,88,.14)}
:root[data-theme="dark"] .unit,:root[data-theme="dark"] .input-row .unit{background:#231F1B;border-color:#39322C}
:root[data-theme="dark"] .fx-card,:root[data-theme="dark"] .sw-card,:root[data-theme="dark"] .scope-card,:root[data-theme="dark"] .method-card,:root[data-theme="dark"] .input-data-card,:root[data-theme="dark"] .reference-panel{background:#211D19}
:root[data-theme="dark"] .result-text-col{background:linear-gradient(135deg,#2A6A4E,#1F5540)}
:root[data-theme="dark"] .hero-de .pill{background:#1C1916;border-color:#2F2A25}
:root[data-theme="dark"] .hero-de .pill:hover{background:#2A2521;color:var(--ink)}
:root[data-theme="dark"] .site-footer{background:#0F0D0B;border-top:1px solid #231F1B}
:root[data-theme="dark"] .cta-band{background:#211D19;border:1px solid #2F2A25}
:root[data-theme="dark"] .cta-band .btn-gold{background:var(--btn);color:var(--btn-ink)}
:root[data-theme="dark"] :focus-visible{outline-color:rgba(233,189,88,.6)}
:root[data-theme="dark"] ::selection{background:rgba(233,189,88,.35);color:#fff}

/* ===== Symbole: gross und frei statt in Kaestchen ===== */
.cat-ic,.ht-ic,.dir-ic,:root[data-theme="dark"] .cat-ic,:root[data-theme="dark"] .ht-ic,:root[data-theme="dark"] .dir-ic{background:transparent!important;box-shadow:none!important;border-radius:0}
.cat-ic{width:46px;height:46px;font-size:34px;line-height:1}
.ht-ic{width:auto;height:40px;font-size:32px;justify-content:flex-start;line-height:1}
.dir-ic{width:28px;height:28px;font-size:22px}
.cat-ic,.ht-ic,.dir-ic,.h1-emoji,.sr-ic{filter:drop-shadow(0 3px 5px rgba(60,40,20,.18))}
:root[data-theme="dark"] .cat-ic,:root[data-theme="dark"] .ht-ic,:root[data-theme="dark"] .dir-ic,:root[data-theme="dark"] .h1-emoji,:root[data-theme="dark"] .sr-ic{filter:drop-shadow(0 4px 8px rgba(0,0,0,.55))}
.cat-tile:hover .cat-ic,.ht-tile:hover .ht-ic{transform:translateY(-2px) scale(1.06);transition:transform .25s var(--ease-out)}

/* ===== 3D-Symbole als Bilder ===== */
.emo{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.cat-ic{width:44px;height:44px;font-size:32px}
.ht-ic{width:40px;height:40px;font-size:32px}
.dir-ic{width:26px;height:26px}
.h1-emoji{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.14em}
.h1-emoji .emo,.card-emoji .emo{display:inline-block}
.card-emoji{display:inline-block;width:1.4em;height:1.4em;vertical-align:-.35em}
.sr-ic .emo{width:28px;height:28px}
.sr-ic:has(.emo){background:transparent!important}
.pop-no,:root[data-theme="dark"] .pop-no{width:40px;height:40px;background:transparent!important;border-radius:0;padding:0}
.pop-item:hover .pop-no,:root[data-theme="dark"] .pop-item:hover .pop-no{background:transparent!important;transform:translateY(-2px) scale(1.06);transition:transform .25s var(--ease-out)}
.pop-no .emo,.cat-ic .emo,.ht-ic .emo{filter:none}
.cat-ic:has(.emo),.ht-ic:has(.emo),.dir-ic:has(.emo),.h1-emoji:has(.emo),.pop-no:has(.emo){filter:drop-shadow(0 3px 5px rgba(60,40,20,.14))}
:root[data-theme="dark"] .cat-ic:has(.emo),:root[data-theme="dark"] .ht-ic:has(.emo),:root[data-theme="dark"] .dir-ic:has(.emo),:root[data-theme="dark"] .h1-emoji:has(.emo),:root[data-theme="dark"] .pop-no:has(.emo){filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}

/* =====================================================================
   Rechnerseite "Klar": eine Formularkarte, gefuellte Felder, ruhige Auswahl
   ===================================================================== */
/* Seitenkopf liegt direkt auf dem Hintergrund, nur das Formular ist eine Karte */
.calc-card-main,:root[data-theme="dark"] .calc-card-main{background:transparent!important;border:0!important;box-shadow:none!important;padding:8px 0 0!important;margin-top:0}
.calc-theme .calc-card-main::before{display:none}
.calc-card-main .page-head{padding:18px 0 22px;max-width:820px}
.calc-card-main .page-head h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.025em;margin-top:6px}
.calc-card-main .page-head .lead{font-size:17px;color:var(--ink-2);margin-top:10px}
.calc-card-main .crumbs{font-size:13px;color:var(--muted)}

.calc-page-container form.card,.calc-page-container .premium-reference-form{background:var(--card)!important;border:1px solid var(--border-2)!important;border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 12px 32px -18px rgba(40,40,60,.18)!important;padding:28px 32px}
:root[data-theme="dark"] .calc-page-container form.card{border-color:var(--border)!important;box-shadow:none!important}

/* Kopf des Formulars: kleiner Titel, feiner Fortschritt */
.premium-form-head{align-items:baseline;margin-bottom:10px}
.premium-form-eyebrow{font-size:11.5px;letter-spacing:.08em;color:var(--muted)!important}
.premium-form-head strong{font-size:16px;font-weight:700;color:var(--ink)}
.premium-progress-copy{font-size:12.5px;color:var(--muted);font-weight:500}
.premium-progress{height:3px!important;background:var(--soft2)!important;border-radius:3px;margin-bottom:22px}
.premium-progress span{background:var(--teal)!important}

/* Abschnitte: Trennlinie statt Kasten, kleine Nummer */
.calc-page-container .ui-profile-section{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.calc-page-container .ui-profile-section+.ui-profile-section{border-top:1px solid var(--border-2)!important;margin-top:24px;padding-top:22px!important}
.ui-profile-section-head{gap:12px;margin-bottom:16px;align-items:flex-start}
.calc-page-container .ui-profile-step,:root[data-theme="dark"] .calc-page-container .ui-profile-step{width:26px;height:26px;border-radius:50%;background:var(--soft)!important;color:var(--ink-2)!important;font-size:12.5px;font-weight:700;flex:none;box-shadow:none!important}
.ui-profile-section-head h2{font-family:var(--font-body);font-size:16px;font-weight:700;letter-spacing:0;margin:2px 0 2px}
.ui-profile-section-head p{font-size:13.5px;color:var(--muted);margin:0}

/* Felder: kein Rahmen, kein Statuspunkt */
.calc-page-container .premium-reference-form .field,.calc-page-container .field{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;transform:none!important}
.premium-reference-form .field[data-field-state="valid"]::after{display:none}
@media(min-width:760px){
  .ui-profile-section--standard .ui-profile-section-fields:has(>.field+.field){grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
  .ui-profile-section--standard .ui-profile-section-fields>.field:has(.ui-choice-option:nth-child(4)),
  .ui-profile-section--standard .ui-profile-section-fields>.field:has(.input-row--zeitraum),
  .ui-profile-section--standard .ui-profile-section-fields>.field.full{grid-column:1/-1}
}
.feld-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.calc-page-container .field label,.calc-page-container .feld-kopf label{font-size:14.5px;font-weight:600;color:var(--ink)}
.feld-bereich{font-size:12.5px;font-weight:500;color:var(--muted)}
.calc-page-container .field .hint{font-size:12.5px;color:var(--muted);margin-top:6px}

/* Eingabefelder und Listen: gefuellt, normale Schrift */
.calc-page-container .field input:not([type=range]):not([type=checkbox]):not([type=radio]),.calc-page-container .field select{
  background-color:var(--soft)!important;border:1px solid transparent!important;border-radius:10px;min-height:48px;height:48px;padding:0 14px;
  font-size:16px;font-weight:500;color:var(--ink);box-shadow:none!important;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
.calc-page-container .field input:not([type=range]):not([type=checkbox]):not([type=radio]):hover,.calc-page-container .field select:hover{background-color:var(--soft2)!important}
.calc-page-container .field input:not([type=range]):not([type=checkbox]):not([type=radio]):focus,.calc-page-container .field select:focus{
  background-color:var(--card)!important;border-color:var(--teal)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 16%,transparent)!important;outline:0}
.calc-page-container .field select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important}
:root[data-theme="dark"] .calc-page-container .field input:not([type=range]):not([type=checkbox]):not([type=radio]),:root[data-theme="dark"] .calc-page-container .field select{background-color:#231F1B!important}
:root[data-theme="dark"] .calc-page-container .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A89E94' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important}
:root[data-theme="dark"] .calc-page-container .field input:not([type=range]):not([type=checkbox]):not([type=radio]):focus,:root[data-theme="dark"] .calc-page-container .field select:focus{background-color:#1C1916!important}
.calc-page-container .field input::placeholder{color:var(--muted);font-weight:400}

/* Feld mit Einheit: Einheit sitzt im Feld */
.calc-page-container .field .input-row>input:not(:last-child){border-radius:10px 0 0 10px!important}
.calc-page-container .field .unit,:root[data-theme="dark"] .calc-page-container .field .unit{background:var(--soft)!important;border:0!important;border-left:1px solid var(--border-2)!important;border-radius:0 10px 10px 0;color:var(--muted);font-size:14px;font-weight:500;padding:0 14px}
:root[data-theme="dark"] .calc-page-container .field .unit{background:#231F1B!important;border-left-color:#302A25!important}
/* Monat/Jahr als kleiner Umschalter */
.calc-page-container .field .unit-zeitraum{padding:4px!important;gap:3px;display:flex}
.calc-page-container .field .unit-zeitraum .uz-btn,:root[data-theme="dark"] .calc-page-container .field .unit-zeitraum .uz-btn{background:transparent!important;color:var(--muted)!important;border:0!important;border-radius:7px;padding:0 12px;font-size:13px;font-weight:600;box-shadow:none!important}
.calc-page-container .field .unit-zeitraum .uz-btn.is-on{background:var(--card)!important;color:var(--ink)!important;box-shadow:0 1px 2px rgba(0,0,0,.1)!important}
:root[data-theme="dark"] .calc-page-container .field .unit-zeitraum .uz-btn.is-on{background:#3A332D!important;color:var(--ink)!important}

/* Schieberegler */
.calc-page-container .field .feld-regler{margin-top:14px;height:6px;background:linear-gradient(to right,var(--teal) 0 var(--regler-fuell,0%),var(--soft2) var(--regler-fuell,0%) 100%)}
.calc-page-container .field .feld-regler::-webkit-slider-thumb{width:20px;height:20px;margin-top:-7px;background:var(--card);border:3px solid var(--teal);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.calc-page-container .field .feld-regler::-moz-range-thumb{width:16px;height:16px;background:var(--card);border:3px solid var(--teal)}
.calc-page-container .field .feld-regler::-moz-range-track{height:6px;background:var(--soft2)}
.calc-page-container .ui-profile-section{border-radius:0!important}

/* Auswahl als Segmentsteuerung */
.calc-page-container .ui-choice-grid--segments{background:var(--soft);padding:4px;border-radius:12px;gap:4px}
:root[data-theme="dark"] .calc-page-container .ui-choice-grid--segments{background:#231F1B}
.calc-page-container .ui-choice-grid--segments .ui-choice-option,:root[data-theme="dark"] .calc-page-container .ui-choice-grid--segments .ui-choice-option{background:transparent!important;color:var(--ink-2)!important;min-height:40px;font-size:15px;font-weight:600;border-radius:9px;box-shadow:none!important}
.calc-page-container .ui-choice-grid--segments .ui-choice-option:hover{color:var(--ink)!important;background:color-mix(in srgb,var(--card) 50%,transparent)!important}
.calc-page-container .ui-choice-grid--segments .ui-choice-option.is-selected{background:var(--card)!important;color:var(--teal)!important;box-shadow:0 1px 3px rgba(0,0,0,.12)!important}
:root[data-theme="dark"] .calc-page-container .ui-choice-grid--segments .ui-choice-option.is-selected{background:#3A332D!important;color:var(--teal)!important;box-shadow:none!important}
.calc-page-container .ui-choice-option.is-selected *,:root[data-theme="dark"] .calc-page-container .ui-choice-option.is-selected *{color:inherit!important}
/* Kachel-Auswahl (keine Segmente): Rahmen statt Vollfarbe */
.calc-page-container .ui-choice-grid:not(.ui-choice-grid--segments) .ui-choice-option{background:var(--soft)!important;color:var(--ink)!important;border-radius:12px;box-shadow:none!important}
.calc-page-container .ui-choice-grid:not(.ui-choice-grid--segments) .ui-choice-option.is-selected,:root[data-theme="dark"] .calc-page-container .ui-choice-grid:not(.ui-choice-grid--segments) .ui-choice-option.is-selected{background:color-mix(in srgb,var(--teal) 9%,var(--card))!important;color:var(--ink)!important;box-shadow:inset 0 0 0 2px var(--teal)!important}
.ui-choice-hinweis{font-size:12.5px;color:var(--muted);margin-top:6px}

/* Kontrollkaestchen schlicht */
.calc-page-container .field .check-row{background:transparent!important;border:0!important;padding:6px 0!important;min-height:0}
.calc-page-container .field .check-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--teal)}

/* Rechenknopf */
.calc-page-container .calc-go{width:100%;min-height:50px;margin-top:26px;border-radius:12px!important;font-size:16px;font-weight:700;box-shadow:none!important}
.form-note{text-align:center;font-size:13px;color:var(--muted);margin-top:10px}
.ui-input-summary{background:var(--soft)!important;border:0!important;border-radius:12px}
.ui-input-summary-values>span{background:var(--card)!important;border:1px solid var(--border-2)!important}

/* Ergebnis: helle, ruhige Flaeche mit grosser Zahl */
.calc-page-container .result,:root[data-theme="dark"] .calc-page-container .result{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin-top:22px}
.calc-page-container .result-text-col,:root[data-theme="dark"] .calc-page-container .result-text-col{background:color-mix(in srgb,var(--teal) 7%,var(--card))!important;border:1px solid color-mix(in srgb,var(--teal) 18%,var(--border-2));border-radius:16px;padding:22px 24px}
.calc-page-container .result-text-col,.calc-page-container .result-text-col *{color:var(--ink-2)!important}
.calc-page-container .result-text-col .value{color:var(--teal)!important;font-size:clamp(32px,5vw,44px);font-weight:800;letter-spacing:-.02em}
.calc-page-container .result-text-col .breakdown>div{background:var(--card)!important;border:1px solid var(--border-2);border-radius:10px}
.calc-page-container .result-text-col .breakdown>div>*:last-child,.calc-page-container .result-text-col strong,.calc-page-container .result-text-col b{color:var(--ink)!important}
.calc-page-container .result-text-col a{color:var(--teal)!important}

/* Infokarten unter dem Formular */
.calc-page-container .sw-card,.calc-page-container .fx-card,.calc-page-container .scope-card,.calc-page-container .method-card,.calc-page-container .input-data-card,.calc-page-container .reference-panel,
:root[data-theme="dark"] .calc-page-container .sw-card,:root[data-theme="dark"] .calc-page-container .fx-card{background:var(--card)!important;border:1px solid var(--border-2)!important;border-radius:16px;box-shadow:none!important}
:root[data-theme="dark"] .calc-page-container .sw-card,:root[data-theme="dark"] .calc-page-container .fx-card{border-color:var(--border)!important}

@media(max-width:560px){
  .calc-page-container form.card,.calc-page-container .premium-reference-form{padding:20px 16px;border-radius:16px}
  .calc-card-main .page-head{padding:10px 0 16px}
  .calc-page-container .result-text-col{padding:18px}
}

/* Datumsfelder: verstecktes Hilfsfeld bleibt unsichtbar, Kalenderknopf im Feldstil */
.calc-page-container .field input.kal-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;border:0!important;opacity:0!important;overflow:hidden!important;clip-path:inset(50%)!important;pointer-events:none!important}
.calc-page-container .kal .kal-feld{gap:6px}
.calc-page-container .kal .kal-open{background-color:var(--soft)!important;border:1px solid transparent!important;border-radius:10px!important;min-width:48px;box-shadow:none!important;color:var(--ink-2)}
.calc-page-container .kal .kal-open:hover{background-color:var(--soft2)!important}
:root[data-theme="dark"] .calc-page-container .kal .kal-open{background-color:#231F1B!important}
@media(max-width:560px){
  .calc-page-container .field .input-row--zeitraum>input{border-radius:10px!important}
  .calc-page-container .field .input-row--zeitraum .unit-zeitraum{border-left:0!important;border-radius:10px!important}
  .calc-page-container{padding:0 16px}
}
/* Verstecktes Auswahlfeld hinter den Auswahlknoepfen bleibt unsichtbar */
.calc-page-container .field select.ui-choice-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;border:0!important;opacity:0!important;overflow:hidden!important;clip-path:inset(50%)!important;pointer-events:none!important;background:none!important}
.feld-bereich{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}

/* =====================================================================
   Ergebnisgrafiken: Ergebnis oben, Grafik darunter in voller Breite
   ===================================================================== */
.calc-page-container .result-main-grid,.calc-page-container .result-main-grid:has(.calc-visual-container:not(:empty)){grid-template-columns:1fr!important;gap:16px}
.calc-page-container .result-visual-col{width:100%}
.calc-page-container .calc-visual-container{display:block;width:100%}

/* Grafikkarte (alle Szenen, alte und neue) im neuen Stil */
.calc-page-container .precision-scene,.calc-page-container .tech-visual-card,.calc-page-container .geo-wrapper>*:first-child{max-width:none;width:100%;background:var(--card)!important;border:1px solid var(--border-2)!important;border-radius:16px;box-shadow:none!important}
:root[data-theme="dark"] .calc-page-container .precision-scene,:root[data-theme="dark"] .calc-page-container .tech-visual-card{border-color:var(--border)!important}
.calc-page-container .precision-scene{padding:16px 18px 14px}
.precision-scene__head{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.precision-scene figcaption{font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:8px}

/* Farben der neuen Szenen: Kategoriefarbe, im Dunkeln aufgehellt */
.calc-page-container{--rf-a:var(--cat-c,var(--teal));--rf-warn:#C2410C;--rf-gut:#2F7D5B}
:root[data-theme="dark"] .calc-page-container{--rf-a:color-mix(in srgb,var(--cat-c,var(--teal)) 58%,#fff);--rf-warn:#FB8A5B;--rf-gut:#5CC596}
.rf-svg{max-height:none!important;overflow:visible}
.rf-svg text{font-family:var(--font-body)}
.rf-titel{fill:var(--ink);font-size:21px;font-weight:700}
.rf-wert{fill:var(--ink);font-size:20px;font-weight:700}
.rf-wert-klein{fill:var(--ink);font-size:17px;font-weight:700}
.rf-gross{fill:var(--rf-a);font-size:36px;font-weight:800;letter-spacing:-.02em}
.rf-klein{fill:var(--muted);font-size:16px}
.rf-auf-farbe{fill:#fff;font-size:16px;font-weight:700}
:root[data-theme="dark"] .rf-auf-farbe{fill:#14110F}
.rf-warn-text{fill:var(--rf-warn);font-size:20px;font-weight:800}
.rf-gut-text{fill:var(--rf-gut);font-size:20px;font-weight:800}
.rf-akzent{fill:var(--rf-a)}
.rf-akzent-weich{fill:color-mix(in srgb,var(--rf-a) 24%,var(--card))}
.rf-neutral{fill:var(--soft2)}
.rf-neutral-dunkel{fill:color-mix(in srgb,var(--ink) 38%,var(--card))}
.rf-warn{fill:var(--rf-warn)}
.rf-gut{fill:var(--rf-gut)}
.rf-muenze{fill:#E9BD58;stroke:#B8892A;stroke-width:2}
.rf-rahmen{stroke:color-mix(in srgb,var(--rf-a) 45%,var(--border));stroke-width:1.5}
.rf-schraffur-grund{fill:color-mix(in srgb,var(--rf-a) 8%,var(--card))}
.rf-schraffur-linie{stroke:color-mix(in srgb,var(--rf-a) 40%,var(--card));stroke-width:3}
.rf-achse{stroke:var(--border);stroke-width:2;fill:none}
.rf-grenzlinie{stroke:var(--ink);stroke-width:2;stroke-dasharray:7 6;fill:none;opacity:.7}
.rf-markierung{stroke:var(--rf-warn);stroke-width:2;fill:none}
.rf-klammer{stroke:var(--muted);stroke-width:2;fill:none}
.rf-weg{stroke:var(--border);stroke-width:6;stroke-dasharray:2 12;stroke-linecap:round;fill:none}
.rf-pfeil{stroke:var(--rf-a);stroke-width:3;fill:none;stroke-linecap:round;marker-end:none}

/* Bewegung: einmalig und ruhig */
.rf-wachsen{transform-box:fill-box;transform-origin:50% 100%;animation:rf-wachsen .8s var(--ease-out) both;animation-delay:var(--d,0s)}
.rf-breiter{transform-box:fill-box;transform-origin:0 50%;animation:rf-breiter .9s var(--ease-out) both;animation-delay:var(--d,0s)}
.rf-plopp{transform-box:fill-box;transform-origin:50% 50%;animation:rf-plopp .5s var(--ease-spring) both;animation-delay:var(--d,0s)}
.rf-einblenden{animation:rf-einblenden .6s ease both;animation-delay:var(--d,0s)}
.rf-zeichnen{stroke-dasharray:600;stroke-dashoffset:600;animation:rf-zeichnen 1s var(--ease-out) forwards;animation-delay:var(--d,0s)}
.rf-puls{transform-box:fill-box;transform-origin:50% 50%;animation:rf-puls 1.8s ease-in-out 2s 2}
@keyframes rf-wachsen{from{transform:scaleY(0)}to{transform:none}}
@keyframes rf-breiter{from{transform:scaleX(0)}to{transform:none}}
@keyframes rf-plopp{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes rf-einblenden{from{opacity:0}to{opacity:1}}
@keyframes rf-zeichnen{to{stroke-dashoffset:0}}
@keyframes rf-puls{0%,100%{transform:none}50%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){
  .rf-wachsen,.rf-breiter,.rf-plopp,.rf-einblenden,.rf-puls{animation:none!important}
  .rf-zeichnen{animation:none!important;stroke-dashoffset:0}
}

/* ---------- Beispielrechnung unter dem Rechner (templates.js, formulaHtml) ---------- */
.bsp{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:26px 28px 24px;margin:26px 0;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.bsp-head{margin-bottom:20px}
.bsp-head h2{margin:0 0 4px;font-size:22px;line-height:1.25;color:var(--ink)}
.bsp-sub{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.bsp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 32px}
.bsp-solo{grid-template-columns:minmax(0,1fr)}
.bsp-col{min-width:0}
.bsp-col h3{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bsp-inputs{margin:0;padding:0}
.bsp-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--border-2)}
.bsp-row:last-child{border-bottom:0}
.bsp-row dt{margin:0;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.bsp-row dd{margin:0;font-size:14.5px;font-weight:650;line-height:1.4;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.bsp-steps{list-style:none;margin:0;padding:0}
.bsp-steps li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-2)}
.bsp-steps li:last-child{border-bottom:0}
.bsp-n{width:24px;height:24px;border-radius:50%;background:var(--teal-soft);color:var(--teal-dark);font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.bsp-l{font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.bsp-v{font-size:14.5px;font-weight:700;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.bsp-result{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:16px 20px;border-radius:14px;background:var(--teal-soft);border:1px solid color-mix(in srgb,var(--teal) 22%,transparent)}
.bsp-result-l{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark)}
.bsp-result-v{font-size:24px;line-height:1.2;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.bsp-note{margin:12px 2px 0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.bsp-szen{margin-top:22px}
.bsp-szen h3{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (max-width:720px){
  .bsp{padding:20px 16px 18px;border-radius:16px}
  .bsp-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .bsp-head h2{font-size:19px}
  .bsp-result{padding:14px 16px}
  .bsp-result-v{font-size:21px}
}

/* ===== Wortmarke Rechnercenter =====
   "Rechner" kraeftig, "center" leichter in der Akzentfarbe: Die Gewichte trennen die
   Wortteile, ohne ein falsches Leerzeichen ins Kompositum zu setzen. */
.logo .word,.drawer-brand{font-family:var(--font-disp);font-weight:800;letter-spacing:-.032em;line-height:1;font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;white-space:nowrap}
.logo .word .w2,.drawer-brand .w2{font-weight:500;letter-spacing:-.012em}
@media (max-width:360px){
  .logo .word{font-size:18px}
  .logo{gap:8px}
}