/* Rechner-Kit: Seitenkopf, Eingaben, Ergebnis und Charts der neuen Rechnerseiten. */
.cvr-seite{ max-width:1320px; margin:0 auto; padding:calc(var(--kopf-h, 133px) + 48px) 32px 0; color:#150C2C; }
.cvr-kopf{ text-align:center; max-width:1120px; margin:0 auto 40px; }
.cvr-kopf h1{ font-size:clamp(30px,3.6vw,46px); line-height:1.18; font-weight:800; color:#150C2C; margin:0; }
.cvr-kopf p{ font-size:18px; line-height:1.6; color:#5C5570; margin:18px auto 0; max-width:640px; }

.cvr, .cvr *, .cvr *::before, .cvr *::after{ box-sizing:border-box; }
.cvr{ display:grid; grid-template-columns:380px minmax(0,1fr); gap:24px; align-items:start; font-size:15px; line-height:1.5; }

/* Eingaben */
.cvr-eingaben{ background:#EAF6FF; border-radius:28px; padding:28px 26px 30px; position:sticky; top:calc(var(--kopf-h, 135px) + 16px); max-height:calc(100vh - var(--kopf-h, 135px) - 32px); overflow-y:auto; scrollbar-width:none; }
.cvr-eingaben::-webkit-scrollbar{ display:none; }
.cvr-gruppe + .cvr-gruppe{ margin-top:26px; padding-top:24px; border-top:1px solid #D3E6F6; }
.cvr-gruppe-titel{ font-size:15px; font-weight:800; margin:0 0 16px; color:#150C2C; }
.cvr-feld + .cvr-feld{ margin-top:18px; }
.cvr-feld-kopf{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:34px; }
.cvr-label{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:#150C2C; min-width:0; }
.cvr-info{ flex:none; width:18px; height:18px; padding:0; border:0; background:none; color:#7D93A8; cursor:help; line-height:0; border-radius:50%; }
.cvr-info:hover, .cvr-info:focus-visible{ color:#2C7BC0; }
.cvr-info:focus-visible{ outline:2px solid #2C7BC0; outline-offset:2px; }

.cvr-wert{ display:flex; align-items:baseline; gap:4px; flex:none; background:#fff; border-radius:10px; padding:5px 10px; border:1.5px solid transparent; transition:border-color .15s; }
.cvr-wert:focus-within{ border-color:#2C7BC0; }
.cvr-wert input{ width:66px; border:0; background:none; padding:0; margin:0; font:inherit; font-size:14px; font-weight:700; color:#150C2C; text-align:right; font-variant-numeric:tabular-nums; outline:none; -moz-appearance:textfield; appearance:textfield; }
.cvr-wert input::-webkit-outer-spin-button, .cvr-wert input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cvr-wert span{ font-size:13px; color:#5C5570; }

.cvr-regler{ -webkit-appearance:none; appearance:none; display:block; width:100%; height:22px; margin:6px 0 0; padding:0; background:none; cursor:pointer; --p:50%; }
.cvr-regler::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:linear-gradient(to right,#2C7BC0 var(--p),#C8DFF2 var(--p)); }
.cvr-regler::-moz-range-track{ height:6px; border-radius:3px; background:#C8DFF2; }
.cvr-regler::-moz-range-progress{ height:6px; border-radius:3px; background:#2C7BC0; }
.cvr-regler::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; margin-top:-8px; border-radius:50%; background:#fff; border:5px solid #2C7BC0; transition:transform .12s; }
.cvr-regler::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:#fff; border:5px solid #2C7BC0; }
.cvr-regler:hover::-webkit-slider-thumb, .cvr-regler:focus-visible::-webkit-slider-thumb{ transform:scale(1.15); }
.cvr-regler:focus-visible{ outline:none; }

.cvr-stepper{ display:flex; align-items:center; gap:2px; background:#fff; border-radius:10px; padding:3px; flex:none; }
.cvr-stepper button{ width:30px; height:28px; border:0; border-radius:8px; background:none; color:#2C7BC0; font-size:18px; font-weight:600; line-height:1; cursor:pointer; padding:0; }
.cvr-stepper button:hover{ background:#EAF6FF; }
.cvr-stepper button:disabled{ color:#B9C7D4; cursor:default; background:none; }
.cvr-stepper output{ width:26px; text-align:center; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }

.cvr-wahl{ display:flex; gap:2px; background:#fff; border-radius:10px; padding:3px; flex:none; }
.cvr-wahl button{ border:0; background:none; border-radius:8px; padding:5px 11px; font:inherit; font-size:13px; font-weight:600; color:#5C5570; cursor:pointer; transition:background .15s,color .15s; }
.cvr-wahl button:hover{ color:#150C2C; }
.cvr-wahl button[aria-pressed="true"]{ background:#150C2C; color:#fff; }

/* Ergebnis */
.cvr-ergebnis{ display:grid; gap:24px; min-width:0; }
.cvr-fazit{ background:#150C2C; color:#fff; border-radius:28px; padding:32px 34px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 40px; align-items:end; }
.cvr-fazit-text{ font-size:16px; font-weight:600; margin:0 0 8px; color:#D8D3E8; }
.cvr-fazit-zahl{ font-size:clamp(38px,5vw,60px); line-height:1.05; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.cvr-fazit-unter{ font-size:13px; color:#A8A1BF; margin-top:8px; }
.cvr-kpis{ display:grid; gap:14px; min-width:220px; }
.cvr-kpi{ display:grid; grid-template-columns:18px 1fr; column-gap:10px; align-items:center; }
.cvr-kpi i{ display:block; width:18px; height:3px; border-radius:2px; }
.cvr-kpi span{ font-size:13px; color:#C6BEDE; }
.cvr-kpi b{ grid-column:2; font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.2; }

.cvr-karte{ background:#fff; border:1px solid #E3EDF6; border-radius:24px; padding:26px 28px; min-width:0; }
.cvr-h{ font-size:20px; line-height:1.3; font-weight:800; color:#150C2C; margin:0; }
.cvr-unter{ font-size:14px; color:#5C5570; margin:4px 0 0; }
.cvr-zwei{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.cvr-zwei > .cvr-karte{ display:flex; flex-direction:column; }
.cvr-zwei > .cvr-karte > .cvr-chart{ flex:1; }
.cvr-zwei > .cvr-karte > .cvr-aufstellung{ flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.cvr-zwei > .cvr-karte > .cvr-chart > .cvr-ring{ height:100%; align-content:center; }
.cvr-trenner{ height:1px; margin:88px auto 0; background:linear-gradient(90deg,rgba(21,12,44,0),rgba(21,12,44,.16) 22%,rgba(21,12,44,.16) 78%,rgba(21,12,44,0)); }
.cvr-live{ display:none; }
.cvr-hinweis{ font-size:12.5px; line-height:1.5; color:#7A7488; margin:0; padding:0 4px; }

/* Charts */
.cvr-legende{ display:flex; flex-wrap:nowrap; white-space:nowrap; gap:6px 16px; margin:14px 0 6px; font-size:13px; color:#5C5570; }
.cvr-legende span{ display:inline-flex; align-items:center; gap:7px; }
.cvr-legende i{ display:block; width:18px; height:3px; border-radius:2px; }
.cvr-legende i.fl{ width:11px; height:11px; border-radius:3px; }
.cvr-chart{ position:relative; margin-top:8px; outline:none; touch-action:pan-y; }
.cvr-chart:focus-visible{ outline:2px solid #2C7BC0; outline-offset:4px; border-radius:8px; }
.cvr-chart svg{ display:block; width:100%; overflow:visible; }
.cvr-achse{ font-size:12px; fill:#7A7488; font-variant-numeric:tabular-nums; }
.cvr-endname{ font-size:12px; fill:#5C5570; }
.cvr-endwert{ font-size:14px; font-weight:800; fill:#150C2C; font-variant-numeric:tabular-nums; }

.cvr-tip{ position:absolute; z-index:5; pointer-events:none; background:#150C2C; color:#fff; border-radius:12px; padding:10px 13px; font-size:13px; line-height:1.4; min-width:150px; opacity:0; transition:opacity .12s; white-space:nowrap; }
.cvr-tip.an{ opacity:1; }
.cvr-tip-kopf{ color:#C6BEDE; font-size:12px; margin-bottom:5px; }
.cvr-tip-zeile{ display:grid; grid-template-columns:14px auto; column-gap:8px; align-items:center; }
.cvr-tip-zeile + .cvr-tip-zeile{ margin-top:4px; }
.cvr-tip-zeile i{ display:block; width:14px; height:3px; border-radius:2px; }
.cvr-tip-zeile b{ font-weight:800; font-variant-numeric:tabular-nums; }
.cvr-tip-zeile span{ grid-column:2; color:#C6BEDE; font-size:12px; }

.cvr-hint{ position:fixed; z-index:9999; max-width:260px; background:#150C2C; color:#fff; border-radius:12px; padding:10px 13px; font-size:13px; line-height:1.45; pointer-events:none; opacity:0; transition:opacity .12s; }
.cvr-hint.an{ opacity:1; }

.cvr-staebe{ display:grid; gap:20px; margin-top:16px; height:calc(100% - 16px); align-content:space-between; }
.cvr-stab-kopf{ display:flex; justify-content:space-between; gap:12px; font-size:13px; font-weight:600; margin-bottom:6px; }
.cvr-stab-kopf b{ font-weight:800; font-variant-numeric:tabular-nums; }
.cvr-stab{ display:flex; gap:2px; height:30px; }
.cvr-seg{ min-width:3px; height:100%; transition:opacity .15s; cursor:default; outline:none; }
.cvr-seg:first-child{ border-radius:6px 0 0 6px; }
.cvr-seg:last-child{ border-radius:0 6px 6px 0; }
.cvr-seg:only-child{ border-radius:6px; }
.cvr-staebe.hover .cvr-seg:not(.an){ opacity:.4; }
.cvr-stab-teile{ display:flex; flex-wrap:nowrap; gap:14px; margin-top:8px; font-size:12px; line-height:1.35; color:#5C5570; }
.cvr-stab-teile span{ display:grid; grid-template-columns:9px auto; column-gap:6px; align-items:center; white-space:nowrap; }
.cvr-stab-teile i{ display:block; width:9px; height:9px; border-radius:3px; }
.cvr-stab-teile b{ grid-column:2; color:#150C2C; font-weight:700; font-variant-numeric:tabular-nums; }

/* Ring */
.cvr-ring{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:center; margin-top:14px; }
.cvr-ring-kreis{ position:relative; width:170px; height:170px; }
.cvr-ring-kreis svg{ display:block; width:170px; height:170px; transform:rotate(-90deg); }
.cvr-ring-kreis circle{ transition:opacity .15s; cursor:default; outline:none; }
.cvr-ring.hover circle.teil:not(.an){ opacity:.35; }
.cvr-ring-mitte{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; padding:0 30px; }
.cvr-ring-mitte b{ font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.15; }
.cvr-ring-mitte span{ font-size:11.5px; color:#5C5570; margin-top:2px; }
.cvr-ring-liste{ display:grid; gap:9px; font-size:13.5px; min-width:0; white-space:nowrap; }
.cvr-zwei .cvr-ring{ grid-template-columns:minmax(0,1fr); justify-items:center; }
.cvr-zwei .cvr-ring-liste{ width:100%; }
.cvr-ring-liste div{ display:grid; grid-template-columns:11px minmax(0,1fr) auto; gap:8px; align-items:center; }
.cvr-ring-liste i{ width:11px; height:11px; border-radius:3px; }
.cvr-ring-liste b{ font-weight:700; font-variant-numeric:tabular-nums; }

/* Aufstellung */
.cvr-aufstellung{ margin-top:12px; font-size:14px; }
.cvr-aufstellung div{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid #EEF3F8; }
.cvr-aufstellung div:last-child{ border-bottom:0; }
.cvr-aufstellung b{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cvr-aufstellung .summe{ font-weight:800; color:#150C2C; border-top:1px solid #CBD8E4; }
.cvr-aufstellung .summe b{ font-weight:800; }
.cvr-aufstellung span{ color:#5C5570; }
.cvr-aufstellung .summe span{ color:#150C2C; }

/* Felder mit Auswahl und Datum */
.cvr-feld[hidden]{ display:none; }
.cvr-feld-kopf.quer{ display:block; }
.cvr-feld-kopf.quer .cvr-label{ margin-bottom:6px; }
.cvr-select, .cvr-datum{ width:100%; border:1.5px solid transparent; border-radius:10px; background-color:#fff; padding:8px 12px; font:inherit; font-size:14px; font-weight:600; color:#150C2C; outline:none; }
.cvr-select{ -webkit-appearance:none; appearance:none; padding-right:34px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232C7BC0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
.cvr-select:focus, .cvr-datum:focus{ border-color:#2C7BC0; }
.cvr-seg:focus-visible{ box-shadow:inset 0 0 0 2px #150C2C; }

/* Tabelle im Rechner */
.cvr-tabelle-rahmen{ overflow-x:auto; margin-top:12px; scrollbar-width:none; }
.cvr-tabelle-rahmen::-webkit-scrollbar{ display:none; }
.cvr-tabelle{ width:100%; border-collapse:collapse; font-size:14px; }
.cvr-tabelle th, .cvr-tabelle td{ padding:11px 0 11px 16px; text-align:right; border-bottom:1px solid #EEF3F8; font-variant-numeric:tabular-nums; white-space:nowrap; background:none; }
.cvr-tabelle th{ font-size:13px; font-weight:700; color:#7A7488; }
.cvr-tabelle th:first-child, .cvr-tabelle td:first-child{ text-align:left; padding-left:0; }
.cvr-tabelle td:first-child{ font-weight:600; color:#150C2C; white-space:normal; }
.cvr-tabelle td{ color:#5C5570; }
.cvr-tabelle tbody tr:last-child td{ border-bottom:0; font-weight:800; color:#150C2C; }

.cvr-mehr{ margin-top:14px; }
.cvr-mehr summary{ cursor:pointer; font-size:14px; font-weight:700; color:#2C7BC0; list-style:none; display:inline-flex; align-items:center; gap:6px; }
.cvr-mehr summary::-webkit-details-marker{ display:none; }
.cvr-mehr summary svg{ transition:transform .15s; }
.cvr-mehr[open] summary svg{ transform:rotate(90deg); }
.cvr-mehr .cvr-tabelle tbody tr:last-child td{ font-weight:400; color:#5C5570; }
.cvr-mehr .cvr-tabelle tbody tr:last-child td:first-child{ font-weight:600; color:#150C2C; }
.cvr-mehr-rahmen{ max-height:320px; overflow:auto; margin-top:8px; scrollbar-width:thin; }

@media (max-width:1120px){
  .cvr{ grid-template-columns:320px minmax(0,1fr); }
  .cvr-zwei{ grid-template-columns:minmax(0,1fr); }
  .cvr-fazit{ grid-template-columns:minmax(0,1fr); }
  .cvr-kpis{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .cvr-seite{ padding:calc(var(--kopf-h, 133px) + 28px) 16px 0; }
  .cvr-kopf{ margin-bottom:26px; }
  .cvr-kopf p{ font-size:16px; }
  .cvr{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .cvr-trenner{ margin-top:56px; }
  .cvr-legende{ font-size:12px; gap:6px 12px; }
  .cvr-stab-teile{ gap:12px; font-size:11.5px; }
  .cvr-live{ display:block; position:sticky; top:calc(var(--kopf-h, 135px) + 8px); z-index:3; background:#150C2C; color:#fff; border-radius:12px; padding:10px 14px; font-size:14px; font-weight:700; line-height:1.35; margin:0 0 18px; font-variant-numeric:tabular-nums; }
  .cvr-live:empty{ display:none; }
  .cvr-wert input, .cvr-select, .cvr-datum{ font-size:16px; }
  .cvr-wert input{ width:74px; }
  .cvr-regler{ touch-action:pan-y; height:28px; }
  .cvr-ring{ grid-template-columns:minmax(0,1fr); justify-items:center; }
  .cvr-ring-liste{ width:100%; }
  .cvr-eingaben{ position:static; overflow:visible; max-height:none; border-radius:22px; padding:22px 18px 24px; }
  .cvr-ergebnis{ gap:16px; }
  .cvr-zwei{ gap:16px; }
  .cvr-fazit{ border-radius:22px; padding:24px 20px; }
  .cvr-karte{ border-radius:20px; padding:20px 18px; }
  .cvr-kpi b{ font-size:18px; }
  .cvr-tip{ font-size:12.5px; min-width:130px; }
}

/* Lange Feldnamen brechen um, statt vom Wertfeld verdeckt zu werden */
.cvr-label{ flex:1 1 0; }
.cvr-label > span{ min-width:0; overflow-wrap:anywhere; hyphens:auto; }

/* Tabellen auf dem Handy ohne Anschnitt: Köpfe dürfen umbrechen, Zellen rücken enger */
@media (max-width:640px){
  .cvr-tabelle{ font-size:12.5px; }
  .cvr-tabelle th, .cvr-tabelle td{ padding:10px 0 10px 10px; }
  .cvr-tabelle th{ font-size:12px; white-space:normal; line-height:1.25; vertical-align:bottom; }
}

/* Lange Eingabespalten laufen ganz durch, die Ergebnisse bleiben beim Ausfüllen stehen */
@media (min-width:861px){
  .cvr-lang .cvr-eingaben{ max-height:none; overflow:visible; top:var(--cvr-oben, 16px); }
  .cvr-lang .cvr-ergebnis{ position:sticky; top:calc(var(--kopf-h, 135px) + 16px); }
}

/* Feldnamen nie mitten im Wort trennen: reicht der Platz nicht, rutscht der Wert in die nächste Zeile */
.cvr-feld-kopf{ flex-wrap:wrap; }
.cvr-label, .cvr-label *{ overflow-wrap:normal; word-break:normal; hyphens:manual; }
.cvr-label{ flex:1 1 0; min-width:min-content; }
.cvr-wert{ margin-left:auto; }
@media (max-width:1120px){
  .cvr-wert input{ width:52px; }
}
.cvr-label > span{ overflow-wrap:normal !important; word-break:normal !important; hyphens:manual !important; -webkit-hyphens:manual !important; }
@media (min-width:861px) and (max-width:1120px){
  .cvr-eingaben{ padding:26px 20px 28px; }
}

/* Rechnername als Marke über der H1 */
.cvr-kopf .cv-marke{ margin-bottom:18px; }