/* agora Website Relaunch v1: Bausteine nur für site.html und preise.html.
   Wird nach site.css geladen, alle Werte kommen aus tokens.css. */

/* ---------- Kennwerte unter einer Überschrift (site.html) ---------- */
.kennwerte { margin-top: 2.25rem; }
.kennwerte__fuss { margin-top: 1.25rem; }

/* ---------- Rechner mit Betreuung (preise.html) ---------- */
.rechner__auswahl label:has(input:disabled) { background: transparent; border-color: var(--linie); color: var(--grau); cursor: not-allowed; }
.rechner__regel { margin-top: 0.25rem; font-size: var(--t-klein); color: var(--grau); }
.rechner__einmalig { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--linie); }
.rechner__einmalig output { font: 500 1.05rem / 1.3 var(--mono); white-space: nowrap; }

/* ---------- Preistabelle: zwei Spalten, damit sie auch bei 320 px ohne Querscrollen passt ---------- */
.preistabelle { width: 100%; max-width: 52rem; margin-top: 2.25rem; border-collapse: collapse; border-top: 1.5px solid var(--tinte); text-align: left; }
.preistabelle caption { caption-side: bottom; padding-top: 0.85rem; text-align: left; font: 400 var(--t-klein) / 1.4 var(--mono); color: var(--grau); }
.preistabelle th, .preistabelle td { padding: 0.9rem 1rem 0.9rem 0; border-bottom: 1px solid var(--linie); vertical-align: baseline; }
.preistabelle thead th { font: 400 var(--t-klein) / 1.4 var(--sans); color: var(--grau); }
.preistabelle tbody th { font-weight: 500; }
.preistabelle th:last-child, .preistabelle td:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.preistabelle__hinweis { display: block; margin-top: 0.1rem; font-weight: 400; font-size: 0.95rem; color: var(--grau); }
.preistabelle__betrag { font: 500 1.05rem / 1.3 var(--mono); }
.preistabelle__takt { font-size: var(--t-klein); color: var(--grau); }
@media (max-width: 480px) {
  .preistabelle__takt { display: block; }
  .preistabelle tbody th { hyphens: auto; overflow-wrap: anywhere; }
}

/* ---------- Die anderen Werkzeuge (preise.html) ---------- */
.nebenwerkzeuge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 5vw, 4.5rem); margin-top: 2.25rem; }
.nebenwerkzeuge > li { padding-top: 1.1rem; border-top: 1.5px solid var(--tinte); }
.nebenwerkzeuge h3 { font: 500 var(--t-mittel) / 1.2 var(--sans); letter-spacing: -0.01em; }
.nebenwerkzeuge p { margin-top: 0.5rem; max-width: 40ch; }
.nebenwerkzeuge__preis { font: 500 1.05rem / 1.3 var(--mono); }
.nebenwerkzeuge .textlink { display: inline-block; margin-top: 0.9rem; }
@media (max-width: 760px) { .nebenwerkzeuge { grid-template-columns: 1fr; } }

/* Preisliste 2026: Aktionspreis und UVP nebeneinander, Jahreszahlung im Rechner */
.preistabelle--uvp th:nth-child(2), .preistabelle--uvp td:nth-child(2) { text-align: right; white-space: nowrap; padding-right: 1.5rem; }
.preistabelle__uvp { font: 400 0.95rem / 1.3 var(--mono); color: var(--grau); }
.rechner__jahr { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--linie); font-weight: 500; cursor: pointer; }
.rechner__jahr input { width: 1.15rem; height: 1.15rem; accent-color: var(--orange-tief); }
@media (max-width: 480px) { .preistabelle--uvp th:nth-child(2), .preistabelle--uvp td:nth-child(2) { padding-right: 0.75rem; } }

/* v5: Posten von agora Site stehen als Kennwerte direkt beim Rechner */
.preis__posten { margin-top: 1.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }
@media (max-width: 420px) { .preis__posten { grid-template-columns: 1fr; } }