/* ============================================================================
   LM ENERGIEPROJEKTE — Rinteln / Weserbergland
   "Die Reise der Wärme": Wärmepumpe (Akt 1+2) und Photovoltaik (Akt 3).
   Palette: tiefes Anthrazit + Bernstein/Kupfer als Akzent, Cremeweiß.
   ========================================================================== */

:root {
  /* Farben */
  --ink:        #16130f;   /* tiefes warmes Anthrazit (Basis) */
  --ink-2:      #1e1a15;
  --ink-3:      #2a241d;
  --cream:      #f6efe4;   /* Cremeweiß */
  --cream-dim:  #d8cdba;
  --amber:      #e8973b;   /* Bernstein */
  --amber-lt:   #f5b869;
  --copper:     #c0632c;   /* Kupfer */
  --copper-dk:  #8f421a;

  /* Typo — Apple-Systemfont (SF Pro auf Apple-Geräten), sonst saubere Grotesk */
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, Arial, sans-serif;
  --serif:   "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bone:    #f3ede3;   /* helle Ebene (Förderung) */
  --bone-2:  #e9e1d3;
  --sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, Roboto, Arial, sans-serif;

  /* Maße */
  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1240px;
  --radius: 14px;

  color-scheme: dark;
}

/* --------------------------------------------------------- Reset / Basis */
* { box-sizing: border-box; }
/* Muss nach den Komponenten gewinnen: .btn setzt display:inline-flex und würde
   das hidden-Attribut sonst aushebeln (z. B. "Zurück" auf Wizard-Schritt 1). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.55vw + 0.9rem, 1.125rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--amber); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--amber-lt);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 200;
  background: var(--amber); color: var(--ink);
  padding: .7rem 1.1rem; border-radius: 8px; font-weight: 600;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

/* ------------------------------------------------------- Typografie utils */
.eyebrow {
  font-family: var(--sans);
  font-size: .92rem; font-weight: 600;
  letter-spacing: .04em;      /* normale Schreibweise statt Versalien */
  color: var(--amber);
  margin: 0 0 1rem;
}
.h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0 0 1.2rem;
  color: var(--cream);
}
.lead {
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  line-height: 1.55;
  color: var(--cream);
  margin: 0 0 1.25rem;
}
.body { color: var(--cream-dim); margin: 0 0 1.25rem; }

/* --------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; font-size: 1rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease, color .25s ease;
  will-change: transform;
}
.btn--primary {
  background: linear-gradient(180deg, var(--amber-lt), var(--copper));
  color: #241206;
  box-shadow: 0 10px 30px -10px rgba(232,151,59,.6);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(232,151,59,.75); }
.btn--ghost {
  border: 1.5px solid rgba(246,239,228,.35);
  color: var(--cream);
}
.btn--ghost:hover { border-color: var(--amber); color: var(--amber-lt); transform: translateY(-2px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; color: var(--amber-lt);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: gap .25s ease, border-color .25s ease;
}
.link-arrow::after { content: "→"; transition: transform .25s ease; }
.link-arrow:hover { border-color: var(--amber-lt); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ============================================================ FIXED STAGE */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #000;
  overflow: hidden;
}
.stage__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Kein filter() hier: das wäre ein Vollbild-Durchgang pro gescrubbtem Frame.
     Die Wärmekorrektur steckt bereits im Material. */
  /* auf eigene GPU-Ebene heben -> ruckelfreies Scrubben */
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* Akt-2-Video liegt über Akt 1 und wird sanft eingeblendet, sobald Akt 2 aktiv ist */
.stage__video--act2 {
  z-index: 1;
  opacity: 0;
  transition: opacity .6s ease;
  will-change: opacity;
}
.stage__video--act2.is-visible { opacity: 1; }
/* Akt 3 (Photovoltaik) liegt im DOM hinter Akt 2 -> malt bei gleichem z-index darüber */
.stage__video--act3 {
  z-index: 1;
  opacity: 0;
  transition: opacity .6s ease;
  will-change: opacity;
}
.stage__video--act3.is-visible { opacity: 1; }
/* Scrim: Grundverlauf für Lesbarkeit + steuerbare Verdunklung bei Textbeats */
.stage__scrim {
  position: absolute; inset: 0;
  z-index: 2;                 /* über beiden Videos (film2 = z-index 1) */
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(10,8,5,.35) 100%),
    linear-gradient(180deg, rgba(10,8,5,.30) 0%, transparent 22%, transparent 62%, rgba(10,8,5,.55) 100%);
  opacity: 1;
}
/* Dimm-Ebene: eigene GPU-Ebene, wird per reiner opacity animiert (kein Repaint) */
.stage__dim {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(8,6,4,1);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transform: translateZ(0);
}

/* --------------------------------------------------------------- Captions */
.caption {
  position: absolute;
  z-index: 3;                 /* über Videos und Scrim */
  left: 50%;
  top: 50%;                   /* vertikal zentriert — Apple-Keynote-Look */
  /* Zentrierung setzt GSAP (xPercent/yPercent). Ein CSS-translate hier
     wurde auf Mobil als Pixelwert eingelesen und doppelt angewendet. */
  width: min(92vw, 960px);
  text-align: center;
  opacity: 0;                 /* per JS-Scrub animiert */
  will-change: opacity, transform;
  pointer-events: none;
}
.caption__lead {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.1rem, 6.4vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.032em;   /* enges Apple-Tracking */
  margin: 0;
  color: var(--cream);
  /* kleiner Blur -> günstige Repaints beim Scrubben */
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.caption__sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  letter-spacing: -0.01em;
  color: var(--amber-lt);
  margin: 1.1rem 0 0;
  text-shadow: 0 1px 8px rgba(0,0,0,.65);
}

/* ------------------------------------------------------------- Glut-Canvas */
.stage__embers {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}

/* --------------------------------------------------------- Live-Thermometer */
.thermo {
  position: fixed; right: clamp(1rem, 3vw, 2.4rem); top: 50%;
  transform: translateY(-50%);
  z-index: 105;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
  --tc: rgb(120,170,255);
}
.thermo.is-on { opacity: 1; }
.thermo__val {
  font-family: var(--display); font-weight: 600; font-size: 1.15rem;
  color: var(--tc); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 12px rgba(0,0,0,.55); transition: color .1s linear;
  min-width: 3ch; text-align: center;
}
.thermo__track {
  position: relative; width: 6px; height: 42vh; max-height: 340px;
  border-radius: 999px; background: rgba(246,239,228,.12);
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(246,239,228,.06);
}
.thermo__fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(180deg, var(--tc), rgba(255,255,255,.25));
  border-radius: 999px;
  box-shadow: 0 0 16px 2px var(--tc);
  transition: box-shadow .1s linear;
}

/* --------------------------------------------------------------- 3D-Tilt */
.card, .step { transform-style: preserve-3d; }

/* ---------------------------------------------------------- Progress line */
.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 120;
  background: rgba(246,239,228,.08);
}
.progress span {
  /* scaleX statt width: läuft rein auf dem Compositor, löst also bei jedem
     Scroll-Event kein Layout mehr aus. */
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
  background: linear-gradient(90deg, var(--copper), var(--amber-lt));
  box-shadow: 0 0 12px rgba(232,151,59,.7);
}

/* ----------------------------------------------------------------- Topbar */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--pad);
  transition: background .4s ease, backdrop-filter .4s ease, padding .4s ease, transform .45s cubic-bezier(.16,.8,.3,1);
}
/* Nav blendet beim Runterscrollen aus, beim Hochscrollen wieder ein (Apple-Nav) */
.topbar.is-hidden { transform: translateY(-115%); }
.topbar.is-solid {
  background: rgba(18,15,11,.82);
  backdrop-filter: blur(9px);
  padding-top: .8rem; padding-bottom: .8rem;
  border-bottom: 1px solid rgba(246,239,228,.07);
}
.topbar__brand { display: inline-flex; align-items: center; gap: .6rem; }
.topbar__mark {
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--amber-lt), var(--copper) 70%);
  box-shadow: 0 0 14px rgba(232,151,59,.8);
  flex: none;
}
.topbar__name {
  font-family: var(--display); font-weight: 600; font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.topbar__nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.2rem); }
.topbar__nav a { font-weight: 500; font-size: .98rem; color: var(--cream); opacity: .9; transition: opacity .2s, color .2s; }
.topbar__nav a:hover { opacity: 1; color: var(--amber-lt); }
.topbar__cta {
  border: 1.5px solid rgba(246,239,228,.3);
  padding: .5rem 1.1rem; border-radius: 999px;
}
.topbar__cta:hover { border-color: var(--amber); }

/* ============================================================== SCROLLY   */
/* Höhe = Scroll-Distanz für die Timeline. Wird per JS gesetzt (--scrolly-vh). */
.scrolly {
  position: relative;
  z-index: 1;
  /* Reduced-Motion/No-JS: Höhe = gestapelte Standbilder (auto). */
}
/* Scrub aktiv: Standbilder aus, hohe Default-Höhe bis JS die exakte setzt. */
.js-scrub .scrolly { height: 700vh; }
.js-scrub .static-journey { display: none; }

/* Reduced-Motion / No-JS: gestapelte Standbilder mit Text */
.static-journey { position: relative; z-index: 2; }
.static-chapter {
  position: relative; margin: 0;
  min-height: 100vh; display: grid; place-items: center;
  overflow: hidden;
}
.static-chapter img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.static-chapter figcaption {
  position: relative; z-index: 2; text-align: center;
  padding: 2rem; width: min(90vw, 800px);
  background: radial-gradient(80% 120% at 50% 50%, rgba(8,6,4,.6), transparent 75%);
}
.static-chapter__lead {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2rem, 6vw, 4rem); line-height: 1.06; margin: 0;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
.static-chapter__sub { color: var(--amber-lt); font-weight: 500; margin: 1rem 0 0; }

/* ============================================================== INTERLUDE */
/* Ruhiger, deckender Beat zwischen den beiden Video-Akten — trennt Akt 1
   und Akt 2 sichtbar und versteckt den Video-Wechsel. */
.interlude {
  position: relative; z-index: 2;
  background: var(--ink);
  min-height: 62vh;
  display: grid; place-items: center;
  text-align: center;
  padding: clamp(4rem, 12vh, 9rem) var(--pad);
}
.interlude__inner { max-width: 820px; }
.interlude__line {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.8rem, 4.5vw, 3.4rem); line-height: 1.1;
  letter-spacing: -0.03em; margin: 0; color: var(--cream);
}

/* ============================================================== LANDING   */
.landing {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: grid; place-items: center;
  text-align: center;
  padding: 6rem var(--pad);
  /* Landung ist transparent: das (letzte) Video-Frame bleibt als Hintergrund sichtbar,
     zusätzlich ein warmer Verlauf für Lesbarkeit + Übergang zum Content. */
  background: linear-gradient(180deg,
      rgba(15,11,8,.35) 0%,
      rgba(15,11,8,.55) 45%,
      rgba(22,19,15,.92) 88%,
      var(--ink) 100%);
}
.landing__inner { max-width: 900px; }
.landing__eyebrow {
  font-size: .95rem; font-weight: 600; letter-spacing: .04em;
  color: var(--amber); margin: 0 0 1.5rem;
}
.landing__claim {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.038em;   /* enges Apple-Display-Tracking */
  margin: 0 0 2.5rem;
}
.landing__claim span { display: block; }
.landing__accent {
  background: linear-gradient(100deg, var(--amber-lt), var(--copper) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.landing__scrollhint {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream-dim); opacity: .7;
}
.landing__scrollhint::after {
  content: ""; display: block; width: 1px; height: 34px; margin: .7rem auto 0;
  background: linear-gradient(var(--amber-lt), transparent);
  animation: hint 2s ease-in-out infinite;
}
@keyframes hint { 0%,100% { opacity:.3; transform: scaleY(.6);} 50% { opacity:1; transform: scaleY(1);} }

/* ============================================================== CONTENT   */
.content {
  position: relative; z-index: 1;
  background: var(--ink);
}
.content > section { padding: clamp(4rem, 10vw, 9rem) var(--pad); }
/* Tonwerte werden pro Sektion gesetzt (tone-*), kein nth-child mehr */

.section-head { max-width: var(--maxw); margin: 0 auto 3.5rem; }

/* Intro / Betriebseinstieg */
.intro__grid, .feature__grid, .team__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.intro__grid { grid-template-columns: 0.85fr 1fr; }
.feature__grid { grid-template-columns: 1fr 1fr; }
.team__grid { grid-template-columns: 1fr 0.9fr; }

.stats {
  display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 2rem 0 0;
}
.stats div { margin: 0; }
.stats dt {
  font-family: var(--display); font-weight: 600; font-size: 2rem;
  color: var(--amber-lt); line-height: 1;
}
.stats dd { margin: .4rem 0 0; font-size: .9rem; letter-spacing: .04em; color: var(--cream-dim); }

/* ------------------------------------------------------------ Photo slots */
.photo-slot {
  position: relative;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(-45deg, rgba(232,151,59,.05) 0 14px, rgba(232,151,59,.02) 14px 28px),
    linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border: 1px dashed rgba(232,151,59,.35);
  display: grid; place-items: center;
  overflow: hidden;
  min-height: 220px;
}
.photo-slot::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 40%, rgba(232,151,59,.10), transparent 70%);
}
.photo-slot__tag {
  position: relative;
  font-size: .88rem; letter-spacing: .01em;
  color: var(--amber-lt); font-weight: 600;
  padding: .5rem .9rem; border-radius: 999px;
  background: rgba(10,8,5,.5); border: 1px solid rgba(232,151,59,.3);
}
.photo-slot--tall  { aspect-ratio: 4/5; }
.photo-slot--wide  { aspect-ratio: 4/3; }
.photo-slot--team  { aspect-ratio: 3/2; }
.photo-slot--card  { aspect-ratio: 3/2; border-radius: 0; border: none; min-height: 180px; }

/* -------------------------------------------- Foto-Rahmen mit Parallaxe */
.photo-frame {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-3);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
}
.photo-frame--tall { aspect-ratio: 4/5; }
.photo-frame--wide { aspect-ratio: 4/3; }
.photo-frame--team { aspect-ratio: 3/2; }
.photo-frame__img {
  position: absolute; left: 0; top: -9%;
  width: 100%; height: 118%;         /* Spielraum für die Parallaxe */
  object-fit: cover;
  will-change: transform;            /* nur 3 Bilder -> flüssige Parallaxe */
}
/* zarter warmer Schimmer über den Fotos, damit sie zur Palette passen */
.photo-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(22,19,15,.28) 100%);
}

/* --------------------------------------------------------------- Services */
.cards {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
}
.card {
  background: var(--ink-3);
  border: 1px solid rgba(246,239,228,.06);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .35s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(232,151,59,.4);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.7);
}
.card__media { aspect-ratio: 3/2; overflow: hidden; }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: 1.5rem 1.5rem 1.75rem; }
.card__title {
  font-family: var(--display); font-weight: 600; font-size: 1.5rem;
  margin: 0 0 .6rem; color: var(--cream);
}
.card__body p { margin: 0; color: var(--cream-dim); font-size: .98rem; }
/* letzte zwei Karten mittig */
.card:nth-child(4) { grid-column: 1 / 2; }
.card:nth-child(5) { grid-column: 2 / 3; }

/* ---------------------------------------------------------------- Feature */
.ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.ticks li {
  position: relative; padding: .55rem 0 .55rem 2rem;
  border-top: 1px solid rgba(246,239,228,.08);
  color: var(--cream);
}
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: .55rem;
  color: var(--ink); font-weight: 700; font-size: .8rem;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--amber-lt), var(--copper));
}

/* --------------------------------------------------------------- Contact */
.contact__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.contact__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.contact__card {
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border: 1px solid rgba(232,151,59,.25);
  border-radius: var(--radius);
  padding: 2rem;
}
.contact__cardtitle {
  font-family: var(--display); font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem;
}
.contact__details { font-style: normal; color: var(--cream-dim); line-height: 1.8; }
.contact__details a { color: var(--amber-lt); }
.contact__details a:hover { text-decoration: underline; }
.contact__hours { margin-top: 1rem; font-size: .9rem; opacity: .8; }

/* ----------------------------------------------------------------- Footer */
.footer {
  position: relative; z-index: 1;
  background: #100d0a;
  padding: clamp(3rem, 7vw, 5rem) var(--pad);
  border-top: 1px solid rgba(246,239,228,.07);
}
.footer__inner { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.footer__brand { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.footer__claim {
  font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 500; margin: 0 0 1.5rem; color: var(--cream);
}
.footer__meta { color: var(--cream-dim); margin: 0 0 1rem; font-size: .95rem; }
.footer__legal { margin: 0 0 1rem; }
.footer__legal a { color: var(--amber-lt); }
.footer__legal a:hover { text-decoration: underline; }
.footer__copy { color: rgba(216,205,186,.5); font-size: .85rem; margin: 0; }

/* ------------------------------------------------------- Reveal-Animation */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Wort-für-Wort-Maskenreveal auf Überschriften (Apple-Signature) */
.word {
  display: inline-block; overflow: hidden; vertical-align: top;
  /* Spielraum für Unterlängen (g, y, ß), damit die Maske nicht abschneidet */
  padding-bottom: 0.12em; margin-bottom: -0.12em;
}
/* kein dauerhaftes will-change (viele Wörter) — GSAP promotet während der Animation */
.word > span { display: inline-block; }

/* Foto-Clip-Wipe: bis GSAP übernimmt, von unten verdeckt */
.js-scrub .photo-frame { clip-path: inset(0 0 100% 0); }

/* ------------------------------------------------------ Partner-Laufband */
.marquee-sec { text-align: center; overflow: hidden; }
.marquee-sec__label {
  font-size: .95rem; font-weight: 600; letter-spacing: .03em;
  color: var(--cream-dim); margin: 0 0 2.2rem;
}
/* Läuft nur, solange das Band im Bild ist — spart eine Dauer-Animation. */
/* content-visibility entfernt: iOS springt beim Nachmessen der Sektion (Scroll-Anker) */
.marquee-sec { background: var(--ink); }
.marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: inline-flex; align-items: center; gap: 2.5rem;
  white-space: nowrap; will-change: transform;
  animation: marquee 40s linear infinite;
}
.marquee__track span {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.3rem, 2.8vw, 2.1rem); letter-spacing: -0.02em;
  color: var(--cream); opacity: .5;
}
.marquee__track span:nth-child(even) { color: var(--amber); opacity: .55; font-size: .7em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------- Förder-Band */
.content > section.foerderung {
  background:
    radial-gradient(65% 130% at 12% 35%, rgba(245,184,105,.30), transparent 55%),
    linear-gradient(115deg, #713718 0%, #4a2410 48%, #2a1810 100%);
  border-top: 1px solid rgba(232,151,59,.22);
  border-bottom: 1px solid rgba(232,151,59,.14);
}
.foerderung__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.foerderung__big { display: flex; flex-direction: column; }
.foerderung__upto {
  font-size: 1rem; letter-spacing: .02em;
  color: var(--amber-lt); margin-bottom: .3rem;
}
.foerderung__num {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(4.5rem, 13vw, 9.5rem); line-height: .88; letter-spacing: -0.045em;
}
.foerderung__num > span {
  background: linear-gradient(180deg, var(--amber-lt), var(--copper));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.foerderung__label { font-size: 1.15rem; color: var(--cream); margin-top: .8rem; max-width: 22ch; }
.foerderung__text .body { color: rgba(246,239,228,.9); }

/* --------------------------------------------------------------- Ablauf */
.steps {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--maxw);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.step {
  position: relative; padding: 2rem 1.6rem 2.2rem;
  border-radius: var(--radius);
  background: var(--ink-3); border: 1px solid rgba(246,239,228,.06);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s ease;
}
.step:hover { transform: translateY(-5px); border-color: rgba(232,151,59,.35); }
.step__num {
  font-family: var(--display); font-weight: 600; font-size: 1rem; color: #241206;
  background: linear-gradient(180deg, var(--amber-lt), var(--copper));
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 1.3rem;
  box-shadow: 0 8px 20px -8px rgba(232,151,59,.6);
}
.step__title { font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; margin: 0 0 .6rem; }
.step__text { margin: 0; color: var(--cream-dim); font-size: .95rem; }

/* ----------------------------------------------------- Karten-Feinschliff */
.card__title { position: relative; display: inline-block; }
.card__title::after {
  content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--amber-lt), var(--copper));
  transition: width .4s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card__title::after { width: 100%; }

/* --------------------------------------------------------- Kontaktformular */
.contact__form { margin-top: 1.8rem; display: grid; gap: 1rem; max-width: 540px; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field--split > div { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--cream-dim); }
.field__opt { font-weight: 400; opacity: .7; }
.contact__form input, .contact__form textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--cream);
  background: rgba(246,239,228,.04); border: 1px solid rgba(246,239,228,.14);
  border-radius: 10px; padding: .8rem .95rem; width: 100%; resize: vertical;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.contact__form input::placeholder, .contact__form textarea::placeholder { color: rgba(216,205,186,.4); }
.contact__form input:focus, .contact__form textarea:focus {
  outline: none; border-color: var(--amber);
  background: rgba(246,239,228,.06); box-shadow: 0 0 0 3px rgba(232,151,59,.15);
}
.contact__form .btn { justify-content: center; margin-top: .3rem; }
.contact__formnote { font-size: .85rem; color: var(--cream-dim); margin: .3rem 0 0; line-height: 1.5; }
.contact__formnote a { color: var(--amber-lt); }
.contact__formnote a:hover { text-decoration: underline; }

/* ============================================================ Responsive  */
@media (max-width: 820px) {
  .thermo { display: none; }   /* Seitliches Thermometer nur auf großen Screens */
}
@media (max-width: 900px) {
  .intro__grid, .feature__grid, .team__grid, .contact__inner,
  .foerderung__inner { grid-template-columns: 1fr; }
  .feature__media { order: -1; }
  .cards { grid-template-columns: 1fr 1fr; }
  .card:nth-child(4), .card:nth-child(5) { grid-column: auto; }
  .steps { grid-template-columns: 1fr 1fr; }
  .topbar__nav a:not(.topbar__cta) { display: none; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .field--split { grid-template-columns: 1fr; }
  .stats { gap: 1.5rem; }
  .topbar__name { font-size: 1rem; }
}

/* =========================================================== Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .landing__scrollhint::after { animation: none; }
  /* Stage-Video ausblenden, Standbild-Journey zeigt die Reise. */
  .stage { display: none; }
  .landing { background: linear-gradient(180deg, var(--ink-2), var(--ink)); }
  /* Laufband anhalten */
  .marquee__track { animation: none; transform: none; }
}

/* ############################################################################
   LM ENERGIEPROJEKTE — Erweiterungen
   ######################################################################### */

/* ------------------------------------------------------- Sekundärakzent */
:root {
  --sun:     #ffd27a;    /* Sonnengelb für Photovoltaik */
  --sun-dk:  #e0a53a;
}

/* Abschnittsköpfe zentriert (für die neuen, breiten Sektionen) */
.section-head--mitte { text-align: center; }
.section-head--mitte .lead { margin-left: auto; margin-right: auto; max-width: 62ch; }

/* ============================================================ LIVE-COUNTER */
.content > section.counter-sec {
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(245,184,105,.12), transparent 60%),
    var(--ink-2);
  border-top: 1px solid rgba(232,151,59,.14);
  border-bottom: 1px solid rgba(232,151,59,.10);
}
.counter__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}
/* Zwei-Kachel-Variante: die beiden Impact-Zahlen bekommen mehr Luft */
.counter__grid--zwei {
  grid-template-columns: repeat(2, 1fr);
  max-width: 1040px; gap: 1.5rem;
}
.counter__kachel {
  position: relative; overflow: hidden;
  padding: 2.25rem 2rem 2rem;
  border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(42,36,29,.9), rgba(30,26,21,.9));
  border: 1px solid rgba(246,239,228,.07);
}
.counter__kachel::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--copper), var(--amber-lt), transparent);
}
.counter__icon {
  display: block; font-size: 1.7rem; line-height: 1;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 14px rgba(245,184,105,.45));
}
.counter__zahl {
  margin: 0; display: flex; align-items: baseline; flex-wrap: wrap;
  column-gap: .1rem;
}
.counter__wert {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1;
  letter-spacing: -0.035em;
  color: var(--amber-lt);
  font-variant-numeric: tabular-nums;
}
/* Nachkommastellen laufen sichtbar mit -> der Zähler wirkt lebendig,
   drängt sich optisch aber nicht vor die eigentliche Zahl. */
.counter__dez {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1;
  color: rgba(245,184,105,.5);
  font-variant-numeric: tabular-nums;
}
.counter__einheit {
  font-size: 1rem; font-weight: 500; color: var(--cream-dim);
  margin-left: .45rem;
}
.counter__label {
  display: block; margin-top: 1rem;
  font-family: var(--display); font-size: 1.15rem; font-weight: 600;
  color: var(--cream); letter-spacing: -0.015em;
}
.counter__sub   { display: block; margin-top: .35rem; font-size: .88rem; color: rgba(216,205,186,.6); }
.counter__sub [data-counter-neben] { color: var(--cream-dim); font-variant-numeric: tabular-nums; }

.counter__live {
  max-width: var(--maxw); margin: 2rem auto 0; text-align: center;
  font-size: .92rem; color: var(--amber-lt); letter-spacing: .04em;
}
.counter__live:empty { display: none; }
.counter__live::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 8px; height: 8px; border-radius: 50%; margin-right: .6rem;
  background: var(--sun); box-shadow: 0 0 10px var(--sun);
  animation: livePuls 2.2s ease-in-out infinite;
}
@keyframes livePuls { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Aufklappbare Berechnungsgrundlage */
.counter__basis {
  max-width: 1040px; margin: 1.75rem auto 0;
  border-top: 1px solid rgba(246,239,228,.08);
  padding-top: 1.1rem;
}
.counter__basis summary {
  display: inline-flex; align-items: center; gap: .55rem;
  cursor: pointer; list-style: none;
  font-size: .88rem; font-weight: 600; color: var(--amber-lt);
  transition: color .2s ease;
}
.counter__basis summary::-webkit-details-marker { display: none; }
.counter__basis summary:hover { color: var(--sun); }
.counter__info {
  display: grid; place-items: center; flex: none;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: .72rem; font-weight: 700; font-style: italic;
}
.counter__basis ul {
  margin: 1rem 0 0; padding-left: 1.1rem;
  font-size: .88rem; color: var(--cream-dim); line-height: 1.7;
}
.counter__fussnote {
  max-width: 1040px; margin: 1.2rem auto 0;
  font-size: .78rem; line-height: 1.6; color: rgba(216,205,186,.45);
}

/* ========================================================= FACHPARTNER-KARTE */
.karte__buehne {
  position: relative;
  max-width: 980px; margin: 0 auto 2.5rem;
  border-radius: var(--radius);
  background:
    radial-gradient(60% 80% at 40% 45%, rgba(232,151,59,.10), transparent 70%),
    linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border: 1px solid rgba(246,239,228,.07);
  padding: clamp(1rem, 3vw, 2rem);
}
.karte__svg { width: 100%; height: auto; }

.karte__ringe circle {
  fill: none; stroke: rgba(232,151,59,.16); stroke-width: 1;
  stroke-dasharray: 5 7;
}
.karte__ringlabel {
  fill: rgba(232,151,59,.45); font-size: 13px; text-anchor: middle;
  font-family: var(--sans); letter-spacing: .1em;
}
.karte__linien line { stroke: rgba(232,151,59,.22); stroke-width: 1.1; }
.karte__gebiet circle { fill: rgba(216,205,186,.3); }
.karte__gebiet text {
  fill: rgba(216,205,186,.55); font-size: 15px; font-family: var(--sans);
}

.karte__pin { cursor: default; }
.karte__punkt {
  fill: var(--amber); stroke: #170f07; stroke-width: 2;
  transition: fill .25s ease, r .25s ease;
}
.karte__pin.is-zentrum .karte__punkt { fill: var(--sun); }
.karte__puls { fill: rgba(232,151,59,.16); transform-origin: center; }
.karte__pin.is-zentrum .karte__puls {
  fill: rgba(255,210,122,.14);
  animation: kartePuls 3s ease-in-out infinite;
}
@keyframes kartePuls {
  0%,100% { opacity: .35; transform: scale(.75); }
  50%     { opacity: .9;  transform: scale(1.15); }
}
.karte__ort {
  fill: var(--cream); font-size: 17px; font-weight: 600; text-anchor: middle;
  font-family: var(--display); letter-spacing: -0.01em;
  paint-order: stroke; stroke: rgba(12,9,6,.85); stroke-width: 4px;
}
.karte__pin.is-aktiv .karte__punkt { fill: var(--sun); r: 9; }
.karte__pin.is-aktiv .karte__puls  { fill: rgba(255,210,122,.3); }
.karte__pin:focus { outline: none; }
.karte__pin:focus-visible .karte__punkt { stroke: var(--sun); stroke-width: 3; }

.karte__liste {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--maxw);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .85rem;
}
.karte__leintrag > a, .karte__lself {
  display: block; position: relative;
  padding: 1.1rem 1.2rem; height: 100%;
  border-radius: 12px;
  background: var(--ink-3); border: 1px solid rgba(246,239,228,.07);
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.karte__leintrag > a:hover, .karte__leintrag.is-aktiv > a {
  border-color: rgba(232,151,59,.45); transform: translateY(-3px);
}
.karte__leintrag.is-zentrum .karte__lself {
  border-color: rgba(255,210,122,.35);
  background: linear-gradient(160deg, rgba(60,40,20,.7), var(--ink-3));
}
.karte__lname  { display: block; font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.karte__lrolle { display: block; font-size: .88rem; letter-spacing: .01em; color: var(--amber); margin-top: .25rem; }
.karte__lort   { display: block; font-size: .88rem; color: var(--cream-dim); margin-top: .45rem; }
.karte__lext   { position: absolute; top: 1rem; right: 1.1rem; color: var(--amber-lt); font-size: .9rem; }

/* ============================================================== REFERENZEN */
.refs {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;
}
.ref {
  margin: 0; padding: 2rem 1.75rem;
  border-radius: var(--radius);
  background: var(--ink-3); border: 1px solid rgba(246,239,228,.07);
  display: flex; flex-direction: column;
  transition: border-color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.ref:hover { border-color: rgba(232,151,59,.35); transform: translateY(-4px); }
.ref__sterne { color: var(--amber-lt); letter-spacing: .18em; font-size: 1.05rem; margin-bottom: 1rem; }
.ref__text {
  margin: 0 0 1.5rem; padding: 0; flex: 1;
  color: var(--cream); font-size: 1rem; line-height: 1.6;
}
.ref__quelle { border-top: 1px solid rgba(246,239,228,.08); padding-top: 1rem; }
.ref__name { display: block; font-weight: 600; color: var(--cream); }
.ref__meta { display: block; font-size: .84rem; color: var(--cream-dim); margin-top: .2rem; }

/* ============================================================== ZERTIFIKATE */
.zerts {
  list-style: none; margin: 2.5rem auto 0; padding: 0; max-width: var(--maxw);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem;
}
.zert {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 1.5rem 1.4rem; border-radius: 12px;
  background: rgba(246,239,228,.03); border: 1px solid rgba(246,239,228,.08);
}
.zert__siegel {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; margin-bottom: 1rem;
  background: linear-gradient(180deg, var(--amber-lt), var(--copper));
  position: relative; flex: none;
}
.zert__siegel::after {
  content: "✓"; position: absolute; inset: 0;
  display: grid; place-items: center; color: #241206; font-weight: 700; font-size: 1.1rem;
}
.zert__bild { width: 100%; max-width: 120px; height: auto; margin-bottom: 1rem; }
.zert__titel  { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.zert__detail { font-size: .86rem; color: var(--cream-dim); margin-top: .3rem; }

/* ================================================================== WIZARD */
.wizard-sec {
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(232,151,59,.10), transparent 60%),
    var(--ink-2);
}
.wz {
  max-width: 760px; margin: 0 auto;
  background: linear-gradient(165deg, var(--ink-3), var(--ink-2));
  border: 1px solid rgba(232,151,59,.2);
  border-radius: 18px;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.9);
}
.wz-kopf { margin-bottom: 1.75rem; }
.wz-fortschritt {
  height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(246,239,228,.09);
}
.wz-fortschritt span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--copper), var(--amber-lt), var(--sun));
  border-radius: 999px;
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.wz-zaehler {
  margin: .7rem 0 0; font-size: .88rem; letter-spacing: .01em;
  color: var(--amber);
}
.wz-koerper { transition: opacity .35s ease, transform .35s ease; }
.wz-koerper.is-neu { opacity: 0; transform: translateY(14px); }
.wz-koerper.is-fehler { animation: wzRuettel .4s ease; }
@keyframes wzRuettel {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.wz-titel {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem); letter-spacing: -0.025em;
  margin: 0 0 .5rem; color: var(--cream);
}
.wz-hinweis { margin: 0 0 1.6rem; color: var(--cream-dim); font-size: .95rem; }

.wz-feld { margin-bottom: 1.5rem; }
.wz-flabel {
  display: block; margin-bottom: .7rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--cream-dim);
}
.wz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.wz-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  padding: 1.05rem 1.1rem; text-align: left;
  font-family: var(--sans); font-size: 1rem; color: var(--cream);
  background: rgba(246,239,228,.04);
  border: 1.5px solid rgba(246,239,228,.12);
  border-radius: 12px; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.wz-opt:hover { border-color: rgba(232,151,59,.5); transform: translateY(-2px); }
.wz-opt.is-gewaehlt {
  border-color: var(--amber);
  background: linear-gradient(160deg, rgba(232,151,59,.18), rgba(232,151,59,.06));
  box-shadow: 0 0 0 3px rgba(232,151,59,.12);
}
.wz-ico {
  width: 26px; height: 26px; margin-bottom: .55rem; flex: none;
  fill: none; stroke: var(--amber-lt); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .2s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.wz-opt.is-gewaehlt .wz-ico { stroke: var(--sun); transform: scale(1.12); }
.wz-oplabel  { font-weight: 600; }
.wz-opdetail { font-size: .8rem; color: var(--cream-dim); }

.wz-inputwrap { position: relative; display: flex; align-items: center; }
.wz-input {
  font-family: var(--sans); font-size: 1rem; color: var(--cream);
  background: rgba(246,239,228,.04);
  border: 1.5px solid rgba(246,239,228,.14);
  border-radius: 10px; padding: .85rem 1rem; width: 100%; resize: vertical;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.wz-input::placeholder { color: rgba(216,205,186,.4); }
.wz-input:focus {
  outline: none; border-color: var(--amber);
  background: rgba(246,239,228,.06); box-shadow: 0 0 0 3px rgba(232,151,59,.15);
}
.wz-einheit {
  position: absolute; right: 1rem;
  font-size: .85rem; color: var(--cream-dim); pointer-events: none;
}
.wz-fehler { margin: 0 0 1rem; color: #ff9d7a; font-size: .9rem; }

.wz-fuss { display: flex; gap: 1rem; align-items: center; margin-top: 2rem; }
.wz-fuss .wz-weiter { margin-left: auto; }
.wz-fuss .btn:disabled { opacity: .6; cursor: default; }

.wz--danke { text-align: center; }
.wz-haken svg {
  width: 74px; height: 74px; margin: 0 auto 1.5rem; display: block;
  fill: none; stroke: var(--amber-lt); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}
.wz-haken circle {
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: hakenKreis .6s cubic-bezier(.2,.7,.2,1) forwards;
}
.wz-haken path {
  stroke: var(--sun);
  stroke-dasharray: 36; stroke-dashoffset: 36;
  animation: hakenPfad .35s cubic-bezier(.2,.7,.2,1) .5s forwards;
}
@keyframes hakenKreis { to { stroke-dashoffset: 0; } }
@keyframes hakenPfad  { to { stroke-dashoffset: 0; } }

/* ====================================================== WÄRMEFLUSS-GRAFIK */
.flow-sec { background: var(--ink); }
.flow__buehne {
  max-width: 1000px; margin: 0 auto;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(20,16,12,.6), rgba(12,9,6,.9));
  border: 1px solid rgba(232,151,59,.15);
  padding: clamp(1rem, 3vw, 2rem);
}
.flow__svg { width: 100%; height: auto; }
.flow__haus   { fill: none; stroke: rgba(246,239,228,.22); stroke-width: 2; }
.flow__boden  { fill: rgba(232,151,59,.05); stroke: rgba(232,151,59,.3); stroke-width: 1.5; }
.flow__pumpe  { fill: rgba(246,239,228,.06); stroke: rgba(246,239,228,.35); stroke-width: 2; }
.flow__rohr   { fill: none; stroke: rgba(232,151,59,.18); stroke-width: 7; stroke-linecap: round; }
.flow__strom  {
  fill: none; stroke: var(--amber-lt); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 26 34;
  filter: drop-shadow(0 0 6px rgba(245,184,105,.8));
  animation: flowLauf 2.6s linear infinite;
}
@keyframes flowLauf { to { stroke-dashoffset: -60; } }
.flow__welle {
  fill: none; stroke: var(--sun); stroke-width: 2.4; stroke-linecap: round;
  opacity: 0; transform-origin: center bottom;
  animation: flowWelle 3.4s ease-out infinite;
}
@keyframes flowWelle {
  0%   { opacity: 0;  transform: translateY(0) scaleX(.9); }
  25%  { opacity: .85; }
  100% { opacity: 0;  transform: translateY(-92px) scaleX(1.25); }
}
.flow__label {
  fill: var(--cream-dim); font-size: 15px; font-family: var(--sans);
  letter-spacing: .06em;
}
.flow__legende {
  max-width: 1000px; margin: 1.75rem auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem;
}
.flow__punkt { display: flex; gap: .8rem; align-items: flex-start; }
.flow__nr {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 700; color: #241206;
  background: linear-gradient(180deg, var(--amber-lt), var(--copper));
}
.flow__ptext { margin: 0; font-size: .92rem; color: var(--cream-dim); }
.flow__ptext strong { color: var(--cream); font-weight: 600; display: block; }

/* ============================================================== ÜBER MICH */
.ueber__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 0.8fr 1fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.ueber__signatur {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(246,239,228,.1);
}
.ueber__name {
  font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--cream);
  display: block;
}
.ueber__rolle { font-size: .88rem; color: var(--amber); letter-spacing: .06em; }

/* ============================================================ SUBPAGE-HERO */
.subhero {
  position: relative; z-index: 1;
  min-height: 78vh; display: grid; align-items: end;
  padding: 8rem var(--pad) clamp(3rem, 8vw, 6rem);
  overflow: hidden;
}
.subhero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.subhero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,9,6,.72) 0%, rgba(12,9,6,.45) 40%, rgba(22,19,15,.94) 92%, var(--ink) 100%);
}
.subhero__inner { max-width: var(--maxw); margin: 0 auto; width: 100%; }
.subhero__titel {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1.02; letter-spacing: -0.04em;
  margin: 0 0 1.25rem;
}
.subhero__lead { max-width: 60ch; }
.subhero__aktionen { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* Textseiten (Impressum, Datenschutz) */
.rechtstext { max-width: 760px; margin: 0 auto; }
.rechtstext h2 { font-family: var(--display); font-size: 1.5rem; font-weight: 600; margin: 2.5rem 0 .8rem; }
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext p, .rechtstext li { color: var(--cream-dim); }
.rechtstext a { color: var(--amber-lt); }
.rechtstext a:hover { text-decoration: underline; }
.rechtstext ul { padding-left: 1.2rem; }
.hinweisbox {
  margin: 2rem 0; padding: 1.25rem 1.4rem;
  border-radius: 12px;
  background: rgba(232,151,59,.08); border: 1px solid rgba(232,151,59,.3);
  font-size: .92rem; color: var(--cream);
}

/* ================================================= Responsive Ergänzungen */
@media (max-width: 900px) {
  .counter__grid, .counter__grid--zwei { grid-template-columns: 1fr 1fr; }
  .ueber__grid { grid-template-columns: 1fr; }
  .ueber__media { order: -1; }
}
@media (max-width: 560px) {
  .counter__grid, .counter__grid--zwei { grid-template-columns: 1fr; }
  .wz-opts { grid-template-columns: 1fr; }
  .wz-fuss { flex-direction: column-reverse; align-items: stretch; }
  .wz-fuss .wz-weiter { margin-left: 0; }
  .wz-fuss .btn { justify-content: center; }
  .karte__ort { font-size: 22px; }
  .karte__gebiet text { font-size: 19px; }
  .karte__ringlabel { font-size: 17px; }
}

/* ====================================================== Reduced motion neu */
@media (prefers-reduced-motion: reduce) {
  .flow__strom, .flow__welle, .karte__pin.is-zentrum .karte__puls,
  .counter__live::before { animation: none; }
  .counter__wert.is-tick { animation: none; }
  .wz-koerper { transition: none; }
  .wz-haken circle, .wz-haken path { animation: none; stroke-dashoffset: 0; }
}

/* ############################################################################
   RUNDE 2 — Feedback Lukas (Sept. 2026)
   Intro-Zoom, schnellere Reise, Sonnenstrahl, PV-Schema, Logo, Marken,
   Karte, Telefon.
   ######################################################################### */

/* ---------------------------------------------------------- Logo / Topbar */
.topbar__brand { gap: .75rem; }
.topbar__logo {
  display: block; width: auto;
  height: clamp(40px, 3.6vw, 54px);   /* deutlich prominenter als vorher */
  max-width: min(46vw, 320px); object-fit: contain;
}
.topbar.is-solid .topbar__logo { height: clamp(34px, 3vw, 44px); }
.topbar__wortmarke { display: inline-flex; align-items: center; gap: .7rem; }
.has-logo .topbar__wortmarke { display: none; }   /* Logo geladen -> Wortmarke weg */
.topbar__mark { width: 22px; height: 22px; box-shadow: 0 0 18px rgba(232,151,59,.85); }
.topbar__name { font-size: clamp(1.25rem, 1.6vw, 1.55rem); font-weight: 700; letter-spacing: -0.025em; }
.footer__brand .topbar__logo { height: 48px; }
.topbar__tel {
  font-variant-numeric: tabular-nums; font-weight: 600 !important;
  color: var(--amber-lt) !important; opacity: 1 !important;
}
.topbar__tel::before {
  content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5em;
  border-radius: 50%; background: var(--sun); box-shadow: 0 0 8px var(--sun);
  vertical-align: middle; animation: livePuls 2.2s ease-in-out infinite;
}
@media (max-width: 1080px) { .topbar__tel { display: none; } }

/* ------------------------------------------------------------ Intro-Hero */
.intro-hero { position: relative; z-index: 1; height: 150vh; }
.intro-hero__sticky { position: sticky; top: 0; height: 100vh; }
.intro-hero__text {
  position: absolute; left: 0; right: 0; top: clamp(4.6rem, 8vh, 6.5rem);
  text-align: center; padding: 0 var(--pad);
  will-change: transform, opacity;
}
.intro-hero__eyebrow {
  font-size: .95rem; font-weight: 600; letter-spacing: .04em;
  color: var(--amber); margin: 0 0 1rem;
}
.intro-hero__claim {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.1rem, 5.2vw, 4.4rem); line-height: 1.02; letter-spacing: -0.038em;
  margin: 0; color: var(--cream);
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.intro-hero__sub {
  font-size: clamp(.95rem, 1.3vw, 1.2rem); line-height: 1.45;
  color: var(--amber-lt); margin: .9rem auto 0; max-width: 60ch;
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.intro-hero__hint {
  position: absolute; left: 50%; bottom: 1.4rem;
  transform: translateX(-50%);
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cream-dim); opacity: .75;
}
.intro-hero__hint::after {
  content: ""; display: block; width: 1px; height: 30px; margin: .6rem auto 0;
  background: linear-gradient(var(--amber-lt), transparent);
  animation: hint 2s ease-in-out infinite;
}
@media (max-width: 640px) { .br-desktop { display: none; } }

/* Zoom-Rahmen des Akt-1-Clips: startet klein, wird bildfüllend */
.stage__zoom {
  position: absolute; inset: 0; overflow: hidden;
  transform-origin: 50% 76%;
  will-change: transform, border-radius;
  backface-visibility: hidden;
}
.stage__zoomglow {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(246,239,228,.14), inset 0 0 140px rgba(0,0,0,.45);
  border-radius: inherit; opacity: 0; will-change: opacity;
}
.stage__introglow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 55% at 50% 78%, rgba(232,151,59,.34), transparent 70%),
    radial-gradient(90% 60% at 50% 100%, rgba(192,99,44,.22), transparent 70%);
  opacity: 0; will-change: opacity;
}

/* --------------------------------------------------- Sonnenstrahl-Overlay */
.sunfx {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0;
  mix-blend-mode: screen; will-change: opacity;
}
.sunfx svg { width: 100%; height: 100%; display: block; }
.sunfx__rays { transform-box: view-box; }
#sunRays { animation: sunSpin 46s linear infinite; transform-box: fill-box; transform-origin: center; }
#sunRays polygon { fill: #ffd27a; opacity: .18; }
#sunRays polygon:nth-child(odd) { opacity: .09; }
@keyframes sunSpin { to { transform: rotate(360deg); } }
.sunfx__beam { will-change: transform, opacity; }
.sunfx__flare { will-change: transform, opacity; }
.sunfx__funken circle { fill: #fff0c8; opacity: 0; animation: funke 2.8s ease-out infinite; }
@keyframes funke {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  15%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-140px) scale(1.2); }
}

/* -------------------------------------------------------------- PV-Schema */
.interlude { min-height: auto; padding-bottom: clamp(3rem, 8vh, 6rem); }
.pvschema { max-width: 960px; margin: clamp(2.5rem, 6vh, 4rem) auto 0; }
.pvschema__svg { width: 100%; height: auto; overflow: visible; }
.pvschema__haus { fill: rgba(246,239,228,.03); stroke: rgba(246,239,228,.28); stroke-width: 2; stroke-linejoin: round; }
.pvschema__dach { fill: rgba(232,151,59,.08); stroke: rgba(232,151,59,.45); stroke-width: 1.5; }
.pvschema__zelle {
  fill: url(#pvZelle); stroke: rgba(255,210,122,.35); stroke-width: 1;
  transition: fill .5s ease;
}
.pvschema__zelle--an { fill: #2a2118; }
.is-in .pvschema__zelle { animation: zelleAn 1.6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.35s + var(--i) * .07s); }
@keyframes zelleAn {
  0%   { fill: #1b1712; }
  45%  { fill: #ffd27a; }
  100% { fill: #4a3618; stroke: rgba(255,210,122,.75); }
}
.pvschema__beam { opacity: 0; transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); }
.is-in .pvschema__beam { animation: beamAn 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards, beamPuls 3.2s ease-in-out 1.4s infinite; }
@keyframes beamAn { to { opacity: 1; transform: scaleX(1); } }
@keyframes beamPuls { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
.pvschema__sonne circle:first-child { animation: sonnePuls 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sonnePuls { 0%,100% { transform: scale(.96); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
.pvschema__strahlen { transform-box: fill-box; transform-origin: center; animation: sunSpin 30s linear infinite; }
.pvschema__rohr { fill: none; stroke: rgba(232,151,59,.16); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.pvschema__strom {
  fill: none; stroke: var(--amber-lt); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 18 26;
  animation: flowLauf 2.2s linear infinite; opacity: 0;
}
.is-in .pvschema__strom { opacity: 1; transition: opacity .6s ease 1.2s; }
.pvschema__box { fill: rgba(246,239,228,.05); stroke: rgba(246,239,228,.35); stroke-width: 1.6; }
.pvschema__akku { fill: rgba(255,210,122,.15); stroke: rgba(255,210,122,.5); stroke-width: 1; }
.is-in .pvschema__akku { animation: akkuVoll 3s ease-in-out 1.6s infinite alternate; }
@keyframes akkuVoll { from { fill: rgba(255,210,122,.15); } to { fill: rgba(255,210,122,.55); } }
.pvschema__luefter { fill: none; stroke: rgba(246,239,228,.45); stroke-width: 2; stroke-dasharray: 9 7; transform-box: fill-box; transform-origin: center; }
.is-in .pvschema__luefter:first-of-type { animation: sunSpin 4s linear infinite; }
.pvschema__welle {
  fill: none; stroke: var(--amber-lt); stroke-width: 2; stroke-linecap: round;
  opacity: 0; transform-box: fill-box; transform-origin: center;
}
.is-in .pvschema__welle { animation: welleAus 2.4s ease-out 1.8s infinite; }
@keyframes welleAus {
  0%   { opacity: 0; transform: translateX(0); }
  25%  { opacity: .9; }
  100% { opacity: 0; transform: translateX(40px); }
}
.pvschema__label { fill: var(--cream-dim); font-family: var(--sans); font-size: 14px; letter-spacing: .05em; }
.pvschema__legende {
  list-style: none; margin: 1.5rem auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  text-align: left; max-width: 960px;
}
.pvschema__legende li {
  font-size: .92rem; color: var(--cream-dim); line-height: 1.55;
  padding: 1rem 1.1rem; border-radius: 12px;
  background: rgba(246,239,228,.03); border: 1px solid rgba(246,239,228,.07);
}
.pvschema__legende strong { display: block; color: var(--cream); font-weight: 600; margin-bottom: .2rem; }
@media (max-width: 700px) { .pvschema__legende { grid-template-columns: 1fr; } .pvschema__label { font-size: 18px; } }

/* --------------------------------------------------------------- Marken */
.marke { display: inline-flex; align-items: center; gap: .75rem; opacity: .72; transition: opacity .3s ease; }
.marke:hover { opacity: 1; }
.marke__logo {
  height: clamp(1.7rem, 3vw, 2.4rem); width: auto; max-width: 170px; object-fit: contain;
  /* Logos einheitlich hell auf dunklem Grund */
  filter: brightness(0) invert(1); opacity: .92;
}
.marke__name { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 2.8vw, 2.1rem); letter-spacing: -0.02em; color: var(--cream); }
.marke__punkt { color: var(--amber); opacity: .55; font-size: .9rem; }
.marquee__track { gap: 2.75rem; animation-duration: 36s; }
.marquee__track span { opacity: 1; }
.marquee--klein { margin-top: 1.6rem; }
.marquee__track--klein { gap: 2.2rem; animation: marquee 48s linear infinite reverse; }
.marke--klein { opacity: .45; }
.marke--klein .marke__logo { height: 1.35rem; max-width: 120px; }
.marke--klein .marke__name { font-size: clamp(.95rem, 1.6vw, 1.25rem); font-weight: 500; }

/* ----------------------------------------------------------------- Karte */
.karte__buehne {
  max-width: 1080px; padding: clamp(.6rem, 2vw, 1.2rem);
  background:
    radial-gradient(70% 90% at 45% 45%, rgba(232,151,59,.10), transparent 70%),
    linear-gradient(160deg, #221c15, #15110d);
  border-color: rgba(232,151,59,.18);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.85), inset 0 0 0 1px rgba(246,239,228,.03);
}
.karte__gebietrand {
  fill: none; stroke: rgba(245,184,105,.45); stroke-width: 1.2;
  stroke-dasharray: 6 9; animation: kartenRand 60s linear infinite;
}
@keyframes kartenRand { to { stroke-dashoffset: -600; } }
.karte__ringe circle { stroke: rgba(232,151,59,.22); stroke-width: 1.2; stroke-dasharray: 3 9; animation: kartenRand 90s linear infinite; }
.karte__ringlabel { fill: rgba(245,184,105,.6); font-size: 13px; font-weight: 600; }
.karte__bahn {
  fill: none; stroke: rgba(245,184,105,.38); stroke-width: 1.6;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.is-in .karte__bahn { animation: bahnZeichnen 1.4s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.25s + var(--i) * .12s); }
@keyframes bahnZeichnen { to { stroke-dashoffset: 0; } }
.karte__impuls { fill: var(--sun); opacity: 0; }
.karte__impulshalo { fill: rgba(255,210,122,.28); }
.karte__gebietflaeche { opacity: .9; }
.is-in .karte__impuls { opacity: .95; transition: opacity .6s ease 1.6s; }
.karte__ring { fill: none; stroke: rgba(245,184,105,.55); stroke-width: 1.2; }
.karte__puls { fill: rgba(232,151,59,.14); animation: kartePuls 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
.karte__pin { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.6); }
.is-in .karte__pin { animation: pinAn .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.9s + var(--i) * .1s); }
@keyframes pinAn { to { opacity: 1; transform: scale(1); } }
.karte__pin.is-zentrum .karte__punkt { fill: #fff0c8; }
.karte__pin.is-zentrum .karte__ring { stroke: var(--sun); stroke-width: 2; }
.karte__ort { font-size: 18px; }
.karte__ortsub {
  fill: var(--sun); font-size: 12px; font-weight: 700; letter-spacing: .02em;
  text-anchor: middle; font-family: var(--sans);
  paint-order: stroke; stroke: rgba(12,9,6,.85); stroke-width: 3px;
}
.karte__pin.is-aktiv .karte__punkt { r: 10; }
@media (max-width: 560px) { .karte__ortsub { font-size: 14px; } }

/* ---------------------------------------------------------- Über uns Foto */
.photo-frame--portrait { aspect-ratio: 1 / 1; }
.photo-frame--portrait .photo-frame__img { top: -5%; height: 110%; object-position: 50% 30%; }
@media (max-width: 900px) { .photo-frame--portrait { aspect-ratio: 4 / 3; } }

/* ---------------------------------------------------------------- Telefon */
.telzeile { margin: -.25rem 0 0; font-size: 1rem; color: var(--cream-dim); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .35rem .7rem; }
.telzeile__nr {
  font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em;
  color: var(--amber-lt); font-variant-numeric: tabular-nums;
}
.telzeile__nr:hover { text-decoration: underline; }
.telzeile__hinweis {
  font-size: .85rem; font-weight: 600; letter-spacing: .01em;
  color: var(--sun); padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid rgba(255,210,122,.4);
}
.footer__meta a { color: var(--amber-lt); }
.footer__meta a:hover { text-decoration: underline; }
.footer__meta--klein { font-size: .85rem; opacity: .8; }
.contact__tel { display: block; font-family: var(--display); font-weight: 600; font-size: 1.4rem; color: var(--amber-lt) !important; margin: .2rem 0; }
.contact__hours { color: var(--sun); font-weight: 600; letter-spacing: .01em; font-size: .9rem; opacity: 1; }

/* Mobiler Anruf-Knopf (nur kleine Screens) */
.callfab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 115;
  display: none; align-items: stretch; border-radius: 999px; overflow: hidden;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.8);
}
.callfab__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem; color: #241206; font-weight: 700; font-size: .95rem;
  background: linear-gradient(180deg, var(--amber-lt), var(--copper));
}
.callfab__btn svg { width: 20px; height: 20px; fill: currentColor; }
.callfab__btn--wa { background: #25D366; color: #08301a; padding: .75rem .9rem; border-left: 1px solid rgba(0,0,0,.15); }
@media (max-width: 900px) { .callfab { display: inline-flex; } }
.btn--wa { background: #25D366; color: #08301a; gap: .5rem; }
.btn--wa svg { width: 18px; height: 18px; fill: currentColor; }
.btn--wa:hover { background: #33e07a; transform: translateY(-2px); }
.telzeile__wa { color: var(--cream-dim); text-decoration: underline; text-underline-offset: 3px; }
.telzeile__wa:hover { color: #25D366; }
.wz-skip { font-family: var(--sans); font-size: .92rem; color: var(--cream-dim); text-decoration: underline; text-underline-offset: 3px; padding: .6rem .4rem; }
.wz-skip:hover { color: var(--cream); }

/* Reduced Motion: kein Zoom, Intro als ruhiger Block mit Standbild */
@media (prefers-reduced-motion: reduce) {
  .intro-hero { height: auto; min-height: 72vh; }
  .intro-hero__sticky { position: relative; height: auto; min-height: 72vh; padding-bottom: 4rem;
    background: linear-gradient(180deg, rgba(22,19,15,.4), var(--ink)), url("./img/poster.webp") center/cover no-repeat; }
  .intro-hero__text { position: relative; top: auto; padding-top: 8rem; }
  .intro-hero__hint { display: none; }
  .sunfx, .stage__introglow { display: none; }
  .karte__pin, .karte__bahn { opacity: 1; transform: none; stroke-dashoffset: 0; animation: none; }
  .karte__impuls { display: none; }
  .pvschema__zelle, .pvschema__beam, .pvschema__strom { animation: none; opacity: 1; transform: none; }
}

/* Mobile Topbar: Wortmarke einzeilig, Logo kompakter */
@media (max-width: 560px) {
  .topbar { padding-left: 1rem; padding-right: 1rem; }
  .topbar__logo { height: 36px; max-width: 52vw; }
  .topbar__name { font-size: 1.05rem; white-space: nowrap; }
  .topbar__mark { width: 17px; height: 17px; }
  .intro-hero__text { top: 5.6rem; }
}

/* ==================================================== MOBILE / LADEN */
/* Intro-Sticky auf echte Viewporthöhe (iOS-Leisten) */
@supports (height: 100svh) {
  .intro-hero__sticky { height: 100svh; }
}
/* Blend-Modus, SVG-Rotation und Vollbild-Overlays sind auf Mobil zu teuer:
   der Sonnenstrahl läuft dort über reine Deckkraft, der Strahlenkranz steht. */
.is-mobile .sunfx { mix-blend-mode: normal; }
.is-mobile #sunRays { animation: none; }
.is-mobile .sunfx__beam polygon:first-child { display: none; }  /* nur der scharfe Strahl */
.is-mobile .pvschema__strahlen { animation: none; }
.is-mobile .karte__ringe circle, .is-mobile .karte__gebietrand { animation: none; }
.is-mobile .stage__embers { display: none; }
/* Zoom-Rahmen: eigene Ebene, keine Unschärfe beim Skalieren */
.stage__zoom { transform: translateZ(0); }
.stage__zoom .stage__video { transform: none; }
/* Card-Bilder: Hover-Zoom auf Touch ohne Funktion -> weg */
@media (hover: none) { .card:hover .card__media img { transform: none; } }


/* ############################################################################
   RUNDE 3 — Kino-Look: Serif-Akzente, Ebenen-Stapel, Kapitel, Nav-Pille
   ######################################################################### */

/* ------------------------------------------------------------- Schrift */
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("./fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("./fonts/instrument-serif-italic-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+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bernstein-Licht: Serif-Kursiv mit wanderndem Schimmer */
.au {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: -0.01em; font-size: 1.06em;
  background: linear-gradient(100deg, var(--copper) 0%, var(--amber-lt) 30%, #fff0c8 50%, var(--amber-lt) 70%, var(--copper) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s linear infinite;
  padding-right: .06em;   /* Kursiv-Überhang nicht abschneiden */
}
.au--dunkel { background-image: linear-gradient(100deg, #8f421a 0%, #c0632c 30%, #e8973b 50%, #c0632c 70%, #8f421a 100%); }
@keyframes shimmer { to { background-position: -250% 0; } }
.is-mobile .au { animation: none; background-position: 40% 0; }

/* SplitText-Zeilenmasken: Unterlängen nicht abschneiden */
.ln { padding-bottom: .16em; margin-bottom: -.16em; }
.wd { padding-bottom: .12em; margin-bottom: -.12em; }

/* ------------------------------------------------------------ Tonwerte */
.tone-black    { background: var(--ink); }
.tone-graphite { background: var(--ink-2); }
.tone-bone     { background: var(--bone); color: var(--ink); }
.tone-bone .h2, .tone-bone .lead { color: var(--ink); }
.tone-bone .body { color: rgba(22,19,15,.72); }
.tone-bone .eyebrow { color: var(--copper); }
.tone-bone .link-arrow { color: var(--copper-dk); }
.tone-bone .link-arrow:hover { border-color: var(--copper-dk); }

/* --------------------------------------------------------- Ebenen-Stapel */
/* Eine .layer-under-Sektion bleibt (sticky) stehen; alles danach fährt mit
   runden Ecken und Schatten darüber. Der Inhalt darunter tritt beim
   Überfahren zurück (Scale/Dim per GSAP). */
.content > section { position: relative; z-index: 1; }
.content > .layer-under {
  position: sticky; top: 0; z-index: 0;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
/* Sicherung: eine stehende Ebene darf NIE höher sein als der Bildschirm —
   sonst klebt sie und ihr Inhalt wird abgeschnitten (JS setzt .is-tall). */
.content > .layer-under.is-tall {
  position: relative; min-height: 0; display: block; overflow-x: clip; overflow-y: visible;
}
.content > .layer-under.is-tall .layer__inner { transform: none !important; opacity: 1 !important; }
.layer__inner { will-change: transform, opacity; transform-origin: 50% 40%; width: 100%; }
.content > .layer-over {
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -40px 90px rgba(0,0,0,.55);
}
.content > .layer-over::before {   /* feine Kante oben, wie ein Kartenrand */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246,239,228,.14), transparent);
  border-radius: 28px 28px 0 0;
}
.content > .layer-over.tone-bone::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); }

/* ------------------------------------------------------ Kapitel-Ziffern */
.wm {
  position: absolute; right: -2vw; top: 6%; z-index: 0;
  font-family: var(--display); font-weight: 600; line-height: 1;
  font-size: min(36vw, 520px); letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(246,239,228,.07);
  pointer-events: none; user-select: none; will-change: transform;
}
.wm--dunkel { -webkit-text-stroke: 1px rgba(22,19,15,.09); }
.content > section > *:not(.wm):not(.kap__bg):not(.quote__bg) { position: relative; z-index: 1; }

/* Timecode unten rechts */
.tc {
  position: fixed; right: clamp(1rem, 2.5vw, 2.4rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 106;
  display: flex; align-items: baseline; gap: .6rem; pointer-events: none;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(216,205,186,.5); opacity: 0; transition: opacity .5s, color .4s;
}
.tc.is-on { opacity: 1; }
.tc__n { font-size: 1rem; color: var(--amber-lt); }
.tc__k { padding-left: .9rem; border-left: 1px solid rgba(246,239,228,.14); }
.tc.is-light { color: rgba(22,19,15,.55); }
.tc.is-light .tc__k { border-color: rgba(22,19,15,.15); }
@media (max-width: 900px) { .tc { display: none; } }

/* ----------------------------------------------------- 01 Leistungen */
.content > section.kap-sec { padding: 0; }
.kap__bg { position: absolute; inset: 0; z-index: 0; }
.kap__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
  transition: opacity .9s ease, transform 1.6s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.kap__bg img.is-active { opacity: 1; transform: scale(1); }
.kap__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(22,19,15,.94) 0%, rgba(22,19,15,.72) 45%, rgba(22,19,15,.35) 100%),
    linear-gradient(to top, rgba(22,19,15,.92), transparent 45%);
}
.kap__grid {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto; padding: clamp(5rem, 12vh, 8rem) var(--pad);
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.kap__left .h2 { font-size: clamp(1.5rem, 2.5vw, 2.15rem); }
.kap__index {
  list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: .55rem; counter-reset: k;
}
.kap__index li {
  counter-increment: k; display: flex; gap: .9rem; align-items: baseline;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: rgba(216,205,186,.4);
  transition: color .4s, transform .4s;
}
.kap__index li::before { content: "0" counter(k); color: rgba(232,151,59,.35); }
.kap__index li.is-on { color: var(--cream); transform: translateX(8px); }
.kap__index li.is-on::before { color: var(--amber-lt); }
.kap__stage { position: relative; min-height: clamp(300px, 42vh, 460px); }
.kap__item { position: absolute; inset: 0; opacity: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: center; }
.kap__item.is-active { opacity: 1; pointer-events: auto; }
.kap__n { font-family: var(--mono); font-size: .78rem; letter-spacing: .22em; color: var(--amber); }
.kap__item h3 {
  font-family: var(--display); font-weight: 600; margin: 1rem 0 1.2rem;
  font-size: clamp(2.4rem, 5.4vw, 5rem); line-height: .98; letter-spacing: -0.045em; color: var(--cream);
}
.kap__item p { margin: 0; max-width: 44ch; color: var(--cream-dim); font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.55; }
.kap__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(246,239,228,.1); z-index: 2; }
.kap__bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--copper), var(--amber-lt)); }
.kap-space { height: 200vh; height: 200svh; position: relative; z-index: 0; pointer-events: none; }

/* --------------------------------------------------------- Zwischenspiel */
.content > section.quote-sec { padding: clamp(4rem, 12vh, 8rem) var(--pad); text-align: center; }
.quote__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.quote__bg img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 30%; margin-top: -9%; filter: saturate(.85) brightness(.9); }
.quote__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, rgba(22,19,15,.25), rgba(22,19,15,.88)); }
.quote__inner { max-width: 1000px; margin: 0 auto; }
.quote__q {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 5.6rem); line-height: 1.08; letter-spacing: -0.025em;
  margin: 0 auto; max-width: 18ch; color: var(--cream);
}
.quote__src {
  display: block; margin-top: 2rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(216,205,186,.55);
}
.quote__src::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--copper); vertical-align: middle; margin-right: .75rem; }

/* ------------------------------------------------------ Förderung hell */
.content > section.foerderung.tone-bone {
  background:
    radial-gradient(60% 120% at 12% 30%, rgba(245,184,105,.35), transparent 55%),
    linear-gradient(115deg, #f6f0e6 0%, var(--bone) 55%, var(--bone-2) 100%);
  border-top: none; border-bottom: none;
}
.foerderung.tone-bone .foerderung__upto { color: var(--copper-dk); }
.foerderung.tone-bone .foerderung__label { color: var(--ink); }
.foerderung.tone-bone .foerderung__text .body { color: rgba(22,19,15,.75); }
.foerderung.tone-bone .foerderung__text strong { color: var(--ink); }

/* ------------------------------------------------------- Nav-Pille */
.topbar { left: 50%; right: auto; transform: translateX(-50%); width: 100%; max-width: 100%;
  transition: max-width .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1), padding .7s cubic-bezier(.2,.8,.2,1),
              border-radius .7s, background .4s, color .4s, border-color .4s, transform .45s cubic-bezier(.16,.8,.3,1); }
.topbar.is-hidden { transform: translate(-50%, -140%); }
.topbar.is-solid {
  top: 14px; max-width: min(1120px, calc(100% - 28px));
  padding: .5rem .55rem .5rem 1.3rem; border-radius: 999px;
  border: 1px solid rgba(246,239,228,.09);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.7);
}
.topbar.is-solid.is-light {
  background: rgba(243,237,227,.86); color: var(--ink); border-color: rgba(22,19,15,.08);
}
.topbar.is-light .topbar__nav a { color: var(--ink); }
.topbar.is-light .topbar__cta { border-color: rgba(22,19,15,.3); }
.topbar.is-light .topbar__tel { color: var(--copper-dk) !important; }
.topbar__status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(216,205,186,.6); white-space: nowrap;
}
.topbar__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 0 rgba(255,210,122,.5); animation: statusPuls 2.4s ease-out infinite; }
@keyframes statusPuls { 0% { box-shadow: 0 0 0 0 rgba(255,210,122,.55); } 100% { box-shadow: 0 0 0 9px rgba(255,210,122,0); } }
.topbar.is-light .topbar__status { color: rgba(22,19,15,.55); }
@media (max-width: 1240px) { .topbar__status { display: none; } }
.topbar__cta { will-change: transform; }

/* ---------------------------------------------------------------- Buttons */
.btn--primary {
  background: linear-gradient(110deg, var(--copper) 0%, var(--amber-lt) 50%, var(--copper) 100%);
  background-size: 200% 100%; transition: background-position .6s ease, transform .25s ease, box-shadow .25s ease;
}
.btn--primary:hover { background-position: 100% 0; }
.btn { will-change: transform; }

/* --------------------------------------------------------- Landing-Claim */
.landing__claim .au { font-size: 1.04em; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 900px) {
  .kap__grid { grid-template-columns: 1fr; align-items: end; padding-top: 6rem; padding-bottom: 4rem; gap: 1.5rem; min-height: 100svh; }
  .kap__left .h2 { font-size: clamp(1.4rem, 5.6vw, 2rem); }
  .kap__index { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: 1rem; }
  .kap__index li { font-size: .68rem; }
  .kap__index li.is-on { transform: none; }
  .kap__stage { min-height: 42vh; }
  .kap__item h3 { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .kap__bg::after {
    background:
      linear-gradient(to top, rgba(22,19,15,.96) 0%, rgba(22,19,15,.78) 50%, rgba(22,19,15,.3) 100%);
  }
  .kap-space { height: 170svh; }
  .content > .layer-over { border-radius: 20px 20px 0 0; box-shadow: 0 -24px 60px rgba(0,0,0,.55); }
  .wm { font-size: 44vw; top: 2%; right: -4vw; }
  .topbar.is-solid { top: 10px; max-width: calc(100% - 20px); padding: .45rem .45rem .45rem 1rem; }
  .quote__q { font-size: clamp(2rem, 9vw, 3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .au { animation: none; }
  .kap__bg img { transition: none; }
  .content > .layer-under { position: relative; }
  .kap-space { display: none; }
  .kap__item { position: relative; opacity: 1; margin-bottom: 2rem; }
  .kap__stage { min-height: auto; }
}
.js-scrub .h2:not(.is-split), .js-scrub .interlude__line:not(.is-split), .js-scrub .split-words:not(.is-split) { visibility: hidden; }
.h2.is-split, .interlude__line.is-split, .split-words.is-split { visibility: visible; }

.quote__q em[data-au] { font-style: italic; }
.wd.au { display: inline-block; }
/* Nav-Pille: nichts umbrechen */
.topbar__name, .topbar__tel, .topbar__status, .topbar__cta { white-space: nowrap; }
.topbar__brand { flex: none; }
.topbar.is-solid { max-width: min(1280px, calc(100% - 28px)); }
.topbar.is-solid .topbar__nav { gap: clamp(.9rem, 1.8vw, 1.6rem); }
@media (max-width: 1400px) { .topbar__status { display: none; } }
@media (max-width: 1180px) { .topbar__tel { display: none; } }

/* ================================================= Konversion / Feinschliff */
.intro-hero__cta {
  position: absolute; left: 50%; bottom: 1.7rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-weight: 600; font-size: .95rem; color: var(--cream);
  padding: .55rem 1.1rem; border-radius: 999px;
  border: 1px solid rgba(246,239,228,.28); background: rgba(22,19,15,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .25s, background .25s, transform .25s;
}
.intro-hero__cta:hover { border-color: var(--amber-lt); background: rgba(232,151,59,.16); transform: translate(-50%, -1px); }
.intro-hero__cta span { color: var(--amber-lt); transition: transform .25s; }
.intro-hero__cta:hover span { transform: translateX(3px); }
.cta-row {
  max-width: var(--maxw); margin: 2.5rem auto 0; display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: .9rem;
}
.cta-row--links { justify-content: flex-start; margin: 1.8rem 0 0; }
.cta-row__text { width: 100%; text-align: center; margin: 0 0 .4rem; color: var(--cream-dim); font-size: 1.05rem; }
.trust {
  list-style: none; margin: 0 0 1.2rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem;
  font-size: .85rem; color: var(--cream-dim);
}
.trust li::before { content: "✓"; color: var(--amber-lt); font-weight: 700; margin-right: .45rem; }
.wz-next { margin: 1.4rem auto 1.2rem; padding: 0 0 0 1.2rem; text-align: left; max-width: 440px; color: var(--cream-dim); font-size: .95rem; line-height: 1.6; }
.wz-next strong { color: var(--cream); }
/* Standardzustand: unsichtbar. .is-an blendet ihn weich ein (JS ab Sektion 2). */
.callfab { opacity: 0; pointer-events: none; transform: translateY(18px) scale(.94);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
.callfab.is-an { opacity: 1; pointer-events: auto; transform: none; }
@media (max-width: 560px) {
  .cta-row .btn { width: 100%; justify-content: center; }
  .intro-hero__cta { font-size: .88rem; padding: .5rem .95rem; bottom: 1.4rem; }
}

/* Intro: der CTA ersetzt den Scroll-Hinweis; Anruf-Knopf erst nach dem Intro */
.intro-hero__hint { display: none; }
/* Kurze Desktop-Viewports (Laptops): Textblock kompakter, damit die Karte frei bleibt */
@media (min-width: 900px) and (max-height: 800px) {
  .intro-hero__text { top: 4.4rem; }
  .intro-hero__claim { font-size: clamp(2rem, 4.2vw, 3.4rem); }
  .intro-hero__sub { font-size: 1rem; margin-top: .6rem; max-width: 70ch; }
  .intro-hero__eyebrow { margin-bottom: .6rem; }
}

/* ================================================== Muster / Zusagen / Ansprechpartner */
.muster__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.muster__card {
  position: relative; padding: 1.8rem 1.8rem 1.8rem 4.4rem; border-radius: 16px;
  background: var(--ink-3); border: 1px solid rgba(246,239,228,.07);
  transition: border-color .3s, transform .5s cubic-bezier(.2,.7,.2,1);
}
.muster__card:hover { border-color: rgba(232,151,59,.4); transform: translateY(-4px); }
.muster__n { position: absolute; left: 1.5rem; top: 1.9rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .2em; color: var(--amber); }
.muster__card h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing: -0.02em; margin: 0 0 .6rem; line-height: 1.25; }
.muster__card p { margin: 0; color: var(--cream-dim); line-height: 1.6; }
.muster__card em { font-style: italic; color: var(--cream); }
.zusagen__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.zusage { padding: 1.6rem 1.6rem 1.7rem; border-radius: 16px; background: rgba(246,239,228,.03); border: 1px solid rgba(246,239,228,.08); }
.zusage h3 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; margin: 0 0 .5rem; padding-left: 1.6rem; position: relative; }
.zusage h3::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--amber-lt); font-weight: 700; }
.zusage p { margin: 0; color: var(--cream-dim); font-size: .95rem; line-height: 1.6; }
.ansprech {
  display: inline-flex; align-items: center; gap: .9rem; margin: 0 auto 1.1rem;
  padding: .55rem 1.1rem .55rem .55rem; border-radius: 999px;
  background: rgba(246,239,228,.04); border: 1px solid rgba(246,239,228,.1); text-align: left;
}
.ansprech img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid rgba(232,151,59,.6); }
.ansprech strong { display: block; font-size: .86rem; letter-spacing: .01em; color: var(--amber-lt); }
.ansprech span { display: block; font-size: .9rem; color: var(--cream-dim); }
@media (max-width: 900px) {
  .muster__grid { grid-template-columns: 1fr; }
  .zusagen__grid { grid-template-columns: 1fr; }
  .muster__card { padding: 1.4rem 1.3rem 1.4rem 3.6rem; }
  .muster__n { left: 1.2rem; top: 1.5rem; }
  .ansprech { display: flex; }
}

/* Mobil: Reveals kürzer und flacher, Zähler nicht ausbremsen */
@media (max-width: 900px) {
  [data-reveal] { transform: translateY(12px); transition-duration: .55s; }
  .counter__kachel[data-reveal] { transform: none; }
}

/* Mobil: keine stehenden Ebenen — Touch-Scrollen mit sticky + overflow:hidden
   ist auf iOS unzuverlässig, und jede Sektion ist gestapelt höher als der Screen. */
@media (max-width: 900px) {
  .content > .layer-under { position: relative; min-height: 0; display: block; overflow-x: clip; overflow-y: visible; }
  .content > .layer-under .layer__inner { transform: none !important; opacity: 1 !important; }
  .content > .layer-over { border-radius: 20px 20px 0 0; }
}

/* ============================================ Kartenstapel „Kennen Sie das?" */
/* Jede Karte klebt an derselben Stelle; die nächste schiebt sich darüber und
   drückt die vorherige leicht zurück. Höhe kommt aus dem Fluss der Karten. */
.mstapel { max-width: 1000px; margin: 0 auto; }
.mstapel__karten { display: block; }
.mkarte {
  position: sticky; top: calc(6.5rem + var(--i) * 14px);
  min-height: clamp(320px, 46vh, 460px);
  display: flex; align-items: flex-end;
  margin-bottom: clamp(1.2rem, 3vh, 2rem);
  border-radius: 22px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(246,239,228,.1);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9);
  will-change: transform;
}
.mkarte:last-child { margin-bottom: 0; }
/* Nächste Karte deckt die vorherige sauber ab */
.mkarte { z-index: calc(var(--i) + 1); background: var(--ink-3); }
.mkarte__bg { position: absolute; inset: 0; z-index: 0; }
.mkarte__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.mkarte__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(22,19,15,.35) 0%, rgba(22,19,15,.55) 45%, rgba(22,19,15,.95) 100%),
    linear-gradient(90deg, rgba(22,19,15,.75) 0%, rgba(22,19,15,.25) 60%, rgba(22,19,15,.1) 100%);
}
.mkarte__inhalt { position: relative; z-index: 1; padding: clamp(1.6rem, 3.5vw, 2.6rem); max-width: 46ch; }
.mkarte__n { font-family: var(--mono); font-size: .74rem; letter-spacing: .22em; color: var(--amber-lt); }
.mkarte h3 {
  font-family: var(--display); font-weight: 600; margin: .7rem 0 .7rem;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -0.025em; color: var(--cream);
  text-shadow: 0 2px 18px rgba(22,19,15,.7);
}
.mkarte p { margin: 0; color: var(--cream-dim); line-height: 1.6; font-size: clamp(.98rem, 1.2vw, 1.08rem); }
.mkarte p em { font-style: italic; color: var(--cream); }
@media (max-width: 900px) {
  .mkarte { top: calc(5rem + var(--i) * 10px); min-height: 62svh; border-radius: 18px; }
  .mkarte__inhalt { padding: 1.3rem 1.2rem 1.5rem; }
  .mkarte h3 { font-size: 1.42rem; }
  .mkarte p { font-size: .96rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mkarte { position: relative; top: auto; }
}

/* ================================================= Karte: echte Landkarte */
.karte__flaeche { fill: rgba(246,239,228,.028); stroke: none; }
.karte__grenze { fill: none; stroke: rgba(246,239,228,.16); stroke-width: 1; stroke-linejoin: round; }
.karte__fluss {
  fill: none; stroke: rgba(255,210,122,.28); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.karte__land, .karte__grenzen, .karte__fluesse { pointer-events: none; }
.karte__gebietflaeche { opacity: .75; }
.karte__gebietrand { stroke: rgba(232,151,59,.55); }

/* Abschnittslinie unter jeder Überschrift */
.section-head { position: relative; }
.head-linie {
  display: block; height: 1px; margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  background: linear-gradient(90deg, rgba(232,151,59,.65), rgba(232,151,59,.05));
  transform-origin: left center;
}
.section-head--mitte .head-linie {
  width: min(420px, 60%); margin-left: auto; margin-right: auto;
  background: linear-gradient(90deg, transparent, rgba(232,151,59,.6), transparent);
  transform-origin: center;
}

/* Sektions-Hintergrundbilder (Kennzahlen, Partner) */
.hat-bg { position: relative; overflow: hidden; }
.sec-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sec-bg img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.sec-bg::after { content: ""; position: absolute; inset: 0; }
.sec-bg--dunkel::after {
  background: linear-gradient(180deg, rgba(22,19,15,.86) 0%, rgba(22,19,15,.62) 42%, rgba(22,19,15,.9) 100%);
}
.sec-bg--sehrdunkel::after {
  background: linear-gradient(180deg, rgba(22,19,15,.9) 0%, rgba(22,19,15,.7) 45%, rgba(22,19,15,.94) 100%);
}
.hat-bg > *:not(.sec-bg) { position: relative; z-index: 1; }

/* ================================ Kennzahlen: zwei eigene Farbwelten ====== */
.counter__kachel { position: relative; overflow: hidden; isolation: isolate; }
/* Lichtschein in der Kachel (::before bleibt die Kopfkante) */
.counter__kachel::after {
  content: ""; position: absolute; z-index: 0; inset: -30% -20% auto -20%; height: 160%;
  opacity: .55; filter: blur(50px); pointer-events: none; transition: opacity .6s ease;
}
.counter__kachel:hover::after { opacity: .85; }
.counter__kachel > * { position: relative; z-index: 1; }
.counter__kachel--sonne::after { background: radial-gradient(42% 42% at 24% 20%, rgba(255,196,84,.5), transparent 70%); }
.counter__kachel--blatt::after { background: radial-gradient(42% 42% at 24% 20%, rgba(92,196,132,.4), transparent 70%); }
/* Kopfkante und Rand in der jeweiligen Farbe */
.counter__kachel--sonne { border-color: rgba(255,196,84,.28); background: linear-gradient(165deg, rgba(58,44,24,.9), rgba(30,26,21,.92)); }
.counter__kachel--blatt { border-color: rgba(92,196,132,.26); background: linear-gradient(165deg, rgba(26,50,38,.9), rgba(24,28,25,.92)); }
.counter__kachel--sonne::before { background: linear-gradient(90deg, #b8721f, #ffc454, #ffe6a8, transparent); }
.counter__kachel--blatt::before { background: linear-gradient(90deg, #1f7a4a, #43b877, #9ce6bd, transparent); }

/* Icons als feine Linienzeichnung statt Emoji */
.counter__icon {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px; font-size: 0;
  margin-bottom: 1.1rem; filter: none;
  border: 1px solid rgba(246,239,228,.12); background: rgba(246,239,228,.04);
}
.counter__icon svg { width: 24px; height: 24px; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.counter__kachel--sonne .counter__icon { border-color: rgba(255,196,84,.35); background: rgba(255,196,84,.08); }
.counter__kachel--sonne .counter__icon svg { stroke: #ffc454; fill: none; }
.counter__kachel--sonne .counter__icon svg circle { fill: rgba(255,196,84,.18); }
.counter__kachel--blatt .counter__icon { border-color: rgba(92,196,132,.35); background: rgba(92,196,132,.08); }
.counter__kachel--blatt .counter__icon svg { stroke: #5cc484; }

/* Zahlen in der Kachelfarbe */
.counter__kachel--sonne .counter__wert {
  background: linear-gradient(100deg, #b8721f, #ffc454 45%, #fff0cc 60%, #ffc454 75%, #b8721f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.counter__kachel--blatt .counter__wert {
  background: linear-gradient(100deg, #1f7a4a, #43b877 45%, #c9f4dc 60%, #43b877 75%, #1f7a4a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.counter__kachel--sonne .counter__dez, .counter__kachel--sonne .counter__einheit { color: rgba(255,196,84,.7); }
.counter__kachel--blatt .counter__dez, .counter__kachel--blatt .counter__einheit { color: rgba(92,196,132,.75); }
.counter__kachel--blatt [data-counter-neben] { color: #7fd6a3; font-weight: 600; }

/* Sonne dreht sich langsam, Blatt atmet */
@media (prefers-reduced-motion: no-preference) {
  .counter__kachel--sonne .counter__icon svg g { transform-origin: center; transform-box: fill-box; animation: sunSpin 24s linear infinite; }
  .counter__kachel--blatt .counter__icon svg { animation: blattAtmen 5s ease-in-out infinite; }
}
@keyframes blattAtmen { 0%,100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.06); } }

/* ============================== Marken-Lockup im Hero ==================== */
.marke-lockup { display: flex; align-items: center; gap: .8rem; margin-bottom: .55rem; }
.section-head--mitte .marke-lockup, .intro-hero__text .marke-lockup { justify-content: center; }
.marke-lockup__logo { display: none; height: clamp(48px, 5vw, 76px); width: auto; max-width: min(70vw, 420px); object-fit: contain; }
.marke-lockup.has-logo .marke-lockup__logo { display: block; }
.marke-lockup.has-logo .marke-lockup__wort { display: none; }
.marke-lockup__wort { display: inline-flex; align-items: center; gap: .7rem; }
.marke-lockup__wort .topbar__mark { width: clamp(22px, 2.4vw, 30px); height: clamp(22px, 2.4vw, 30px); }
.marke-lockup__name {
  font-family: var(--display); font-weight: 700; color: var(--cream);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem); letter-spacing: -0.03em; line-height: 1;
}
.marke-lockup__claim {
  margin: 0 0 clamp(1.2rem, 3vh, 2rem);
  font-size: clamp(.95rem, 1.25vw, 1.15rem); font-weight: 500;
  color: rgba(232,151,59,.95); letter-spacing: .01em;
}
.intro-hero__text .marke-lockup__claim { text-align: center; }
@media (max-width: 640px) {
  .marke-lockup { gap: .6rem; }
  .marke-lockup__name { font-size: 1.45rem; }
  .marke-lockup__claim { font-size: .88rem; margin-bottom: 1rem; }
}

/* V1-Intro mit Lockup: kompakter, Karte bleibt frei */
@media (max-width: 900px) {
  .intro-hero__text { top: 4.6rem; }
  .intro-hero__text .marke-lockup__name { font-size: 1.3rem; }
  .intro-hero__text .marke-lockup__claim { font-size: .84rem; margin-bottom: .7rem; }
  .intro-hero__sub { font-size: .88rem; }
  .intro-hero__claim { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
}
@media (min-width: 901px) and (max-height: 820px) {
  .intro-hero__text .marke-lockup__claim { margin-bottom: .8rem; }
  .intro-hero__claim { font-size: clamp(1.9rem, 3.8vw, 3rem); }
}

/* ================================= Licht-Reise (scroll-gescrubbter Film) == */
.licht {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 18px; overflow: hidden; background: #05070a;
  box-shadow: 0 40px 90px -45px rgba(0,0,0,.9), inset 0 0 0 1px rgba(246,239,228,.08);
}
.licht video, .licht canvas, .licht img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.licht::after {   /* feine Vignette, damit der Film in die Seite eingebettet wirkt */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 90px rgba(22,19,15,.75);
}
.licht__leiste {
  height: 2px; margin-top: .9rem; border-radius: 999px;
  background: rgba(246,239,228,.1); overflow: hidden;
}
.licht__leiste i {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--copper), var(--amber-lt), var(--sun));
}
/* Die Reise braucht Scroll-Strecke: die Bühne bleibt stehen, die Schritte laufen durch */
.reise--film .reise__sticky { position: sticky; top: 5.5rem; }
.licht-sek { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.licht-sek__sticky { position: sticky; top: 5.5rem; z-index: 1; }
.licht-sek .reise__steps { list-style: none; margin: 0; padding: clamp(2rem, 6vh, 4rem) 0 0; }
.licht-sek .reise__step {
  padding: clamp(2rem, 5vh, 3.5rem) 0; border-top: 1px solid rgba(246,239,228,.08);
  min-height: 34vh; display: flex; flex-direction: column; justify-content: center;
  opacity: .32; transition: opacity .5s ease;
}
.licht-sek .reise__step.is-on { opacity: 1; }
.licht-sek .reise__step:first-child { border-top: 0; }
.licht-sek .reise__n { font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; color: var(--amber); }
.licht-sek .reise__step h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing: -0.03em; margin: .6rem 0 .8rem; }
.licht-sek .reise__step p { margin: 0; color: var(--cream-dim); line-height: 1.6; }
@media (max-width: 900px) {
  .reise--film .reise__sticky, .licht-sek__sticky { top: 4.6rem; }
  .licht { border-radius: 14px; }
  .licht-sek .reise__step { min-height: auto; padding: 1.5rem 0; }
}

/* Scrollweg für die Licht-Reise: jeder Schritt bekommt eine eigene Etappe */
.reise--film .reise__step, .licht-sek .reise__step { min-height: 62vh; }
@media (max-width: 900px) {
  .reise--film .reise__step, .licht-sek .reise__step { min-height: 52svh; }
}

/* Partnerkarten ohne Verlinkung */
.karte__lext { display: none; }
.karte__pin { cursor: default; }

/* ===================================== Förderung: Wirbel + Zahl-Animation */
.hat-funken { position: relative; overflow: hidden; }
.funken { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.funken i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,140,.95), rgba(232,151,59,0) 70%);
  opacity: 0; will-change: transform, opacity;
}
.hat-funken > *:not(.funken) { position: relative; z-index: 1; }
/* wandernder Lichtschein hinter der großen Zahl */
.foerderung__big { position: relative; }
.foerderung__big::before {
  content: ""; position: absolute; z-index: -1; left: -12%; top: -18%; width: 70%; height: 90%;
  background: radial-gradient(circle at 40% 40%, rgba(255,196,84,.55), transparent 68%);
  filter: blur(48px); animation: foerderSchein 9s ease-in-out infinite alternate;
}
@keyframes foerderSchein {
  0%   { transform: translate(0,0) scale(1); opacity: .75; }
  100% { transform: translate(14%, 8%) scale(1.12); opacity: 1; }
}
.foerderung__zahl { font-variant-numeric: tabular-nums; }
/* Fördertopf-Balken */
.ftopf { margin: 1.1rem 0 0; max-width: 320px; }
.ftopf__bar { height: 10px; border-radius: 999px; background: rgba(22,19,15,.1); overflow: hidden; }
.ftopf__bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--copper-dk), var(--copper) 45%, var(--amber) 80%, #ffd27a);
  border-radius: 999px; box-shadow: 0 0 16px rgba(232,151,59,.55);
}
.ftopf__marken {
  display: flex; justify-content: space-between; margin-top: .45rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: rgba(22,19,15,.45);
}
@media (prefers-reduced-motion: reduce) {
  .foerderung__big::before { animation: none; }
  .ftopf__bar i { width: 80% !important; }
}

/* ================= Licht-Reise vollflächig: Film füllt den Bildschirm ===== */
.licht-sek--voll, .reise--voll .reise__grid { max-width: none; padding-left: 0; padding-right: 0; }
.reise--voll .reise__grid { display: block; }
.licht-sek--voll .licht-sek__sticky, .reise--voll .reise__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
}
.licht-sek--voll .licht, .reise--voll .licht {
  position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; border-radius: 0; box-shadow: none; background: #05070a;
}
.licht-sek--voll .licht::after, .reise--voll .licht::after {
  box-shadow: none;
  background:
    linear-gradient(180deg, rgba(22,19,15,.55) 0%, rgba(22,19,15,0) 24%, rgba(22,19,15,0) 46%, rgba(22,19,15,.72) 78%, rgba(22,19,15,.94) 100%);
}
/* Fortschrittslinie oben am Bildrand */
.licht-sek--voll .licht__leiste, .reise--voll .licht__leiste {
  position: absolute; left: 0; right: 0; top: 0; margin: 0; height: 3px; z-index: 3; border-radius: 0;
}
/* Die Schritte liegen als Bildunterschrift über dem Film */
.licht-sek--voll .reise__steps, .reise--voll .reise__steps {
  position: relative; z-index: 2; margin: 0; padding: 0; list-style: none;
  margin-top: -100svh;   /* Overlay über der stehenden Bühne */
  pointer-events: none;
}
.licht-sek--voll .reise__step, .reise--voll .reise__step {
  height: 100vh; height: 100svh; min-height: 0; margin: 0; border: 0; padding: 0 var(--pad);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding-bottom: clamp(4.5rem, 12vh, 9rem); text-align: center;
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.licht-sek--voll .reise__step.is-on, .reise--voll .reise__step.is-on { opacity: 1; transform: none; }
.licht-sek--voll .reise__n, .reise--voll .reise__n { color: var(--amber-lt); }
.licht-sek--voll .reise__step h3, .reise--voll .reise__step h3 {
  font-size: clamp(1.9rem, 4.6vw, 3.6rem); margin: .5rem 0 .7rem; max-width: 18ch;
  text-shadow: 0 2px 26px rgba(22,19,15,.8);
}
.licht-sek--voll .reise__step p, .reise--voll .reise__step p {
  max-width: 52ch; font-size: clamp(1rem, 1.35vw, 1.2rem); color: var(--cream);
  text-shadow: 0 1px 16px rgba(22,19,15,.85);
}
/* Thermometer an den Bildrand */
.reise--voll .reise__thermo { position: absolute; right: clamp(1rem,3vw,3rem); top: 22%; z-index: 3; }
/* Der Sektionskopf liegt über dem Anfang des Films */
.reise--voll .section-head { position: relative; z-index: 4; padding: 0 var(--pad); }
@media (max-width: 900px) {
  .licht-sek--voll .reise__step, .reise--voll .reise__step { padding-bottom: clamp(5rem, 16vh, 8rem); }
  .licht-sek--voll .reise__step h3, .reise--voll .reise__step h3 { font-size: clamp(1.6rem, 7.6vw, 2.2rem); }
  .licht-sek--voll .reise__step p, .reise--voll .reise__step p { font-size: .97rem; max-width: 34ch; }
}
@media (prefers-reduced-motion: reduce) {
  .licht-sek--voll .reise__steps, .reise--voll .reise__steps { margin-top: 0; }
  .licht-sek--voll .reise__step, .reise--voll .reise__step { height: auto; opacity: 1; transform: none; padding: 2rem var(--pad); }
}

/* Intro: der Film läuft sofort bildfüllend, der Text liegt darüber */
.stage__zoomglow { display: none; }
.stage__introglow { display: none; }
.intro-hero__text {
  background: linear-gradient(180deg, rgba(22,19,15,.72) 0%, rgba(22,19,15,.32) 55%, rgba(22,19,15,0) 100%);
  padding-top: clamp(5.5rem, 10vh, 8rem); padding-bottom: 2.5rem;
}
.intro-hero__claim { text-shadow: 0 2px 26px rgba(22,19,15,.85); }
.intro-hero__sub, .marke-lockup__claim { text-shadow: 0 1px 14px rgba(22,19,15,.9); }

/* Randlos über die volle Fensterbreite — der Container begrenzt sonst auf die Textbreite */
.licht-sek--voll .licht-sek__sticky, .reise--voll .reise__sticky,
.licht-sek--voll .reise__steps, .reise--voll .reise__steps {
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.licht-sek--voll, .reise--voll { overflow: visible; }
.licht-sek--voll .reise__steps, .reise--voll .reise__steps { margin-top: -100svh; }

/* Der 100vw-Vollbleed ist um die Scrollbalkenbreite breiter als der Inhalt —
   horizontal clippen (clip statt hidden, sonst bricht position:sticky). */
.content > section, .interlude { overflow-x: clip; overflow-y: visible; }

@media (max-width: 900px) {
  /* Kein 100vw auf Mobil (Scrollbalken/Adressleiste verfälschen vw) — stattdessen
     nur die Container-Polsterung ausgleichen. */
  .licht-sek--voll .licht-sek__sticky, .reise--voll .reise__sticky,
  .licht-sek--voll .reise__steps, .reise--voll .reise__steps {
    width: auto; margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad));
  }
  .licht-sek--voll .reise__steps, .reise--voll .reise__steps { margin-top: -100svh; }
}

/* Kapitel-Ziffern dürfen die Seite nie verbreitern */
.wm { max-width: 100%; }
.content > section, .interlude, .hat-bg, .hat-funken { overflow-x: clip; }

.kap-sec, .wege, .reise, .ablauf, .foerderung, .counter-sec, .karte-sec, .ueber, .refs-sec,
.wizard-sec, .zusagen, .faq, .muster, .quote-sec, .marquee-sec, .licht-sek { overflow-x: clip; }

/* ============ Randlos ohne vw-Rechnung ====================================
   Statt 100vw-Negativmargen (die den Scrollbalken mitzählen und je nach
   Browser einen Rand erzeugen) steht die Bühne fixiert im Fenster und wird
   nur eingeblendet, solange die Sektion im Bild ist. */
.licht-sek--voll .licht-sek__sticky, .reise--voll .reise__sticky {
  position: sticky; top: 0; height: 100svh;
  width: auto; margin-left: 0; margin-right: 0;
}
.licht-sek--voll .licht, .reise--voll .licht {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  opacity: 0; pointer-events: none; z-index: 0;
  transition: opacity .35s ease;
}
.licht-sek--voll.is-live .licht, .reise--voll.is-live .licht { opacity: 1; }
.licht-sek--voll .licht__leiste, .reise--voll .licht__leiste {
  position: fixed; left: 0; right: 0; top: 0; z-index: 3; opacity: 0; transition: opacity .35s ease;
}
.licht-sek--voll.is-live .licht__leiste, .reise--voll.is-live .licht__leiste { opacity: 1; }
.licht-sek--voll .reise__steps, .reise--voll .reise__steps {
  width: auto; margin-left: 0; margin-right: 0; margin-top: -100svh; position: relative; z-index: 2;
}
@media (max-width: 900px) {
  .licht-sek--voll .licht-sek__sticky, .reise--voll .reise__sticky,
  .licht-sek--voll .reise__steps, .reise--voll .reise__steps { width: auto; margin-left: 0; margin-right: 0; }
  .licht-sek--voll .reise__steps, .reise--voll .reise__steps { margin-top: -100svh; }
}

/* ========== Texte stehen still, solange ihre Etappe läuft ================
   Vorher scrollten die Bildunterschriften mit und wurden am unteren Rand
   abgeschnitten. Jetzt klebt jede Etappe für ihre Dauer am Bildschirm. */
.licht-sek--voll .reise__step, .reise--voll .reise__step {
  position: sticky; top: 0; height: 100svh;
  justify-content: flex-end;
  padding-bottom: clamp(5rem, 14vh, 10rem);
}
.licht-sek--voll .reise__step h3, .reise--voll .reise__step h3 { margin-bottom: .6rem; }
/* Der Film bleibt über die ganze Sektion sichtbar */
.licht-sek--voll .licht, .reise--voll .licht { transition: opacity .45s ease; }
@media (max-width: 900px) {
  .licht-sek--voll .reise__step, .reise--voll .reise__step {
    padding-bottom: clamp(6rem, 20vh, 10rem);
  }
}

/* ===== Bildunterschriften: eine feste Ebene, nur Deckkraft wechselt ====== */
.licht-sek--voll .reise__step, .reise--voll .reise__step {
  position: relative; top: auto;
  height: 130svh;                 /* Scroll-Länge je Etappe */
  display: block; padding: 0; opacity: 1; transform: none;
  pointer-events: none;
}
.reise__cap {
  position: fixed; left: 0; right: 0; bottom: clamp(4.5rem, 12vh, 9rem);
  z-index: 2; padding: 0 var(--pad); text-align: center;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(22px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.reise__step.is-on .reise__cap { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .licht-sek--voll .reise__step, .reise--voll .reise__step { height: 120svh; }
  .reise__cap { bottom: clamp(5.5rem, 16vh, 9rem); }
}
@media (prefers-reduced-motion: reduce) {
  .reise__cap { position: relative; opacity: 1; transform: none; bottom: auto; }
  .licht-sek--voll .reise__step, .reise--voll .reise__step { height: auto; padding: 2rem 0; }
}

/* ===== Film ohne position:fixed ==========================================
   iOS Safari schneidet fixierte Elemente in beschnittenen Sticky-Containern
   weg. Deshalb: eigene randlose Sektion, Bühne sticky, Film absolut darin. */
.lichtsektion { position: relative; padding: 0; margin: 0; background: var(--ink); }
.licht-sek--voll, .reise--voll .reise__grid { padding: 0; margin: 0; max-width: none; }
.licht-sek--voll .licht-sek__sticky, .reise--voll .reise__sticky {
  position: sticky; top: 0; height: 100svh; width: 100%;
  margin: 0; overflow: hidden;
}
.licht-sek--voll .licht, .reise--voll .licht {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 1; z-index: 0;
}
.licht-sek--voll .licht__leiste, .reise--voll .licht__leiste {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3; opacity: 1;
}
/* Bildunterschriften liegen in der Bühne, nicht im Fenster */
.licht-buehne__caps { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.reise__cap {
  position: absolute; left: 0; right: 0; bottom: clamp(4.5rem, 12vh, 9rem);
  padding: 0 var(--pad); text-align: center;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(22px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
.reise__step.is-on .reise__cap, .reise__cap.is-on { opacity: 1; transform: none; }
.licht-sek--voll .reise__steps, .reise--voll .reise__steps {
  margin: -100svh 0 0; padding: 0; position: relative; z-index: 1; pointer-events: none;
}
@media (max-width: 900px) { .reise__cap { bottom: clamp(5.5rem, 16vh, 9rem); } }

/* ============ Kapitel-Auftakt in den Film-Sektionen ====================== */
.licht-kapitel {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--pad);
  background: linear-gradient(180deg, rgba(22,19,15,.55), rgba(22,19,15,.15) 45%, rgba(22,19,15,.55));
  opacity: 0; transition: opacity .5s ease;
}
.licht-kapitel.is-on { opacity: 1; }
.licht-kapitel span {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .28em; color: var(--amber-lt);
  margin-bottom: 1rem;
}
.licht-kapitel b {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; color: var(--cream);
  font-size: clamp(2.4rem, 6.5vw, 5.4rem); line-height: 1; margin-bottom: .9rem;
  text-shadow: 0 2px 30px rgba(22,19,15,.8);
}
.licht-kapitel i {
  font-family: var(--serif); font-style: italic; color: var(--amber-lt);
  font-size: clamp(1.05rem, 2.1vw, 1.7rem); max-width: 24ch; line-height: 1.3;
}
@media (max-width: 900px) {
  .licht-kapitel b { font-size: clamp(2rem, 10vw, 2.8rem); }
  .licht-kapitel i { font-size: 1rem; }
}

/* Glut über den Film-Sektionen */
.licht-glut { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.licht-glut i {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,150,.9), rgba(255,190,90,0) 70%);
  opacity: 0; will-change: transform, opacity;
}

/* ===== Luft rausnehmen: zu großzügige Abstände in ruhigen Sektionen ====== */
.foerderung { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.marquee-sec { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.marquee-sec__label { margin-bottom: 1.4rem; }
.quote-sec { min-height: 78svh; }
.content > section.intro { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
/* Der Fortschrittsbalken der Seite läuft jetzt auch in den Film-Sektionen mit */
.licht__leiste i { transition: none; }

/* ===== Leistungen auf Mobil: gestapelte Karten statt gepinnter Kapitel ==== */
@media (max-width: 900px) {
  .kap-sec--liste { min-height: 0; }
  .kap-sec--liste .kap__grid { display: block; padding-top: 4rem; padding-bottom: 3rem; }
  .kap-sec--liste .kap__stage { position: static; min-height: 0; display: grid; gap: 1.1rem; margin-top: 2rem; }
  .kap-sec--liste .kap__item {
    position: static; opacity: 1; pointer-events: auto; display: block;
    border-radius: 18px; overflow: hidden; background: var(--ink-3);
    border: 1px solid rgba(246,239,228,.08);
  }
  .kap-sec--liste .kap__bild { aspect-ratio: 16 / 10; overflow: hidden; }
  .kap-sec--liste .kap__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .kap-sec--liste .kap__n { display: block; padding: 1.2rem 1.2rem 0; }
  .kap-sec--liste .kap__item h3 { font-size: 1.6rem; margin: .5rem 0 .5rem; padding: 0 1.2rem; }
  .kap-sec--liste .kap__item p { padding: 0 1.2rem 1.4rem; max-width: none; }
}

.licht__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ===== Der Hero IST der erste Film ======================================= */
.lichtsektion--start { margin-top: 0; }
.licht-hero {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--pad);
  background: linear-gradient(180deg, rgba(22,19,15,.72) 0%, rgba(22,19,15,.35) 40%, rgba(22,19,15,.55) 100%);
  transition: opacity .45s ease, transform .45s ease;
}
.licht-hero.is-on { opacity: 1; transform: none; }
.licht-hero:not(.is-on) { opacity: 0; transform: translateY(-14px); }
.licht-hero .intro-hero__cta,
.licht-hero a { pointer-events: auto; }
.licht-hero .intro-hero__claim {
  font-family: var(--display); font-weight: 600; color: var(--cream);
  font-size: clamp(2.4rem, 6.4vw, 5.4rem); line-height: 1; letter-spacing: -0.04em;
  margin: .3rem 0 1.6rem; text-shadow: 0 2px 30px rgba(22,19,15,.85);
}
.licht-hero .intro-hero__sub { color: var(--cream-dim); margin: 0 0 .4rem; max-width: 44ch; }
.licht-hero .intro-hero__cta {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.8rem; border-radius: 999px;
  background: linear-gradient(180deg, var(--amber-lt), var(--copper));
  color: #241206; font-weight: 700;
}
.licht-hero .intro-hero__hint {
  margin-top: 2rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .24em;
  color: var(--cream-dim); opacity: .8;
}
@media (max-width: 900px) {
  .licht-hero .intro-hero__claim { font-size: clamp(2rem, 9.5vw, 2.8rem); margin-bottom: 1.2rem; }
  .licht-hero .intro-hero__sub { font-size: .92rem; }
  .licht-hero .intro-hero__hint { margin-top: 1.2rem; }
}

/* Flüssigkeit: teure Filter auf Mobil aus, Kompositor-Hinweise setzen */
@media (max-width: 900px) {
  .funken, .licht-glut { display: none; }
  .counter__kachel::after { filter: blur(28px); }
  .foerderung__big::before { filter: blur(30px); animation: none; }
  .sec-bg img { will-change: auto; }
}
.licht__canvas, .licht__video { will-change: transform; backface-visibility: hidden; }
.reise__cap { will-change: opacity, transform; }

/* ===== Bildunterschriften: harter, kurzer Wechsel statt Kreuzblende =====
   Vorher fuhr der neue Text von unten herein, während der alte noch ausblendete
   — beim Scrollen standen dadurch kurzzeitig zwei Texte auf zwei Höhen im Bild. */
.reise__cap {
  transform: none !important;
  transition: opacity .18s linear !important;
}
.reise__cap:not(.is-on) { visibility: hidden; }
.reise__cap.is-on { visibility: visible; }
/* Auch der Kapitel-Auftakt wechselt hart, nicht überlappend */
.licht-kapitel, .licht-hero { transition: opacity .18s linear !important; }
.licht-kapitel:not(.is-on), .licht-hero:not(.is-on) { visibility: hidden; }

/* Nur die Bühne, die den Bildschirm füllt, zeigt ihre Texte */
.licht-buehne__caps:not(.is-sichtbar) .reise__cap { opacity: 0 !important; visibility: hidden !important; }

/* ===== Echtes Logo eingebunden ===========================================
   Der Claim steht bereits im Logo — die zusätzliche Textzeile entfällt dann. */
.marke-lockup.has-logo + .marke-lockup__claim { display: none; }
.marke-lockup.has-logo .marke-lockup__logo { height: clamp(66px, 7.5vw, 120px); max-width: min(86vw, 620px); }
.licht-hero .marke-lockup { margin-bottom: 1.1rem; }
@media (max-width: 900px) {
  .marke-lockup.has-logo .marke-lockup__logo { height: clamp(54px, 15vw, 78px); max-width: 88vw; }
}
.topbar__logo { object-fit: contain; }