/* Immobilienrechner V10 (31.10.2026, F-WEB-33): Einfach/Experte, Regler, SVG-Diagramme.
 * Nur Markenvariablen der Seite (--brand, --paper, --ink, --line, --plus, --minus …), keine neuen Farbwerte.
 * Pillen-Umschalter angelehnt an .reiter9 aus /assets/fg-premium.v2.css, hier für hellen Grund. */


/* Umschalter Einfach / Experte */
.modus2{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);margin:22px 0 6px}
.modus2 button{appearance:none;border:0;background:transparent;color:var(--ink-2);font:600 1rem var(--sans);padding:10px 26px;border-radius:999px;min-height:44px;min-width:120px;cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.modus2 button:hover{color:var(--ink)}
.modus2 button[aria-pressed="true"]{background:var(--brand);color:var(--paper);box-shadow:0 6px 14px -10px var(--brand-deep)}
.modus2 button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.modus2-text{margin:0 0 18px;max-width:60ch}

/* Modus: Expertenfelder bleiben im Formular (gleiche Werte, gleiche Ergebnisse), werden im Einfachmodus nur ausgeblendet */
#eingaben[data-modus="einfach"] .nur-experte{display:none}
#eingaben[data-modus="experte"] .nur-einfach{display:none}
.einfach-info{border:1px dashed var(--line);border-radius:var(--radius-card);padding:14px 16px;margin:0 0 16px}
.einfach-info p{margin:0 0 10px}
.einfach-info .btn{width:100%}

/* Eingabe mit Regler: Zahlenfeld bleibt die führende Eingabe, der Regler darunter über die volle Breite */
.feld2{grid-template-columns:1fr 150px}
.regler2{grid-column:1/-1;width:100%;min-height:44px;height:44px;margin:-4px 0 0;padding:0;border:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;accent-color:var(--brand)}
.regler2:focus{outline:none}
.regler2:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
.regler2::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--brand) 0,var(--brand) var(--anteil,0%),var(--paper-3) var(--anteil,0%),var(--paper-3) 100%)}
.regler2::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--paper);border:2px solid var(--brand);box-shadow:0 2px 6px -2px var(--ink-3)}
.regler2::-moz-range-track{height:6px;border-radius:999px;background:var(--paper-3)}
.regler2::-moz-range-progress{height:6px;border-radius:999px;background:var(--brand)}
.regler2::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--paper);border:2px solid var(--brand)}

/* Diagramme */
.diagramme2{display:grid;gap:18px;margin-top:24px}
@media(min-width:960px){.diagramme2{grid-template-columns:1fr 1fr}}
.diagramm-karte{min-width:0}
.diagramm-karte h3{margin-bottom:6px}
.diagramm-karte>.hinweis{margin:0 0 10px}
.d2{position:relative;width:100%;min-height:40px;margin:6px 0 10px}
.d2 svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--sans)}
.d2 .achse{stroke:var(--ink-3);stroke-width:1}
.d2 .gitter{stroke:var(--line);stroke-width:1}
.d2 .verbinder{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.d2 .marke{stroke:var(--brand-deep);stroke-width:1.5;stroke-dasharray:4 4}
.d2 text{fill:var(--ink-2);font-size:12px}
.d2 text.wert{fill:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.d2 text.wert.minus{fill:var(--minus)}.d2 text.wert.plus{fill:var(--plus)}
.d2 text.klein{fill:var(--ink-3);font-size:11px}
.d2 .zeile{cursor:default;outline:none}
.d2 .zeile .treffer{fill:transparent}
.d2 .zeile:hover .treffer,.d2 .zeile:focus-visible .treffer{fill:var(--paper-3)}
.d2 .zeile:focus-visible .bar{stroke:var(--ink);stroke-width:2}
.d2 .bar{shape-rendering:geometricPrecision}
.d2 .flaeche{fill:var(--brand-soft)}
.d2 .linie{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linejoin:round}
.d2 .fokus-linie{stroke:var(--ink-2);stroke-width:1}
.d2 .punkt{fill:var(--paper);stroke:var(--brand-deep);stroke-width:2.5}
.d2 svg.schieber:focus{outline:none}
.d2 svg.schieber:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:8px}
.d2 .leer{font-size:.9rem;color:var(--ink-3);padding:18px 0}
.tip2{position:absolute;z-index:5;pointer-events:none;max-width:260px;padding:8px 10px;border-radius:10px;background:var(--ink);color:var(--paper);font-size:.82rem;line-height:1.35;box-shadow:0 10px 24px -12px var(--ink);opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease}
.tip2.an{opacity:1;transform:none}
.tip2 b{display:block;font-size:.95rem}
.d2-wert{margin:0 0 6px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.d2-wert b{color:var(--ink)}
.tabelle2 td:first-child{padding-left:0}
.leg{border:1px solid var(--ink-3)}
details.werte2{padding:8px 0;border-bottom:0}details.werte2 summary{color:var(--brand)}
.rechner2-sektion summary{min-height:44px;display:flex;align-items:center;gap:8px}
.rechner2-sektion summary::before{content:"▸";color:var(--ink-3)}.rechner2-sektion details[open]>summary::before{content:"▾"}
.rechner2-sektion summary::-webkit-details-marker{display:none}
.sr-nur{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.abschluss2{margin-top:18px}
.abschluss2 .nach-ergebnis{margin-top:0;margin-bottom:8px}

/* Ruhige Übergänge nur ohne „Bewegung reduzieren“ */
@media (prefers-reduced-motion:no-preference){
  .d2 .bar{transition:x .35s cubic-bezier(.22,.61,.36,1),width .35s cubic-bezier(.22,.61,.36,1)}
  .d2 .verbinder{transition:x1 .35s ease,x2 .35s ease}
  .regler2::-webkit-slider-thumb{transition:transform .12s ease}
  .regler2:active::-webkit-slider-thumb{transform:scale(1.12)}
}
@media (prefers-reduced-motion:reduce){.tip2,.modus2 button{transition:none}}

/* Handy: kompakt, keine waagrechte Scrollleiste, Tippflächen ab 44 px */
@media(max-width:600px){
  .modus2{display:flex;width:100%}
  .modus2 button{flex:1;min-width:0;padding:10px 8px}
  fieldset{padding:14px 12px}
  .feld,.feld2{grid-template-columns:1fr 128px;gap:8px}
  .feld:has(select){grid-template-columns:1fr}
  .feld label{font-size:.92rem}
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .kpi{padding:10px 12px}.kpi b{font-size:1.08rem}
  .kpi.gross b{font-size:1.75rem}
  .diagramm-karte{padding:16px 14px}
  .d2 text{font-size:11px}
  .tabelle-scroll table.szenarien td small{display:block}
  .abschluss2 .btns .btn{flex:1 1 100%}
}
@media print{.vorschau2,.modus2,.modus2-text,.einfach-info,.regler2,.tip2{display:none!important}
  .diagramme2{display:block}.diagramm-karte{border:0;background:none;break-inside:avoid}header.top{top:0}}