/* ============================================================
   systeme.css — Ergänzungen für die Systemseiten
   (STARFACE, später Ajax und weitere)

   Bewusst eine eigene Datei: site.css wird vom Design-Werkzeug
   bei jedem Export neu erzeugt. Alles, was hier steht, bleibt
   davon unberührt.

   Nutzt ausschließlich die Variablen aus site.css.
   ============================================================ */

/* ---------- Typografie im Dokumentbereich ---------- */

.hero-sub{
  margin-top:14px;
  font-size:1.05rem;
  color:var(--hellblau);
  max-width:56ch;
}

.doc .lead{
  font-size:1.1rem;
  line-height:1.6;
  color:var(--ink);
}

.mut{
  color:var(--ink-muted);
  font-size:.88rem;
}

.doc .mut{
  line-height:1.6;
}

/* ---------- Hinweiskästen ---------- */

.hinweis{
  border-left:4px solid var(--taubenblau);
  background:var(--hellblau);
  padding:18px 22px;
  margin:20px 0 24px;
}

.hinweis p{
  margin-bottom:0;
  max-width:none;
}

.hinweis-tipp{
  border-left-color:var(--gelb-600);
}

/* Für Aussagen, bei denen ein Fehler teuer wird – bewusst auffälliger:
   dunkler Grund, kräftigere Kante, eigene Überschriftenzeile. */
.hinweis-achtung{
  background:var(--tiefblau);
  color:#fff;
  border-left:6px solid var(--gelb);
  padding:22px 26px;
}

.hinweis-achtung .achtung-titel{
  display:block;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--gelb);
  margin-bottom:10px;
}

.hinweis-achtung p{
  color:#fff;
}

.hinweis-achtung p + p{
  margin-top:12px;
}

.hinweis-achtung strong{
  color:var(--gelb);
}

.hinweis-achtung a{
  color:var(--himmelblau);
}

/* ---------- Preistabellen ---------- */

.preis{
  width:100%;
  border-collapse:collapse;
  margin:16px 0 22px;
  font-size:.95rem;
}

.preis caption{
  text-align:left;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--taubenblau);
  padding-bottom:10px;
}

.preis th,
.preis td{
  text-align:left;
  font-weight:400;
  padding:11px 14px;
  border-bottom:1px solid var(--hellblau);
  vertical-align:baseline;
}

.preis thead th{
  font-weight:700;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--taubenblau);
  border-bottom:2px solid var(--taubenblau);
}

.preis .num{
  text-align:right;
  white-space:nowrap;
  /* Ziffern gleich breit, damit die Beträge sauber untereinander stehen */
  font-variant-numeric:tabular-nums;
}

.preis .summe th,
.preis .summe td{
  font-weight:700;
  border-top:2px solid var(--tiefblau);
  border-bottom:none;
  color:var(--tiefblau);
}

.preis .pp th,
.preis .pp td{
  border-bottom:none;
  color:var(--ink-muted);
  font-size:.88rem;
  padding-top:4px;
}

.preis .mut{
  font-weight:400;
}

/* ---------- Auswahlrechner ohne JavaScript ----------
   Die Radios stehen im HTML vor Auswahl und Ergebnissen, damit
   sie per Geschwisterselektor (~) beides steuern können. Sie sind
   optisch verborgen, bleiben aber fokussierbar — Tastaturbedienung
   mit Pfeiltasten funktioniert wie bei jeder Radiogruppe.        */

.rechner{
  margin:22px 0 26px;
}

.rechner > input[type="radio"]{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.rechner-wahl{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:6px;
}

.rechner-wahl label{
  cursor:pointer;
  min-width:58px;
  text-align:center;
  padding:10px 16px;
  border:1px solid var(--taubenblau);
  color:var(--taubenblau);
  font-weight:500;
  font-size:.95rem;
  transition:background-color .15s cubic-bezier(.2,0,.2,1),
             color .15s cubic-bezier(.2,0,.2,1);
}

.rechner-wahl label:hover{
  background:var(--hellblau);
}

.rechner-erg{
  display:none;
}

/* Ausgewählte Stufe hervorheben und zugehöriges Ergebnis zeigen */
#sf-2:checked  ~ .rechner-wahl label[for="sf-2"],
#sf-5:checked  ~ .rechner-wahl label[for="sf-5"],
#sf-10:checked ~ .rechner-wahl label[for="sf-10"],
#sf-20:checked ~ .rechner-wahl label[for="sf-20"],
#sf-50:checked ~ .rechner-wahl label[for="sf-50"]{
  background:var(--tiefblau);
  border-color:var(--tiefblau);
  color:#fff;
}

#sf-2:checked  ~ .erg-2,
#sf-5:checked  ~ .erg-5,
#sf-10:checked ~ .erg-10,
#sf-20:checked ~ .erg-20,
#sf-50:checked ~ .erg-50{
  display:block;
}

/* Tastaturfokus sichtbar machen */
#sf-2:focus-visible  ~ .rechner-wahl label[for="sf-2"],
#sf-5:focus-visible  ~ .rechner-wahl label[for="sf-5"],
#sf-10:focus-visible ~ .rechner-wahl label[for="sf-10"],
#sf-20:focus-visible ~ .rechner-wahl label[for="sf-20"],
#sf-50:focus-visible ~ .rechner-wahl label[for="sf-50"]{
  outline:3px solid var(--gelb-600);
  outline-offset:2px;
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width:640px){
  .preis{
    font-size:.9rem;
  }
  .preis th,
  .preis td{
    padding:9px 8px;
  }
  .rechner-wahl label{
    min-width:46px;
    padding:9px 12px;
  }
}

@media (prefers-reduced-motion:reduce){
  .rechner-wahl label{
    transition:none;
  }
}