/* ============================================================
   EcoCore – Photovoltaik | Relaunch 2026
   Design-System: ruhig, modern, vertrauensbildend
   ============================================================ */

:root {
  --bg: #f6f8f4;
  --surface: #ffffff;
  --ink: #152430;
  --ink-soft: #46596b;
  --green: #63a325;
  --green-dark: #4e8419;
  --green-tint: #eef6e4;
  --navy: #1b3042;
  --navy-deep: #14252f;
  --amber: #f2a51d;
  --line: #e3e8de;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(21, 36, 48, .06), 0 4px 14px rgba(21, 36, 48, .05);
  --shadow-md: 0 6px 24px rgba(21, 36, 48, .10);
  --maxw: 1160px;
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { padding-left: 1.2em; }
strong, b { font-weight: 650; }

::selection { background: var(--green); color: #fff; }

/* ---------- Typografie ---------- */
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; font-weight: 750; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.2rem; font-weight: 700; }

.kicker {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green-dark);
}
.kicker::before { content: ""; width: 26px; height: 3px; background: var(--green); border-radius: 2px; }
.kicker.on-dark { color: #9fd45e; }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-soft); }

.wordmark { font-weight: 800; letter-spacing: -.02em; }
.wordmark .eco { color: var(--green); }
.wordmark .core { color: currentColor; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
section.block { padding: clamp(56px, 8vw, 110px) 0; }
.section-head { max-width: 720px; margin-bottom: clamp(30px, 4vw, 54px); display: grid; gap: 14px; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .85em 1.7em; border-radius: 999px;
  font-weight: 650; font-size: 1rem; font-family: inherit;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none !important;
}
.button.primary { background: var(--green); color: #fff; box-shadow: 0 6px 18px rgba(99, 163, 37, .35); }
.button.primary:hover { background: var(--green-dark); transform: translateY(-2px); }
.button.ghost { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.06); backdrop-filter: blur(4px); }
.button.ghost:hover { border-color: #fff; background: rgba(255,255,255,.14); }
.button.outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.button.outline:hover { background: var(--ink); color: #fff; }
.button.small { padding: .6em 1.25em; font-size: .92rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 20px rgba(21,36,48,.06); }
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px clamp(18px, 4vw, 40px);
  display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; flex-direction: column; line-height: 1.1; color: var(--ink); text-decoration: none !important; }
.brand .wordmark { font-size: 1.5rem; }
.brand small { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }

/* Abstand 24 -> 18 px: Die abgesetzte Seiten-Pille braucht Platz. Mit 24 ragte
   die Kopfzeile auf behoerden.html 22 px ueber den 1160-px-Rahmen hinaus
   (gemessen 07.08.2026 bei 1210, 1280 und 1440 px). Lieber enger setzen als
   Beschriftungen kuerzen – die Menuepunkte sind Martins Wortwahl. */
.main-nav { display: flex; gap: 18px; margin-left: auto; align-items: center; }
.main-nav a { color: var(--ink); font-weight: 550; font-size: .98rem; text-decoration: none !important; position: relative; padding: 4px 0; white-space: nowrap; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--green); transition: right .2s ease;
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { right: 0; }
.main-nav a[aria-current="page"] { color: var(--green-dark); }
.main-nav .ext { color: var(--ink-soft); font-size: .92rem; }

/* Eigene Seite im Menue, abgesetzt von den Sprungmarken (07.08.2026).
   Grund: Im Menue standen Sprungmarken DERSELBEN Seite (Angebot, Ablauf, ...)
   und eine eigene Zielgruppenseite ("Fuer Gemeinden") gleich aussehend
   nebeneinander. Martin hat den Menuepunkt an seiner eigenen Seite monatelang
   uebersehen. Ein Link, der die Seite wechselt, muss anders aussehen als einer,
   der nur scrollt. */
.main-nav .nav-seite {
  /* Farbe je Zielgruppe – gesetzt ueber die Zusatzklassen weiter unten. */
  --nf: var(--green); --nf-dunkel: var(--green-dark); --nf-tint: var(--green-tint);

  margin-left: 8px; padding: 7px 15px 7px 13px;
  border: 1.5px solid var(--nf); border-radius: 999px;
  /* Vollflaechig mit weisser Schrift (Martin, 07.08.2026 – er meinte diesen Knopf,
     nicht den auf der PV-Seite). Getoent war ihm zu leise: "das man gleich sieht,
     ah das ist fuer mich". Weiss auf dem Behoerdenrot liegt bei 5.0:1, also ueber
     der Norm von 4.5:1 – anders als auf dem hellen Amber der PV-Seite, wo dieselbe
     Kombination nur 2.1 ergaebe. */
  background: var(--nf); color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; gap: .5em;
  transition: background .15s ease, box-shadow .15s ease;
}
.main-nav .nav-seite::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; opacity: .9;
}
/* Der Unterstrich der Sprungmarken wuerde die Pille durchschneiden. */
.main-nav .nav-seite::after { display: none; }
.main-nav .nav-seite:hover {
  background: var(--nf-dunkel);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--nf) 45%, transparent);
}
.main-nav .nav-seite[aria-current="page"] { background: var(--nf-dunkel); }

/* Gemeinden tragen die Behoerdenfarbe (Martin, 07.08.2026: "das man gleich sieht,
   ah das ist fuer mich"). Dasselbe Rot wie die Gemeinde-Karte in der Weiche unter
   dem Hero und wie "Brandschutz" in der Fachbereichsleiste – Zielgruppe = Farbe.
   --nf-tint wird nur noch als Ueberfahr-Farbe im Handy-Menue gebraucht. */
.main-nav .nav-seite.gemeinden { --nf: #c04a2b; --nf-dunkel: #9a3a20; --nf-tint: #fceee9; }
.main-nav .nav-seite.planende  { --nf: var(--green); --nf-dunkel: var(--green-dark); --nf-tint: var(--green-tint); }

/* Dokumente neutral in Navy (Martin, 07.08.2026). Vorher war "Musterbericht" gruen
   und stand auf behoerden.html direkt neben dem gruenen Knopf "Gespraech vereinbaren" –
   zwei gruene Pillen nebeneinander, die genau die Unterscheidung aufhoben, die die
   Pille einfuehren soll. Jetzt steht das System sauber:
     gruen  = Handlung (der Knopf)
     rot    = Gemeinden, gruen-Pille = Planende  (Zielgruppe)
     navy   = Dokument
   Weiss auf Navy liegt bei 13.6:1. */
.main-nav .nav-seite.dokument  { --nf: var(--navy); --nf-dunkel: var(--navy-deep); --nf-tint: #e7edf3; }

/* Leise Fassung: nur der Punkt traegt Farbe, der Rest ist weiss mit schwarzer
   Schrift (Martin, 07.08.2026). Gebraucht auf musterbericht.html, wo ZWEI
   Zielgruppen-Pillen und der gruene Knopf nebeneinander stehen – dreimal volle
   Flaeche waere zu laut, und "Fuer Planende" haette dieselbe Farbe wie der Knopf.
   Auf index.html bleibt "Fuer Gemeinden" bewusst vollflaechig: dort steht sie
   allein und soll auffallen. Schwarz auf Weiss liegt bei 15.9:1. */
.main-nav .nav-seite.leise {
  background: var(--surface); color: var(--ink);
  border-color: var(--line);
}
.main-nav .nav-seite.leise::before { background: var(--nf); opacity: 1; }
.main-nav .nav-seite.leise:hover {
  background: var(--nf-tint); color: var(--ink);
  border-color: var(--nf); box-shadow: none;
}

.header-cta { margin-left: 8px; white-space: nowrap; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1200px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none; padding: 10px 0;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px clamp(18px, 4vw, 40px); }
  .main-nav a::after { display: none; }
  .header-cta { display: none; }

  /* Die Pille bleibt auch im aufgeklappten Menue eine Pille (Martin, 07.08.2026:
     "weisse Schrift sieht besser aus, aber eben, gehts dann im Handy-Format").
     Antwort: ja – sie behaelt Flaeche und weisse Schrift, wird nur nicht auf die
     volle Menuebreite gezogen (align-self). Damit sieht der Weg zu den Gemeinden
     am Telefon genauso aus wie am Bildschirm.
     🔴 Falle: Wuerde man hier nur "background: transparent" setzen und die Schrift
     vergessen, stuende Weiss auf dem weissen Menue – unsichtbar. Entweder beides
     zuruecksetzen oder, wie hier, beides behalten. */
  .main-nav .nav-seite {
    align-self: flex-start;
    margin: 14px clamp(18px, 4vw, 40px) 10px;
    padding: 10px 17px 10px 15px;
    border: 0; border-radius: 999px;
    background: var(--nf); color: #fff;
  }
  .main-nav .nav-seite::before { background: #fff; opacity: .9; }
  .main-nav .nav-seite:hover { background: var(--nf-dunkel); box-shadow: none; }
  /* Zweite Pille (musterbericht.html hat "Fuer Gemeinden" und "Fuer Planende")
     rueckt direkt unter die erste. */
  .main-nav .nav-seite ~ .nav-seite { margin-top: 0; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff;
  min-height: clamp(540px, 78vh, 760px);
  display: flex; align-items: center;
  isolation: isolate; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(78deg, rgba(13, 26, 36, .92) 0%, rgba(13, 26, 36, .72) 42%, rgba(13, 26, 36, .25) 100%);
}
.hero-content { max-width: 660px; padding: clamp(70px, 10vw, 120px) 0; display: grid; gap: 22px; }
.hero h1 { color: #fff; }
.hero .lead { color: rgba(255, 255, 255, .88); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.hero-chips span {
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  padding: .45em 1em; border-radius: 999px;
  /* Dunkel hinterlegt statt durchscheinend (Martin, 07.08.2026).
     Vorher lagen die Chips mit 12 % Weiss auf dem Foto - auf ruhigen Stellen
     lesbar, auf unruhigen (Gartenmoebel, Pflanzen) nicht mehr. Die Deckung von
     68 % haelt die weisse Schrift auch dann auf ueber 6:1 Kontrast, wenn direkt
     dahinter eine WEISSE Bildstelle liegt - also im schlechtestmoeglichen Fall.
     Bewusst dunkel und nicht weiss mit dunkler Schrift: Weiss wuerde mit den
     Knoepfen darueber um Aufmerksamkeit streiten, die Chips sind aber nur Beleg. */
  background: rgba(13, 26, 36, .68);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .3);
  text-shadow: none;
}
.hero-chips span.highlight {
  background: var(--green); border-color: var(--green); color: #fff; font-weight: 700;
  box-shadow: 0 4px 16px rgba(99, 163, 37, .45);
}

/* Störer (Eyecatcher) */
.hero-stoerer {
  position: absolute; top: 34px; right: 40px; z-index: 3;
  width: 128px; height: 128px; border-radius: 50%;
  background: var(--amber); color: #152430; border: 3px solid #fff;
  display: grid; place-content: center; text-align: center; line-height: 1.05;
  transform: rotate(-8deg); box-shadow: 0 12px 34px rgba(0, 0, 0, .32);
}
.hero-stoerer span { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.hero-stoerer strong { font-size: 1.25rem; font-weight: 800; }
@media (max-width: 1040px) { .hero-stoerer { display: none; } }

/* Sub-Hero für Unterseiten */
.page-hero { background: var(--navy); color: #fff; padding: clamp(52px, 7vw, 90px) 0; }
.page-hero h1 { color: #fff; margin-top: 12px; }
.page-hero .lead { color: rgba(255,255,255,.85); max-width: 720px; margin-top: 14px; }

/* ---------- Stat-Band ---------- */
.stat-band { background: var(--navy); color: #fff; padding: 34px 0; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.stat b { display: block; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; color: #a5d75f; }
.stat span { font-size: .9rem; color: rgba(255,255,255,.8); }
@media (max-width: 860px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Split (Text + Bild) ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.split.rev { grid-template-columns: .95fr 1.05fr; }
.split.rev .split-media { order: -1; }
.split-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split-copy { display: grid; gap: 16px; }
@media (max-width: 860px) {
  .split, .split.rev { grid-template-columns: 1fr; }
  .split.rev .split-media { order: 0; }
}

/* ---------- Karten ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 26px; display: grid; gap: 12px; align-content: start;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card .icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--green-tint); color: var(--green-dark); font-size: 1.5rem;
}
.card p { color: var(--ink-soft); font-size: .98rem; }
.card .more { font-weight: 650; font-size: .95rem; }

/* ---------- Prozess / Timeline ---------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 64px 1fr; gap: 22px;
  padding: 26px 0; position: relative;
}
.step:not(:last-child)::before {
  content: ""; position: absolute; left: 31px; top: 78px; bottom: -8px;
  width: 2px; background: var(--line);
}
.step-num {
  counter-increment: step;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--green);
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.35rem; color: var(--green-dark);
  box-shadow: var(--shadow-sm); z-index: 1;
}
.step-num::before { content: counter(step); }
.step-body { display: grid; gap: 10px; padding-top: 8px; }
.step-body h3 { font-size: 1.3rem; }
.step-body p, .step-body li { color: var(--ink-soft); }
.step-tag {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--green-dark); background: var(--green-tint);
  padding: .3em .9em; border-radius: 999px; justify-self: start;
}

/* Kompakter Prozess-Teaser (Startseite) */
.mini-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.mini-step {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 16px; display: grid; gap: 6px; text-align: center;
}
.mini-step b { font-size: 1.35rem; color: var(--green-dark); }
.mini-step span { font-size: .88rem; font-weight: 600; }
@media (max-width: 940px) { .mini-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .mini-steps { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Preis-Karten ---------- */
.price-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 22px; align-items: stretch; }
.price-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 28px; display: grid; gap: 14px; align-content: start;
  box-shadow: var(--shadow-sm); position: relative;
}
.price-card.feature { background: var(--navy); color: #fff; border-color: var(--navy); }
.price-card.feature .price-label { color: #a5d75f; }
.price-card.feature p, .price-card.feature li { color: rgba(255,255,255,.85); }
.price-card .price-label { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-dark); }
.price-card .price { font-size: clamp(1.8rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.price-card .price small { font-size: .55em; font-weight: 600; color: inherit; opacity: .75; }
.price-card ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.price-card ul li { padding-left: 1.6em; position: relative; font-size: .97rem; }
.price-card ul li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--green); }
.price-note { font-size: .88rem; color: var(--ink-soft); }
.price-gross { font-size: .95rem; }
.price-gross s { opacity: .7; }
.price-card.feature .price-gross { color: rgba(255,255,255,.8); }
.price-badge {
  display: inline-block; align-self: start; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .35em .8em; border-radius: 999px;
  background: rgba(165, 215, 95, .2); color: #cdefa0;
}
@media (max-width: 940px) { .price-grid { grid-template-columns: 1fr; } }

/* Förder-Hinweisbox */
.info-band {
  background: var(--green-tint); border: 1px solid #d8ecc0; border-radius: var(--radius-lg);
  padding: 26px 30px; display: grid; gap: 8px; margin-top: 30px;
}
.info-band b { color: var(--green-dark); }
.info-band p { color: var(--ink-soft); font-size: .98rem; }

/* ---------- Referenzen ---------- */
.ref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.ref-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: grid; grid-template-rows: auto 1fr;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.ref-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ref-card figure { position: relative; margin: 0; }
.ref-card figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ref-badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(13, 26, 36, .82); color: #fff; backdrop-filter: blur(4px);
  font-size: .8rem; font-weight: 700; padding: .35em .9em; border-radius: 999px;
}
.ref-body { padding: 20px 22px 24px; display: grid; gap: 8px; align-content: start; }
.ref-body h3 { font-size: 1.08rem; }
.ref-body p { color: var(--ink-soft); font-size: .95rem; }

/* Galerie (Referenzen-Seite) */
.gallery { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.gallery img {
  scroll-snap-align: start; flex: 0 0 auto;
  width: min(420px, 78vw); aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius);
}
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.ref-row {
  display: grid; gap: 18px; padding: clamp(30px, 4vw, 46px) 0;
  border-bottom: 1px solid var(--line);
}
.ref-row:last-child { border-bottom: none; }
.ref-row header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.ref-row h2 { font-size: 1.45rem; }
.ref-row .ref-meta {
  font-size: .82rem; font-weight: 700; color: var(--green-dark);
  background: var(--green-tint); padding: .3em .9em; border-radius: 999px;
}
.ref-row p { color: var(--ink-soft); max-width: 780px; }

/* ---------- Checkliste / Vorteile ---------- */
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 34px; }
.check-grid li {
  list-style: none; padding-left: 2em; position: relative;
  font-size: 1rem; color: var(--ink-soft);
}
.check-grid li b { color: var(--ink); }
.check-grid li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 1.35em; height: 1.35em; border-radius: 50%;
  background: var(--green-tint); color: var(--green-dark);
  display: grid; place-items: center; font-size: .9em; font-weight: 800;
}

/* ---------- Person ---------- */
.person-band { background: var(--navy); color: #fff; }
.person-band h2 { color: #fff; }
.person-band .lead { color: rgba(255,255,255,.85); }
.person-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 38px; }
.person-grid h3 { color: #a5d75f; font-size: 1.02rem; margin-bottom: 8px; }
.person-grid p { color: rgba(255,255,255,.82); font-size: .97rem; }
.person-meta { margin-top: 34px; font-size: .95rem; color: rgba(255,255,255,.75); }
.person-meta a { color: #a5d75f; }
@media (max-width: 860px) { .person-grid { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- FAQ ---------- */
.faq-cat { margin-bottom: clamp(30px, 4vw, 46px); }
.faq-cat > h2 { font-size: 1.35rem; margin-bottom: 16px; color: var(--navy); }
details.faq-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 10px; overflow: hidden;
}
details.faq-item summary {
  cursor: pointer; list-style: none;
  padding: 18px 54px 18px 22px; font-weight: 650; font-size: 1.02rem;
  position: relative; transition: color .15s ease;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--green-tint); color: var(--green-dark);
  display: grid; place-items: center; font-weight: 700; font-size: 1.1rem;
  transition: transform .2s ease;
}
details.faq-item[open] summary { color: var(--green-dark); }
details.faq-item[open] summary::after { content: "–"; transform: translateY(-50%); }
.faq-answer { padding: 0 22px 22px; color: var(--ink-soft); display: grid; gap: 12px; }
.faq-answer ul { display: grid; gap: 6px; }
.hint { font-weight: 600; color: var(--ink); }
.hint::before { content: "→ "; color: var(--green); font-weight: 800; }

/* ---------- Partner-Marquee ---------- */
.partner-band { padding: 44px 0; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.partner-band h2 { text-align: center; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-bottom: 26px; }
.marquee { display: flex; overflow: hidden; user-select: none; gap: 60px; }
.marquee-track { display: flex; align-items: center; gap: 60px; min-width: 100%; flex-shrink: 0; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track img { height: 44px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .2s ease, opacity .2s ease; }
.marquee-track img:hover { filter: none; opacity: 1; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 60px)); } }

/* ---------- CTA-Band ---------- */
.cta-band { background: linear-gradient(115deg, var(--green-dark), var(--green)); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 640px; margin: 14px auto 26px; }
.cta-band .button.primary { background: #fff; color: var(--green-dark); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.cta-band .button.primary:hover { background: var(--bg); }

/* ---------- Kontakt ---------- */
.contact-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 5vw, 60px); align-items: start; }
@media (max-width: 940px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-info { display: grid; gap: 18px; }
.contact-info ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.contact-info li { display: flex; gap: 10px; align-items: baseline; color: var(--ink-soft); }
.contact-info li b { color: var(--ink); }

.contact-form {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 3.5vw, 40px); box-shadow: var(--shadow-sm);
  display: grid; gap: 18px; grid-template-columns: 1fr 1fr;
}
.contact-form .full { grid-column: 1 / -1; }
.contact-form label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.contact-form input, .contact-form textarea, .contact-form select {
  font: inherit; padding: .75em .95em;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); width: 100%;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: none; border-color: var(--green); background: #fff;
  box-shadow: 0 0 0 3px rgba(99, 163, 37, .15);
}
.contact-form details {
  grid-column: 1 / -1; border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 14px 18px;
}
.contact-form details summary { cursor: pointer; font-weight: 650; font-size: .95rem; color: var(--green-dark); }
.contact-form details .optional-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.contact-form fieldset { border: none; display: grid; gap: 8px; }
.contact-form fieldset legend { font-weight: 650; font-size: .92rem; margin-bottom: 4px; }
.contact-form .choice { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: .95rem; }
.contact-form .choice input { width: 18px; height: 18px; accent-color: var(--green); }
.form-note { grid-column: 1 / -1; font-size: .88rem; color: var(--ink-soft); }
.form-status { grid-column: 1 / -1; font-weight: 650; min-height: 1.4em; }
.form-status.ok { color: var(--green-dark); }
.form-status.err { color: #b3382c; }
.honeypot { position: absolute; left: -9999px; }
@media (max-width: 640px) {
  .contact-form { grid-template-columns: 1fr; }
  .contact-form details .optional-grid { grid-template-columns: 1fr; }
}

/* ---------- Sonnendach-Modal ---------- */
.sd-modal[hidden] { display: none; }
.sd-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(13, 26, 36, .7); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 20px;
}
.sd-dialog {
  background: var(--surface); border-radius: var(--radius-lg); overflow: hidden;
  width: min(1000px, 96vw); box-shadow: var(--shadow-md);
  display: grid; grid-template-rows: auto 1fr auto;
}
.sd-dialog header { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.sd-dialog h2 { font-size: 1.15rem; }
.sd-dialog iframe { width: 100%; height: min(62vh, 560px); border: none; }
.sd-dialog footer { padding: 12px 22px; font-size: .85rem; color: var(--ink-soft); border-top: 1px solid var(--line); }
.sd-close { background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--ink-soft); line-height: 1; }
.sd-close:hover { color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.8); padding: clamp(44px, 6vw, 70px) 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; }
.footer-grid h3 { color: #fff; font-size: .95rem; margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.footer-grid a { color: rgba(255,255,255,.75); font-size: .95rem; }
.footer-grid a:hover { color: #a5d75f; }
.footer-brand .wordmark { font-size: 1.6rem; color: #fff; }
.footer-brand small { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 4px; }
.footer-brand p { margin-top: 16px; font-size: .92rem; max-width: 280px; }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .85rem; color: rgba(255,255,255,.55);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Legal-Seiten ---------- */
main.legal { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 70px) clamp(18px, 4vw, 40px); display: grid; gap: 16px; }
main.legal h1 { font-size: 2rem; }
main.legal h2 { font-size: 1.25rem; margin-top: 18px; }
main.legal p, main.legal li { color: var(--ink-soft); }
.back-link { font-weight: 650; }

/* ---------- Scroll-Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }


/* ---------- Bereichswechsler ---------- */
/* Dezente Leiste unter der Kopfzeile: zeigt die Fachbereiche von EcoCore.
   Jeder Bereich hat eine eigene Farbe (--bf), die aus _Werkzeuge/bereiche.py kommt.
   Markup dort aendern, nicht hier. */
.bereiche {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(21, 36, 48, .04);
  font-size: .92rem;
}
.bereiche .wrap { display: flex; align-items: stretch; gap: 20px; }
.bereiche-label {
  flex: none; align-self: center;
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .8;
}
.bereiche ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  /* Ohne min-width:0 schrumpft ein Flex-Element nicht unter seine Inhaltsbreite –
     die Liste wuerde die ganze Seite aufschieben statt selbst zu scrollen. */
  min-width: 0; flex: 1 1 auto;
}
.bereiche ul::-webkit-scrollbar { display: none; }
.bereiche a {
  --bf: var(--green);
  display: inline-flex; align-items: center; gap: .55em; white-space: nowrap;
  padding: 11px 16px; color: var(--ink-soft); font-weight: 550;
  border-bottom: 2px solid transparent;
  text-decoration: none !important;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.bereiche a::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bf); opacity: .55;
  transition: opacity .15s ease, box-shadow .15s ease;
}
.bereiche a:hover { color: var(--ink); background: rgba(255, 255, 255, .75); }
.bereiche a:hover::before { opacity: 1; }
.bereiche a:focus-visible { outline: 2px solid var(--bf); outline-offset: -2px; }
.bereiche a[aria-current="true"] {
  color: var(--ink); font-weight: 700;
  background: var(--surface);
  border-bottom-color: var(--bf);
}
.bereiche a[aria-current="true"]::before {
  opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf) 22%, transparent);
}
.bereiche-marke {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px;
}
@media (max-width: 780px) {
  .bereiche .wrap { padding-left: 0; padding-right: 0; gap: 0; }
  .bereiche-label { display: none; }
  .bereiche ul { padding: 0 clamp(10px, 3vw, 20px); }
  .bereiche a { padding: 10px 13px; font-size: .9rem; }
}


/* ---------- Abgrenzung / Unabhängigkeit ---------- */
.abgrenzung-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 3vw, 36px); align-items: stretch; }
@media (max-width: 940px) { .abgrenzung-layout { grid-template-columns: 1fr; } }
.abgrenzung-karte {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 3.4vw, 40px);
}
.abgrenzung-karte p { color: var(--ink-soft); }
.abgrenzung-karte p + p { margin-top: 14px; }
.abgrenzung-karte h2 { margin-bottom: 16px; }
.abgrenzung-karte h3 { margin-bottom: 14px; }
.abgrenzung-offen {
  background: var(--green-tint); border-color: #cfe8b0;
}
.abgrenzung-link { margin-top: 18px; font-weight: 650; }

/* ---------- Themen-Abschnitt (Wärmepumpe & Heizungsersatz) ---------- */
.thema-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.6vw, 30px); align-items: start; }
@media (max-width: 940px) { .thema-layout { grid-template-columns: 1fr; } }
.thema-karte {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px);
}
.thema-karte h3 { margin-bottom: 16px; }
.thema-karte ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.thema-karte li { position: relative; padding-left: 26px; color: var(--ink-soft); font-size: .97rem; }
.thema-karte li b { color: var(--ink); }
.thema-karte li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--green-tint); border: 1.5px solid var(--green);
}
.thema-karte-akzent { background: var(--green-tint); border-color: #cfe8b0; }
.thema-karte-akzent li::before { background: #fff; border-color: var(--amber); }
.thema-schluss {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid #cfe8b0;
  font-size: .95rem; color: var(--ink); font-weight: 600;
}

/* Reine Fragenliste – kürzer gesetzt als die erklärenden Listen */
.thema-karte ul.fragen { gap: 10px; }
.thema-karte ul.fragen li { color: var(--ink); font-weight: 550; }
.thema-karte:not(.thema-karte-akzent) .thema-schluss { border-top-color: var(--line); font-weight: 500; color: var(--ink-soft); }


/* ============================================================
   EcoCore Brandschutz - Behoerdenseite (behoerden.html)
   Wirkung: sachlich, amtsnah, nachvollziehbar.
   ============================================================ */

/* Hero ohne Foto - Plandunkel statt Bild */
.hero-behoerden {
  background:
    radial-gradient(120% 90% at 78% 10%, rgba(192, 74, 43, .22) 0%, rgba(192, 74, 43, 0) 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 60%, #101d26 100%);
  min-height: clamp(460px, 62vh, 640px);
}
.hero-behoerden::after { content: none; }
.hero-behoerden .hero-content { max-width: 860px; }

/* Rechtsgrundlagen als zitierte Karten */
.norm-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .norm-liste { grid-template-columns: 1fr; } }
.norm {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--green); border-radius: var(--radius);
  padding: clamp(18px, 2.4vw, 26px);
}
.norm-quelle {
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green-dark); margin-bottom: 10px;
}
.norm-text { color: var(--ink); font-size: 1rem; }
.norm-text b { font-weight: 700; }
.norm-hinweis { margin-top: 10px; font-size: .9rem; color: var(--ink-soft); font-style: italic; }

/* Symbole in den Leistungskarten wie auf der PV-Seite */
.card .icon svg { width: 27px; height: 27px; }
.card:hover .icon { background: var(--green); color: #fff; }


/* ---------- Zielgruppen-Weiche unter dem Hero (07.08.2026) ---------- */
/* Beantwortet die Frage "betrifft mich das?" im ersten Bildschirm, ohne dass
   jemand das Menue durchsuchen muss. Die Karte hebt sich in den Hero hinein,
   damit sie als Teil des Einstiegs gelesen wird und nicht als naechster Block. */
.weiche { position: relative; z-index: 2; margin-top: clamp(-64px, -5vw, -34px); }
.weiche-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.weiche-karte {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: clamp(20px, 2.6vw, 28px);
  text-decoration: none !important; color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.weiche-karte:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(21,36,48,.13); }
.weiche-frage { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 700; line-height: 1.25; }
.weiche-text { color: var(--ink-soft); font-size: .97rem; }
.weiche-ziel {
  margin-top: 6px; font-weight: 650; color: var(--green-dark);
  display: inline-flex; align-items: center; gap: .4em;
}
.weiche-karte:hover .weiche-ziel { gap: .7em; }
.weiche-ziel span { transition: transform .18s ease; }
.weiche-karte:hover .weiche-ziel span { transform: translateX(3px); }

/* Die Gemeinde-Karte traegt die Behoerdenfarbe, damit die beiden Wege auf den
   ersten Blick als zwei verschiedene Wege lesbar sind. Dasselbe Rot wie die Pille
   "Fuer Gemeinden" im Menue – zweimal dasselbe Signal auf demselben Bildschirm. */
.weiche-karte.behoerde {
  border-top-color: #c04a2b; border-top-width: 4px;
  background: linear-gradient(180deg, #fdf4f1 0%, var(--surface) 42%);
}
.weiche-karte.behoerde .weiche-ziel { color: #9a3a20; }

@media (max-width: 860px) {
  .weiche { margin-top: 0; padding-top: clamp(26px, 5vw, 40px); }
  .weiche-grid { grid-template-columns: 1fr; }
}