/* ==========================================================================
   Gemeinsame Bausteine für die Rechner (Fristen, CO₂-Aufteilung).

   Alles rechnet im Browser. Es wird nichts übertragen – außer beim
   ausdrücklichen Klick auf "Erinnerung anfordern", und das steht dort auch.
   ========================================================================== */

.rechner{max-width:820px;margin:0 auto}

/* ---------- Eingabekarte ---------- */
.rk-karte{
  background:var(--bg-2);border-radius:var(--r-lg);padding:32px 34px;margin-bottom:30px;
}
.rk-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.rk-feld{display:flex;flex-direction:column;gap:6px}
.rk-feld.weit{grid-column:1/-1}
.rk-feld > label{font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--ink-soft)}
.rk-feld input,.rk-feld select{
  height:48px;padding:0 14px;font-size:16px;border:1px solid var(--line);
  border-radius:var(--r-xs);background:var(--bg);color:var(--ink);width:100%;
  font-variant-numeric:tabular-nums;
}
.rk-feld input:focus,.rk-feld select:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,134,170,.12);
}
.rk-feld .hilfe{font-size:13px;color:var(--ink-faint);line-height:1.5}

/* ---------- Ergebnis ---------- */
.rk-ergebnis{display:grid;gap:16px}
.rk-zeile{
  display:grid;grid-template-columns:1fr auto;gap:12px 20px;align-items:start;
  border:1.5px solid var(--line);border-radius:var(--r-md);padding:22px 24px;
  background:var(--bg);
}
.rk-zeile h3{font-size:17px;font-weight:600;margin-bottom:5px}
.rk-zeile p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;max-width:62ch}
.rk-wert{
  text-align:right;font-size:22px;font-weight:600;letter-spacing:-.02em;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.rk-wert small{display:block;font-size:12.5px;font-weight:500;color:var(--ink-faint);
  letter-spacing:.04em;text-transform:uppercase;margin-top:3px}

/* Ampel: Restlaufzeit */
.rk-zeile.gut{border-color:var(--teal);background:var(--mist)}
.rk-zeile.gut .rk-wert{color:var(--teal-text)}
.rk-zeile.knapp{border-color:#B8860B}
.rk-zeile.knapp .rk-wert{color:#8A6508}
[data-theme="dark"] .rk-zeile.knapp{border-color:#E3B341}
[data-theme="dark"] .rk-zeile.knapp .rk-wert{color:#E3B341}
.rk-zeile.vorbei{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 7%,transparent)}
.rk-zeile.vorbei .rk-wert{color:var(--warn)}

.rk-leer{
  border:1px dashed var(--line);border-radius:var(--r-md);padding:26px 24px;
  font-size:15px;color:var(--ink-faint);
}

/* ---------- Erinnerung ---------- */
.rk-erinnerung{
  background:var(--mist);border-radius:var(--r-lg);padding:28px 32px;margin-top:34px;
}
.rk-erinnerung h3{font-size:19px;margin-bottom:8px}
.rk-erinnerung form{display:grid;grid-template-columns:1fr auto auto;gap:12px;
  margin-top:18px;align-items:end}
.rk-erinnerung .rk-feld > label{color:var(--ink-soft)}
.rk-erinnerung .btn{height:48px;border-radius:var(--r-xs)}
.rk-melde{font-size:14px;color:var(--ink-soft);margin-top:12px;min-height:20px}

/* ---------- Kästchen ----------
   Eigene Klasse statt .pcheck: Die lebt in protokoll.css, das diese Seiten
   nicht laden. Ohne sie standen Kästchen und Text übereinander. */
.rk-check{
  display:flex;align-items:flex-start;gap:11px;padding:7px 0;
  font-size:14.5px;color:var(--ink-soft);line-height:1.55;cursor:pointer;
}
.rk-check input[type=checkbox]{
  width:18px;height:18px;flex:none;margin:2px 0 0;accent-color:var(--teal);
}

/* ---------- Stufentabelle ---------- */
.rk-tabelle{overflow-x:auto}
.rk-tabelle table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:420px}
.rk-tabelle th{
  text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);padding:0 12px 8px;border-bottom:1.5px solid var(--line);
}
.rk-tabelle td{padding:11px 12px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft)}
.rk-tabelle th.zahl,.rk-tabelle td.zahl{text-align:right;font-variant-numeric:tabular-nums}
.rk-tabelle tr:last-child td{border-bottom:0}
.rk-tabelle tr.aktiv td{
  background:var(--mist);color:var(--ink);font-weight:500;
  box-shadow:inset 3px 0 0 var(--teal);
}

/* ---------- Anschluss ans Ergebnis ----------
   Der große Angebotskasten steht auf dem Handy gut zwei Bildschirme unter dem
   Ergebnis – wer die Zahl gelesen hat, sieht ihn nie. Deshalb steht hier eine
   einzelne Zeile direkt zwischen den Ergebniszeilen, die den Fall aufgreift
   und nach unten verlinkt. Bewusst schmal und ohne Knopf: Sie soll die
   Ergebnisliste ergänzen, nicht sie unterbrechen. */
.rk-anschluss{
  border-left:3px solid var(--teal);border-radius:0 var(--r-xs) var(--r-xs) 0;
  background:var(--mist);padding:16px 20px;
  display:flex;gap:16px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;
}
.rk-anschluss p{font-size:14.5px;line-height:1.55;color:var(--ink);max-width:56ch;margin:0}
.rk-anschluss b{font-weight:600}
.rk-anschluss a{
  font-size:14px;font-weight:600;color:var(--teal-text);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
}
.rk-anschluss a:hover{text-decoration:underline}
.rk-anschluss a svg{width:15px;height:15px;flex:none}

/* ---------- Angebot ----------
   Steht bewusst direkt hinter dem Ergebnis, nicht unten in den Fußnoten: Wer
   gerade gesehen hat, was da auf ihn zukommt, ist genau dort ansprechbar. */
.rk-angebot{
  background:var(--mist);border-radius:var(--r-lg);padding:36px 38px;margin-top:38px;
  scroll-margin-top:calc(var(--nav-h) + 16px);   /* die Kopfleiste klebt oben */
}
.rk-angebot .eyebrow{margin-bottom:10px}
.rk-angebot h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.025em;margin-bottom:14px}
.rk-angebot > p{font-size:16.5px;color:var(--ink-soft);line-height:1.65;max-width:60ch}
.rk-angebot ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.rk-angebot li{
  display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.55;
  color:var(--ink);
}
.rk-angebot li svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--teal-text)}
.rk-angebot .rk-preis{
  margin-top:22px;font-size:15.5px;color:var(--ink);font-weight:500;
}
.rk-angebot .rk-knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

@media (max-width:760px){
  .rk-angebot{padding:26px 22px}
  .rk-angebot .rk-knoepfe .btn{width:100%;justify-content:center}
}

/* ---------- Hinweise ---------- */
.rk-recht{
  margin-top:34px;padding-top:26px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-soft);line-height:1.65;max-width:70ch;
}
.rk-recht strong{font-weight:500;color:var(--ink)}

@media (max-width:760px){
  .rk-karte{padding:24px 20px}
  .rk-grid,.rk-erinnerung form{grid-template-columns:1fr}
  .rk-zeile{grid-template-columns:1fr}
  .rk-wert{text-align:left;font-size:26px}
  .rk-erinnerung{padding:22px 20px}
}

@media print{
  .rk-karte,.rk-erinnerung,.nav,.footer{display:none!important}
  .rk-zeile{break-inside:avoid}
}