/* ═══════════════════════════════════════════════════════════════════
   STERBEGELD-VERGLEICH · Farben der Trauerhilfe Littig
   Liegt über sterbegeld-vergleich.css. Die Datei darunter bleibt eine
   unveränderte Kopie aus bestattungsverfuegung.de und kann bei jedem
   Update einfach neu übernommen werden.

   Seitenfarbe und Button-Akzente: Hellblau #b7dbf3 statt Pflaume.
   Auf Hellblau ist weiße Schrift unlesbar, deshalb steht darauf überall
   das Littig-Dunkelblau. Wo Schrift, Linien und Symbole vorher Pflaume
   waren, sind sie jetzt dunkel (#b7dbf3 hätte auf Weiß kaum Kontrast).
   Auf den hellblauen Flächen (Einstieg, Beispiel, Abschluss) bekommt der
   Button eine dunkle Füllung, wie überall auf der Website.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --akzent: #b7dbf3;
  --akzent-stark: #8fc3e6;   /* Hover, Ringe und Linien, die auf Weiß sichtbar sein müssen */
  --tinte-text: #17172e;     /* Schrift auf Hellblau */
  --tinte-text-2: #363668;

  --lila: var(--tinte-text);
  --lila-tief: var(--tinte-text);
  --lila-dunkel: var(--tinte-text);
  --lila-weich: var(--akzent-stark);
  --lila-hell: #e4f1fb;
  --lila-zart: #f3f9fd;
  --tinte: var(--akzent);
  --text: #17172e;
  --text-2: #41455f;
  --text-3: #5f6580;
  --linie: #d7e3ee;
  --linie-2: #e7eff6;
  --flaeche: #f3f8fc;
  --schatten: 0 1px 2px rgba(23, 23, 46, .06), 0 8px 28px rgba(23, 23, 46, .08);
  --schatten-hoch: 0 2px 4px rgba(23, 23, 46, .06), 0 20px 50px rgba(23, 23, 46, .16);
  --schrift: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --schrift-titel: "Montserrat", "Inter", -apple-system, sans-serif;
}

/* ── Schaltflächen ── */
.sv-btn-voll {
  color: var(--tinte-text); background: linear-gradient(180deg, #d0e9f9 0%, var(--akzent) 55%, #a6d1ef 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(23, 23, 46, .08), 0 0 0 1px rgba(23, 23, 46, .16), 0 8px 22px rgba(80, 140, 190, .28);
}
.sv-btn-voll::before { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); }
@media (hover: hover) and (pointer: fine) {
  .sv-btn-voll:not([disabled]):hover { background: linear-gradient(180deg, #bfe0f6 0%, var(--akzent-stark) 100%); }
}
@keyframes sv-bereit { 0% { transform: scale(1); } 35% { transform: scale(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 6px rgba(143, 195, 230, .45), 0 10px 26px rgba(80, 140, 190, .35); } 100% { transform: scale(1); } }
/* Auf Hellblau ginge der hellblaue Button unter */
.sv-hero .sv-btn-voll, .sv-schluss .sv-btn-voll {
  color: #fff; background: linear-gradient(180deg, #2c2c55 0%, var(--tinte-text) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 1px rgba(23, 23, 46, .5), 0 8px 22px rgba(23, 23, 46, .28);
}
.sv-hero .sv-btn-voll::before { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); }
.sv-btn-hell { box-shadow: 0 0 0 1px rgba(23, 23, 46, .1), 0 8px 24px rgba(23, 23, 46, .14); }

/* ── Fortschritt: dunkle Schrift auch auf der Füllung ── */
.sv-fort-balken { background: #edf4fa; }
.sv-fort-balken > i { background: linear-gradient(90deg, var(--akzent), var(--akzent-stark)); }
.sv-fort-balken > i::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); }
.sv-fort-schritte li + li { box-shadow: inset 1px 0 0 rgba(23, 23, 46, .1); }
.sv-fort-schritte--hell, .sv-fort-schritte--hell li, .sv-fort-schritte--hell li.jetzt, .sv-fort-schritte--hell li.fertig { color: var(--tinte-text); }
.sv-fort-schritte--hell li + li { box-shadow: inset 1px 0 0 rgba(23, 23, 46, .14); }

/* ── Auswahl ── */
@media (hover: hover) and (pointer: fine) {
  .sv-wahl:hover { box-shadow: 0 8px 24px rgba(23, 23, 46, .1); }
}
.sv-wahl[aria-pressed="true"] { border-color: var(--akzent-stark); box-shadow: 0 0 0 4px rgba(183, 219, 243, .6); }
.sv-wahl[aria-pressed="true"] .sv-wahl-symbol { background: var(--akzent); color: var(--tinte-text); }
.sv-wahl[aria-pressed="true"] .sv-wahl-punkt { border-color: var(--akzent-stark); background: var(--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317172e' 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; }
.sv-datum-feld input:focus { box-shadow: 0 0 0 4px rgba(183, 219, 243, .7); }

/* ── Summe ── */
.sv-summe input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--akzent-stark) var(--fuell, 29%), var(--linie) var(--fuell, 29%)); }
.sv-summe input[type=range]::-moz-range-progress { background: var(--akzent-stark); }
.sv-summe input[type=range]::-webkit-slider-thumb { box-shadow: 0 3px 10px rgba(23, 23, 46, .28); }
.sv-schnell button.an { border-color: var(--akzent-stark); background: var(--akzent); color: var(--tinte-text); }
.sv-zaehler-balken i { background: var(--akzent-stark); }

/* ── Berechnung ── */
.ring-dreh, .ring-lauf { stroke: var(--akzent-stark); }
.sv-pruefliste li.fertig::before { border-color: var(--akzent-stark); background: var(--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317172e' 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; }

/* ── Ergebnis ── */
.sv-karte--empf::before { background: conic-gradient(from 0deg, var(--akzent-stark) 0deg, #e4f1fb 70deg, var(--akzent-stark) 150deg, var(--akzent) 230deg, var(--akzent-stark) 360deg); }
.sv-karte--empf .sv-karte-band { background: linear-gradient(90deg, var(--akzent-stark), var(--akzent)); color: var(--tinte-text); }
.sv-note-kreis .wert { stroke: var(--akzent-stark); }
.sv-merkmale li::before { background: var(--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317172e' 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='%235f6580' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.sv-kachel--empf { border-color: var(--akzent-stark); }
.sv-kachel--empf .sv-kachel-link { background: var(--akzent); color: var(--tinte-text); }
.sv-kachel--empf .sv-kachel-link:hover { background: var(--akzent-stark); }
.sv-kosten-balken i { background: #cfdbe6; }
.sv-kosten-zeile--empf .sv-kosten-balken i { background: linear-gradient(90deg, var(--akzent-stark), var(--akzent)); }
.sv-sortierung button[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent-stark); color: var(--tinte-text); }
.sv-ablaufschritte::after { background: var(--akzent-stark); }
.sv-ablaufschritte b { border-color: var(--akzent-stark); }

/* ── Inhaltsabschnitte ── */
.sv-zusage { border-top-color: var(--akzent); }
.sv-haken li::before { 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='%2317172e' 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; }

/* ── Hellblaue Flächen: Farbwolken ── */
.sv-aura i { mix-blend-mode: normal; opacity: .7; }
.sv-aura i:nth-child(1) { background: #ffffff; }
.sv-aura i:nth-child(2) { background: #8fc3e6; }
.sv-aura i:nth-child(3) { background: #dcedf9; }
.sv-aura--ruhig i { opacity: .5; }

/* ── Einstieg ── */
.sv-hero { color: var(--tinte-text); }
.sv-main .sv-hero h1 { color: var(--tinte-text); }
.sv-hero h1 em { color: var(--tinte-text-2); }
.sv-lead { color: var(--tinte-text-2); }
.sv-eyebrow--hell { color: var(--tinte-text-2); }
.sv-hero .sv-cta-zeile { color: var(--tinte-text-2); }
.sv-logozeile li { box-shadow: 0 1px 2px rgba(23, 23, 46, .06); }

/* Erzählgrafik Zahlungsdauer, jetzt auf Hellblau */
.sv-zeitgrafik { background: rgba(255, 255, 255, .42); border-color: rgba(255, 255, 255, .75); }
.sv-zeitgrafik figcaption { color: var(--tinte-text-2); }
.zg-achse line { stroke: rgba(23, 23, 46, .35); }
.zg-achse .zg-strich { stroke: rgba(23, 23, 46, .14); }
.zg-achse text { fill: var(--tinte-text-2); }
.zg-linie text { fill: var(--tinte-text); }
.zg-linie path { stroke: #5d7ea3; }
.zg-linie .zg-ende { fill: #5d7ea3; }
.zg-gut path { stroke: #1d7a52; }
.zg-gut text { fill: var(--tinte-text); }
.zg-gut .zg-ende { fill: #1d7a52; }
.zg-gut .zg-haken { stroke: #fff; }
.zg-lang path { stroke: #b0741f; }
.zg-satz { color: var(--tinte-text-2); }
.zg-satz strong { color: var(--tinte-text); }
html.sparsam .sv-zeitgrafik { background: rgba(255, 255, 255, .6); }

/* ── Beispiel ── */
.sv-beispiel { color: var(--tinte-text); }
.sv-beispiel figcaption span, .sv-bsp-monat { color: var(--tinte-text-2); }
.sv-bsp-balken { background: rgba(255, 255, 255, .55); }
.sv-bsp-balken i { background: #5d7ea3; }
.sv-bsp-balken--gut i { background: #1d7a52; }
.sv-bsp-balken--lang i { background: #b0741f; }
.sv-bsp-fazit { color: var(--tinte-text); border-top-color: rgba(23, 23, 46, .15); }
.sv-bsp-fazit strong { color: #14563a; }

/* ── Abschluss ── */
.sv-schluss { color: var(--tinte-text); }
.sv-main .sv-schluss h2 { color: var(--tinte-text); }
.sv-schluss p, .sv-schluss .sv-cta-zeile, .sv-person span { color: var(--tinte-text-2); }
.sv-person { background: rgba(255, 255, 255, .45); border-color: rgba(255, 255, 255, .8); }
.sv-person a { color: var(--tinte-text); }