/* ==========================================================================
   Sunvision PV — Stylesheet
   Schritt 1: Hero-Film (einzige Kamerafahrt) + Batterie als Klick-Widget.
   Weitere Sektionen folgen mit den nächsten Prompts.
   ========================================================================== */

/* ---------- 0. SCHRIFTEN (lokal, kein CDN) ---------- */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
}

/* ---------- 1. TOKENS ---------- */
:root {
  /* Sunvision Corporate Design 1.0 — verbindliche Vorgabe von Felix (28.07.2026).
     Ersetzt die vorherige warme Gold/Creme-Palette vollstaendig.
     Blau traegt, Gelb/Gold/Gruen sind AKZENTE und werden sparsam eingesetzt. */
  --c-primary:    #072637;  /* Primary Blue — Header, Footer, Navigation, Primaer-Buttons */
  --c-secondary:  #1372AD;  /* Secondary Blue — Links, Hover, Akzentflaechen, Infoboxen */
  --c-text:       #221F1F;  /* Primaerer Fliesstext */
  --c-white:      #FFFFFF;  /* Hintergrund, Negativlogo, Text auf dunklen Flaechen */

  --c-yellow:     #FEC247;  /* Solar Yellow — CTA, Hervorhebungen */
  --c-gold:       #BA8934;  /* Solar Gold — Premium, Wirtschaftlichkeit */
  --c-green:      #65A744;  /* Energy Green — Nachhaltigkeit, Speicher, Eigenverbrauch */
  --c-green-dark: #3D722A;

  --c-grey-light: #F4F4F4;  /* Flaechen, Karten, Sektionen, Formulare */
  --c-grey-med:   #707070;  /* Sekundaertext, Bildunterschriften, Meta */
  --c-blue-tint:  #DCEFF8;  /* Infoboxen, Tabellen, Formularflaechen */
  --c-sand:       #F7F2E8;  /* warme Flaeche, sehr sparsam */
  --c-line:       #E1E6E9;  /* neutrale Rahmen und Trennlinien */

  --font-display: "Instrument Serif", "Playfair Display", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-chapter: clamp(2rem, 6vw, 4.5rem);
  --fs-h2:      clamp(1.75rem, 4vw, 3rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --fs-body:    clamp(1rem, 1.2vw, 1.125rem);
  --fs-eyebrow: 0.8125rem;

  --space: clamp(1rem, 2vw, 1.5rem);
  --section-y: clamp(5rem, 12vh, 9rem);
  --wrap: 1200px;
  --wrap-narrow: 720px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur: 500ms;
  --dur-slow: 900ms;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@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;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-text);
  background: var(--c-white);
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0 0 0.5em; line-height: 1.1; }
p { margin: 0 0 1em; max-width: 62ch; }
a { color: var(--c-secondary); }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--c-secondary); outline-offset: 2px; }

.skip-link {
  position: absolute; left: var(--space); top: -100px;
  background: var(--c-yellow); color: var(--c-text);
  padding: 0.75em 1.25em; border-radius: 4px; z-index: 1000;
  transition: top var(--dur-fast) var(--ease);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--space); }

.eyebrow {
  font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 600; color: var(--c-secondary); margin-bottom: 0.75em;
}

.cta {
  display: inline-block; background: var(--c-yellow); color: var(--c-text);
  padding: 0.9em 1.75em; border-radius: 999px; text-decoration: none; font-weight: 700;
  border: none; cursor: pointer; font-size: var(--fs-body);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.cta:hover { background: var(--c-gold); }
.cta--large { font-size: 1.25rem; padding: 1em 2em; }
.cta--ghost {
  background: none; color: var(--c-secondary); padding: 0; font-weight: 600; text-decoration: underline;
}
.cta--ghost:hover { background: none; color: var(--c-primary); }

/* ---------- 3. PLATZHALTER-BILDER ---------- */
.img-placeholder {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.85em; text-align: center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(19,114,173,0.14), transparent 55%),
    linear-gradient(155deg, #0d3a52 0%, #0a2f43 55%, #072637 100%);
  color: rgba(255,255,255,0.55);
  font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 6px;
  min-height: 200px; width: 100%; padding: 1.5em; overflow: hidden; word-break: break-all;
}
.img-placeholder::before {
  content: ""; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--c-yellow), rgba(254,194,71,0) 70%);
  opacity: 0.85; flex-shrink: 0;
}

/* ---------- 4. HEADER / NAVIGATION ---------- */
#site-header { position: fixed; top: 0; left: 0; z-index: 500; width: 100%; }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space);
  padding: 1rem var(--space); background: transparent;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#site-header.nav--paper .nav { background: var(--c-white); box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.nav-logo {
  display: flex; align-items: center; gap: 0.55em;
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-white); text-decoration: none;
}
/* Bildmarke neben dem Schriftzug. height: auto ist Pflicht, sonst schlaegt das
   height-Attribut des <img> die hier gesetzte Groesse (gleiche Falle wie im Referenz-Band). */
.nav-logo img { width: 30px; height: auto; display: block; flex: 0 0 auto; }
#site-header.nav--paper .nav-logo { color: var(--c-text); }

/* z-index 2 ist der Kern des Ausstiegs (13.08.2026): Das Menue-Overlay (.nav-links) liegt
   als position:fixed ueber dem ganzen Bildschirm und deckte damit auch den Burger-Knopf zu.
   Wer das Menue geoeffnet hatte, kam ohne einen Menuepunkt anzutippen nicht mehr heraus.
   Der Knopf liegt jetzt ueber dem Overlay und schliesst es wieder. */
.nav-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 1rem; }
.nav-phone { color: var(--c-white); text-decoration: none; font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
#site-header.nav--paper .nav-phone { color: var(--c-text); }
.cta--nav { padding: 0.55em 1.1em; font-size: 0.8rem; white-space: nowrap; }

.nav-links a {
  color: var(--c-white); text-decoration: none; font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.nav-links a.cta { font-weight: 700; }
#site-header.nav--paper .nav-links a:not(.cta) { color: var(--c-text); }
.nav-links a:hover { color: var(--c-yellow); }

.nav-toggle {
  display: flex; flex-direction: column; gap: 5px; background: none; border: none;
  cursor: pointer; padding: 0.5em; min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}
.nav-toggle-bar {
  width: 24px; height: 2px; background: var(--c-white);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
#site-header.nav--paper .nav-toggle-bar { background: var(--c-primary); }
/* Offen: Aus den drei Balken wird ein X — damit ist auch sichtbar, dass derselbe
   Knopf wieder schliesst. Bei offenem Menue immer weiss, der Grund ist dunkelblau. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar,
#site-header.nav--paper .nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: var(--c-white); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-links {
  position: fixed; inset: 0; z-index: 1;
  display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 2rem; background: var(--c-primary);
  transform: translateX(100%); transition: transform var(--dur) var(--ease);
}
.nav-links.is-open { display: flex; transform: translateX(0); }
.nav-links a { color: var(--c-white); font-size: 1.5rem; }
.nav-links .cta { color: var(--c-text); }

/* Feedback 27.07: auf schmalen Mobil-Screens sprengten Firmenname + Telefonnummer + CTA + Burger
   zusammen die Nav-Zeile (Text lief rechts aus dem Bildschirm raus). Telefon + CTA gibt es unten
   bereits als eigene, immer sichtbare Sticky-Leiste (.sticky-cta-mobile) — in der oberen Nav
   reichen auf Mobil Logo + Burger, das hält die Zeile sauber und ist nicht doppelt. */
@media (max-width: 859px) {
  .nav-actions .nav-phone,
  .nav-actions .cta--nav {
    display: none;
  }
  .nav-logo { font-size: 0.8rem; }
}

@media (min-width: 860px) {
  .nav-links {
    position: static; display: flex; flex-direction: row; background: none;
    transform: none; inset: auto; gap: clamp(1rem, 2vw, 2rem);
  }
  .nav-toggle { display: none; }
  .nav-actions { display: none; }
}

/* ---------- 5. FILM-SZENE — die EINE durchgehende Kamerafahrt ---------- */
.film-scene { position: relative; background: var(--c-primary); color: var(--c-white); }
.film-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 0; }
.film-layer { position: absolute; inset: 0; z-index: 0; }

/* Handy hochkant (Feedback 28.07, Felix): 16:9-Material in ein hochkantes Vollbild zu zwingen geht
   nur auf zwei Arten — verzerren (war der Fehler, behoben) oder ~74% der Bildbreite wegschneiden.
   Beim Familienbild fiel dabei die Mutter komplett aus dem Bild, also genau der Moment, der zählt.
   Deshalb läuft der Film auf schmalen Screens als breites, mittig sitzendes Kinoband: volle Breite,
   quadratisches Fenster. Dann sind ~56% der Bildbreite sichtbar (ganze Familie drauf) und das Bild
   wird nur noch ~5% statt ~230% hochskaliert — das behebt zugleich die Unschärfe. */
@media (max-width: 700px) {
  .film-layer {
    inset: auto 0 auto 0;
    top: 50%;
    transform: translateY(-50%);
    height: min(115vw, 70vh);   /* 09.08: Band vergroessert — vorher blieb ueber die halbe
                                   Bildschirmhoehe dunkel und der Film wirkte wie ein Streifen. */
  }
}
/* Feedback 26.07: die alten Sonnen-Frames (Bergtal) brannten gegen Ende fast weiss aus, Schrift
   war kaum lesbar — deshalb ursprünglich stark abgedunkelt (0.6). Kapitel 1 ist seit 27.07 komplett
   neues, von Anfang an warmes Material (kein Weissbrand mehr) — Feedback 27.07: die starke
   Abdunklung liess das jetzt "zu grau/trüb" statt warm wirken. Wieder aufgehellt; die Vignette
   unten sorgt weiterhin für lesbare Captions, auch ohne starke Canvas-Abdunklung. */
.film-layer canvas { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.88) saturate(1.1) contrast(1.03); }
.film-sticky::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,38,55,0.5) 0%, rgba(7,38,55,0.18) 24%, rgba(7,38,55,0.22) 65%, rgba(7,38,55,0.55) 100%),
    radial-gradient(ellipse at 50% 50%, rgba(7,38,55,0) 30%, rgba(7,38,55,0.32) 100%);
}
.film-sticky .scroll-hint {
  position: absolute; bottom: clamp(1.5rem, 5vh, 3rem); left: 50%;
  transform: translateX(-50%); z-index: 2;
}

.chapter-fallback { display: none; }
.no-film .chapter-fallback { display: block; position: absolute; inset: 0; z-index: -1; }
.no-film .chapter-fallback img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.88) saturate(1.1) contrast(1.03); }

.scroll-hint {
  font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-white); animation: scroll-bob 2.4s ease-in-out infinite;
}
.scroll-hint.is-hidden { display: none; }

.chapter {
  position: relative; z-index: 1; min-height: 100vh; display: flex;
  align-items: center; justify-content: center; padding: var(--space);
  text-align: center; pointer-events: none;
}
/* Auf dem Handy sitzt der Film als Band in der Mitte (siehe oben) — die Caption rutscht darunter,
   damit sie das Bild nicht überdeckt, bleibt aber über der Sticky-CTA-Leiste. */
@media (max-width: 700px) {
  .chapter { align-items: flex-end; padding-bottom: clamp(7rem, 15vh, 10rem); }
}
/* Kapitel 4B hat mehr Frames (40 statt ~24) als die übrigen Kapitel — braucht proportional mehr
   Scrollstrecke, sonst wirkt die Sequenz gehetzt/ruckelig (Feedback 26.07: "Video ist zu schnell"). */
.chapter--long { min-height: 170vh; }
/* Kapitel 6 (Familie + Lampe + Batterie/Wärmepumpe) hat mit 68 Frames nochmal deutlich mehr als
   Kapitel 4B — und ist laut Feedback 28.07 einer der wichtigsten emotionalen Momente der ganzen
   Seite ("muss klar auftauchen, sich nachhaltig freuen, Emotionen zeigen, nicht übersprungen
   werden"). Braucht entsprechend noch mehr Scrollstrecke, damit nichts gehetzt wirkt. */
.chapter--longer { min-height: 300vh; }
/* Kapitel-Nummern im Film ausgeblendet (Feedback: "schaut scheiße aus") — Markup bleibt für später. */
.chapter-nr { display: none; }
.chapter-caption {
  font-family: var(--font-display); font-size: var(--fs-chapter); line-height: 1.15;
  text-wrap: balance; max-width: 900px; color: var(--c-white);
  text-shadow: 0 2px 24px rgba(0,0,0,0.5); opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.chapter-caption em { display: block; font-style: normal; }
.chapter.is-visible .chapter-caption { opacity: 1; transform: translateY(0); }
.chapter-caption--core { font-size: clamp(2.5rem, 8vw, 5.5rem); }

@media (prefers-reduced-motion: reduce) { .chapter-caption { opacity: 1; transform: none; } }

/* ---------- 6. BATTERIE — scroll-animiertes Tag/Nacht-Duo (bewusste Ausnahme, siehe OFFEN.md) ---------- */
.batterie-widget {
  background: var(--c-grey-light);
  padding: var(--section-y) var(--space);
  text-align: center;
}
.batterie-widget h2 { font-size: var(--fs-h2); }
.batterie-lede { max-width: var(--wrap-narrow); margin-left: auto; margin-right: auto; }

/* Scroll-Bühne: hoher Container, darin ein sticky "Fenster" — Fortschritt beim Scrollen
   durch den Container steuert die Fülllstände. Kein zweiter Bild-Film, nur CSS/SVG. */
.batterie-scroll {
  position: relative;
  height: 260vh;
  margin: 3em 0 0;
}
.batterie-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.batterie-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 0 var(--space);
}
@media (min-width: 700px) {
  .batterie-panels { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

.batterie-panel {
  border-radius: 16px;
  padding: clamp(1.75rem, 4vw, 2.5rem) 1.5rem;
  color: var(--c-white);
  transition: background var(--dur) var(--ease);
}
.batterie-panel--tag {
  background: linear-gradient(155deg, #0d3a52 0%, #124a68 100%);
}
.batterie-panel--nacht {
  background: linear-gradient(155deg, #051d29 0%, #072637 100%);
}
.batterie-panel-label {
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  font-size: 0.8rem; opacity: 0.75; margin: 0 0 1em;
}

.batterie-scene {
  position: relative; height: 72px; margin-bottom: 0.5em;
  display: flex; align-items: center; justify-content: center;
}
.batterie-sun {
  width: 44px; height: 44px; border-radius: 999px;
  background: radial-gradient(circle, var(--c-yellow) 0%, var(--c-yellow) 70%, transparent 100%);
  box-shadow: 0 0 0 rgba(254,194,71,0);
  transition: box-shadow 300ms var(--ease), opacity 300ms var(--ease), transform 300ms var(--ease);
}
.batterie-moon {
  width: 34px; height: 34px; border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #EAF2F6 0%, #B9C6CE 100%);
  box-shadow: 0 0 18px rgba(242,238,227,0.25);
}
.batterie-stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.5) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,0.4) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 65%, rgba(255,255,255,0.35) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 60%, rgba(255,255,255,0.4) 50%, transparent 100%);
}

.batterie-battery-svg { width: 64px; height: 128px; display: block; margin: 0 auto; }
.batterie-battery-outline { fill: none; stroke: rgba(255,255,255,0.35); stroke-width: 2; }
.batterie-battery-terminal { fill: rgba(255,255,255,0.35); }
.batterie-battery-fill--tag { fill: var(--c-yellow); }
.batterie-battery-fill--nacht { fill: var(--c-green); }

.batterie-panel-value {
  font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--c-yellow); font-variant-numeric: tabular-nums; margin: 0.5em 0 0;
}
.batterie-panel-sentence {
  font-size: 0.95rem; color: rgba(255,255,255,0.8); margin: 0.6em 0 0; text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .batterie-scroll { height: auto; }
  .batterie-stage { position: static; height: auto; padding: 0; }
  .batterie-sun { transition: none; }
}

/* ---------- 6b. KWH-ZÄHLER (im Hero, Teil des Scroll-Films) ---------- */
.kwh-counter {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-variant-numeric: tabular-nums;
  color: var(--c-yellow);
  text-align: center;
}
.kwh-unit { font-size: 0.5em; margin-left: 0.2em; }

/* ---------- 7. TRUST-STREIFEN (früh!) ---------- */
.trust-streifen {
  background: var(--c-white);
  padding: var(--section-y) var(--space);
  max-width: var(--wrap);
  margin: 0 auto;
  text-align: center;
}
.marquee-heading { font-size: var(--fs-h3); margin-bottom: 1em; }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: clamp(2rem, 6vw, 4rem);
  animation: marquee 40s linear infinite;
}
.marquee-track span { font-family: var(--font-display); font-size: 1.5rem; color: var(--c-secondary); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee-track span[aria-hidden="true"] { display: none; }
}

/* ---------- 8. NUTZEN — vier Kundenargumente ---------- */
.nutzen { background: var(--c-grey-light); padding: var(--section-y) var(--space); text-align: center; }
.nutzen h2 { font-size: var(--fs-h2); }
/* Vier Bubbles untereinander, wie ein Chatverlauf — abwechselnd links/rechts. */
.nutzen-stack {
  display: flex; flex-direction: column; gap: 1.5rem;
  max-width: 620px; margin: 3em auto 0; text-align: left;
}
.nutzen-bubble { display: flex; gap: 0.9rem; align-items: flex-start; }
.nutzen-bubble:nth-child(even) { flex-direction: row-reverse; }
.nutzen-nr {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  background: var(--c-primary); font-family: var(--font-display); font-size: 1.05rem;
  color: var(--c-yellow); margin-top: 0.2em;
}
.nutzen-bubble-body {
  background: var(--c-white); border-radius: 20px; padding: 1.25rem 1.5rem;
  box-shadow: 0 4px 20px rgba(7,38,55,0.08); flex: 1;
}
.nutzen-bubble:nth-child(even) .nutzen-bubble-body { background: var(--c-grey-light); }
.nutzen-bubble-body h3 { font-size: 1.15rem; margin: 0 0 0.5em; line-height: 1.3; }
.nutzen-bullets { padding-left: 1.1em; margin: 0 0 0.9em; }
.nutzen-bullets li { list-style: disc; margin-bottom: 0.35em; font-size: 0.92rem; line-height: 1.4; }
.nutzen-bubble-body .cta--ghost { font-size: 0.85rem; }

/* ---------- 9. RECHNER — vollständig eingebettet ---------- */
.rechner-section { background: var(--c-white); padding: var(--section-y) var(--space); text-align: center; }
.rechner-section h2 { font-size: var(--fs-h2); }
.rechner-section .lede { max-width: 56ch; margin-left: auto; margin-right: auto; color: var(--c-grey-med); }

.rechner-card {
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: 16px; overflow: hidden;
  max-width: 980px; margin: 2.5em auto 0; text-align: left; box-shadow: 0 8px 32px rgba(7,38,55,0.08);
}
.rechner-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 780px) { .rechner-grid { grid-template-columns: 1.1fr 0.9fr; } }

.rechner-inputs { padding: clamp(20px, 4vw, 32px); border-bottom: 1px solid var(--c-line); }
@media (min-width: 780px) { .rechner-inputs { border-bottom: none; border-right: 1px solid var(--c-line); } }
.rechner-field { margin-bottom: 24px; }
.rechner-field:last-child { margin-bottom: 0; }
.rechner-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 600; margin-bottom: 4px; }
.rechner-hint { font-size: 12.5px; color: var(--c-grey-med); margin-bottom: 10px; }

.rechner-numwrap { color: var(--c-secondary); font-weight: 700; white-space: nowrap; }
.rechner-numval {
  font: inherit; color: var(--c-secondary); font-weight: 700; width: 3.5ch; text-align: right;
  border: none; border-bottom: 1.5px dashed var(--c-yellow); background: transparent; padding: 0 1px;
}
.rechner-numval::-webkit-outer-spin-button, .rechner-numval::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rechner-numval:focus { outline: none; border-bottom-color: var(--c-secondary); background: var(--c-blue-tint); }
.rechner-numunit { color: var(--c-secondary); font-weight: 700; }

/* Trefferflaeche 44px hoch (Fix 09.08): Das Eingabefeld war nur 6px hoch und damit auf dem
   Handy kaum zu greifen. Die sichtbare Schiene bleibt duenn — sie liegt jetzt auf den
   Track-Pseudoelementen statt auf dem Feld selbst, das Feld ist nur die Trefferflaeche. */
.rechner-section input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px;
  background: transparent; outline: none; margin: 0; cursor: pointer;
}
.rechner-section input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--c-yellow) var(--fill, 50%), var(--c-line) var(--fill, 50%));
}
.rechner-section input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--c-yellow) var(--fill, 50%), var(--c-line) var(--fill, 50%));
}
.rechner-section input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--c-primary);
  border: 3px solid var(--c-yellow); cursor: pointer;
  margin-top: -10px;   /* Griff mittig auf der 6px-Schiene */
}
.rechner-section input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: var(--c-primary);
  border: 3px solid var(--c-yellow); cursor: pointer;
}

.rechner-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.rechner-seg button {
  flex: 1; min-width: 84px; padding: 11px 8px; border: 1.5px solid var(--c-line); background: #fff;
  border-radius: 10px; font: inherit; font-size: 0.92rem; font-weight: 600; color: var(--c-text); cursor: pointer;
}
.rechner-seg button[aria-pressed="true"] { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
.rechner-seg--roof button { min-width: 104px; font-size: 0.86rem; }
.rechner-seg--roof small { display: block; font-weight: 400; opacity: 0.75; font-size: 0.78em; margin-top: 2px; }

.rechner-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; font-weight: 600; }
.rechner-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.rechner-track { width: 52px; height: 30px; border-radius: 15px; background: var(--c-line); position: relative; flex-shrink: 0; transition: background var(--dur-fast) var(--ease); }
.rechner-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform var(--dur-fast) var(--ease); }
.rechner-toggle input:checked + .rechner-track { background: var(--c-green); }
.rechner-toggle input:checked + .rechner-track .rechner-knob { transform: translateX(22px); }
.rechner-subrow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.rechner-heat-note { background: var(--c-grey-light); border: 1px dashed var(--c-line); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--c-grey-med); margin-top: 10px; }

.rechner-result { padding: clamp(20px, 4vw, 32px); background: var(--c-primary); color: var(--c-white); display: flex; flex-direction: column; }
.rechner-result .eyebrow { color: var(--c-yellow); }
.rechner-big { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 8vw, 3.4rem); color: var(--c-yellow); line-height: 1; margin: 0.15em 0 0.05em; font-variant-numeric: tabular-nums; }
.rechner-big small { font-size: 0.34em; color: var(--c-white); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.02em; }
.rechner-peryear { color: rgba(255,255,255,0.72); font-size: 15px; margin-bottom: 18px; }
.rechner-rows { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 4px; }
.rechner-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.15); font-size: 14.5px; }
.rechner-row span:first-child { color: rgba(255,255,255,0.72); }
.rechner-row span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
/* Feedback 09.08: Die zwei Zeilen "Stromkosten gespart" / "Einspeisung ins Netz" waren
   eingerueckt und in kleinerer, blasserer Schrift — sie sollen exakt wie die anderen
   Zeilen aussehen und links buendig auf derselben Kante stehen. */
.rechner-row--sub span:first-child { padding-left: 0; font-size: inherit; opacity: 1; }
.rechner-verdict { margin: 16px 0 4px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; display: flex; gap: 9px; align-items: flex-start; }
.rechner-verdict.good { background: rgba(101,167,68,0.22); color: #BFE3AC; }
.rechner-verdict.warn { background: rgba(19,114,173,0.16); color: var(--c-yellow); }
.rechner-result .cta { display: block; text-align: center; margin-top: 16px; }
.rechner-disc { font-size: 11.5px; color: var(--c-grey-med); margin-top: 18px; line-height: 1.55; }
/* Feedback 09.08: Der Satz sah aus wie Kleingedrucktes aus den AGB und klebte links —
   Ursache war die geerbte Textbreite (max-width: 62ch) ohne zentrierende Raender.
   Jetzt ein ruhiges, mittiges Infofeld in Hellblau (CD: Infoboxen = Light Blue Tint). */
.rechner-foot {
  max-width: 640px; margin: 28px auto 0; padding: 1em 1.5em;
  background: var(--c-blue-tint); border-radius: 12px;
  color: var(--c-text); font-size: 0.95rem; text-align: center;
}

/* ---------- 10. LEISTUNGEN ---------- */
.leistungen { background: var(--c-grey-light); padding: var(--section-y) var(--space); }
.leistungen h2 { font-size: var(--fs-h2); text-align: center; }
/* Bild über dem Text, als Karten-Raster — nicht mehr nebeneinander. */
.leistungen-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space);
  max-width: 720px; margin: 3em auto 0;
}
@media (min-width: 620px) {
  .leistungen-grid { grid-template-columns: 1fr 1fr; max-width: var(--wrap-narrow); }
}
.leistung-detail {
  background: var(--c-white); border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(7,38,55,0.07); text-align: left;
}
.leistung-detail-media .img-placeholder { aspect-ratio: 4/3; border-radius: 0; min-height: 0; }
/* height: auto ist Pflicht — die Bilder tragen ein height-Attribut (gegen Layout-Spruenge),
   eine gesetzte Hoehe wuerde aspect-ratio schlagen. Gleiche Falle wie beim Referenz-Band. */
.leistung-detail-media img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--c-grey-light); }
/* Der Zoom-Knopf wird per JS um das Bild gelegt — er darf optisch nichts veraendern,
   nur den Mauszeiger und den Fokusring beisteuern. */
.media-zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; font: inherit; color: inherit; text-align: inherit;
}
.leistung-detail-text { padding: 1.5rem; }
.leistung-detail-text h3 { font-size: 1.25rem; margin-bottom: 0.4em; }
.leistung-detail-text p { font-size: 0.95rem; margin-bottom: 0; }

/* PV-Karte: einzige Leistung mit Zweitabsatz (PVT), Stichpunkten und zwei Buttons (09.08.2026).
   Der zweite Button fuehrt nach draussen zu Sunmaxx, deshalb duerfen beide umbrechen
   statt nebeneinander gequetscht zu werden. */
.leistung-sub { margin-top: 0.9em; }
.leistung-bullets { padding-left: 1.1em; margin: 0.8em 0 0; }
.leistung-bullets li { list-style: disc; margin-bottom: 0.35em; font-size: 0.92rem; line-height: 1.4; }
.leistung-actions { display: flex; flex-wrap: wrap; gap: 0.6em 1.1em; margin-top: 0.9em; }

/* ---------- 11. SPEICHER-SEKTION: ergänzender Text ---------- */
.batterie-fakten { max-width: var(--wrap-narrow); margin: 2em auto 0; text-align: center; }

/* ---------- 12. REFERENZEN — Vorher/Nachher + Galerie + Stimmen ---------- */
.referenzen { background: var(--c-white); padding: var(--section-y) var(--space); text-align: center; }
.referenzen h2 { font-size: var(--fs-h2); }
.referenzen-lede { max-width: var(--wrap-narrow); margin: 0 auto 2.5em; color: var(--c-grey-med); }

/* ---------- Referenz-Band ("Skilift") ----------
   Laeuft von selbst wie das Hersteller-Marquee, laesst sich per Tempo-Knopf steuern und
   jedes Bild oeffnet per Klick gross. Volle Breite, damit das Band randlos durchlaeuft. */
.lift {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding: 0.5rem 0 1.25rem;
}
/* Weiche Kanten links/rechts, damit die Karten am Rand nicht hart abgeschnitten wirken */
.lift::before, .lift::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(24px, 8vw, 120px);
  z-index: 3; pointer-events: none;
}
.lift::before { left: 0;  background: linear-gradient(90deg, var(--c-white), transparent); }
.lift::after  { right: 0; background: linear-gradient(270deg, var(--c-white), transparent); }

.lift-hinweis {
  max-width: var(--wrap-narrow); margin: 0 auto 1.5em;
  color: var(--c-grey-med); font-size: 0.85rem; text-align: center;
}

/* ---------- Karussell als drehbares Rad (13.08.2026, Wunsch Joshua) ----------
   Die Karten stehen auf einem Kreis: jede wird um ihren Winkel gedreht und um den
   Radius nach vorn geschoben. Gedreht wird die ganze Spur, nicht die einzelne Karte.
   touch-action: pan-y ist entscheidend — damit bleibt vertikales Scrollen der Seite
   dem Browser ueberlassen und nur die waagrechte Geste dreht das Rad. */
/* 1600 statt 1200: flachere Perspektive, das Rad draengt sich weniger auf.
   touch-action: none (13.08.2026): Mit pan-y riss der Browser die Geste an sich, sobald
   der Finger auch nur leicht schraeg lief — die Seite sprang dann nach oben, mitten im
   Drehen. Jetzt gehoert jede Geste auf dem Rad dem Rad. Bewusster Preis: ueber diesem
   rund 250 px hohen Streifen laesst sich die Seite nicht mit dem Finger weiterscrollen,
   daneben und darunter selbstverstaendlich schon.
   -webkit-user-drag: none: sonst startet der Browser auf dem Desktop sein eigenes
   Bild-Ziehen, sobald man eine Karte anfasst — dann liess sich das Rad gar nicht drehen. */
.lift--wheel { perspective: 1600px; touch-action: none; cursor: grab; user-select: none; }
.lift--wheel img { -webkit-user-drag: none; user-select: none; }
.lift--wheel.is-dragging { cursor: grabbing; }
/* Keine CSS-Ueberblendung auf der Spur: die Drehung laeuft Bild fuer Bild ueber
   requestAnimationFrame. Eine Transition wuerde jede Einzelbewegung nachtraeglich
   glaetten und genau das Stocken erzeugen, das beim Ziehen zu spueren war. */
.lift--wheel .lift-track {
  position: relative; width: 100%; transform-style: preserve-3d;
}
.lift--wheel .lift-item {
  position: absolute; top: 0; left: 50%;
  transition: opacity 320ms var(--ease), filter 320ms var(--ease);
  backface-visibility: hidden;
}
/* Karten auf der Rueckseite des Rades: unsichtbar und nicht anklickbar, sonst faengt
   eine unsichtbare Karte den Klick des Nutzers ab. */
.lift--wheel .lift-item[data-hinten="ja"] { opacity: 0; pointer-events: none; }
/* Seitliche Karten treten in Sunvision-Blau zurueck, die vordere steht klar da.
   Der Schleier ist ein Farbverlauf im Primaerblau statt einem grauen Abdunkeln —
   so bleibt das Rad in der Marke, statt einfach nur dunkler zu werden. */
.lift--wheel .lift-item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(7,38,55,0.55), rgba(19,114,173,0.45));
  opacity: 0; transition: opacity 320ms var(--ease); pointer-events: none;
}
.lift--wheel .lift-item[data-seite="ja"]::after { opacity: 0.55; }
.lift--wheel .lift-item[data-vorn="ja"] {
  box-shadow: 0 10px 34px rgba(7,38,55,0.22), 0 0 0 2px var(--c-secondary);
}

.lift-item {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  width: clamp(180px, 44vw, 260px);
  padding: 0; border: none; background: var(--c-white); cursor: pointer;
  border-radius: 14px; overflow: hidden; text-align: left;
  box-shadow: 0 2px 16px rgba(7,38,55,0.10);
}
/* height: auto ist Pflicht — die Bilder tragen ein height-Attribut (gegen Layout-Spruenge),
   und eine gesetzte Hoehe schlaegt aspect-ratio. Ohne das blieben die Kacheln ueber 1500px hoch. */
.lift-item img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--c-grey-light); }

/* 09.08.2026: Die Beschriftung war auf zwei Zeilen begrenzt und wurde auf dem Handy
   abgeschnitten. Die Begrenzung ist raus, gleich hohe Karten macht das Flex-Layout. */
.lift-cap {
  flex: 1 1 auto;
  display: block; overflow: visible;
  padding: 0.6em 0.8em; font-size: 0.78rem; line-height: 1.35;
  overflow-wrap: break-word;
  color: var(--c-text); background: var(--c-white);
}

/* Ohne Rad (prefers-reduced-motion oder kein JS): normaler Streifen zum Wischen. */
.lift--flach { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; }
.lift--flach::-webkit-scrollbar { display: none; }
.lift--flach .lift-track { display: flex; align-items: stretch; gap: clamp(0.75rem, 2vw, 1.25rem); width: max-content; padding: 0 clamp(1rem, 6vw, 90px); }
.lift--flach .lift-item { scroll-snap-align: center; }

/* ---------- Grossansicht ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(7,38,55,0.92);
}
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 0.75rem; }
.lightbox-figure img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  object-fit: contain; margin: 0 auto;
  /* 09.08.2026: von 8px auf 18px erhoeht. Bei 8px wirkte die Grossansicht auf einem
     1100px breiten Bild noch scharfkantig — der dunkle Grund soll sichtbar in die
     Ecken schneiden. Rundung an allen vier Ecken, nicht nur oben: einseitig gerundet
     sieht nach Fehler aus, nicht nach Absicht. */
  border-radius: 18px;
}
.lightbox-figure figcaption { color: var(--c-white); font-size: 0.9rem; text-align: center; }
.lightbox-close {
  position: absolute; top: clamp(0.5rem, 2vw, 1.25rem); right: clamp(0.5rem, 2vw, 1.25rem);
  width: 44px; height: 44px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--c-white); color: var(--c-primary); font-size: 1.6rem; line-height: 1;
}

/* Blaetter-Pfeile in der Grossansicht. Auf dem Handy sitzen sie bewusst tiefer und
   kleiner — dort blaettert man ohnehin per Wischen, die Pfeile sind nur der sichtbare
   Hinweis darauf, dass es weitergeht. */
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255,255,255,0.9); color: var(--c-primary);
  font-size: 2rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease);
}
.lightbox-nav:hover { background: var(--c-white); }
.lightbox-prev { left: clamp(0.4rem, 2vw, 1.5rem); }
.lightbox-next { right: clamp(0.4rem, 2vw, 1.5rem); }
.lightbox-nav[hidden] { display: none; }
.lightbox-zaehler {
  margin: 0; color: rgba(255,255,255,0.7); font-size: 0.8rem; text-align: center;
  font-variant-numeric: tabular-nums; max-width: none;
}
@media (max-width: 560px) {
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.6rem; }
}
.prozess { background: var(--c-grey-light); padding: var(--section-y) var(--space); text-align: center; }
.prozess h2 { font-size: var(--fs-h2); }
.prozess-stack {
  display: flex; flex-direction: column;
  max-width: 620px; margin: 3em auto 0; text-align: left;
}
.prozess-step { display: flex; flex-direction: column; align-items: center; }
.prozess-bubble { display: flex; gap: 0.9rem; align-items: flex-start; width: 100%; }
.prozess-nr {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  background: var(--c-primary); font-family: var(--font-display); font-size: 1.05rem;
  color: var(--c-yellow); margin-top: 0.2em;
}
.prozess-bubble-body {
  background: var(--c-white); border-radius: 20px; padding: 1.25rem 1.5rem;
  box-shadow: 0 4px 20px rgba(7,38,55,0.08); flex: 1;
}
.prozess-bubble-body h3 { font-size: 1.15rem; margin: 0 0 0.4em; line-height: 1.3; }
.prozess-bubble-body p { font-size: 0.92rem; line-height: 1.5; margin: 0; }

/* Verbindungslinie zwischen zwei Blasen, mittig unter der Nummer. Startet unsichtbar
   (scaleY 0, oben verankert) und "slided" beim Reveal einmalig nach unten auf — kein
   fortlaufendes Scroll-Binding, nur eine einmalige Eintritts-Animation (CLAUDE.md 0.1). */
.prozess-connector {
  width: 2px; height: clamp(1.5rem, 4vw, 2.25rem); margin-left: 1.25rem;
  background: var(--c-yellow); opacity: 0.4;
  transform: scaleY(0); transform-origin: top;
  transition: transform 550ms var(--ease);
}
.prozess-step.is-visible .prozess-connector { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .prozess-connector { transform: scaleY(1); transition: none; }
}

/* ---------- 14. FÖRDERUNG-BOX ---------- */
/* Deutlich hervorgehoben — das ist der "das kostet euch weniger, als ihr denkt"-Moment.
   Animation (z.B. Zahlen-Count-Up beim Reinscrollen) kann als nächster Schritt ergänzt werden. */
.foerderung-box {
  max-width: 820px; background: var(--c-blue-tint); color: var(--c-text); border-radius: 28px;
  text-align: center; padding: clamp(3rem, 7vw, 5rem) var(--space); margin: var(--section-y) auto;
  box-shadow: 0 8px 32px rgba(7,38,55,0.10); border: 1px solid var(--c-secondary);
}
.foerderung-box h2 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.foerderung-box p { margin-left: auto; margin-right: auto; font-size: 1.05rem; }
.foerderung-box .eyebrow { color: var(--c-primary); font-size: 0.9rem; }
.foerderung-box .cta { background: var(--c-primary); color: var(--c-white); font-size: 1.1rem; padding: 1em 2em; }
.foerderung-box .cta:hover { background: var(--c-secondary); }

/* ---------- 15. FAQ ---------- */
.faq { background: var(--c-white); padding: var(--section-y) var(--space); text-align: center; }
.faq h2 { font-size: var(--fs-h2); }
.faq-list { max-width: var(--wrap-narrow); margin: 2.5em auto 0; text-align: left; }
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1em;
  background: none; border: none; cursor: pointer; text-align: left; font: inherit; font-weight: 600;
  color: var(--c-text); padding: 1.25em 0;
}
.faq-icon { flex-shrink: 0; font-size: 1.3rem; color: var(--c-secondary); transition: transform var(--dur-fast) var(--ease); }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease); }
.faq-item.is-open .faq-answer { max-height: 400px; }
.faq-answer p { padding-bottom: 1.25em; font-size: 0.95rem; }
.faq-outro { margin-top: 2em; font-style: italic; color: var(--c-grey-med); }

/* ---------- 16. BETRIEB / ÜBER FELIX ---------- */
.info-section {
  background: var(--c-grey-light); padding: var(--section-y) var(--space);
  display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); max-width: var(--wrap); margin: 0 auto;
}
@media (min-width: 860px) { .info-section { grid-template-columns: 1fr 1.2fr; align-items: center; } }
.info-media img, .info-media picture img { border-radius: 8px; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; }
.info-text h2 { font-size: var(--fs-h2); }

/* ---------- 17. VERSPRECHEN ---------- */
.versprechen { background: var(--c-primary); color: var(--c-white); text-align: center; padding: clamp(5rem, 16vh, 8rem) var(--space); }
.versprechen .eyebrow { color: var(--c-yellow); }
.versprechen-title { font-size: clamp(2.5rem, 8vw, 5rem); color: var(--c-white); }
.versprechen .cta { margin-top: 0.5em; background: var(--c-yellow); color: var(--c-text); }
.versprechen .cta:hover { background: var(--c-gold); }

/* ---------- 18. TERMINANFRAGE ---------- */
.anfrage { max-width: var(--wrap-narrow); margin: 0 auto; padding: var(--section-y) var(--space); text-align: center; background: var(--c-white); }
.anfrage h2 { font-size: var(--fs-h2); }

/* 13.08.2026: Telefon und WhatsApp stehen jetzt UNTEREINANDER statt nebeneinander
   (Wunsch Joshua) — mit der Vorzeile "Noch Fragen? Zoegert nicht:" darueber liest sich
   das als kurze Liste von Wegen, nicht als zwei konkurrierende Kacheln. */
.kontakt-lead { margin: 2em auto 0.8em; font-weight: 700; max-width: 320px; }
.kontakt-wege {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0.6em; margin: 0 auto 2em; max-width: 320px;
}
.kontakt-weg {
  display: flex; flex-direction: column; gap: 0.2em; padding: 1em 1.5em; border-radius: 6px;
  background: var(--c-white); border: 1px solid rgba(7,38,55,0.1); text-decoration: none; color: var(--c-text); min-width: 160px;
}
.kontakt-weg strong { color: var(--c-secondary); font-size: 0.9rem; }
.kontakt-weg span { font-size: 0.85rem; }
.kontakt-weg--platzhalter { opacity: 0.6; font-style: italic; }

/* Aufklappbare Nummernwahl (18.08.2026). Sieht aus wie die Nachbarkarte, ist aber ein
   <details> — deshalb hier der Aufwand, den Standard-Pfeil des Browsers zu entfernen
   und den Zusammenklapp-Zustand sauber zu gestalten. */
.kontakt-wahl { padding: 0; cursor: pointer; }
.kontakt-wahl > summary {
  display: flex; flex-direction: column; gap: 0.2em;
  padding: 1em 1.5em; list-style: none; cursor: pointer;
}
.kontakt-wahl > summary::-webkit-details-marker { display: none; }
.kontakt-wahl > summary::after {
  content: "▾"; position: absolute; right: 1.1em; top: 1em;
  color: var(--c-secondary); transition: transform var(--dur-fast) var(--ease);
}
.kontakt-wahl { position: relative; }
.kontakt-wahl[open] > summary::after { transform: rotate(180deg); }
.kontakt-wahl > summary strong { color: var(--c-secondary); font-size: 0.9rem; }
.kontakt-wahl > summary span { font-size: 0.85rem; }
.kontakt-wahl > a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75em;
  padding: 0.75em 1.5em; border-top: 1px solid var(--c-line);
  text-decoration: none; color: var(--c-text); font-weight: 600;
  min-height: 44px;                          /* verlaessliche Tippflaeche */
}
.kontakt-wahl > a:hover { background: var(--c-blue-tint); }
.kontakt-wahl > a em { font-style: normal; font-weight: 400; font-size: 0.8rem; color: var(--c-grey-med); }

.form-progress { display: flex; gap: 0.5em; margin-bottom: 2em; }
.form-progress-step { flex: 1; height: 4px; border-radius: 2px; background: rgba(7,38,55,0.12); }
.form-progress-step.is-active, .form-progress-step.is-done { background: var(--c-yellow); }
.form-step { display: none; text-align: left; }
.form-step.is-active { display: block; }
.form-step h3 { font-size: var(--fs-h3); text-align: center; }
/* 13.08.2026, Wunsch Joshua: fest zwei Spalten (statt auto-fit, das je nach Breite auch
   mal vier nebeneinander stellte), flacher, und in Sprechblasen-Form wie im Messenger.
   Die Blasen sind rechts angeschlagen — der Nutzer "antwortet" ja, deshalb die abgeflachte
   Ecke unten rechts, genau wie bei einer gesendeten Nachricht. */
.form-step-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; margin: 1.5em 0; }
.form-step-option {
  position: relative;                          /* Anker fuer das Logo unten links */
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; padding: 0.5em 0.9em 0.5em 2.1em;   /* links Platz fuers Logo */
  border: 1.5px solid var(--c-line); background: var(--c-white);
  border-radius: 16px 16px 4px 16px;           /* Sprechblase, Ecke unten rechts angeschlagen */
  font-weight: 600; font-size: 0.9rem; line-height: 1.25; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.form-step-option input { position: absolute; opacity: 0; pointer-events: none; }
.form-step-option:has(input:checked) { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }

/* Kleines Sunvision-Zeichen unten links in jeder Blase (13.08.2026, Wunsch Joshua).
   Es sitzt auf einer weissen Scheibe — sonst verschwindet der dunkle Ring des Logos,
   sobald die Blase ausgewaehlt und damit dunkelblau wird. So bleibt es in beiden
   Zustaenden lesbar. Rein dekorativ, deshalb aria-hidden im HTML. */
.option-logo {
  position: absolute; left: 0.45em; bottom: 0.4em;
  width: 18px; height: auto;
  background: var(--c-white); border-radius: 50%; padding: 1px;
  pointer-events: none;
}
.form-field { margin-bottom: 1.25em; }
.form-field label { display: block; font-weight: 600; margin-bottom: 0.4em; font-size: 0.9rem; }
.form-field input, .form-field textarea {
  width: 100%; padding: 0.75em; border: 1px solid var(--c-line); border-radius: 4px; font: inherit; background: var(--c-white);
}
.form-hint { font-size: 0.85rem; color: var(--c-grey-med); margin-top: 1em; }
.form-nav { display: flex; justify-content: space-between; gap: 1em; margin-top: 1.5em; }
.form-nav .btn-back { background: none; border: none; color: var(--c-secondary); font-weight: 600; cursor: pointer; padding: 0.9em 0; }

/* ---------- 19. FOOTER ---------- */
/* 18.08.2026: Der Footer war zentriert — aber nur scheinbar. Die <p>-Elemente
   (Marke, Claim, Copyright) erben die globale Regel p { max-width: 62ch } ohne
   automatische Seitenraender. Ihre Textkaesten begannen also links und waren
   unterschiedlich breit, wodurch jede Zeile an einer anderen Stelle "zentriert"
   wurde: Marke bei x=366, Claim bei 336, Copyright bei 274, Adresse und Nav
   dagegen bei 640. Deshalb sah nichts untereinander aus.
   Jetzt sind alle Zeilen linksbuendig an derselben Kante — eine Spalte. */
#site-footer { background: var(--c-primary); color: var(--c-white); text-align: center; padding: var(--section-y) var(--space) 6rem; }
/* max-width: none ist hier der Kern: ohne das erben Marke, Claim und Copyright die
   globale Regel p { max-width: 62ch }. Ihre Textkaesten waeren dann unterschiedlich
   breit und linksbuendig — jede Zeile wuerde an einer anderen Stelle "zentriert".
   Genau daran lag die schiefe Optik vorher. */
#site-footer p { max-width: none; margin-left: auto; margin-right: auto; }
.footer-logo { width: 64px; height: auto; display: block; margin: 0 auto 0.6em; }
.footer-brand { font-family: var(--font-display); font-size: 1.5rem; color: var(--c-white); margin-bottom: 0.2em; }
.footer-claim { color: rgba(255,255,255,0.75); margin-bottom: 1.5em; }
#site-footer address { font-style: normal; margin-bottom: 1.5em; opacity: 0.85; }
#site-footer address a { color: var(--c-yellow); }
.copyright { font-size: 0.8rem; opacity: 0.6; }

/* ---------- Rechtsseiten (Impressum, Datenschutz) ----------
   Hatten bislang gar kein eigenes Regelwerk. Mit dem vollstaendigen Datenschutztext
   (13.08.2026) ist das eine sehr lange Leseseite geworden — ohne Innenabstand und
   Zeilenbreite waere sie auf dem Handy randlos und auf dem Desktop unlesbar breit. */
.legal-content {
  max-width: var(--wrap-narrow); margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) var(--space) var(--section-y);
}
.legal-content h1 { font-size: var(--fs-h2); }
.legal-content h2 { font-size: var(--fs-h3); margin-top: 2em; }
.legal-content p { max-width: none; }
.legal-content ul { margin: 0 0 1em; padding-left: 1.2em; }
.legal-content li { list-style: disc; margin-bottom: 0.5em; }
.legal-content a { overflow-wrap: break-word; }

.entwurf-hinweis {
  margin: 0; padding: 0.6em var(--space); text-align: center;
  background: var(--c-yellow); color: var(--c-text);
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; max-width: none;
}
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin-bottom: 2em; }
.footer-nav a { color: var(--c-white); text-decoration: none; }
.footer-nav a:hover { color: var(--c-yellow); }

/* ---------- 20. STICKY-CTA MOBIL ---------- */
.sticky-cta-mobile {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
  background: var(--c-white); border-top: 1px solid rgba(7,38,55,0.1); padding: 0.75em var(--space);
  gap: 0.75em; box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
}
@media (max-width: 859px) {
  .sticky-cta-mobile { display: flex; }
  #site-footer { padding-bottom: 6rem; }
}
.sticky-cta-phone, .sticky-cta-whatsapp {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 0.4em;          /* 44px = verlaessliche Tippflaeche */
  border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.82rem;
  white-space: nowrap;
}
.sticky-cta-phone { border: 1px solid var(--c-yellow); color: var(--c-text); }
/* WhatsApp bewusst im CD-Gruen (--c-green), nicht im WhatsApp-Markengruen #25D366:
   die Palette ist laut CLAUDE.md 4.1 Markenvorgabe und wird nicht eigenmaechtig erweitert. */
.sticky-cta-whatsapp { border: 1px solid var(--c-green); color: var(--c-green-dark); }
.sticky-cta-mobile .cta { flex: 1.3; text-align: center; padding-left: 0.6em; padding-right: 0.6em; }

#nav-sentinel { height: 1px; }

@keyframes scroll-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }