/* Sun Device — Website
   Werte verbindlich aus design-system.md des Handoffs; jede Sektion ist aus
   dem Original-Markup der Prototypen übertragen (Inline-Styles → Klassen).

   Aufbau: Tokens → Basis → Bausteine in Seitenreihenfolge → Haltepunkte.
   Die Prototypen enthalten keine @media-Regel; alles unter 1024px ist hier
   ergänzt (ANALYSE.md §4). */

/* =============================================================== Schrift = */

/* Hanken Grotesk, selbst gehostet (SIL Open Font License, web/fonts/OFL.txt).
   Eine variable Schrift: Eine Datei je Zeichensatz deckt alle Stärken ab.
   Selbst gehostet, weil Google Fonts die IP jedes Besuchers an Google
   überträgt (LG München, 2022) und weil eine zweite Verbindung zu einem
   fremden Server den ersten Text verzögert. latin wird im Kopf per preload
   angefordert; latin-ext lädt der Browser nur, wenn ein Zeichen daraus
   tatsächlich vorkommt. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================== Tokens === */

:root {
  --orange: #f09400;
  --orange-hover: #d17f00;
  --orange-link-hover: #c97900;
  --orange-cta-hover: #d98500;
  --ink: #1c1c1c;
  --ink-hover: #000000;
  --text: #333333;
  --braun: #492300;
  --grau: #7b7269;
  --grau-neutral: #55504b;
  --grau-eyebrow: #9b9b9b;
  --grau-hell: #8a8a8a;
  --bg: #f2f2f2;
  --panel: #f7f5f2;
  --weiss: #ffffff;
  --border: #ddd6cd;
  --border-hell: #e6e1da;
  --border-zeile: #ece7e0;
  --gruen: #2fa84f;
  --puls-hell: #fbe6c8;

  --rand: clamp(16px, 2.6vw, 44px);
  --breite: 1240px;
  --sektion: clamp(56px, 6vw, 100px);
  --sektion-gross: clamp(56px, 6.4vw, 104px);

  --r-pill: 999px;
  --r-feld: 8px;
  --r-kachel: 12px;
  --r-container: 16px;
  --r-karte: 18px;
  --r-funnel: 20px;

  --schatten-karte: 0 18px 60px rgba(0, 0, 0, 0.14);
  --schatten-overlay: 0 30px 80px rgba(0, 0, 0, 0.28);
}

/* =============================================================== Basis === */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  color: #111111;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4 { letter-spacing: -0.01em; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-link-hover); }
img { max-width: 100%; }
input, textarea, button, select { font-family: inherit; }
::placeholder { color: #6f6f6f; opacity: 1; }
[hidden] { display: none !important; }
.akzent { color: var(--orange); font-style: normal; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprung {
  position: absolute; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-200%);
  background: var(--ink); color: var(--weiss);
  padding: 12px 20px; border-radius: var(--r-pill); font-weight: 700;
  transition: transform 0.2s ease;
}
.sprung:focus { transform: translateY(0); color: var(--weiss); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------------------------------------------------------- Animation --- */

@keyframes sdRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sdFadeUp { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sdLauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sdSunPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.22); opacity: 0.55; } }

[data-reveal].sd-bereit { opacity: 0; }
.sd-animationen-fertig .hero__text, .sd-animationen-fertig .funnel__karte { animation: none; opacity: 1; transform: none; }
[data-reveal].sd-sichtbar { animation: sdFadeUp 0.9s ease both; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal].sd-bereit { opacity: 1; }
}

/* ============================================================== Layout === */

.inhalt { max-width: var(--breite); margin: 0 auto; width: 100%; }
.sektion { padding: var(--sektion) var(--rand); }
.sektion--gross { padding: var(--sektion-gross) var(--rand); }
.sektion--dunkel { background: var(--braun); }

/* Sektionskopf A: graues Eyebrow links, H2 rechts (Referenzen, Leistungen) */
.sk-kopf {
  display: grid; grid-template-columns: minmax(160px, 0.42fr) 1fr;
  gap: clamp(20px, 3vw, 56px);
}
.eyebrow--grau {
  margin: 6px 0 0; font-size: 15px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grau-eyebrow);
}
/* Sektionskopf B: oranges Eyebrow über der H2 */
.eyebrow {
  display: block; margin: 0 0 14px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange);
}
.h2 {
  margin: 0; font-size: clamp(26px, 3vw, 42px); line-height: 1.16; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty;
}
.h2--leicht { font-weight: 400; line-height: 1.14; }
.h2--weiss { color: var(--weiss); }
.h2--mitte { text-align: center; }
.fliess { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); }
.fliess--hell { color: rgba(255, 255, 255, 0.8); }
.fliess b { color: var(--ink); }
.fliess--hell b { color: var(--weiss); }
.zeile-mitte { display: flex; justify-content: center; }
.zeile-rechts { display: flex; justify-content: flex-end; }
.zeile-links { display: flex; justify-content: flex-start; }

/* ------------------------------------------------------------ Buttons --- */

.btn {
  display: inline-flex; align-items: center; gap: 12px; border: none;
  border-radius: var(--r-pill); font-size: 16px; font-weight: 700; cursor: pointer;
  text-align: center; padding: 17px 30px;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn--dunkel { background: var(--ink); color: var(--weiss); }
.btn--dunkel:hover { background: var(--ink-hover); color: var(--weiss); }
.btn--orange { background: var(--orange); color: var(--weiss); }
.btn--orange:hover { background: var(--orange-hover); color: var(--weiss); }
.btn--klein { padding: 15px 26px; }
.btn--mittel { padding: 16px 28px; }
/* Anruf-Button im Kopf der Angebotsseite. */
.angebot__anruf { gap: 10px; padding: 12px 22px; font-size: 16px; white-space: nowrap; }
.angebot__anruf svg { flex: 0 0 auto; }
@media (max-width: 659px) { .angebot__anruf { padding: 10px 16px; font-size: 15px; } }
.btn:disabled { cursor: not-allowed; }
.pill {
  display: inline-flex; align-items: center; border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 9px 16px; font-size: 14px; font-weight: 600;
  color: var(--braun); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pill:hover { background: var(--orange); border-color: var(--orange); color: var(--weiss); }

/* Häkchen-Zeile (Hero-Bullets, Listen in Förderung/Kombination) */
.haken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.haken li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.6; }
.haken svg { flex: 0 0 auto; margin-top: 2px; }

/* Pulsierender Icon-Kreis (Vorteile Sun Device, Region) */
.puls { position: relative; display: flex; align-items: center; justify-content: center; width: 118px; height: 118px; }
.puls__ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); animation: sdSunPulse 2.8s ease-in-out infinite; }
.puls--hell .puls__ring { background: var(--puls-hell); }
.puls__kreis { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 50%; background: var(--orange); }

/* ================================================================ Kopf === */

.kopf {
  position: relative; z-index: 20; display: flex; align-items: center;
  justify-content: space-between; gap: clamp(16px, 2vw, 40px);
  max-width: var(--breite); margin: 0 auto; width: 100%; padding: 24px var(--rand);
}
.kopf__logo { display: block; width: 116px; flex: 0 0 auto; }
.kopf__logo img { display: block; width: 100%; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 44px); margin-left: auto; }
.nav__punkt { position: relative; padding: 14px 0; }
.nav__knopf {
  display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 0;
  color: var(--weiss); font-size: 18px; font-weight: 500; cursor: pointer;
}
.nav__knopf svg { transition: transform 0.2s ease; }
.nav__punkt[data-offen] .nav__knopf svg { transform: rotate(180deg); }
.kopf__cta {
  flex: 0 0 auto; background: var(--orange); color: var(--weiss);
  font-size: clamp(16px, 1.1vw, 18px); font-weight: 700;
  padding: clamp(14px, 1.4vw, 20px) clamp(20px, 2.2vw, 34px); border-radius: var(--r-pill);
  transition: background 0.15s ease;
}
.kopf__cta:hover { background: var(--orange-cta-hover); color: var(--weiss); }

.burger {
  display: none; flex: 0 0 auto; width: 48px; height: 48px; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--r-pill); cursor: pointer;
}
.burger span:not(.sr) { display: block; position: relative; width: 20px; height: 2px; background: var(--weiss); border-radius: 2px; transition: background 0.2s ease; }
.burger span:not(.sr)::before, .burger span:not(.sr)::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--weiss);
  border-radius: 2px; transition: transform 0.2s ease;
}
.burger span:not(.sr)::before { top: -6px; }
.burger span:not(.sr)::after { top: 6px; }
[data-menue-offen] .burger span:not(.sr) { background: transparent; }
[data-menue-offen] .burger span:not(.sr)::before { transform: translateY(6px) rotate(45deg); }
[data-menue-offen] .burger span:not(.sr)::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------- Mega-Menü --- */

/* Wie im Prototyp fest am Viewport verankert: absolut zum Menüpunkt gesetzt
   ragt das 1240px breite Panel rechts aus der Seite und erzeugt einen
   horizontalen Überlauf, obwohl es unsichtbar ist. */
.mega {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(-8px); top: 84px;
  width: min(var(--breite), calc(100vw - 2 * var(--rand))); z-index: 60;
  opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease;
}
.nav__punkt:hover .mega, .nav__punkt[data-offen] .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega__karte {
  background: var(--panel); border-radius: var(--r-container); box-shadow: var(--schatten-overlay);
  padding: clamp(18px, 1.8vw, 26px); display: flex; flex-direction: column; gap: 18px;
}
.mega__spalten { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.mega__orte { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; margin-top: 16px; }
.mega__ort { font-size: 16px; font-weight: 600; color: var(--ink); padding: 6px 0; border-bottom: 1px solid #f0ebe3; }
.mega__ort:hover { color: var(--orange); }
.mega__ort span { color: #a39a8e; font-weight: 400; font-size: 13px; }
.mega__teaser { position: relative; border-radius: var(--r-kachel); overflow: hidden; min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; }
.mega__teaser img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega__teaser::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.65) 100%); }
.mega__teaser > div { position: relative; z-index: 2; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.mega__teaser b { font-size: 17px; color: var(--weiss); line-height: 1.3; }
.mega__banner {
  background: var(--braun); border-radius: var(--r-kachel); padding: 20px clamp(18px, 2vw, 28px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.mega__banner b { font-size: 18px; font-weight: 700; color: var(--weiss); }
.mega__banner span { font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.mega__wp {
  background: var(--weiss); border-radius: var(--r-kachel); padding: clamp(18px, 2vw, 28px);
  display: grid; grid-template-columns: 1fr minmax(180px, 0.7fr); gap: clamp(18px, 2vw, 30px); align-items: start;
}
.mega__badge {
  align-self: flex-start; background: var(--braun); color: var(--weiss); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 14px; border-radius: var(--r-pill);
}
.mega__wp img { width: 100%; height: clamp(150px, 14vw, 210px); object-fit: cover; border-radius: var(--r-kachel); }

/* ================================================================ Hero === */

/* z-index: Die Kopfzeile liegt im Hero und ist ab 1024px abwärts fixiert.
   `isolation` sperrt sie aber in den Stapelkontext des Hero — ohne eigenen
   z-index malen alle folgenden Sektionen über die fixierte Kopfzeile und über
   das geöffnete Menü. 10 liegt über allem Seiteninhalt (höchstens 3) und unter
   Anruf-Knopf (80), Cookie-Hinweis (120) und Sprunglink (200). */
.hero { position: relative; z-index: 10; display: flex; flex-direction: column; min-height: 640px; background-color: #1b1b1b; isolation: isolate; }
.hero__bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13, 9, 6, 0.6) 0%, rgba(13, 9, 6, 0.45) 40%, rgba(13, 9, 6, 0.82) 100%);
}
.hero__innen { position: relative; z-index: 4; min-height: 520px; display: flex; flex-direction: column; flex: 1; }

.hero__text {
  display: flex; flex-direction: column; gap: 20px; margin-top: auto;
  padding: clamp(20px, 2.4vw, 32px) var(--rand) clamp(32px, 3.6vw, 56px);
  max-width: var(--breite); width: 100%; margin-left: auto; margin-right: auto;
  animation: sdRise 0.8s ease 0.2s both;
}
.hero h1 {
  margin: 0; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.06; font-weight: 700; color: var(--weiss);
  letter-spacing: -0.025em; max-width: 900px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.hero__bullets { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero__bullets span { display: flex; align-items: center; gap: 10px; color: var(--weiss); font-size: 16px; font-weight: 600; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.hero__sub { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.95); max-width: 560px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.hero__cta { align-self: flex-start; margin-top: 6px; padding: 16px 30px; }
/* Startseite: zweispaltiger Textblock unter dem Schriftzug */

/* ============================================================== Funnel === */

.funnel { background: var(--bg); padding: clamp(36px, 4vw, 64px) var(--rand); }
.funnel__karte {
  max-width: 1080px; margin: 0 auto; background: var(--weiss); border: 1px solid var(--border-hell);
  border-radius: var(--r-funnel); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(24px, 2.8vw, 44px) clamp(20px, 2.8vw, 48px);
  display: flex; flex-direction: column; align-items: stretch; gap: clamp(16px, 1.8vw, 24px);
  animation: sdFadeUp 0.9s ease 0.4s both;
}
/* Kopf der Karte, von oben nach unten: Ansprechpartnerin, Schrittzähler mit
   Balken, Frage, Hinweis — alles linksbündig, die Kacheln darunter füllen
   die Breite. */
.funnel__titel { text-align: left; margin: 0; }
.funnel__text { margin: -8px 0 0; text-align: left; font-size: 16px; line-height: 1.55; color: var(--grau); }
/* Auf dem Telefon entfällt der Einleitungstext unter dem Titel ganz. */
@media (max-width: 659px) { .funnel__text { display: none; } }
.funnel__fortschritt { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.funnel__zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.funnel__balken { display: flex; gap: 4px; width: 100%; }
.funnel__segment { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--border-hell); transition: background 0.25s ease; }
.funnel__segment[data-erledigt] { background: var(--orange); }
.funnel__schritt {
  display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--weiss); font-size: 15px; font-weight: 700;
}
.funnel__dauer { font-size: 15px; color: var(--grau); }
.funnel__kopf { display: flex; flex-direction: column; gap: 8px; }
.funnel__frage { margin: 0; text-align: left; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; font-weight: 800; color: var(--ink); text-wrap: pretty; }
.funnel__hinweis { margin: 0; max-width: 720px; text-align: left; font-size: 17px; line-height: 1.6; color: var(--grau); }

.funnel__beraterin { display: flex; align-items: center; gap: 18px; padding-bottom: clamp(16px, 1.8vw, 24px); border-bottom: 1px solid var(--border-hell); }
.funnel__beraterin img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.funnel__punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); margin-right: 8px; }
.funnel__gruss { margin: 0 0 4px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.35; color: var(--ink); }
.funnel__gruss b { font-weight: 800; }
.funnel__status { font-size: 15px; color: var(--grau); }
/* „innerhalb 1 Std." bleibt zusammen und bricht als Ganzes um. */
.funnel__nowrap { white-space: nowrap; }

.funnel__kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(12px, 1.3vw, 18px); width: 100%; }
.funnel__kacheln--wahl { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.funnel__kachel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--weiss); border: 1.5px solid var(--border-hell); border-radius: var(--r-kachel);
  padding: 22px 14px 18px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); text-align: center;
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.funnel__kachel:hover { border-color: var(--orange); transform: translateY(-2px); }
.funnel__kachel[aria-pressed='true'] { border-color: var(--orange); background: rgba(240, 148, 0, 0.08); }
.funnel__ring {
  display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--weiss); transition: border-color 0.15s ease, background 0.15s ease;
}
.funnel__kachel[aria-pressed='true'] .funnel__ring { border-color: var(--orange); background: rgba(240, 148, 0, 0.12); }
.funnel__ring img { width: 44px; height: 44px; object-fit: contain; }
/* Bildkacheln: die freigestellte Illustration steht allein auf der weißen
   Kachel, ohne Kreis. Feste Höhe, damit alle Kacheln einer Reihe gleich hoch
   bleiben, egal wie das Motiv geschnitten ist. */
.funnel__kachel--bild { padding: 18px 14px 18px; gap: 12px; }
.funnel__bild { display: flex; align-items: center; justify-content: center; width: 100%; height: 92px; }
.funnel__bild img { max-width: 118px; max-height: 92px; width: auto; height: auto; object-fit: contain; transition: transform 0.2s ease; }
.funnel__kachel--bild:hover .funnel__bild img { transform: scale(1.04); }
.funnel__wahl {
  display: flex; flex-direction: row; align-items: center; gap: 14px; text-align: left; padding: 18px 20px;
  font-size: 16px; font-weight: 400; line-height: 1.35;
}
.funnel__dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #cfc7bd; transition: border 0.15s ease; }
.funnel__kachel[aria-pressed='true'] .funnel__dot { border: 7px solid var(--orange); }

/* Zwei Spalten: Vorname | Nachname, Adresse | PLZ, darunter die Nachricht
   über die ganze Breite. E-Mail und Telefon stehen allein in ihrem Schritt
   und nehmen deshalb die ganze Zeile. */
.funnel__eingaben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
.funnel__eingaben [name="mail"], .funnel__eingaben [name="tel"] { grid-column: 1 / -1; }
.funnel__eingaben input {
  height: 56px; padding: 0 18px; border-radius: var(--r-feld); border: 1px solid var(--border-hell);
  background: var(--weiss); color: var(--ink); font-size: 16px; width: 100%;
}
.funnel__eingaben input:focus { border-color: var(--orange); outline: none; }
.funnel__eingaben textarea {
  grid-column: 1 / -1; min-height: 120px; padding: 14px 18px; border-radius: var(--r-feld); border: 1px solid var(--border-hell);
  background: var(--weiss); color: var(--ink); font: inherit; font-size: 16px; width: 100%; resize: vertical;
}
.funnel__eingaben textarea:focus { border-color: var(--orange); outline: none; }
.funnel__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.funnel__chip { background: #f4f1ed; color: var(--braun); font-size: 13px; padding: 9px 16px; border-radius: var(--r-pill); }
.funnel__fuss {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; width: 100%;
  border-top: 1px solid var(--border-zeile); padding-top: 28px; margin-top: 6px;
}
.funnel__zurueck {
  height: 50px; padding: 0 22px; border: 1px solid var(--border-hell); border-radius: var(--r-pill);
  background: var(--weiss); color: var(--braun); font-size: 16px; font-weight: 600; cursor: pointer;
}
.funnel__weiter { height: 50px; padding: 0 30px; border: none; border-radius: var(--r-pill); font-size: 16px; font-weight: 700; background: var(--orange); color: var(--weiss); cursor: pointer; transition: all 0.15s ease; }
.funnel__weiter:disabled { background: rgba(28, 28, 28, 0.08); color: rgba(28, 28, 28, 0.4); }
.funnel__meldung { margin: 0; text-align: center; font-size: 15px; color: var(--grau); }
.funnel__meldung[data-art='fehler'] { color: #c0392b; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =============================================================== Intro === */

.intro { display: flex; flex-wrap: wrap; gap: clamp(30px, 4vw, 72px); align-items: stretch; }
.intro--breit { align-items: flex-start; }
.intro__text { flex: 1 1 620px; max-width: 820px; display: flex; flex-direction: column; gap: 20px; }
.intro--breit .intro__text { flex: 1 1 380px; max-width: 620px; }
.intro__unter { margin: 0 0 8px; font-size: clamp(19px, 1.7vw, 24px); font-weight: 400; line-height: 1.3; color: var(--ink); }
.intro__text .fliess { line-height: 1.65; }
.intro--breit .intro__text .fliess { font-size: 18px; line-height: 1.62; }
.intro__bild { flex: 0 1 380px; min-width: 280px; display: flex; }
.intro--breit .intro__bild { flex: 1 1 480px; min-width: 300px; }
.intro__bild img { width: 100%; height: 100%; min-height: 300px; max-height: 560px; object-fit: cover; border-radius: var(--r-feld); display: block; }
.intro--breit .intro__bild img { height: clamp(320px, 40vw, 640px); max-height: none; min-height: 0; }

/* ========================================================== Referenzen === */

.refk__raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: clamp(260px, 30vw, 470px); gap: clamp(20px, 2vw, 32px); margin-top: clamp(32px, 3.6vw, 56px);
}
.refk__karte { position: relative; border-radius: var(--r-kachel); overflow: hidden; background: #ddd; }
.refk__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; }
.refk__ov { position: absolute; opacity: 0; transition: opacity 0.3s ease; }
.refk__karte:hover .refk__ov, .refk__karte:focus-within .refk__ov { opacity: 1; }
.refk__schatten { inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.68) 100%); }
.refk__text { left: 30px; right: 30px; bottom: 28px; display: flex; flex-direction: column; gap: 12px; }
.refk__text h3 { margin: 0; color: var(--weiss); font-size: clamp(19px, 1.7vw, 25px); font-weight: 700; line-height: 1.25; }
.refk__text p { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.45; }
.refk__nav { display: flex; justify-content: flex-end; gap: 18px; margin-top: clamp(28px, 3vw, 46px); }
.refk__pfeil {
  width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent;
  color: var(--ink); font-size: 20px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.refk__pfeil:hover { background: var(--ink); color: var(--weiss); }

/* ========================================================== Leistungen === */

.leist { background: var(--bg); padding: var(--sektion) 0; max-width: var(--breite); margin: 0 auto; }
.leist__kopf { padding: 0 var(--rand); }
.leist__kopf .h2, .leist__kopf .fliess { text-align: right; }
.leist__kopf .fliess { margin-top: 20px; font-size: 18px; }
.leist__raster {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.3vw, 20px);
  padding: clamp(40px, 4.6vw, 70px) var(--rand) 20px; overflow: hidden;
}
.leist__kachel { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-kachel); overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); }
.leist__kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.leist__fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%); transition: opacity 0.25s ease; }
.leist__kachel h3 {
  position: absolute; left: 18px; right: 14px; bottom: 18px; margin: 0; color: var(--weiss);
  font-size: clamp(14px, 1.3vw, 19px); font-weight: 700; line-height: 1.25; transition: opacity 0.25s ease;
}
.leist__kachel:hover .leist__fade, .leist__kachel:hover h3 { opacity: 0; }
.leist__cta { padding: 26px var(--rand) 0; display: flex; justify-content: flex-end; }

/* ================================================================ Team === */

.team { position: relative; overflow: hidden; min-height: clamp(520px, 52vw, 760px); background-color: #2a1400; }
.team__bg { position: absolute; inset: -2%; background-size: cover; background-position: center; filter: brightness(0.22) saturate(0.45) contrast(1.12); transform: scale(1.06); }
.team__bg img { width: 100%; height: 100%; object-fit: cover; }
.team__veil { position: absolute; inset: 0; opacity: 0.72; background: linear-gradient(180deg, rgba(40, 19, 0, 0.85) 0%, rgba(40, 19, 0, 0.45) 45%, rgba(15, 7, 0, 0.8) 100%); }
.team__inhalt { position: relative; z-index: 3; max-width: var(--breite); margin: 0 auto; padding: clamp(48px, 5vw, 90px) var(--rand); display: flex; flex-direction: column; gap: clamp(40px, 6vw, 110px); }
.team__aussage { max-width: 640px; display: flex; flex-direction: column; gap: 20px; }
.team__aussage h2 { margin: 0; font-size: clamp(26px, 3vw, 42px); line-height: 1.22; font-weight: 400; color: var(--weiss); text-wrap: pretty; }
.team__stats { margin-left: auto; width: min(420px, 100%); display: flex; flex-direction: column; }
.team__stat { display: flex; flex-direction: column; gap: 8px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.team__stat:last-child { border-bottom: none; }
.team__stat b { font-size: clamp(26px, 2.6vw, 38px); font-weight: 500; color: var(--weiss); line-height: 1; }
.team__stat span { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }

/* ============================================ Dunkle Liste (Ablauf, Förderung) */

.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(36px, 4.6vw, 64px); align-items: start; }
.dl__kopf { position: sticky; top: clamp(88px, 9vw, 120px); align-self: start; display: flex; flex-direction: column; gap: 20px; }
.dl__kopf .eyebrow { margin: 0; }
.dl__kopf .btn { align-self: flex-start; margin-top: 8px; }
.dl__liste { display: flex; flex-direction: column; }
.dl__punkt { display: grid; grid-template-columns: 76px 1fr; gap: 22px; padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.dl__punkt:last-child { border-bottom: none; }
.dl__nr { font-size: clamp(26px, 3vw, 42px); font-weight: 800; color: var(--orange); line-height: 1; }
.dl__inhalt { display: flex; flex-direction: column; gap: 10px; }
.dl__inhalt h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--weiss); }
.dl__inhalt p { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); }
.dl__inhalt .haken li { color: rgba(255, 255, 255, 0.8); }
.dl__inhalt .haken b { color: var(--weiss); }

/* ========================================================== 5 Vorteile === */

.v5__kopf { text-align: center; }
.v5__kopf .fliess { margin-top: 20px; }
.v5__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(20px, 2.4vw, 36px); margin-top: clamp(28px, 3.2vw, 44px); }
.v5__punkt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 10px; }
.v5__punkt h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3; max-width: 220px; }
.v5__punkt p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--grau-neutral); max-width: 240px; }
.v5__cta { margin-top: clamp(24px, 2.8vw, 38px); }

/* ============================================================== Preise === */

.pr {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); border-radius: var(--r-karte);
  overflow: hidden; box-shadow: var(--schatten-karte);
}
.pr__links { background: var(--braun); padding: clamp(40px, 4.6vw, 72px) clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 20px; }
.pr__links .eyebrow { margin: 0; }
.pr__links .btn { align-self: flex-start; margin-top: auto; }
.pr__rechts { background: var(--weiss); padding: clamp(40px, 4.6vw, 72px) clamp(28px, 3.6vw, 56px); display: flex; flex-direction: column; gap: 6px; }
.pr__gruppe { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); padding-bottom: 12px; }
.pr__gruppe--zweite { padding-top: 28px; }
.pr__zeile { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--border-zeile); }
.pr__zeile span:first-child { font-size: 16px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pr__leader { flex: 1; border-bottom: 2px dotted var(--border); transform: translateY(-4px); }
.pr__preis { font-size: 18px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.pr__preis--akzent { color: var(--orange); }

/* ================================================== Vorteile Sun Device === */

.vsd__kopf .fliess { margin-top: 16px; max-width: 660px; line-height: 1.55; }
.vsd__kopf .fliess--stark { margin-top: 20px; font-weight: 700; color: var(--weiss); }
.vsd__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(32px, 3.6vw, 56px); }
.vsd__punkt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.vsd__punkt h3 { margin: 12px 0 0; font-size: 16px; font-weight: 700; color: var(--weiss); }
.vsd__punkt p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); max-width: 280px; }
.vsd__cta { margin-top: clamp(30px, 3.2vw, 44px); }

/* ====================================== Wechsel (Planung, Kombination) === */

.wechsel { display: flex; flex-direction: column; gap: var(--sektion); }
.wechsel__block { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(32px, 4vw, 72px); align-items: center; }
.wechsel__text { display: flex; flex-direction: column; gap: 20px; }
.wechsel__text .eyebrow { margin: 0; }
.wechsel__text .fliess { line-height: 1.65; }
.wechsel__text .haken { gap: 10px; }
.wechsel__text .haken li { color: var(--text); }
.wechsel__text .btn { align-self: flex-start; margin-top: 6px; }
.wechsel__bild { min-width: 300px; }
.wechsel__bild img { width: 100%; height: clamp(300px, 34vw, 480px); object-fit: cover; border-radius: var(--r-karte); display: block; box-shadow: var(--schatten-karte); }
.wechsel__block--bildlinks .wechsel__bild { order: -1; }

/* ============================================================ Faktoren === */

.fak .h2 { max-width: 880px; }
.fak__einleitung { display: flex; flex-direction: column; gap: 16px; max-width: 1000px; margin-top: 20px; }
.fak__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.2vw, 48px) clamp(24px, 2.8vw, 40px); margin-top: clamp(28px, 3.2vw, 44px); }
.fak__punkt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.fak__nr { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: var(--weiss); font-size: 16px; font-weight: 700; }
.fak__punkt h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.fak__punkt p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--grau-neutral); }
.fak__cta { margin-top: clamp(24px, 2.8vw, 38px); }

/* ============================================================== Region === */

.reg .h2 { max-width: 900px; }
.reg--mitte .h2 { margin-inline: auto; text-align: center; }
.reg__text { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; max-width: 640px; }
.reg--mitte .reg__text { margin-inline: auto; text-align: center; }
/* „Planung in <Stadt>" auf den Standortseiten: mittig zentriert. */
.lokal .inhalt { text-align: center; }
.lokal .h2 { margin-inline: auto; }
.lokal .reg__text { margin-inline: auto; align-items: center; }
.reg__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(36px, 4.4vw, 68px); }
.reg__punkt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.reg__punkt p { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; color: #6a6a6a; max-width: 260px; }
.reg__cta { margin-top: clamp(28px, 3.2vw, 46px); }

/* ========================================================== Solarcheck === */

.check .h2 { max-width: 900px; }
.check__text { margin-top: 20px; max-width: 660px; font-size: 15px; color: var(--grau-neutral); }
.check__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: clamp(18px, 2vw, 28px); margin-top: clamp(30px, 3.4vw, 48px); align-items: stretch; }
.check__karte { background: var(--weiss); border-radius: var(--r-karte); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; }
.check__karte--eingaben { border: 1px solid var(--border); gap: 30px; }
.check__karte--ergebnis { box-shadow: var(--schatten-karte); gap: 4px; }
.check__label { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); }
.check__label--orange { color: var(--orange); padding-bottom: 14px; }
.check__regler { display: flex; flex-direction: column; gap: 14px; }
.check__regler label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 16px; font-weight: 600; color: var(--ink); }
.check__regler b { font-size: 22px; font-weight: 800; color: var(--orange); white-space: nowrap; }
.check__regler input[type='range'] { width: 100%; accent-color: var(--orange); cursor: pointer; }
.check__skala { display: flex; justify-content: space-between; font-size: 13px; color: #a39a8e; }
.check__schalter {
  display: flex; align-items: center; gap: 16px; border: 1.5px solid var(--border); border-radius: var(--r-kachel);
  padding: 18px 20px; cursor: pointer; transition: all 0.15s ease; background: var(--weiss); width: 100%; text-align: left;
}
.check__schalter[aria-pressed='true'] { border-color: var(--orange); background: rgba(240, 148, 0, 0.08); }
.check__punkt { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #cfc7bd; transition: border 0.15s ease; }
.check__schalter[aria-pressed='true'] .check__punkt { border: 7px solid var(--orange); }
.check__schalter b { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
.check__schalter span:last-child { font-size: 13px; color: var(--grau); }
.check__annahmen { font-size: 12px; color: #a39a8e; margin-top: auto; }
.check__zeile { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed #e0dad1; }
.check__zeile:last-of-type { border-bottom: none; }
.check__zeile span { font-size: 15px; color: var(--grau-neutral); }
.check__zeile b { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.check__box { background: var(--braun); border-radius: var(--r-kachel); padding: 20px 22px; margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.check__box div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.check__box span { font-size: 15px; font-weight: 700; color: var(--weiss); }
.check__box b { font-size: 24px; font-weight: 800; color: var(--orange); white-space: nowrap; }
.check__karte--ergebnis .btn { margin-top: 18px; justify-content: center; }

/* ========================================================= Rezensionen === */

.rez { padding: 20px 0 clamp(60px, 6.6vw, 110px); }
.rez__kopf { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.rez__kopf .eyebrow--grau { margin: 0; font-size: 16px; }
/* Auf breiten Bildschirmen immer genau zwei Zeilen, getrennt an der
   Sinngrenze. Schmaler passt keine Hälfte in eine Zeile — dort verteilt
   text-wrap: balance den Text gleichmäßig, statt „sagen." allein stehen zu lassen. */
.rez__kopf .h2 { line-height: 1.2; max-width: 820px; text-wrap: balance; }
.umbruch-breit { display: none; }
@media (min-width: 900px) { .umbruch-breit { display: inline; } }
.rez__note { display: inline-flex; align-items: center; gap: 12px; }
.rez__note b { font-size: 18px; color: var(--ink); }
.rez__note small { font-size: 13px; color: var(--grau-hell); }
.rez__sterne { display: flex; gap: 2px; }
.rez__bahn {
  display: flex; gap: clamp(16px, 1.8vw, 26px); padding: clamp(36px, 4vw, 60px) var(--rand) 10px;
  max-width: var(--breite); margin: 0 auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.rez__bahn::-webkit-scrollbar { display: none; }
.rez__karte {
  flex: 0 0 clamp(300px, 30vw, 400px); scroll-snap-align: start; background: var(--weiss);
  border-radius: var(--r-container); padding: clamp(24px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 14px;
}
.rez__person { display: flex; align-items: center; gap: 14px; }
.rez__avatar { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; color: var(--weiss); display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; }
.rez__name { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rez__name b { font-size: 16px; font-weight: 700; color: var(--ink); }
.rez__name span { font-size: 14px; color: var(--grau-hell); }
.rez__text { margin: 0; flex: 1; font-size: 16px; line-height: 1.62; color: #33302c; }
.rez__nav { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); display: flex; justify-content: flex-end; gap: 18px; margin-top: 10px; }

/* ================================================================== FAQ == */

.faq { background: var(--braun); }
.faq__titel { margin: 0 0 clamp(34px, 4.4vw, 66px); font-size: clamp(28px, 3.6vw, 50px); line-height: 1.2; font-weight: 500; color: var(--weiss); letter-spacing: -0.01em; text-wrap: pretty; }
.faq__liste { display: flex; flex-direction: column; }
.faq__eintrag { border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.faq__frage {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0;
  background: none; border: none; text-align: left; cursor: pointer;
  font-size: clamp(17px, 1.6vw, 22px); font-weight: 400; color: var(--weiss); line-height: 1.35;
}
.faq__frage svg { flex: 0 0 auto; transition: transform 0.2s ease; }
.faq__frage[aria-expanded='true'] svg { transform: rotate(180deg); }
.faq__antwort { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.faq__antwort[data-offen] { grid-template-rows: 1fr; }
.faq__antwort > div { overflow: hidden; }
.faq__antwort p { margin: 0; padding-bottom: 28px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.9); }
.faq__schluss { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: clamp(34px, 3.6vw, 52px); }

/* ============================================================= Kontakt === */

.formular__meldung { grid-column: 1 / -1; font-size: 15px; margin: 0; }
.formular__meldung[data-art='ok'] { color: var(--gruen); }
.formular__meldung[data-art='fehler'] { color: #c0392b; }

/* ============================================================ Fußzeile === */

.fuss { background: var(--orange); padding: clamp(48px, 5vw, 80px) var(--rand) 0; }
.fuss__inhalt { max-width: var(--breite); margin: 0 auto; }
.fuss__cta { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.fuss__cta h2 { margin: 0; font-size: clamp(26px, 3vw, 42px); font-weight: 700; color: var(--weiss); letter-spacing: -0.02em; max-width: 560px; line-height: 1.15; }
.fuss__mitte { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(28px, 4vw, 72px); align-items: start; padding: 48px 0; }
.fuss__logo { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: var(--weiss); flex: 0 0 auto; }
.fuss__logo img { width: 84px; height: auto; display: block; }
.fuss__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 28px; }
.fuss__links a { font-size: 16px; font-weight: 700; color: var(--weiss); }
.fuss__links a:hover { color: var(--braun); }
.fuss__kontakt { display: flex; flex-direction: column; gap: 12px; text-align: right; }
.fuss__kontakt a { font-size: 16px; font-weight: 700; color: var(--weiss); }
.fuss__kontakt a:hover { color: var(--braun); }
.fuss__adresse { font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.fuss__recht { display: flex; justify-content: center; gap: 34px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.35); flex-wrap: wrap; }
.fuss__recht a { font-size: 13px; color: var(--weiss); }
.fuss__recht a:hover { color: var(--braun); }
.fuss__recht span { font-size: 13px; color: rgba(255, 255, 255, 0.75); }

/* ============================================================== Recht ==== */

.recht { max-width: 900px; }
.recht h1 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; color: var(--ink); margin: 0 0 28px; }
/* Vorher Inline-Stile auf 404- und Rechtsseiten, Werte unverändert. */
.fehler__titel { font-size: clamp(30px, 3.4vw, 46px); margin: 14px 0 20px; }
.recht__telefon { color: #ffffff; font-size: 17px; font-weight: 700; }
.recht h2 { font-size: clamp(20px, 2vw, 26px); margin: 40px 0 12px; }
.recht p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: var(--grau-neutral); }

/* ============================================================= Partner === */

.partner { overflow: hidden; }

/* ==================================================== Einwilligung ====== */

.sd-consent {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: clamp(12px, 2vw, 24px); z-index: 120;
  width: min(680px, calc(100vw - 24px)); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  padding: 18px 22px; border-radius: var(--r-container); background: var(--weiss); border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(73, 35, 0, 0.18);
}
.sd-consent-text { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.5; color: var(--grau-neutral); }
.sd-consent-text a { color: var(--grau); border-bottom: 1px solid var(--border); }
.sd-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.sd-consent button { height: 44px; padding: 0 20px; border-radius: var(--r-pill); font-size: 15px; font-weight: 700; cursor: pointer; }
.sd-consent-deny { border: 1px solid var(--border); background: var(--weiss); color: var(--braun); }
.sd-consent-ok { border: none; background: var(--orange); color: var(--weiss); }
@media (max-width: 820px) {
  .sd-consent-actions { margin-left: 0; width: 100%; }
  .sd-consent-actions button { flex: 1 1 auto; }
}

/* ======================================================== Haltepunkte ==== */

@media (max-width: 1023px) {
  .burger { display: flex; }
  .kopf__cta { display: none; }
  .nav {
    position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 96px var(--rand) 40px; background: var(--panel); overflow-y: auto;
    transform: translateX(100%); transition: transform 0.25s ease; visibility: hidden;
  }
  [data-menue-offen] .nav { transform: translateX(0); visibility: visible; }
  /* Bei offenem Menü steht die Seite still. Sonst scrollt der Inhalt hinter
     dem Vollbildmenü weiter und schiebt sich sichtbar durch die Sektionen. */
  html[data-menue-offen] { overflow: hidden; }
  /* Der Burger liegt über dem offenen Menü: Er wird zum X und ist der einzige
     Weg zurück — ohne Tastatur gibt es sonst kein Escape. Auf dem hellen
     Menügrund brauchen die Striche eine dunkle Farbe. */
  .burger { position: relative; z-index: 101; }
  [data-menue-offen] .burger { background: transparent; border-color: var(--border); }
  [data-menue-offen] .burger span:not(.sr)::before,
  [data-menue-offen] .burger span:not(.sr)::after { background: var(--ink); }
  .nav__punkt { padding: 0; border-bottom: 1px solid var(--border); }
  .nav__knopf { width: 100%; justify-content: space-between; color: var(--ink); font-size: 20px; font-weight: 700; padding: 22px 0; }
  .nav__knopf svg path { stroke: var(--ink); }
  .mega { position: static; transform: none; width: auto; opacity: 1; visibility: visible; display: none; }
  .nav__punkt[data-offen] .mega { display: block; transform: none; }
  .nav__punkt:hover .mega { display: none; }
  .nav__punkt[data-offen]:hover .mega { display: block; }
  .mega__karte { background: transparent; box-shadow: none; padding: 0 0 24px; }
  .mega__spalten { grid-template-columns: 1fr; gap: 20px; }
  .mega__teaser { display: none; }
  .mega__wp { grid-template-columns: 1fr; }
  .mega__wp img { display: none; }
  .nav__cta { display: block; margin-top: 28px; text-align: center; background: var(--orange); color: var(--weiss); font-size: 17px; font-weight: 700; padding: 18px 28px; border-radius: var(--r-pill); }

  .leist__raster { grid-template-columns: repeat(3, 1fr); }
  .leist__raster .leist__kachel:nth-child(n + 4) { aspect-ratio: 4 / 3; }
  .fak__raster { grid-template-columns: repeat(2, 1fr); }
    .fuss__mitte { grid-template-columns: 1fr; gap: 32px; }
  .fuss__kontakt { text-align: left; }
  .dl__kopf { position: static; }
}
@media (min-width: 1024px) { .nav__cta { display: none; } }

/* ===================================================== Phase 2: Bilder ==== */

/* <picture> ist inline — als Kind absoluter oder flexender Container muss es
   die Fläche füllen, sonst bleibt das Bild darin ohne Höhe. */
picture { display: block; }
.team__bg picture, .refk__karte picture, .leist__kachel picture { position: absolute; inset: 0; }
.intro__bild picture, .wechsel__bild picture { width: 100%; }

/* ====================================================== Hero-Varianten ==== */

/* ============================================================= Anlagen ==== */

.anlagen { background: var(--bg); padding: clamp(28px, 3vw, 48px) 0 clamp(48px, 5vw, 80px); display: flex; flex-direction: column; gap: clamp(12px, 1.3vw, 20px); }
.laufband { overflow: hidden; }
.laufband__bahn { display: flex; gap: clamp(12px, 1.3vw, 20px); width: max-content; animation: sdLauf 70s linear infinite; }
.laufband__bahn--rueck { animation-direction: reverse; }
.laufband:hover .laufband__bahn { animation-play-state: paused; }
.laufband__bild { flex: 0 0 auto; width: clamp(240px, 24vw, 360px); height: clamp(160px, 16vw, 240px); object-fit: cover; border-radius: var(--r-kachel); display: block; }
.laufband__logo {
  flex: 0 0 auto; width: clamp(120px, 12.2vw, 164px); height: clamp(104px, 9vw, 150px); border: 1px solid #e2e2e2;
  border-radius: 8px; background: #f7f7f7; display: flex; align-items: center; justify-content: center; padding: 22px;
  font-size: 14px; font-weight: 700; color: var(--grau-neutral); text-align: center; line-height: 1.3;
}
.laufband__logo img { width: 100%; height: 100%; object-fit: contain; }

/* =============================================== Leistungen, Startseite === */

.leist--start .leist__raster { grid-template-columns: repeat(4, 1fr); }
.leist--start { padding: 40px 0 clamp(72px, 8vw, 130px); }
.leist--start .eyebrow--grau { font-size: 16px; }

/* ================================================ Team, Startseite ======== */

.team--start { min-height: 760px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(40px, 4.4vw, 80px) var(--rand); }
.team--start .team__bg { inset: 0; filter: none; transform: none; }
.team--start .team__bg img { object-position: center; }
.team--start .team__veil { opacity: 1; background: linear-gradient(180deg, rgba(13, 17, 20, 0.72) 0%, rgba(13, 17, 20, 0.12) 45%, rgba(8, 12, 15, 0.88) 100%), linear-gradient(90deg, rgba(13, 17, 20, 0.25), transparent 75%); }
.team--start .team__inhalt { width: 100%; padding: 0; gap: 20px; }
.team--start .team__aussage h2 { max-width: 720px; font-weight: 700; line-height: 1.16; letter-spacing: -0.02em; }
.team__zahlen { position: relative; z-index: 3; max-width: var(--breite); width: 100%; margin: 60px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 40px); }
.team__zahl { display: flex; flex-direction: column; gap: 10px; }
.team__zahl b { font-size: clamp(34px, 3.4vw, 52px); font-weight: 700; color: var(--orange); line-height: 1; }
.team__zahl span { font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, 0.88); }

/* ============================================================= Partner ==== */

.partner { padding: 20px 0 clamp(72px, 8vw, 130px); }
.partner__kopf { padding: 0 var(--rand); }
.partner__kopf .eyebrow--grau { margin: 0 0 34px; font-size: 16px; }
.partner__zeile { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 3vw, 60px); flex-wrap: wrap; }
.partner__zeile .h2 { max-width: 900px; line-height: 1.2; }
.partner__baender { display: flex; flex-direction: column; gap: clamp(12px, 1.3vw, 20px); padding: clamp(40px, 4.6vw, 70px) var(--rand) 0; }
.partner__baender .laufband__bahn { animation-duration: 60s; }

/* ==================================================== Gewerbe-Teaser ====== */

.teaser { padding: 20px var(--rand) clamp(72px, 8vw, 130px); }
.teaser__raster { display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; gap: clamp(28px, 4vw, 64px); align-items: center; min-height: clamp(360px, 34vw, 440px); }
.teaser__text { display: flex; flex-direction: column; gap: 20px; }
/* Sieht aus wie die übrigen grauen Eyebrows (.eyebrow--grau) und hat die
   Größe von „Partner & Dienstleister" direkt darüber. */
.teaser__eyebrow { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau-eyebrow); }
.teaser__text .teaser__eyebrow { font-size: 16px; color: var(--grau-eyebrow); }
.teaser__text h2 { margin: 0; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.14; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; text-wrap: pretty; }
.teaser__text p { margin: 0; font-size: 18px; line-height: 1.6; color: #555555; }
.teaser__aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 8px; }
.teaser__link { display: inline-flex; align-items: center; gap: 10px; color: var(--braun); font-size: 16px; font-weight: 700; border-bottom: 2px solid var(--orange); padding-bottom: 3px; }
.teaser__bild picture { min-height: clamp(300px, 30vw, 420px); display: flex; align-items: center; }
.teaser__bild img { width: 100%; height: clamp(300px, 30vw, 420px); object-fit: contain; }

/* ================================================== Kontaktkarte (Start) == */

.kk { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); border-radius: var(--r-container); overflow: hidden; box-shadow: var(--schatten-overlay); }
.kk__links { background: var(--braun); padding: clamp(38px, 4.4vw, 70px) clamp(24px, 3.6vw, 60px); display: flex; flex-direction: column; }
.kk__links h2 { margin: 0; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.14; font-weight: 500; color: var(--orange); letter-spacing: -0.01em; }
.kk__links p { margin: 20px 0 0; font-size: 18px; line-height: 1.55; color: var(--orange); max-width: 460px; }
.kk__daten { margin-top: auto; display: flex; flex-direction: column; gap: 26px; padding-top: 80px; }
.kk__daten a { display: flex; align-items: center; gap: 20px; color: var(--orange); font-size: 20px; }
.kk__rechts { background: var(--weiss); padding: clamp(34px, 3.8vw, 60px) clamp(24px, 3.6vw, 60px) clamp(40px, 4.4vw, 70px); display: flex; flex-direction: column; gap: 20px; }
.kk__rechts .eyebrow--grau { margin: 0 0 6px; font-size: 16px; }
.kk__anliegen { display: flex; flex-wrap: wrap; gap: 18px; }
.kk__anliegen button { padding: 12px 22px; font-size: 16px; border-radius: var(--r-pill); cursor: pointer; background: var(--weiss); color: #222222; border: 1px solid #d5d5d5; transition: all 0.15s ease; }
.kk__anliegen button[aria-pressed='true'] { background: var(--orange); color: var(--weiss); border-color: var(--orange); }
.kk__rechts input, .kk__rechts textarea { width: 100%; height: 56px; padding: 0 18px; font-size: 16px; color: #222222; border: 1px solid #e0e0e0; border-radius: var(--r-feld); background: #fafafa; outline: none; }
.kk__rechts textarea { height: 120px; padding: 16px 18px; resize: vertical; }
.kk__rechts input:focus, .kk__rechts textarea:focus { border-color: var(--orange); }
.kk__rechts button[type='submit'] { width: 100%; height: 58px; margin-top: 8px; border: none; border-radius: var(--r-pill); background: var(--orange); color: var(--weiss); font-size: 18px; font-weight: 700; cursor: pointer; }
.kk__rechts button[type='submit']:hover { background: var(--orange-hover); }

/* ======================================================= Textblock mittig = */

.textmitte { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.textmitte .eyebrow { margin: 0; }
.textmitte .h2 { line-height: 1.18; }
.textmitte .fliess { line-height: 1.7; }
.textmitte .btn { margin-top: 8px; }

/* ========================================== Braune Box (Gewerbe/Wärmepumpe) */

.box { max-width: 1400px; margin: 0 auto; background: var(--braun); border-radius: 14px; padding: clamp(44px, 5.4vw, 90px) clamp(24px, 3.4vw, 60px); }
.box__innen { max-width: var(--breite); margin: 0 auto; }
.box .eyebrow { text-align: center; }
.box__raster { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(30px, 3.6vw, 56px); align-items: start; }
.box__raster--vier { max-width: none; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: clamp(32px, 3.6vw, 56px); }
.box__punkt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 0 clamp(6px, 1.4vw, 26px); }
.box__punkt h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--weiss); line-height: 1.3; max-width: 320px; }
.box__punkt p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); max-width: 380px; }
.box__cta { margin-top: clamp(36px, 4vw, 60px); }
/* Listenvariante: Badge + H2 + CTA links, Punkte mit kleinem Icon rechts */
.box__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: clamp(30px, 4vw, 70px); align-items: start; }
.box__kopf { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 44px); }
.box__badge { display: inline-flex; align-self: flex-start; padding: 8px 18px; border-radius: var(--r-pill); background: var(--orange); color: var(--weiss); font-size: 15px; }
.box__kopf h2 { margin: 0; max-width: 480px; font-size: clamp(26px, 3vw, 42px); line-height: 1.2; font-weight: 400; color: var(--weiss); letter-spacing: -0.01em; text-wrap: pretty; }
.box__kopf .btn { align-self: flex-start; }
.box__eintraege { display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 34px); }
.box__eintrag { display: flex; align-items: flex-start; gap: 22px; }
.box__eintrag .puls { width: 62px; height: 62px; flex: 0 0 auto; }
.box__eintrag .puls__kreis { width: 42px; height: 42px; }
.box__eintrag .puls__kreis svg { width: 20px; height: 20px; }
.box__eintrag div { display: flex; flex-direction: column; gap: 10px; }
.box__eintrag h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--weiss); }
.box__eintrag p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); }

/* ============================================================ Speicher ==== */

.speicher { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(28px, 3.4vw, 56px); align-items: stretch; }
.speicher__bild { display: flex; }
.speicher__bild picture { width: 100%; display: flex; }
.speicher__bild img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: var(--r-kachel); display: block; }
.speicher__text { display: flex; flex-direction: column; gap: 20px; }
.speicher__text .eyebrow { margin: 0; }
.speicher__punkte { display: flex; flex-direction: column; gap: 16px; }
.speicher__punkt { border-left: 3px solid var(--orange); padding: 4px 0 4px 18px; display: flex; flex-direction: column; gap: 8px; }
.speicher__punkt h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--braun); }
.speicher__punkt p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); }

/* ============================================================ Lösungen ==== */

.loes__kopf { display: flex; flex-direction: column; gap: 20px; margin-bottom: clamp(28px, 3.2vw, 46px); }
.loes__kopf .h2 { max-width: 620px; }
.loes__kopf .fliess { max-width: 900px; font-size: 15px; line-height: 1.7; }
.loes__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(26px, 3vw, 48px); align-items: start; }
.loes__tabs { display: flex; flex-direction: column; gap: 8px; }
.loes__tabs .eyebrow { margin: 0 0 12px; }
.loes__tab { display: flex; align-items: center; gap: 14px; padding: 16px 4px; cursor: pointer; background: none; border: none; border-bottom: 2px solid var(--border-hell); text-align: left; font-size: 16px; font-weight: 400; color: var(--grau-neutral); line-height: 1.35; transition: all 0.15s ease; }
.loes__tab[data-aktiv] { font-weight: 700; color: var(--ink); border-bottom-color: var(--orange); }
.loes__nr { flex: 0 0 auto; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; color: var(--orange); }
.loes__panel { background: var(--braun); border-radius: 14px; padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 18px; min-height: 320px; }
.loes__panel h3 { margin: 0; font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; color: var(--weiss); line-height: 1.25; }
.loes__panel p { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); }
.loes__panel .btn { align-self: flex-start; margin-top: auto; }
/* Im Akkordeon sitzt die Karte zwischen den Knöpfen — dort braucht sie Luft
   und keine Mindesthöhe. Der Selektor greift von selbst nur dann, wenn
   loesungen.js sie in die Liste geschoben hat. */
.loes__tabs > .loes__panel { margin: 6px 0 14px; min-height: 0; }

/* Der Pfeil gehört nur zum Akkordeon: Am Reitersatz auf dem Rechner schaltet
   man um, statt auf- und zuzuklappen — dort wäre er eine falsche Ansage.
   `data-akkordeon` setzt loesungen.js, sobald das Raster einspaltig ist. */
.loes__pfeil { display: none; }
[data-akkordeon] .loes__pfeil {
  display: block; flex: 0 0 auto; margin-left: auto; color: var(--orange);
  transition: transform 0.2s ease;
}
[data-akkordeon] .loes__tab[data-aktiv] .loes__pfeil { transform: rotate(180deg); }

/* ========================================================== CTA-Banner ==== */

.cta { background: #faf8f5; border: 1px solid var(--border-hell); border-radius: 14px; padding: clamp(30px, 3.4vw, 52px); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(26px, 3vw, 48px); align-items: center; }
.cta__text { display: flex; flex-direction: column; gap: 20px; }
.cta__text .eyebrow { margin: 0; }
.cta__text h2 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; font-weight: 700; color: var(--ink); }
.cta__text p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--grau-neutral); }
.cta__aktionen { display: flex; flex-direction: column; gap: 12px; justify-self: end; min-width: 240px; }
.cta__aktionen .btn { justify-content: center; }
.btn--rahmen { border: 1.5px solid #e0d8cd; color: var(--braun); background: transparent; padding: 16px 28px; }
.btn--rahmen:hover { border-color: var(--orange); color: var(--braun); }
.cta__aktionen small { text-align: center; font-size: 13px; color: var(--grau); }

/* ============================================================ FAQ hell ==== */

.faq--hell { background: var(--weiss); }
.faq--hell .faq__titel { color: var(--ink); font-weight: 400; }
.faq--hell .faq__eintrag { border-bottom-color: #d9d9d9; }
.faq--hell .faq__frage { color: var(--ink); }
.faq--hell .faq__antwort p { color: var(--text); }
/* Mehrere Absätze je Antwort. Der Abstand nach unten sitzt am letzten Absatz,
   nicht am Container — dessen Padding würde die eingeklappte 0fr-Zeile auf
   28px aufhalten und die erste Zeile jeder Antwort sichtbar lassen. */
.faq--hell .faq__antwort > div { display: flex; flex-direction: column; gap: 18px; }
.faq--hell .faq__antwort p { padding-bottom: 0; }
.faq--hell .faq__antwort p:last-child { padding-bottom: 28px; }
.faq--hell .eyebrow { margin-bottom: 14px; }

/* ================================================= Wärmepumpe: Förderung == */

.wpf { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: clamp(30px, 4vw, 60px); align-items: start; }
.wpf__text { display: flex; flex-direction: column; gap: 20px; }
/* Trägt zusätzlich .eyebrow und sieht damit aus wie alle anderen Kennzeilen;
   hier nur den Abstand nullen, den übernimmt das gap von .wpf__text. */
.wpf__text .wpf__eyebrow { margin: 0; }
.wpf__text h2 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 22px; max-width: 520px; font-size: clamp(26px, 3vw, 42px); line-height: 1.18; font-weight: 400; letter-spacing: -0.01em; text-wrap: pretty; }
.wpf__tipp { margin: 16px 0 0; font-size: 15px; line-height: 1.7; color: #a5a5a5; }
.wpf__text .fliess { font-size: 15px; line-height: 1.7; }
.wpf__bild { display: flex; align-items: center; justify-content: center; }
/* Die Breite sitzt auf dem <picture>, nicht auf dem <img>: Als Flex-Kind hätte
   das picture sonst keine eigene Breite und das img darin nichts, worauf sich
   seine 100 % beziehen könnten. */
.wpf__bild picture { width: 100%; max-width: 560px; }
.wpf__bild img { width: 100%; height: auto; display: block; }

/* =============================================== Wärmepumpe: Kombination == */

.wpk { max-width: 1150px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(30px, 3.6vw, 60px); align-items: center; }
.wpk__text { display: flex; flex-direction: column; gap: 20px; }
.wpk__text .eyebrow { margin: 0; }
.wpk__text h2 { margin: 0; font-size: clamp(26px, 3vw, 40px); line-height: 1.18; font-weight: 700; color: var(--weiss); letter-spacing: -0.02em; }
.wpk__text .fliess { line-height: 1.7; color: rgba(255, 255, 255, 0.85); }
.wpk__punkte { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.wpk__punkte span { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--weiss); }
.wpk__punkte span::before { content: ''; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--orange); }
.wpk__text .btn { align-self: flex-start; margin-top: 8px; }
.wpk__kreis { display: flex; justify-content: center; }
.wpk__ring { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: clamp(240px, 26vw, 340px); height: clamp(240px, 26vw, 340px); border-radius: 50%; border: 8px solid var(--orange); }
.wpk__ring .puls__ring { inset: -22px; background: rgba(240, 148, 0, 0.14); }
.wpk__ring b { position: relative; font-size: clamp(46px, 5.6vw, 78px); font-weight: 800; color: var(--orange); line-height: 1; }
.wpk__ring strong { position: relative; font-size: clamp(17px, 1.8vw, 24px); font-weight: 600; color: var(--weiss); }
.wpk__ring small { position: relative; font-size: 14px; color: rgba(255, 255, 255, 0.7); }

/* ================================================ Wärmepumpe: Kontakt ===== */

.wpko { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; border-radius: 14px; overflow: hidden; box-shadow: var(--schatten-karte); }
.wpko__bild { min-height: 380px; position: relative; }
.wpko__bild picture { position: absolute; inset: 0; }
.wpko__bild img { width: 100%; height: 100%; object-fit: cover; }
.wpko__text { background: var(--weiss); padding: clamp(32px, 3.6vw, 56px); display: flex; flex-direction: column; gap: 20px; }
.wpko__text .eyebrow { margin: 0; }
.wpko__zeiten { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-top: 1px solid var(--border-zeile); border-bottom: 1px solid var(--border-zeile); }
.wpko__zeiten small { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); }
.wpko__zeiten span { font-size: 16px; line-height: 1.7; color: var(--ink); }
.wpko__aktionen { display: flex; flex-wrap: wrap; gap: 12px; }

/* ================================================ Haltepunkte Phase 2 ===== */

@media (max-width: 1023px) {
  /* Startseite: 2×2 Raster, alle Kacheln gleich hoch — die 4/3-Regel für
     die 4. Kachel (Stadtseiten, 3 Spalten) gilt hier nicht. */
  .leist--start .leist__raster { grid-template-columns: repeat(2, 1fr); }
  .leist--start .leist__raster .leist__kachel:nth-child(n + 4) { aspect-ratio: 3 / 4; }
  /* Teamblock: Höhe aus dem Inhalt, Kennzahlen bleiben in einer Reihe —
     760px Mindesthöhe ließen hier zwei Drittel dunkle Fläche stehen. */
  .team--start { min-height: 0; gap: 56px; }
  .team__zahlen { margin-top: 0; }
  .teaser__raster { grid-template-columns: 1fr; }
  .box__raster { grid-template-columns: 1fr; }
}

/* ================================================================ Mobil == */
/* Ein zusammenhängender Block für Telefone. Leitbild: kompakte, ruhige
   Skalierung — 16px Rand, Überschriften 28–32px mit engem Zeilenabstand,
   Fließtext 15px, Knöpfe über die volle Breite, nichts läuft in die Länge,
   was nebeneinander stehen kann. Der Prototyp hat für diese Breite keine
   Vorgabe (ANALYSE.md §4). */

@media (max-width: 639px) {
  :root { --rand: 16px; --sektion: 48px; --sektion-gross: 56px; --kopf-inhalt: 28px; }

  h1, h2, h3, .h2, .hero h1 { white-space: normal !important; }

  /* Alle auto-fit-Raster mit Mindestbreiten von 280–360px: bei 343px
     Inhaltsbreite erzwingt die Mindestbreite einen Überlauf — einspaltig. */
  .dl, .pr, .kk, .cta, .wpf, .wpk, .wpko, .speicher, .wechsel__block, .loes__raster,
  .check__raster, .box__liste, .intro, .refk__raster, .teaser__raster { grid-template-columns: 1fr; }
  .box__eintrag > div, .dl__inhalt, .cta__text, .wpk__text, .speicher__text { min-width: 0; }

  /* Kleiner als zuvor (28px): Lange Sektionstitel sollen auf dem Telefon in
     drei bis vier Zeilen passen. */
  .h2 { font-size: 23px; line-height: 1.2; }
  .h2--leicht { font-size: 26px; }
  .fliess { font-size: 15px; line-height: 1.65; }
  .eyebrow { font-size: 12px; letter-spacing: 0.14em; margin-bottom: 10px; }
  .eyebrow--grau { font-size: 13px; margin: 0; }
  .sk-kopf { grid-template-columns: 1fr; gap: 10px; }

  /* Knöpfe: volle Breite, greifbar */
  .sektion .btn, .box .btn, .dl__kopf .btn, .hero .btn, .funnel__weiter, .team .btn,
  .cta .btn, .leist__cta .btn, .fuss__cta .btn, .wpk .btn, .kk__rechts button[type='submit'] {
    width: 100%; justify-content: center; min-height: 52px; padding: 15px 22px; font-size: 15px;
  }
    .wpko__aktionen, .cta__aktionen { width: 100%; }
  .teaser__aktionen { flex-direction: column; align-items: stretch; }
  .teaser__link { align-self: flex-start; }

  /* Kopfzeile: feste Leiste oben, dunkel hinterlegt */
  .kopf {
    position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    padding: 12px 16px; gap: 12px;
    background: transparent;
  }
  /* Grund und Weichzeichner liegen auf einem Pseudoelement. Auf .kopf selbst
     würde backdrop-filter die Kopfzeile zum Bezugsrahmen für position: fixed
     machen — das Vollbildmenü darin wäre dann nur so hoch wie die Kopfzeile
     und die Menüpunkte abgeschnitten. */
  .kopf::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: rgba(13, 9, 6, 0.86);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .kopf__logo { width: 96px; }
  .burger { width: 44px; height: 44px; }
  .nav { padding-top: 84px; }
  .hero__innen { padding-top: 68px; min-height: 0; }
  body > header.kopf + * { padding-top: 68px; } /* Seiten ohne Hero (Angebot, Recht) */

  /* Hero: Inhalt bestimmt die Höhe */
  .hero { min-height: 0; }
  /* Schmaler Hero: Aus dem 3:2-Foto bleiben nur rund 39 % der Breite stehen.
     Wo das Motiv nicht mittig sitzt, setzt das Bild --bild-pos (bild.ejs). */
  .hero__bild { object-position: var(--bild-pos, center 30%); }
  .hero__text { padding: 28px 16px 36px; gap: 16px; }
  .hero h1 { font-size: 32px; line-height: 1.08; }
    .hero__bullets { gap: 8px; }
  .hero__bullets span { font-size: 14px; }
  .hero__sub { font-size: 15px; }
                  
  /* Funnel */
  .funnel { padding: 24px 16px 40px; }
  .funnel__karte { padding: 22px 16px 24px; gap: 14px; border-radius: 16px; }
  .funnel__text { font-size: 14px; }
  .funnel__frage { font-size: 22px; }
  .funnel__hinweis { font-size: 14px; }
  /* Der Hinweistext unter der Frage entfällt auf dem Telefon. Nach dem
     Absenden trägt derselbe Absatz die Bestätigung samt Telefonnummer —
     die bleibt sichtbar. */
  .funnel__hinweis { display: none; }
  [data-fertig] .funnel__hinweis { display: block; }
  .funnel__beraterin { gap: 12px; padding-bottom: 14px; }
  .funnel__beraterin img { width: 52px; height: 52px; }
  .funnel__gruss { font-size: 15px; }
  .funnel__status { font-size: 13px; }
  .funnel__schritt { height: 34px; padding: 0 16px; font-size: 13px; }
  .funnel__dauer { font-size: 13px; }
  /* Auswahl: eine Kachel je Zeile, Icon links, Text linksbündig — auf dem
     Handy liest sich die Liste so schneller als ein zweispaltiges Raster. */
  .funnel__kacheln { grid-template-columns: 1fr; gap: 10px; }
  .funnel__kachel {
    flex-direction: row; align-items: center; justify-content: flex-start;
    text-align: left; padding: 12px 14px; font-size: 15px; gap: 14px;
  }
  .funnel__ring { flex: 0 0 auto; width: 48px; height: 48px; }
  .funnel__kachel--bild { padding: 10px 14px; }
  .funnel__bild { flex: 0 0 auto; width: 59px; height: 48px; }
  .funnel__bild img { max-width: 59px; max-height: 48px; }
  .funnel__ring img { width: 28px; height: 28px; }
  .funnel__kacheln--wahl { grid-template-columns: 1fr; }
  .funnel__wahl { padding: 14px 16px; font-size: 15px; }
  .funnel__eingaben { grid-template-columns: 1fr; gap: 10px; }
  .funnel__fuss { flex-direction: column-reverse; gap: 10px; padding-top: 18px; }
  .funnel__zurueck { width: 100%; }

  /* Intro, Wechsel: Bild zuerst, kompakt */
  .intro, .intro--breit { gap: 20px; }
  .intro__bild, .intro--breit .intro__bild { order: -1; flex: 1 1 100%; min-width: 0; }
  .intro__bild img, .intro--breit .intro__bild img { height: 220px; min-height: 0; max-height: none; }
  .intro__text, .intro--breit .intro__text { flex: 1 1 100%; gap: 14px; }
  .intro--breit .intro__text .fliess { font-size: 15px; }
  .intro__unter { font-size: 17px; margin: 0; }
  .wechsel { gap: 40px; }
  .wechsel__block { gap: 18px; }
  .wechsel__bild { order: -1; min-width: 0; }
  .wechsel__bild img { height: 220px; }
  .wechsel__text { gap: 14px; }

  /* Referenzen */
  .refk__raster { grid-template-columns: 1fr; grid-auto-rows: 240px; gap: 14px; margin-top: 24px; }
  .refk__ov { opacity: 1; }
  .refk__text { left: 18px; right: 18px; bottom: 18px; gap: 6px; }
  .refk__text h3 { font-size: 18px; }
  .refk__text p { font-size: 13px; }
  .refk__nav, .rez__nav { margin-top: 16px; gap: 12px; }
  .refk__pfeil { width: 48px; height: 48px; font-size: 18px; }

  /* Leistungen: eine wischbare Reihe statt Riesenkacheln */
  .leist, .leist--start { padding: 48px 0; }
  .leist__kopf .h2, .leist__kopf .fliess { text-align: left; }
  .leist__kopf .fliess { font-size: 15px; margin-top: 12px; }
  .leist__raster, .leist--start .leist__raster {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    gap: 12px; padding: 28px 16px 8px; overflow: auto hidden;
  }
  .leist__raster::-webkit-scrollbar { display: none; }
  .leist__kachel { flex: 0 0 62vw; scroll-snap-align: start; aspect-ratio: 3 / 4; }
  .leist__kachel h3 { font-size: 16px; left: 14px; right: 12px; bottom: 14px; }
  .leist__cta { padding: 20px 16px 0; }

  /* Team */
  .team { min-height: 0; }
  .team__inhalt, .team--start { padding: 48px 16px; gap: 32px; }
  .team__aussage h2 { font-size: 26px; }
  .team__stats { margin-left: 0; width: 100%; }
  .team__stat b { font-size: 30px; }
  /* Kennzahlen untereinander statt zu dritt nebeneinander: Bei drei Spalten
     bleiben je rund 100px, in denen „Solaranlagen ab 100 kWp in Service und
     Wartung" auf fünf Zeilen bricht. Trennlinien wie bei den Kennzahlen der
     Stadtseiten (.team__stat), damit beide Blöcke gleich aussehen.

     Die Sektion wird dafür hochgezogen und verteilt Aussage und Zahlen auf
     oben und unten — dazwischen bleibt das Foto sichtbar, das sonst hinter
     dem dicht gepackten Text verschwindet. */
  .team--start { min-height: 88vh; }
  .team--start .team__bg img { object-position: 62% center; }
  .team__zahlen { grid-template-columns: 1fr; gap: 0; margin: 0; }
  .team__zahl { gap: 4px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
  .team__zahl:last-child { border-bottom: none; padding-bottom: 0; }
  .team__zahl b { font-size: 30px; }
  .team__zahl span { font-size: 13px; line-height: 1.4; }

  /* Dunkle Liste (Ablauf, Förderung) */
  .dl { gap: 28px; }
  .dl__kopf { position: static; gap: 14px; }
  .dl__punkt { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 0; }
  .dl__nr { font-size: 24px; }
  .dl__inhalt h3 { font-size: 16px; }
  .dl__inhalt p { font-size: 14px; }

  /* 5 Vorteile: Icon links, Text rechts */
  .v5__kopf { text-align: left; }
  .v5__kopf .h2 { text-align: left; }
  .v5__raster { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
  .v5__punkt { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; row-gap: 4px; align-items: start; text-align: left; padding: 0; }
  .v5__punkt svg { width: 36px; height: 36px; grid-row: 1 / span 2; }
  .v5__punkt h3, .v5__punkt p { grid-column: 2; }
  .v5__punkt h3, .v5__punkt p { max-width: none; }
  .v5__punkt h3 { font-size: 16px; }
  .v5__punkt p { font-size: 14px; margin-top: 4px; }

  /* Preise */
  .pr { border-radius: 14px; }
  .pr__links { padding: 36px 18px 28px; gap: 14px; }
  .pr__rechts { padding: 26px 18px 30px; }
  .pr__zeile { flex-wrap: wrap; row-gap: 2px; padding: 12px 0; justify-content: space-between; }
  .pr__zeile span:first-child { white-space: normal; flex: 1 1 auto; min-width: 0; font-size: 15px; }
  .pr__leader { display: none; }
  .pr__preis { font-size: 16px; }

  /* Vorteile Sun Device, Region, Boxen: zwei Spalten, kleinere Kreise */
  /* Wie die regionalen Vorteile: eine wischbare Reihe statt 2×2-Raster,
     der zweite Punkt ist angeschnitten und zeigt, dass es weitergeht. */
  .vsd__raster {
    display: flex; gap: 12px; margin-top: 28px;
    overflow: auto hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain; cursor: grab;
    width: calc(100% + 2 * var(--rand));
    margin-inline: calc(-1 * var(--rand)); padding: 0 var(--rand) 6px;
    scroll-padding-inline: var(--rand);
  }
  .vsd__raster::-webkit-scrollbar { display: none; }
  .vsd__raster.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .vsd__punkt { flex: 0 0 61vw; scroll-snap-align: start; }

  /* Region: die Punkte stehen nebeneinander und werden gewischt. Als Raster
     bliebe der dritte allein in der zweiten Reihe. Die negativen Ränder heben
     die Polsterung von .inhalt auf, damit die Bahn am Bildschirmrand beginnt
     und endet — sonst wirkt sie abgeschnitten. */
  .reg__raster {
    display: flex; gap: 12px; margin-top: 28px;
    overflow: auto hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain; cursor: grab;
    width: calc(100% + 2 * var(--rand));
    margin-inline: calc(-1 * var(--rand)); padding: 0 var(--rand) 6px;
    scroll-padding-inline: var(--rand);
  }
  .reg__raster::-webkit-scrollbar { display: none; }
  .reg__raster.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  /* 61vw ist gerechnet, nicht geraten: Rand (16) + Punkt + Spalt (12) lassen
     vom zweiten Punkt genau die Hälfte stehen. Dieser Anschnitt ist der
     einzige Hinweis, dass die Reihe weitergeht — ohne ihn wirkt sie
     vollständig und niemand wischt. */
  .reg__punkt { flex: 0 0 61vw; scroll-snap-align: start; }
  .box__raster, .box__raster--vier { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
  .box__punkt { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; row-gap: 4px; align-items: start; text-align: left; }
  .box__punkt .puls { width: 56px; height: 56px; grid-row: 1 / span 2; }
  .box__punkt .puls__kreis { width: 42px; height: 42px; }
  .box__punkt .puls__kreis svg { width: 20px; height: 20px; }
  .box__punkt h3, .box__punkt p { grid-column: 2; max-width: none; margin: 0; }
  .puls { width: 84px; height: 84px; }
  .puls__kreis { width: 56px; height: 56px; }
  .puls__kreis svg { width: 24px; height: 24px; }
  .vsd__punkt, .reg__punkt, .box__punkt { gap: 10px; padding: 0; }
  .vsd__punkt h3, .box__punkt h3 { margin-top: 4px; font-size: 15px; }
  .vsd__punkt p, .box__punkt p, .reg__punkt p { font-size: 14px; }
  .vsd__kopf .fliess { font-size: 15px; }
  .box { padding: 36px 18px; border-radius: 14px; }
  .box .h2 { margin-bottom: 0 !important; }
  .box__liste { gap: 24px; }
  .box__kopf { gap: 18px; }
  .box__kopf h2 { font-size: 26px; }
  .box__eintraege { gap: 18px; }
  .box__eintrag { gap: 14px; }
  .box__eintrag .puls { width: 52px; height: 52px; }
  .box__eintrag .puls__kreis { width: 36px; height: 36px; }
  .box__eintrag .puls__kreis svg { width: 18px; height: 18px; }
  .box__eintrag h3 { font-size: 16px; }
  .box__eintrag p { font-size: 14px; }
  .reg__text { margin-top: 12px; }

  /* Faktoren */
  .fak__raster { grid-template-columns: 1fr; gap: 22px; margin-top: 24px; }
  .fak__punkt { gap: 10px; }
  .fak__nr { width: 34px; height: 34px; font-size: 15px; }
  .fak__punkt p { font-size: 15px; }
  .fak__einleitung { margin-top: 12px; gap: 12px; }

  /* Rezensionen, Standorte, Laufbänder */
  .rez__bahn { padding: 28px 16px 8px; gap: 12px; }
  .rez__karte { flex-basis: 82vw; padding: 20px; gap: 12px; }
  .rez__text { font-size: 15px; }
  .rez__kopf { gap: 14px; }
  .laufband__bild { width: 200px; height: 134px; }
  .laufband__logo { width: 104px; height: 84px; padding: 14px; }
  .anlagen { padding: 20px 0 40px; }
  .partner { padding: 12px 0 48px; }
  .partner__kopf .eyebrow--grau { margin-bottom: 20px; }
  .partner__zeile .kopf__cta { display: none; }
  .partner__baender { padding-top: 24px; }

  /* Solarcheck */
  .check__raster { gap: 14px; margin-top: 24px; }
  .check__karte { padding: 22px 18px; }
  .check__karte--eingaben { gap: 22px; }
  .check__regler label { font-size: 15px; }
  .check__regler b { font-size: 19px; }
  .check__box b { font-size: 20px; }

  /* Teaser, Kontaktkarte, CTA-Banner, Speicher, Lösungen */
  .teaser { padding: 12px 16px 48px; }
  .teaser__raster { min-height: 0; gap: 22px; }
  .teaser__text h2 { font-size: 28px; }
  .teaser__text p { font-size: 15px; }
  .teaser__bild picture, .teaser__bild img { min-height: 0; height: 220px; }
  .kk { border-radius: 14px; box-shadow: none; }
  .kk__links { padding: 36px 18px 28px; }
  .kk__links h2 { font-size: 26px; }
  /* Der Einleitungstext der Kontaktkarte entfällt auf dem Telefon. */
  .kk__links > p { display: none; }
  .kk__daten { padding-top: 32px; gap: 14px; }
  .kk__daten a { font-size: 17px; }
  .kk__rechts { padding: 26px 18px 30px; gap: 12px; }
  /* Die Anliegen-Auswahl entfaellt auf dem Telefon: drei Knoepfe plus
     Ueberschrift kosten Platz, bevor das eigentliche Formular anfaengt — das
     Nachrichtenfeld deckt dasselbe ab. kontakt.js sendet dann auch keinen
     Wert mit, sonst truege jede mobile Anfrage die vorbelegte erste Option. */
  .kk__rechts > .eyebrow--grau,
  .kk__anliegen { display: none; }
  .kk__rechts input { height: 50px; }
  .cta { padding: 24px 18px; gap: 20px; }
  .cta__aktionen { min-width: 0; justify-self: stretch; }
  .speicher { gap: 20px; }
  .speicher__bild img { min-height: 0; height: 220px; }
  .loes__raster { gap: 20px; }
  .loes__tab { padding: 12px 2px; font-size: 15px; }
  .loes__panel { padding: 22px 18px; min-height: 0; }
  .textmitte { gap: 14px; }
  .wpk { gap: 28px; }
  .wpk__text h2 { font-size: 26px; }
  .wpk__ring { width: 220px; height: 220px; border-width: 6px; }
  .wpk__ring b { font-size: 48px; }
  .wpk__ring strong { font-size: 17px; }
  .wpf__text h2 { font-size: 26px; gap: 12px; }
  .wpf__text h2 svg { width: 26px; height: 26px; }
  .wpko__bild { min-height: 220px; }
  .wpko__text { padding: 24px 18px; gap: 14px; }

  /* FAQ */
  .faq__titel { font-size: 26px; margin-bottom: 20px; }
  .faq__frage { font-size: 16px; padding: 18px 0; gap: 14px; }
  .faq__frage svg { width: 30px; height: 30px; }
  .faq__antwort p { font-size: 15px; padding-bottom: 20px; }
  .faq__schluss { margin-top: 28px; gap: 14px; }

  
  
  /* Fußzeile */
  .fuss { padding-top: 40px; }
  .fuss__cta { padding-bottom: 28px; gap: 18px; }
  .fuss__cta h2 { font-size: 26px; }
  .fuss__mitte { padding: 28px 0; gap: 24px; }
  .fuss__links { grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
  .fuss__links a { font-size: 14px; }
  .fuss__kontakt { text-align: left; gap: 8px; }
  .fuss__recht { justify-content: flex-start; gap: 12px 20px; padding: 16px 0 88px; }
  .fuss__recht a, .fuss__recht span { font-size: 13px; }

  /* Schwebender Anruf-Knopf unten rechts — auf dem Telefon der kürzeste Weg
     zum Kontakt, deshalb immer erreichbar. */
  .anruf-knopf {
    position: fixed; right: 16px; bottom: 16px; z-index: 80;
    display: flex; align-items: center; justify-content: center; width: 60px; height: 60px;
    border-radius: 50%; background: var(--orange); color: var(--weiss);
    box-shadow: 0 14px 36px rgba(240, 148, 0, 0.42);
  }
  .anruf-knopf:hover { background: var(--orange-hover); color: var(--weiss); }
  [data-menue-offen] .anruf-knopf { display: none; }
}
@media (min-width: 640px) { .anruf-knopf { display: none; } }

/* Klarer Einstieg, sichtbare Projektinformationen und verlässliche Sprungziele. */
:root { --sprungabstand: 24px; }
#kontakt, #funnel, [data-frage], [data-kontakt] input,
[data-kontakt] textarea, [data-felder] input { scroll-margin-top: var(--sprungabstand); }
/* Rahmen nur bei Tastaturbedienung — nach einem Mausklick auf eine Kachel
   bekommt die Frage den Fokus programmatisch, da wäre der Rahmen nur Lärm. */
.funnel__frage:focus { outline: none; }
.funnel__frage:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; border-radius: 4px; }
.kk__rechts label { font-size: 15px; font-weight: 600; margin-bottom: -12px; }
.kk__hinweis { margin: 0; font-size: 14px; line-height: 1.5; color: var(--grau-neutral); }

.hero--start { min-height: 740px; }
.hero--start::before { background: linear-gradient(90deg, rgba(13,9,6,.9) 0%, rgba(13,9,6,.76) 43%, rgba(13,9,6,.22) 100%); }
.hero--start .hero__text { padding-top: 48px; padding-bottom: 52px; gap: 22px; animation-duration: .6s; animation-delay: 0s; }
.hero--start h1 { max-width: 820px; font-size: clamp(38px,4.3vw,62px); line-height: 1.08; }
.hero--start .hero__sub { max-width: 650px; font-size: 19px; line-height: 1.55; }
.hero__region { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #fff; }
.hero--start .hero__bullets { gap: 9px; }
.hero--start .hero__cta { margin-top: 2px; }
.hero__leistungen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hero__leistungen a { display: inline-flex; gap: 24px; align-items: center; justify-content: space-between; min-height: 48px; padding: 11px 16px; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; color: #fff; font-size: 15px; background: rgba(0,0,0,.18); }
.hero__leistungen a:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.refk__ov { opacity: 1; }
.refk__schatten { background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.55) 58%, rgba(0,0,0,.9) 100%); }
.refk__text p { color: #fff; }
.refk__hinweis { max-width: 760px; margin: 20px 0 0; font-size: 16px; line-height: 1.6; color: var(--grau-neutral); }
/* Referenzen: Kennzeile, Überschrift und Hinweis als ein linksbündiger Block.
   Das zweispaltige Raster der anderen Sektionsköpfe trägt hier nicht — die
   Überschrift ist kurz und stand verloren in der rechten Spalte, der Hinweis
   darunter wieder links. */
.refk__kopf { display: flex; flex-direction: column; }
.refk__kopf .h2 { margin-top: 12px; line-height: 1.2; }
.laufband__bildrahmen { display: block; flex: 0 0 auto; }
.wp-eignung { background: var(--weiss); }
.wp-eignung .h2 { max-width: 800px; margin-top: 16px; }
.wp-eignung__intro { max-width: 780px; margin: 22px 0 0; }
.wp-eignung__raster { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin: 32px 0 24px; }
.wp-eignung__raster article { padding: 28px; background: var(--panel); border: 1px solid var(--border-hell); border-radius: var(--r-kachel); }
.wp-eignung__nummer { font-size: 14px; font-weight: 700; color: var(--braun); }
.wp-eignung__raster h3 { font-size: 22px; line-height: 1.25; margin: 18px 0 12px; }
.wp-eignung__raster p, .wp-eignung__vorbereitung { color: var(--grau-neutral); font-size: 16px; line-height: 1.6; }
.wp-eignung__raster p { margin: 0; }
.wp-eignung__vorbereitung { max-width: 780px; margin-bottom: 24px; }
@media (max-width: 767px) {
  .wp-eignung__raster { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .wp-eignung__raster article { padding: 20px; }
  .wp-eignung__raster h3 { font-size: 20px; margin-top: 10px; }
}
@media (max-width: 639px) {
  :root { --sprungabstand: 88px; }
  .hero--start { min-height: 0; }
  .hero--start::before { background: linear-gradient(90deg,rgba(13,9,6,.9),rgba(13,9,6,.68)); }
  .hero--start .hero__text { padding: 30px 16px 28px; gap: 18px; }
  .hero--start h1 { font-size: clamp(29px,8.4vw,40px); }
  .hero--start .hero__sub { font-size: 16px; }
  .hero__region { font-size: 11px; letter-spacing: .07em; }
  .hero--start .hero__cta { align-self: stretch; justify-content: center; }
  .hero__leistungen { gap: 8px; }
  .hero__leistungen a { font-size: 13px; padding: 9px 11px; gap: 12px; min-height: 44px; }
  .kk__rechts label { margin-bottom: -6px; }
}
/* Ein bereits bedienter Abschnitt darf nach der Fokusmessung nicht weiter einblenden. */
[data-reveal]:focus-within { animation: none; opacity: 1; transform: none; }
/* Leistungsumfang und Rechenannahmen bleiben auch mit längeren Texten lesbar. */
.pr__zeile { flex-wrap: wrap; }
.pr__zeile span:first-child { white-space: normal; min-width: 0; flex: 1 1 55%; }
.pr__preis { white-space: normal; max-width: 100%; }
.check__annahmen { display: block; font-size: 14px; line-height: 1.6; color: var(--grau-neutral); }
.check__annahmen a { color: var(--braun); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 639px) {
  .check__box div { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ======================================================== Einsatzgebiet === */

.umgebung { background: var(--bg); overflow: hidden; }
/* Kopf: Eyebrow links, Überschrift rechtsbündig daneben — wie im Handoff. */
.umgebung__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.umgebung__kopf .h2 { max-width: 640px; text-align: right; margin: 0; }
.umgebung__kopf .eyebrow--grau { flex: 0 0 auto; padding-top: 6px; }
/* Bildkarten in einer wischbaren Bahn, am rechten Rand angeschnitten. */
.umgebung__bahn {
  display: flex; gap: clamp(16px, 1.8vw, 26px); padding: clamp(32px, 3.6vw, 56px) var(--rand) 8px;
  max-width: var(--breite); margin: 0 auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  scroll-padding-left: var(--rand);
}
.umgebung__bahn::-webkit-scrollbar { display: none; }
.umgebung__karte {
  position: relative; flex: 0 0 clamp(280px, 26vw, 450px); aspect-ratio: 450 / 515; scroll-snap-align: start;
  border-radius: var(--r-kachel); overflow: hidden; background: #ddd; color: var(--weiss); text-decoration: none;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}
.umgebung__karte picture { position: absolute; inset: 0; display: block; }
.umgebung__bild { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.umgebung__karte:hover .umgebung__bild { transform: scale(1.04); }
/* Abdunklung, damit Ortsname und Link auf jedem Foto lesbar bleiben. */
.umgebung__karte::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.5) 100%);
  transition: background-color 0.25s ease;
}
/* Beim Hover wird die Schrift orange — die dunklere Ebene hält sie auch auf
   hellen Fotos (Wärmepumpe, Rathäuser, Himmel) lesbar. */
.umgebung__karte:hover::after, .umgebung__karte:focus-visible::after { background-color: rgba(0, 0, 0, 0.45); }
.umgebung__stadt, .umgebung__link { position: absolute; left: clamp(20px, 2.2vw, 34px); z-index: 1; }
.umgebung__stadt { top: clamp(22px, 2.6vw, 40px); font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.umgebung__link { bottom: clamp(22px, 2.6vw, 40px); font-size: clamp(15px, 1.15vw, 17px); opacity: 0.92; }
.umgebung__karte:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.umgebung__nav { display: flex; justify-content: flex-end; gap: 18px; margin-top: clamp(20px, 2.4vw, 36px); }

@media (max-width: 639px) {
  .umgebung__kopf { flex-direction: column; gap: 10px; }
  .umgebung__kopf .h2 { text-align: left; max-width: none; }
  .umgebung__bahn { padding: 24px 16px 6px; gap: 12px; }
  .umgebung__karte { flex-basis: 78vw; }
  .umgebung__nav { margin-top: 16px; gap: 12px; }
}

/* ============================================= Leistungskacheln als Link === */

/* Führt eine Kachel auf eine eigene Seite, ist die ganze Kachel klickbar. */
.leist__link { color: inherit; }
.leist__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.leist__link:focus-visible { outline: none; }
.leist__kachel:has(.leist__link:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ===================================================== Eyebrows mobil === */

/* Auf dem Telefon haben alle Kennzeilen über Überschriften dieselbe Größe
   wie „Unsere Standorte" (13px). Die Sektionen legen sonst eigene Größen
   zwischen 11 und 16px fest; die Liste nennt diese Stellen ausdrücklich,
   damit die Regel sie sicher überstimmt. Steht bewusst am Dateiende. */
@media (max-width: 639px) {
  .eyebrow, .eyebrow--grau, .teaser__eyebrow, .wpf__eyebrow, .hero__region,
  .rez__kopf .eyebrow--grau, .leist--start .eyebrow--grau,
  .partner__kopf .eyebrow--grau, .kk__rechts .eyebrow--grau,
  .teaser__text .teaser__eyebrow { font-size: 13px; }
}

/* ========================================================= H2 mobil ===== */

/* Auf dem Telefon haben alle H2 dieselbe Größe wie der Titel der
   Standort-Sektion (23px). Die Sektionen legen sonst eigene Größen zwischen
   22 und 28px fest; die Liste nennt diese Stellen ausdrücklich, damit die
   Regel sie sicher überstimmt. Steht bewusst am Dateiende. */
@media (max-width: 639px) {
  .h2, .h2--leicht, .funnel__frage,
  .team__aussage h2, .fuss__cta h2, .recht h2, .teaser__text h2, .kk__links h2,
  .box__kopf h2, .cta__text h2, .wpf__text h2, .wpk__text h2,
  .faq__titel, .faq--hell .faq__titel { font-size: 23px; }
}

/* ==================================================== Fließtext mobil === */

/* Auf dem Telefon hat der gesamte Fließtext (Absätze, Listen) dieselbe
   Größe wie der Text im Gewerbe-Teaser (15px). Eyebrows behalten ihre 13px.
   Die :not()-Liste hebt die Spezifität so weit an, dass die Regel die
   sektionseigenen Größen überstimmt. Steht bewusst am Dateiende. */
@media (max-width: 639px) {
  :is(p, li, dd):not(.eyebrow, .eyebrow--grau, .teaser__eyebrow, .wpf__eyebrow, .hero__region) { font-size: 15px; }
  .hero__bullets span, .hero--start .hero__sub { font-size: 15px; }
  /* „Für Unternehmen" im Gewerbe-Teaser sieht aus wie alle anderen
     Eyebrows (.eyebrow--grau): Großbuchstaben, gesperrt, grau. */
  .teaser__text .teaser__eyebrow {
    font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau-eyebrow);
  }
}

/* ================================================= Referenzen mobil ==== */

/* Auf dem Telefon stehen die Referenzkarten nebeneinander in einer
   wischbaren Leiste (wie der Standort-Slider) statt untereinander. Die
   Leiste läuft bis an den Bildschirmrand; die Pfeile blättern wie bisher
   durch alle Projekte. */
@media (max-width: 639px) {
  .refk__raster {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand); scroll-padding-left: var(--rand);
  }
  .refk__raster::-webkit-scrollbar { display: none; }
  .refk__karte { flex: 0 0 82%; height: 240px; scroll-snap-align: start; }
}

/* ============================================ Startseite mobil: Skala === */

/* Alle Seiten außer /angebot, nur Telefon: nah beieinanderliegende
   Schriftgrößen sind auf fünf Stufen zusammengelegt — 13 (klein), 15 (Text), 18 (Zwischen-
   titel), 23 (H2), 32 (groß). Fußzeile und Kopf liegen außerhalb von main,
   deshalb body:not(:has(main.angebot)). */
@media (max-width: 639px) {
  /* 14 → 13 */
  body:not(:has(main.angebot)) .rez__name span { font-size: 13px; }
  /* 14 und 16 → 15 */
  body:not(:has(main.angebot)) .fuss__links a, body:not(:has(main.angebot)) .fuss__kontakt a,
  body:not(:has(main.angebot)) .sprung, body:not(:has(main.angebot)) .rez__name b,
  body:not(:has(main.angebot)) .leist__kachel h3, body:not(:has(main.angebot)) .leist__link,
  body:not(:has(main.angebot)) .kopf__cta, body:not(:has(main.angebot)) .teaser__aktionen .btn,
  body:not(:has(main.angebot)) .teaser__link { font-size: 15px; }
  /* 17, 19, 20 → 18 */
  body:not(:has(main.angebot)) .kk__daten a, body:not(:has(main.angebot)) .rez__avatar,
  body:not(:has(main.angebot)) .umgebung__stadt { font-size: 18px; }
  /* 30 und 31,5 → 32 */
  body:not(:has(main.angebot)) .team__zahl b, body:not(:has(main.angebot)) .hero h1 { font-size: 32px; }
  /* Unterseiten: dieselben fünf Stufen */
  body:not(:has(main.angebot)) :is(.wp-eignung__nummer, .wpk__ring small, .pill, .check__label,
    .check__annahmen) { font-size: 13px; }
  body:not(:has(main.angebot)) .check__schalter b { font-size: 15px; }
  body:not(:has(main.angebot)) :is(.check__regler b, .check__box b) { font-size: 18px; }
  body:not(:has(main.angebot)) .team__stat b { font-size: 32px; }
  body:not(:has(main.angebot)) :is(.faq__frage, .dl__inhalt h3, .pr__preis, .box__eintrag h3,
    .wpko__zeiten span, .v5__punkt h3, .fak__punkt h3) { font-size: 15px; }
  body:not(:has(main.angebot)) :is(.wpk__ring strong, .recht__telefon, .wp-eignung__raster h3,
    .loes__panel h3) { font-size: 18px; }
  body:not(:has(main.angebot)) .dl__nr { font-size: 23px; }
  body:not(:has(main.angebot)) :is(.wpk__ring b, .recht h1, .fehler__titel) { font-size: 32px; }
}

/* ========================================== Startseite Desktop: H2 ====== */

/* Alle Seiten außer /angebot, ab 640px: Alle H2 haben die Größe der normalen
   Sektionsüberschrift (.h2, z. B. „Wir bieten und entwickeln …"). Mehrere
   Sektionen legen sonst eigene, größere Werte fest. */
@media (min-width: 640px) {
  body:not(:has(main.angebot)) :is(.h2, .funnel__frage, .team__aussage h2, .teaser__text h2,
    .kk__links h2, .fuss__cta h2) { font-size: clamp(26px, 3vw, 42px); }
}

/* ======================================= Startseite Desktop: 7 Stufen === */

/* Alle Seiten außer /angebot, ab 1024px: feste Schriftgrößen in sieben
   Stufen statt
   vieler mitwachsender Einzelwerte — 14 (klein), 16 (Text), 20 (Zwischen-
   text), 24 (Kartentitel), 42 (H2), 48 (Kennzahlen), 60 (H1). Zwischen 640
   und 1024px bleiben die mitwachsenden Werte, sonst würden Überschriften
   auf Tablets zu groß. */
@media (min-width: 1024px) {
  /* Fließtext aller Seiten → 16. Steht am Blockanfang, damit die folgenden,
     gleich spezifischen Regeln (z. B. 14 für Hinweise) ihn überstimmen. */
  body:not(:has(main.angebot)) :is(p, li):not(.eyebrow, .eyebrow--grau, .teaser__eyebrow, .wpf__eyebrow, .hero__region) { font-size: 16px; }
  /* 13, 14 → 14 */
  body:not(:has(main.angebot)) :is(.fuss__recht a, .fuss__recht span, .hero__region, .rez small,
    .kk__hinweis, .rez__name span) { font-size: 14px; }
  /* 15, 15,8, 16,6, 17, 18 (Absende-Button) → 16 */
  body:not(:has(main.angebot)) :is(.fuss__kontakt span, .funnel__kachel span, .funnel__status,
    .funnel__dauer, .funnel__schritt, .hp label, .eyebrow--grau, .kk__rechts label,
    .funnel__hinweis, .refk__text p, .umgebung__link, .kk__rechts button[type='submit']) { font-size: 16px; }
  /* 18, 18,7, 19, 21 → 20 */
  body:not(:has(main.angebot)) :is(.kk__links > p, .nav__knopf, .teaser__text p:not(.teaser__eyebrow),
    .rez__kopf span > b, .hero__sub, .rez__avatar, .funnel__gruss,
    .leist__kachel h3, .leist__link, .kk__daten a, .refk__pfeil) { font-size: 20px; }
  /* 24, 24,5 → 24 */
  body:not(:has(main.angebot)) :is(.umgebung__stadt, .refk__text h3) { font-size: 24px; }
  /* H2 → 42 */
  body:not(:has(main.angebot)) :is(.h2, .funnel__frage, .team__aussage h2, .teaser__text h2,
    .kk__links h2, .fuss__cta h2) { font-size: 42px; }
  /* Kennzahlen → 48 */
  body:not(:has(main.angebot)) .team__zahl b { font-size: 48px; }
  /* H1 → 60 */
  body:not(:has(main.angebot)) .hero h1 { font-size: 60px; }
  /* Unterseiten: dieselben sieben Stufen */
  body:not(:has(main.angebot)) :is(.pr__gruppe, .wpko__zeiten small, .cta__aktionen small, .loes__nr,
    .dl__inhalt p) { font-size: 14px; }
  body:not(:has(main.angebot)) :is(.eyebrow, .box__badge, .wpk__punkte span, .recht__telefon,
    .intro--breit .intro__text .fliess, .leist__kopf .fliess) { font-size: 16px; }
  body:not(:has(main.angebot)) :is(.box__eintrag h3, .box__punkt h3, .dl__inhalt h3, .speicher__punkt h3,
    .pr__preis, .faq__frage, .wp-eignung__raster h3) { font-size: 20px; }
  body:not(:has(main.angebot)) .loes__panel h3 { font-size: 24px; }
  body:not(:has(main.angebot)) :is(.cta__text h2, .wpk__text h2, .faq__titel) { font-size: 42px; }
  body:not(:has(main.angebot)) :is(.recht h1, .fehler__titel) { font-size: 48px; }
  body:not(:has(main.angebot)) .wpk__ring b { font-size: 60px; }
  /* Standortseiten: Ersparnis-Rechner und Kennzahlen */
  body:not(:has(main.angebot)) :is(.check__skala span, .check__schalter span span) { font-size: 14px; }
  body:not(:has(main.angebot)) :is(.check__zeile span, .check__zeile b, .check__box div span,
    .team__stat dd span) { font-size: 16px; }
  body:not(:has(main.angebot)) .check__regler b { font-size: 20px; }
  body:not(:has(main.angebot)) .team__stat b { font-size: 48px; }
}

/* ======================================================= /angebot ======= */

/* Kopfleiste der Angebotsseite (vorher Inline-Stile, Werte unverändert). */
.angebot__kopf { background: var(--braun); padding: 22px var(--rand); }
.angebot__kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-inline: 0; }
.angebot__logo { display: block; width: 108px; }
/* Fußzeile der Angebotsseite (vorher Inline-Stile, Werte unverändert). */
.angebot__fuss { padding: 30px var(--rand) 40px; text-align: center; }
.angebot__fusszeile { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.angebot__fusszeile a, .angebot__fusszeile span { font-size: 14px; color: var(--grau); }

/* Ab 640px muss der ganze Funnel auf einen Blick ins Fenster passen.
   Abstände, Bilder und Titel richten sich nach der Fensterhöhe (vh): in
   hohen Fenstern luftiger, in flachen kompakt. Die Seite füllt die ganze
   Höhe, die Fußzeile sitzt am unteren Rand. Nur /angebot — der eingebettete
   Funnel der anderen Seiten bleibt. */
@media (min-width: 640px) {
  body:has(main.angebot) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  main.angebot { flex: 1 0 auto; }
  .angebot__kopf { padding: 10px var(--rand); }
  .angebot__logo { width: 76px; }
  .angebot__anruf { padding: 9px 18px; font-size: 15px; }
  .angebot__fuss { padding: 12px var(--rand) 14px; }
  main.angebot .funnel { padding: clamp(16px, 5vh, 64px) var(--rand) clamp(12px, 2vh, 24px); }
  main.angebot .funnel__karte { max-width: 860px; padding: clamp(20px, 3.4vh, 36px) clamp(24px, 3vw, 40px); gap: clamp(10px, 1.9vh, 20px); }
  main.angebot .funnel__beraterin { gap: 14px; padding-bottom: clamp(10px, 1.8vh, 18px); }
  main.angebot .funnel__beraterin img { width: clamp(44px, 7vh, 60px); height: clamp(44px, 7vh, 60px); }
  main.angebot .funnel__gruss { font-size: 16px; margin-bottom: 2px; }
  main.angebot .funnel__status { font-size: 14px; }
  main.angebot .funnel__titel { font-size: clamp(24px, 4vh, 32px); line-height: 1.2; }
  main.angebot .funnel__text { margin-top: -4px; font-size: 14px; line-height: 1.5; }
  main.angebot .funnel__text br { display: none; }
  main.angebot .funnel__fortschritt { gap: 8px; }
  main.angebot .funnel__schritt { height: 32px; padding: 0 16px; font-size: 14px; }
  main.angebot .funnel__dauer { font-size: 14px; }
  main.angebot .funnel__segment { height: 6px; }
  main.angebot .funnel__kopf { gap: 4px; }
  main.angebot .funnel__frage { font-size: clamp(20px, 3.4vh, 26px); }
  main.angebot .funnel__hinweis { font-size: 14px; line-height: 1.5; }
  /* Schmalere Mindestbreite, damit auch fünf Kacheln in eine Reihe passen. */
  main.angebot .funnel__kacheln { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  main.angebot .funnel__kachel { padding: clamp(10px, 1.8vh, 18px) 10px; gap: 8px; font-size: 14px; }
  main.angebot .funnel__bild { height: clamp(56px, 11vh, 96px); }
  main.angebot .funnel__bild img { max-width: clamp(72px, 14vh, 124px); max-height: clamp(56px, 11vh, 96px); }
  main.angebot .funnel__wahl { padding: 12px 16px; font-size: 15px; }
  main.angebot .funnel__eingaben { gap: 10px; }
  main.angebot .funnel__eingaben input { height: clamp(40px, 6vh, 50px); }
  main.angebot .funnel__eingaben textarea { min-height: 0; height: clamp(44px, 6.5vh, 96px); }
  main.angebot .funnel__fuss { padding-top: clamp(10px, 1.8vh, 18px); margin-top: 0; gap: 12px; }
  main.angebot .funnel__zurueck, main.angebot .funnel__weiter { height: 42px; }
}

/* Kundenstimmen auf den Unterseiten: Oben fehlt sonst der Abstand, weil
   .rez nur 20px mitbringt (auf der Startseite schließt sie direkt an die
   Anlagen-Sektion an und bleibt so). Oben so viel Luft wie unten — auf dem
   Telefon wie auf dem Desktop. */
main:not(.start) .rez { padding-top: clamp(60px, 6.6vw, 110px); }

/* ============================================ Faktoren (Standorte) ====== */

/* Ab 640px: zwei Punkte je Reihe, die ganze Sektion mittig zentriert —
   Kopf, Punkte samt Nummernkreis und Button. Auf dem Telefon bleibt es bei
   einer linksbündigen Spalte. */
@media (min-width: 640px) {
  .fak .inhalt { text-align: center; }
  .fak .h2, .fak__einleitung { margin-inline: auto; }
  .fak__einleitung { max-width: 760px; }
  .fak__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }
  .fak__punkt { align-items: center; }
  .fak__cta { justify-content: center; }
}

/* ===================================================== H2: eine Stärke === */

/* Alle H2 in derselben Strichstärke und Laufweite wie .h2 (700, -0.02em).
   Mehrere Sektionen hatten 400 oder 500 — die Überschriften wirkten dadurch
   unterschiedlich breit. Farben bleiben je Sektion. */
:is(.h2, .h2--leicht, .funnel__frage, .team__aussage h2, .faq__titel, .faq--hell .faq__titel,
  .kk__links h2, .box__kopf h2, .wpf__text h2, .cta__text h2, .teaser__text h2,
  .fuss__cta h2, .wpk__text h2) { font-weight: 700; letter-spacing: -0.02em; }
/* Fett markierte Teile in H2 (z. B. „Ihr Experte für <b>Photovoltaik in …</b>")
   übernehmen die Stärke der Überschrift. Sonst rechnet der Browser „bolder"
   auf 900 hoch, sobald die H2 selbst 700 hat. */
h2 :is(b, strong) { font-weight: inherit; }

/* ================================================== Eyebrows: Orange ==== */

/* Alle Kennzeilen über Überschriften in Orange wie „5 Vorteile" — auch die
   bisher grauen. Die Regionszeile im Hero (.hero__region) bleibt weiß, sie
   steht auf dem Foto. */
:is(.eyebrow, .eyebrow--grau, .teaser__text .teaser__eyebrow, .wpf__eyebrow) { color: var(--orange); }

/* Förder-Sektion (Wärmepumpe): Pfeil-Symbol im Titel auf dem Telefon aus. */
@media (max-width: 639px) {
  .wpf__text h2 svg { display: none; }
}

/* Box-Raster mit Wischen (Wärmepumpe „Ihre Vorteile …", Gewerbe „Warum Sun
   Device"): auf dem Telefon eine
   wischbare Reihe wie „Vorteile von Sun Device" auf den Standortseiten.
   Die Reihe reicht bis an den Rand der braunen Box (18px Innenabstand);
   56vw lässt vom zweiten Punkt etwa die Hälfte stehen. */
@media (max-width: 639px) {
  .box__raster--wisch {
    display: flex; gap: 12px; margin-top: 24px;
    overflow: auto hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain; cursor: grab;
    width: calc(100% + 36px); margin-inline: -18px; padding: 0 18px 6px;
    scroll-padding-inline: 18px;
  }
  .box__raster--wisch::-webkit-scrollbar { display: none; }
  .box__raster--wisch.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .box__raster--wisch .box__punkt {
    flex: 0 0 56vw; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .box__raster--wisch .box__punkt .puls { width: 80px; height: 80px; }
  .box__raster--wisch .box__punkt .puls__kreis { width: 56px; height: 56px; }
  .box__raster--wisch .box__punkt .puls__kreis svg { width: 26px; height: 26px; }
}

/* Wärmepumpe „Was Sie von der Planung erwarten können": auf dem Telefon
   ebenfalls eine wischbare Reihe, Icon oben, Text darunter zentriert. */
@media (max-width: 639px) {
  .box__eintraege--wisch {
    flex-direction: row; gap: 12px;
    overflow: auto hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain; cursor: grab;
    width: calc(100% + 36px); margin-inline: -18px; padding: 0 18px 6px;
    scroll-padding-inline: 18px;
  }
  .box__eintraege--wisch::-webkit-scrollbar { display: none; }
  .box__eintraege--wisch.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .box__eintraege--wisch .box__eintrag {
    flex: 0 0 56vw; scroll-snap-align: start;
    flex-direction: column; align-items: center; text-align: center; gap: 10px;
  }
  .box__eintraege--wisch .box__eintrag .puls { width: 80px; height: 80px; }
  .box__eintraege--wisch .box__eintrag .puls__kreis { width: 56px; height: 56px; }
  .box__eintraege--wisch .box__eintrag .puls__kreis svg { width: 26px; height: 26px; }
  .box__eintraege--wisch .box__eintrag > div { align-items: center; }
}

/* Box-Listen mit `sticky` (Wärmepumpe „Was Sie von der Planung erwarten
   können", Gewerbe „Vorteile von Photovoltaikanlagen") ab 1024px wie
   „Unser Ablauf" (.dl): Kopf links bleibt stehen, rechts ziehen die Punkte
   mit Trennlinien vorbei und blenden beim Scrollen einzeln ein. */
@media (min-width: 1024px) {
  .box__liste--sticky { align-items: start; }
  .box__liste--sticky .box__kopf { position: sticky; top: clamp(88px, 9vw, 120px); align-self: start; }
  .box__liste--sticky .box__eintraege { gap: 0; }
  .box__liste--sticky .box__eintrag { padding: clamp(28px, 3vw, 40px) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
  .box__liste--sticky .box__eintrag:first-child { padding-top: 0; }
  .box__liste--sticky .box__eintrag:last-child { border-bottom: none; padding-bottom: 0; }
}
/* In der wischbaren Handy-Reihe stehen die Punkte nebeneinander; das
   Einblenden würde Punkte außerhalb des Bildes unsichtbar lassen. */
@media (max-width: 639px) {
  .box__eintraege--wisch [data-reveal] { opacity: 1; animation: none; }
}

/* Förder-Sektion auf dem Telefon: Abstände wie in den übrigen Sektionen —
   14px zwischen Eyebrow, Überschrift und Text (vorher 20 bzw. 36px). */
@media (max-width: 639px) {
  .wpf__text { gap: 14px; }
  .wpf__text .wpf__tipp { margin-top: 0; }
}

/* Eyebrow über dem Intro-Titel (z. B. Gewerbe „Gesetzeslage"): .intro__text
   hat ein gap von 20px — der Abstand zum Titel soll wie bei den anderen
   Eyebrows 14px sein. */
.intro__text .intro__eyebrow { margin: 0 0 -6px; }
@media (max-width: 639px) { .intro__text .intro__eyebrow { margin-bottom: 0; } }

/* Referenzkarten: Titel und Anlagendaten brechen ausgeglichen um — keine
   zweite Zeile mit nur „1 Tag)". Gilt auf allen Seiten und Breiten. */
.refk__text h3, .refk__text p { text-wrap: balance; }

/* Ergänzte Eyebrows: zentriert, wo die Überschrift zentriert steht. */
.eyebrow--zentriert, .reg--mitte .eyebrow { text-align: center; }
/* In der orangen Fußzeile wäre ein oranges Eyebrow unsichtbar: dort
   Dunkelbraun wie der Button daneben. */
.fuss__cta .eyebrow { color: var(--braun); }
/* Mobil: in Eyebrows nie ein einzelnes Wort allein in der letzten Zeile. */
@media (max-width: 639px) {
  :is(.eyebrow, .eyebrow--grau, .teaser__eyebrow, .wpf__eyebrow) { text-wrap: pretty; }
}