@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans.woff2") format("woff2-variations"),
       url("../fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --night:      #0C1F23;
  --deep:       #12292E;
  --ink:        #16323A;   
  --text:       #3B5157;   
  --muted:      #56696E;   
  --line:       #DCE5E4;
  --paper:      #F4F7F7;
  --mint:       #EAF5F3;
  --white:      #FFFFFF;
  --teal:       #16978A;   
  --teal-ink:   #0B7268;   
  --teal-light: #7FD8CD;   
  --teal-btn:   #108076;   
  --teal-btn-hover: #0B7268;
  --coral:      #E0664F;   
  --sun:        #FFF1CC;
  --on-dark:      #FFFFFF;
  --on-dark-soft: rgba(255,255,255,.74);
  --on-dark-mute: rgba(255,255,255,.56);
  --header: 76px;
  --wrap:   1240px;
  --gutter: 32px;
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
  color: var(--text); background: var(--white);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 800; overflow-wrap: break-word; }
p { margin: 0; }
a { color: var(--teal-ink); }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
svg { display: block; }
button { font: inherit; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: #fff; color: var(--ink); padding: 12px 20px; font-weight: 700; }
.skip:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.screen--dark :focus-visible { outline-color: var(--teal-light); }
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header);
  color: var(--ink); background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(22,50,58,.08);
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.site-header[data-theme="dark"] { color: #fff; background: rgba(12,31,35,.6); border-bottom-color: rgba(255,255,255,.08); }
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.brand-word { display: grid; gap: 1px; line-height: 1.1; font-size: .98rem; letter-spacing: .3em; color: var(--ink); }
.brand-word b { font-weight: 800; }
.brand-word span { font-weight: 400; }
.site-header[data-theme="dark"] .brand-word { color: #fff; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { white-space: nowrap; }
@media (max-width: 1240px) { .nav { gap: 20px; } .nav-long { display: none; } }
.nav a:not(.btn) {
  position: relative; color: inherit; text-decoration: none; font-weight: 600; font-size: .94rem; opacity: .8;
  transition: opacity .2s ease;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav a:not(.btn):hover, .nav a[aria-current] { opacity: 1; }
.nav a[aria-current]::after { transform: scaleX(1); background: var(--teal); }
.site-header[data-theme="dark"] .nav a[aria-current]::after { background: var(--teal-light); }
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  border: 1px solid currentColor; background: transparent; color: inherit; align-items: center; justify-content: center;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1.2; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn .icon { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn--primary { background: var(--teal-btn); color: #fff; }
.btn--primary:hover { background: var(--teal-btn-hover); color: #fff; }
.btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.38); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; color: #fff; }
.btn--sm { min-height: 42px; padding: 0 20px; font-size: .92rem; }
.site-header .btn--sm { background: var(--teal-btn); color: #fff; }
.site-header .btn--sm:hover { background: var(--teal-btn-hover); }
.screen { position: relative; padding: calc(var(--header) + 40px) 0 56px; }
.screen--dark { background: var(--night); color: var(--on-dark-soft); }
.screen--dark h1, .screen--dark h2 { color: #fff; }
.screen--paper { background: var(--paper); }
.screen--mint { background: #E3F1EE; }
.fact-ic { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--teal-ink); }
.fact-ic .icon { width: 21px; height: 21px; }   
.eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 12px; }
.eyebrow--dark { color: var(--teal-light); }
.h2 { font-size: clamp(2rem, 3.7vw, 3.1rem); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.lead { font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--muted); max-width: 48ch; margin-top: 14px; }
.screen--dark .lead { color: var(--on-dark-soft); }
.caption { font-size: .84rem; line-height: 1.5; color: var(--muted); }
.axis { display: flex; justify-content: space-between; font-size: .76rem; font-weight: 600; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.axis--dark { color: var(--on-dark-mute); }
.switch { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.switch [role="tab"] {
  min-height: 40px; padding: 0 17px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: var(--text); font-weight: 600; font-size: .92rem; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.switch [role="tab"]:hover { color: var(--ink); background: var(--mint); }
.switch [role="tab"][aria-selected="true"] { background: var(--ink); color: #fff; }
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hero::before {   
  content: ""; position: absolute; left: 50%; bottom: -30%; width: 120%; height: 70%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(22,151,138,.16), rgba(22,151,138,0)); pointer-events: none;
}
.hero .wrap { position: relative; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 24px 64px; align-items: center; }
.hero-kicker { font-size: 1.02rem; font-weight: 700; color: var(--teal-light); margin-bottom: 14px; }
.hero h1 { font-size: clamp(2.5rem, 3.9vw, 3.5rem); line-height: 1.05; letter-spacing: -.04em; }
@media (min-width: 1024px) { .hero h1 .nb { white-space: nowrap; } }
.hero h1 em { font-style: normal; color: var(--teal-light); }
.hero-sub { margin-top: 20px; font-size: 1.12rem; line-height: 1.6; color: var(--on-dark-soft); max-width: 50ch; }
.hero-gain { padding: 4px 0 4px 36px; border-left: 1px solid rgba(255,255,255,.14); }
.gain-kz { font-size: clamp(3.4rem, 6.2vw, 5.4rem); line-height: .92; font-weight: 800; letter-spacing: -.045em; color: var(--teal-light); font-variant-numeric: tabular-nums; }
.gain-kz small { display: inline-block; margin-right: .5rem; font-size: 1.15rem; line-height: 1; font-weight: 700; letter-spacing: 0; color: var(--on-dark-soft); }
.gain-label { margin-top: 6px; font-size: 1.3rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.gain-list { display: grid; gap: 6px; margin: 16px 0 24px; }
.gain-list li { display: flex; align-items: center; gap: 9px; font-size: .98rem; font-weight: 600; color: var(--on-dark-soft); }
.gain-list .icon { width: 17px; height: 17px; stroke-width: 3; color: var(--teal-light); }
.gain-list li:has(small) { align-items: flex-start; }
.gain-list li:has(small) .icon { margin-top: 4px; }
.gain-list small { display: block; font-size: .84rem; font-weight: 500; line-height: 1.4; color: var(--on-dark-mute); }
.price-head { margin-bottom: 28px; }
.price-head .lead { max-width: 64ch; }
.price-body { display: block; }
.price-main .switch { margin-bottom: 48px; }   
.price-chart { position: relative; padding-left: 44px; }
.price-plot { position: relative; }
.price-plot svg { position: relative; }
.pump-runs { position: absolute; inset: 0; pointer-events: none; }
.pump-run { position: absolute; top: -34px; bottom: 0; background: rgba(22, 50, 58, .07); border-radius: 8px 8px 0 0; transition: left .5s var(--ease), width .5s var(--ease); }
.pump-run[hidden] { display: none; }
.pump-tag { display: block; overflow: hidden; height: 24px; padding: 0 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 700; line-height: 24px; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; }
.price-chart svg { display: block; width: 100%; height: clamp(120px, calc(100vh - 510px), 230px); overflow: visible; }
.price-chart .axis { font-size: .8rem; margin-top: 10px; }
.y-axis { position: absolute; top: 0; bottom: 0; left: -44px; width: 34px; font-size: .78rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.y-axis span { position: absolute; right: 0; transform: translateY(-50%); line-height: 1; }
.y-axis .y-unit { top: -16px; right: auto; left: 0; transform: none; white-space: nowrap; font-size: .72rem; }
.price-tip {
  position: absolute; z-index: 2; display: grid; gap: 1px; padding: 7px 11px; border-radius: 10px; white-space: nowrap;
  background: var(--ink); color: #fff; font-size: .8rem; line-height: 1.25; font-variant-numeric: tabular-nums; text-align: center;
  transform: translate(-50%, -100%); opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.price-tip.is-on { opacity: 1; }
.price-tip.is-left { transform: translate(calc(-100% + 14px), -100%); text-align: right; }
.price-tip.is-right { transform: translate(-14px, -100%); text-align: left; }
.price-tip b { font-weight: 800; }
.price-tip span { color: rgba(255,255,255,.72); }
.price-day { margin-top: 14px; padding-left: 44px; min-height: 2.9em; font-size: 1.06rem; line-height: 1.45; }
.price-day .day-name { margin-right: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); }
.price-day .day-text { font-weight: 700; color: var(--ink); }
.tank-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 24px 48px; align-items: center; }
.tank-text .h2 { font-size: clamp(1.9rem, 2.9vw, 2.6rem); }   
.compare { display: grid; gap: 10px; margin-top: 26px; max-width: 520px; }
.compare div { padding: 13px 18px 14px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.compare dt { font-weight: 800; color: var(--ink); font-size: .98rem; }
.compare dd { font-size: .96rem; line-height: 1.5; color: var(--text); margin-top: 2px; }
.compare-mit { box-shadow: inset 0 0 0 2px var(--teal) !important; }
.compare-mit dt { color: var(--teal-ink); }
.tank-figure { padding: 16px 18px 14px; border-radius: 26px; background: var(--white); box-shadow: 0 1px 0 rgba(22,50,58,.04), 0 24px 60px -34px rgba(22,50,58,.35); }
.tank-figure svg { width: 100%; height: auto; max-height: calc(100vh - var(--header) - 400px); min-height: 220px; overflow: visible; }
.tank-figure .caption { text-align: center; margin-top: 6px; }
.tank-day { display: flex; align-items: flex-start; gap: 14px; max-width: 560px; margin: 14px auto 0; }
.tank-clock { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 26px; font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tank-clock .icon { width: 18px; height: 18px; color: var(--teal-ink); }
.tank-clock b { min-width: 2.7em; text-align: right; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.tank-track { flex: 1; min-width: 0; }
.tank-bar { position: relative; height: 26px; border-radius: 8px; background: #E1EAE8; cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.tank-bar i { font-style: normal; }
.tank-price { position: absolute; inset: 0; border-radius: 8px; opacity: .5; }
.tank-run { position: absolute; top: 3px; bottom: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6px; background: var(--teal); box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.tank-run span { font-size: .72rem; font-weight: 800; color: #fff; white-space: nowrap; }
.tank-past { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px 0 0 8px; background: rgba(22,50,58,.12); }
.tank-cursor { position: absolute; top: -10px; width: 0; height: 0; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--ink); }
.tank-day .axis { margin-top: 4px; font-size: .72rem; }
.insight {
  display: flex; align-items: center; gap: 20px; margin-top: 26px; padding: 18px 26px; border-radius: 20px;
  background: linear-gradient(90deg, var(--night), #133A40); color: var(--on-dark-soft);
}
.insight-ic { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(127,216,205,.14); color: var(--teal-light); }
.insight-ic .icon { width: 24px; height: 24px; }
.insight-title { color: #fff; font-weight: 800; font-size: 1.14rem; line-height: 1.35; }
.insight-sub { font-size: .95rem; line-height: 1.5; margin-top: 3px; }
.save-extra { display: grid; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.save-co2 { display: flex; align-items: center; gap: 12px; font-size: .94rem; line-height: 1.45; color: var(--text); }
.save-co2 b { color: var(--ink); }
.sim-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: end; margin-bottom: 22px; }
.sim-head .lead { max-width: none; }
.sim-controls { display: grid; gap: 10px; justify-items: end; }
.sim-controls[hidden], .sim[hidden], .notes[hidden] { display: none; }
.sim-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 18px; padding-left: 44px; }
.sim-block .sim { margin-top: 18px; }
.sim-bar .sim-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sim-bar .sim-controls[hidden] { display: none; }
.price-main .sim-bar .switch { margin-bottom: 0; }   
.sim-open .icon { transition: transform .25s var(--ease); }
#vergleich.is-open .sim-open { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
#vergleich.is-open .sim-open .icon { transform: rotate(45deg); }
.sim-play-row { display: flex; gap: 10px; }
.play {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px 0 14px;
  border-radius: 999px; border: 0; cursor: pointer; background: var(--ink); color: #fff; font-weight: 700; font-size: .95rem;
  transition: background-color .2s ease;
}
.play:hover { background: #0F262C; }
.play .icon { width: 22px; height: 22px; }
.play span { min-width: 5.2em; text-align: left; }
.sim-clock {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px 0 14px;
  border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink);
}
.sim-clock .icon { width: 21px; height: 21px; color: var(--teal-ink); }
.sim-clock span { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2.9em; text-align: right; }
.sim-clock small { font-size: .88rem; font-weight: 700; color: var(--muted); }
.sim { background: var(--white); border-radius: 24px; box-shadow: 0 1px 0 rgba(22,50,58,.04), 0 24px 60px -30px rgba(22,50,58,.35), inset 0 0 0 1px rgba(22,50,58,.06); padding: 14px 28px 18px; }
.sim-row { display: grid; grid-template-columns: 208px minmax(0, 1fr) 64px 150px; column-gap: 26px; align-items: center; padding: 12px 0; }
.sim-row + .sim-row { border-top: 1px solid var(--line); }
.sim-row--price { padding-top: 26px; }
.sim-label b { display: block; color: var(--ink); font-size: 1rem; line-height: 1.25; }
.sim-label span { display: block; font-size: .84rem; color: var(--muted); line-height: 1.35; margin-top: 3px; }
.sim-row--mit .sim-label b { color: var(--teal-ink); }
.tank-cell--head, .cost-cell--head { align-self: end; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.2; }
.tank-cell--head { text-align: center; hyphens: manual; }
.cost-cell--head { text-align: right; }
.track { position: relative; }
.track svg { width: 100%; height: auto; overflow: visible; }
.track.is-scrubbable { cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.cursor-time, .hover-time {
  position: absolute; top: -24px; left: 0; padding: 3px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cursor-time { z-index: 1; background: var(--ink); color: #fff; cursor: grab; transition: opacity .2s ease; }
.cursor-time:focus-visible { outline-offset: 2px; border-radius: 999px; }
.hover-time { z-index: 2; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px #B9CBC9; pointer-events: none; opacity: 0; transition: opacity .15s ease; }
.hover-time.is-on { opacity: 1; }
#vergleich.is-scrubbing, #vergleich.is-scrubbing .track, #vergleich.is-scrubbing .cursor-time { cursor: grabbing; }
.sim-row--bisher .track-cell, .sim-row--mit .track-cell { position: relative; }
.fest-tag { position: absolute; top: 15px; z-index: 2; transform: translate(-50%, -50%); padding: 3px 11px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: .76rem; font-weight: 700; line-height: 1.3; white-space: nowrap; pointer-events: none;
  box-shadow: 0 0 0 2px #fff; font-variant-numeric: tabular-nums; }
.run-info { position: absolute; top: 15px; z-index: 3; transform: translate(-50%, -50%); }
.run-info[hidden] { display: none; }
.run-info .info-btn { width: 26px; height: 26px; margin: 0; background: var(--white); color: var(--ink); box-shadow: 0 1px 4px rgba(12,31,35,.3); }
.run-info .info-btn .icon { width: 18px; height: 18px; }
.run-info .info-tip { left: -14px; width: 320px; max-width: calc(100vw - 2 * var(--gutter)); }
.run-info.is-right .info-tip { left: auto; right: -14px; }
.info-tip b { font-weight: 800; }
.tank-low { transition: stroke .3s ease, stroke-width .3s ease, opacity .3s ease; }
.tank-low.is-lit { stroke: var(--coral); stroke-width: 2.5; stroke-dasharray: none; opacity: 1; }
.tank-mini svg { width: 56px; height: auto; margin: 0 auto; }
.cost-cell { text-align: right; }
.cost-cell strong { display: block; font-size: clamp(1.55rem, 2.3vw, 2rem); line-height: 1.1; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sim-row--mit .cost-cell strong { color: var(--teal-ink); }
.tank-ok { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--teal-ink); margin-top: 4px; white-space: nowrap; }
.tank-ok .icon { width: 13px; height: 13px; stroke-width: 3; }
.sim-row--mit .axis { margin-top: 10px; }
.sim-result { display: flex; align-items: center; gap: 22px; margin-top: 6px; padding: 14px 22px; border-radius: 16px; background: var(--mint); }
.sim-result .pct { font-size: clamp(2rem, 3.2vw, 2.7rem); font-weight: 800; color: var(--teal-ink); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-result p { color: var(--ink); font-weight: 700; line-height: 1.45; }
.sim-result p span { display: block; font-weight: 500; color: var(--text); font-size: .92rem; }
html:not(.js) .sim { display: none; }
.notes { margin-top: 12px; font-size: .84rem; color: var(--muted); }
.notes summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; color: var(--teal-ink); list-style: none; }
.notes summary::-webkit-details-marker { display: none; }
.notes summary::after { content: "+"; font-weight: 800; }
.notes[open] summary::after { content: "–"; }
.notes p { margin-top: 8px; max-width: 110ch; line-height: 1.55; }
.savings-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px 72px; align-items: center; }
.town-pick { display: grid; gap: 8px; margin: 28px 0 22px; max-width: 340px; }
.town-pick [role="tab"] {
  display: flex; align-items: baseline; gap: 8px; min-height: 54px; padding: 0 20px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: 1rem; text-align: left;
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.town-pick [role="tab"] { align-items: center; }
.town-pick b { font-size: 1.2rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.town-pick [role="tab"]:hover { box-shadow: inset 0 0 0 1.5px var(--teal); }
.town-pick [role="tab"][aria-selected="true"] { background: var(--ink); color: rgba(255,255,255,.8); box-shadow: none; }
.town-pick [role="tab"][aria-selected="true"] b { color: #fff; }
.savings-card { background: var(--paper); border-radius: 26px; padding: 32px 36px 28px; }
.save-big { display: grid; gap: 6px; padding-bottom: 24px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.kz-label, .bars-title { font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.save-big .kz { font-size: clamp(3rem, 5.4vw, 4.6rem); line-height: 1; font-weight: 800; letter-spacing: -.035em; color: var(--teal-ink); font-variant-numeric: tabular-nums; }
.approx { font-weight: 600; opacity: .7; margin-right: .04em; }
.kz-sub { position: relative; font-size: 1.05rem; color: var(--text); }
.kz-sub b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bars-title { margin-bottom: 12px; }
.bars { display: grid; gap: 12px; margin-bottom: 20px; }
.bar-row { display: grid; grid-template-columns: 172px minmax(0, 1fr) 104px; gap: 16px; align-items: center; }
.bar-label { font-size: .9rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.bar-label small { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.bars i { font-style: normal; }
.bar { position: relative; height: 16px; border-radius: 8px; background: #E1E9E8; overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 8px; transition: width 1s var(--ease); }
.bar-fill--today { background: #8FA3A7; }
.bar-fill--mit { background: var(--teal); transition-delay: .15s; }
.bar-save {
  position: absolute; top: 0; bottom: 0; left: var(--mit, 54%); right: 0; opacity: 0;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(-45deg, rgba(22,151,138,.2) 0 6px, rgba(22,151,138,.06) 6px 12px);
  transition: opacity .6s ease .9s, left 1s var(--ease) .15s;
}
.bar-save span { font-size: .7rem; font-weight: 800; line-height: 1; color: var(--teal-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.is-drawn .bar-fill--today { width: 100%; }
.is-drawn .bar-fill--mit { width: var(--mit, 54%); }
.is-drawn .bar-save { opacity: 1; }
.bar-val { font-size: 1rem; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.bar-val--mit { color: var(--teal-ink); }
.town-assume { font-size: .88rem; line-height: 1.5; color: var(--text); }
.savings-note { margin-top: 6px; font-size: .84rem; color: var(--muted); }
.info-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin: -6px 0 -6px 2px; padding: 0; vertical-align: middle;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: help; transition: color .2s ease, background-color .2s ease;
}
.info-btn .icon { width: 19px; height: 19px; }
.info:hover .info-btn, .info.is-open .info-btn { color: var(--teal-ink); background: var(--mint); }
.info-tip {
  position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 5; width: min(360px, 100%); max-width: calc(100vw - 2 * var(--gutter));
  padding: 13px 16px; border-radius: 12px; background: var(--ink); color: #fff;
  font-size: .86rem; line-height: 1.5; font-weight: 500; box-shadow: 0 14px 32px -14px rgba(12,31,35,.5);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.info-tip::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.info:hover .info-tip, .info.is-open .info-tip, .info-btn:focus-visible + .info-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.info.is-closed .info-tip { opacity: 0; visibility: hidden; }
.control-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 32px 64px; align-items: center; }
.control-text .switch { margin-top: 26px; }
.mode-text { margin-top: 14px; min-height: 3.2em; font-size: 1rem; line-height: 1.55; color: var(--text); max-width: 46ch; }
.promises { display: grid; gap: 12px; margin: 18px 0 22px; max-width: 520px; }
.promises li { display: flex; align-items: flex-start; gap: 12px; font-size: .98rem; line-height: 1.5; color: var(--text); }
.promises b { color: var(--ink); }
.promises .icon { color: var(--teal-ink); margin-top: 2px; }
.plan-card { background: var(--white); border-radius: 24px; padding: 22px 26px 18px; box-shadow: 0 1px 0 rgba(22,50,58,.04), 0 30px 70px -34px rgba(22,50,58,.4); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.plan-title b { display: block; font-size: 1.1rem; color: var(--ink); }
.plan-title span { font-size: .85rem; color: var(--muted); }
.plan-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; background: var(--mint); color: var(--teal-ink); transition: background-color .3s ease, color .3s ease; }
.plan-badge i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.plan-card[data-mode="freigabe"] .plan-badge { background: #FFF3D6; color: #7A5C14; }
.plan-card[data-mode="empfehlung"] .plan-badge { background: #EEF1F1; color: var(--muted); }
.plan-card.is-approved .plan-badge { background: var(--mint); color: var(--teal-ink); }
.plan-rows { display: grid; gap: 6px; }
.plan-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; }
.plan-label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.plan-track svg { width: 100%; height: auto; overflow: visible; }
.plan-track--reserve { height: 30px; border-radius: 8px; border: 1.5px dashed #CFDBDA; display: flex; align-items: center; padding-left: 12px; }
.plan-track--reserve em { font-style: normal; font-size: .78rem; color: var(--muted); }
.plan-card .axis { margin-top: 0; }
.plan-block { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; transition: transform .7s var(--ease), fill .3s ease, stroke .3s ease; }
.plan-card.is-drawn .plan-block { transform: scaleX(1); }
.plan-bar { opacity: 0; transition: opacity .5s ease; }
.plan-card.is-drawn .plan-bar { opacity: 1; }
.plan-level-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1.6s var(--ease) .3s; }
.plan-card.is-drawn .plan-level-line { stroke-dashoffset: 0; }
.plan-card[data-mode="empfehlung"] .plan-block { fill: transparent; stroke: var(--teal); stroke-width: 1.5; stroke-dasharray: 4 3; }
.plan-card[data-mode="empfehlung"] .plan-block-label { fill: var(--teal-ink); }
.plan-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-ink); font-weight: 700; }
.plan-ok .icon { width: 15px; height: 15px; stroke-width: 3; }
.plan-approve { margin-left: auto; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; background: var(--ink); color: #fff; font-weight: 700; font-size: .85rem; }
.plan-approve[hidden] { display: none; }
.plan-approve[disabled] { background: var(--mint); color: var(--teal-ink); cursor: default; }
.flow-head { margin-bottom: 30px; }
.flow { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.flow-step { position: relative; display: flex; }
.flow-step + .flow-step::before {
  content: ""; position: absolute; z-index: 1; left: -29px; top: 25px; width: 34px; height: 34px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7268' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 17px no-repeat;
  box-shadow: 0 0 0 5px #E3F1EE;
}
.flow-phase { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; font-size: .95rem; font-weight: 700; color: var(--teal-ink); }
.flow-num { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--teal-btn); font-size: 1rem; font-weight: 800; color: #fff; }
.flow-card { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 20px; border-radius: 22px; background: var(--white); box-shadow: 0 1px 0 rgba(22,50,58,.04), 0 24px 56px -34px rgba(22,50,58,.38); }
.flow-card h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.01em; }
.flow-card p { font-size: .97rem; line-height: 1.55; color: var(--text); }
.flow-meta { display: grid; gap: 4px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.flow-meta div { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; }
.flow-meta dt { color: var(--muted); }
.flow-meta dd { font-weight: 800; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.flow-card .flow-note { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--sun); font-size: .86rem; font-weight: 700; color: var(--ink); }
.flow-note .icon { width: 15px; height: 15px; stroke-width: 3; color: var(--teal-ink); }
.flow-modes { display: grid; gap: 6px; }
.flow-modes li { display: grid; font-size: .92rem; line-height: 1.4; color: var(--text); padding-left: 14px; border-left: 2.5px solid var(--teal); }
.flow-modes b { color: var(--ink); font-size: .95rem; }
.flow-tariff { display: grid; gap: 6px; margin: 2px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--paper); }
.flow-tariff-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: end; gap: 10px; }
.flow-tariff-row span { font-size: .76rem; font-weight: 700; line-height: 1.2; color: var(--muted); padding-bottom: 2px; }
.flow-tariff-row svg { display: block; width: 100%; height: 44px; overflow: visible; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 32px 72px; align-items: start; }
.faq-head { position: sticky; top: calc(var(--header) + 32px); }
.faq-head .lead a { font-weight: 700; white-space: nowrap; }
.mail-copy { position: relative; white-space: nowrap; }
.copy-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -6px 0 -6px 6px; padding: 0; vertical-align: middle;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: color .2s ease, background-color .2s ease;
}
.copy-btn .icon { width: 18px; height: 18px; }
.copy-btn:hover, .copy-btn.is-copied { color: var(--teal-ink); background: var(--mint); }
.copy-tip {
  position: absolute; right: 0; bottom: calc(100% + 8px); padding: 5px 10px; border-radius: 8px; background: var(--ink); color: #fff;
  font-size: .78rem; font-weight: 700; line-height: 1.3; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease;
}
.copy-tip.is-on { opacity: 1; transform: none; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 4px 15px 0;
  font-size: 1.04rem; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; line-height: 1.4;
  transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--teal-ink); }
.faq-item summary .icon { width: 22px; height: 22px; color: var(--teal-ink); transition: transform .3s var(--ease); }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-a { padding: 0 44px 18px 0; }
.faq-a p { font-size: 1rem; line-height: 1.6; color: var(--text); max-width: 62ch; }
.faq-a p + p { margin-top: .7em; }
.contact { min-height: 100vh; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.contact-text .lead { max-width: 40ch; }
.contact-data { display: grid; gap: 14px; margin-top: 30px; }
.contact-data li { display: flex; align-items: center; gap: 12px; font-size: 1.02rem; color: var(--on-dark-soft); }
.contact-data .icon { width: 20px; height: 20px; color: var(--teal-light); }
.contact-data a { color: #fff; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.contact-data .copy-btn { color: var(--on-dark-mute); }
.contact-data .copy-btn .icon { color: inherit; width: 18px; height: 18px; }
.contact-data .copy-btn:hover, .contact-data .copy-btn.is-copied { color: var(--teal-ink); background: var(--mint); }
.contact-data .copy-tip { background: #fff; color: var(--ink); }
.contact-data a:hover { text-decoration: underline; }
.cal-box { border-radius: 24px; background: var(--white); color: var(--text); box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); overflow: hidden; }
.cal-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 40px 40px 34px; min-height: 380px; justify-content: center; }
.cal-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--mint); color: var(--teal-ink); }
.cal-ic .icon { width: 26px; height: 26px; }
.cal-intro h3 { font-size: 1.5rem; letter-spacing: -.01em; }
.cal-intro p { font-size: 1.02rem; line-height: 1.55; max-width: 42ch; }
.cal-intro .btn { margin-top: 8px; }
.cal-intro .cal-note { margin-top: 6px; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.cal-inline { display: none; }
.cal-box.is-loaded .cal-intro { display: none; }
.cal-box.is-loaded .cal-inline { display: block; width: 100%; min-height: 560px; }
.cal-box.is-loaded { grid-column: 1 / -1; }
.person { padding: 28px 30px; border-radius: 24px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.person-top { display: flex; align-items: center; gap: 18px; }
.portrait { width: 76px; height: 76px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2FB3A5, #0F6B63 70%); display: grid; place-items: center; }
.portrait span { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: .02em; }
.portrait-img { width: 76px; height: 76px; flex: none; border-radius: 50%; object-fit: cover; }
.person-name { display: block; font-size: 1.24rem; color: #fff; }
.person-role { display: block; font-size: .9rem; color: var(--teal-light); font-weight: 600; margin-top: 2px; }
.person-line { margin: 16px 0 18px; font-size: .94rem; line-height: 1.55; color: var(--on-dark-soft); }
.person-contact { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.person-contact li { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--on-dark-soft); }
.person-contact .icon { width: 18px; height: 18px; color: var(--teal-light); }
.person-contact a { color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.person-contact a:hover { text-decoration: underline; }
.trust { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.trust p { font-size: .92rem; font-weight: 600; color: #fff; }
.trust small { display: block; margin: 14px 0 10px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-mute); }
.site-footer { background: #081518; color: var(--on-dark-mute); padding: 26px 0; font-size: .88rem; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.site-footer .brand-word { font-size: .82rem; color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.footer-nav { display: flex; gap: 24px; }
.footer-nav a { color: #fff; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.legal { padding: calc(var(--header) + 56px) 0 96px; }
.legal .wrap { max-width: calc(760px + 2 * var(--gutter)); }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.03em; margin-bottom: 32px; }
.legal h2 { font-size: 1.3rem; margin: 40px 0 12px; }
.legal h3 { font-size: 1.05rem; margin: 24px 0 8px; }
.legal p, .legal address { margin: 0 0 1em; font-style: normal; }
.legal ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; }
.legal li { margin-bottom: .4em; }
.back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; font-weight: 700; text-decoration: none; }
.back .icon { width: 18px; height: 18px; transform: rotate(180deg); }
.todo { background: #FFF3D6; border-radius: 16px; padding: 16px 20px; font-size: .94rem; color: #6B5215; margin-bottom: 32px; }
.todo b { color: #6B5215; }
mark { background: #FFF3D6; color: #6B5215; padding: 0 4px; border-radius: 4px; }
.has-products { --header: 108px; }
.site-header .wrap.header-grid {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 64px minmax(0, 1fr);
  gap: 0 28px; align-items: center; justify-content: stretch;
}
.header-grid .brand { grid-area: 1 / 1; }
.header-grid .products { grid-area: 1 / 2; justify-self: start; }
.header-grid .header-cta { grid-area: 1 / 3; }
.header-grid .nav-toggle { grid-area: 1 / 3; justify-self: end; }
.header-grid .nav { grid-area: 2 / 1 / 3 / 4; height: 100%; justify-content: flex-start; border-top: 1px solid rgba(22,50,58,.08); }
.site-header[data-theme="dark"] .header-grid .nav { border-top-color: rgba(255,255,255,.1); }
.header-grid .nav a:not(.btn) { font-size: .9rem; }
.header-grid .nav .nav-cta { display: none; }
.products { display: flex; gap: 8px; }
.products a {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 20px; border-radius: 999px;
  font-weight: 800; font-size: 1rem; text-decoration: none; white-space: nowrap; color: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(22,50,58,.22); transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.products a .icon { width: 19px; height: 19px; }
.products a:hover { box-shadow: inset 0 0 0 1.5px var(--teal); background: rgba(22,151,138,.08); }
.site-header[data-theme="dark"] .products a { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.38); }
.site-header[data-theme="dark"] .products a:hover { box-shadow: inset 0 0 0 1.5px var(--teal-light); background: rgba(127,216,205,.1); }
.products a[aria-current="page"],
.site-header[data-theme="dark"] .products a[aria-current="page"] { background: var(--teal-btn); color: #fff; box-shadow: 0 8px 20px -10px rgba(22,151,138,.9); }
@media (max-width: 1023px) {
  .header-grid .nav { gap: 20px; }
  .header-grid .nav a:not(.btn) { font-size: .86rem; }
}
@media (max-width: 767px) {
  .has-products { --header: 108px; }
  .site-header .wrap.header-grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 56px minmax(0, 1fr); gap: 0 12px; }
  .header-grid .products { grid-area: 2 / 1 / 3 / 3; justify-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 8px; }
  .products a { justify-content: center; min-height: 42px; padding: 0 10px; font-size: .92rem; gap: 7px; }
  .products a .icon { width: 17px; height: 17px; }
  .header-grid .header-cta { display: none; }
  .header-grid .nav-toggle { grid-area: 1 / 2; width: 40px; height: 40px; }
  .header-grid .nav { border-top: 0; height: auto; }
  .header-grid .nav.is-open .nav-cta { display: inline-flex; }
}
.fb-lead-wide { max-width: 62ch; }
.fb-bridge { margin-top: 26px; font-size: 1.12rem; line-height: 1.55; color: var(--text); max-width: 70ch; }
.fb-bridge b { color: var(--teal-ink); }
.fb-bridge--small { margin-top: 18px; font-size: 1rem; font-weight: 600; color: var(--ink); max-width: 520px; }
.fb-chip { align-self: flex-start; display: inline-block; margin-bottom: 2px; padding: 2px 9px; border-radius: 999px; background: var(--white); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink); box-shadow: inset 0 0 0 1px #BFE6E0; }
.price-source { margin-top: 4px; padding-left: 44px; font-size: .78rem; }
.fb-plan .plan-track svg { display: block; }
.fb-plan .plan-label { line-height: 1.25; }
.fb-key { display: inline-block; width: 22px; height: 0; margin-right: 8px; vertical-align: middle; border-top: 2.5px solid #E0664F; }
.fb-key--dash { border-top: 2px dashed #8FA3A7; }
.fb-key--bhkw, .fb-key--wp { width: 14px; height: 10px; border-top: 0; border-radius: 3px; background: #E0664F; }
.fb-key--wp { background: var(--teal); }
.fb-price-close { margin-top: 16px; padding-left: 44px; font-size: 1.06rem; font-weight: 700; color: var(--ink); }
.fb-concept { padding: 88px 0; }
@media (min-width: 1024px) and (min-height: 600px) { .screen.fb-concept { min-height: 0; } }
.fb-concept-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr); gap: 16px 20px; align-items: stretch; }
.fb-concept-pair { display: grid; gap: 14px; }
.fb-concept-card {
  display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 20px 24px; border-radius: 20px;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  color: var(--on-dark-soft); text-decoration: none; font-size: .95rem; line-height: 1.45;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s var(--ease);
}
.fb-concept-card:hover { background: rgba(255,255,255,.09); transform: translateY(-2px); }
.fb-concept-card--base { background: rgba(127,216,205,.1); box-shadow: inset 0 0 0 1.5px rgba(127,216,205,.4); }
.fb-concept-card b { color: #fff; font-size: 1.16rem; line-height: 1.3; }
.fb-concept-kicker { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-light); }
.fb-concept-ic { width: 40px; height: 40px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; background: rgba(127,216,205,.14); color: var(--teal-light); }
.fb-concept-ic .icon { width: 20px; height: 20px; }
.fb-concept-arrow { align-self: center; color: var(--teal-light); }
.fb-concept-arrow .icon { width: 26px; height: 26px; }
.fb-goal { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 14px 20px; border-radius: 16px; background: rgba(127,216,205,.08); font-size: 1.05rem; line-height: 1.45; color: var(--on-dark-soft); }
.fb-goal b { color: #fff; }
.fb-goal .icon { color: var(--teal-light); stroke-width: 3; }
.promises .fb-ic-heat { color: #B0402C; }
.fb-pool { margin: 2px 0 12px; }
.fb-pool svg { display: block; width: 100%; height: auto; max-height: 132px; }
.fb-stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.fb-stage { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: var(--white); box-shadow: 0 1px 0 rgba(22,50,58,.04), 0 28px 60px -36px rgba(22,50,58,.45); }
.fb-stage-top { display: flex; align-items: center; gap: 18px; padding: 22px 26px; background: var(--night); color: var(--on-dark-soft); }
.fb-stage--invest .fb-stage-top { background: #35575F; }
.fb-stage-num { font-size: 3rem; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--teal-light); font-variant-numeric: tabular-nums; }
.fb-stage--invest .fb-stage-num { color: #fff; opacity: .9; }
.fb-stage-kicker { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-light); }
.fb-stage--invest .fb-stage-kicker { color: #CFE3E0; }
.fb-stage-top h3 { color: #fff; font-size: 1.28rem; line-height: 1.25; letter-spacing: -.01em; margin-top: 2px; }
.fb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px; flex: 1; align-content: start; }
.fb-tiles li { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px; border-radius: 18px; background: var(--paper); font-size: .9rem; line-height: 1.45; color: var(--text); }
.fb-tiles li b { color: var(--ink); font-size: 1rem; line-height: 1.3; }
.fb-tiles .fb-ic { margin-bottom: 8px; }
.fb-tiles li.fb-tile--wide { grid-column: 1 / -1; }
.fb-ic { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--teal-ink); }
.fb-ic .icon { width: 21px; height: 21px; }
.fb-ic--heat { background: #FDEEEA; color: #B0402C; }
.fb-ic--sun  { background: var(--sun); color: #6B5200; }
.fb-ic--blue { background: #E6F0FA; color: #2D6CB0; }
.fb-ic--grey { background: #E6ECEC; color: var(--muted); }
.fb-tiles .fb-ic { background-color: var(--white); }
.fb-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fb-results li { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; border-radius: 22px; background: var(--paper); font-size: .94rem; line-height: 1.5; color: var(--text); }
.fb-results li .fb-ic { margin-bottom: 8px; }
.fb-results li b { font-size: 1.08rem; color: var(--ink); line-height: 1.3; }
.flow--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.solutions { padding: 64px 0; }
@media (min-width: 1024px) and (min-height: 600px) { .screen.solutions { min-height: 0; } }
.solutions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.solutions-head { grid-column: 1 / -1; }
.solution { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px; border-radius: 22px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: var(--text); }
.solution b { font-size: 1.15rem; color: var(--ink); }
.solution p { font-size: .95rem; line-height: 1.5; }
.solution .kz-label { color: var(--teal-ink); }
.solution--here { background: transparent; }
a.solution { box-shadow: inset 0 0 0 2px var(--teal); transition: transform .2s var(--ease), box-shadow .2s ease; }
a.solution:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--teal), 0 20px 40px -28px rgba(22,50,58,.5); }
.solution-more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--teal-ink); }
.solution-more .icon { width: 18px; height: 18px; }
@media (max-width: 1023px) {
  .fb-stages { grid-template-columns: 1fr; gap: 20px; }
  .fb-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow--two { grid-template-columns: 1fr; }
  .fb-concept-grid { grid-template-columns: 1fr; }
  .fb-concept-arrow { justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 767px) {
  .fb-tiles, .fb-results, .solutions-grid { grid-template-columns: 1fr; }
  .fb-results li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px; }
  .fb-results li .fb-ic { grid-row: 1 / span 2; margin-bottom: 0; }
  .sim-open { width: 100%; white-space: normal; justify-content: flex-start; text-align: left; padding-top: 12px; padding-bottom: 12px; }
  .price-source { padding-left: 0; }
  .fb-price-close { padding-left: 0; }
  .fb-concept { padding: 64px 0; }
  .fb-stage-top { padding: 18px 20px; }
  .fb-stage-num { font-size: 2.4rem; }
  .fb-tiles { padding: 14px; gap: 10px; }
  .fb-tiles li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 14px; }
  .fb-tiles .fb-ic { grid-row: 1 / span 3; margin-bottom: 0; }
  .fb-tiles .fb-chip { justify-self: start; }
}
@media print {
  .fb-concept-card, .fb-goal { background: #fff !important; box-shadow: inset 0 0 0 1px #CFD8D7 !important; color: #333 !important; }
  .fb-concept-card b, .fb-goal b, .fb-stage-top h3 { color: #000 !important; }
  .fb-concept-kicker, .fb-concept-ic, .fb-concept-arrow, .fb-goal .icon, .fb-stage-kicker, .fb-stage-num { color: var(--teal-ink) !important; opacity: 1 !important; }
  .fb-concept-ic { background: #fff !important; box-shadow: inset 0 0 0 1px #CFD8D7; }
  .fb-stage-top { background: #fff !important; color: #333 !important; border-bottom: 1px solid #CFD8D7; }
  .fb-stage, .fb-concept-grid, .fb-results li, .fb-tiles li, .plan-card, .fb-goal { break-inside: avoid; }
}
.page-start { --header: 72px; }
.page-start .site-header .wrap.header-grid { grid-template-rows: 72px; }
.page-start .header-grid .products { justify-self: center; }
.lp-ic { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.lp-ic .icon { width: 22px; height: 22px; }
.lp-ic--water { background: #E6F0FA; color: #2D6CB0; }
.lp-ic--heat  { background: #FDEEEA; color: #B0402C; }
.lp-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.lp-checks li { display: inline-flex; align-items: center; gap: 7px; font-size: .94rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.lp-checks .icon { width: 16px; height: 16px; stroke-width: 3; color: var(--teal); }
.lp-sub { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: var(--teal-ink); }
.lp-sub .icon { width: 22px; height: 22px; stroke-width: 2.4; transform: rotate(90deg); }
.lp-pulse { transform-box: fill-box; transform-origin: center; animation: lp-pulse 2.8s ease-out infinite; }
@keyframes lp-pulse { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(4); opacity: 0; } }
.lp-flow { animation: lp-flow 1.4s linear infinite; }
@keyframes lp-flow { to { stroke-dashoffset: -30; } }
@media (prefers-reduced-motion: reduce) { .lp-pulse { display: none; } }
.lp2 { padding-bottom: 32px; }
.lp2-head { max-width: 980px; margin: 0 auto 26px; text-align: center; }
.lp2-head h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.lp2-head h1 em { font-style: normal; color: var(--teal-ink); }
.lp2-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lp2-door { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; background: var(--white); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.lp2-door:hover { transform: translateY(-8px); border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal), 0 36px 70px -26px rgba(22,50,58,.5); }
.lp2-pic svg { transition: transform .6s var(--ease); }
.lp2-door:hover .lp2-pic svg { transform: scale(1.035); }
.lp2-door:has(.lp2-go:focus-visible) { outline: 3px solid var(--teal); outline-offset: 4px; }
.lp2-go:focus-visible { outline: none; }
.lp2-pic { aspect-ratio: 650 / 280; background: #E8F3F0; }
.lp2-door--bath .lp2-pic { background: #FFF3E9; }
.lp2-pic svg { display: block; width: 100%; height: 100%; }
.lp2-pic .lp-m, .lp2-pic .lp-s { display: none; }
.lp2-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 18px 28px 20px; }
.lp1-top { display: flex; align-items: center; gap: 14px; }
.lp2-top .lp-ic { width: 52px; height: 52px; }
.lp2-top .lp-ic .icon { width: 26px; height: 26px; }
.lp2-title { flex: 1; font-size: clamp(1.45rem, 2.2vw, 1.95rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--ink); }
.lp1-stat { text-align: right; line-height: 1.1; }
.lp1-stat b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em; color: var(--teal-ink); white-space: nowrap; }
.lp1-stat span { font-size: .84rem; font-weight: 700; color: var(--muted); }
.lp1-stat--doc { display: flex; align-items: center; gap: 10px; text-align: left; }
.lp1-stat--doc .icon { width: 30px; height: 30px; stroke-width: 1.8; color: var(--teal-ink); }
.lp1-stat--doc span { font-size: .84rem; line-height: 1.3; }
.lp1-stat--doc span b { margin-bottom: 2px; font-size: .98rem; letter-spacing: -.01em; color: var(--ink); }   
.lp1-promise { font-size: clamp(1.12rem, 1.55vw, 1.35rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--teal-ink); text-wrap: balance; }
.lp1-how { margin-top: -4px; font-size: .98rem; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.lp2-go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   
.lp2-door { --go-h: 64px; --go-fs: 1.06rem; --go-dot: 42px; }
.lp2-go { display: grid; text-decoration: none; }
.lp2-go-row {
  grid-area: 1 / 1; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--go-h); padding: 8px 18px 8px 28px; background: #E3F1EE;
  font-size: var(--go-fs); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--teal-ink);
}
.lp2-go-arrow { display: grid; place-items: center; width: var(--go-dot); height: var(--go-dot); flex: none; border-radius: 50%; background: var(--teal-btn); color: #fff; transition: transform .3s var(--ease); }
.lp2-go-arrow .icon { width: 20px; height: 20px; stroke-width: 2.4; }
.lp2-go-fill { background: var(--teal-btn); color: #fff; clip-path: inset(0 100% 0 0); transition: clip-path 2.4s cubic-bezier(.65, 0, .35, 1); }
.lp2-go-fill .lp2-go-arrow { background: #fff; color: var(--teal-ink); }
.lp2-door:hover .lp2-go-fill, .lp2-go:focus-visible .lp2-go-fill { clip-path: inset(0 0 0 0); }
.lp2-door:hover .lp2-go-arrow { transform: translateX(4px); }
@media (min-width: 1024px) and (max-height: 820px) {
  .lp-sub { margin-top: 6px; font-size: 1.2rem; }
  .lp2-head { margin-bottom: 10px; }
  .lp2-body { gap: 8px; padding: 12px 26px 12px; }
  .lp2-pic { aspect-ratio: 730 / 280; }
  .lp2-pic .lp-d { display: none; }
  .lp2-pic .lp-s { display: block; }
  .lp2 { padding-top: calc(var(--header) + 16px); }
  .lp2-head h1 { font-size: clamp(1.9rem, 2.4vw, 2.3rem); }
  .lp2-top .lp-ic { width: 44px; height: 44px; }
  .lp2-top .lp-ic .icon { width: 22px; height: 22px; }
  .lp1-how { font-size: .93rem; line-height: 1.4; }
  .lp2-door { --go-h: 48px; --go-dot: 36px; }
  .lp2-go-row { padding: 6px 12px 6px 26px; }
}
@media (max-width: 1023px) {
  .lp1-top { flex-wrap: wrap; row-gap: 10px; }
  .lp1-stat { flex-basis: 100%; display: flex; align-items: baseline; gap: 10px; text-align: left; }
  .lp1-stat--doc { align-items: center; }
  .lp1-stat--doc .icon { width: 26px; height: 26px; }
}
@media (max-width: 767px) {
  .page-start { --header: 108px; }
  .page-start .site-header .wrap.header-grid { grid-template-rows: 56px minmax(0, 1fr); }
  .page-start .header-grid .header-cta { display: inline-flex; grid-area: 1 / 2; min-height: 38px; padding: 0 14px; font-size: .86rem; }   
  .lp2-doors { grid-template-columns: 1fr; gap: 16px; }
  .lp2-pic { aspect-ratio: 480 / 280; }   
  .lp2-pic .lp-d { display: none; }
  .lp2-pic .lp-m { display: block; }
  .lp2-body { padding: 16px 18px 16px; }
  .lp2-door { --go-h: 56px; --go-fs: 1rem; --go-dot: 38px; }
  .lp2-go-row { padding: 8px 12px 8px 18px; }
}
@media print {
  .lp2-door { break-inside: avoid; }
  .lp-sub .icon, .lp2-go-arrow, .lp2-go-fill { display: none !important; }
  .lp2-go, .lp2-go-row { min-height: 0; }
  .lp2-go-row { background: none; }
}
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-2 { transition-delay: .08s; }
.js .reveal-3 { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media (min-width: 1024px) and (min-height: 600px) {
  .screen { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
  .screen > .wrap { width: 100%; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .screen { padding-top: calc(var(--header) + 24px); padding-bottom: 28px; }
  .h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
  .lead { margin-top: 10px; }
  .eyebrow { margin-bottom: 8px; }
  .hero-sub { margin-top: 14px; }
  .gain-list { margin: 12px 0 18px; }
  .price-head { margin-bottom: 22px; }
  .tank-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tank-figure svg { max-height: calc(100vh - var(--header) - 330px); }
  .tank-text .h2 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
  .compare { margin-top: 18px; }
  .compare dd { font-size: .92rem; }
  .insight { margin-top: 18px; padding: 14px 22px; }
  .sim-head { margin-bottom: 16px; }
  .sim { padding: 8px 24px 14px; }
  .sim-row { padding: 7px 0; }
  .sim-row--price { padding-top: 24px; }
  .save-big .kz { font-size: clamp(2.6rem, 4.4vw, 3.6rem); }
  .savings-card { padding: 26px 30px 22px; }
  .flow-head { margin-bottom: 20px; }
  .flow-card { padding: 20px 22px 16px; gap: 10px; }
  .flow-step + .flow-step::before { top: 21px; }
  .plan-card { padding: 18px 22px 14px; }
  .faq-item summary { padding: 12px 4px 12px 0; }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .screen { padding-top: calc(var(--header) + 18px); padding-bottom: 20px; }
  .h2 { font-size: clamp(1.8rem, 2.8vw, 2.25rem); }
  .lead { font-size: 1.04rem; }
  .eyebrow { margin-bottom: 6px; }
  .hero h1 { font-size: clamp(2.3rem, 3.9vw, 3.4rem); }
  .hero-kicker { margin-bottom: 8px; }
  .hero-sub { font-size: 1.04rem; margin-top: 10px; }
  .gain-kz { font-size: clamp(3rem, 5vw, 4.2rem); }
  .gain-label { font-size: 1.15rem; }
  .gain-list { margin: 10px 0 14px; gap: 4px; }
  .gain-list li { font-size: .92rem; }
  .hero-gain .btn { min-height: 46px; }
  .price-head { margin-bottom: 16px; }
  .price-main .switch { margin-bottom: 42px; }
  .price-day { margin-top: 8px; }
  .tank-text .h2 { font-size: clamp(1.8rem, 2.6vw, 2.1rem); }
  .compare { margin-top: 12px; gap: 8px; }
  .compare div { padding: 8px 16px 9px; }
  .compare dd { font-size: .9rem; line-height: 1.45; }
  .tank-screen .lead { font-size: 1rem; }
  .tank-figure { padding: 10px 14px 8px; }
  .tank-figure svg { min-height: 190px; }
  .tank-figure .caption { font-size: .78rem; margin-top: 4px; }
  .insight { margin-top: 12px; padding: 10px 20px; }
  .insight-ic { width: 40px; height: 40px; }
  .insight-title { font-size: 1.04rem; }
  .insight-sub { font-size: .88rem; }
  .sim-head { margin-bottom: 12px; }
  .sim-controls { gap: 8px; }
  .play, .sim-clock { min-height: 40px; }
  .switch [role="tab"] { min-height: 36px; }
  .sim-row { padding: 5px 0; }
  .sim-row--price { padding-top: 22px; }
  .tank-mini svg { width: 46px; }
  .cost-cell strong { font-size: 1.5rem; }
  .sim-result { padding: 8px 18px; }
  .sim-result .pct { font-size: 2rem; }
  .notes { margin-top: 8px; }
  .save-big { padding-bottom: 16px; margin-bottom: 16px; }
  .town-pick { grid-template-columns: repeat(3, auto); justify-content: start; max-width: none; margin: 18px 0 14px; }
  .town-pick [role="tab"] { min-height: 46px; padding: 0 16px; }
  .save-extra { gap: 8px; margin-top: 14px; padding-top: 14px; }
  .save-co2 { font-size: .9rem; }
  .save-co2 .fact-ic { width: 36px; height: 36px; }
  .flow-head { margin-bottom: 14px; }
  .flow-num { width: 32px; height: 32px; }
  .flow-step + .flow-step::before { top: 15px; }
  .flow-card { padding: 16px 20px 14px; gap: 8px; }
  .flow-card h3 { font-size: 1.08rem; }
  .flow-card p, .flow-modes li { font-size: .9rem; line-height: 1.45; }
  .flow-meta div { font-size: .85rem; }
  .flow-tariff { padding: 7px 12px; gap: 4px; }
  .flow-tariff-row svg { height: 34px; }
  .person { padding: 22px 26px; }
  .contact-data { margin-top: 20px; gap: 10px; }
  .cal-intro { padding: 30px 32px 26px; min-height: 0; }
}
@media (max-width: 1023px) {
  :root { --gutter: 24px; }
  .hero-top, .price-head, .price-body, .tank-grid, .sim-head, .savings-grid, .control-grid, .contact-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .screen { padding: 72px 0; scroll-margin-top: var(--header); }
  main > .screen:first-child { padding-top: calc(var(--header) + 40px); }
  .tank-figure svg { max-height: none; }
  .sim-controls { justify-items: start; }
  .faq-head { position: static; }
  .hero-gain { padding-left: 0; border-left: 0; }
  .flow { grid-template-columns: 1fr; gap: 20px; }
  .flow-step + .flow-step::before { left: 50%; top: -27px; transform: translateX(-50%) rotate(90deg); }
  .sim-row { grid-template-columns: 150px minmax(0, 1fr) 56px 120px; column-gap: 16px; }
  .bar-row { grid-template-columns: 140px minmax(0, 1fr) 96px; }
}
@media (max-width: 767px) {
  .tank-figure { padding: 10px; }
  #tank-svg .tank-lbl { font-size: 25px; }
  #tank-svg .tank-sub { display: none; }
  #tank-svg .tank-lbl--flex { transform: translateY(16px); }
  #tank-svg .tank-lbl--reserve { transform: translateY(8px); }
  .fb-plan .plan-track text { font-size: 19px; }
  .insight { flex-direction: column; align-items: flex-start; }
  :root { --gutter: 20px; --header: 64px; }
  body { font-size: 1rem; }
  .screen { padding: 56px 0; }
  main > .screen:first-child { padding-top: calc(var(--header) + 32px); }
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.is-open {
    display: flex; position: fixed; top: var(--header); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 20px; background: var(--white); color: var(--ink); border-bottom: 1px solid var(--line);
    max-height: calc(100vh - var(--header)); max-height: calc(100dvh - var(--header)); overflow-y: auto; overscroll-behavior: contain;
  }
  .site-header > .wrap { gap: 12px; }
  .site-header > .wrap > .btn--sm { min-height: 38px; padding: 0 14px; font-size: .86rem; }
  .hero h1 { font-size: clamp(1.85rem, 9.2vw, 2.5rem); }
  .legal { padding: calc(var(--header) + 32px) 0 64px; }
  .legal h1 { font-size: clamp(1.55rem, 7.6vw, 2rem); margin-bottom: 24px; }
  .back { min-height: 44px; margin-bottom: 16px; }
  .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer { padding: 20px 0; }
  .footer-row { gap: 8px; }
  .nav.is-open a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); opacity: 1; }
  .nav.is-open a:not(.btn)::after { display: none; }
  .nav.is-open .btn { margin-top: 16px; }
  .hero { min-height: 0; }
  .hero-gain .btn { width: 100%; }
  .switch { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; width: 100%; }
  .switch [role="tab"] { border-radius: 12px; }
  .price-chart { padding-left: 34px; }
  .price-chart svg { height: 200px; }
  .price-day, .sim-bar { padding-left: 0; }
  .price-day { min-height: 0; }
  .y-axis { left: -34px; width: 26px; font-size: .72rem; }
  .sim { padding: 14px 16px; border-radius: 18px; }
  .sim-row { grid-template-columns: 64px minmax(0, 1fr); row-gap: 10px; column-gap: 14px; }
  .sim-label, .track-cell { grid-column: 1 / -1; }
  .sim-row--price { padding-top: 12px; }
  .sim-row--price .track-cell { margin-top: 18px; }
  .sim-play-row { width: 100%; }
  .play { flex: 1 1 auto; min-width: 0; justify-content: center; padding: 0 14px 0 10px; }
  .play span { min-width: 0; }
  .sim-clock { flex: none; padding: 0 12px 0 10px; }
  .sim-row--bisher .track-cell, .sim-row--mit .track-cell { container-type: inline-size; }
  .run-info { top: 3.125cqw; }
  .run-info .info-tip, .run-info.is-right .info-tip { left: calc(13px - var(--q, 0) * 100cqw); right: auto; width: 100cqw; max-width: none; }
  .fest-tag { position: static; display: inline-block; margin-top: 8px; transform: none; box-shadow: none; }
  .tank-cell--head, .cost-cell--head { display: none; }
  .cost-cell, .tank-ok { text-align: left; justify-content: flex-start; }
  .sim-result { flex-direction: column; align-items: flex-start; gap: 8px; }
  .plan-block-label, .plan-level-label { display: none; }
  .savings-card { padding: 24px 20px; }
  .bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .bar-row .bar { grid-column: 1 / -1; grid-row: 2; }
  .town-pick { max-width: none; }
  [data-tabs="modes"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-tabs="modes"] [role="tab"] { padding: 0 6px; white-space: normal; line-height: 1.2; }
  .plan-card { padding: 16px; border-radius: 18px; }
  .plan-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .plan-row { grid-template-columns: 1fr; gap: 4px; }
  .plan-label:empty { display: none; }
  .plan-approve { margin-left: 0; }
  .contact { min-height: 0; }
  .cal-intro { padding: 26px 22px; }
  .cal-intro .btn { width: 100%; }
  .person { padding: 22px; }
  .footer-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 374px) {
  .brand-word { font-size: .86rem; letter-spacing: .26em; }
  .site-header > .wrap > .btn--sm { padding: 0 12px; font-size: .8rem; }
  .sim-clock span { font-size: 1.1rem; }
}
@media print {
  @page { margin: 16mm 14mm; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  body { font-size: 10.5pt; color: #000; background: #fff; }
  .site-header, .skip, .hero-gain .btn, .sim-controls, .cal-box, .notes summary,
  .town-pick, .plan-approve, .info-btn, .copy-btn, .copy-tip, .cursor-time, .hover-time,
  .hero::before, [data-tabs="days"], [data-tabs="modes"] { display: none !important; }
  .screen, .screen--dark, .screen--paper, .screen--mint { min-height: 0 !important; padding: 6mm 0 !important; background: #fff !important; color: #222 !important; break-inside: auto; }
  .price-body, .tank-figure, .insight, .compare div, .sim, .savings-card, .plan-card, .faq-item, .flow-card { break-inside: avoid; }
  h2, .eyebrow { break-after: avoid; }
  .screen--dark h1, .screen--dark h2, .gain-label, .contact-data a { color: #000 !important; }
  .hero-kicker, .eyebrow, .hero h1 em, .gain-kz, .gain-list .icon, .contact-data .icon { color: var(--teal-ink) !important; }
  .hero-sub, .lead, .step-note, .gain-list li, .gain-kz small, .contact-data li { color: #333 !important; }
  .hero-gain { border-left-color: #ccc; }
  .faq-item .faq-a { display: block; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  a { color: inherit; text-decoration: none; }
  .site-footer { background: #fff; color: #333; }
}