/* =========================================================================
   Rechnerei — "Warm Hub" design system
   Warm cream background, teal + gold accents, local system type.
   ========================================================================= */
:root{
  --bg:#F4F0E7;          /* warm cream page background */
  --card:#ffffff;
  --soft:#fbf9f3;        /* soft card */
  --soft2:#ECE6D9;
  --soft3:#efe9db;
  --ink:#211F1A;         /* near-black warm */
  --ink-2:#5b574c;
  --ink-3:#4a463d;
  --muted:#6b665c; /* WCAG AA 5,0:1 auf --bg; vorher #a9a294 = 2,2:1 */
  --teal:#0B7568;
  --teal-dark:#07564D;
  --teal-soft:#C7DFD7;
  --gold:#E5B94F;
  --gold-tint:#fdf4dd;
  --gold-ink:#9a7b22;
  --border:#e3ddcf;
  --border-2:#e9e2d3;
  --r-lg:24px;
  --r-md:20px;
  --r:16px;
  --r-sm:12px;
  --pill:999px;
  --shadow-card:0 30px 60px -34px rgba(31,36,33,.5);
  --shadow-pop:0 24px 50px -26px rgba(31,36,33,.42);
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-disp:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --maxw:1200px;
  --readw:760px;
}

/* 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)}
.calc-theme .result{background:linear-gradient(145deg,#fff 0%,color-mix(in srgb,var(--teal-soft) 34%,#fff) 100%);border-color:color-mix(in srgb,var(--teal) 34%,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:#f0dca6}
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:-.025em;line-height:1.1;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,#d1d5db);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:#fff;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:#fff;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:#fff;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:#fff;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 rgba(255,255,255,0.6);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:rgba(255,255,255,0.7);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:#fff;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:#3a2f10;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,#fff 0%,#fdfcf8 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)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 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:#fff;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)}
.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:#fff;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,#fff 0%,color-mix(in srgb,var(--teal-soft) 24%,#fff) 100%)}
.time-duration-first{background:linear-gradient(145deg,#fff 0%,color-mix(in srgb,var(--teal-soft) 34%,#fff) 100%);border-color:color-mix(in srgb,var(--teal) 24%,var(--border))}.time-duration-second{background:linear-gradient(145deg,#fff 0%,color-mix(in srgb,var(--teal-soft) 48%,#fff) 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:#fff;font-size:.83rem}
.time-operation-step{padding-block:16px;background:#fff}.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%,#fff);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%,#fff);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%,#fff);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,#f5fbf8 0%,#fffdf7 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:#fff;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:rgba(255,255,255,.84);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 */
.result {
  background:linear-gradient(145deg,#ffffff 0%,#f3faf7 100%);
  border:1px solid rgba(11,117,104,.28);
  border-radius: var(--r-md);
  padding: 32px;
  box-shadow:0 22px 50px -32px rgba(11,117,104,.62);
  border-top: 4px solid var(--teal);
  position: relative;
  overflow: hidden;
}
.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,#fff 0%,#f5faf8 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:#0E7A6F;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:#0E7A6F;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:#0E7A6F;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:#0E7A6F;stroke-width:2}.tech-shaft-end{fill:#fff;stroke:#0E7A6F;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:#0E7A6F;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:#0E7A6F;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:#0E7A6F;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:#0E7A6F;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:#0E7A6F;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:#0E7A6F;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:#0E7A6F;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:#0E7A6F;opacity:.72}.tech-liquid-target{fill:#73b9ad;opacity:.55}.tech-pour-line{fill:none;stroke:#0E7A6F;stroke-width:4;stroke-dasharray:7 5;animation:tech-dash 1s linear infinite}.tech-drop{fill:#0E7A6F;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:#0E7A6F}.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:#0E7A6F;stroke-width:2}.story-calendar-head{stroke:#E8C26A;stroke-width:9}.story-ring{fill:#0E7A6F}.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:#0E7A6F;stroke-width:3}.story-panel-grid{stroke:#0E7A6F;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:#0E7A6F;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%,#fff);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%,#fff);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%,#fff);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%,#fff);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%,#fff);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%,#fff);animation-delay:.2s}.spec-layer-2{fill:color-mix(in srgb,var(--teal) 45%,#fff);animation-delay:.3s}.spec-layer-3{fill:color-mix(in srgb,var(--teal) 68%,#fff);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%,#fff)}.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%,#fff);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%,#fff);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 #fff;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 #f5ebd0;
  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,#fbfdfc,#fffdf8);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:#fff;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%,#fff),#fff);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:#fff;margin:1.1rem 0}
.reference-panel--scenarios{background:linear-gradient(145deg,#fffaf0,#fff)}
.reference-panel--result{background:linear-gradient(145deg,color-mix(in srgb,var(--teal-soft) 30%,#fff),#fff)}
.reference-panel--sources{background:#fff;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}

/* 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:#fff;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:#fff;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:#fff;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:#fff}
.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:#fff;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='%230B7568' 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='%230B7568' 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:#fdfcfa}
.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,#fff,#f2faf7);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:#dff1ed;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:#fff;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:#fff;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:#fff}
.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,#fff,#f5faf8);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:#faf8f2}
.content table tbody tr:hover{background:#f3efe3}
.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%,rgba(255,255,255,.22) 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,#fff 0%,#f8faf9 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:#102a3b}
.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:#e7ece9;border-radius:99px;overflow:hidden}
.premium-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#0b7568,#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:#fff;border-color:#c8d8d3;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:#0b7568;box-shadow:0 0 0 4px #d8eee8}
.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 #c6d5d0;border-radius:14px;background:#fff;color:#15384d;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:#0b7568;background:#f2f8f6}
.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,#fff 0%,#f6faf9 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 #dbe4e0}
.precision-scene{width:100%;max-width:780px;margin:0;padding:16px 16px 12px;border:1px solid #cfdcd8;border-radius:18px;background:linear-gradient(145deg,#fbfdfc 0%,#eef5f3 100%);box-shadow:0 22px 44px -36px rgba(16,42,59,.72);overflow:hidden;color:#102a3b}
.precision-scene__head{display:flex;justify-content:space-between;gap:16px;padding:0 4px 10px;border-bottom:1px solid #d9e3df;font-size:.68rem;line-height:1.2;font-weight:850;letter-spacing:.13em;color:#0b7568}
.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,#fff 0%,#fbfaff 55%,#f7f9ff 100%);border-color:#dcd8f5;border-top-color:#8b7cf6}
.result:has(.date-scene) .calc-visual-container{border-top-color:#e9e5f7}
.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:#dedaf3;background:linear-gradient(145deg,#fff 0%,#fbfaff 52%,#f5f8ff 100%);box-shadow:0 24px 50px -38px rgba(65,55,122,.42);color:var(--dt-ink)}
.date-scene .precision-scene__head{border-bottom-color:#e9e5f7;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 #c9e3f9;border-radius:16px;background:#eff7ff;text-align:center}.dt-time-box:nth-of-type(2){border-color:#d9d1fa;background:#f3f0ff}.dt-time-box.is-result{border:2px solid #f2bed0;background:#fff0f5}.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:#ece9f6;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 #c7e2f8;border-radius:18px;background:#eff7ff}.dt-zone-html-card.is-target{border-color:#f2c2d2;background:#fff0f5}.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 #ded8f6;border-radius:12px;background:#f4f1ff;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:#0b7568;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:#0b7568;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:#0b7568;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:#0b7568;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:#0b7568}.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:#0b7568;stroke-width:4}.precision-deadline-node path{fill:none;stroke:#0b7568;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:#0b7568}.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:#0b7568;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:#0b7568;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:#0b7568}.precision-dew-marker--surface rect{fill:#0b7568;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:#0b7568;stroke-width:2;stroke-dasharray:6 5}.precision-triangle-right{fill:none;stroke:#0b7568;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:#0b7568}.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:#0b7568}.rank2-route-break{fill:#e4b45c}.rank2-route-rest{fill:#8ea9b7}.rank2-route-node{fill:#fff;stroke:#0b7568;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:#0b7568;stroke-width:1.5;animation:rank2-tile-in .38s var(--tile-delay) ease both}.rank2-pay-track{fill:#e3ebe8}.rank2-pay-base{fill:#0b7568;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:#0b7568}.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:#0b7568;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:#0b7568;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:#0b7568;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:#0b7568}.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:#0b7568}.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:#0b7568;stroke-width:2;stroke-dasharray:7 5}.rank2-roof-arrow{fill:#0b7568}.rank2-roof-hip{fill:none;stroke:#0b7568;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:#0b7568;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:#0b7568;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:#0b7568}.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:#0b7568}.priority-taxi-wait{fill:#d39a42}.priority-taxi-extra{fill:#8fa7b1}
.priority-copay-track{fill:#e0e9e6}.priority-copay-paid{fill:#0b7568;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:#0b7568!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:#0b7568;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:#0b7568;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:#0b7568;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:#0b7568}.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:#0b7568;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:#0b7568}.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:#0b7568}.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:#0b7568}.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:#0b7568}.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:#0b7568;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:#0b7568}.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:#eaf2f2}
.distance-map-ocean{fill:#eaf2f2}.distance-map-context{opacity:.5}.distance-germany-shape{fill:#d6e8e2!important;stroke:#15384d!important;stroke-width:.14!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:#0b7568;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%,#fff);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%,#fff)}.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%,#fff);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%,#fff)}.featured-step-card--result{fill:color-mix(in srgb,var(--teal-soft) 72%,#fff);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%,#fff);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%,#fff);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%,#fff);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%,#fff);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%,#fff)}.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%,#fff);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%,#fff);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%,#fff);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%,#fff);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%,#fff);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%,#fff);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%,#fff);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%,#fff);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%,#fff)}.concrete-face--side{fill:color-mix(in srgb,var(--teal) 45%,#fff);animation-delay:.08s}.concrete-face--top{fill:color-mix(in srgb,var(--teal-soft) 76%,#fff);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%,#fff);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%,#fff);animation-delay:.1s}.gas-card--result{fill:color-mix(in srgb,var(--teal-soft) 70%,#fff);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%,#fff);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%,#fff);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%,#fff);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%,#fff);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%,#fff);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%,#fff);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%,#fff);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-side{fill:none;stroke:var(--teal-dark);stroke-width:4}.cylinder-top{fill:color-mix(in srgb,var(--teal-soft) 68%,#fff);stroke:var(--teal-dark);stroke-width:4;animation:cylinder-rise .55s ease both}.cylinder-bottom{fill:color-mix(in srgb,var(--teal) 54%,#fff);stroke:var(--teal-dark);stroke-width:4;animation:cylinder-rise .55s .1s ease both}.cylinder-result{fill:color-mix(in srgb,var(--teal-soft) 60%,#fff);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%,#fff);stroke:var(--teal)}.fine-card--ban{fill:color-mix(in srgb,#f1d8d2 42%,#fff);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%,#fff);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%,#fff);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%,#fff)}
.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,.ix-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,.ix-card h2{margin:0;font-size:22px;line-height:1.25}
.fx-lead,.ix-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)}

.ix-body{margin-top:4px}
.ix-svg{width:100%;height:auto;display:block;overflow:visible}
.ix-grid{stroke:var(--border);stroke-width:1}
.ix-area{fill:var(--teal-soft);opacity:.4}
.ix-line{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.ix-dot{fill:var(--card);stroke:var(--teal-dark);stroke-width:2}
.ix-dot:hover{fill:var(--gold);stroke:var(--gold-ink);r:6}
.ix-ytick,.ix-xtick{fill:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.ix-axis-label{fill:var(--ink-3);font-size:11.5px;font-weight:800;letter-spacing:.05em}

.ix-details{margin-top:14px;border-top:1px solid var(--border-2);padding-top:10px}
.ix-details summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--teal-dark);
  padding:6px 2px;list-style:none}
.ix-details summary::-webkit-details-marker{display:none}
.ix-details summary::before{content:"▸ ";color:var(--teal)}
.ix-details[open] summary::before{content:"▾ "}
.ix-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.ix-table th,.ix-table td{text-align:right;padding:8px 10px;border-bottom:1px solid var(--border-2);
  font-variant-numeric:tabular-nums}
.ix-table th:first-child,.ix-table td:first-child{text-align:left}
.ix-table thead th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:800}
.ix-foot{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}

@media (max-width:760px){
  .fx-grid{grid-template-columns:1fr;gap:16px}
  .fx-card,.ix-card{padding:20px 18px 18px}
  .fx-card h2,.ix-card h2{font-size:19px}
  .fx-final strong{font-size:18px}
}
@media (prefers-reduced-motion: reduce){
  .ix-dot{transition:none}
}

/* ===== 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.
   =========================================================================== */

:root{
  --bg:#F6F7F8;          /* neutrale, sehr helle Flaeche statt Creme */
  --card:#FFFFFF;
  --soft:#F2F4F5;
  --soft2:#E8EBED;
  --soft3:#EDEFF1;
  --ink:#1A1D21;         /* neutrales Fast-Schwarz statt warmem Ton */
  --ink-2:#4A5057;
  --ink-3:#343A40;
  --muted:#646B73;       /* 5,4:1 auf --bg, erfuellt AA */
  --teal:#0B7568;        /* der eine Akzent */
  --teal-dark:#065349;
  --teal-soft:#D8E9E6;
  --gold:#E0A93B;
  --gold-tint:#FBF3E0;
  --gold-ink:#8A6A1C;
  --border:#E1E5E8;
  --border-2:#EAEDEF;
}


/* Warme Restwerte, die noch fest verdrahtet waren */
.content table tbody tr:nth-child(even){background:#FAFBFC}
.content table tbody tr:hover{background:#F2F4F5}
.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,.ix-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.
   =========================================================================== */

:root{
  --teal:#1F2A37;        /* Graphit - traegt Schaltflaeche, Fokus, Linien */
  --teal-dark:#111827;
  --teal-soft:#E4E7EB;
  --gold:#E0A93B;        /* der einzige Farbakzent: Auswahl und Ergebnis */
  --gold-tint:#FBF3E0;
  --gold-ink:#8A6A1C;
}

/* Premium editorial palettes. Each calculator category gets one semantic
   accent while the neutral, graphite and gold site chrome remains unchanged. */
.calc-theme-finance .calc-page-container{--teal:#218D66;--teal-dark:#125F43;--teal-soft:#E2F3ED;--page-glow:33,141,102}
.calc-theme-career .calc-page-container{--teal:#2C259D;--teal-dark:#1A156F;--teal-soft:#E3E2F3;--page-glow:44,37,157}
.calc-theme-health .calc-page-container{--teal:#9D254F;--teal-dark:#6F1535;--teal-soft:#F3E2E8;--page-glow:157,37,79}
.calc-theme-family .calc-page-container{--teal:#9D255A;--teal-dark:#6F153D;--teal-soft:#F3E2EA;--page-glow:157,37,90}
.calc-theme-automotive .calc-page-container{--teal:#254A9D;--teal-dark:#15316F;--teal-soft:#E2E8F3;--page-glow:37,74,157}
.calc-theme-energy .calc-page-container{--teal:#9D6525;--teal-dark:#6F4615;--teal-soft:#F3EBE2;--page-glow:157,101,37}
.calc-theme-construction .calc-page-container{--teal:#9D6525;--teal-dark:#6F4615;--teal-soft:#F3EBE2;--page-glow:157,101,37}
.calc-theme-technology .calc-page-container{--teal:#475569;--teal-dark:#2B3748;--teal-soft:#E7EAEF;--page-glow:71,85,105}
.calc-theme-geometry .calc-page-container{--teal:#238097;--teal-dark:#145869;--teal-soft:#E2F0F3;--page-glow:35,128,151}
.calc-theme-mathematics .calc-page-container{--teal:#51259D;--teal-dark:#36156F;--teal-soft:#E8E2F3;--page-glow:81,37,157}
.calc-theme-date .calc-page-container{--teal:#25749D;--teal-dark:#15516F;--teal-soft:#E2EDF3;--page-glow:37,116,157}
.calc-theme-household .calc-page-container{--teal:#1F827A;--teal-dark:#10544E;--teal-soft:#E2F3F1;--page-glow:31,130,122}
.calc-theme-garden .calc-page-container{--teal:#1E7F42;--teal-dark:#155C2F;--teal-soft:#DDF0E2;--page-glow:30,127,66}
.calc-theme-painting .calc-page-container{--teal:#90259D;--teal-dark:#65156F;--teal-soft:#F1E2F3;--page-glow:144,37,157}
.calc-theme-flooring .calc-page-container{--teal:#9D4825;--teal-dark:#6F2F15;--teal-soft:#F3E7E2;--page-glow:157,72,37}
.calc-theme-pets .calc-page-container{--teal:#977024;--teal-dark:#6A4D14;--teal-soft:#F3EDE2;--page-glow:151,112,36}
.calc-theme-services .calc-page-container{--teal:#1E6B80;--teal-dark:#0F4351;--teal-soft:#E2EFF3;--page-glow:30,107,128}
.calc-theme-neutral .calc-page-container{--teal:#334155;--teal-dark:#1C2735;--teal-soft:#E6EAF0;--page-glow:51,65,85}

/* 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)}

/* Diagramme folgen derselben Palette; Gold markiert Interaktion. */
.ix-line{stroke:var(--teal)}
.ix-area{fill:var(--teal-soft);opacity:.68}
.ix-dot{fill:#FFFFFF;stroke:var(--teal)}
.ix-dot:hover{fill:var(--gold);stroke:var(--gold-ink)}
.ix-details summary{color:var(--ink-3)}
.ix-details summary::before{color:var(--gold-ink)}
.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,#fff 0%,color-mix(in srgb,var(--teal-soft) 46%,#fff) 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,#fff 0%,color-mix(in srgb,var(--teal-soft) 20%,#fff) 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,#fff 0%,color-mix(in srgb,var(--teal-soft) 24%,#fff) 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%,#fff)}
.calc-theme-date .dt-soft-panel,.calc-theme-date .dt-zone-html-note{fill:color-mix(in srgb,var(--teal-soft) 62%,#fff);stroke:color-mix(in srgb,var(--teal) 24%,#fff);background:color-mix(in srgb,var(--teal-soft) 62%,#fff);border-color:color-mix(in srgb,var(--teal) 24%,#fff)}
.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%,#fff);fill:color-mix(in srgb,var(--teal-soft) 72%,#fff)}
.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%,#fff)}
.calc-theme-date .dt-clock-face,.calc-theme-date .dt-wheel-center{stroke:color-mix(in srgb,var(--teal) 22%,#fff)}
.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%,#fff)}
.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%,#fff);background:color-mix(in srgb,var(--teal-soft) 66%,#fff);stroke:color-mix(in srgb,var(--teal) 26%,#fff);border-color:color-mix(in srgb,var(--teal) 26%,#fff)}
.calc-theme-date .dt-time-bar>div{background:color-mix(in srgb,var(--teal-soft) 72%,#fff)}
.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%,#fff);stroke:color-mix(in srgb,var(--teal) 22%,#fff)}
.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%,#fff)}
.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,#fff 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)}
.ui-profile-section-fields{display:grid;grid-template-columns:repeat(2,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:repeat(2,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%,#fff);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%,#fff);transform:translateY(-1px)}
.ui-choice-option:focus-visible{outline:3px solid rgba(var(--page-glow),.2);outline-offset:2px}
.ui-choice-option.is-selected{border-color:var(--teal);background:var(--teal);color:#fff;box-shadow:0 12px 24px -17px rgba(var(--page-glow),.9)}
.ui-choice-icon{display:grid;place-items:center;min-width:34px;height:30px;padding-inline:7px;border-radius:9px;background:#fff;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:#fff;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:#fff;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%,#fff)}

.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%,#fff)}
.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:#fff;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:#fff5f3;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:#fff;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%, #fff);
}
.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%, #fff);
  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%, #fff);flex:0 0 auto}
.ot-tile.is-on .ot-lead{background:#fff}
.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%, #fff);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%,#fff);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%,#fff);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%,#fff);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%,#fff)}
.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%,#fff);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%,#fff)}
.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). */
.calc-theme-leisure .calc-page-container{--teal:#9D5425;--teal-dark:#6F3915;--teal-soft:#F3E9E2;--page-glow:157,84,37}

/* ===== "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%, #fff)}

.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:#fff;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:#fff;
  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='%230B7568' 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%,#fff)}
.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%,#fff)}

.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:#fff;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:#fff;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='%230B7568' 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:#fff}

.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:#fff;
  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%,#fff)}
.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%,#fff)}
.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%,#fff)}
.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%,#fff);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:#fff;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%,#fff)}
.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}
}