/* ============================================================
   ZEITWERT-RECHNER – Styles
   ============================================================
   Wird von index.html (Abschnitt "Rechner") und von rechner.html
   benutzt. Die Farben kommen aus den CSS-Variablen der Seite;
   die Werte hinter dem Komma sind nur Rueckfallwerte, falls die
   Variable mal nicht da ist. Aendere Farben also in der Seite,
   nicht hier.
   ============================================================ */

.rechner { display: grid; grid-template-columns: 1fr 1.05fr; gap: 26px; align-items: start; }

/* Grid- und Flex-Elemente weigern sich von Haus aus, schmaler zu werden als
   ihr laengster Inhalt. Auf schmalen Displays schiebt das die Seite seitlich
   auf. min-width:0 erlaubt das Stauchen - das ist der eigentliche Fix. */
.rechner, .rechner * { min-width: 0; }

/* Ein per hidden-Attribut ausgeblendetes Element (z. B. der Hinweis fuer
   "eigene Werte") muss verschwinden - sonst gewinnt spaeter display:block
   aus der .sub-Regel und der Text bleibt faelschlich sichtbar. */
.rechner [hidden] { display: none !important; }

.rechner .panel {
  background: var(--white, #fff);
  border: 1px solid var(--border, #F1E6DF);
  border-radius: var(--radius, 18px);
  padding: 28px 26px;
  box-shadow: var(--shadow, 0 18px 45px -20px rgba(60,30,20,.28));
  min-width: 0;          /* sonst sprengt der Inhalt die Spalte */
  max-width: 100%;
}

/* Sicherheitsnetz: nichts aus dem Rechner darf die Seite seitlich aufziehen.
   "clip" statt "hidden", damit kein Scroll-Container entsteht und das
   klebende Seitenmenue oben weiter funktioniert. */
.rechner { max-width: 100%; overflow-x: clip; }
.rechner .panel h3 { font-size: 1.12rem; font-weight: 700; margin-bottom: 4px; }
.rechner .panel .hint { color: var(--muted, #5C6472); font-size: .88rem; margin-bottom: 22px; }

/* ---------- Eingaben ---------- */
.rechner .field { margin-bottom: 22px; }
.rechner .field:last-child { margin-bottom: 0; }
.rechner label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.rechner .sub { display: block; font-weight: 400; color: var(--muted, #5C6472); font-size: .82rem; margin-top: 2px; }

.rechner select,
.rechner input[type="number"] {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink, #20242E);
  padding: 12px 14px; border: 1px solid var(--border, #F1E6DF); border-radius: 12px;
  background: var(--cream, #FFF9F5); transition: border-color .15s ease;
}
.rechner select:focus,
.rechner input[type="number"]:focus { outline: none; border-color: var(--red, #E8473C); }
.rechner optgroup { font-style: normal; font-weight: 700; color: var(--muted, #5C6472); }
.rechner option { font-weight: 400; color: var(--ink, #20242E); }

.rechner .rowline { display: flex; justify-content: space-between; align-items: center; }

/* Wert laesst sich tippen ODER schieben */
.rechner .valbox { display: inline-flex; align-items: center; gap: 5px; }
.rechner .valbox input {
  width: 62px; text-align: right; padding: 6px 8px; font-size: .95rem;
  font-weight: 700; color: var(--red, #E8473C); background: var(--white, #fff);
  border: 1px solid var(--border, #F1E6DF); border-radius: 8px;
}
.rechner .valbox input:focus { outline: none; border-color: var(--red, #E8473C); }
.rechner .valbox .einheit { font-weight: 700; color: var(--red, #E8473C); font-size: .92rem; }

.rechner input[type="range"] { width: 100%; max-width: 100%; margin-top: 10px; accent-color: var(--red, #E8473C); height: 22px; }
.rechner .scale { display: flex; justify-content: space-between; gap: 10px; color: var(--muted, #5C6472); font-size: .76rem; margin-top: -2px; }

/* ---------- Netto / Brutto ---------- */
.rechner .satzzeile { display: flex; gap: 10px; align-items: stretch; }
.rechner .satzzeile input[type="number"] { flex: 1; }
.rechner .toggle { display: inline-flex; border: 1px solid var(--border, #F1E6DF); border-radius: 12px; overflow: hidden; flex: none; }
.rechner .toggle label {
  margin: 0; display: grid; place-items: center; cursor: pointer;
  padding: 0 15px; font-size: .88rem; font-weight: 600; color: var(--muted, #5C6472);
  background: var(--cream, #FFF9F5); transition: background .15s ease, color .15s ease;
}
.rechner .toggle label + label { border-left: 1px solid var(--border, #F1E6DF); }
.rechner .toggle input { position: absolute; opacity: 0; pointer-events: none; }
.rechner .toggle label.aktiv { background: var(--red, #E8473C); color: #fff; }
.rechner .umrechnung { color: var(--muted, #5C6472); font-size: .8rem; margin-top: 7px; min-height: 1.2em; }

/* ---------- Pakete ---------- */
.rechner .pakete { display: grid; gap: 10px; }
.rechner .paket {
  display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0;
  border: 1px solid var(--border, #F1E6DF); border-radius: 12px; padding: 12px 14px;
  background: var(--cream, #FFF9F5); transition: border-color .15s ease, background .15s ease;
}
.rechner .paket:hover { border-color: var(--red, #E8473C); }
.rechner .paket input { accent-color: var(--red, #E8473C); flex: none; width: auto; }
.rechner .paket > span { min-width: 0; overflow-wrap: anywhere; }
.rechner .paket .pname { font-weight: 600; font-size: .95rem; }
.rechner .paket .pfor { color: var(--muted, #5C6472); font-size: .8rem; }
.rechner .paket .ppreis { margin-left: auto; font-weight: 700; white-space: nowrap; font-size: .95rem; flex: none; }
/* Sternchen am Preis + die Erklaerung darunter. Steht bewusst fuer sich,
   damit die Mindestlaufzeit nicht in einem laengeren Absatz untergeht. */
.rechner .stern { color: var(--red, #E8473C); font-weight: 800; }
.rechner .laufzeit {
  margin-top: 10px; font-size: .84rem; font-weight: 600;
  color: var(--ink, #20242E);
  background: var(--cream, #FFF9F5);
  border: 1px solid var(--border, #F1E6DF);
  border-radius: 10px; padding: 9px 13px;
}
.rechner .paket.aktiv { border-color: var(--red, #E8473C); background: var(--red-soft, #FDECEA); }

/* ---------- Ergebnisse ---------- */
.rechner .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.rechner .kpi {
  background: var(--cream, #FFF9F5); border: 1px solid var(--border, #F1E6DF);
  border-radius: 14px; padding: 16px 16px 14px;
}
.rechner .kpi .k { color: var(--muted, #5C6472); font-size: .8rem; line-height: 1.35; }
/* Zweite Zeile unter der grossen Stundenzahl: macht sie greifbar */
.rechner .kpi .prowoche {
  display: block; margin-top: 3px;
  font-size: .78rem; font-weight: 600; color: var(--muted, #5C6472);
}
/* Hinweis unter der Paketempfehlung, wenn das kleinste Paket passt */
.rechner .nurzeit {
  display: block; margin-top: 8px;
  font-size: .86rem; line-height: 1.5; color: var(--muted, #5C6472);
  border-left: 3px solid var(--red, #E8473C); padding-left: 11px;
}
.rechner .kpi .v { font-weight: 800; font-size: 1.6rem; letter-spacing: -.5px; margin-top: 2px; }
.rechner .kpi .u { font-size: .95rem; font-weight: 600; color: var(--muted, #5C6472); }
.rechner .kpi.gross { grid-column: 1 / -1; }
.rechner .kpi.gross .v { font-size: 2rem; }

/* ---------- Fazit ---------- */
.rechner .fazit { border-radius: 14px; padding: 18px 20px; margin-bottom: 22px; border: 1px solid transparent; }
.rechner .fazit.gut { background: var(--green-soft, #E7F6F0); border-color: #BDE6D6; }
.rechner .fazit.knapp { background: #FFF3E0; border-color: #F0DCB4; }
/* text-wrap: balance verteilt die Ueberschrift gleichmaessig auf die Zeilen.
   Ohne das stand auf dem Handy "Rein ueber die Zahlen geht es noch" und
   darunter allein "nicht auf". Aeltere Browser ignorieren die Angabe
   einfach - dann sieht es aus wie vorher, kaputt geht nichts. */
.rechner .fazit .ftitel { font-weight: 700; font-size: 1.02rem; text-wrap: balance; }
.rechner .fazit.gut .ftitel { color: #147A57; }
.rechner .fazit.knapp .ftitel { color: #8A5A06; }
.rechner .fazit p { font-size: .92rem; color: var(--muted, #5C6472); margin-top: 6px; }

/* ---------- Balken ---------- */
.rechner .jahre { margin-bottom: 20px; }
.rechner .jahre h4 { font-size: .95rem; font-weight: 700; margin-bottom: 12px; }
.rechner .bar { margin-bottom: 12px; }
.rechner .bar .bl { display: flex; justify-content: space-between; font-size: .86rem; margin-bottom: 5px; }
.rechner .bar .bl .bjahr { color: var(--muted, #5C6472); }
.rechner .bar .bl .bwert { font-weight: 700; }
.rechner .track {
  height: 12px; background: var(--cream, #FFF9F5);
  border: 1px solid var(--border, #F1E6DF); border-radius: 999px; overflow: hidden;
}
.rechner .fill { height: 100%; background: var(--green, #1FA97A); border-radius: 999px; transition: width .35s ease; }
.rechner .fill.neg { background: var(--red, #E8473C); }

/* ---------- Aufschluesselung ---------- */
.rechner .tabelle { border-top: 1px solid var(--border, #F1E6DF); padding-top: 14px; }
.rechner .tz { display: flex; justify-content: space-between; font-size: .9rem; padding: 5px 0; gap: 16px; flex-wrap: wrap; }
.rechner .tz .tl { color: var(--muted, #5C6472); }
/* Das Fazit der Tabelle. Bewusst deutlich groesser und mit kraeftigerer
   Trennlinie als die Zeilen darueber - das ist die Zahl, auf die alles
   hinauslaeuft, und sie soll man auf den ersten Blick finden. */
.rechner .tz.summe {
  border-top: 2px solid var(--ink, #20242E);
  margin-top: 12px; padding-top: 13px;
  font-weight: 800; align-items: baseline;
}
.rechner .tz.summe .tl { color: var(--ink, #20242E); font-size: 1.02rem; }
.rechner .tz.summe > span:last-child { font-size: 1.4rem; font-weight: 800; letter-spacing: -.5px; }

/* ---------- CTA + Fussnote ---------- */
.rechner .cta-box { margin-top: 24px; text-align: center; }
/* Der Button darf nie breiter werden als seine Box - sonst ragt er auf
   schmalen Displays nach rechts raus und wirkt verschoben. */
.rechner .cta-box .btn { max-width: 100%; white-space: normal; }
.rechner .cta-sub { color: var(--muted, #5C6472); font-size: .86rem; margin-top: 10px; }

/* ---------- Vertrauens-Hinweis unter dem Rechner ----------
   Steht bewusst VOR der Fussnote: erst die Zusage, dann das Kleingedruckte.
   Inhaltlich geprueft - der Rechner sendet und speichert nachweislich nichts. */
.rechner-schutz {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 22px; padding: 14px 18px;
  background: var(--green-soft, #E7F6F0);
  border: 1px solid #BDE6D6;
  border-radius: 14px;
  font-size: .88rem; line-height: 1.55;
  color: var(--muted, #5C6472);
}
.rechner-schutz .schloss { flex: none; font-size: 1.05rem; line-height: 1.35; }
.rechner-schutz strong { color: #147A57; }

/* Abschluss-Satz nach dem Rechner: fuehrt zum Erstgespraech */
.rechner-abschluss {
  margin-top: 22px; padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--border, #F1E6DF);
  border-left: 4px solid var(--red, #E8473C);
  border-radius: 14px;
  font-size: .95rem; line-height: 1.6;
  color: var(--muted, #5C6472);
}
.rechner-abschluss a {
  color: var(--red, #E8473C); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.rechner-abschluss a:hover { text-decoration: underline; }

.rechner-fussnote {
  margin-top: 26px; color: var(--muted, #5C6472); font-size: .8rem; line-height: 1.6;
  border-top: 1px solid var(--border, #F1E6DF); padding-top: 16px;
}

/* ---------- Desktop: Ergebnis laeuft mit ----------
   Ab zwei Spalten bleibt die Ergebnis-Karte beim Scrollen stehen, damit
   man nach dem Eintragen nicht hochscrollen muss. top-Wert liegt unter
   dem klebenden Seitenmenue (rund 75px hoch).
   Ist die Karte hoeher als der Bildschirm, scrollt nur ihr Inhalt - die
   wichtigsten Zahlen oben bleiben dabei immer sichtbar. */
@media (min-width: 861px) {
  .rechner .panel:last-child {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;   /* kein Mitscrollen der Seite am Ende */
  }
  /* Dezente Scrollleiste, damit die Karte ruhig wirkt */
  .rechner .panel:last-child { scrollbar-width: thin; scrollbar-color: #E3D6CE transparent; }
  .rechner .panel:last-child::-webkit-scrollbar { width: 8px; }
  .rechner .panel:last-child::-webkit-scrollbar-thumb {
    background: #E3D6CE; border-radius: 999px;
  }
  .rechner .panel:last-child::-webkit-scrollbar-track { background: transparent; }

  /* Der Handlungsknopf klebt am unteren Rand der Karte und bleibt sichtbar,
     auch wenn der Inhalt darueber scrollt.
     Vorher lag er ausserhalb des sichtbaren Bereichs: Der Inhalt war rund
     50px hoeher als die Karte, und genau der Button fiel hinten runter -
     der wichtigste Knopf des Rechners war praktisch unsichtbar. */
  .rechner .panel:last-child .cta-box {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--white, #fff);
    margin-top: 18px;
    padding-top: 14px;
    box-shadow: 0 -14px 18px -14px rgba(60, 30, 20, .22);
  }

  /* Kompakter, damit moeglichst viel ohne Innen-Scrollen ins Bild passt */
  .rechner .panel:last-child { padding: 22px 20px; }
  .rechner .kpis { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
  .rechner .kpi { padding: 13px 13px 12px; }
  .rechner .kpi.gross { grid-column: auto; }
  .rechner .kpi .v { font-size: 1.35rem; }
  .rechner .kpi.gross .v { font-size: 1.55rem; }
  .rechner .fazit { padding: 15px 17px; margin-bottom: 18px; }
  .rechner .panel .hint { margin-bottom: 14px; }
  .rechner .jahre { margin-bottom: 14px; }
  .rechner .jahre h4 { margin-bottom: 8px; }
  .rechner .bar { margin-bottom: 7px; }
  .rechner .bar .bl { margin-bottom: 3px; }
  .rechner .tz { padding: 3px 0; }
  .rechner .tz.summe { padding-top: 8px; margin-top: 4px; }
  .rechner .cta-box { margin-top: 16px; }
  .rechner .cta-box .btn { padding: 13px 24px; }
  .rechner .cta-sub { margin-top: 8px; }
}

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  .rechner { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .rechner .panel { padding: 22px 16px; }          /* schmaler Rand = mehr Platz */
  .rechner .kpis { grid-template-columns: 1fr; }
  .rechner .satzzeile { flex-direction: column; }
  .rechner .toggle { align-self: flex-start; }
  .rechner .toggle label { padding: 10px 18px; }
  .rechner .kpi .v { font-size: 1.4rem; }
  .rechner .kpi.gross .v { font-size: 1.7rem; }
  .rechner .paket { padding: 12px 12px; gap: 9px; }
  .rechner .paket .ppreis { font-size: .88rem; }
  .rechner .scale { font-size: .72rem; }
  /* Button auf volle Breite - dann sitzt er sicher mittig und bricht sauber um.
     Kleinere Schrift und weniger Innenabstand: So passt der Text auf den
     meisten Handys in EINE Zeile, und der Knopf schrumpft von 87 auf 54 px.
     Vorher wirkte er wie ein Klotz. Bei sehr schmalen Geraeten (320 px)
     bleiben es zwei Zeilen - der Pfeil rutscht aber nicht mehr allein runter. */
  .rechner .cta-box .btn {
    width: 100%; justify-content: center;
    font-size: .9rem; padding: 13px 18px;
  }
  .rechner-schutz { padding: 13px 14px; font-size: .84rem; gap: 9px; }
}