/* rechner.css — Rückkaufswert-Rechner.
   Alles unter #lvr gescoped. Farben und Maße ausschließlich aus tokens.css:
   kein einziger Hex-Wert in dieser Datei. */

#lvr {
  font-family: var(--f-body);
  color: var(--c-marine);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  margin-block-start: var(--s-7);
  letter-spacing: var(--ls-base); }
#lvr *, #lvr *::before, #lvr *::after { box-sizing: border-box; }

#lvr .raster { display: grid; grid-template-columns: minmax(0,21rem) minmax(0,1fr);
  gap: var(--s-6); align-items: start; }
@media (max-width: 60em) { #lvr .raster { grid-template-columns: minmax(0,1fr); } }

/* ---- Eingaben ---- */
#lvr .feld-gruppe { background: var(--c-weiss); border: 1px solid var(--c-linie);
  border-radius: var(--r-md); padding: var(--s-5); }
#lvr .feld-gruppe + .feld-gruppe { margin-block-start: var(--s-4); }
#lvr .feld-gruppe h3 { margin-block-end: var(--s-1); }
#lvr .gruppe-hinweis { font-size: var(--t-sm); letter-spacing: var(--ls-sm);
  color: var(--c-grau); margin: 0 0 var(--s-5);
  line-height: var(--lh-sm); }

#lvr .feld { margin-block-end: var(--s-4); }
#lvr .feld:last-child { margin-block-end: 0; }
#lvr label { display: block; font-size: var(--t-sm); letter-spacing: var(--ls-sm);
  margin-block-end: var(--s-2); font-weight: 500;
  line-height: var(--lh-sm); }
#lvr .unter { display: block; font-size: var(--t-sm); letter-spacing: var(--ls-sm);
  color: var(--c-grau); margin-block-start: var(--s-1); font-weight: 400;
  line-height: var(--lh-sm); }

#lvr .betrag { position: relative; }
#lvr .betrag::after { content: attr(data-einheit); position: absolute;
  inset-inline-end: var(--s-3); inset-block-start: 50%; transform: translateY(-50%);
  font-family: var(--f-mono); font-size: var(--t-sm); color: var(--c-grau);
  pointer-events: none;
  letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }
#lvr input[type=number] { inline-size: 100%; min-block-size: 44px;
  padding: var(--s-2) var(--s-8) var(--s-2) var(--s-3);
  font: inherit; font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  border: 1px solid var(--c-linie); border-radius: var(--r-sm);
  background: var(--c-weiss); color: var(--c-marine); }
#lvr input[type=range] { inline-size: 100%; accent-color: var(--c-marine);
  margin-block-start: var(--s-2); min-block-size: 44px; }
#lvr input:focus-visible { outline: 3px solid var(--c-messing); outline-offset: 2px; }

#lvr .schieber-kopf { display: flex; justify-content: space-between;
  align-items: baseline; gap: var(--s-3); }
#lvr .schieber-wert { font-family: var(--f-mono); font-size: var(--t-lg);
  font-variant-numeric: tabular-nums; color: var(--c-messing);
  letter-spacing: var(--ls-lg); line-height: var(--lh-lg); }

#lvr .haken { display: flex; gap: var(--s-3); align-items: flex-start;
  margin-block-end: var(--s-4); }
#lvr .haken:last-child { margin-block-end: 0; }
#lvr .haken input { margin-block-start: 0.35rem; accent-color: var(--c-marine);
  flex: none; inline-size: 1.1rem; block-size: 1.1rem; }
#lvr .haken label { margin: 0; }

/* ---- Ergebnis ---- */
#lvr .befund { background: var(--c-tresor); color: var(--c-kanzlei);
  border-radius: var(--r-md); padding: var(--s-6); }
#lvr .befund-reihe { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-8); }
#lvr .kennzahl { flex: 1 1 12rem; min-inline-size: 0; }
#lvr .kennzahl .titel { font-size: var(--t-sm); letter-spacing: var(--ls-sm);
  color: var(--c-gold); margin-block-end: var(--s-1);
  line-height: var(--lh-sm); }
#lvr .kennzahl .wert { font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-3xl); letter-spacing: var(--ls-3xl); line-height: var(--lh-3xl); }
#lvr .kennzahl .wert.minus { color: color-mix(in srgb, var(--c-storno) 55%, var(--c-kanzlei)); }
#lvr .kennzahl .fuss { font-size: var(--t-sm); letter-spacing: var(--ls-sm);
  color: color-mix(in srgb, var(--c-kanzlei) 72%, transparent);
  margin-block-start: var(--s-2); line-height: var(--lh-sm); }
/* Gold bleibt Linie, nie Fläche. */
#lvr .befund hr { border: 0; border-block-start: 1px solid var(--c-gold);
  opacity: .5; margin: var(--s-5) 0 var(--s-4); }
#lvr .befund .fazit { margin: 0; max-width: var(--breite-text);
  color: color-mix(in srgb, var(--c-kanzlei) 88%, transparent); }

/* ---- Diagramm ---- */
#lvr .diagramm { background: var(--c-weiss); border: 1px solid var(--c-linie);
  border-radius: var(--r-md); padding: var(--s-5); margin-block-start: var(--s-4); }
#lvr .diagramm h3 { margin-block-end: var(--s-4); }
#lvr svg { inline-size: 100%; block-size: auto; display: block; overflow: visible; }

/* Farben der Kurven kommen aus dem Stylesheet, nicht aus dem Skript.
   Auf hellem Grund ist der Goldton Messing — Gold selbst fällt hier durch AA. */
#lvr .g-gitter { stroke: var(--c-linie); stroke-width: 1; }
/* Einzige harte Schriftgroesse der Seite war hier: 11px statt --t-xs. */
#lvr .g-schrift { font-family: var(--f-mono); font-size: var(--t-xs); fill: var(--c-grau); letter-spacing: var(--ls-xs); line-height: var(--lh-xs); }
#lvr .g-einzahlung { fill: none; stroke: var(--c-grau); stroke-width: 1.5;
  stroke-dasharray: 4 4; opacity: .5; }
#lvr .g-vertrag { fill: none; stroke: var(--c-marine); stroke-width: 2.5; }
#lvr .g-alternativ { fill: none; stroke: var(--c-messing); stroke-width: 2.5; }
#lvr .p-vertrag { fill: var(--c-marine); }
#lvr .p-alternativ { fill: var(--c-messing); }

#lvr .legende { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  margin-block-start: var(--s-4); font-size: var(--t-sm); color: var(--c-grau);
  letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }
#lvr .legende span { display: flex; align-items: center; gap: var(--s-2); }
#lvr .strich { inline-size: 1.5rem; block-size: 2px; flex: none; }
#lvr .strich.vertrag { background: var(--c-marine); }
#lvr .strich.alternativ { background: var(--c-messing); }
#lvr .strich.einzahlung { background: var(--c-grau); opacity: .5; }

/* ---- Tabelle ---- */
#lvr table { inline-size: 100%; border-collapse: collapse;
  margin-block-start: var(--s-5); font-size: var(--t-sm);
  letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }
#lvr th, #lvr td { text-align: end; padding: var(--s-3) var(--s-2);
  border-block-end: 1px solid var(--c-linie);
  font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
#lvr th:first-child, #lvr td:first-child { text-align: start; font-family: var(--f-body); }
#lvr thead th { font-weight: 500; color: var(--c-grau); font-family: var(--f-body);
  border-block-end-color: var(--c-marine); }
#lvr tbody tr:last-child td { border-block-end: 0; }
#lvr td.plus { color: var(--c-geprueft); }
#lvr td.minus { color: var(--c-storno); }

/* ---- Hinweisblock: Kanzlei-Grund, 3px Marine-Balken links.
        Vorgabe aus dem Design-System, Abschnitt 9. ---- */
#lvr .hinweisblock { margin-block-start: var(--s-4); background: var(--c-kanzlei);
  border-inline-start: 3px solid var(--c-marine); padding: var(--s-5) var(--s-5) var(--s-5) var(--s-5); }

#lvr .hinweisblock ul { margin: 0; padding-inline-start: var(--s-5); }
#lvr .hinweisblock li { margin-block-end: var(--s-3); line-height: var(--lh-base); }
#lvr .hinweisblock li:last-child { margin-block-end: 0; }

/* ---- Abschluss ---- */
/* Gleiche Karte wie "Kapital neu strukturieren" in Sektion 05: weisse
   Flaeche ueber die volle Breite, mit derselben Lichtreaktion. */
#lvr .abschluss { margin-block-start: var(--s-5);
  background: var(--bg-karte); border: 1px solid var(--c-linie);
  border-radius: var(--r-md); padding: var(--s-6); display: flex; flex-wrap: wrap;
  gap: var(--s-5); align-items: center; justify-content: space-between; }
#lvr .abschluss p { font-size: var(--t-base); max-width: 46ch; letter-spacing: var(--ls-base); line-height: var(--lh-base); }
#lvr .abschluss p { margin: 0; max-width: 40ch; }
/* Die Schaltflaeche hier war eine wortgleiche Kopie von .btn unter eigenem
   Namen. Sie traegt jetzt die Klasse und damit auch den Zeigerschein. */

#lvr .rechtlich { margin-block-start: var(--s-5); font-size: var(--t-xs);
  letter-spacing: var(--ls-xs); line-height: var(--lh-xs); color: var(--c-grau);
  max-width: 78ch; }
#lvr .achtung { color: var(--c-storno); font-size: var(--t-sm); margin-block-start: var(--s-3); letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }


/* ---- Der Befund-Kasten bekommt dieselbe zeigergefuehrte Lichtkante wie
        die dunklen Sektionen. Korn und Licht kommen aus varianten.css. ---- */
#lvr .befund { --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden; }
#lvr .befund > .korn, #lvr .befund > .licht { position: absolute; inset: 0; }
#lvr .befund > *:not(.korn):not(.licht) { position: relative; z-index: 2; }
#lvr .befund::after { content: ""; position: absolute; z-index: 3;
  inset-inline: 0; inset-block-end: 0; block-size: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--c-gold) 30%, transparent) calc(var(--mx) - 24%),
    var(--c-gold) var(--mx),
    color-mix(in srgb, var(--c-gold) 30%, transparent) calc(var(--mx) + 24%),
    transparent 100%); }

/* Die Tabelle hat vier Spalten mit Betraegen und laesst sich nicht unter ihre
   Mindestbreite stauchen — auf dem iPhone waren das rund 456 px bei 390 px
   Sichtfeld. Sie scrollt jetzt in ihrem eigenen Rahmen, statt die ganze Seite
   seitlich verschiebbar zu machen. */
#lvr .tabelle-rahmen { overflow-x: auto; margin-block-start: var(--s-5);
  -webkit-overflow-scrolling: touch; }
#lvr .tabelle-rahmen table { margin-block-start: 0; min-inline-size: 26rem; }