/* ===========================================
   Preise-Content (preise.html, statischer Infobereich
   unterhalb des Kostenrechners)
   Nur bestehende Variablen aus style.css. Alle Selektoren
   auf .preisinfo beschraenkt, betrifft ausschliesslich
   diesen Bereich von preise.html.
   =========================================== */

.preisinfo h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: var(--s10);
  margin-bottom: var(--s4);
}
.preisinfo h2:first-of-type {
  margin-top: 0;
}

.preisinfo h3 {
  font-size: 1.125rem;
  margin-top: var(--s6);
  margin-bottom: var(--s3);
}

.preisinfo p {
  max-width: 70ch;
  line-height: 1.7;
  color: var(--text-muted);
}

.preisinfo strong {
  color: var(--accent);
  font-weight: 700;
}

/* Tabellen */
.preisinfo-table {
  overflow-x: auto;
  margin-block: var(--s6);
}

.preisinfo table {
  border-collapse: collapse;
  width: 100%;
  max-width: 720px;
}

.preisinfo th,
.preisinfo td {
  padding: var(--s3) var(--s4) var(--s3) 0;
  text-align: left;
  border-bottom: 1px solid var(--border-s);
  white-space: nowrap;
}

.preisinfo th {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  border-bottom: 2px solid var(--border-s);
}

.preisinfo td {
  color: var(--text-muted);
}

.preisinfo th:last-child,
.preisinfo td:last-child {
  text-align: right;
  padding-right: 0;
}

.preisinfo tbody tr:last-child td {
  border-bottom: none;
}

/* FAQ-Liste erbt bereits .faq-list/.faq-item aus style.css,
   hier keine zusaetzlichen Regeln noetig. */

@media (max-width: 640px) {
  .preisinfo h2 { font-size: 1.375rem; }
  .preisinfo h3 { font-size: 1rem; }
  .preisinfo th,
  .preisinfo td {
    padding-top: var(--s2);
    padding-bottom: var(--s2);
    white-space: normal;
  }
}

/* ===========================================
   Preis-Lead (page-hero, preise.html)
   Ruhige Hervorhebung der Kernzahlen: nur
   Schriftgroesse und Abstand, kein Kasten,
   kein Rahmen, keine Hintergrundfarbe.
   =========================================== */
.preis-lead {
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 60ch;
  margin-bottom: var(--s6);
}

/* ===========================================
   Sprungziele: .site-header ist sticky mit
   64px Hoehe (.nav { height: 64px }). Ohne
   scroll-margin verschwindet die Zielueberschrift
   beim Sprung dahinter. var(--s16) = 4rem = 64px.
   =========================================== */
.preisinfo [id] {
  scroll-margin-top: var(--s16);
}