/* stufe2.css — Zusatzstile der Stufe-2-Seiten (Stadt-/Eigentümer-Seiten, Rechner).
   Namensraum .s2-* — fasst den Bestand nirgends an. Schrift/Farben erben vom body
   der jeweiligen Site; nur Layout, Abstände und wenige neutrale Töne stehen hier. */

.s2-abschnitt { padding: 3.5rem 1.25rem; }
.s2-hero { padding-top: 9rem; }
.s2-container { max-width: 68rem; margin: 0 auto; }

.s2-h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; margin: 0 0 1.5rem; }
.s2-h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.15; margin: 0 0 1.25rem; }
.s2-vorspann { font-size: 1.15rem; line-height: 1.55; max-width: 46rem; margin: 0 0 .9rem; }
.s2-text { line-height: 1.6; max-width: 46rem; margin: 0 0 .9rem; }
.s2-text a { text-decoration: underline; color: inherit; }
.s2-quelle { font-size: .82rem; opacity: .65; max-width: 46rem; margin-top: 1rem; }

.s2-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.s2-fakt { border: 1px solid rgba(0,0,0,.12); padding: 1.25rem 1rem; }
.s2-fakt-wert { font-size: 2rem; line-height: 1.1; font-weight: 600; }
.s2-fakt-label { font-size: .9rem; opacity: .75; margin-top: .35rem; }

.s2-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.s2-karte { display: block; border: 1px solid rgba(0,0,0,.12); padding: 1.1rem 1rem; color: inherit; text-decoration: none; transition: border-color .15s ease; }
a.s2-karte:hover { border-color: currentColor; }
.s2-karte-name { font-weight: 600; margin-bottom: .4rem; }
.s2-karte-zeile { font-size: .92rem; opacity: .8; }

.s2-merkmale { list-style: none; padding: 0; margin: 1rem 0 0; max-width: 46rem; }
.s2-merkmal { padding: .45rem 0 .45rem 1.6rem; position: relative; line-height: 1.5; }
.s2-merkmal::before { content: "✓"; position: absolute; left: 0; font-weight: 700; }

.s2-faq-eintrag { max-width: 46rem; border-top: 1px solid rgba(0,0,0,.12); padding: 1.1rem 0; }
.s2-faq-frage { font-size: 1.05rem; margin: 0 0 .5rem; }
.s2-faq-antwort { line-height: 1.6; margin: 0; }

.s2-cta-zeile { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; }
.s2-zweitlink { text-decoration: underline; color: inherit; }

.s2-tabelle-rahmen { overflow-x: auto; margin-top: 1rem; }
.s2-tabelle { border-collapse: collapse; min-width: 34rem; }
.s2-tabelle th, .s2-tabelle td { border-bottom: 1px solid rgba(0,0,0,.12); padding: .6rem .9rem; text-align: left; }
.s2-tabelle .s2-zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* Ertragsrechner */
.s2-rechner { border: 1px solid rgba(0,0,0,.15); padding: 1.5rem; max-width: 34rem; }
.s2-rechner label { display: block; font-size: .9rem; margin: .9rem 0 .3rem; }
.s2-rechner select, .s2-rechner input, .s2-rechner textarea { width: 100%; padding: .55rem .6rem; border: 1px solid rgba(0,0,0,.25); font: inherit; background: transparent; }
.s2-ergebnis { margin-top: 1.25rem; padding: 1rem; border: 1px dashed rgba(0,0,0,.3); }
.s2-ergebnis-wert { font-size: 1.6rem; font-weight: 700; }
.s2-ergebnis-spanne { opacity: .8; font-size: .95rem; margin-top: .25rem; }

.s2-einwilligung { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; line-height: 1.5; margin-top: 1rem; }
.s2-einwilligung input { margin-top: .25rem; }
.s2-einwilligung a { text-decoration: underline; color: inherit; }