/* ═══════════════════════════════════════════════════════════════════
   STERBEGELD-VERGLEICH · Farben und Schrift von Ruhrfrieden
   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.

   Pflaume #704861 wird überall zu Petrol #004a51, der einzigen
   Akzentfarbe von ruhrfrieden.de (Werte aus base.css :root): Buttons,
   Auswahl, Regler, Fortschritt und die farbigen Flächen (Einstieg,
   Beispiel, Abschluss). Schrift ist wie auf der ganzen Seite nur
   Montserrat. Grün und Ocker bleiben als Bedeutungsfarben im Diagramm
   (früh fertig / lange Zahlung), sie sind keine zweite Akzentfarbe.
   ═══════════════════════════════════════════════════════════════════ */

/* Der Rechner nutzt Schnitt 700, Ruhrfrieden lädt nur bis 600.
   700 zeigt deshalb auf die 600er-Datei statt auf künstlich fett. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-600.woff2') format('woff2');
}

:root {
  --lila: var(--petrol, #004a51);
  --lila-tief: var(--petrol-deep, #00343a);
  --lila-dunkel: var(--petrol-deep, #00343a);
  --lila-weich: var(--petrol-mid, #4d878c);
  --lila-hell: var(--petrol-soft, #e3eded);
  --lila-zart: var(--petrol-tint, #f1f7f7);
  --tinte: var(--petrol, #004a51);          /* Fläche von Einstieg, Beispiel, Abschluss */
  --text: var(--ink, #17201f);
  --text-2: #46524f;
  --text-3: var(--muted, #5d6a68);
  --linie: #d7e3e3;
  --linie-2: var(--bg-2, #e7eeee);
  --flaeche: var(--bg, #f2f6f6);
  --schatten: 0 1px 2px rgba(13, 22, 21, .05), 0 8px 28px rgba(13, 22, 21, .07);
  --schatten-hoch: 0 2px 4px rgba(13, 22, 21, .05), 0 20px 50px rgba(13, 22, 21, .14);
  --schrift: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-titel: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Schaltflächen: wie .btn-primary und .btn-white der Website ── */
.sv-btn { font-weight: 500; letter-spacing: .015em; }
.sv-btn-voll {
  background: linear-gradient(180deg, var(--petrol-hover, #016670) 0%, var(--petrol, #004a51) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(0, 28, 31, .38),
    0 0 0 1px rgba(0, 52, 58, .5),
    0 8px 22px -6px rgba(0, 74, 81, .5);
}
@media (hover: hover) and (pointer: fine) {
  .sv-btn-voll:not([disabled]):not([aria-disabled="true"]):hover {
    background: linear-gradient(180deg, #01767f 0%, #015a62 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .26),
      inset 0 -1px 0 rgba(0, 28, 31, .32),
      0 0 0 1px rgba(0, 52, 58, .44),
      0 14px 32px -8px rgba(0, 74, 81, .58);
  }
}
@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(0, 74, 81, .18), 0 10px 26px rgba(0, 74, 81, .35); } 100% { transform: scale(1); } }

/* Auf der Petrol-Fläche ginge der Petrol-Button unter: dort weiß */
.sv-hero .sv-btn-voll, .sv-btn-hell {
  color: var(--petrol, #004a51); font-weight: 600;
  background: linear-gradient(180deg, #fff 0%, #eef4f4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 74, 81, .12),
    0 0 0 1px rgba(0, 24, 26, .12),
    0 8px 24px -8px rgba(0, 20, 22, .45);
}
.sv-hero .sv-btn-voll::before { background: linear-gradient(105deg, transparent 30%, rgba(0, 74, 81, .12) 50%, transparent 70%); }
@media (hover: hover) and (pointer: fine) {
  .sv-hero .sv-btn-voll:not([disabled]):hover, .sv-btn-hell:hover { background: #fff; }
}

/* ── Fortschritt, Auswahl, Datum, Regler ── */
.sv-fort-schritte li + li { box-shadow: inset 1px 0 0 rgba(0, 74, 81, .14); }
@media (hover: hover) and (pointer: fine) {
  .sv-wahl:hover { box-shadow: 0 8px 24px rgba(0, 74, 81, .12); }
}
.sv-wahl[aria-pressed="true"] { box-shadow: 0 0 0 4px rgba(0, 74, 81, .14); }
.sv-datum-feld input:focus { box-shadow: 0 0 0 4px rgba(0, 74, 81, .16); }
.sv-summe input[type=range]::-webkit-slider-thumb { box-shadow: 0 3px 10px rgba(0, 52, 58, .28); }

/* ── Ergebnis: drehender Rand der Empfehlung ── */
.sv-karte--empf::before { background: conic-gradient(from 0deg, var(--lila) 0deg, #e3eded 70deg, var(--lila) 150deg, #4d878c 230deg, var(--lila) 360deg); }

/* ── Petrol-Flächen: Farbwolken wie .mesh der Website ── */
.sv-aura i:nth-child(1) { background: #056d75; }
.sv-aura i:nth-child(2) { background: #01353a; }
.sv-aura i:nth-child(3) { background: #04565c; }

/* ── Schrift auf Petrol: Weiß in Abstufungen statt Pflaume-Hell ── */
.sv-eyebrow--hell { color: rgba(255, 255, 255, .74); }
.sv-main .sv-hero h1 { font-weight: 300; }
.sv-hero h1 em { font-family: var(--schrift-titel); font-style: normal; font-weight: 300; color: rgba(255, 255, 255, .78); }
.sv-lead { color: rgba(255, 255, 255, .84); }
.sv-hero .sv-cta-zeile { color: rgba(255, 255, 255, .7); }

.sv-zeitgrafik figcaption { color: rgba(255, 255, 255, .74); }
.zg-achse text { fill: rgba(255, 255, 255, .7); }
.zg-linie text { fill: rgba(255, 255, 255, .94); }
/* Nur die neutralen Linien: Grün (bis 65) und Ocker (lebenslang) bleiben */
.zg-linie:not(.zg-gut):not(.zg-lang) path { stroke: #8fbcbf; }
.zg-linie:not(.zg-gut):not(.zg-lang) .zg-ende { fill: #8fbcbf; }
.zg-satz { color: rgba(255, 255, 255, .84); }
html.sparsam .sv-zeitgrafik { background: #00343a; }

.sv-beispiel figcaption span, .sv-bsp-monat { color: rgba(255, 255, 255, .7); }
.sv-bsp-balken:not(.sv-bsp-balken--gut):not(.sv-bsp-balken--lang) i { background: #8fbcbf; }

.sv-main .sv-schluss h2 { font-weight: 400; }
.sv-schluss p { color: rgba(255, 255, 255, .84); }
.sv-schluss .sv-cta-zeile, .sv-person span { color: rgba(255, 255, 255, .7); }

/* ── Überschriften: Montserrat leichter, wie auf der Website ── */
.sv-kopfzeile h2 { font-weight: 400; }