/* ============================================================
   SEKTIONS-BIBLIOTHEK
   Jede Sektion bringt eigenes Padding und eigenen Hintergrund mit und
   funktioniert an jeder Position im Dokument. Nur so lassen sich Seiten
   frei umkomponieren, ohne dass Abstände kippen.
   ============================================================ */

/* ============================================================
   HERO-VARIANTEN
   Keine zwei Seiten teilen denselben Hero-Typ.
   ============================================================ */

/* Gemeinsame Grundlage aller dunklen Heroes */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--space-9));
  background: var(--green);
  color: var(--white);
}
.hero .h1, .hero .h-display { color: var(--white) }
.hero__sub { font-size: var(--fs-sub); line-height: var(--lh-body); color: rgb(var(--rgb-white) / .85); max-width: var(--measure); margin-top: var(--space-5); font-weight: var(--fw-medium) }

/* Herkunftszeile – das wichtigste Signal für einen Regionalbetrieb */
.hero__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--yellow);
  padding-bottom: 14px; margin-bottom: var(--space-5);
  border-bottom: var(--bw-strong) solid rgb(var(--rgb-yellow) / .35);
}
.hero__kicker svg { width: 17px; height: 17px; flex: none }

/* ---------- A · Startseite: Split mit Video-Karte ---------- */
.hero--home .hero__cols {
  display: grid; grid-template-columns: 1.05fr .95fr;
  grid-template-areas: "head media" "body media";
  column-gap: clamp(36px, 4.5vw, 72px); row-gap: 0; align-items: start;
  padding-bottom: var(--space-9);
}
.hero--home .hero__head { grid-area: head }
.hero--home .hero__body { grid-area: body }
.hero--home .hero__media { grid-area: media; align-self: center }
.hero__media { position: relative; overflow: hidden; background: var(--green-900); aspect-ratio: var(--ratio-hero); box-shadow: var(--shadow-lg) }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--rgb-green-900) / .72), transparent 48%) }
.hero__play {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  color: var(--white); transition: background var(--t);
}
.hero__play:hover { background: rgb(var(--rgb-green-900) / .25) }
.hero__play-ic {
  position: relative; width: 84px; height: 84px; flex: none; display: grid; place-items: center;
  background: var(--yellow); color: var(--green-900);
  box-shadow: 0 12px 34px -8px rgb(var(--rgb-black) / .55);
  transition: transform var(--t), background var(--t);
}
.hero__play:hover .hero__play-ic { transform: scale(1.08); background: var(--white) }
.hero__play-ic svg { width: 34px; height: 34px; margin-left: 2px }
.hero__play-ic::before { content: ""; position: absolute; inset: 0; border: var(--bw-strong) solid var(--yellow); animation: playpulse 2.6s var(--ease) infinite }
.hero__play-txt { font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: var(--ls-tag); text-transform: uppercase; text-shadow: 0 1px 12px rgb(var(--rgb-black) / .5) }
@keyframes playpulse { 0% { transform: scale(1); opacity: .7 } 70% { transform: scale(1.5); opacity: 0 } 100% { opacity: 0 } }

/* Google-Bewertung als schlichtes weisses Feld */
.rating { display: inline-flex; align-items: center; gap: 18px; margin-top: var(--space-6); background: var(--white); padding: 14px 22px; box-shadow: var(--shadow-md) }
.rating__logo { width: 26px; height: 26px; flex: none }
.rating__score { display: flex; flex-direction: column; line-height: 1.05 }
.rating__num { display: flex; align-items: baseline; gap: 7px }
.rating__num b { font-size: var(--fs-2xl); font-weight: var(--fw-black); color: var(--ink); letter-spacing: -.03em }
.stars { display: flex; gap: 2px }
.stars svg { width: 16px; height: 16px; color: var(--star) }
.rating__src { font-size: var(--fs-xs); color: var(--ink-60); font-weight: var(--fw-semi); margin-top: 3px }
.rating__src b { color: var(--green); font-weight: var(--fw-bold) }

/* ---------- B · Balkonkraftwerk: Split mit Mini-Rechner ---------- */
.hero--calc .hero__cols {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(36px, 4.5vw, 64px); align-items: center; padding-bottom: var(--space-9);
}
.minicalc { background: var(--white); color: var(--ink); padding: var(--space-6); box-shadow: var(--shadow-lg) }
.minicalc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: var(--bw) solid var(--border) }
.minicalc__badge { font-size: var(--fs-tag); font-weight: var(--fw-black); letter-spacing: var(--ls-tag); text-transform: uppercase; background: var(--yellow); color: var(--green-900); padding: 6px 10px }
.minicalc__body { display: grid; gap: var(--space-5); padding-top: var(--space-5) }
.minicalc__out { background: var(--green-100); padding: var(--space-5); display: grid; gap: var(--space-2) }
.minicalc__val { font-size: var(--fs-stat-sm); font-weight: var(--fw-black); letter-spacing: -.04em; color: var(--green); line-height: 1 }

/* ---------- C · PV Privat: Full-Bleed Dachanlage ---------- */
.hero--full { padding-top: 0; overflow: hidden }
.hero--full .hero__stage {
  position: relative; min-height: clamp(560px, 78vh, 760px);
  display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + var(--space-9)) 0 var(--space-9);
}
.hero--full .hero__bg { position: absolute; inset: 0; z-index: 0 }
.hero--full .hero__bg img { width: 100%; height: 100%; object-fit: cover }
.hero--full .hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(var(--rgb-green-700) / .99) 12%, rgb(var(--rgb-green-700) / .94) 48%, rgb(var(--rgb-green-700) / .86));
}
.hero--full .wrap { position: relative; z-index: 1 }
.hero--full .h1 { max-width: 20ch }

/* ---------- D · PV Gewerbe: sachlicher B2B-Kopf auf hellem Grund ---------- */
.hero--b2b {
  background: var(--white); color: var(--ink);
  background-image: none;
  padding-top: calc(var(--header-h) + var(--space-8));
  padding-bottom: var(--space-9);
  border-bottom: var(--bw) solid var(--border);
}
.hero--b2b .h1 { color: var(--green) }
.hero--b2b .hero__sub { color: var(--text-muted) }
.hero--b2b .hero__kicker { color: var(--green-600); border-color: rgb(var(--rgb-green) / .25) }
.hero--b2b .hero__cols { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--grid-gap); align-items: center }
.hero--b2b .facts-list { display: grid; gap: 2px; background: var(--border); border: var(--bw) solid var(--border) }
.hero--b2b .facts-list li { background: var(--white); padding: var(--space-5) var(--space-6); display: flex; align-items: baseline; gap: var(--space-4) }
.hero--b2b .facts-list b { font-size: var(--fs-4xl); font-weight: var(--fw-black); letter-spacing: -.04em; color: var(--green); line-height: 1; flex: none; min-width: 4.5ch }
.hero--b2b .facts-list span { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5 }

/* ---------- E · Gewerbespeicher: Werkzeug-Kopf, schmal, Tool folgt sofort ---------- */
.hero--tool { padding-bottom: var(--space-8) }
.hero--tool .hero__inner { max-width: 62ch }
.hero--tool .hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); font-size: var(--fs-small); font-weight: var(--fw-semi); color: rgb(var(--rgb-white) / .7) }
.hero--tool .hero__meta span { display: flex; align-items: center; gap: 9px }

/* ---------- F · Stromvertrag: zentriert mit Zielgruppen-Umschalter ---------- */
.hero--toggle { text-align: center; padding-bottom: var(--space-9) }
.hero--toggle .hero__inner { max-width: 46ch; margin-inline: auto }
.hero--toggle .hero__kicker { margin-inline: auto }
.hero--toggle .hero__sub { margin-inline: auto; max-width: 54ch }
.hero--toggle .cta-row { justify-content: center }

.switch { display: inline-flex; padding: 5px; background: rgb(var(--rgb-white) / .12); border: var(--bw) solid rgb(var(--rgb-white) / .2); margin-bottom: var(--space-6) }
.switch__btn {
  padding: 12px 26px; font-weight: var(--fw-bold); font-size: var(--fs-sm);
  color: rgb(var(--rgb-white) / .72); transition: background var(--t), color var(--t);
}
.switch__btn[aria-selected="true"] { background: var(--yellow); color: var(--green-900) }
.switch--light { background: var(--grey-200); border-color: var(--border) }
.switch--light .switch__btn { color: var(--text-muted) }
.switch--light .switch__btn[aria-selected="true"] { background: var(--green); color: var(--white) }

/* ---------- G · Ortsseite: kompakter lokaler Kopf ---------- */
.hero--local { padding-top: calc(var(--header-h) + var(--space-7)); padding-bottom: var(--space-7) }
/* Beide Spalten tragen gleich viel: 1.3fr/.7fr liess das Foto neben dem
   Textblock als Briefmarke stehen (Nutzer-Vorgabe 07.09.2026). Das Bild
   behaelt sein Seitenverhaeltnis und waechst allein ueber die Spaltenbreite -
   deshalb wird es mit der Breite auch hoeher und traegt die Zeile mit. */
.hero--local .hero__cols { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--grid-gap); align-items: center }
.hero--local .h1 { font-size: var(--fs-h1-sm)}
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: rgb(var(--rgb-white) / .6); margin-bottom: var(--space-4) }
.breadcrumb a:hover { color: var(--yellow) }
.breadcrumb li::after { content: "/"; margin-left: 9px; opacity: .5 }
.breadcrumb li:last-child::after { content: none }
.breadcrumb--dark { color: var(--text-muted) }
.breadcrumb--dark a:hover { color: var(--green) }

/* ---------- G2 · Kopf ohne Bildspalte: Inhalt auf 70 % ----------
   Nutzer-Vorgabe 07.09.2026. Ein Kopf ohne rechte Spalte laesst den Text
   sonst an `--measure` haengen (rund 62 Zeichen) und steht auf breiten
   Schirmen als schmale Saeule in einer sehr grossen Flaeche. 70 % der
   Containerbreite haelt die Zeile lesbar und die Flaeche belegt. */
.hero--wide .h1,
.hero--wide .hero__sub,
.hero--wide .hero__kicker { max-width: 70% }
@media (max-width: 900px) {
  .hero--wide .h1,
  .hero--wide .hero__sub,
  .hero--wide .hero__kicker { max-width: 100% }
}

/* ---------- H · Über uns: ruhiger Personen-Kopf auf hellem Grund ---------- */
.hero--person {
  background: var(--white); background-image: none; color: var(--ink);
  padding-top: calc(var(--header-h) + var(--space-9)); padding-bottom: var(--space-9);
}
.hero--person .h1 { color: var(--green); max-width: 18ch }
.hero--person .hero__kicker { color: var(--green-600); border-color: rgb(var(--rgb-green) / .25) }
.hero--person .hero__cols { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--grid-gap); align-items: center }
.hero--person .lead { font-size: var(--fs-xl); color: var(--ink); font-weight: var(--fw-medium); line-height: 1.6 }
.hero--person .signature { margin-top: var(--space-6); font-size: var(--fs-small); color: var(--text-muted); font-weight: var(--fw-semi) }
.hero--person .signature b { display: block; font-size: var(--fs-md); color: var(--ink); font-weight: var(--fw-black); letter-spacing: var(--ls-tight) }

/* ---------- I · Karriere: Teamfoto als breites Band unter dem Text ---------- */
.hero--career { padding-bottom: 0 }
/* 70 % der Breite, nicht 70 Zeichen: `min(70%, 70ch)` liess auf grossen
   Schirmen immer die Zeichenzahl gewinnen, der Kopf stand schmal im Grossen
   (Nutzer-Vorgabe 07.09.2026). */
/* Karriere-Kopf: Ueberschrift und Text nutzen die volle Containerbreite.
   Nutzer-Vorgabe 07.09.2026 („nicht so viel gruene Flaeche rechts").

   Die Zwischenstufe 70 % war am falschen Bezug gemessen: `.wrap` ist
   seitenweit auf 1280 px begrenzt, 70 % davon sind 851 px - auf einem
   2000-px-Schirm nur 43 % der sichtbaren Breite. Genau daraus entstand der
   Eindruck, es sei „immer noch nicht 70 %". Ohne die Begrenzung stehen
   1.216 px, also 61 % des Schirms und so breit wie jede andere Sektion der
   Seite. Breiter ginge nur, indem `--wrap` fuer die ganze Website steigt -
   dann waere der Kopf breiter als alles andere und das Raster kaputt.

   Der Fliesstext lief zusaetzlich auf `--measure` (rund 45 %) und war damit
   noch schmaler als die Ueberschrift darueber; auch das ist aufgehoben. */
.hero--career .hero__inner { max-width: 100%; padding-bottom: var(--space-9) }
.hero--career .hero__sub,
.hero--career .lead { max-width: 100% }
/* Auf dem Telefon gilt die 70-Prozent-Vorgabe NICHT: 70 % von 390 px sind
   239 px, darin bricht fast jedes Wort um. Dort nimmt der Kopf die volle
   Breite - gemessen 07.09.2026. */
@media (max-width: 900px) {
  .hero--career .hero__inner { max-width: 100% }
}
.hero--career .hero__band { position: relative; aspect-ratio: 21 / 7; overflow: hidden; background: var(--green-700) }
.hero--career .hero__band img { width: 100%; height: 100%; object-fit: cover }

/* ---------- J · Kontakt: kein Hero – Formular steht sofort ---------- */
.contactpage { padding-top: calc(var(--header-h) + var(--space-7)); padding-bottom: var(--section-py) }
.contactpage__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--grid-gap); align-items: start }
.contactpage__aside { position: sticky; top: calc(var(--header-h) + var(--space-5)); display: grid; gap: var(--space-5) }

/* ---------- K · Referenzen: zentriert-minimal ---------- */
.hero--minimal {
  background: var(--grey-200); background-image: none; color: var(--ink);
  padding-top: calc(var(--header-h) + var(--space-9)); padding-bottom: var(--space-8); text-align: center;
}
.hero--minimal .h1 { color: var(--green); max-width: 20ch; margin-inline: auto }
.hero--minimal .eyebrow { justify-content: center }
.hero--minimal .lead { margin-inline: auto; margin-top: var(--space-5) }

/* ---------- L · Rechtsseiten: reiner Textkopf ---------- */
.hero--legal {
  background: var(--white); background-image: none; color: var(--ink);
  padding-top: calc(var(--header-h) + var(--space-8)); padding-bottom: var(--space-7);
  border-bottom: var(--bw) solid var(--border);
}
.hero--legal .h1 { color: var(--green); font-size: var(--fs-h1-sm)}

/* ---------- M · 404 ---------- */
.notfound {
  min-height: 78vh; display: flex; align-items: center;
  padding-top: calc(var(--header-h) + var(--space-8)); padding-bottom: var(--space-9);
}
.notfound__code { font-size: var(--fs-404); font-weight: var(--fw-black); letter-spacing: -.06em; line-height: .85; color: var(--yellow) }
.notfound__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px; margin-top: var(--space-7); background: rgb(var(--rgb-white) / .14) }
.notfound__links a { background: var(--green-900); padding: var(--space-5); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); transition: background var(--t), color var(--t) }
.notfound__links a:hover { background: var(--yellow); color: var(--green-900) }

/* ============================================================
   TRUST-LEISTE — ruhiges, solides Band unter dem Hero
   ============================================================ */
.trust { background: var(--green-700); border-top: var(--bw) solid rgb(var(--rgb-white) / .1) }
.trust--light { background: var(--grey-200); border-top: 0; border-bottom: var(--bw) solid var(--border) }
.trust__inner { display: flex; align-items: center; gap: 20px 36px; flex-wrap: wrap; padding-block: var(--space-6) }
.trust__label {
  flex: none; font-size: var(--fs-2xs); font-weight: var(--fw-black); letter-spacing: var(--ls-tag); text-transform: uppercase;
  color: rgb(var(--rgb-white) / .68); padding-right: 18px; border-right: var(--bw) solid rgb(var(--rgb-white) / .16);
}
.trust--light .trust__label { color: var(--grey-500); border-right-color: var(--border-strong) }
.seal { display: flex; align-items: center; gap: 11px; flex: none; color: rgb(var(--rgb-white) / .88); transition: color var(--t) }
.seal:hover { color: var(--white) }
.trust--light .seal { color: var(--ink) }
.seal svg { width: 46px; height: 46px; flex: none }
.seal > span { display: flex; flex-direction: column }
.seal__t { font-size: var(--fs-small); font-weight: var(--fw-black); line-height: 1.25; letter-spacing: var(--ls-flat); white-space: nowrap }
.seal__s { font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: rgb(var(--rgb-white) / .55); line-height: 1.25; margin-top: 2px; white-space: nowrap }
.trust--light .seal__s { color: var(--text-muted) }

/* ============================================================
   CONTENT LINKS / RECHTS
   ============================================================ */
.content__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); align-items: center }
.content--right .content__media { order: -1 }          /* Text rechts, Bild links */
.content--left .content__media { order: 1 }            /* Text links, Bild rechts */
.content--left-wide { grid-template-columns: .85fr 1.15fr }   /* schmale Textspalte, grosses Bild */
.content__body > * + * { margin-top: var(--space-5) }
.content__body .cta-row { margin-top: var(--space-7) }
.content__accent { font-weight: var(--fw-bold); color: var(--green) }
.section--invert .content__accent, .section--shot .content__accent, .on-dark .content__accent { color: var(--yellow) }

/* ============================================================
   KENNZAHLEN
   ============================================================ */
.facts__grid { position: relative; display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(40px, 5vw, 72px); align-items: center }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap) }
.stat { background: var(--white); color: var(--ink); padding: var(--space-7) var(--space-6); text-align: center; transition: transform var(--t), box-shadow var(--t) }
.stat:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg) }
.stat b { display: block; font-size: var(--fs-stat); font-weight: var(--fw-black); letter-spacing: -.045em; color: var(--green); line-height: 1 }
.stat span { display: block; font-size: var(--fs-sm); color: var(--ink-60); line-height: 1.5; margin-top: var(--space-3); font-weight: var(--fw-medium) }

/* Kennzahlen-Band: drei grosse Zahlen in einer Reihe */
.statband { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border) }
.statband > div { background: var(--bg); padding: var(--space-7) var(--space-6) }
.statband b { display: block; font-size: var(--fs-stat-lg); font-weight: var(--fw-black); letter-spacing: -.045em; color: var(--green); line-height: 1 }
.statband span { display: block; margin-top: var(--space-3); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; max-width: 26ch }
.section--invert .statband, .section--shot .statband { background: var(--border-invert) }
.section--invert .statband b, .section--shot .statband b { color: var(--yellow) }

/* Kontaktkarte auf grüner Fläche */
.contactcard { margin-top: var(--space-7); padding: var(--space-5) var(--space-6); background: var(--green); border: var(--bw) solid var(--border-invert); display: grid; gap: 14px; max-width: var(--card-max) }
.contactcard__top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap }
.status { display: flex; align-items: center; gap: 9px; font-size: var(--fs-small); font-weight: var(--fw-bold) }
.status .dot { background: var(--signal); box-shadow: 0 0 0 4px rgb(var(--rgb-signal) / .2) }
.contactcard__tel { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xl); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); transition: color var(--t) }
.contactcard__tel:hover { color: var(--yellow) }
.contactcard__tel svg { width: 18px; height: 18px; color: var(--yellow) }
.contactcard__meta { display: grid; gap: 9px; padding-top: 14px; border-top: var(--bw) solid rgb(var(--rgb-white) / .13); font-size: var(--fs-small); color: rgb(var(--rgb-white) / .7); font-weight: var(--fw-medium) }
.contactcard__meta div { display: flex; align-items: center; gap: 11px }
.contactcard__meta svg { width: 16px; height: 16px; flex: none; opacity: .6 }
.contactcard__meta a:hover { color: var(--yellow) }

/* ============================================================
   LEISTUNGS-GRID
   ============================================================ */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--card-gap); margin-top: var(--space-8) }
.cards--3 { grid-template-columns: repeat(3, 1fr) }
.cards--4 { grid-template-columns: repeat(4, 1fr) }
.cards--2 { grid-template-columns: repeat(2, 1fr) }

/* Leistungskarte: Kurznutzen erscheint erst beim Hover/Fokus, damit das
   Raster im Ruhezustand ruhig bleibt und trotzdem Tiefe anbietet. */
.svc { position: relative; overflow: hidden }
.svc__reveal { max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--t-slow), opacity var(--t), margin-top var(--t) }
.svc:hover .svc__reveal,
.svc:focus-within .svc__reveal { max-height: 180px; opacity: 1; margin-top: var(--space-2) }
.svc__reveal li { display: flex; gap: 10px; font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; padding-top: 7px }
.svc__reveal svg { width: 17px; height: 17px; flex: none; color: var(--green-600); margin-top: 2px }
@media (hover: none) {
  .svc__reveal { max-height: 180px; opacity: 1; margin-top: var(--space-2) }
}

/* ============================================================
   HINWEIS-BANNER (19 % MwSt.)
   Sachlich gehalten mit Stand-Datum statt Countdown, weil der Termin
   tatsächlich offen ist und ein Countdown unseriös wirkt.
   ============================================================ */
.notice { background: var(--green-100); border-top: 3px solid var(--yellow); border-bottom: var(--bw) solid var(--border) }
.notice__inner { display: flex; align-items: flex-start; gap: var(--space-5); padding-block: var(--space-6) }
.notice__ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; background: var(--yellow); color: var(--green-900) }
.notice__ic svg { width: 22px; height: 22px }
.notice__body { flex: 1 }
.notice__body h2, .notice__body h3 { font-size: var(--fs-lg); letter-spacing: var(--ls-tight) }
.notice__body p { margin-top: 7px; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; max-width: var(--measure-wide) }
.notice__stand { display: inline-block; margin-top: var(--space-3); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--green); text-transform: uppercase; letter-spacing: .1em }
.notice--slim .notice__inner { padding-block: var(--space-5); align-items: center }
.notice--slim .notice__body p { margin-top: 4px }

/* ============================================================
   ABLAUF / TIMELINE
   ============================================================ */
/* Timeline als horizontaler Slider: ~3 Schritte sichtbar (nie alle 7 gedrängt
   nebeneinander), per Pfeil-Nav weiterscrollen. Karten mit Rahmen statt Hairline-Raster. */
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--card-gap)) / 3);
  gap: var(--card-gap); margin-top: var(--space-8); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3) }
.step { background: var(--bg); border: var(--bw) solid var(--border); padding: var(--space-6);
  display: grid; gap: var(--space-3); align-content: start; scroll-snap-align: start }
.step__num {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--green); color: var(--white);
  font-weight: var(--fw-black); font-size: var(--fs-md); letter-spacing: var(--ls-tight);
}
.step:last-child .step__num { background: var(--yellow); color: var(--green-900) }
.step h3 { font-size: var(--fs-md)}
.step p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6 }
.section--invert .steps, .section--shot .steps { background: var(--border-invert) }

/* Auf Mobile wird die Timeline zum horizontalen Step-Slider */
@media (max-width: 900px) {
  .steps {
    grid-auto-flow: column; grid-auto-columns: min(80%, 320px);
    overflow-x: auto; scroll-snap-type: x mandatory; background: transparent; gap: var(--card-gap);
  }
  .step { scroll-snap-align: start; border: var(--bw) solid var(--border) }
}

/* ============================================================
   VERGLEICHSTABELLE (Balkon ↔ PV, China ↔ Fachbetrieb)
   ============================================================ */
.compare { margin-top: var(--space-8); border: var(--bw) solid var(--border) }
.compare table { font-size: var(--fs-sm)}
.compare th, .compare td { padding: var(--space-4) var(--space-5); text-align: left; border-bottom: var(--bw) solid var(--border); vertical-align: top }
.compare thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; font-weight: var(--fw-black); color: var(--ink-60); background: var(--grey-200) }
.compare tbody th { font-weight: var(--fw-bold); width: 34% }
.compare td { color: var(--text-muted); line-height: 1.55 }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0 }
.compare__col--us { background: var(--green-100) }
.compare thead .compare__col--us { background: var(--green); color: var(--white) }
.yes, .no { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-bold); color: var(--green) }
.no { color: var(--color-danger) }
.yes svg, .no svg { width: 18px; height: 18px; flex: none }

/* Ergebnis-Hinweis unter dem Vergleich */
.verdict { margin-top: var(--space-5); padding: var(--space-5) var(--space-6); background: var(--green-100); border-left: 4px solid var(--yellow); font-weight: var(--fw-semi); line-height: 1.6 }

/* Tabellen dürfen die Seite nie sprengen */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch }

/* ============================================================
   RECHNER / KONFIGURATOR
   ============================================================ */
.calc { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--grid-gap); align-items: start; margin-top: var(--space-8) }
/* Grid-Kinder duerfen unter ihre min-content-Breite schrumpfen (Default ist
   `min-width: auto`). Sonst sprengt der breiteste unteilbare Inhalt – hier die
   grosse Kennzahl auf der Ergebnis-Buehne – auf schmalen Viewports die Spalte
   und damit die ganze Seite (K19). */
.calc > * { min-width: 0 }
.calc__panel { display: grid; gap: var(--space-6) }
.calc__row { display: grid; gap: var(--space-3) }
.calc__row label { font-weight: var(--fw-bold); font-size: var(--fs-sm); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4) }
.calc__row output { font-weight: var(--fw-black); color: var(--green); font-size: var(--fs-lg); letter-spacing: var(--ls-tight) }
.section--invert .calc__row output, .section--shot .calc__row output { color: var(--yellow) }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--border-strong); cursor: pointer }
.section--invert input[type="range"], .section--shot input[type="range"] { background: rgb(var(--rgb-white) / .28) }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; background: var(--yellow); border: 3px solid var(--green-900); cursor: grab }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; background: var(--yellow); border: 3px solid var(--green-900); border-radius: 0; cursor: grab }
input[type="range"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px }
.calc__scale { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-semi) }

.calc__result { background: var(--white); color: var(--ink); padding: var(--space-7); display: grid; gap: var(--space-5); box-shadow: var(--shadow-lg) }
.calc__big { display: grid; gap: var(--space-2) }
.calc__big b { font-size: var(--fs-stat-lg); font-weight: var(--fw-black); letter-spacing: -.05em; color: var(--green); line-height: 1 }
/* Nur das direkte Label-Span klein setzen – verschachtelte Wert-Spans im <b>
   müssen die grosse Zahlengrösse behalten (sonst kippt die Hierarchie). */
.calc__big > span { font-size: var(--fs-sm); color: var(--ink-60); font-weight: var(--fw-medium) }
.calc__split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border) }
.calc__split > div { background: var(--white); padding: var(--space-4) 0 }
.calc__split b { display: block; font-size: var(--fs-2xl); font-weight: var(--fw-black); color: var(--ink); letter-spacing: -.03em }
.calc__split span { font-size: var(--fs-xs); color: var(--ink-60); font-weight: var(--fw-semi) }

/* Annahmen offenlegen – schützt vor Erwartungen, die die reale Anlage nicht hält */
.calc__assume { font-size: var(--fs-xs); color: var(--ink-60); line-height: 1.6; border-top: var(--bw) solid var(--border); padding-top: var(--space-4) }
.calc__assume b { color: var(--ink) }

/* Lastkurven-Diagramm (Gewerbespeicher) */
/* Flaches, kantiges Design: Rahmen statt großem weichem Schatten (passt zur
   Marken-Optik; ein shadow-lg auf einem eingebetteten Diagramm wirkt fremd). */
.chart { background: var(--white); padding: var(--space-6); border: var(--bw) solid var(--border) }
.chart svg { width: 100%; height: auto; display: block }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-4); font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-60) }
.chart__legend span { display: flex; align-items: center; gap: 8px }
.chart__key { width: 14px; height: 14px; flex: none }

/* ============================================================
   GALERIE / REFERENZPROJEKTE
   ============================================================ */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-7) }
.filter {
  padding: 11px 20px; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  border: var(--bw-strong) solid var(--border-strong); color: var(--text-muted);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.filter:hover { border-color: var(--green) }
.filter[aria-pressed="true"] { background: var(--green); color: var(--white); border-color: var(--green) }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--card-gap); margin-top: var(--space-7) }
/* Hoechstens drei Spalten (Verleih, sechs Bilder): bei vier Spalten bliebe die
   zweite Zeile halb leer, so gehen 6 = 2 x 3 und 3 x 2 auf. Unter 721 px bleibt
   das Karussell aus der Media Query unten zustaendig. */
@media (min-width: 721px) {
  .gallery--3 { grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 2 * var(--card-gap)) / 3)), 1fr)) }
}
.shot { position: relative; display: block; overflow: hidden; background: var(--green-900) }
.shot img { transition: transform var(--t-slow) }
.shot:hover img { transform: scale(1.05) }
.shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--rgb-green-900) / .85), transparent 55%); pointer-events: none }
.shot__meta { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-4); z-index: 2; color: var(--white) }
.shot__meta b { display: block; font-size: var(--fs-md); font-weight: var(--fw-black); letter-spacing: var(--ls-tight) }
.shot__meta span { display: block; font-size: var(--fs-xs); color: rgb(var(--rgb-white) / .75); margin-top: 3px; font-weight: var(--fw-semi) }
.shot[hidden] { display: none }
/* Produktbild-Variante: freigestelltes Geraet auf weissem Grund. Das dunkle
   Overlay der Foto-Kacheln laege dort als Schleier, deshalb heller Verlauf und
   dunkle Schrift; kein Hover-Zoom, sonst schneidet er das Geraet an. */
.shot--hell { background: var(--white) }
.shot--hell::after { background: linear-gradient(to top, rgb(var(--rgb-white) / .95), rgb(var(--rgb-white) / 0) 55%) }
.shot--hell:hover img { transform: none }
.shot--hell .shot__meta { color: var(--text) }
.shot--hell .shot__meta span { color: var(--text-muted) }

/* ============================================================
   KUNDENSTIMMEN
   ============================================================ */
.quote { background: var(--bg); border: var(--bw) solid var(--border); padding: var(--space-7) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5) }
.quote blockquote { font-size: var(--fs-lg); line-height: 1.6; font-weight: var(--fw-medium) }
.quote figcaption { margin-top: auto; display: flex; align-items: center; gap: var(--space-4); border-top: var(--bw) solid var(--border); padding-top: var(--space-4) }
.quote__who b { display: block; font-weight: var(--fw-black); letter-spacing: var(--ls-tight) }
.quote__who span { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px }
.quote .stars { margin-bottom: var(--space-2) }

/* ============================================================
   EINSATZGEBIET / KARTE
   ============================================================ */
.region { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--grid-gap); align-items: center }
.region__map { position: relative; background: var(--green-100); padding: var(--space-5) }
.region__map svg { width: 100%; height: auto }
.region__pin { cursor: pointer; transition: transform var(--t) }
.region__pin circle { transition: fill var(--t), r var(--t) }
.region__pin:hover circle, .region__pin:focus-visible circle { fill: var(--yellow) }
.region__pin text { font-size: var(--fs-map); font-weight: 700; fill: var(--green-900) }
.region__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-6) }
.region__list a {
  padding: 10px 18px; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  border: var(--bw) solid var(--border-strong); transition: background var(--t), color var(--t), border-color var(--t);
}
.region__list a:hover { background: var(--green); color: var(--white); border-color: var(--green) }

/* ============================================================
   FLACHE CTA-SEKTION
   ============================================================ */
.cta { background: var(--green); color: var(--white) }
.cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-8) }
.cta__text { max-width: 48ch }
.cta__text h2 { font-size: var(--fs-h2-sm)}
.cta__text p { margin-top: 10px; color: rgb(var(--rgb-white) / .78); line-height: 1.6 }
.cta .cta-row { margin-top: 0; flex: none }
.cta--light { background: var(--grey-200); background-image: none; color: var(--ink);
  --heading: var(--green); --text: var(--ink); --text-muted: var(--ink-60) }
.cta--light .cta__text p { color: var(--text-muted) }

/* ============================================================
   MEHRSTUFIGES FORMULAR
   ============================================================ */
.form { background: var(--white); border: var(--bw) solid var(--border); padding: var(--space-7) }
.form__progress { display: flex; gap: 2px; margin-bottom: var(--space-6) }
.form__progress li { flex: 1; display: grid; gap: 8px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--grey-500) }
.form__progress li::before { content: ""; height: 4px; background: var(--border); transition: background var(--t) }
.form__progress li[aria-current="step"] { color: var(--green) }
.form__progress li[aria-current="step"]::before,
.form__progress li.is-done::before { background: var(--yellow) }
.form__step { display: grid; gap: var(--space-5) }
.form__step[hidden] { display: none }
.form__nav { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap }
.form__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) }

/* Datei-Ablage (Karriere-Kurzbewerbung, Stromrechnung) */
.drop {
  border: 2px dashed var(--border-strong); padding: var(--space-7) var(--space-5); text-align: center;
  transition: border-color var(--t), background var(--t); position: relative;
}
.drop:hover, .drop.is-over { border-color: var(--green); background: var(--green-100) }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer }
.drop svg { width: 32px; height: 32px; margin: 0 auto var(--space-3); color: var(--green-600) }
.drop b { display: block; font-weight: var(--fw-bold) }
.drop span { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 5px }

/* ============================================================
   STELLEN / TEAM / WERTE
   ============================================================ */
.jobs { display: grid; gap: 2px; background: var(--border); margin-top: var(--space-8); border: var(--bw) solid var(--border) }
.job { background: var(--bg) }
.job > summary {
  display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6);
  cursor: pointer; list-style: none; flex-wrap: wrap;
}
.job > summary::-webkit-details-marker { display: none }
.job h3 { flex: 1; min-width: 220px; font-size: var(--fs-h3)}
.job__tags { display: flex; flex-wrap: wrap; gap: 8px }
.job__tag { font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 6px 12px; background: var(--green-100); color: var(--green) }
.job > summary .plus { width: 22px; height: 22px; flex: none; color: var(--green-600); transition: transform var(--t) }
.job[open] > summary .plus { transform: rotate(45deg) }
.job__body { padding: 0 var(--space-6) var(--space-6); display: grid; gap: var(--space-5); max-width: var(--measure-wide) }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-top: var(--space-8) }
.value__ic { width: 52px; height: 52px; display: grid; place-items: center; background: var(--yellow); color: var(--green-900); margin-bottom: var(--space-4) }
.value__ic svg { width: 24px; height: 24px }
.value p { margin-top: 10px; color: var(--text-muted); line-height: 1.65 }

/* ============================================================
   RECHTSTEXT-LAYOUT
   ============================================================ */
.legal { padding: var(--section-py-compact) 0 var(--section-py) }
.legal__grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--grid-gap); align-items: start }
.legal__toc { position: sticky; top: calc(var(--header-h) + var(--space-5)); display: grid; gap: 9px; font-size: var(--fs-small) }
.legal__toc a { color: var(--text-muted); border-left: 2px solid var(--border); padding: 4px 0 4px 14px; transition: color var(--t), border-color var(--t) }
.legal__toc a:hover { color: var(--green); border-color: var(--yellow) }
.legal__body { max-width: var(--measure-wide) }
.legal__body h2 { font-size: var(--fs-2xl); margin-top: var(--space-8) }
.legal__body h2:first-child { margin-top: 0 }
.legal__body h3 { font-size: var(--fs-md); margin-top: var(--space-6) }
.legal__body p, .legal__body ul { margin-top: var(--space-4); color: var(--text-muted); line-height: var(--lh-loose) }
.legal__body ul { padding-left: var(--space-5); list-style: disc }
.legal__body li { margin-top: 7px }
.legal__body a { color: var(--green); font-weight: var(--fw-semi); text-decoration: underline }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero--home .hero__cols,
  .hero--calc .hero__cols,
  .hero--b2b .hero__cols,
  .hero--local .hero__cols,
  .hero--person .hero__cols,
  .content__grid, .facts__grid, .calc, .region,
  .contactpage__grid, .legal__grid { grid-template-columns: 1fr }

  .content--right .content__media, .content--left .content__media { order: -1 }
  .hero__media { aspect-ratio: var(--ratio-wide); order: -1 }
  /* Startseiten-Hero: Video mobil zwischen Überschrift und Text, nie darüber */
  .hero--home .hero__cols { grid-template-areas: "head" "media" "body" }
  .hero--home .hero__media { order: 0 }
  .hero--calc .minicalc { order: -1 }
  .contactpage__aside, .legal__toc { position: static }
  .legal__toc { display: flex; flex-wrap: wrap; gap: 10px }
  .legal__toc a { border-left: 0; border-bottom: 2px solid var(--border); padding: 4px 0 }
  .cards--3, .cards--4, .values { grid-template-columns: repeat(2, 1fr) }
  .statband { grid-template-columns: 1fr }
}

@media (max-width: 720px) {
  .hero { padding-top: calc(var(--header-h) + var(--space-7)) }
  .hero--home .hero__cols { gap: 30px; padding-bottom: var(--space-8) }
  /* Trust-Band auf dem Telefon: nur das FREMDE Siegel bleibt stehen
     (Nutzer-Vorgabe 07.09.2026). Die drei eigenen Zusagen - Elektrofachkraefte,
     TUEV/CE, Garantie - kosteten zusammen fast einen Bildschirm und sagen
     nichts, was nicht schon im Hero als Stichpunkt und im Vergleich als Zeile
     steht. Die Auszeichnung „Marke Oberfranken" ist der einzige Punkt, der
     von aussen kommt und deshalb ueberhaupt als Siegel wirkt; sie ist am
     `.seal__logo` erkennbar und bleibt.
     Die Beschriftung „Womit Sie rechnen" faellt mit weg: sie kuendigt eine
     Aufzaehlung an, die es auf dem Telefon nicht mehr gibt. */
  .trust__inner { flex-wrap: wrap; gap: 18px 26px }
  .trust__label { display: none }
  .seal { display: none }
  .seal:has(.seal__logo) { display: flex }
  .seal svg { width: 40px; height: 40px }
  .stats { grid-template-columns: 1fr 1fr }
  .stat { padding: var(--space-6) var(--space-4) }
  .values, .form__grid2, .calc__split { grid-template-columns: 1fr }

  /* Karten-Raster werden auf dem Telefon GEWISCHT, nicht gestapelt
     (Nutzer-Vorgabe 07.09.2026 „erschlagend, nicht uebersichtlich genug").
     Vorher stand hier `grid-template-columns: 1fr` fuer .cards--2/3/4 - drei
     Paket-Karten wurden damit zu einem Turm von 2,4 Viewporthoehen, und der
     Besucher musste an drei vollen Karten vorbeiscrollen, um die naechste
     Aussage zu erreichen. Als Wischreihe kostet dieselbe Sektion eine
     Bildschirmhoehe, und die drei Karten stehen wieder im Vergleich
     nebeneinander - was sie inhaltlich ja sind.

     80 % Spaltenbreite ist Absicht: die naechste Karte bleibt rund 78 px weit
     angeschnitten sichtbar und sagt damit selbst, dass es weitergeht. Bei
     100 % sieht die Reihe aus wie eine einzelne Karte und niemand wischt.
     Bei 85 % blieben nur 61 px - gemessen zu wenig, weil die Karten weiss
     auf weissem Grund stehen und vom Anschnitt nur eine duenne Linie bleibt.

     Das Muster ist nicht neu erfunden, sondern das der bestehenden
     `.steps--cards` (weiter oben in dieser Datei). */
  .cards--2, .cards--3, .cards--4 {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    /* NUR quer. `overflow-x: auto` allein setzt overflow-y rechnerisch
       ebenfalls auf auto - der Kartenstreifen liess sich dann auch nach oben
       und unten schieben, was sich wie ein Fehler anfuehlt (Nutzer-Befund
       07.09.2026). `touch-action: pan-x` gibt die senkrechte Geste wieder an
       die Seite zurueck, sonst verschluckt der Streifen das Weiterscrollen. */
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: var(--space-3);
    -webkit-overflow-scrolling: touch;
  }
  .cards--2 > *, .cards--3 > *, .cards--4 > * { scroll-snap-align: start }

  /* Dasselbe fuer die Referenz-Galerie: vier Bilder untereinander sind vier
     Bildschirme, nebeneinander gewischt ist es einer. */
  .gallery {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: var(--space-3);
    -webkit-overflow-scrolling: touch;
  }
  .gallery > * { scroll-snap-align: start }
  .notice__inner { flex-direction: column; gap: var(--space-4) }
  .cta__inner { flex-direction: column; align-items: stretch }
  .cta .cta-row { width: 100% }
  /* Vergleichstabelle auf dem Telefon: enger setzen, aber dreispaltig lassen.
     Der Vergleichspunkt als eigene Zeile UEBER den beiden Werten war der
     naheliegende Gedanke und ist gemessen schlechter - die zusaetzliche Zeile
     je Punkt kostet mehr Hoehe, als die breiteren Spalten einsparen
     (2,84 statt 2,67 Viewporthoehen, gemessen 07.09.2026). Es bleibt beim
     Nebeneinander; gekuerzt werden nur Zellabstand und Zeilenhoehe.

     Die Schrift bleibt dabei auf --fs-sm (rund 15 px). Auf --fs-xs (13 px)
     waere die Tabelle noch etwas flacher, aber 13 px sind auf dem Telefon
     muehsam zu lesen - und eine Sektion, die den Kauf entscheidet, darf nicht
     die kleinste Schrift der Seite tragen. */
  .compare tbody th { width: 24%; font-size: var(--fs-sm) }
  .compare th, .compare td { padding: var(--space-3) var(--space-3) }
  .compare td { line-height: 1.45 }

  /* Die gruene Spalte MUSS sofort angeschnitten sichtbar sein.
     Vorher begann sie bei 393 px auf einem 390 px breiten Schirm - also
     vollstaendig ausserhalb (gemessen 07.09.2026). Auf dem Telefon las die
     Sektion sich damit als reine Auflistung dessen, was der Billiganbieter
     bietet, und ausgerechnet die eigene Spalte mit dem Verkaufsargument
     bekam niemand zu sehen. Kein Besucher scrollt quer, wenn nichts
     andeutet, dass dort etwas ist.

     440 px Tabellenbreite bei 24/38/38 Prozent Spaltenanteil lassen von der
     gruenen Spalte rund 70 px stehen. Weil ihr Kopf eine kraeftige gruene
     Flaeche ist, genuegt dieser Streifen als Hinweis - er sagt „hier geht es
     weiter", ohne dass es ein Bedienelement braucht.

     `min-width` allein genuegt dafuer NICHT: der Zellinhalt treibt die
     Tabelle auf 528 px, die Untergrenze bleibt wirkungslos und die gruene
     Spalte rutscht wieder hinaus. Erst `table-layout: fixed` mit fester
     Breite haelt die Spaltenanteile ein. */
  .compare { overflow-x: auto; overflow-y: hidden;
    touch-action: pan-x; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch }
  .compare table { table-layout: fixed; width: 440px; min-width: 440px }
  /* Feste Spaltenbreiten brechen lange Woerter nicht von selbst um - sie
     laufen aus der Zelle heraus. „Marktstammdatenregister" und
     „Ansprechpartner" ragten damit in die gruene Spalte hinein und der Text
     lag uebereinander (gesehen 07.09.2026).
     `overflow-wrap: anywhere` behob das, brach die Woerter aber hart mitten
     durch („Anmeldun-g"). Die Seite ist als `lang="de"` ausgezeichnet, also
     trennt `hyphens: auto` an echten Silbengrenzen; `break-word` greift nur
     noch dort, wo auch das nicht reicht. */
  .compare th, .compare td { overflow-wrap: break-word; hyphens: auto }
  .compare thead th:first-child, .compare tbody th { width: 29% }
  .compare th:nth-child(2), .compare td:nth-child(2),
  .compare th:nth-child(3), .compare td:nth-child(3) { width: 35.5% }
  .hero--career .hero__band { aspect-ratio: 16 / 10 }
}

@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr }
}

/* ============================================================
   MwSt-Hinweis auffälliger (Kundenwunsch)
   Komplett gelbe Fläche statt getöntem Grün, davor eine grosse „0 %".
   Additive Overrides zum .notice-Block weiter oben – daher am Ende.
   ============================================================ */
.notice { background: var(--yellow); border-top-color: var(--green-900); border-bottom-color: var(--green-900) }
.notice__body h2, .notice__body h3, .notice__body p, .notice__stand { color: var(--green-900) }
.notice__pct {
  flex: none;
  align-self: center;
  font-size: clamp(3.6rem, 9vw, 6.4rem);
  font-weight: var(--fw-black);
  line-height: .9;
  letter-spacing: var(--ls-tight);
  color: var(--green-900);
  white-space: nowrap;
}

/* ============================================================
   Startseiten-Hero: echtes Hintergrundfoto (Kundenwunsch)
   Dunkelgrüner Verlauf hält den Text links lesbar, rechts scheint das
   Foto stärker durch. Überschreibt die Basis-.hero-Fläche per Reihenfolge.
   ============================================================ */
.hero--home {
  background-image:
    linear-gradient(to right, rgb(var(--rgb-green-700) / .99) 30%, rgb(var(--rgb-green-700) / .93)),
    url('../img/foto-solarzaun.jpg');
  background-size: cover;
  background-position: center right;
}

/* ============================================================
   Bugfixes (Kundenwunsch)
   1) Kundenstimmen-/Quote-Slider braucht Abstand zur Überschrift –
      bisher stand er bündig (0 px) an der Head und wirkte überlappend.
   2) Die Ablauf-Timeline zeigt auf Desktop bereits alle Schritte
      nebeneinander (Grid, kein Overflow). Die Slider-Pfeile ergeben nur
      auf Mobile Sinn, wo die Steps zum horizontalen Scroller werden.
   ============================================================ */
.slider { margin-top: var(--space-7) }
.steps + .slider__nav { display: flex }

/* Links in der dunklen Kontaktkarte erben die helle Textfarbe nicht
   automatisch (ein <a> bringt eine eigene Farbe mit) – hier explizit hell. */
.contactcard a { color: var(--text) }

/* Formularfelder: weicherer Ruherand statt des als „schwarz" empfundenen
   --border-strong. Hover/Fokus/Auswahl (grün) bleiben unberührt. */
.input, .select, .textarea, .choice span { border-color: var(--border) }

/* ============================================================
   Kontrast-Fixes aus dem Seiten-Audit (Kundenwunsch: alle Seiten prüfen)
   A) Das Formular ist immer eine helle Karte. Auf dunklen Sektionen (CTA
      Rückruf, Karriere) erbt sein Inhalt sonst die weiße Textfarbe und
      Elemente mit var(--text-muted) werden unsichtbar. Deshalb setzt die
      Karte – wie .on-light – ihre Tokens auf den hellen Kontext zurück.
   B) Die hellen Zellen der Vergleichstabelle (grüne „wir"-Spalte, Fazit)
      liegen auf dunklem Sektionsgrund; ohne dunklen Text sind sie weiß
      auf hellgrün und damit unlesbar.
   ============================================================ */
.form {
  --text: var(--ink);
  --text-muted: var(--ink-60);
  --border: var(--grey);
  --border-strong: var(--grey-500);
  --bg-muted: var(--grey-200);
  color: var(--text);
}
.verdict { color: var(--ink) }
.compare td.compare__col--us { color: var(--ink) }

/* Pfeil-Links in den hellen Vergleichs-/Fazit-Zellen sollen grün sein –
   sonst erben sie auf dunklem Sektionsgrund das Gelb und werden auf
   hellgrünem Zellgrund unlesbar. */
.verdict .arrowlink, .compare td.compare__col--us .arrowlink { color: var(--green) }

/* Die Einsatzgebiet-Karte hat eine helle Fläche (green-100). Auf einer
   dunklen Sektion (z. B. Coburg) wäre die Legende sonst weiß auf hellgrün.
   Als helle Insel eigene Tokens setzen. */
.region__map { --text: var(--ink); --text-muted: var(--ink-60); color: var(--text) }

/* Echtes Logo (Vorlage) als Bild statt Inline-SVG. Helle Variante für die
   dunklen Kopf-/Fußflächen. Höhe steuert die Größe, Breite folgt dem Seitenverhältnis. */
.logo__img { height: 40px; width: auto; display: block; flex: none }
@media (max-width: 1024px) { .logo__img { height: 38px } }
@media (max-width: 480px)  { .logo__img { height: 36px } }

/* ============================================================
   ANFRAGE-POPUP (Modal). Nutzt .form als helle Karte (dunkler Text).
   ============================================================ */
.modal { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100% }
.modal::backdrop { background: rgb(var(--rgb-green-900) / .64); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px) }
.modal:not([open]) { display: none }
.modal[open] { display: flex; align-items: center; justify-content: center; padding: var(--space-5) }
.modal__box { position: relative; width: min(620px, 100%); max-height: calc(100dvh - 2 * var(--space-5)); overflow-y: auto; display: grid; gap: var(--space-4) }
.modal__close { position: absolute; top: var(--space-4); right: var(--space-4); width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink-60); background: var(--grey-200); transition: background var(--t), color var(--t) }
.modal__close:hover { background: var(--green); color: var(--white) }
.modal__lead { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55 }
.modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) }
.modal__note { font-size: var(--fs-sm); color: var(--text-muted) }
.modal__note a { color: var(--green); font-weight: var(--fw-bold) }
@media (max-width: 480px) { .modal__row { grid-template-columns: 1fr } }

/* ============================================================
   Überschriften grün (Kundenwunsch). Über das --heading-Token:
   hell = grün, dunkle Sektionen setzen es auf weiss, helle Inseln
   (Formular, Karte, .on-light) zurück auf grün.
   ============================================================ */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .h-display { color: var(--heading) }
.form, .region__map, .on-light { --heading: var(--green) }

/* ============================================================
   0 % MwSt · volle grüne Sektion mit kreisförmigem Badge (Redesign)
   ============================================================ */
.mwst { background: var(--green); color: var(--white); padding: var(--section-py) 0 }
.mwst__inner { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: clamp(32px, 5vw, 80px); align-items: center }
.mwst__badge { position: relative; width: min(340px, 78%); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center }
.mwst__ring { position: absolute; inset: 0; width: 100%; height: 100% }
.mwst__ring circle { fill: none; stroke: rgb(var(--rgb-yellow) / .3); stroke-width: 2; stroke-dasharray: 3 10 }
.mwst__ring .mwst__arc { fill: none; stroke: var(--yellow); stroke-width: 4; stroke-linecap: round }
.mwst__figure { position: relative; display: grid; justify-items: center; gap: 4px }
.mwst__pct { font-size: clamp(3.6rem, 9vw, 5.6rem); font-weight: var(--fw-black); color: var(--yellow); line-height: 1; letter-spacing: var(--ls-tight) }
.mwst__label { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: .22em; text-transform: uppercase }
.mwst__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); margin: var(--space-6) 0 var(--space-7) }
.mwst__list li { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: var(--fw-semi); line-height: 1.4 }
.mwst__list svg { width: 22px; height: 22px; flex: none; color: var(--yellow); margin-top: 1px }
@media (max-width: 900px) {
  .mwst__inner { grid-template-columns: 1fr; gap: var(--space-7) }
  .mwst__list { grid-template-columns: 1fr }
  .mwst__badge { width: min(240px, 62%) }
}

/* ============================================================
   UNSERE LÖSUNGEN — getabbte Lösungsübersicht (Vorschau-Design)
   Linke Tab-Spalte, rechts grosse Bild-+Text-Bühne pro Lösung.
   ============================================================ */
.solutions { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-7); margin-top: var(--space-8); align-items: start }
.solutions__tabs { display: grid; gap: var(--space-3) }
.solutions__tab { text-align: left; padding: var(--space-4) var(--space-5); background: var(--bg-muted); font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--text); border: var(--bw) solid transparent; cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t) }
.solutions__tab:hover { color: var(--green) }
.solutions__tab[aria-selected="true"] { background: var(--white); color: var(--green); border-color: var(--green) }
.solutions__panel[hidden] { display: none }
.solutions__panel { background: var(--bg-muted); overflow: hidden }
.solutions__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-900) }
.solutions__media img { width: 100%; height: 100%; object-fit: cover }
.solutions__text { padding: var(--space-6) var(--space-7) var(--space-7) }
.solutions__text p { margin-top: var(--space-3); color: var(--text-muted); line-height: 1.6; max-width: 60ch }
.solutions__text .btn { margin-top: var(--space-5) }
@media (max-width: 760px) {
  .solutions { grid-template-columns: 1fr }
  .solutions__tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: var(--space-2) }
}

/* ============================================================
   RECHNER-REDESIGN (Prinzipien: ein gebundenes Objekt, zwei Farbzonen,
   dunkle Ergebnis-Bühne, Gelb nur auf Ergebniszahl + CTA, Fortschrittsbalken).
   ============================================================ */
.calc { grid-template-columns: 1.05fr .95fr; gap: 0; align-items: stretch; background: var(--white); border: var(--bw) solid var(--border) }
.calc__panel { background: var(--white); padding: var(--space-7); align-content: start }
.calc__panel .calc__row output { color: var(--green) }
.calc__result { background: var(--green); color: var(--white); box-shadow: none;
  --text: var(--white); --text-muted: rgb(var(--rgb-white) / .72) }
/* horizontales Padding, damit die Werte nicht an der mittleren Trennlinie kleben */
.calc__split > div { padding: var(--space-4) var(--space-5) }
.calc__label { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: rgb(var(--rgb-white) / .78); text-transform: uppercase; letter-spacing: .09em }
.calc__big b { color: var(--yellow) }
.calc__big > span { color: rgb(var(--rgb-white) / .82) }
.calc__meter-track { height: 10px; background: rgb(var(--rgb-white) / .18) }
.calc__meter-fill { display: block; height: 100%; width: 0; background: var(--yellow); transition: width var(--t) }
.calc__meter-label { margin-top: var(--space-2); font-size: var(--fs-sm); color: rgb(var(--rgb-white) / .82) }
.calc__meter-label b { color: var(--white); font-weight: var(--fw-black) }
.calc__split { background: rgb(var(--rgb-white) / .2) }
.calc__split > div { background: var(--green) }
.calc__split b { color: var(--white) }
.calc__split span { color: rgb(var(--rgb-white) / .72) }
.calc__result .calc__assume { color: rgb(var(--rgb-white) / .68); border-top-color: rgb(var(--rgb-white) / .2) }
.calc__result .calc__assume b { color: var(--white) }
@media (max-width: 1024px) { .calc { grid-template-columns: 1fr } }

/* ============================================================
   Feinschliff: einheitliche Kopf-Abstände, grauer Inhalts-Kasten,
   Schritte als weisse Bild-Karten (2 gleichzeitig, interaktiv).
   ============================================================ */
/* Einheitlicher Rhythmus Oberüberschrift → Überschrift → Einleitung,
   unabhängig davon, ob .head, .content__body oder Hero. */
.eyebrow + :is(h1, h2, h3, .h1, .h2, .h3, .h-display) { margin-top: var(--space-4) }
:is(h1, h2, h3, .h1, .h2, .h3, .h-display) + :is(.lead, .sub, .hero__sub) { margin-top: var(--space-5) }
.head .h2 { margin-top: var(--space-4) }

/* Grauer Inhalts-Kasten (Figur-Grund) */
.boxed { background: var(--bg-muted); padding: clamp(24px, 4vw, 56px) }

/* Ablauf: weisse Karten mit Bild, 2 gleichzeitig sichtbar, per Pfeil scrollbar */
.steps--cards { grid-auto-flow: column; grid-auto-columns: calc((100% - var(--card-gap)) / 2); gap: var(--card-gap); overflow-x: auto; scroll-snap-type: x mandatory; background: transparent; padding-bottom: var(--space-3) }
.steps--cards .step { background: var(--white); border: var(--bw) solid var(--border); scroll-snap-align: start; padding: 0 0 var(--space-6); gap: var(--space-3); overflow: hidden }
.steps--cards .step__media { aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: var(--space-4); background: var(--green-900) }
.steps--cards .step__media img { width: 100%; height: 100%; object-fit: cover }
.steps--cards .step > :not(.step__media) { margin-inline: var(--space-6) }
.steps--cards + .slider__nav { display: flex }
@media (max-width: 720px) { .steps--cards { grid-auto-columns: min(84%, 320px) } }

/* <fieldset> bringt in Formularen einen Standard-Rahmen mit (die „schwarze
   Linie" um die Eingaben). In .form/.form__step nicht gewollt – zurücksetzen. */
.form fieldset, .form__step, .calc fieldset, .leadform fieldset { border: 0; margin: 0; padding: 0; min-width: 0 }

/* ============================================================
   Bild-/Text-Proportion in Content-Sektionen: das Bild füllt die
   Spaltenhöhe und passt sich so der Texthöhe an (nicht mehr „zu flach"
   neben zu hohem Text). Feste, gefüllte Bildflächen wirken stimmiger.
   ============================================================ */
.content__grid { align-items: stretch }
.content__media { height: 100%; min-height: clamp(260px, 30vw, 440px); aspect-ratio: auto }
.content__media img { width: 100%; height: 100%; object-fit: cover; display: block }
@media (max-width: 900px) { .content__media { min-height: 220px } }

/* Dunkle Flächen müssen --heading auf weiss setzen, sonst ist die Überschrift
   grün auf grün (gleiche Farbe wie der Grund) und damit unsichtbar. */
.hero, .cta, .section--shot { --heading: var(--white) }

/* Kundenstimmen: engere Zeilen, breitere Karten (längere Zitate wirkten gedrängt) */
.quote blockquote { line-height: 1.45 }
.slider__track { grid-auto-columns: min(88%, 560px) }

/* Zentrierte Oberüberschrift: der vorangestellte gelbe Strich wirkt mittig
   unsymmetrisch – dort weglassen. */
.head--center .eyebrow::before { display: none }
.head--center .eyebrow { gap: 0 }

/* Vergleichstabelle füllt die Breite – schmale, linksbündige Tabelle liess
   rechts viel toten Freiraum. */
.compare table { width: 100% }

/* Der helle Komponenten-Streifen brachte eine graue Unterkante mit, die als
   loser Strich wirkte – entfernt. */
.trust--light { border-bottom: 0 }

/* Lange Kundenstimme: Karten breiter, Zeilen enger für besseren Lesefluss */
.slider__track { grid-auto-columns: min(92%, 640px) }
.quote blockquote { line-height: 1.4; font-size: var(--fs-md) }

/* 0%-Badge: der gelbe Bogen kreist auf der gestrichelten Linie um die Null */
.mwst__arc { transform-box: view-box; transform-origin: center; animation: mwst-orbit 7s linear infinite }
@keyframes mwst-orbit { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .mwst__arc { animation: none } }

/* Social Proof im Anfrage-Popup (Conversion) */
.modal__trust { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted) }
.modal__trust .stars { display: inline-flex; gap: 2px }
.modal__trust .stars svg { width: 15px; height: 15px; color: var(--star) }
.modal__trust b { color: var(--ink); font-weight: var(--fw-black) }

/* Einheitlicher vertikaler Rhythmus im Hero-Textblock: Vorteilsliste und
   folgende Blöcke bekommen konsistenten Abstand zum Subtext (klebte vorher). */
.hero__sub + :is(.perks, .checks, .cta-row, .rating) { margin-top: var(--space-6) }
.perks { margin-top: var(--space-6) }
.perks + .cta-row { margin-top: var(--space-6) }

/* Zwei gleich getönte Sektionen nebeneinander: an der Grenze addieren sich sonst
   beide Polster und der Abstand wirkt doppelt so hoch. Das obere Polster der
   zweiten Sektion entfällt dann – der Übergang bleibt ein einfacher Abstand. */
.section:not(.section--muted):not(.section--invert):not(.section--shot) + .section:not(.section--muted):not(.section--invert):not(.section--shot),
.section--muted + .section--muted,
.section--invert + .section--invert,
.section--invert.section--shot + .section--invert.section--shot { padding-top: 0 }

/* Formular-Auswahl als flache Illustrations-Kacheln (Conversion + kompakt):
   Icon links, Text rechts — bewusst breiter als hoch, damit das Formular/Popup
   flach bleibt. Festes 2×2-Raster (symmetrisch); eine ungerade letzte Kachel
   spannt die volle Breite, damit keine verwaiste Kachel entsteht. */
.choices--tiles { grid-template-columns: 1fr 1fr }
.choices--tiles .choice span {
  flex-direction: row; align-items: center; justify-content: flex-start;
  text-align: left; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); line-height: 1.3;
}
.choices--tiles .choice .ill { width: 64px; height: 64px; flex: none; color: inherit }
.choices--tiles .choice:last-child:nth-child(odd) { grid-column: 1 / -1 }
/* Mobil: symmetrisches 2×2, dafür Icon oben / Label unten (kompakter als flach) */
@media (max-width: 480px) {
  .choices--tiles { grid-template-columns: 1fr 1fr }
  .choices--tiles .choice span {
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: var(--space-2); padding: var(--space-5) var(--space-3);
  }
  .choices--tiles .choice .ill { width: 48px; height: 48px }
}

/* ============================================================
   ANFRAGE-POPUP · Color-Blocking (grüne Kopfzone + weisser Körper)
   Figur-Grund: der Titel + Social-Proof + Fortschritt sitzen auf einer
   grünen Bühne, das eigentliche Formular auf ruhigem Weiss darunter.
   ============================================================ */
.modal__box.form { padding: 0; gap: 0; border: 0 }
/* ---- Bestaetigung nach dem Absenden -------------------------------------
   Eigene Klasse statt '.form': die setzt bewusst 'padding:0', weil das
   Formular seinen Innenabstand selbst mitbringt. Der Dank-Schirm bringt keinen
   mit - deshalb stand sein Text ohne Rand und der Knopf lief randlos von Kante
   zu Kante (03.09.2026). */
/* Die weisse Flaeche und die Kante kommen sonst von '.form'. Wer die Klasse
   nicht benutzt, muss sie mitbringen - sonst steht der Dialog ohne Grund auf
   der Seite und man liest durch ihn hindurch. */
.modal__box--danke { padding: 0; gap: 0; overflow: hidden;
  background: var(--white); border: var(--bw) solid var(--border); border-radius: var(--radius, 0) }
.modal__box--danke .modal__body.danke { display: grid; justify-items: center; text-align: center;
  gap: var(--space-3); padding: var(--space-7) var(--space-6) var(--space-6) }
.danke__mark { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%;
  background: var(--green); color: var(--white); margin-bottom: var(--space-2); flex: none }
.danke__mark svg { color: var(--white) }
.danke .eyebrow { justify-content: center }
.danke__lead { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; max-width: 40ch }
.danke__tel { display: inline-flex; align-items: center; gap: 9px; font-weight: var(--fw-black);
  font-size: var(--fs-lg); color: var(--green); margin-top: var(--space-1) }
.danke__tel svg { color: var(--green) }
.danke .btn { margin-top: var(--space-4); min-width: 190px }

.modal__head {
  background: var(--green); color: var(--white); --heading: var(--white);
  padding: var(--space-6) var(--space-7) var(--space-5);
}
.modal__head .eyebrow { color: var(--yellow) }
.modal__head .modal__trust { margin-top: var(--space-3); color: rgb(var(--rgb-white) / .82) }
.modal__head .modal__trust b { color: var(--white) }
.modal__head .form__progress { margin: var(--space-5) 0 0 }
.modal__head .form__progress li { color: rgb(var(--rgb-white) / .55) }
.modal__head .form__progress li::before { background: rgb(var(--rgb-white) / .22) }
.modal__head .form__progress li[aria-current="step"] { color: var(--white) }
.modal__head .form__progress li[aria-current="step"]::before,
.modal__head .form__progress li.is-done::before { background: var(--yellow) }

.modal__body { display: grid; gap: var(--space-5); padding: var(--space-6) var(--space-7) var(--space-7) }

.modal .modal__close { background: rgb(var(--rgb-white) / .16); color: var(--white) }
.modal .modal__close:hover { background: var(--yellow); color: var(--green) }

@media (max-width: 480px) {
  .modal__head { padding: var(--space-5) var(--space-5) var(--space-4) }
  .modal__body { padding: var(--space-5) }
}

/* Inline-Kennzahl im Fliesstext · „die Zahl ist der Held" (§0), aber ruhig:
   kein Karten-Schatten, nur der gelbe Signaturstrich links markiert den Beweis. */
.factline { display: flex; align-items: center; gap: var(--space-4);
  background: var(--green); color: var(--white); padding: var(--space-4) var(--space-5) }
.factline__num { font-size: var(--fs-stat); font-weight: var(--fw-black);
  color: var(--yellow); line-height: 1; letter-spacing: -.045em; flex: none }
.factline__txt { font-size: var(--fs-sm); color: rgb(var(--rgb-white) / .85); line-height: 1.5 }

/* Popup-Feinschliff: Titel größer (ohne Eyebrow), Buttons klar verteilt.
   Der Zurück-Button (btn--ghost) ist für dunkle Flächen gebaut (weiss auf
   transparent) und im weissen Körper unsichtbar → hier als sichtbarer,
   grün umrandeter Sekundär-Button. Nav: Zurück links, Senden rechts. */
.modal__head h2 { font-size: var(--fs-h2-sm); line-height: var(--lh-head); letter-spacing: var(--ls-head) }
.modal__body .form__nav { justify-content: space-between; align-items: center; margin-top: var(--space-5) }
.modal__body .btn--ghost { background: var(--white); color: var(--green); border-color: var(--border-strong) }
.modal__body .btn--ghost:hover { background: var(--green); color: var(--white); border-color: var(--green) }
/* Bewertung einzeilig halten (Sterne · 4,9 · 87 Bewertungen), auch mobil */
.modal__head .modal__trust { flex-wrap: nowrap; white-space: nowrap }
/* Klarer Abstand zwischen Schritt-Legende und Auswahl (Legende in Grid-Fieldset
   erbt den gap nicht zuverlässig → explizit setzen). */
.modal__body .form__step > legend { margin-bottom: var(--space-4) }
.hero--home .hero__head, .hero--home .hero__body { min-width: 0 }

/* Kopf + Umschalter in einer Zeile: Intro links, Regler rechts – unten auf Höhe
   des Lead-Textes (align-items: flex-end). Auf schmalen Screens bricht er um. */
.switchrow { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--space-5) var(--space-8); margin-bottom: var(--space-6) }
.switchrow .head { margin-bottom: 0; flex: 1 1 34ch }
.switchrow .switch { margin-bottom: 0; flex: none }

/* FAQ zweispaltig (5+5) statt einer langen schmalen Liste – halbiert die Höhe,
   wirkt geordnet. Jede Spalte ist ein eigenes .acc mit eigenen Trennlinien. */
.faqgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--grid-gap); align-items: start }
@media (max-width: 760px) { .faqgrid { grid-template-columns: 1fr } }

/* „Sieben Gewerke": Text + Akkordeon in halber Breite links, Bild rechts, das
   beim Scrollen mitläuft (sticky). Bei FAQ/Listen-Layouts besser als volle Breite. */
.content__grid.gewerke { grid-template-columns: 1.15fr .85fr; align-items: start }
.gewerke__media { position: sticky; top: calc(var(--header-h) + var(--space-5)); align-self: start;
  height: auto; min-height: 0; aspect-ratio: var(--ratio-content) }
@media (max-width: 1024px) { .gewerke__media { position: static; order: -1 } }

/* Verdict-Kasten auf dunklen Sektionen: dunkle Insel + weisser Text statt
   hellgrüner Kasten mit Ink-Text (§3, §11 – Dunkelgrau auf Grün vermeiden). */
.section--invert .verdict, .section--shot .verdict, .on-dark .verdict {
  background: rgb(var(--rgb-white) / .1); color: var(--white);
}
.section--invert .verdict b, .section--shot .verdict b, .on-dark .verdict b { color: var(--white) }
.section--invert .verdict .arrowlink, .section--shot .verdict .arrowlink { color: var(--yellow) }

/* Bild neben einer aufklappbaren/langen Spalte (Akkordeon): festes Format + sticky,
   nie auf die (wachsende) Spaltenhöhe strecken (K5/K8). */
.content__media.media--sticky { position: sticky; top: calc(var(--header-h) + var(--space-5));
  align-self: start; height: auto; min-height: 0; aspect-ratio: var(--ratio-card) }
@media (max-width: 1024px) { .content__media.media--sticky { position: static } }

/* Kopf ohne Eyebrow-Signaturlinie (z. B. Bewertungen-Slider). */
.head--noline .eyebrow::before { display: none }
.head--noline .eyebrow { gap: 0 }

/* hero--tool: Zwei-Spalten — Text links, gerahmtes Seitenbild rechts, damit der
   schmale Werkzeug-Kopf nicht halb leer wirkt (§19, K16). */
.hero--tool .hero__cols { display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 4.5vw, 64px); align-items: center; padding-bottom: var(--space-9) }
.hero--tool .hero__inner { max-width: none }
.hero--tool .hero__media { overflow: hidden; background: var(--green-900);
  aspect-ratio: var(--ratio-hero); box-shadow: var(--shadow-lg) }
.hero--tool .hero__media img { width: 100%; height: 100%; object-fit: cover }
@media (max-width: 1024px) { .hero--tool .hero__cols { grid-template-columns: 1fr } }

/* hero--toggle: grün-überdecktes Hintergrundfoto + zentrierte CTA-Zeile, damit der
   zentrierte Kopf nicht bildlos und ohne Handlungsaufforderung dasteht (K16, §2). */
.hero--toggle { position: relative; overflow: hidden }
.hero--toggle > .wrap { position: relative; z-index: 1 }
.hero--toggle .hero__bg { position: absolute; inset: 0; z-index: 0 }
.hero--toggle .hero__bg img { width: 100%; height: 100%; object-fit: cover }
.hero--toggle .hero__bg::after { content: ""; position: absolute; inset: 0;
  background: rgb(var(--rgb-green-700) / .95) }
.hero--toggle .cta-row { justify-content: center }

/* Wertebereich im Rechner: „X bis Y" statt blankem Gedankenstrich (der zwischen
   zwei Beträgen als Minus gelesen wird). Etwas kleiner, damit die Spanne in eine
   Zeile passt – beide Werte gleich groß (K11). */
.calc__big--range b { font-size: var(--fs-stat) }

/* Hero-Kopf nutzt ~70 % der Breite statt 46ch – sonst steht links und rechts
   zu viel Weißraum (§19). Der Fliesstext bleibt separat auf Lesebreite. */
.hero--toggle .hero__inner { max-width: min(70%, 78ch) }

/* Schalter-Labels auf dunklem Grund in vollem Weiss: 72 %-Weiss auf Grün liest
   als Dunkelgrau (K1). Der aktive Zustand hebt sich weiter über die gelbe Fläche ab. */
.switch__btn { color: var(--white) }

/* Trennwort „bis" im Wertebereich: klein und ruhig, damit die ZAHLEN die
   Hierarchie tragen (nicht das Bindewort). */
.calc__sep { font-style: normal; font-size: .34em; font-weight: var(--fw-bold);
  letter-spacing: 0; margin-inline: .3em; color: rgb(var(--rgb-white) / .8) }

/* Kicker und Umschalter im zentrierten Hero stehen untereinander – als
   inline-flex würden sie im breiteren Kopf nebeneinander rutschen. */
.hero--toggle .hero__kicker { display: flex; width: max-content; margin-inline: auto }
.hero--toggle .switch { display: flex; width: max-content; margin-inline: auto }

/* Hero-Bild im Werkzeug-Hero darf mobil NICHT über die Überschrift rutschen
   (die globale .hero__media{order:-1}-Regel würde genau das tun) — §24. */
@media (max-width: 1024px) { .hero--tool .hero__media { order: 0 } }

/* ---- Fixes aus dem visuellen Playwright-Audit ---- */

/* Helle CTA-Variante ist eine helle Insel: sie MUSS ihre Text-Tokens zurücksetzen,
   sonst bleibt die H2 weiss auf hellgrau (Kontrast 1.1 = unsichtbar). §3/§11.
   Höhere Spezifität, weil `.cta { --heading: white }` später steht. */
.cta.cta--light { --heading: var(--green); --text: var(--ink); --text-muted: var(--ink-60); color: var(--ink) }

/* Mini-Rechner ist eine weisse Insel im dunklen Hero – Überschrift muss grün
   werden, sonst weiss auf weiss (Kontrast 1.0). §3 */
.minicalc { --heading: var(--green); --text: var(--ink); --text-muted: var(--ink-60) }

/* Werkzeug/Media im Hero darf mobil nicht über die H1 rutschen (§24). */
@media (max-width: 1024px) { .hero--calc .minicalc { order: 0 } }

/* Kollisionen (K10): Blöcke, die direkt aneinander stossen, bekommen Abstand. */
.notfound__code { margin-block: var(--space-5) }
.hero__cols + .trust { margin-top: var(--space-6) }
.hero__band { margin-top: var(--space-6) }

/* Kundenstimme als begrenztes Objekt (§4): weisse Karte auf der grauen Fläche,
   Zitat in lesbarer Größe statt Überschriftengröße, engere Zeilen, Content bis
   ~70 % Breite (§19). Die Bewertungszahl steht darunter als Social Proof (§0). */
.testimonial { background: var(--white); border: var(--bw) solid var(--border);
  padding: clamp(28px, 4vw, 52px); max-width: min(70%, 74ch); margin-inline: auto;
  display: grid; justify-items: center; gap: var(--space-5); text-align: center }
.testimonial .stars svg { width: 20px; height: 20px }
.testimonial blockquote { font-size: var(--fs-xl); line-height: 1.45;
  font-weight: var(--fw-medium); color: var(--text); max-width: 56ch }
.testimonial figcaption { display: grid; gap: 3px }
.testimonial figcaption b { font-size: var(--fs-md); font-weight: var(--fw-black); color: var(--heading) }
.testimonial figcaption span { font-size: var(--fs-sm); color: var(--text-muted) }
.testimonial__proof { margin-top: var(--space-5); text-align: center;
  font-size: var(--fs-sm); color: var(--text-muted) }
.testimonial__proof b { font-size: var(--fs-lg); font-weight: var(--fw-black); color: var(--heading) }
@media (max-width: 720px) { .testimonial { max-width: 100% } }

/* ============================================================
   EINSATZGEBIET-BAND — ersetzt die schematische Karten-Illustration.
   Kompaktes Band: Icon-Kachel + Label links, Orte als Aufzählung rechts.
   ============================================================ */
/* Das Band ist eine EIGENE Sektion, kein Anhaengsel der Sektion darueber
   (Nutzer-Vorgabe 07.09.2026). Deshalb kein `margin-top` mehr: es traegt
   seinen Abstand als eigene Farbzone selbst. */
.arealine { background: var(--green); color: var(--white); display: block;
  --text: var(--white); --text-muted: rgb(var(--rgb-white) / .85) }

/* Es darf nie an eine gleichfarbige Flaeche stossen. Folgt es auf eine
   dunkelgruene Sektion, kippt es auf den hellen Grund - sonst laufen
   Tannengruen (#1A4A2E) und Tiefengruen (#0F2E1D) zu einer Flaeche zusammen
   und die Trennung ist nur noch zu ahnen. */
.section--invert + .arealine,
.section--shot + .arealine,
.hero + .arealine { background: var(--bg-muted); color: var(--ink);
  --text: var(--ink); --text-muted: var(--ink-60) }
.section--invert + .arealine .arealine__badge,
.section--shot + .arealine .arealine__badge,
.hero + .arealine .arealine__badge { background: rgb(var(--rgb-green) / .1);
  border-color: rgb(var(--rgb-green) / .2) }
.section--invert + .arealine .arealine__badge svg,
.section--shot + .arealine .arealine__badge svg,
.hero + .arealine .arealine__badge svg { color: var(--green) }
.section--invert + .arealine .arealine__title,
.section--shot + .arealine .arealine__title,
.hero + .arealine .arealine__title { color: var(--green) }
.section--invert + .arealine .arealine__kicker,
.section--shot + .arealine .arealine__kicker,
.hero + .arealine .arealine__kicker { color: var(--ink-60) }
.section--invert + .arealine .arealine__places a,
.section--shot + .arealine .arealine__places a,
.hero + .arealine .arealine__places a { color: var(--green) }
.section--invert + .arealine .arealine__places a:hover,
.section--shot + .arealine .arealine__places a:hover,
.section--invert + .arealine .arealine__places a:focus-visible,
.section--shot + .arealine .arealine__places a:focus-visible,
.hero + .arealine .arealine__places a:hover,
.hero + .arealine .arealine__places a:focus-visible { color: var(--green-600) }
.section--invert + .arealine .arealine__places [aria-current="page"],
.section--shot + .arealine .arealine__places [aria-current="page"],
.hero + .arealine .arealine__places [aria-current="page"] { color: var(--ink-60) }
.section--invert + .arealine .arealine__places li:has([aria-current="page"])::before,
.section--shot + .arealine .arealine__places li:has([aria-current="page"])::before,
.hero + .arealine .arealine__places li:has([aria-current="page"])::before { background: rgb(var(--rgb-green) / .3) }

/* Icon-Kachel, Beschriftung und Orte stehen auf EINER Linie (Nutzer-Vorgabe
   07.09.2026). Vorher brach die Ortsliste als ganzer Flex-Block unter das
   Label, sobald sie breiter wurde als der Rest - sie sass dann tiefer als das
   Icon. Jetzt bricht nur die Liste in sich um, der Block bleibt mittig. */
.arealine__inner { display: flex; align-items: center; flex-wrap: nowrap;
  gap: var(--space-5) var(--space-7); padding-block: var(--space-6) }
.arealine__badge { width: 54px; height: 54px; flex: none; display: grid; place-items: center;
  background: rgb(var(--rgb-white) / .12); border: var(--bw) solid rgb(var(--rgb-white) / .2) }
.arealine__badge svg { width: 24px; height: 24px; color: var(--white) }
.arealine__label { display: grid; gap: 3px; flex: none }
.arealine__kicker { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: rgb(var(--rgb-white) / .8) }
.arealine__title { font-size: var(--fs-lg); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1.1 }
.arealine__places { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; gap: var(--space-3) var(--space-5);
  flex: 1 1 auto; margin-left: auto }
.arealine__places li { display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-sm); font-weight: var(--fw-bold) }
.arealine__places li::before { content: ""; width: 5px; height: 5px; flex: none; background: var(--yellow) }
.arealine__places a { color: var(--white); transition: color var(--t) }
.arealine__places a:hover,
.arealine__places a:focus-visible { color: var(--yellow) }
/* Der aktuelle Ort ist kein Ziel, sondern das Hier: kein Link, gedaempft, und
   sein Punkt verliert die Marken-Farbe. Ohne das sahen verlinkte und
   unverlinkte Orte gleich aus (03.09.2026). */
.arealine__places [aria-current="page"] { color: rgb(var(--rgb-white) / .62) }
.arealine__places li:has([aria-current="page"])::before { background: rgb(var(--rgb-white) / .35) }
@media (max-width: 900px) {
  .arealine__inner { flex-wrap: wrap }
  .arealine__places { margin-left: 0; justify-content: flex-start; flex-basis: 100% }
}

/* Region-Textspalte steht jetzt allein (Karte entfernt) */
.region { grid-template-columns: 1fr }

/* Frueher hing das Band im Rumpf der Sektion darueber und deren unterer
   Abstand musste dafuer auf 0 - seit es eine eigene Sektion ist (07.09.2026),
   traegt die Sektion davor wieder ihren normalen Abstand. Die Regel
   `.section:has(> .arealine){padding-bottom:0}` stand hier und ist entfallen. */

/* Fremd-Auszeichnung in Originalfarben: anders als die eigenen Siegel kann sie
   nicht auf `currentColor` umgefaerbt werden, ohne die Marke zu verfaelschen.
   Das freigestellte Logo steht direkt auf der gruenen Leiste – sein Rot traegt
   genug Eigenkontrast, ein Traegerfeld waere nur zusaetzliche Dekoration (§0). */
.seal__logo { display: grid; place-items: center; height: 72px; flex: none }
.seal__logo img { height: 100%; width: auto; display: block }

/* Empfehlungs-Assistent: die <legend> traegt hier die Rolle, die im Rechner das
   <label> hat – gleiche Optik, aber korrekte Semantik fuer Radio-Gruppen. */
.calc__legend { display: block; width: 100%; padding: 0; margin-bottom: var(--space-3);
  font-weight: var(--fw-bold); font-size: var(--fs-sm) }
.calc__hint { font-weight: var(--fw-medium); color: var(--ink-60); margin-left: var(--space-2) }
/* `.calc__row label` ist auf Slider-Beschriftungen ausgelegt (space-between,
   fett). Auswahlkacheln brauchen das Gegenteil, sonst rutscht ihr Inhalt
   auseinander und wirkt wie ein Formularfehler. */
.calc__row .choice { display: flex; justify-content: stretch; align-items: stretch;
  gap: 0; font-weight: var(--fw-medium); font-size: var(--fs-sm) }
/* Die Empfehlung ist ein Wort, keine Zahl – `--fs-stat-lg` wuerde sie ueber
   drei Zeilen brechen. */
.calc__big--text b { font-size: var(--fs-h2-sm); line-height: 1.1; letter-spacing: var(--ls-tight) }
.calc__why { font-size: var(--fs-sm); line-height: 1.55; color: rgb(var(--rgb-white) / .84) }

/* Ehrlicher Gegen-Hinweis auf der Empfehlungs-Buehne: Wer eine Wallbox angibt
   und aus Mangel an Dachflaeche trotzdem beim Balkonkraftwerk landet, muss
   erfahren, dass 0,8 kW gegen 11 kW Ladeleistung nichts ausrichten. Bewusst in
   Weiss statt Gelb – Gelb bleibt der Empfehlung und dem CTA vorbehalten (§1). */
.calc__caveat { border: var(--bw) solid rgb(var(--rgb-white) / .3); padding: var(--space-4) var(--space-5) }
.calc__caveat-title { font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--white); margin-bottom: var(--space-3) }
.calc__caveat-list { display: grid; gap: var(--space-3); font-size: var(--fs-sm); line-height: 1.5; color: rgb(var(--rgb-white) / .84); list-style: none; margin: 0; padding: 0 }
.calc__caveat-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start }
.calc__caveat-list li::before { content: "–"; color: var(--yellow); font-weight: var(--fw-black) }

/* ============================================================
   EINGEBETTETER FREMDINHALT (Zwei-Klick)
   Erst nach Klick wird der Anbieter geladen; vorher verlaesst
   keine IP-Adresse die Seite. Deshalb braucht die Seite weiterhin
   kein Einwilligungsbanner. Hoehen sind am tado-Rechner gemessen
   (988 px bei 1200, 1400 bei 760, 1430 bei 390) und mit Reserve
   gesetzt - laengere Schritte scrollen im Rahmen selbst.
   ============================================================ */
.embed { margin-top: var(--space-7); border: var(--bw) solid var(--border); border-radius: var(--r-sm); background: var(--bg-muted); overflow: hidden }
/* Auf getoenter Flaeche waere der Kasten sonst unsichtbar. */
.section--muted .embed { background: var(--white) }
.embed__platz { display: grid; gap: var(--space-5); justify-items: center; text-align: center; padding: var(--space-8) var(--gutter); max-width: 62ch; margin-inline: auto }
.embed__text { color: var(--text); line-height: var(--lh-body) }
.embed__text b { font-weight: var(--fw-bold) }
.embed iframe { display: block; width: 100%; height: 1480px; border: 0; background: var(--white) }
@media (min-width: 761px)  { .embed iframe { height: 1440px } }
@media (min-width: 1100px) { .embed iframe { height: 1000px } }
.embed--geladen { background: var(--white) }
.embed__nachsatz { margin-top: var(--space-6); text-align: center }

/* Volle Sektionsbreite: der Rechner steht ausserhalb des wrap und wirkt so als
   eigener Abschnitt, nicht als Kasten in einem Kasten. Seitliche Rahmen weg,
   nur Ober- und Unterkante bleiben als Trennung. */
.embed--voll { border-inline: 0; border-radius: 0 }

/* ============================================================
   EINWILLIGUNG fuer externe Inhalte
   Ablehnen und Zustimmen sind bewusst gleich gross, gleich gefaerbt
   und stehen nebeneinander - alles andere waere ein Dark Pattern und
   macht die Einwilligung angreifbar. Die Knopfleiste steht fest am
   unteren Rand, der Text darueber scrollt: so sind auf 390 px beide
   Knoepfe ohne Scrollen erreichbar.
   ============================================================ */
.optin {
  position: fixed; inset: auto 0 0 0; z-index: 200;
  background: var(--white); border-top: var(--bw-strong) solid var(--border);
  box-shadow: var(--shadow-lg);
}
.optin__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: var(--space-5) var(--gutter);
  display: grid; gap: var(--space-5); align-items: center;
}
.optin__text { max-height: 46vh; overflow-y: auto }
.optin__titel { font-size: var(--fs-md); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); margin-bottom: var(--space-2) }
.optin__text p { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-body) }
.optin__mehr { margin-top: var(--space-3) }
.optin__mehr summary { font-size: var(--fs-sm); font-weight: var(--fw-semi); cursor: pointer; color: var(--text) }
.optin__mehr p { margin-top: var(--space-3) }
.optin__mehr a { text-decoration: underline }
.optin__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) }
.optin__btn {
  padding: 14px 20px; border: var(--bw-strong) solid var(--green);
  background: var(--green); color: var(--white);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); border-radius: var(--r-sm);
  cursor: pointer; transition: background var(--t), border-color var(--t);
}
.optin__btn:hover { background: var(--green-700); border-color: var(--green-700) }
@media (min-width: 861px) {
  .optin__inner { grid-template-columns: 1fr auto }
  .optin__knoepfe { grid-template-columns: auto auto }
  .optin__btn { min-width: 168px }
}

/* Widerruf in der Fusszeile - sieht aus wie die Rechtslinks daneben. */
.footer__optin {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: var(--fw-semi); color: inherit;
  transition: color var(--t);
}
.footer__optin:hover { color: var(--yellow) }