/* =========================================================================
   styles.css  --  heimtreffer, Umbau R4 nach den Entwuerfen des Kunden (E9).
   Liest nur die Tokens aus theme.css. Komponenten fuer alle Seiten, Doku mit
   HTML-Schnipseln in Orders/1_Inbox/2026-10-09_heimtreffer_neue-website/
   umbau/komponenten.md. Seiteneigenes CSS steht in public/css/seite-<key>.css
   (head.ejs laedt es mit pageCss), nie hier.

    1. Grundlagen            12. Zeilen, Listen, Chips
    2. Raster und Sections   13. Karten und Kacheln
    3. Schrift               14. Ratgeber-Bausteine
    4. Knoepfe und Links     15. Vergleichskarten (Offerten)
    5. Icons in Kreis/Kachel 16. Bildflaechen (Welle, Hintergrund, Schluss)
    6. Kopf und Navigation   17. Karte Zuerich und Thurgau
    7. Menue am Handy        18. Fragen (Akkordeon)
    8. Seitenkopf (.kopf)    19. Formulare
    9. Startseite: Hero      20. Danke und Ablauf
   10. Schritte              21. Dunkle Flaeche
   11. Infobox, Tipp         22. Footer, Credit, Cookie, Druck
                             23. Bewegung («auflegen»)
   ========================================================================= */

/* ---------- 1. Grundlagen ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
/* <picture> aus partials/picture ohne eigene Box: so fuellt das <img> mit height: 100% den Bildrahmen */
picture { display: contents; }
img { height: auto; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
a { color: var(--gruen); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--mint-2); color: var(--marine); }
main { display: block; }
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.75rem 1rem; border-radius: var(--r-feld);
  background: var(--marine); color: #fff; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }
/* ph(): Platzhalter des Kunden «[WORT: ...]» bleiben sichtbar markiert */
.placeholder { padding: 0 0.25em; border-radius: 4px; background: var(--mint); color: var(--gruen-dunkel); font-weight: 600; }

/* ---------- 2. Raster und Sections -------------------------------------- */
.page { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.page--schmal { max-width: calc(var(--max-schmal) + 2 * var(--gutter)); }
.section { padding-block: var(--pad); }
.section--eng { padding-block: var(--pad-eng); }
.section--ohne-oben { padding-top: 0; }
.section--hell { background: var(--bg-hell); }
.section--mint { background: var(--mint); }
.section--himmel { background: linear-gradient(180deg, var(--bg) 0%, var(--himmel) 100%); }

/* Kopfblock einer Section: Kicker, Titel, Lead. --mitte zentriert. */
.kopfblock { max-width: 44rem; }
.kopfblock--mitte { margin-inline: auto; text-align: center; }
.kopfblock--mitte .kicker { justify-content: center; }
.kopfblock + * { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* Zwei Spalten ab 64rem: links Text, rechts Inhalt; DOM-Reihenfolge = Handy. */
.spalten { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 64rem) {
  .spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .spalten--mitte { align-items: center; }
  .spalten--breit-rechts { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .spalten__klebt { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* Karten-Raster: 1 Spalte, ab 30rem 2, ab 64rem die Zahl aus dem Modifier. */
.raster { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 30rem) { .raster--3, .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .raster--2 { gap: var(--gap); } .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 3. Schrift --------------------------------------------------- */
.kicker {
  display: flex; align-items: center; gap: 0.875rem;
  margin: 0 0 1rem;
  color: var(--gruen);
  font: 700 var(--fs-kicker)/1.3 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kicker::after { content: ''; flex: none; width: 3.75rem; height: 1.5px; background: currentColor; opacity: 0.75; }
/* Pillen-Kicker der Ratgeber, Regionen und Landingpages (kosten-p1, m156) */
.kicker--pille {
  display: inline-flex; width: fit-content;
  padding: 0.5rem 1rem; border-radius: var(--r-rund);
  background: var(--mint); color: var(--gruen-dunkel);
  letter-spacing: 0.14em;
}
.kicker--pille::after { content: none; }
/* auf Hellgruen ist die Pille weiss (m156-offerten-pruefen-p2, m156-checkliste-landingpage-p2, p4) */
.section--mint .kicker--pille { background: var(--weiss); }
.kicker--ohne-linie::after { content: none; }

.h1, .h2, .h3 { color: var(--marine); font-family: var(--font-titel); text-wrap: balance; overflow-wrap: break-word; }
.h1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-titel); letter-spacing: -0.03em; }
.h1--hero { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.035em; }
.h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.1; letter-spacing: -0.028em; }
@media (max-width: 47.99rem) { .h2--klein { font-size: 1.5rem; } }
/* Weiche Trennstellen (shy) nur am Handy; am Desktop bleiben Titelwoerter ganz. */
@media (min-width: 48rem) { .h1, .h2 { hyphens: none; -webkit-hyphens: none; } }
.h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.akzent { color: var(--gruen); }
.lead { margin-top: 1rem; max-width: 40rem; color: var(--text); font-size: var(--fs-lead); line-height: 1.55; }
.kopfblock--mitte .lead { margin-inline: auto; }
.text { max-width: 40rem; }
.klein { font-size: var(--fs-klein); line-height: 1.5; }
.fussnote { margin-top: 0.75rem; color: var(--text-2); font-size: var(--fs-mini); text-align: center; }
.meta-zeile { margin-top: 0.875rem; color: var(--text-2); font-size: var(--fs-klein); }
.note { color: var(--text-2); font-size: var(--fs-klein); }

/* Rechtstexte und lange Texte (page.ejs) */
.prose { max-width: 46rem; }
.prose h2 { margin: 2.25rem 0 0.75rem; color: var(--marine); font: 800 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.25 var(--font-titel); letter-spacing: -0.015em; }
.prose h3 { margin: 1.5rem 0 0.5rem; color: var(--marine); font: 700 1.0625rem/1.35 var(--font-titel); }
.prose p, .prose ul, .prose ol { margin: 0 0 1rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.375rem; }
.prose strong { color: var(--marine); }

/* ---------- 4. Knoepfe und Links ---------------------------------------- */
/* Hauptknopf: Gruen, weisse Schrift, Pfeil rechts; am Handy volle Breite. */
.knopf, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  width: 100%; min-height: 3.375rem;
  padding: 0.875rem 1.5rem;
  border: 0; border-radius: var(--r-knopf);
  background: var(--gruen); color: #fff;
  font: 600 1.0625rem/1.25 var(--font-text);
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), transform 120ms var(--ease);
}
.knopf .icon, .btn .icon { width: 1.375rem; height: 1.375rem; stroke-width: 2; }
@media (min-width: 48rem) { .knopf, .btn { width: auto; min-width: 18rem; } }
.knopf--auto { width: auto; min-width: 0; }
.knopf--voll { width: 100%; }
.knopf--rund { border-radius: var(--r-rund); }
.knopf--klein { min-height: 2.75rem; padding: 0.625rem 1.125rem; font-size: 0.9375rem; min-width: 0; }
.knopf--weiss { background: #fff; color: var(--marine); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten); }
.knopf--rahmen { background: transparent; color: var(--gruen); box-shadow: inset 0 0 0 1.5px currentColor; }
.knopf--hell { background: var(--mint-auf-dunkel); color: var(--marine); }
@media (hover: hover) {
  .knopf:hover, .btn:hover { background: var(--gruen-dunkel); }
  .knopf--weiss:hover { background: var(--mint-hell); box-shadow: inset 0 0 0 1px var(--gruen), var(--schatten); }
  .knopf--rahmen:hover { background: var(--mint); }
  .knopf--hell:hover { background: #fff; }
}
/* Druck: scale(.97) in Abschnitt 23 (nur mit Bewegungswunsch) */
.knopf[disabled] { opacity: 0.55; cursor: not-allowed; }
/* Zurueck links, Weiter rechts (formular-p1, partner-werden-p7) */
.knopf-reihe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; }
.knopf-reihe > .knopf { width: auto; min-width: 0; }
.knopf-reihe > :only-child { margin-left: auto; }

/* Textlink: Gruen, unterstrichen, Pfeil (formular-p2, m156-p1, Regionen) */
.textlink {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--gruen); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
}
.textlink .icon { width: 1.25rem; height: 1.25rem; flex: none; transition: transform var(--dur) var(--ease); }
@media (hover: hover) { .textlink:hover { color: var(--gruen-dunkel); } .textlink:hover .icon { transform: translateX(3px); } }
.textlink--ohne-linie { text-decoration: none; }

/* ---------- 5. Icons ----------------------------------------------------- */
.icon { width: 1.5rem; height: 1.5rem; flex: none; }
.icon-kreis, .icon-kachel {
  display: inline-grid; place-items: center; flex: none;
  width: 3.5rem; height: 3.5rem;
  background: var(--mint); color: var(--gruen);
}
.icon-kreis { border-radius: 50%; }
.icon-kachel { border-radius: 14px; }
.icon-kreis .icon, .icon-kachel .icon { width: 50%; height: 50%; }
.icon-kreis--klein, .icon-kachel--klein { width: 2.75rem; height: 2.75rem; }
.icon-kreis--gross, .icon-kachel--gross { width: 4.5rem; height: 4.5rem; }
@media (min-width: 64rem) {
  .icon-kreis, .icon-kachel { width: 4rem; height: 4rem; }
  .icon-kreis--klein, .icon-kachel--klein { width: 3rem; height: 3rem; }
  .icon-kreis--gross, .icon-kachel--gross { width: 5.25rem; height: 5.25rem; }
}

/* ---------- 6. Kopf und Navigation -------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / 0.96);
  transition: box-shadow var(--dur) var(--ease);
}
@supports (backdrop-filter: blur(8px)) { .header { background: rgb(255 255 255 / 0.88); backdrop-filter: blur(8px); } }
.header.is-stuck { box-shadow: 0 1px 0 var(--linie), 0 6px 20px rgb(11 31 58 / 0.05); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }
/* Dunkler Kopf ueber Marine (partner-werden-p1): include('partials/header', { dunkel: true }) */
.header--dunkel { background: rgb(11 31 58 / 0.96); }
@supports (backdrop-filter: blur(8px)) { .header--dunkel { background: rgb(11 31 58 / 0.9); } }
.header--dunkel.is-stuck { box-shadow: 0 1px 0 var(--linie-dunkel); }
.header--dunkel .menu-knopf { color: #fff; }
.header--dunkel :focus-visible { outline-color: var(--mint-auf-dunkel); }
.brand { display: inline-flex; flex: none; border-radius: 6px; }
.brand__logo { width: auto; height: 2.375rem; }
@media (min-width: 64rem) { .brand__logo { height: 2.625rem; } }

.nav { display: none; }
@media (min-width: 64rem) {
  .nav { display: block; margin-left: auto; }
  .nav__list { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
  .nav__item { position: relative; }
  .nav__link {
    display: inline-flex; align-items: center; gap: 0.375rem;
    min-height: 2.75rem; padding: 0.5rem 0.875rem; border-radius: var(--r-feld);
    color: var(--marine); font-weight: 600; font-size: var(--fs-text); text-decoration: none;
    cursor: pointer; list-style: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .nav__link::-webkit-details-marker { display: none; }
  .nav__link[aria-current] { color: var(--gruen); }
  .header--dunkel .nav__link { color: #fff; }
  .header--dunkel .nav__link[aria-current] { color: var(--mint-auf-dunkel); }
  .nav__link .icon { width: 1.125rem; height: 1.125rem; transition: transform var(--dur) var(--ease); }
  .drop[open] > .nav__link .icon { transform: rotate(180deg); }
  .drop__blatt {
    position: absolute; top: calc(100% + 0.5rem); left: -1rem; z-index: 60;
    display: grid; grid-template-columns: repeat(2, minmax(12rem, 1fr)); gap: 0.25rem 2rem;
    min-width: 30rem; padding: 1.25rem 1.5rem 1.5rem;
    border: 1px solid var(--linie); border-radius: var(--r-karte);
    background: #fff; box-shadow: var(--schatten-hoch);
  }
  .drop__gruppe--start { grid-column: 1 / -1; padding-bottom: 0.75rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--linie); }
  .drop__gruppe ul { margin: 0; padding: 0; list-style: none; }
  .drop__titel { margin: 0 0 0.375rem; color: var(--text-2); font-size: var(--fs-mini); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
  .drop__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; color: var(--marine); font-weight: 600; text-decoration: none; }
  .drop__link[aria-current] { color: var(--gruen); }
  .drop__link .icon { width: 1.125rem; height: 1.125rem; color: var(--gruen); }
}
@media (min-width: 64rem) and (hover: hover) {
  .nav__link:hover { background: var(--bg-hell); }
  .header--dunkel .nav__link:hover { background: rgb(255 255 255 / 0.08); }
  .drop__link:hover { color: var(--gruen); }
}
.menu-knopf {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin-right: -0.5rem;
  border: 0; border-radius: var(--r-feld); background: transparent; color: var(--marine); cursor: pointer;
}
.menu-knopf .icon { width: 1.875rem; height: 1.875rem; stroke-width: 2; }
@media (min-width: 64rem) { .menu-knopf { display: none; } }

/* ---------- 7. Menue am Handy (<dialog>) -------------------------------- */
.menu {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
  border: 0; background: #fff; color: var(--marine);
}
.menu[open] { display: flex; flex-direction: column; }
.menu::backdrop { background: rgb(11 31 58 / 0.35); }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); padding-inline: var(--gutter); border-bottom: 1px solid var(--linie); }
.menu__close { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -0.5rem; border: 0; border-radius: var(--r-feld); background: transparent; color: var(--marine); cursor: pointer; }
.menu__close .icon { width: 1.75rem; height: 1.75rem; stroke-width: 2; }
.menu__body { flex: 1; overflow-y: auto; padding: 1.25rem var(--gutter) 2rem; }
.menu__titel { margin: 1.25rem 0 0.25rem; color: var(--text-2); font-size: var(--fs-mini); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.menu__list { margin: 0; padding: 0; list-style: none; }
.menu__list--haupt { margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--linie); }
.menu__link { display: flex; align-items: center; min-height: 3rem; color: var(--marine); font: 700 1.125rem/1.3 var(--font-titel); text-decoration: none; }
.menu__link[aria-current] { color: var(--gruen); }
/* aufklappbare Gruppen im Handy-Menü (Ratgeber, Regionen; Rida 2026-10-29 12:35) */
.menu__gruppe { border-bottom: 1px solid var(--linie); }
.menu__auf { justify-content: space-between; cursor: pointer; list-style: none; }
.menu__auf::-webkit-details-marker { display: none; }
.menu__auf .icon { width: 1.25rem; height: 1.25rem; color: var(--text-2); transition: transform var(--dur) var(--ease); }
.menu__gruppe[open] > .menu__auf .icon { transform: rotate(180deg); }
.menu__list--unter { padding: 0 0 0.5rem 1rem; }
.menu__list--unter .menu__link { min-height: 2.75rem; font-size: 1rem; font-weight: 600; }
.menu__gruppe + .menu__list--haupt { margin-top: 0; border-top: 0; }
.menu__foot { display: grid; gap: 0.75rem; padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); }
.menu__phone { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; color: var(--marine); font-weight: 600; text-decoration: none; }
.menu__phone .icon { width: 1.25rem; height: 1.25rem; color: var(--gruen); }

/* ---------- 8. Seitenkopf der Unterseiten (partials/page-head) ---------- */
/* Pillen-Kicker, Titel mit Akzent, Meta-Zeile, Lead; blasser Viertelkreis
   oben rechts wie in kosten-p1, solaranlage-zu-rich-p1, foerderung-p1. */
.kopf { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(1.75rem, 4vw, 4rem) clamp(2rem, 4.5vw, 4rem); }
.kopf::before {
  content: ''; position: absolute; z-index: -1;
  top: clamp(-11rem, -18vw, -6rem); right: clamp(-11rem, -18vw, -6rem);
  width: clamp(14rem, 36vw, 30rem); aspect-ratio: 1; border-radius: 50%;
  background: var(--mint); opacity: 0.6;
}
.kopf__inner { display: grid; gap: 2rem; }
@media (min-width: 64rem) {
  .kopf__inner--seite { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 4rem; }
}
.kopf .kicker { margin-bottom: 1.25rem; }
.kopf__extra { margin-top: 1.75rem; }
/* Foto unter dem Text bis an die Kanten, oben in den Himmel verlaufend (solaranlage-zu-rich-p1);
   mit .bild-welle die Wellenkante (m156-offerten-pruefen-p1) */
.kopf--foto { padding-bottom: 0; }
.kopf__foto { position: relative; height: clamp(15rem, 62vw, 32rem); margin-top: clamp(1.5rem, 4vw, 3rem); }
.kopf__foto img, .kopf__foto .foto-platzhalter { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.kopf__foto:not(.bild-welle)::after { content: ''; position: absolute; inset: 0 0 auto; height: 35%; background: linear-gradient(180deg, var(--bg), rgb(255 255 255 / 0)); }
.kopf--dunkel { background: var(--marine); }
/* dunkel mit Foto: das Foto liegt hinter dem Text unter Marine (partner-werden-p1) */
.kopf--dunkel.kopf--foto { padding-bottom: clamp(12rem, 50vw, 22rem); }
.kopf--dunkel .kopf__foto { position: absolute; inset: 0; z-index: -2; height: auto; margin: 0; }
.kopf--dunkel .kopf__foto::after { inset: 0; height: auto; background: linear-gradient(180deg, rgb(11 31 58 / 0.94) 0%, rgb(11 31 58 / 0.82) 45%, rgb(11 31 58 / 0.2) 85%); }
.kopf--dunkel::before { background: var(--mint-auf-dunkel); opacity: 0.08; }
.kopf--dunkel .h1 { color: var(--auf-dunkel); }
.kopf--dunkel .akzent { color: var(--mint-auf-dunkel); }
.kopf--dunkel .lead, .kopf--dunkel .meta-zeile { color: var(--auf-dunkel-2); }
.kopf--dunkel .kicker--pille { background: var(--gruen); color: #fff; }

/* ---------- 9. Startseite: Hero (startseite-p1) -------------------------- */
.hero { position: relative; background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 55%, var(--himmel) 100%); }
.hero__page { padding-block: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.hero__aktion { margin-top: 1rem; }
.hero__lead { margin-top: 0; }
@media (min-width: 64rem) {
  .hero__page { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
  .hero__aktion { margin-top: 0; padding-bottom: 0.375rem; }
}
.hero__bild { position: relative; height: clamp(17rem, 70vw, 22rem); margin-top: -0.5rem; clip-path: url(#welle-beide); }
@media (min-width: 48rem) { .hero__bild { height: clamp(22rem, 38vw, 34rem); } }
.hero__bild img, .hero__bild .foto-platzhalter { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }

/* PLZ-Feld mit Ortsmarke und Knopf darunter (Hero, Regionen) */
.plz-form { display: grid; gap: 0.75rem; max-width: 30rem; margin-top: 1.5rem; }
.plz-form .knopf { width: 100%; }
/* Feld mit Icon links (PLZ, Formulare m156-p2) */
.feld-icon { position: relative; }
.feld-icon > .icon { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; width: 1.375rem; height: 1.375rem; color: var(--marine); pointer-events: none; }
.feld-icon > input[type], .feld-icon > select { padding-left: 3.125rem; }
.feld-icon--oben > .icon { top: 1rem; translate: 0 0; }

/* Haekchen-Zeile: drei Vorteile mit gruenem Haken (Hero, Regionen, m156) */
.vorteile-zeile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; color: var(--marine); text-align: center; font-size: clamp(0.75rem, 3.4vw, var(--fs-klein)); font-weight: 500; line-height: 1.25; }
.vorteile-zeile li { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; text-wrap: balance; }
.vorteile-zeile .icon { width: 1.25rem; height: 1.25rem; color: var(--gruen); }
.haken-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.125rem;
  margin: 1.25rem 0 0; padding: 0; list-style: none;
  color: var(--marine); font-size: var(--fs-klein); font-weight: 500;
}
.haken-zeile li { display: inline-flex; align-items: center; gap: 0.375rem; }
.haken-zeile .icon { width: 1.125rem; height: 1.125rem; color: var(--gruen); stroke-width: 2.5; }
@media (min-width: 48rem) {
  .haken-zeile { gap: 0.5rem 0; }
  .haken-zeile li + li { margin-left: 1rem; padding-left: 1rem; border-left: 1px solid var(--linie); }
}
.haken-zeile--kreis .icon { width: 1.5rem; height: 1.5rem; padding: 0.25rem; border-radius: 50%; background: var(--mint); stroke-width: 3; }
/* Am Handy stehen die drei Haekchen in einer Zeile wie in allen Entwuerfen (startseite-p1,
   solaranlage-zu-rich-p1, m156-p1): Schrift und Icons wachsen mit der Breite, hoechstens 14px.
   Lange Texte (Hero, Regionen) brauchen die kleinere Stufe; darunter (Regionen unter 375px,
   Hero unter 360px) bricht die Zeile um, statt die Schrift unter 10px zu druecken. */
@media (max-width: 47.99rem) {
  .haken-zeile { justify-content: space-between; gap: 0.375rem 0.5rem; font-size: clamp(0.6875rem, 3.3vw, var(--fs-klein)); }
  .haken-zeile li { gap: 0.3em; white-space: nowrap; }
  .haken-zeile .icon { width: 1.25em; height: 1.25em; }
  .haken-zeile--kreis { font-size: clamp(0.625rem, 2.75vw, var(--fs-klein)); }
  .haken-zeile--kreis .icon { width: 1.75em; height: 1.75em; padding: 0.25em; }
}

/* ---------- 10. Schritte (startseite-p2, m156-p3, Regionen p5) ----------- */
.schritte { display: grid; gap: 1.75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.schritte__item { position: relative; display: grid; grid-template-columns: 2.75rem auto minmax(0, 1fr); gap: 0 1rem; align-items: start; }
.schritte__nr {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--mint); color: var(--gruen);
  font: 800 var(--fs-text)/1 var(--font-titel); letter-spacing: 0.02em;
}
/* gestrichelte Verbindung von Nummer zu Nummer */
.schritte__item:not(:last-child)::before {
  content: ''; position: absolute; left: calc(1.375rem - 0.75px); top: 3.375rem; bottom: -1.125rem;
  border-left: 1.5px dashed #A9D3BF;
}
.schritte__text { padding-top: 0.25rem; }
.schritte__text .h3 + p { margin-top: 0.375rem; }
.schritte .icon-kreis { width: 3.75rem; height: 3.75rem; }
@media (min-width: 64rem) { .schritte .icon-kreis { width: 4.25rem; height: 4.25rem; } .schritte { gap: 2.25rem; } }
/* ohne Icon: Nummer, dann Text */
.schritte--ohne-icon .schritte__item { grid-template-columns: 2.75rem minmax(0, 1fr); }
/* volle Nummernkreise in Gruen (m156-p3) */
.schritte--voll .schritte__item { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 1.25rem; }
.schritte--voll .schritte__nr { width: 3.5rem; height: 3.5rem; background: var(--gruen); color: #fff; font-size: 1.25rem; }
.schritte--voll .schritte__item:not(:last-child)::before { left: calc(1.75rem - 0.75px); top: 4rem; border-left-color: var(--gruen); opacity: 0.6; }
/* Text als Karte mit Icon-Kachel (solaranlage-zu-rich-p5) */
.schritte--karten .schritte__item { grid-template-columns: 2.75rem minmax(0, 1fr); }
.schritte--karten .schritte__text { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.25rem; border: 1px solid var(--linie); border-radius: var(--r-karte); background: #fff; box-shadow: var(--schatten); }
/* Punkt, Linie und Pfeil von Nummer zu Nummer (solaranlage-thurgau-p5, partner-werden-p2) */
.schritte--pfeil .schritte__item { grid-template-columns: 2.75rem auto minmax(0, 1fr); gap: 0 1rem; padding-bottom: 2.25rem; }
.schritte--pfeil .schritte__item::before {
  content: ''; position: absolute; left: calc(1.375rem - 4px); top: 3.25rem; bottom: 0.5rem; width: 8px; border: 0;
  background:
    radial-gradient(circle, var(--gruen) 3px, transparent 3.5px) 50% 0 / 8px 8px no-repeat,
    linear-gradient(var(--gruen), var(--gruen)) 50% 12px / 1.5px calc(100% - 12px) no-repeat;
}
.schritte--pfeil .schritte__item::after { content: ''; position: absolute; left: calc(1.375rem - 4.5px); bottom: 0.5rem; width: 9px; height: 9px; border-right: 1.5px solid var(--gruen); border-bottom: 1.5px solid var(--gruen); transform: rotate(45deg); }
.schritte--pfeil .icon-kachel { width: 3.75rem; height: 3.75rem; }
@media (min-width: 64rem) { .schritte--pfeil .icon-kachel { width: 4.25rem; height: 4.25rem; } }

/* Illustration Berge und Tannen als Fuss einer Section (startseite-p2) */
.berge { display: block; height: clamp(4.5rem, 9vw, 8rem); background: url('/images/berge.svg') repeat-x center bottom / auto 100%; }

/* ---------- 11. Infobox, Tipp (startseite-p3, kosten-p2..p5) ------------- */
.infobox {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.25rem; align-items: center;
  padding: 1.25rem; border-radius: var(--r-karte); background: var(--mint);
}
.infobox .icon-kreis, .infobox .icon-kachel { background: var(--mint-hell); }
.infobox__titel { color: var(--marine); font: 800 var(--fs-h3)/1.3 var(--font-titel); letter-spacing: -0.01em; }
.infobox__text { margin-top: 0.25rem; }
.infobox--ohne-icon { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .infobox { padding: 1.5rem 1.75rem; } }

/* ---------- 12. Zeilen, Listen, Chips ------------------------------------ */
/* Zeilen mit Icon-Kreis, Titel und Text, getrennt durch Linien (startseite-p4, p5) */
.zeilen { margin: 0; padding: 0; list-style: none; }
.zeilen__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 1.25rem; align-items: center; padding-block: 1.25rem; }
.zeilen__item + .zeilen__item { border-top: 1px solid var(--linie); }
.zeilen__text { margin-top: 0.25rem; }
/* Texte in Zeilen und Schritten am Handy eine Stufe kleiner als der Lead (startseite-p2, p4, p5) */
@media (max-width: 47.99rem) { .zeilen__text, .schritte__text p { font-size: var(--fs-klein); } }
.zeilen--kachel .icon-kreis { border-radius: 14px; }
/* Haekchen-Liste: senkrecht; --kreis mit gefuelltem Kreis (Kurz gesagt und Listen auf Kosten) */
.haken-liste { display: grid; gap: 0.875rem; margin: 0; padding: 0; list-style: none; }
.haken-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.haken-liste .icon { width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; color: var(--gruen); stroke-width: 2.5; }
.haken-liste--kreis .icon { width: 1.75rem; height: 1.75rem; margin-top: -0.05rem; padding: 0.3rem; border-radius: 50%; background: var(--gruen); color: #fff; stroke-width: 3.2; }
.haken-liste--gross li { font-size: var(--fs-lead); }
/* Punkt-Liste: senkrecht, kleiner gruener Punkt auf der Mitte der ersten Zeile (Foerderung, R5:
   Kunde 2026-10-25 «zuviele grüne haken») */
.punkt-liste { display: grid; gap: 0.875rem; margin: 0; padding: 0; list-style: none; }
.punkt-liste li { display: grid; grid-template-columns: 0.375rem minmax(0, 1fr); gap: 0.875rem; align-items: start; }
.punkt-liste li::before { content: ''; width: 0.375rem; height: 0.375rem; margin-top: calc(0.8em - 0.1875rem); border-radius: 50%; background: var(--gruen); }
/* Nummern-Liste 01 bis 04 in einer Karte (foerderung-p6) */
.nummern { margin: 0; padding: 0; list-style: none; }
.nummern__item { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1rem; padding-block: 1.25rem; }
.nummern__item + .nummern__item { border-top: 1px solid var(--linie); }
.nummern__nr { color: var(--gruen); font: 800 1.375rem/1.3 var(--font-titel); }
/* Orte als Pillen (solaranlage-zu-rich-p2) */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 0.5rem 1rem; border-radius: var(--r-rund); background: var(--mint); color: var(--gruen-dunkel); font-size: var(--fs-klein); font-weight: 500; }
/* Kontakt mit Icons (m156-checkliste-p4) */
.kontakt-liste { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.kontakt-liste li { display: flex; align-items: center; gap: 1rem; min-height: 2.75rem; color: var(--marine); }
.kontakt-liste .icon { color: var(--gruen); }
.kontakt-liste a { color: inherit; text-decoration: none; }
@media (hover: hover) { .kontakt-liste a:hover { color: var(--gruen); text-decoration: underline; } }
/* Status-Zeichen: ja (gruen), nein und unklar (grau) (m156-checkliste-p3) */
.status { display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--grau-zeichen); color: #fff; font: 800 0.9375rem/1 var(--font-titel); }
.status .icon { width: 1rem; height: 1rem; stroke-width: 3; }
.status--ja { background: var(--gruen); }
.status--nein, .status--frage { background: var(--grau-zeichen); }

/* ---------- 13. Karten und Kacheln --------------------------------------- */
.karte { position: relative; padding: 1.25rem; border-radius: var(--r-karte); background: #fff; box-shadow: var(--schatten); }
@media (min-width: 48rem) { .karte { padding: 1.5rem 1.75rem; } }
.karte--rand { box-shadow: none; border: 1px solid var(--linie); }
.karte--hervor { box-shadow: 0 0 0 1.5px var(--gruen), var(--schatten); }
/* Dunkelgruene Karte (partner-werden-p2 Schritt 04, p5 «Passt zu Ihnen?») */
.karte--gruen { background: linear-gradient(135deg, var(--gruen-dunkel), #0B4A33); color: rgb(255 255 255 / 0.88); box-shadow: var(--schatten-hoch); }
.karte--gruen .karte__titel, .karte--gruen .h2, .karte--gruen .h3 { color: #fff; }
.karte--gruen .kicker { color: var(--mint-auf-dunkel); }
.karte--gruen .icon-kreis, .karte--gruen .icon-kachel { background: rgb(255 255 255 / 0.12); color: var(--mint-auf-dunkel); }
.karte__titel { color: var(--marine); font: 800 var(--fs-h3)/1.3 var(--font-titel); }
.karte__titel + * { margin-top: 0.75rem; }
/* Badge auf der oberen Kante («Unsere Empfehlung», «Häufig gewählt») */
.badge {
  position: absolute; top: 0; left: 1.25rem; translate: 0 -50%; z-index: 1;
  padding: 0.25rem 0.75rem; border-radius: var(--r-rund);
  background: var(--mint); color: var(--gruen-dunkel);
  font: 700 var(--fs-mini)/1.4 var(--font-text); white-space: nowrap;
}
.badge--voll { background: var(--gruen); color: #fff; }
.badge--mitte { left: 50%; translate: -50% -50%; }

/* Kachel: Icon-Kreis links, Titel, Untertitel (startseite-p6 «Gut zu wissen»).
   Unter 36rem steht das Icon ueber dem Text, sonst passt «Unverbindlicher» nicht in die halbe Breite. */
.kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; height: 100%; padding: 1rem 0.875rem; border-radius: var(--r-karte); background: #fff; box-shadow: var(--schatten); }
.kachel .icon-kreis { width: 3rem; height: 3rem; }
.kachel__titel { color: var(--marine); font: 700 1rem/1.25 var(--font-titel); overflow-wrap: break-word; }
.kachel__text { margin-top: 0.25rem; color: var(--text); font-size: 0.8125rem; line-height: 1.4; }
@media (min-width: 36rem) { .kachel { flex-direction: row; align-items: center; gap: 0.875rem; padding: 1rem; } }
@media (min-width: 48rem) {
  .kachel { gap: 1.125rem; padding: 1.25rem 1.375rem; }
  .kachel .icon-kreis { width: 3.75rem; height: 3.75rem; }
  .kachel__titel { font-size: var(--fs-text); }
  .kachel__text { font-size: var(--fs-klein); }
}
/* Kachel mit Icon oben (Regionen p2, partner-werden-p4) */
.kachel--oben { flex-direction: column; align-items: flex-start; }
.kachel--zentriert { flex-direction: column; align-items: center; text-align: center; }
/* Icon ohne Kreis direkt in der Kachel (m156-offerten-pruefen-p4) */
.kachel > .icon { width: 2.25rem; height: 2.25rem; color: var(--gruen); }

/* Link-Karte: Icon-Kachel, Titel, Text, Pfeil (Uebersicht Solaranlage) */
.link-karte {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  padding: 1rem 1.25rem; border: 1px solid var(--linie); border-radius: var(--r-karte);
  background: #fff; box-shadow: var(--schatten); color: inherit; text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.link-karte__titel { display: block; color: var(--marine); font: 700 var(--fs-h3)/1.3 var(--font-titel); }
.link-karte__text { display: block; margin-top: 0.125rem; color: var(--text); font-size: var(--fs-klein); line-height: 1.45; }
.link-karte > .icon { color: var(--gruen); transition: transform var(--dur) var(--ease); }
@media (hover: hover) { .link-karte:hover { border-color: var(--gruen); } .link-karte:hover > .icon { transform: translateX(3px); } }

/* Icon-Karte: Icon-Kachel links, Titel, gruene Preiszeile, Text oder Liste
   (kosten-p2 Anlagengroessen, kosten-p3 Extras, kosten-p5, Regionen p3) */
.icon-karte { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.25rem; align-items: start; padding: 1.25rem; border: 1px solid var(--linie); border-radius: var(--r-karte); background: #fff; }
.icon-karte--hervor { border: 1.5px solid var(--gruen); }
.icon-karte__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.icon-karte__titel { color: var(--marine); font: 800 var(--fs-h3)/1.3 var(--font-titel); letter-spacing: -0.01em; }
.icon-karte__titel--gross { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); }
.icon-karte__preis { color: var(--gruen); font: 800 1.0625rem/1.35 var(--font-titel); }
.icon-karte__preis--gross { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
.icon-karte__text { margin-top: 0.375rem; font-size: 0.9375rem; }
.icon-karte .haken-liste { margin-top: 0.875rem; }
.icon-karte .punkt-liste { margin-top: 0.875rem; }
.icon-karten { display: grid; gap: 0.875rem; margin: 0; padding: 0; list-style: none; }
/* Aus seite-ratgeber.css hierher verschoben (R7), weil auch die Regionen-Seiten (seite-region.css) sie brauchen: */
/* Foto im runden Rahmen mit dem Icon als Abzeichen (Startseite Schritt 3, Haus im Kreis):
   statt der Icon-Kachel in den Karten der Anlagengroessen und der Uebersicht */
.bild-kreis { position: relative; display: block; flex: none; width: 3.75rem; height: 3.75rem; }
.bild-kreis__foto, .bild-kreis > .foto-platzhalter { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--mint); }
.bild-kreis__abzeichen {
  position: absolute; right: -0.375rem; bottom: -0.25rem;
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; background: var(--gruen); color: #fff; box-shadow: 0 0 0 2px #fff;
}
.bild-kreis__abzeichen .icon { width: 1rem; height: 1rem; }
.bild-kreis--klein { width: 3.5rem; height: 3.5rem; }
@media (min-width: 48rem) { .bild-kreis { width: 5rem; height: 5rem; } .bild-kreis--klein { width: 4.5rem; height: 4.5rem; } }
@media (min-width: 64rem) {
  .bild-kreis { width: 6.5rem; height: 6.5rem; }
  .bild-kreis--klein { width: 5.5rem; height: 5.5rem; }
  .bild-kreis__abzeichen { width: 2.25rem; height: 2.25rem; }
  .bild-kreis__abzeichen .icon { width: 1.25rem; height: 1.25rem; }
}
.icon-karte > .bild-kreis { align-self: center; }

/* Karte mit Foto oben bis an die Kanten (Rechenbeispiel, Kantone), wie die Offerten der Startseite */
.karte--mit-bild { overflow: hidden; }
.karte__bild { position: relative; height: clamp(9rem, 40vw, 12rem); margin: -1rem -1rem 1.25rem; }
.karte__bild img, .karte__bild .foto-platzhalter { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
@media (min-width: 48rem) { .karte__bild { height: 12.5rem; margin: -1.5rem -1.75rem 1.25rem; } }


/* Person mit Foto, Rolle, Text und Zitat (m156-checkliste-p4) */
.person-karte { padding: 1rem; border-radius: var(--r-gross); background: #fff; box-shadow: var(--schatten); }
.person-karte__bild img, .person-karte__bild .foto-platzhalter { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-karte); object-fit: cover; }
.person-karte__name { margin-top: 1.25rem; color: var(--marine); font: 800 clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem)/1.2 var(--font-titel); letter-spacing: -0.02em; }
.person-karte__rolle { margin-top: 0.25rem; color: var(--gruen); font-weight: 600; }
.person-karte__text { margin-top: 0.75rem; }
.zitat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; margin-top: 1.25rem; }
.zitat::before { content: '\201C'; color: var(--mint-2); font: 800 4.5rem/0.8 var(--font-titel); }
.zitat p { color: var(--marine); font: 800 var(--fs-h3)/1.35 var(--font-titel); }

/* ---------- 14. Ratgeber-Bausteine (kosten-p1..p6, foerderung) ---------- */
/* «Kurz gesagt»: Mint mit gefuellten Haken (Kosten) bzw. Punkten (Foerderung) */
.kurz { padding: 1.25rem; border-radius: var(--r-karte); background: var(--mint); }
.kurz__titel { margin-bottom: 1rem; color: var(--marine); font: 800 clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem)/1.25 var(--font-titel); letter-spacing: -0.015em; }
@media (min-width: 48rem) { .kurz { padding: 1.5rem 1.75rem; } }
/* «Inhalt» mit Sprungmarken */
.inhalt { padding: 1.25rem 1.25rem 0.5rem; border: 1px solid var(--linie); border-radius: var(--r-karte); background: #fff; }
.inhalt__titel { margin-bottom: 0.5rem; color: var(--marine); font: 800 clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem)/1.25 var(--font-titel); }
.inhalt__liste { margin: 0; padding: 0; list-style: none; }
.inhalt__liste li + li { border-top: 1px solid var(--linie); }
.inhalt__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; color: var(--marine); text-decoration: none; }
.inhalt__link .icon { color: var(--gruen); transition: transform var(--dur) var(--ease); }
@media (hover: hover) { .inhalt__link:hover { color: var(--gruen); } .inhalt__link:hover .icon { transform: translateX(3px); } }
/* Werte: Bezeichnung links, Betrag rechts (foerderung-p2, p4) */
.werte { margin: 0; }
/* Bezeichnung bricht links um, der Betrag bleibt rechts auf einer Zeile */
.werte__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; padding-block: 0.75rem; }
.werte dt { min-width: 0; }
.werte__zeile + .werte__zeile { border-top: 1px solid var(--linie); }
/* --rechnung: keine Linien zwischen den Posten, nur vor der Summe (kosten-p4) */
.werte--rechnung .werte__zeile { padding-block: 0.5rem; }
.werte--rechnung .werte__zeile + .werte__zeile { border-top: 0; }
.werte dt { color: var(--text); }
.werte dd { flex: none; margin: 0; color: var(--gruen); font: 800 1.0625rem/1.35 var(--font-titel); text-align: right; white-space: nowrap; }
.werte__zeile--neutral dd { color: var(--text); font-weight: 400; font-family: var(--font-text); }
.werte__zeile--summe { margin-top: 0.25rem; padding-top: 1rem; border-top: 1.5px solid var(--linie) !important; }
.werte__zeile--summe dt { color: var(--marine); font: 800 var(--fs-h3)/1.3 var(--font-titel); }
.werte__zeile--summe dd { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
/* Formel: Mint, kleine gruene Zeile, grosse Formel, Hinweis (foerderung-p2, p5) */
.formel { padding: 1.25rem; border-radius: var(--r-karte); background: var(--mint); }
.formel__label { color: var(--gruen-dunkel); font-weight: 700; }
.formel__wert { margin-top: 0.25rem; color: var(--marine); font: 800 clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem)/1.25 var(--font-titel); letter-spacing: -0.015em; }
.formel__text { margin-top: 0.25rem; color: var(--text); font-size: var(--fs-klein); }

/* ---------- 15. Vergleichskarten (startseite-p3) ------------------------- */
/* Drei Offerten nebeneinander, auch am Handy (A2: nie drei Karten untereinander). */
.vergleich { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; align-items: stretch; max-width: 62rem; margin: 2.5rem auto 0; }
.offerte { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0.75rem 0.5rem 0.625rem; border-radius: 12px; background: #fff; box-shadow: var(--schatten); }
.offerte--empfohlen { box-shadow: 0 0 0 2px var(--gruen), var(--schatten-hoch); }
.offerte .badge { left: 50%; translate: -50% -50%; padding: 0.1875rem 0.5rem; font-size: 0.625rem; }
.offerte__titel { color: var(--marine); font: 800 0.9375rem/1.2 var(--font-titel); letter-spacing: -0.01em; }
.offerte__firma { display: block; margin-top: 0.125rem; color: var(--text-2); font: 500 0.6875rem/1.3 var(--font-text); letter-spacing: 0; }
.offerte__bild { height: 4.5rem; margin: 0.625rem 0 0.375rem; overflow: hidden; border-radius: 8px; background: var(--mint); }
.offerte--empfohlen .offerte__bild { background: var(--mint-2); }
.offerte__bild img, .offerte__bild .foto-platzhalter { width: 100%; height: 100%; object-fit: cover; }
.offerte__zeilen { margin: 0; font-size: var(--fs-mini); line-height: 1.3; }
.offerte__zeile { display: flex; align-items: center; justify-content: space-between; gap: 0.125rem 0.25rem; padding-block: 0.375rem; color: var(--marine); }
.offerte__zeile--preis { flex-wrap: wrap; }
.offerte__zeile + .offerte__zeile { border-top: 1px solid var(--linie); }
.offerte__zeile dt { display: flex; flex: 1 1 auto; align-items: center; gap: 0.25rem; min-width: 0; hyphens: manual; }
.offerte__zeile dt .icon { display: none; width: 0.875rem; height: 0.875rem; color: var(--marine); }
.offerte__zeile dd { margin: 0 0 0 auto; font-weight: 700; white-space: nowrap; }
.wert { display: inline-grid; place-items: center; }
.wert .icon { width: 1rem; height: 1rem; stroke-width: 2.75; }
.wert--ja { color: var(--gruen); }
.wert--nein { width: 1rem; height: 1rem; border-radius: 50%; background: var(--linie); color: var(--text-2); }
.wert--nein .icon { width: 0.625rem; height: 0.625rem; stroke-width: 3.5; }
.punkte { display: inline-flex; gap: 2px; }
.punkte i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--grau-zeichen); }
.punkte i.is-voll { background: var(--gruen); }
@media (min-width: 30rem) {
  .vergleich { gap: 0.75rem; }
  .offerte { padding: 1rem 0.875rem 0.75rem; }
  .offerte__zeile dt .icon { display: block; }
  .offerte__zeilen { font-size: 0.8125rem; }
  .offerte__titel { font-size: 1.0625rem; }
  .offerte__firma { font-size: 0.8125rem; }
  .offerte .badge { font-size: 0.75rem; padding: 0.25rem 0.75rem; }
  .offerte__bild { height: 6rem; }
}
@media (min-width: 64rem) {
  .vergleich { gap: 1.25rem; }
  .offerte { padding: 1.5rem 1.25rem 1rem; border-radius: var(--r-karte); }
  .offerte__titel { font-size: var(--fs-h3); }
  .offerte__firma { font-size: var(--fs-klein); }
  .offerte__bild { height: 9.5rem; margin-block: 1rem 0.5rem; border-radius: 12px; }
  .offerte__zeilen { font-size: var(--fs-klein); }
  .offerte__zeile { padding-block: 0.625rem; }
  .offerte__zeile dt { gap: 0.625rem; }
  .offerte__zeile dt .icon { width: 1.25rem; height: 1.25rem; }
  .wert .icon { width: 1.25rem; height: 1.25rem; }
  .wert--nein { width: 1.25rem; height: 1.25rem; }
  .punkte { gap: 4px; }
  .punkte i { width: 0.75rem; height: 0.75rem; }
  .offerte .badge { font-size: var(--fs-mini); }
}

/* ---------- 16. Bildflaechen -------------------------------------------- */
/* Bild mit geschwungener Kante: clip-path aus den SVG-Definitionen im Footer
   (#welle-oben: nur oben, #welle-beide: oben und unten). */
.bild-welle { clip-path: url(#welle-oben); }
.bild-welle--beide { clip-path: url(#welle-beide); }
/* Foto als Fuss einer Section bis an die Kanten, oben in den Grund verlaufend (kosten-p1, formular-p2).
   --fuss-grund = Farbe der Section darueber (Standard Weiss). */
.foto-fuss { position: relative; height: clamp(10rem, 48vw, 22rem); margin-top: clamp(1.5rem, 4vw, 3rem); }
.foto-fuss img, .foto-fuss .foto-platzhalter { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.foto-fuss::before { content: ''; position: absolute; inset: 0 0 auto; z-index: 1; height: 40%; background: linear-gradient(180deg, var(--fuss-grund, var(--bg)), rgb(255 255 255 / 0)); }
/* Neutraler Platzhalter, solange eine Bildstelle in data/fotos.json fehlt */
.foto-platzhalter { display: block; width: 100%; aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--himmel), var(--mint)); }

/* Section mit Foto im Hintergrund unter einem hellen Schleier (startseite-p3) */
.section--bild { position: relative; isolation: isolate; overflow: hidden; }
.section__bild { position: absolute; inset: 0; z-index: -2; }
.section__bild img, .section__bild .foto-platzhalter { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; }
.section--bild::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.78) 0%, rgb(255 255 255 / 0.9) 22%, rgb(255 255 255 / 0.95) 45%, rgb(255 255 255 / 0.93) 78%, rgb(255 255 255 / 0.5) 100%);
}

/* Schluss «Jetzt starten»: Text oben auf ruhiger Flaeche, darunter das Foto klar bis an den Rand (startseite-p6).
   R10 (Fremdblick, Steven «sieht aus wie nebel»): kein Verlauf mehr ueber dem Foto, das Foto steht in voller Staerke unter dem Text */
.schluss { position: relative; display: flex; flex-direction: column; overflow: hidden; padding-block: var(--pad) 0; background: var(--himmel); }
.schluss > :not(.schluss__bild) { order: 1; }
.schluss__bild { order: 2; height: clamp(13rem, 52vw, 22rem); margin: clamp(2.5rem, 6vw, 4rem) 0 0; }
.schluss__bild img, .schluss__bild .foto-platzhalter { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 60%; }
.schluss .knopf { margin-top: 1.75rem; }
.schluss > .page { width: 100%; }
.schluss > .knopf { align-self: flex-start; }
@media (min-width: 64rem) { .schluss__bild { height: clamp(16rem, 24vw, 24rem); } }
/* als gerundete Flaeche in der Seite (partner-werden-p6, foerderung-p7): Text im Innenabstand, Foto bis an die Kanten der Flaeche */
.schluss--karte { --sp: clamp(1.25rem, 4vw, 3rem); border-radius: var(--r-gross); padding: clamp(1.5rem, 4vw, 3rem) var(--sp) 0; }
.schluss--karte .schluss__bild { margin-inline: calc(-1 * var(--sp)); }
.schluss--karte > .knopf { align-self: flex-start; }

/* ---------- 17. Karte Zuerich und Thurgau (partials/karte) -------------- */
.karte-ch { position: relative; }
.karte-ch svg { width: 100%; height: auto; }
.karte-ch__land { fill: var(--karte-land); stroke: #fff; stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.karte-ch__land.is-hervor { fill: var(--karte-gebiet); }
.karte-ch__land.is-umriss { fill: var(--mint); stroke: var(--gruen); stroke-width: 2px; }
.karte-ch__see { fill: var(--karte-see); }
.karte-ch__pin { fill: var(--gruen-dunkel); stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.karte-ch__pin-punkt { fill: #fff; }
/* Ortsnamen: font-size kommt als Attribut aus dem Partial (Einheiten der Karte), deshalb hier kein font-Kurzwert */
.karte-ch__ort { fill: var(--marine); font-family: var(--font-text); font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.karte-ch--rand svg { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
.karte-ch__quelle { margin-top: 0.25rem; color: var(--text-2); font-size: var(--fs-mini); text-align: right; }
/* Infokarte auf der Karte («Zürich & Thurgau / Weitere Regionen folgen») */
.karte-info {
  position: absolute; right: 0; bottom: 14%; z-index: 1;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-radius: 14px; background: #fff; box-shadow: var(--schatten-hoch);
}
.karte-info .icon { width: 2rem; height: 2rem; color: var(--gruen); }
.karte-info__titel { color: var(--marine); font: 800 1rem/1.25 var(--font-titel); }
.karte-info__text { color: var(--text-2); font-size: var(--fs-mini); }
@media (min-width: 48rem) { .karte-info { padding: 1rem 1.25rem; } .karte-info__titel { font-size: var(--fs-text); } .karte-info__text { font-size: var(--fs-klein); } }

/* ---------- 18. Fragen (Akkordeon) ---------------------------------------- */
/* Jede Frage eine weisse Karte mit Plus rechts (startseite-p7, m156-p5).
   --kreis: Plus im Mint-Kreis rechts (Regionen p6), --links: Kreis links
   (kosten-p6), --liste: alle Fragen in einer Karte mit Linien (foerderung-p7). */
.faq { display: grid; gap: 0.75rem; }
.faq__item { border-radius: 14px; background: #fff; box-shadow: var(--schatten); transition: box-shadow var(--dur) var(--ease); }
.faq__item[open] { box-shadow: 0 0 0 1px var(--linie), var(--schatten); }
.faq__frage {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.75rem; padding: 0.875rem 1.25rem;
  color: var(--marine); font: 700 1rem/1.35 var(--font-titel);
  cursor: pointer; list-style: none;
}
.faq__frage::-webkit-details-marker { display: none; }
.faq__zeichen { position: relative; flex: none; width: 1.25rem; height: 1.25rem; color: var(--gruen); }
.faq__zeichen::before, .faq__zeichen::after { content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 2px; border-radius: 2px; background: currentColor; translate: -50% -50%; transition: transform var(--dur) var(--ease); }
.faq__zeichen::after { transform: rotate(90deg); }
.faq__item[open] .faq__zeichen::after { transform: rotate(0deg); }
.faq__antwort { margin: 0 1.25rem; padding: 1rem 0 1.25rem; border-top: 1px solid var(--linie); }
.faq__antwort p + p { margin-top: 0.75rem; }
@media (min-width: 48rem) { .faq__frage { padding: 1rem 1.5rem; font-size: 1.0625rem; } .faq__antwort { margin-inline: 1.5rem; } }
@media (hover: hover) { .faq__frage:hover { color: var(--gruen-dunkel); } }
.faq--kreis .faq__zeichen, .faq--links .faq__zeichen { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--mint); }
.faq--kreis .faq__zeichen::before, .faq--kreis .faq__zeichen::after, .faq--links .faq__zeichen::before, .faq--links .faq__zeichen::after { width: 0.875rem; }
.faq--links .faq__frage { flex-direction: row-reverse; justify-content: flex-end; }
.faq--links .faq__item[open] .faq__zeichen { background: var(--gruen); color: #fff; }
.faq--links .faq__antwort { border-top: 0; padding-top: 0; margin-left: calc(1.25rem + 2.5rem + 1rem); }
.faq--liste { gap: 0; padding: 0.25rem 0; border: 1px solid var(--linie); border-radius: var(--r-karte); background: #fff; }
.faq--liste .faq__item { border-radius: 0; box-shadow: none; }
.faq--liste .faq__item + .faq__item { border-top: 1px solid var(--linie); }
.faq--liste .faq__antwort { border-top: 0; padding-top: 0; }
/* --rand: feiner Rand statt Schatten, offen mit gruenem Rand (m156-offerten-pruefen-p5) */
.faq--rand .faq__item { box-shadow: none; border: 1px solid var(--linie); }
.faq--rand .faq__item[open] { border-color: var(--gruen); box-shadow: none; }
.faq--rand .faq__antwort { border-top: 0; padding-top: 0; }
/* «Alle Fragen anzeigen» (main.js: data-faq-mehr) */
.faq__mehr {
  display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start;
  min-height: 2.75rem; margin-top: 0.5rem; padding: 0.25rem 0.25rem;
  border: 0; background: none; color: var(--gruen); font-weight: 500; font-size: 1.0625rem; cursor: pointer;
}
.faq__mehr .icon { width: 1.25rem; height: 1.25rem; transition: transform var(--dur) var(--ease); }
.faq__mehr[aria-expanded="true"] .icon { transform: rotate(180deg); }
@media (hover: hover) { .faq__mehr:hover { color: var(--gruen-dunkel); text-decoration: underline; text-underline-offset: 0.25em; } }

/* ---------- 19. Formulare ------------------------------------------------ */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], select, textarea {
  width: 100%; min-height: 3.25rem; padding: 0.75rem 1rem;
  border: 1px solid var(--linie-feld); border-radius: var(--r-feld);
  background: #fff; color: var(--marine);
  font: 400 var(--fs-text)/1.4 var(--font-text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { min-height: 8rem; resize: vertical; }
::placeholder { color: #6B7280; opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px rgb(22 122 85 / 0.22); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gruen); }
.field { display: grid; gap: 0.375rem; }
.field + .field, .form-reihe + .field, .field + .form-reihe { margin-top: 1rem; }
.field > label, .field__label { color: var(--marine); font-weight: 600; font-size: 0.9375rem; line-height: 1.35; }
.field__hint { color: var(--text-2); font-size: 0.8125rem; }
.field__error { color: var(--fehler); font-size: 0.875rem; font-weight: 500; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--fehler); }
.field--error.wahl .wahl__item { border-color: var(--fehler); }
.field--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.25rem 0.75rem; }
.field--check input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; }
.field--check label { font-weight: 400; color: var(--text); }
.field--check .field__error { grid-column: 1 / -1; }
.field__zaehler { justify-self: end; color: var(--text-2); font-size: var(--fs-mini); }
.req { color: var(--gruen); }
.opt { color: var(--text-2); font-weight: 400; }
/* Zwei Felder nebeneinander, auch am Handy (formular-p1 Vorname und Nachname, partner-werden-p7 PLZ und Ort) */
.form-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.75rem; align-items: start; }
.form-reihe > .field + .field { margin-top: 0; }
.form-reihe--schmal-breit { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.form-karte { padding: 1.25rem; border-radius: var(--r-gross); background: #fff; box-shadow: var(--schatten-hoch); }
@media (min-width: 48rem) { .form-karte { padding: 2rem; } }
.form-hinweis { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.875rem; color: var(--text-2); font-size: var(--fs-klein); text-align: center; }
.form-hinweis .icon { width: 1.125rem; height: 1.125rem; }
.form-klein { margin-top: 1rem; color: var(--text-2); font-size: var(--fs-mini); line-height: 1.5; text-align: center; }
.form-klein a { color: var(--gruen); }
.form-alert { padding: 1rem 1.25rem; border: 1px solid var(--fehler); border-radius: var(--r-karte); background: var(--fehler-hell); color: var(--marine); }
.form-alert__title { font-weight: 700; }
.form-alert ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.form-alert a { color: var(--fehler); }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin-top: 1rem; }
/* Turnstile ist fest 300px breit und passt unter 360px nicht in Spalte oder Formular-Karte */
@media (max-width: 22.49rem) { .cf-turnstile { transform: scale(0.75); transform-origin: left top; } }

/* Auswahlkacheln (formular-p1): ganze Karte waehlbar, gewaehlt mit gruenem Rand und Haken */
.wahl { display: grid; gap: 0.75rem; }
.wahl__item {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  min-height: 4.5rem; padding: 0.875rem 1rem;
  border: 1.5px solid var(--linie); border-radius: var(--r-karte);
  background: #fff; box-shadow: var(--schatten); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.wahl__item:not(:has(.wahl__bild)) { grid-template-columns: minmax(0, 1fr) auto; }
/* Radio unsichtbar, bedienbar bleibt es; appearance und clip-path, sonst malt es bei Pixeldichte 1 einen Punkt */
.wahl__item input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; appearance: none; clip-path: inset(50%); }
.wahl__bild { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 12px; background: var(--mint); color: var(--gruen); }
.wahl__bild img { width: 100%; height: 100%; object-fit: contain; }
.wahl__title { display: block; color: var(--marine); font: 700 1rem/1.3 var(--font-titel); }
.wahl__text { display: block; margin-top: 0.125rem; color: var(--text); font-size: 0.875rem; line-height: 1.4; }
.wahl__zeichen { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: var(--text-2); }
.wahl__zeichen .icon { width: 1.25rem; height: 1.25rem; }
.wahl__zeichen .icon + .icon { display: none; }
.wahl__item:has(input:checked) { border-color: var(--gruen); background: var(--mint-hell); }
.wahl__item:has(input:checked) .wahl__zeichen { background: var(--gruen); color: #fff; }
.wahl__item:has(input:checked) .wahl__zeichen .icon:first-child { display: none; }
.wahl__item:has(input:checked) .wahl__zeichen .icon + .icon { display: block; width: 1rem; height: 1rem; stroke-width: 3; }
.wahl__item:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .wahl__item:hover { border-color: var(--gruen); } }

/* Fortschritt: Balken aus Teilen (main.js setzt is-done, is-now an [data-blaetter] li) und «Schritt 1 von 8» */
.fortschritt { display: grid; gap: 0.375rem; }
.fortschritt__balken { display: flex; height: 0.375rem; margin: 0; padding: 0; overflow: hidden; border-radius: var(--r-rund); background: var(--linie); list-style: none; }
.fortschritt__balken li { flex: 1; transition: background-color var(--dur) var(--ease); }
.fortschritt__balken li.is-done, .fortschritt__balken li.is-now { background: var(--gruen); }
.fortschritt__text { justify-self: end; color: var(--marine); font-size: var(--fs-mini); font-weight: 500; }
/* Stufen 1-2-3 mit Linie (partner-werden-p7) */
.stufen { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.stufen li { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--linie); color: var(--text-2); font: 700 0.875rem/1 var(--font-text); }
.stufen li + li { margin-left: 2.75rem; position: relative; }
.stufen li + li::before { content: ''; position: absolute; right: calc(100% + 0.25rem); top: 50%; width: 2.25rem; height: 1.5px; background: var(--linie); }
.stufen .is-fertig, .stufen .is-jetzt { background: var(--gruen); color: #fff; }
.stufen .is-jetzt { background: var(--gruen-dunkel); }
.stufen .is-fertig + li::before, .stufen .is-fertig::before { background: var(--gruen); }
.stufen .icon { width: 1rem; height: 1rem; stroke-width: 3; }
/* Kopf eines Formulars: Logo oder Stufen links, Schliessen-X rechts */
.formkopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.schliessen { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -0.5rem; border: 0; border-radius: var(--r-feld); background: transparent; color: var(--marine); cursor: pointer; }
.schliessen .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2; }
@media (hover: hover) { .schliessen:hover { background: var(--bg-hell); } }

/* Schritt-Formular (main.js data-funnel): mit JS ein Schritt pro Bildschirm */
.schritt { min-width: 0; margin: 0; padding: 0; border: 0; }
.schritt__legend { padding: 0; color: var(--marine); font: 800 clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem)/1.12 var(--font-titel); letter-spacing: -0.025em; }
.schritt__hint { margin-top: 0.5rem; color: var(--text); }
.schritt__legend + .schritt__hint + * { margin-top: 1.5rem; }
.schritt + .schritt { margin-top: 3rem; }
.funnel.is-live .schritt:not(.is-now) { display: none; }
.funnel.is-live .schritt + .schritt { margin-top: 0; }
.funnel.is-live .schritt__auto { display: none; }

/* Upload-Feld mit gestricheltem Rand (m156-offerten-pruefen-p2; main.js data-upload) */
.upload { position: relative; display: grid; justify-items: center; gap: 0.25rem; padding: 1.75rem 1rem; border: 1.5px dashed var(--gruen); border-radius: var(--r-karte); background: var(--mint-hell); text-align: center; transition: background-color var(--dur) var(--ease); }
.upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload > .icon { width: 3rem; height: 3rem; color: var(--gruen); }
.upload__titel { margin-top: 0.5rem; color: var(--marine); font: 800 1.125rem/1.3 var(--font-titel); }
.upload__link { color: var(--gruen); font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; }
.upload__hint { color: var(--text-2); font-size: var(--fs-klein); }
.upload.is-drueber, .upload:focus-within { background: var(--mint); }
.upload--fehler { border-color: var(--fehler); }
.upload [data-upload-liste] { width: 100%; margin: 0.75rem 0 0; padding: 0; list-style: none; text-align: left; }
.upload [data-upload-liste] li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--mint-2); color: var(--marine); font-size: var(--fs-klein); }
.upload__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__groesse { flex: none; color: var(--text-2); }

/* ---------- 20. Danke und Ablauf (formular-p2) ---------------------------- */
/* Groessen nach formular-p2; gleich auf allen Danke-Seiten (danke.ejs und page.ejs) */
.erfolg { position: relative; display: grid; place-items: center; width: 7.25rem; height: 7.25rem; margin-inline: auto; border-radius: 50%; background: var(--mint); }
.erfolg__kreis { display: grid; place-items: center; width: 4.75rem; height: 4.75rem; border-radius: 50%; background: var(--gruen); color: #fff; }
.erfolg__kreis .icon { width: 2.25rem; height: 2.25rem; stroke-width: 3; }
/* max-width: none, sonst kappt img, svg { max-width: 100% } die Strahlen rechts */
.erfolg__strahlen { position: absolute; inset: -1.5rem; width: calc(100% + 3rem); max-width: none; height: calc(100% + 3rem); color: var(--gruen); }
.danke__titel { font-size: clamp(2.375rem, 1.7rem + 2.6vw, 3.5rem); }
/* «So geht es weiter»: Nummer, Icon, Trennstrich, Text */
.ablauf { margin: 0; padding: 0; list-style: none; }
.ablauf__item { display: grid; grid-template-columns: 2.25rem 2.25rem minmax(0, 1fr); gap: 1rem; align-items: center; padding-block: 1rem; }
.ablauf__item + .ablauf__item { border-top: 1px solid var(--linie); }
.ablauf__nr { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--mint); color: var(--gruen); font: 700 0.9375rem/1 var(--font-text); }
.ablauf__item > .icon { width: 1.75rem; height: 1.75rem; color: var(--gruen); }
.ablauf__text { padding-left: 1rem; border-left: 1px solid var(--linie); color: var(--marine); }

/* ---------- 21. Dunkle Flaeche (partner-werden, m156-offerten-pruefen-p4) -- */
.section--dunkel { background: var(--marine); color: var(--auf-dunkel-2); }
.section--dunkel .h1, .section--dunkel .h2, .section--dunkel .h3, .section--dunkel .karte__titel, .section--dunkel .kachel__titel { color: var(--auf-dunkel); }
.section--dunkel .akzent { color: var(--mint-auf-dunkel); }
.section--dunkel .lead, .section--dunkel .kachel__text { color: var(--auf-dunkel-2); }
.section--dunkel .kicker { color: var(--mint-auf-dunkel); }
.section--dunkel .kicker--pille { background: rgb(143 220 184 / 0.12); }
.section--dunkel .icon-kreis, .section--dunkel .icon-kachel { background: rgb(143 220 184 / 0.12); color: var(--mint-auf-dunkel); }
.section--dunkel a:not(.knopf) { color: var(--mint-auf-dunkel); }
.karte--dunkel, .section--dunkel .kachel { border: 1px solid var(--linie-dunkel); background: var(--flaeche-dunkel); box-shadow: none; }
.section--dunkel .kachel .icon { color: var(--mint-auf-dunkel); }
.section--dunkel .info-zeile { color: var(--auf-dunkel-2); }
.section--dunkel .info-zeile .icon { color: var(--mint-auf-dunkel); }
/* Info-Zeile mit Icon (m156-offerten-pruefen-p4 unten) */
.info-zeile { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; color: var(--text); }
.info-zeile .icon { color: var(--gruen); }

/* ---------- 22. Footer, Credit, Cookie, Druck ----------------------------- */
.footer { padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem; border-top: 1px solid var(--linie); background: var(--bg-hell); color: var(--text); font-size: var(--fs-klein); }
.footer__page { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .footer__page { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .footer__page { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 1.7fr); gap: 2.5rem; } }
.footer__list.footer__list--spalten { display: block; columns: 2; column-gap: 1.5rem; }
.footer__list--spalten li { break-inside: avoid; }
.footer .brand__logo { height: 2.25rem; }
.footer__nap { margin-top: 1rem; font-style: normal; line-height: 1.6; }
.footer__title { margin: 0 0 0.75rem; color: var(--marine); font: 800 var(--fs-text)/1.3 var(--font-titel); }
.footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; }
.footer__list a, .footer__legal a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--text); text-decoration: none; }
@media (hover: hover) { .footer__list a:hover, .footer__legal a:hover { color: var(--gruen); text-decoration: underline; } }
/* Schlusszeile: Handy Copyright, Rechtslinks, Credit untereinander;
   Desktop Raster 1fr auto 1fr mit dem Credit in der Mitte (CREDIT.md 3.4). */
.footer__bottom { display: grid; gap: 1rem; justify-items: center; margin-top: 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); font-size: var(--fs-klein); text-align: center; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.25rem; }
@media (min-width: 48rem) { .footer__bottom { grid-column: 1 / -1; } }
@media (min-width: 64rem) {
  .footer__bottom { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; text-align: left; }
  .footer__copy { grid-column: 1; grid-row: 1; justify-self: start; }
  .footer__legal { grid-column: 3; grid-row: 1; justify-content: flex-end; }
  .credit { grid-column: 2; grid-row: 1; }
}
.credit { display: inline-block; padding-block: 0.25rem; color: var(--credit); font: inherit; line-height: 1.5; text-align: center; text-decoration: none; }
.credit .icon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.2em; }
@media (hover: hover) { .credit:hover { text-decoration: underline; text-underline-offset: 0.2em; } }

/* Cookie-Hinweis im Agentur-Standard (handbuch/RECHT.md 3a): Aussehen in
   css/cookie.css, Verhalten in js/cookie.js (beide wie im Starter). Solange
   die Karte offen ist, weicht der Footer aus (html.hat-cookie; --cookie-h ist
   Hoehe plus Abstand zum Rand), damit der Credit frei liegt (CREDIT.md 3.5). */
.hat-cookie .footer { padding-block-end: calc(1.5rem + var(--cookie-h, 0px)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media print {
  .header, .menu, .footer__legal, .knopf { display: none !important; }
  .section, .schluss { padding-block: 1.5rem; }
  .section--bild::before { display: none; }
}

/* R6 Startseite */
/* Kopf nach Stevens Mockup (2026-10-26): Trennstrich vor «Partner werden» als gruener
   Textlink, rechts der Pillen-Knopf «Jetzt Offerten vergleichen» (partials/header).
   Knopf ab 48rem; darunter fehlt neben Marke und Menueknopf der Platz, dort bleibt
   der Knopf unten im Menue. 48 bis 64rem steht er rechts vor dem Menueknopf. */
.header__knopf { display: none; }
@media (min-width: 48rem) {
  .header__knopf { display: inline-flex; flex: none; width: auto; min-width: 0; margin-left: auto; gap: 0.5rem; }
  .header__knopf .icon { width: 1.125rem; height: 1.125rem; }
}
@media (min-width: 64rem) {
  .header__knopf { margin-left: 0; }
  .nav__item--partner { margin-left: 0.5rem; padding-left: 0.75rem; }
  .nav__item--partner::before { content: ''; position: absolute; left: 0; top: 50%; height: 1.5rem; translate: 0 -50%; border-left: 1px solid var(--linie); }
  .nav__item--partner .nav__link { color: var(--gruen); }
  .header--dunkel .nav__item--partner::before { border-left-color: var(--linie-dunkel); }
  .header--dunkel .nav__item--partner .nav__link { color: var(--mint-auf-dunkel); }
}

/* ---------- 23. Bewegung: «auflegen» (theme.css, handbuch/DESIGN.md 6) ---
   Alles legt sich wie ein Blatt auf den Tisch: kommt von rechts, leicht schraeg,
   mit dem Schatten eines Blatts in der Luft, und bleibt liegen, ohne zu federn
   (es geht um Geld). Linien ziehen sich, Pins setzen sich von West nach Ost.
   Auftritte beim Laden reines CSS; Momente beim Scrollen ueber [data-inview]
   (main.js setzt einmal .is-in). Ausgangszustaende nur unter .js und ohne
   Reduced Motion: ohne JS, mit Reduced Motion und beim Drucken steht alles
   sofort. Der Endzustand jeder Seite ist der Stand vor der Bewegung (2026-11-01).
   Momente der Startseite in seite-home.css, Regionen seite-region.css,
   Foerderung seite-ratgeber.css. */
@keyframes ht-auflegen { from { opacity: 0; transform: translateX(var(--hub)) rotate(1deg); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes ht-auflegen-klein { from { opacity: 0; transform: translateX(1rem) rotate(0.6deg); } 40% { opacity: 1; } }
@keyframes ht-flug { from { opacity: 1; } to { opacity: 0; } }
@keyframes ht-steigen { from { transform: translateY(calc(100% + 0.6em)); } }
@keyframes ht-setzen { from { transform: scale(1.05); } }
@keyframes ht-sonne { from { opacity: 0; transform: translate(-2rem, 2rem) scale(0.85); } }
@keyframes ht-ziehen-x { from { transform: scaleX(0); } }
@keyframes ht-wischen { from { clip-path: inset(-40% 100% -40% -5%); } to { clip-path: inset(-40% -5% -40% -5%); } }
@keyframes ht-da { from { opacity: 0; } }
@keyframes ht-stups { 0%, 100% { transform: none; } 40% { transform: translateX(4px); } }
@keyframes ht-aufklappen { from { opacity: 0; transform: translateY(-0.375rem); } }
@keyframes ht-blatt-auf { from { opacity: 0; transform: translateY(-0.375rem) scale(0.96); } }
@keyframes ht-menu { from { opacity: 0; transform: translateX(1.5rem); } }
@keyframes ht-fokus { from { outline-offset: 8px; } }
@keyframes ht-kreis { from { opacity: 0; transform: scale(0.7); } }
@keyframes ht-haken { from { stroke-dashoffset: 23; } to { stroke-dashoffset: 0; } }
@keyframes ht-strahl { from { stroke-dashoffset: -15; } to { stroke-dashoffset: 0; } }
@keyframes ht-vt-weg { to { opacity: 0; } }
@keyframes ht-vt-her { from { opacity: 0; transform: translateX(1rem); } }

/* Zeilenfenster der H1 (partials/akzent mit zeilen: true): das Fenster ist um
   den Schein der Buchstaben und den Strich unter «sparen.» groesser als die
   Zeile, die Raender heben sich mit negativen Margins auf (Layout unveraendert,
   seitlich hoechstens der Gutter, sonst Querscrollen am Handy). Die H1 ist
   Flex-Spalte, damit die negativen Margins zweier Zeilen nicht zusammenfallen
   (als Block lag die zweite Zeile 0.15em zu tief, gemessen 2026-11-01). */
.h1:has(> .zeile) { display: flex; flex-direction: column; }
.zeile { --fx: min(0.55em, var(--gutter)); display: block; min-width: 0; overflow: clip; padding: 0.15em var(--fx) 0.55em; margin: -0.15em calc(-1 * var(--fx)) -0.55em; }
.zeile__text { display: block; }
/* Umbruch wie vor den Zeilenfenstern: mit <br> hat Chrome Titel aus mehreren Zeilen nicht
   ausgeglichen (gemessen 2026-11-01, 24 Abweichungen bei balance je Zeile), einzeilige schon */
.zeile:not(:only-child) > .zeile__text { text-wrap: wrap; }

/* Rueckmeldung auf jedem Link: Farbe in --dur (DESIGN.md 6 Punkt 5); Marke wird beim Zeigen leiser */
.brand, .drop__link, .menu__link, .menu__phone, .footer__list a, .footer__legal a, .credit, .kontakt-liste a, .faq__frage, .inhalt__link, .faq__mehr {
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
@media (hover: hover) { .brand:hover { opacity: 0.8; } }

@media (prefers-reduced-motion: no-preference) {
  /* Seitenwechsel: Kopf bleibt stehen, die alte Seite geht, die neue legt sich von rechts hin (Fade-through) */
  @view-transition { navigation: auto; }
  .header { view-transition-name: kopf; }
  ::view-transition-group(kopf) { animation-duration: 360ms; }
  ::view-transition-old(root) { animation: ht-vt-weg 220ms var(--ease-weg) both; }
  ::view-transition-new(root) { animation: ht-vt-her 510ms var(--ease-auflegen) 160ms both; }

  /* Titel steigen zeilenweise aus dem Fenster (Startseite, Unterseiten, Regionen, Checkliste) */
  .zeile__text { animation: ht-steigen calc(var(--dur-zeile) * var(--tempo)) var(--ease-auflegen) calc(var(--z-start, 180ms) * var(--tempo)) backwards; }
  .zeile:nth-child(2) > .zeile__text { animation-delay: calc((var(--z-start, 180ms) + 180ms) * var(--tempo)); }
  .zeile:nth-child(3) > .zeile__text { animation-delay: calc((var(--z-start, 180ms) + 340ms) * var(--tempo)); }
  .zeile:nth-child(n+4) > .zeile__text { animation-delay: calc((var(--z-start, 180ms) + 480ms) * var(--tempo)); }

  /* Seitenkopf der Unterseiten: die Pille legt sich, der Titel steigt, Lead und
     Meta folgen, die Karte rechts legt sich daneben, das Foto setzt sich, der
     blasse Kreis oben rechts geht auf wie die Sonne */
  .kopf .kicker--pille { animation: ht-auflegen calc(var(--dur-blatt) * var(--tempo)) var(--ease-auflegen) backwards; }
  .kopf .h1 { --z-start: 210ms; }
  .kopf .meta-zeile, .kopf .lead { animation: ht-da calc(1050ms * var(--tempo)) var(--ease) calc(660ms * var(--tempo)) backwards; }
  .kopf__extra { animation: ht-da calc(1050ms * var(--tempo)) var(--ease) calc(840ms * var(--tempo)) backwards; }
  .kopf__side { animation: ht-auflegen calc(var(--dur-blatt) * var(--tempo)) var(--ease-auflegen) calc(480ms * var(--tempo)) backwards; }
  .kopf__foto img { animation: ht-setzen calc(2250ms * var(--tempo)) var(--ease-auflegen) backwards; }
  .kopf::before { animation: ht-sonne calc(2100ms * var(--tempo)) var(--ease-auflegen) backwards; }

  /* Rueckmeldung: der Pfeil stupst einmal nach vorn, Druck gibt nach, Fokus zieht sich an */
  .knopf:active, .btn:active { transform: scale(0.97); }
  .wahl__item { transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform 120ms var(--ease); }
  .wahl__item:active { transform: scale(0.985); }
  :focus-visible { animation: ht-fokus 145ms var(--ease) backwards; }
  @media (hover: hover) and (pointer: fine) {
    .knopf:hover > .icon, .btn:hover > .icon, .drop__link:hover > .icon { animation: ht-stups 340ms var(--ease) backwards; }
  }

  /* Bedienung: Untermenue, Handy-Menue (legt sich von rechts hin), Antworten der Fragen */
  .drop[open] > .drop__blatt { transform-origin: 1.5rem 0; animation: ht-blatt-auf 220ms var(--ease-auflegen) backwards; }
  .menu[open] { animation: ht-menu 340ms var(--ease-auflegen) backwards; }
  .menu[open]::backdrop { animation: ht-da 340ms var(--ease) backwards; }
  .faq__item[open] > .faq__antwort { animation: ht-aufklappen 320ms var(--ease-auflegen) backwards; }
  .faq__item.is-neu { animation: ht-auflegen-klein 520ms var(--ease-auflegen) calc(min(var(--i, 0), 6) * 70ms) backwards; }

  /* Karte (partials/karte): erst faerbt sich das Gebiet, dann setzen sich die
     Pins von West nach Ost (--verz aus main.js, Westrand 0, Ostrand 640 ms) */
  .karte-ch__land { transition: fill 1050ms var(--ease) 90ms; }
  .js .karte-ch[data-inview]:not(.is-in) .karte-ch__land.is-hervor,
  .js .karte-ch[data-inview]:not(.is-in) .karte-ch__land.is-umriss { fill: var(--karte-land); }
  .karte-ch__nadel { transition: opacity 330ms linear calc(var(--verz, 0ms) + 570ms), transform 960ms var(--ease-auflegen) calc(var(--verz, 0ms) + 570ms); }
  .js .karte-ch[data-inview]:not(.is-in) .karte-ch__nadel { opacity: 0; transform: translateY(-7px); }

  /* Icons zeichnen sich ([data-zeichnen], pathLength aus main.js) */
  .zeichnet .icon :is(path, circle, rect, line, polyline, ellipse) { stroke-dasharray: 1; transition: stroke-dashoffset calc(var(--dur-linie) * 1.2) var(--ease-ziehen) var(--zeichnen-ab, 0ms); }
  .js .zeichnet:not(.is-in) .icon :is(path, circle, rect, line, polyline, ellipse) { stroke-dashoffset: 1; }

  /* Danke: der Kreis setzt sich, der Haken zieht sich, die Strahlen gehen nach aussen */
  .erfolg__kreis { animation: ht-kreis 900ms var(--ease-auflegen) 220ms backwards; }
  .erfolg__kreis .icon path { stroke-dasharray: 23; animation: ht-haken 780ms var(--ease-ziehen) 780ms backwards; }
  .erfolg__strahlen path { stroke-dasharray: 15; animation: ht-strahl 630ms var(--ease-ziehen) 1320ms backwards; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}