/* ═══════════════════════════════════════════════════════════════════
   STERBEGELD-VERGLEICH
   Navigation und Fußzeile kommen aus components.js (Website-Design).
   Der Rechner ist weiß mit Pflaume als Akzent. Nach dem ersten Klick
   wird er zur festen Bildschirmansicht: Fortschritt oben, Weiter unten,
   nur die Mitte scrollt.
   Grundschrift 18 px, Bedienelemente mindestens 48 px hoch.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --lila: #704861;
  --lila-tief: #3d2235;
  --lila-dunkel: #5b3a50;
  --lila-weich: #a07891;
  --lila-hell: #f3ebf0;
  --lila-zart: #faf6f9;
  --tinte: #2a1823;
  --gruen: #1d7a52;
  --gruen-hell: #e8f5ee;
  --gold: #8f6210;
  --gold-hell: #fbf3e2;
  --text: #22161e;
  --text-2: #4b3b45;
  --text-3: #6e5e68;
  --linie: #e4dae1;
  --linie-2: #efe8ed;
  --flaeche: #f8f5f7;
  --weiss: #ffffff;
  --radius: 14px;
  --radius-gross: 22px;
  --schatten: 0 1px 2px rgba(61, 34, 53, .06), 0 8px 28px rgba(61, 34, 53, .08);
  --schatten-hoch: 0 2px 4px rgba(61, 34, 53, .06), 0 20px 50px rgba(61, 34, 53, .16);
  --ease: cubic-bezier(.22, .9, .24, 1);
  --schrift: "Geist", -apple-system, "Segoe UI", Arial, sans-serif;
  --schrift-titel: "Montserrat", "Geist", -apple-system, sans-serif;
}

.sv-body { background: var(--weiss); }
.sv-main { font-family: var(--schrift); font-size: 18px; line-height: 1.6; color: var(--text); }
:where(.sv-main) img, :where(.sv-main) svg { display: block; max-width: 100%; }
:where(.sv-main) :is(h1, h2, h3, h4) { margin: 0; font-family: var(--schrift-titel); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; color: var(--text); }
:where(.sv-main) p { margin: 0; }
:where(.sv-main) :is(button, input) { font: inherit; color: inherit; }
.sv-main :focus-visible { outline: 3px solid var(--lila); outline-offset: 3px; border-radius: 6px; }

.sv-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }
.sv-wrap--schmal { max-width: 900px; }

/* ── Schriftbausteine ── */
.sv-eyebrow { font-family: var(--schrift-titel); font-size: 13.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lila); margin-bottom: 14px; }
.sv-eyebrow--hell { color: #e2c4d7; }
.sv-kopfzeile { max-width: 820px; margin-bottom: clamp(32px, 4vw, 48px); }
.sv-kopfzeile h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 500; }
.sv-unterzeile { margin-top: 14px; font-size: 20px; color: var(--text-2); }

/* ── Schaltflächen: Pflaume mit vier Schattenlagen ── */
.sv-btn {
  --lift: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 14px 28px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--schrift); font-size: 18px; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden;
  transform: translateY(var(--lift)); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, opacity .25s;
}
.sv-btn-voll {
  color: #fff; background: linear-gradient(180deg, #8b5b7a 0%, var(--lila) 55%, var(--lila-dunkel) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 0 0 1px rgba(61, 34, 53, .5), 0 8px 22px rgba(112, 72, 97, .3);
}
.sv-btn-voll::before {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
}
.sv-btn-voll[disabled], .sv-btn-voll[aria-disabled="true"] { opacity: .42; cursor: not-allowed; box-shadow: none; }
.sv-btn-linie { color: var(--lila-tief); background: var(--weiss); box-shadow: 0 0 0 1.5px var(--lila) inset; }
.sv-btn-hell { color: var(--lila-tief); background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.sv-btn-gross { min-height: 62px; padding: 16px 34px; font-size: 19px; }
@media (hover: hover) and (pointer: fine) {
  .sv-btn:not([disabled]):hover { --lift: -2px; }
  .sv-btn-voll:not([disabled]):hover::before { transform: translateX(120%); transition: transform .9s var(--ease); }
  .sv-btn-linie:hover { background: var(--lila-zart); }
}
.sv-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sv-cta--mitte { align-items: center; text-align: center; margin-top: clamp(36px, 4vw, 52px); }
.sv-cta-zeile { font-size: 16px; color: var(--text-3); }

/* ── Bewegte Farbwolken (nur auf dunklem Grund) ── */
.sv-aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background-color: var(--tinte); }
.sv-aura i { position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; opacity: .6; will-change: transform; }
.sv-aura i:nth-child(1) { width: 640px; height: 640px; left: -180px; top: -220px; background: #8b4f75; animation: sv-drift1 24s ease-in-out infinite alternate; }
.sv-aura i:nth-child(2) { width: 540px; height: 540px; right: -160px; top: 8%; background: #5d3a7a; animation: sv-drift2 28s ease-in-out infinite alternate; }
.sv-aura i:nth-child(3) { width: 480px; height: 480px; left: 36%; bottom: -280px; background: #a5627f; animation: sv-drift3 22s ease-in-out infinite alternate; }
.sv-aura--ruhig i { opacity: .42; }
@keyframes sv-drift1 { to { transform: translate(180px, 120px) scale(1.15); } }
@keyframes sv-drift2 { to { transform: translate(-160px, 90px) scale(.9); } }
@keyframes sv-drift3 { to { transform: translate(-120px, -110px) scale(1.12); } }

/* ── Einstieg ── */
.sv-hero { position: relative; overflow: clip; background-color: var(--tinte); color: #fff; }
.sv-hero-in {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
  padding-top: calc(clamp(92px, 9vw, 120px) + clamp(28px, 4vw, 56px)); padding-bottom: clamp(64px, 7vw, 104px);
}
.sv-main .sv-hero h1 { color: #fff; font-size: clamp(36px, 4.6vw, 62px); font-weight: 400; line-height: 1.08; }
.sv-hero h1 em { display: block; font-family: var(--font-accent, "Instrument Serif"), Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0; color: #ecd3e3; }
.sv-lead { margin-top: 22px; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; color: #eadde5; max-width: 34em; }
.sv-hero .sv-cta { margin-top: 34px; }
.sv-hero .sv-cta-zeile { color: #d5c2ce; }
.sv-logozeile { list-style: none; margin: 38px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sv-logozeile li { background: #fff; border-radius: 12px; height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: center; }
.sv-logozeile img { height: 28px; width: auto; max-width: 150px; object-fit: contain; }
.sv-logozeile li:nth-child(2) img { height: 36px; }
.sv-logozeile img[src*="allianz"], .sv-logozeile img[src*="gothaer"] { height: 30px; }
.sv-logozeile img[src*="ge-be-in"] { height: 34px; max-width: none; }
.sv-logozeile img[src*="hannoversche"] { height: auto; width: 168px; max-width: none; }

/* Erzählgrafik Zahlungsdauer */
.sv-zeitgrafik { margin: 0; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-gross); padding: clamp(20px, 2.6vw, 32px); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sv-zeitgrafik { backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
}
.sv-zeitgrafik figcaption { font-family: var(--schrift-titel); font-size: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #e2c4d7; margin-bottom: 8px; }
.sv-zeitgrafik svg { width: 100%; height: auto; overflow: visible; }
.zg-achse line { stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.zg-achse .zg-strich { stroke: rgba(255, 255, 255, .14); stroke-dasharray: 4 6; }
.zg-achse text { fill: #d5c2ce; font-size: 17px; font-family: var(--schrift); }
.zg-linie text { fill: #f1e6ed; font-size: 19px; font-weight: 500; font-family: var(--schrift); opacity: 0; }
.zg-linie path { fill: none; stroke: #b893ab; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.zg-linie .zg-ende { fill: #b893ab; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.zg-gut path { stroke: #7fd3a6; }
.zg-gut text { fill: #fff; font-weight: 600; }
.zg-gut .zg-ende { fill: #7fd3a6; }
.zg-gut .zg-haken { fill: none; stroke: var(--tinte); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.zg-lang path { stroke: #e7bd84; }
.zg-licht { fill: #fff; opacity: 0; }
.zg-satz { margin-top: 12px; font-size: 17.5px; line-height: 1.55; color: #eadde5; }
.zg-satz strong { color: #fff; font-weight: 600; }
.an .zg-linie text { animation: sv-ein .6s var(--ease) forwards; animation-delay: calc(var(--d) * 1ms); }
.an .zg-linie path { animation: sv-zeichnen 1.4s var(--ease) forwards; animation-delay: calc(var(--d) * 1ms + 150ms); }
.an .zg-linie .zg-ende { animation: sv-pop .5s var(--ease) forwards; animation-delay: calc(var(--d) * 1ms + 1350ms); }
.an .zg-gut .zg-haken { animation: sv-zeichnen .4s var(--ease) forwards; animation-delay: 1.8s; }
.an .zg-licht { animation: sv-ein .4s linear forwards 1.6s; }
@keyframes sv-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes sv-pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes sv-ein { to { opacity: 1; } }
@keyframes sv-dreh { to { transform: rotate(360deg); } }

/* ═══ Vergleich ═══ */
.sv-werkzeug { position: relative; background: linear-gradient(180deg, var(--flaeche) 0%, var(--weiss) 260px); padding: clamp(44px, 5vw, 76px) 0; }

.sv-app {
  position: relative; display: flex; flex-direction: column; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 26px; box-shadow: var(--schatten-hoch); overflow: hidden;
}
.sv-app-kopf { position: relative; z-index: 2; background: var(--weiss); border-bottom: 1px solid var(--linie-2); padding: 10px clamp(18px, 3vw, 36px) 12px; }

/* Fortschritt in Prozent, startet nicht bei null */
.sv-fort { max-width: 1240px; margin: 0 auto; }
.sv-fort-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 28px; }
.sv-fort-text { font-size: 15px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-fort-prozent { font-size: 15px; font-weight: 500; color: var(--lila); white-space: nowrap; text-align: center; }
.sv-fort-prozent b { font-family: var(--schrift-titel); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Balken mit den Schritten darin: dunkle Schrift auf hellem Grund, weiße Schrift auf der Füllung */
.sv-fort-balken { --f: .15; position: relative; height: 32px; border-radius: 10px; background: var(--lila-hell); margin-top: 6px; overflow: hidden; }
.sv-fort-balken > i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--lila-weich), var(--lila)); transform-origin: left; transform: scaleX(var(--f)); transition: transform .9s var(--ease); overflow: hidden; }
.sv-fort-balken > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-100%); animation: sv-glanz 2.8s ease-in-out infinite 1s; }
@keyframes sv-glanz { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.sv-fort-schritte { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; font-size: 14px; font-weight: 500; color: var(--text-3); pointer-events: none; }
.sv-fort-schritte li { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.sv-fort-schritte li + li { box-shadow: inset 1px 0 0 rgba(112, 72, 97, .14); }
.sv-fort-schritte li.jetzt { font-weight: 700; color: var(--lila-tief); }
.sv-fort-schritte li.fertig { color: var(--lila); }
.sv-fort-schritte--hell { color: #fff; clip-path: inset(0 calc(100% - var(--f) * 100%) 0 0); transition: clip-path .9s var(--ease); }
.sv-fort-schritte--hell li, .sv-fort-schritte--hell li.jetzt, .sv-fort-schritte--hell li.fertig { color: #fff; }
.sv-fort-schritte--hell li + li { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .28); }
.sv-fort-schritte .kurz { display: none; }

.sv-app-mitte { position: relative; padding: clamp(18px, 2.2vw, 28px) clamp(18px, 3vw, 36px); }
.sv-app-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 3vw, 40px); align-items: start; max-width: 1240px; margin: 0 auto; }
.sv-ablauf { min-width: 0; }

.sv-app-fuss { position: relative; z-index: 2; background: rgba(255, 255, 255, .97); border-top: 1px solid var(--linie-2); padding: 8px clamp(18px, 3vw, 36px); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.sv-app-fuss-in { display: flex; align-items: center; gap: 16px; max-width: 1240px; margin: 0 auto; }
.sv-app-fuss .sv-btn { min-width: 220px; margin-left: auto; min-height: 48px; padding: 10px 26px; font-size: 17px; }
.sv-app-fuss .sv-zurueck { min-height: 46px; padding-top: 8px; padding-bottom: 8px; }
.sv-fuss-info { margin: 0 auto; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-3); }
.sv-fuss-info svg { color: var(--lila); flex: 0 0 auto; }
.sv-zurueck { min-height: 52px; padding: 12px 18px 12px 12px; border: 0; background: none; color: var(--text-2); font-weight: 500; cursor: pointer; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; }
.sv-zurueck::before { content: "←"; font-size: 20px; }
.sv-zurueck:hover { background: var(--flaeche); color: var(--text); }
.sv-zurueck[hidden] { display: inline-flex; visibility: hidden; }
.sv-btn[hidden] { display: none; }
.wackeln { animation: sv-wackeln .45s var(--ease); }
/* Weiter meldet sich, sobald es geht */
.sv-btn-voll.bereit:not([aria-disabled="true"]) { animation: sv-bereit 1.1s var(--ease); }
@keyframes sv-bereit { 0% { transform: scale(1); } 35% { transform: scale(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 0 0 6px rgba(112, 72, 97, .18), 0 10px 26px rgba(112, 72, 97, .35); } 100% { transform: scale(1); } }
@keyframes sv-wackeln { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-4px); } 100% { transform: none; } }

/* So hoch wie der Bildschirm unter der Navigation (Wert setzt das Skript), nur die Mitte scrollt.
   Am Ende der Mitte scrollt die Seite normal weiter. */
.sv-app { height: var(--app-h, calc(100vh - 110px)); min-height: 520px; scroll-margin-top: 96px; }
.sv-app-mitte { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(180deg, var(--lila-zart) 0%, var(--weiss) 220px); }
.sv-app .sv-seite { position: sticky; top: 0; }

/* Schritte */
.sv-schritt { display: none; }
.sv-schritt.aktiv { display: block; animation: sv-schritt .5s var(--ease); }
@keyframes sv-schritt { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sv-frage { font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; }
.sv-main .sv-frage:focus { outline: none; }
.sv-hilfe { margin-top: 10px; font-size: 18px; color: var(--text-2); max-width: 40em; }

.sv-wahlen { display: grid; gap: 14px; margin-top: 26px; }
.sv-wahl {
  position: relative; display: flex; align-items: center; gap: 20px; width: 100%; text-align: left; cursor: pointer;
  background: var(--weiss); border: 2px solid var(--linie); border-radius: 16px; padding: 18px 22px; min-height: 92px;
  transition: border-color .2s, box-shadow .25s, transform .25s var(--ease), background .2s;
}
@media (hover: hover) and (pointer: fine) {
  .sv-wahl:hover { border-color: var(--lila-weich); box-shadow: 0 8px 24px rgba(112, 72, 97, .12); transform: translateY(-1px); }
}
.sv-wahl[aria-pressed="true"] { border-color: var(--lila); background: var(--lila-zart); box-shadow: 0 0 0 4px rgba(112, 72, 97, .14); }
.sv-wahl-symbol { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; background: var(--lila-hell); color: var(--lila); display: grid; place-items: center; transition: background .25s, color .25s; }
.sv-wahl-symbol svg { width: 34px; height: 34px; }
.sv-wahl[aria-pressed="true"] .sv-wahl-symbol { background: var(--lila); color: #fff; }
.sv-wahl-text { flex: 1; min-width: 0; }
.sv-wahl-text strong { display: block; font-size: 21px; font-weight: 600; }
.sv-wahl-text small { display: block; margin-top: 4px; font-size: 17px; color: var(--text-2); line-height: 1.5; }
.sv-wahl-punkt { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--linie); background: #fff; transition: all .3s var(--ease); }
.sv-wahl[aria-pressed="true"] .sv-wahl-punkt { border-color: var(--lila); background: var(--lila) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat; transform: scale(1.08); }

/* Geburtsdatum */
.sv-datum { display: flex; gap: 14px; margin-top: 26px; }
.sv-datum-feld { display: flex; flex-direction: column; gap: 8px; font-size: 16px; font-weight: 500; color: var(--text-2); }
.sv-datum-feld input {
  width: 96px; height: 72px; text-align: center; font-size: 30px; font-weight: 600; letter-spacing: .04em;
  border: 2px solid var(--linie); border-radius: var(--radius); background: var(--weiss); color: var(--text);
}
.sv-datum-jahr input { width: 140px; }
.sv-datum-feld input:focus { outline: none; border-color: var(--lila); box-shadow: 0 0 0 4px rgba(112, 72, 97, .16); }
.sv-datum.falsch input { border-color: #b42318; }
.sv-fehler { display: none; margin-top: 14px; font-size: 17px; color: #b42318; font-weight: 500; }
.sv-fehler.an { display: block; }
.sv-alter { display: none; margin-top: 16px; font-size: 18px; color: var(--lila-tief); font-weight: 500; background: var(--lila-hell); border-radius: 12px; padding: 10px 16px; width: fit-content; animation: sv-schritt .4s var(--ease); }
.sv-alter.an { display: block; }

/* Summe mit Regler und Skala */
.sv-summe { margin-top: 24px; background: var(--lila-zart); border: 1px solid var(--linie-2); border-radius: var(--radius-gross); padding: clamp(20px, 3vw, 30px); }
.sv-summe-wert { display: block; text-align: center; font-family: var(--schrift-titel); font-size: clamp(44px, 5vw, 58px); font-weight: 600; letter-spacing: -.02em; color: var(--lila-tief); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sv-regler { margin-top: 16px; }
.sv-summe input[type=range] { display: block; width: 100%; margin: 0; height: 44px; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sv-summe input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--lila) var(--fuell, 29%), var(--linie) var(--fuell, 29%)); }
.sv-summe input[type=range]::-moz-range-track { height: 10px; border-radius: 10px; background: var(--linie); }
.sv-summe input[type=range]::-moz-range-progress { height: 10px; border-radius: 10px; background: var(--lila); }
.sv-summe input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 36px; margin-top: -13px; border-radius: 50%; background: #fff; border: 4px solid var(--lila); box-shadow: 0 3px 10px rgba(61, 34, 53, .28); transition: transform .2s var(--ease); }
.sv-summe input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
.sv-summe input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 4px solid var(--lila); }
.sv-skala { position: relative; height: 36px; margin: 0 18px; }
.sv-skala span { position: absolute; top: 0; left: calc(var(--p) * 100%); transform: translateX(-50%); padding-top: 11px; font-size: 14.5px; font-weight: 500; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .2s; }
.sv-skala span::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 7px; margin-left: -1px; border-radius: 2px; background: var(--linie); transition: background .2s, height .2s; }
.sv-skala span.an { color: var(--lila); font-weight: 700; }
.sv-skala span.an::before { background: var(--lila); height: 9px; }
.sv-schnell { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.sv-schnell button { min-height: 50px; border-radius: 12px; border: 1.5px solid var(--linie); background: var(--weiss); font-size: 17px; font-weight: 600; cursor: pointer; transition: all .2s; }
.sv-schnell button:hover { border-color: var(--lila); color: var(--lila-tief); }
.sv-schnell button.an { border-color: var(--lila); background: var(--lila); color: #fff; }
.sv-summe-info { margin-top: 16px; border: 1px solid var(--linie-2); border-radius: var(--radius); padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.sv-summe-info p { font-size: 17px; color: var(--text-2); }
.sv-summe-info strong { color: var(--lila-tief); }
.sv-summe-info .sv-mini-logos { display: flex; gap: 8px; flex-wrap: wrap; }

/* Logo-Plaketten */
.sv-logo { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--linie-2); border-radius: 10px; flex: 0 0 auto; }
.sv-logo img { width: auto; object-fit: contain; }
.sv-logo--mini { height: 36px; padding: 0 10px; }
.sv-logo--mini img { height: 18px; max-width: 88px; }
.sv-logo--klein { height: 44px; padding: 0 12px; }
.sv-logo--klein img { height: 22px; max-width: 110px; }
.sv-logo--mittel { height: 60px; padding: 0 16px; }
.sv-logo--mittel img { height: 30px; max-width: 160px; }
.sv-logo--gross { height: 70px; padding: 0 18px; }
.sv-logo--gross img { height: 38px; max-width: 190px; }
.sv-logo[data-v="breit"] img { height: auto; }
/* HanseMerkur: Bildmarke über dem Schriftzug, braucht mehr Höhe für dieselbe Wirkung */
.sv-logo--mini img[src*="hansemerkur"] { height: 26px; }
.sv-logo--klein img[src*="hansemerkur"] { height: 32px; }
.sv-logo--mittel img[src*="hansemerkur"] { height: 44px; }
.sv-logo--gross img[src*="hansemerkur"] { height: 54px; }
.sv-logo--mini[data-v="breit"] img { width: 84px; }
.sv-logo--klein[data-v="breit"] img { width: 104px; }
.sv-logo--mittel[data-v="breit"] img { width: 150px; }
.sv-logo--gross[data-v="breit"] img { width: 180px; }

/* ── Seitenleiste: wie viele Tarife noch möglich sind ── */
.sv-seite { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-gross); box-shadow: var(--schatten); padding: 16px; }
.sv-zaehler { text-align: center; padding-bottom: 12px; border-bottom: 1px solid var(--linie-2); }
.sv-zaehler-label { display: block; font-family: var(--schrift-titel); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lila); }
.sv-zaehler-zahl { position: relative; display: inline-block; margin-top: 6px; font-family: var(--schrift-titel); font-size: 50px; font-weight: 600; line-height: 1; color: var(--lila-tief); font-variant-numeric: tabular-nums; }
.sv-zaehler-zahl.tick { animation: sv-tick .5s var(--ease); }
@keyframes sv-tick { 40% { transform: scale(.88); } 100% { transform: none; } }
.sv-minus { position: absolute; left: 100%; top: 4px; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--lila-hell); color: var(--lila); font-size: 16px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; }
.sv-minus.los { animation: sv-minus 1.8s var(--ease); }
@keyframes sv-minus { 0% { opacity: 0; transform: translateY(10px); } 18% { opacity: 1; transform: none; } 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-16px); } }
.sv-zaehler-unter { display: block; margin-top: 4px; font-size: 15px; color: var(--text-2); }
.sv-zaehler-balken { height: 8px; border-radius: 8px; background: var(--lila-hell); margin-top: 10px; overflow: hidden; }
.sv-zaehler-balken i { display: block; height: 100%; border-radius: inherit; background: var(--lila); transform-origin: left; transform: scaleX(var(--a, 1)); transition: transform .9s var(--ease); }
.sv-seite-titel { margin-top: 12px; font-family: var(--schrift-titel); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); text-align: center; }
.sv-seite-logos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sv-seite-logos li { display: flex; }
.sv-seite-logos .sv-logo { width: 100%; height: 46px; padding: 0 8px; }
.sv-seite-logos .sv-logo img { max-width: 100%; }
.sv-seite-logos .sv-logo[data-v="breit"] img { width: 100%; max-width: 112px; }
.sv-seite-logos .sv-logo img[src*="ge-be-in"] { width: 100%; max-width: 112px; height: auto; }
.sv-seite-logos .sv-logo img[src*="hannoversche"] { width: 100%; max-width: 124px; height: auto; }

.sv-zaehler-mobil { display: none; }

/* ── Berechnung: Ladekreis, Logos verschwinden nacheinander, dann Haken ── */
.sv-pruefen { text-align: center; padding: 4px 0; }
.sv-buehne { position: relative; height: 240px; margin: 0 auto 8px; max-width: 600px; }
.sv-buehne-logos { position: absolute; inset: 0; }
.sv-buehne-logos .sv-logo {
  position: absolute; top: 50%; left: 50%; box-shadow: var(--schatten); opacity: 0;
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(.8);
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.sv-buehne.laeuft .sv-buehne-logos .sv-logo { opacity: .95; transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(1); transition-delay: calc(var(--d) * 1ms); }
.sv-buehne.laeuft .sv-buehne-logos .sv-logo.weg { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--x) * .3), calc(var(--y) * .3)) scale(.45); transition-delay: 0s; }
.sv-buehne-ring { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; transform: translate(-50%, -50%); z-index: 1; }
.ring-grund { fill: #fff; stroke: var(--lila-hell); stroke-width: 7; }
.ring-dreh { fill: none; stroke: var(--lila); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 24 76; transform-box: view-box; transform-origin: 60px 60px; transition: opacity .3s; }
.sv-buehne.laeuft .ring-dreh { animation: sv-dreh .9s linear infinite; }
.ring-lauf { fill: none; stroke: var(--lila); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform-box: view-box; transform-origin: 60px 60px; transform: rotate(-90deg); }
.ring-haken { fill: none; stroke: var(--lila); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ring-lauf, .ring-haken { opacity: 0; }
.sv-buehne.fertig .ring-lauf, .sv-buehne.fertig .ring-haken { opacity: 1; }
.sv-buehne.fertig .ring-dreh { opacity: 0; }
.sv-buehne.fertig .ring-lauf { animation: sv-zeichnen .6s var(--ease) forwards; }
.sv-buehne.fertig .ring-haken { animation: sv-zeichnen .45s var(--ease) forwards .45s; }
.sv-buehne.fertig .sv-buehne-ring { animation: sv-ring-puls .7s var(--ease) .85s; }
@keyframes sv-ring-puls { 40% { transform: translate(-50%, -50%) scale(1.1); } 100% { transform: translate(-50%, -50%) scale(1); } }
.sv-pruefliste { list-style: none; padding: 0; margin: 20px auto 0; display: grid; gap: 10px; max-width: 460px; text-align: left; }
.sv-pruefliste li { position: relative; padding: 11px 14px 11px 50px; border-radius: 12px; background: var(--flaeche); font-size: 17px; color: var(--text-3); transition: color .4s, background .4s; }
.sv-pruefliste li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; border: 2px solid var(--linie); background: #fff; transition: all .4s var(--ease); }
.sv-pruefliste li.fertig { color: var(--text); background: var(--lila-zart); }
.sv-pruefliste li.fertig::before { border-color: var(--lila); background: var(--lila) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat; }
.sv-hinweis { margin: 20px auto 0; max-width: 520px; text-align: left; font-size: 16px; line-height: 1.55; color: var(--text-2); background: var(--lila-zart); border: 1px solid var(--linie-2); border-radius: 12px; padding: 14px 18px; }

/* ═══ Ergebnis ═══ */
.sv-erg-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; align-items: flex-end; }
.sv-erg-kopf .sv-eyebrow { margin-bottom: 8px; }
.sv-erg-kopf h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 500; }
.sv-erg-spanne { margin-top: 8px; font-size: 18px; color: var(--text-2); }
.sv-erg-spanne strong { color: var(--lila-tief); font-weight: 600; }
.sv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sv-chip { font-size: 15px; font-weight: 500; padding: 7px 12px; border-radius: 999px; background: var(--lila-zart); color: var(--text-2); border: 1px solid var(--linie-2); }
.sv-chip-knopf { font-size: 15px; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--lila); border: 1.5px solid var(--lila); cursor: pointer; min-height: 40px; }
.sv-chip-knopf:hover { background: var(--lila-zart); }

/* Zwei Tarife nebeneinander */
.sv-top2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; align-items: stretch; }
.sv-karte { position: relative; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--linie); border-radius: 24px; box-shadow: var(--schatten); overflow: hidden; isolation: isolate; }
.sv-karte > * { position: relative; z-index: 1; }
/* Umlaufender Lichtrand an der Empfehlung */
.sv-karte--empf { border-color: transparent; box-shadow: var(--schatten-hoch); }
.sv-karte--empf::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; margin: -80% 0 0 -80%; background: conic-gradient(from 0deg, var(--lila) 0deg, #e3cad9 70deg, var(--lila) 150deg, #c79bb8 230deg, var(--lila) 360deg); animation: sv-dreh 9s linear infinite; }
.sv-karte--empf::after { content: ""; position: absolute; z-index: 0; inset: 3px; border-radius: 21px; background: #fff; }
.sv-karte-band { margin: 0; padding: 11px 22px; font-family: var(--schrift-titel); font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.sv-karte--empf .sv-karte-band { margin: 3px 3px 0; border-radius: 21px 21px 0 0; background: linear-gradient(90deg, var(--lila-tief), var(--lila)); color: #fff; }
.sv-karte--alt .sv-karte-band { background: var(--lila-hell); color: var(--lila-tief); }
.sv-karte-band svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sv-karte-innen { display: flex; flex-direction: column; flex: 1; padding: 20px clamp(18px, 2.2vw, 26px) 22px; }
.sv-karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sv-note { display: flex; align-items: center; gap: 10px; text-align: right; }
.sv-note small { font-size: 13.5px; line-height: 1.25; color: var(--text-3); }
.sv-note-kreis { position: relative; width: 60px; height: 60px; flex: 0 0 auto; }
.sv-note-kreis svg { width: 60px; height: 60px; transform: rotate(-90deg); }
.sv-note-kreis circle { fill: none; stroke-width: 6; }
.sv-note-kreis .grund { stroke: var(--lila-hell); }
.sv-note-kreis .wert { stroke: var(--lila); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) .5s; }
.sv-zeigen .sv-note-kreis .wert { stroke-dashoffset: calc(1 - var(--p)); }
.sv-note-kreis b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--schrift-titel); font-size: 19px; font-weight: 700; color: var(--lila-tief); }
.sv-karte h3 { margin-top: 16px; font-size: clamp(20px, 1.9vw, 23px); font-weight: 600; }
.sv-karte-variante { margin-top: 2px; font-size: 16.5px; color: var(--text-3); }
.sv-karte-preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linie-2); }
.sv-preis { font-family: var(--schrift-titel); font-size: clamp(38px, 4vw, 48px); font-weight: 700; letter-spacing: -.02em; color: var(--lila-tief); line-height: 1.05; font-variant-numeric: tabular-nums; }
.sv-preis-zeit { font-size: 16.5px; color: var(--text-3); }
.sv-merkmale { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.sv-merkmale li { position: relative; padding-left: 34px; font-size: 17px; line-height: 1.45; opacity: 0; transform: translateX(-10px); }
.sv-zeigen .sv-merkmale li { animation: sv-merkmal .55s var(--ease) forwards; animation-delay: calc(var(--d) * 1ms); }
@keyframes sv-merkmal { to { opacity: 1; transform: none; } }
.sv-merkmale li::before { content: ""; position: absolute; left: 0; top: 1px; width: 23px; height: 23px; border-radius: 50%; background: var(--lila) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.sv-merkmale li.info::before { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e5e68' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.sv-merkmale li.info { color: var(--text-2); }
.sv-merkmale strong { font-weight: 600; }
.sv-vorteil { position: relative; overflow: hidden; margin-top: 16px; display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 13px 15px; font-size: 16.5px; line-height: 1.45; font-weight: 500; background: var(--lila-zart); color: var(--lila-tief); border: 1px solid var(--linie-2); }
.sv-vorteil--spar { background: var(--gruen-hell); color: #14563a; border-color: #cfe9db; }
.sv-vorteil svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }
.sv-vorteil b { font-weight: 700; white-space: nowrap; }
.sv-vorteil::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); transform: translateX(-110%); }
.sv-zeigen .sv-vorteil::after { animation: sv-wisch 1.4s var(--ease) forwards 1.5s; }
@keyframes sv-wisch { to { transform: translateX(110%); } }
.sv-karte-aktion { margin-top: auto; padding-top: 18px; }
.sv-karte-aktion .sv-btn { width: 100%; white-space: normal; text-align: center; line-height: 1.3; }
.sv-karte-aktion small { display: block; margin-top: 8px; font-size: 14px; color: var(--text-3); text-align: center; }
.sv-karte-aktion small.sv-hinweis-wichtig, .sv-kachel-hinweis { display: block; padding: 8px 10px; border-radius: 10px; background: var(--gold-hell); color: #5e4209; font-size: 14px; line-height: 1.4; text-align: center; }
.sv-karte-aktion small.sv-hinweis-wichtig b, .sv-kachel-hinweis b { font-weight: 700; white-space: nowrap; }

/* Kleine Leiste: die zwei von oben und der kleinste Monatsbeitrag */
.sv-leiste { margin-top: clamp(30px, 3.4vw, 44px); }
.sv-leiste-kopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.sv-leiste-kopf h3 { font-size: clamp(21px, 2vw, 25px); font-weight: 500; }
.sv-leiste-kopf p { font-size: 16px; color: var(--text-3); }
.sv-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.sv-kachel { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; border: 1.5px solid var(--linie); border-radius: 18px; background: #fff; transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; }
@media (hover: hover) and (pointer: fine) {
  .sv-kachel:hover { border-color: var(--lila-weich); transform: translateY(-3px); box-shadow: var(--schatten); }
}
.sv-kachel--empf { border-color: var(--lila); background: var(--lila-zart); }
.sv-kachel--preis { border-color: #e9cf9f; background: linear-gradient(180deg, var(--gold-hell), #fff 70%); }
.sv-kachel-band { display: inline-flex; align-items: center; gap: 6px; font-family: var(--schrift-titel); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lila); }
.sv-kachel--preis .sv-kachel-band { color: var(--gold); }
.sv-kachel-band svg { width: 15px; height: 15px; }
.sv-kachel-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sv-kachel-preis { text-align: right; line-height: 1.1; }
.sv-kachel-preis b { display: block; font-family: var(--schrift-titel); font-size: 23px; font-weight: 700; color: var(--lila-tief); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-kachel-preis span { font-size: 13.5px; color: var(--text-3); }
.sv-kachel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; color: var(--text-2); }
.sv-kachel ul li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--linie-2); padding-bottom: 4px; }
.sv-kachel ul li span { color: var(--text-3); }
.sv-kachel ul li strong { font-weight: 600; text-align: right; }
.sv-kachel-satz { font-size: 15px; line-height: 1.45; color: var(--text-2); }
.sv-kachel--preis .sv-kachel-satz { color: #5e4209; }
.sv-kachel-link { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border-radius: 999px; font-size: 16px; font-weight: 600; color: var(--lila-tief); text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--lila); transition: background .2s; }
.sv-kachel-link:hover { background: var(--lila-hell); }
.sv-kachel--empf .sv-kachel-link { background: var(--lila); color: #fff; box-shadow: none; }

/* Gesamtbeiträge als Balken */
.sv-teil { margin-top: clamp(32px, 3.6vw, 48px); }
.sv-teil > h3 { font-size: clamp(21px, 2vw, 25px); font-weight: 500; }
.sv-teil > p { margin-top: 6px; font-size: 17px; color: var(--text-2); }
.sv-kosten { margin-top: 18px; background: #fff; border: 1px solid var(--linie-2); border-radius: var(--radius-gross); padding: clamp(16px, 2.4vw, 26px); }
.sv-kosten-zeile { display: grid; grid-template-columns: 210px minmax(0, 1fr) 170px; gap: 14px; align-items: center; padding: 10px 0; }
.sv-kosten-name { font-size: 16px; font-weight: 600; line-height: 1.35; }
.sv-kosten-name small { display: block; font-weight: 500; color: var(--text-3); font-size: 14.5px; }
.sv-kosten-balken { position: relative; height: 28px; border-radius: 8px; background: var(--flaeche); overflow: hidden; }
.sv-kosten-balken i { position: absolute; inset: 0; border-radius: 8px; background: var(--lila-weich); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); transition-delay: calc(var(--d) * 1ms); }
.sv-zeigen .sv-kosten-balken i { transform: scaleX(var(--w)); }
.sv-kosten-zeile--empf .sv-kosten-balken i { background: linear-gradient(90deg, var(--lila-tief), var(--lila)); }
.sv-kosten-wert { font-size: 17px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sv-kosten-wert small { display: block; font-size: 13.5px; font-weight: 600; color: var(--gruen); }
.sv-kosten-marke { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--lila-tief); left: calc(var(--m) * 100%); }
.sv-kosten-legende { margin-top: 10px; font-size: 15px; color: var(--text-3); display: flex; align-items: center; gap: 8px; }
.sv-kosten-legende::before { content: ""; width: 2px; height: 18px; background: var(--lila-tief); }

/* Alle Tarife */
.sv-aufklapp { margin-top: 14px; border: 1px solid var(--linie-2); border-radius: var(--radius); background: #fff; }
.sv-aufklapp > summary { list-style: none; cursor: pointer; min-height: 60px; padding: 16px 20px; font-size: 18px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sv-aufklapp > summary::-webkit-details-marker { display: none; }
.sv-aufklapp > summary::after { content: "+"; font-size: 26px; font-weight: 400; color: var(--lila); }
.sv-aufklapp[open] > summary::after { content: "−"; }
.sv-aufklapp-inhalt { padding: 0 20px 20px; }
.sv-sortierung { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sv-sortierung button { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--linie); background: #fff; font-size: 15.5px; font-weight: 500; cursor: pointer; }
.sv-sortierung button[aria-pressed="true"] { background: var(--lila); border-color: var(--lila); color: #fff; }
.sv-tabelle { width: 100%; border-collapse: collapse; font-size: 16px; }
.sv-tabelle th { text-align: left; font-size: 14px; font-weight: 600; color: var(--text-3); padding: 10px 8px; border-bottom: 2px solid var(--linie); }
.sv-tabelle td { padding: 12px 8px; border-bottom: 1px solid var(--linie-2); vertical-align: middle; }
.sv-tabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.sv-tabelle .sv-tarifzelle { display: flex; align-items: center; gap: 12px; }
.sv-tabelle .sv-tarifzelle small { display: block; color: var(--text-3); font-size: 14px; }
.sv-tabelle a { white-space: nowrap; font-weight: 600; color: var(--lila); }
.sv-tabelle tr.markiert td { background: var(--lila-zart); }
.sv-raus-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sv-raus-liste li { display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--text-2); }
.sv-gewichte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 12px; }
.sv-gewichte div { background: var(--lila-zart); border-radius: 12px; padding: 12px; }
.sv-gewichte strong { display: block; font-family: var(--schrift-titel); font-size: 26px; color: var(--lila-tief); }
.sv-gewichte span { font-size: 15px; color: var(--text-2); }
.sv-aufklapp-inhalt p { font-size: 16.5px; color: var(--text-2); }
.sv-aufklapp-inhalt p + p { margin-top: 10px; }

/* So geht es weiter */
.sv-ablaufschritte { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; list-style: none; padding: 0; }
.sv-ablaufschritte::before { content: ""; position: absolute; top: 28px; left: 16.666%; right: 16.666%; height: 3px; background: var(--linie); }
.sv-ablaufschritte::after { content: ""; position: absolute; top: 28px; left: 16.666%; right: 16.666%; height: 3px; background: var(--lila); transform: scaleX(0); transform-origin: left; transition: transform 1.5s var(--ease) .3s; }
.sv-zeigen .sv-ablaufschritte::after { transform: scaleX(1); }
.sv-ablaufschritte li { position: relative; text-align: center; }
.sv-ablaufschritte b { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: #fff; border: 3px solid var(--lila); color: var(--lila); font-family: var(--schrift-titel); font-size: 22px; font-weight: 700; }
.sv-ablaufschritte strong { display: block; margin-top: 12px; font-size: 18px; }
.sv-ablaufschritte span { display: block; margin-top: 4px; font-size: 16px; color: var(--text-2); }
.sv-fussnote { margin-top: 28px; font-size: 15px; line-height: 1.6; color: var(--text-3); border-top: 1px solid var(--linie-2); padding-top: 16px; }

/* Auftritt der Ergebnisteile */
.sv-auftritt { opacity: 0; transform: translateY(26px); }
.sv-zeigen .sv-auftritt { animation: sv-auftritt .9s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes sv-auftritt { to { opacity: 1; transform: none; } }

.sv-leer { text-align: center; padding: 20px 0; }
.sv-leer .sv-btn { margin-top: 22px; }

/* ── Inhaltsabschnitte ── */
.sv-abschnitt { padding: clamp(56px, 6vw, 84px) 0; background: var(--flaeche); }
.sv-abschnitt--weiss { background: var(--weiss); }
.sv-beispiel { margin: 0; background: var(--tinte); color: #fff; border-radius: var(--radius-gross); padding: clamp(22px, 3.4vw, 44px); position: relative; overflow: hidden; }
.sv-beispiel figcaption strong { display: block; font-family: var(--schrift-titel); font-size: clamp(21px, 2vw, 26px); font-weight: 500; }
.sv-beispiel figcaption span { display: block; margin-top: 6px; color: #d5c2ce; font-size: 17px; }
.sv-bsp-zeilen { margin-top: 26px; display: grid; gap: 16px; }
.sv-bsp { display: grid; grid-template-columns: 170px 150px minmax(0, 1fr) 170px; gap: 16px; align-items: center; }
.sv-bsp-name { font-weight: 600; font-size: 17px; }
.sv-bsp-monat { color: #d5c2ce; font-size: 16px; }
.sv-bsp-balken { height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sv-bsp-balken i { display: block; height: 100%; width: 100%; border-radius: 8px; background: #b893ab; transform: scaleX(0); transform-origin: left; }
.sv-bsp-balken--gut i { background: #7fd3a6; }
.sv-bsp-balken--lang i { background: #e7bd84; }
.an .sv-bsp-balken i { animation: sv-balken 1.5s var(--ease) forwards; animation-delay: calc(var(--d) * 1ms); }
@keyframes sv-balken { to { transform: scaleX(var(--w)); } }
.sv-bsp-summe { font-weight: 700; font-size: 17px; text-align: right; font-variant-numeric: tabular-nums; }
.sv-bsp-fazit { margin-top: 24px; font-size: 19px; color: #fff; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 18px; }
.sv-bsp-fazit strong { color: #9be2bb; }

.sv-drei, .sv-vier, .sv-zwei { display: grid; gap: 18px; margin-top: clamp(28px, 3vw, 40px); }
.sv-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
.sv-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.sv-punkt, .sv-zusage, .sv-weg { background: var(--weiss); border: 1px solid var(--linie-2); border-radius: var(--radius-gross); padding: clamp(22px, 2.6vw, 30px); }
.sv-abschnitt--weiss .sv-punkt, .sv-abschnitt--weiss .sv-zusage { background: var(--flaeche); border-color: transparent; }
.sv-punkt-symbol { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--lila-hell); color: var(--lila); }
.sv-punkt-symbol svg { width: 36px; height: 36px; }
.sv-punkt h3, .sv-zusage h3, .sv-weg h3 { margin-top: 18px; font-size: 21px; font-weight: 600; }
.sv-zusage h3, .sv-weg h3 { margin-top: 0; }
.sv-punkt p, .sv-zusage p, .sv-weg p { margin-top: 10px; font-size: 17.5px; color: var(--text-2); }
.sv-zusage { border-top: 4px solid var(--lila); }
.sv-haken { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.sv-haken li { position: relative; padding-left: 32px; font-size: 17px; }
.sv-haken li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--lila-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23704861' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }

.sv-fragen details { background: var(--weiss); border: 1px solid var(--linie-2); border-radius: var(--radius); margin-bottom: 12px; }
.sv-fragen summary { list-style: none; cursor: pointer; min-height: 64px; padding: 18px 22px; font-size: 19px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.sv-fragen summary::-webkit-details-marker { display: none; }
.sv-fragen summary::after { content: "+"; font-size: 28px; font-weight: 400; color: var(--lila); flex: 0 0 auto; }
.sv-fragen details[open] summary::after { content: "−"; }
.sv-fragen details p { padding: 0 22px 20px; font-size: 18px; color: var(--text-2); }

.sv-schluss { position: relative; overflow: clip; background-color: var(--tinte); color: #fff; padding: clamp(60px, 6vw, 92px) 0; }
.sv-schluss-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.sv-main .sv-schluss h2 { color: #fff; font-size: clamp(28px, 3vw, 40px); font-weight: 500; }
.sv-schluss p { margin-top: 12px; color: #eadde5; font-size: 18px; }
.sv-schluss .sv-cta-zeile { color: #d5c2ce; margin-top: 0; }
.sv-person { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius); padding: 20px 22px; display: grid; gap: 4px; }
.sv-person strong { font-size: 19px; }
.sv-person span { color: #d5c2ce; font-size: 16px; }
.sv-person a { color: #fff; font-size: 17px; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }

/* Scroll-Reveal */
.sv-main .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.sv-main .reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }

/* ── Breakpoints ── */
@media (max-width: 1100px) {
  .sv-app-raster { grid-template-columns: minmax(0, 1fr) 280px; }
  .sv-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-schluss-in { grid-template-columns: minmax(0, 1fr); }
}
/* Im Ergebnis braucht der Vergleich die volle Breite */
.sv-app[data-schritt="ergebnis"] .sv-app-raster { grid-template-columns: minmax(0, 1fr); }
.sv-app[data-schritt="ergebnis"] .sv-seite { display: none; }

@media (max-width: 960px) {
  .sv-hero-in { grid-template-columns: minmax(0, 1fr); }
  .sv-drei { grid-template-columns: minmax(0, 1fr); }
  .sv-bsp { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; }
  .sv-bsp-balken { grid-column: 1 / -1; order: 3; }
  .sv-bsp-summe { order: 4; grid-column: 1 / -1; text-align: left; }
  .sv-kosten-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .sv-kosten-balken { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 900px) {
  .sv-app-raster { grid-template-columns: minmax(0, 1fr); }
  .sv-seite { display: none; }
  .sv-zaehler-mobil { display: inline-flex; justify-self: end; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); white-space: nowrap; }
  .sv-zaehler-mobil b { font-family: var(--schrift-titel); font-size: 18px; font-weight: 700; color: var(--lila-tief); font-variant-numeric: tabular-nums; display: inline-block; }
  .sv-zaehler-mobil b.tick { animation: sv-tick .5s var(--ease); }
  .sv-zaehler-mobil .sv-minus { position: static; margin: 0; padding: 1px 7px; font-size: 13px; }
  .sv-app[data-schritt="ergebnis"] .sv-zaehler-mobil { display: none; }
  .sv-top2 { grid-template-columns: minmax(0, 1fr); }
  .sv-kacheln { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-left: -4px; padding-left: 4px; }
  .sv-kachel { scroll-snap-align: start; }
}
@media (max-width: 720px) {
  .sv-main { font-size: 17px; }
  .sv-app-kopf { padding: 8px 12px 10px; }
  .sv-app-mitte { padding: 16px; }
  .sv-app-fuss { padding: 8px 12px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .sv-fort-schritte { display: flex; justify-content: space-around; font-size: 12px; }
  .sv-fort-schritte li { flex: 1 1 auto; padding: 0 2px; overflow: visible; }
  .sv-fort-text { visibility: hidden; }
  .sv-fort-schritte .lang { display: none; }
  .sv-fort-schritte .kurz { display: inline; }
  .sv-fort-balken { height: 30px; }
  .sv-fort-prozent b { font-size: 18px; }
  .sv-fort-prozent, .sv-fort-text { font-size: 13.5px; }
  .sv-hilfe { line-height: 1.5; }
  .sv-fuss-info { display: none; }
  .sv-app-fuss .sv-btn { min-width: 0; flex: 1; white-space: nowrap; padding: 14px 18px; font-size: 17px; }
  .sv-zurueck { padding: 12px 10px 12px 6px; }
  .sv-frage { font-size: 25px; }
  .sv-hilfe { font-size: 16.5px; }
  .sv-wahlen { margin-top: 20px; gap: 12px; }
  .sv-wahl { padding: 14px; gap: 14px; min-height: 0; }
  .sv-wahl-symbol { width: 46px; height: 46px; border-radius: 12px; }
  .sv-wahl-symbol svg { width: 28px; height: 28px; }
  .sv-wahl-text strong { font-size: 19px; }
  .sv-wahl-text small { font-size: 15.5px; }
  .sv-wahl-punkt { width: 24px; height: 24px; }
  .sv-datum { gap: 10px; }
  .sv-datum-feld input { width: 78px; height: 64px; font-size: 26px; }
  .sv-datum-jahr input { width: 116px; }
  .sv-summe { padding: 18px 14px; }
  .sv-skala span { font-size: 13px; }
  .sv-skala span.mobil-aus { display: none; }
  .sv-schnell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-buehne { height: 200px; }
  .sv-erg-kopf { align-items: flex-start; }
  .sv-zwei, .sv-vier { grid-template-columns: minmax(0, 1fr); }
  .sv-gewichte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-ablaufschritte { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sv-ablaufschritte::before, .sv-ablaufschritte::after { left: 27px; right: auto; width: 3px; top: 28px; bottom: 28px; height: auto; transform-origin: center top; }
  .sv-ablaufschritte::after { transform: scaleY(0); }
  .sv-zeigen .sv-ablaufschritte::after { transform: scaleY(1); }
  .sv-ablaufschritte li { text-align: left; padding-left: 74px; min-height: 56px; }
  .sv-ablaufschritte b { position: absolute; left: 0; top: 0; margin: 0; }
  .sv-ablaufschritte strong { margin-top: 2px; }
  .sv-tabelle thead { display: none; }
  .sv-tabelle tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 14px 0; border-bottom: 1px solid var(--linie-2); }
  .sv-tabelle td { border: 0; padding: 0; }
  .sv-tabelle td:first-child, .sv-tabelle td:last-child { grid-column: 1 / -1; }
  .sv-tabelle td.zahl { text-align: left; white-space: normal; }
  .sv-tabelle td[data-l]::before { content: attr(data-l); display: block; font-size: 13px; font-weight: 500; color: var(--text-3); }
  .sv-tabelle tr.markiert { background: var(--lila-zart); border-radius: 12px; padding: 14px 10px; }
  .sv-tabelle tr.markiert td { background: none; }
  .sv-btn { white-space: normal; text-align: center; }
  .sv-hero .sv-btn { width: 100%; }
  .sv-hero .sv-cta { align-items: stretch; }
}

@media (max-width: 420px) {
  .sv-wahl-symbol { display: none; }
  .sv-wahl-text small { font-size: 15px; }
  .sv-frage { font-size: 23px; }
}

/* Handy: jede Frage passt ohne Scrollen in den Rechner */
@media (max-width: 720px) {
  .sv-app-mitte { padding: 14px; }
  .sv-frage { font-size: 22px; line-height: 1.18; }
  .sv-hilfe { margin-top: 6px; font-size: 15px; line-height: 1.45; }
  .sv-wahlen { margin-top: 14px; gap: 10px; }
  .sv-wahl { padding: 12px 14px; border-radius: 14px; }
  .sv-wahl-text strong { font-size: 18px; }
  .sv-wahl-text small { margin-top: 2px; font-size: 14.5px; line-height: 1.4; }
  .sv-datum { margin-top: 16px; }
  .sv-datum-feld { gap: 6px; font-size: 15px; }
  .sv-datum-feld input { height: 60px; font-size: 24px; }
  .sv-alter { margin-top: 12px; font-size: 16px; padding: 8px 14px; }
  .sv-summe { margin-top: 14px; padding: 14px 12px 12px; }
  .sv-summe-wert { font-size: 40px; }
  .sv-regler { margin-top: 6px; }
  .sv-skala { height: 30px; }
  .sv-schnell { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
  .sv-schnell button { min-height: 44px; font-size: 14.5px; padding: 0 2px; border-radius: 10px; white-space: nowrap; letter-spacing: -.01em; }
  .sv-summe-info { margin-top: 10px; padding: 10px 12px; }
  .sv-summe-info p { font-size: 15px; }
  .sv-buehne { height: 150px; margin-bottom: 4px; }
  .sv-buehne-ring { width: 104px; height: 104px; }
  .sv-pruefen .sv-frage { font-size: 21px; }
  .sv-pruefliste { margin-top: 12px; gap: 6px; }
  .sv-pruefliste li { padding: 7px 12px 7px 44px; font-size: 15px; }
  .sv-pruefliste li::before { left: 12px; width: 22px; height: 22px; margin-top: -11px; }
  .sv-hinweis { margin-top: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.45; }
  .sv-buehne { height: 130px; }
  .sv-app { min-height: 440px; }
  .sv-app-kopf { padding: 6px 12px 8px; }
  .sv-fort-zeile { min-height: 24px; }
  .sv-fort-balken { height: 28px; margin-top: 4px; }
  .sv-app-fuss { padding: 6px 12px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .sv-app-fuss .sv-btn { min-height: 46px; padding: 10px 18px; }
  .sv-app-fuss .sv-zurueck { min-height: 44px; }
}
@media (max-width: 400px) {
  .sv-schnell button { font-size: 13.5px; }
}
/* Sehr niedrige Handys: noch etwas enger */
@media (max-width: 720px) and (max-height: 700px) {
  .sv-hilfe { font-size: 14.5px; }
  .sv-wahl-text small { font-size: 14px; }
  .sv-buehne { height: 80px; }
  .sv-app-mitte { padding-top: 10px; padding-bottom: 10px; }
  .sv-pruefliste li { padding-top: 6px; padding-bottom: 6px; }
  .sv-hinweis { font-size: 13.5px; padding: 8px 12px; }
  .sv-skala { height: 28px; }
  .sv-schnell button { min-height: 40px; }
  .sv-summe-info { padding: 8px 12px; }
  .sv-buehne-ring { width: 78px; height: 78px; }
  .sv-summe-wert { font-size: 34px; }
}

/* ── Sparbetrieb und reduzierte Bewegung ── */
html.sparsam *, html.sparsam *::before, html.sparsam *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: auto !important; }
html.sparsam .sv-aura i { animation: none; filter: blur(60px); }
html.sparsam .sv-zeitgrafik { background: #3b2633; }
html.sparsam .sv-karte--empf::before, html.sparsam .sv-fort-balken > i::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .sv-aura i, .sv-karte--empf::before { animation: none !important; }
  .reveal, .sv-auftritt, .sv-merkmale li { opacity: 1 !important; transform: none !important; }
  .zg-linie text, .zg-licht { opacity: 1; }
  .zg-linie path, .zg-gut .zg-haken, .ring-lauf, .ring-haken { stroke-dashoffset: 0 !important; }
  .sv-buehne:not(.fertig) .ring-lauf, .sv-buehne:not(.fertig) .ring-haken { opacity: 0 !important; }
  .zg-linie .zg-ende { transform: scale(1) !important; }
  .zg-licht { display: none; }
  .sv-bsp-balken i { transform: scaleX(var(--w)) !important; }
  .sv-buehne-logos .sv-logo { display: none; }
}