/* Morgengrauen · pv-gs.com
   Tokens aus pv-goldstein-web/design/tokens.json: Navy #132A3A, Gold #DCB552,
   Edelweiss #F4F7F1, Manrope + IBM Plex Mono. Die Engine-Dateien bleiben
   unverändert, alles Eigene steht hier. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --sc-canvas:     #0A1620;
  --sc-surface:    #132A3A;
  --sc-ink:        #F4F7F1;
  --sc-ink-soft:   #A9B8C2;
  --sc-accent:     #DCB552;
  --sc-accent-ink: #132A3A;
  --sc-font-display: "Manrope", system-ui, sans-serif;
  --sc-font-text:    "Manrope", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --sc-shadow-color: 205 50% 8%;
  --sc-r-sm: 8px; --sc-r-md: 8px; --sc-r-lg: 8px;

  --navy: #132A3A;
  --nacht: #0A1620;
  --gold: #DCB552;
  --gold-hell: #F0CF72;
  --gold-dunkel: #6B5010;
  --edelweiss: #F4F7F1;
  --leiste-h: 4.25rem;
}

[hidden] { display: none !important; }

/* Lenis (weiches Scrollen, js/vendor/lenis.min.js) */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }

body { font-weight: 450; }
.sc-display { font-weight: 600; }
strong, b { font-weight: 700; }

/* Heller Grund: Token UND color neu setzen, sonst bleibt die geerbte Tinte. */
.hell {
  --sc-ink: #132A3A;
  --sc-ink-soft: #4A5D6B;
  --sc-accent: #132A3A;
  --sc-accent-ink: #F0CF72;
  --sc-hairline: color-mix(in oklab, #132A3A 14%, transparent);
  color: var(--sc-ink);
  background: var(--edelweiss);
}
.hell ::selection { background: #132A3A; color: #F0CF72; }

.sprung {
  position: fixed; left: var(--sc-gutter); top: -4rem; z-index: 100;
  background: var(--gold); color: var(--navy); padding: .6rem 1rem;
  border-radius: 8px; font-weight: 700; text-decoration: none;
}
.sprung:focus-visible { top: .75rem; }

/* ------------------------------------------------------------- Leiste -- */
.leiste {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--leiste-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  padding-inline: var(--sc-gutter);
  color: var(--edelweiss);
  background: linear-gradient(to bottom, rgb(10 22 32 / .82), rgb(10 22 32 / .5) 60%, transparent);
  transition: color var(--sc-d-base) var(--sc-ease-out), background-color var(--sc-d-base) var(--sc-ease-out);
}
.leiste__marke {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; color: inherit;
  font-size: var(--sc-t-sm); letter-spacing: .01em; font-weight: 500;
}
.leiste__marke img { width: 2.1rem; height: 2.1rem; }
.leiste__marke b { font-weight: 700; }
.leiste--hell {
  color: var(--navy);
  background: color-mix(in oklab, var(--edelweiss) 88%, transparent);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--navy) 10%, transparent);
}

/* ---------------------------------------------------------------- CTA -- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .8rem 1.4rem;
  border: 0; border-radius: 8px;
  background: var(--gold); color: var(--navy);
  font-weight: 700; font-size: var(--sc-t-base); letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--sc-e1);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out),
              color var(--sc-d-fast) var(--sc-ease-out),
              box-shadow var(--sc-d-fast) var(--sc-ease-out),
              scale var(--sc-d-fast) var(--sc-ease-out);
}
.cta--klein { min-height: 2.6rem; padding: .55rem 1.05rem; font-size: var(--sc-t-sm); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: var(--gold-hell); box-shadow: var(--sc-e2); }
}
.cta:active { scale: .97; }
.cta:disabled { opacity: .55; cursor: progress; }
.leiste--hell .cta, .hell .cta { background: var(--navy); color: var(--gold-hell); }
@media (hover: hover) and (pointer: fine) {
  .leiste--hell .cta:hover, .hell .cta:hover { background: #1C3B50; }
}
.hell :focus-visible, .leiste--hell :focus-visible { outline-color: var(--navy); }

/* ------------------------------------------------------------ 1 Nacht -- */
/* Der Grund unter der Nachtbühne trägt schon den Ton des Sonnenaufgangs. */
.nacht { background: #12283A; }
.nacht__stage { background: var(--nacht); --horizont: 79%; }
/* Die ganze Nachtwelt wandert beim Scrollen langsam nach links. Vordergrund und
   Himmel liegen dabei im selben Kasten, damit nichts gegeneinander verrutscht. */
.nacht__welt {
  position: absolute; inset: 0; overflow: clip;
  /* Beim Monduntergang fährt die Kamera langsam in die Stadt hinein. */
  /* v2: ohne Seitwärtsfahrt, sonst liegen Nacht- und Aufgangsbild beim Überblenden versetzt. */
  transform: scale(calc(1.02 + var(--sc-p, 0) * 0.12));
  transform-origin: 50% 62%;
  will-change: transform;
}
.nacht__himmel {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%;
  /* Etwas dunkler als die Vorlage: Es ist Mitternacht, und der Text liegt darauf. */
  filter: brightness(.76) saturate(.95);
}
.nacht__film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: brightness(.76) saturate(.95);
  opacity: 0; transition: opacity 300ms var(--sc-ease-out);
}
.nacht__film.bereit { opacity: 1; }
.nacht__mondbahn { position: absolute; inset: 0; pointer-events: none; }
/* v2: Sternenebene über dem Film, verblasst mit der Dämmerung. */
.nacht__sterne {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  opacity: calc(1 - clamp(0, (var(--sc-p, 0) - 0.4) / 0.4, 1));
}
/* Sternschnuppe: kurzer Satz an ihrem Ende, nur bei der ersten. */
.nacht__wunsch {
  position: absolute; z-index: 3; margin: 0; pointer-events: none;
  translate: -50% 0; white-space: nowrap;
  font-family: var(--sc-font-mono); font-weight: 500; font-size: var(--sc-t-sm);
  letter-spacing: .04em; color: #FFF6DD;
  text-shadow: 0 0 12px rgb(255 246 221 / .45);
  opacity: 0; transition: opacity 180ms var(--sc-ease-out);
}
.nacht__wunsch.an { opacity: .92; }
/* v2: Der Mond wandert von links oben nach rechts unten und sinkt dabei immer
   schneller, bis er sich über der Skyline im Dunst verliert. */
.nacht__stage { --mond: clamp(0, var(--sc-p, 0) / 0.82, 1); }
.nacht__mond.nacht__mond {
  left: calc(8% + var(--mond) * 70%);
  transform: translate3d(0, calc(6vh + var(--mond) * var(--mond) * 36vh), 0);
  opacity: clamp(0, (1 - var(--mond)) / 0.22, 1);
  filter: blur(calc(var(--mond) * var(--mond) * 1.6px));
}
.nacht__mond {
  position: absolute; left: 82%; top: 0;
  width: clamp(4.5rem, 10vmin, 8rem); height: auto;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--sc-p, 0) * 4vw), calc(9vh + var(--sc-p, 0) * 46vh), 0);
  /* Zum Horizont hin verliert er sich im Dunst, statt an einer Kante zu enden. */
  /* Er verliert sich im Dunst, bevor er auf die Dächer trifft. */
  opacity: clamp(0, (0.66 - var(--sc-p, 0)) / 0.2, 1);
  filter: blur(calc(var(--sc-p, 0) * 1.4px));
  will-change: transform, opacity;
}
/* Am Ende der Nacht wird der Horizont warm: die Überleitung zum Dach-Bild. */
.nacht__horizont { display: none; } /* v2: das Licht kommt aus dem Film */
.nacht__horizont-alt {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 60vh; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 100%, rgb(232 150 70 / .55) 0%, rgb(160 90 60 / .22) 45%, transparent 75%);
  opacity: clamp(0, (var(--sc-p, 0) - 0.35) / 0.65, 1);
}
/* Weicher Saum nach unten, damit die Bühne nicht mit harter Kante endet. */
.nacht__saum {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgb(18 40 58 / .35) 40%, #12283A 82%, #12283A 100%);
}
.nacht__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(10 22 32 / .9) 0%, rgb(10 22 32 / .68) 38%, rgb(10 22 32 / .3) 62%, transparent 78%);
}
.nacht__fakt .wort {
  display: inline-block;
  opacity: 0; transform: translate3d(0, 0.5em, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 720ms var(--sc-ease-out);
  transition-delay: calc(var(--i, 0) * 35ms);
}
.nacht__fakt.an .wort { opacity: 1; transform: none; }
/* Weicher Grund genau dort, wo die Textspalte steht. Eigenes Element, damit die
   Kontrastmessung es mitliest. */
.nacht__textgrund {
  position: absolute; inset: 0; pointer-events: none;
  /* Weicher Kern ohne Kanten: eine Ellipse, die nach allen Seiten ausläuft. */
  background: radial-gradient(75% 62% at 8% 48%, rgb(8 18 27 / .95) 0%, rgb(8 18 27 / .84) 32%, rgb(8 18 27 / .52) 58%, rgb(8 18 27 / .2) 80%, transparent 100%);
}
.nacht__zahl {
  display: inline-block; position: relative; font-variant-numeric: tabular-nums;
  color: var(--gold-hell);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.nacht__zahl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.14em; height: 2px;
  background: var(--gold); transform-origin: 0 50%;
  transform: scaleX(clamp(0, (var(--sc-p, 0) - 0.5) / 0.14, 1));
}
/* „Photovoltaik-Shop“ in Gold mit derselben Linie wie die 1,5: Sie wächst beim
   Scrollen mit (Nacht-p 0,02 bis 0,2) und schrumpft beim Zurückscrollen. */
.nacht__gold {
  position: relative; display: inline-block; color: var(--gold-hell);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.nacht__gold::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.14em; height: 2px;
  background: var(--gold); transform-origin: 0 50%;
  transform: scaleX(clamp(0, (var(--sc-p, 0) - 0.02) / 0.18, 1));
}
@media (hover: hover) and (pointer: fine) {
  .nacht__unter:hover .nacht__gold { color: #FFE9A8; }
}
@media (hover: hover) and (pointer: fine) {
  .nacht__fakt:hover .nacht__zahl { color: #FFE9A8; }
}
@media (prefers-reduced-motion: reduce) {
  .nacht__fakt .wort { opacity: 1; transform: none; }
}
.nacht__copy {
  position: absolute; left: var(--sc-gutter); right: auto; max-width: min(40rem, 56vw);
  top: 50%; translate: 0 -50%;
}
.nacht__copy h1 { max-width: 11ch; }
.nacht__unter {
  margin: var(--sc-5) 0 0; color: #D3DDE3;
  font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug);
}
.nacht__fakt {
  position: absolute; left: var(--sc-gutter); right: auto; top: 50%; translate: 0 -50%;
  max-width: 22ch; font-size: var(--sc-t-2xl); line-height: 1.1; font-weight: 600;
  letter-spacing: var(--sc-track-snug); text-wrap: balance;
}

/* ------------------------------------------ 2 Sonnenaufgang (Signature) -- */
/* 0,3 Bildschirmhöhen Überlappung mit der Nacht: dort blendet der Aufgang ein. */
.aufgang { margin-top: -130svh; }
.aufgang__stage {
  /* Schnell deckend, damit das Nachtbild nicht durch den Morgenhimmel scheint. */
  opacity: clamp(0, (var(--sc-p, 0) - 0.04) / 0.06, 1);
  /* Der Aufgang beginnt selbst noch dunkel und hellt erst danach auf. */
  --daemmer: clamp(0, (var(--sc-p, 0) - 0.06) / 0.2, 1);
  --glut:  clamp(0, (var(--sc-p, 0) - 0.30) / 0.24, 1);
  --sonne: clamp(0, (var(--sc-p, 0) - 0.44) / 0.16, 1);
  --netz:  clamp(0, (var(--sc-p, 0) - 0.52) / 0.14, 1);
  --licht: clamp(0, (var(--sc-p, 0) - 0.62) / 0.22, 1);
  --tag:   clamp(0, (var(--sc-p, 0) - 0.80) / 0.17, 1);
  background: var(--navy);
  --copy-top: calc(clamp(5rem, 17vh, 10rem) + clamp(7rem, 17vmin, 11rem) + clamp(1rem, 3vh, 2.25rem));
  --copy-h: calc(var(--sc-t-3xl) * 2 + var(--sc-t-lg) * 1.5 + clamp(3rem, 7vh, 5.5rem));
}
.aufgang__poster, .aufgang__film {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Der Sonnenaufgang setzt den Zoom der Nacht fort und fährt wieder heraus. */
  transform: scale(calc(1.14 - clamp(0, var(--sc-p, 0) / 0.55, 1) * 0.14));
  transform-origin: 50% 62%;
  /* So dunkel wie die Nacht, aus der er kommt: die Überblendung liegt dadurch
     zwischen zwei gleich dunklen Bildern und erzeugt kein Doppelbild. */
  /* Setzt die Abdunkelung der Nacht (.76) fort und hellt dann auf volle Helligkeit auf. */
  filter: brightness(calc(0.76 + var(--daemmer, 1) * 0.24)) saturate(calc(0.95 + var(--daemmer, 1) * 0.05));
}
.aufgang__film { opacity: 0; transition: opacity 300ms var(--sc-ease-out); }
.aufgang__film.bereit { opacity: 1; }
.aufgang__glut {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 36%, #FFF6DD 0%, #F9E4A8 38%, #F0CC7A 68%, #E2B95E 100%);
  opacity: calc(var(--glut) * 0.92);
}
.aufgang__tag {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--edelweiss); opacity: var(--tag);
}
.aufgang__sonne {
  position: absolute; z-index: 4; left: 50%; top: clamp(5rem, 17vh, 10rem);
  width: clamp(7rem, 17vmin, 11rem); aspect-ratio: 1;
  translate: -50% 0;
  opacity: var(--sonne);
  scale: calc(.55 + var(--sonne) * .45);
}
.aufgang__sonne svg { width: 100%; height: 100%; overflow: visible; }
.au-strahlen { transform-origin: 0 0; rotate: calc((1 - var(--sonne)) * -40deg); }
.au-raster path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--netz)); }
.au-punkte { opacity: clamp(0, (var(--netz) - .7) / .3, 1); }
.aufgang__copy {
  position: absolute; z-index: 5; left: var(--sc-gutter); right: var(--sc-gutter);
  top: var(--copy-top);
  text-align: center; color: var(--navy);
}
.aufgang__headline {
  margin: 0 auto; max-width: 17ch;
  font-size: var(--sc-t-3xl); font-weight: 650; line-height: .98; letter-spacing: -.04em;
  text-wrap: balance;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--licht) * 130% - 30%), transparent calc(var(--licht) * 130%));
          mask-image: linear-gradient(90deg, #000 calc(var(--licht) * 130% - 30%), transparent calc(var(--licht) * 130%));
}
.aufgang__unter {
  margin: var(--sc-5) auto 0; font-size: var(--sc-t-lg); font-weight: 550; color: #3A4E5C;
  opacity: clamp(0, (var(--licht) - .75) / .25, 1);
}


/* Die Marken laufen in die helle Fläche des Höhepunkts ein, sobald der Tag da ist. */
.aufgang__marken {
  position: absolute; z-index: 5; left: 0; right: 0;
  top: calc(var(--copy-top) + var(--copy-h)); bottom: auto;
  opacity: clamp(0, (var(--sc-p, 0) - 0.79) / 0.015, 1);
  translate: 0 calc((1 - clamp(0, (var(--sc-p, 0) - 0.8) / 0.05, 1)) * 1.25rem);
}
.aufgang__markentitel {
  /* Steht unter den Logo-Bändern, über der Sortimentszeile. */
  margin: var(--sc-5) auto 0;
  padding-inline: var(--sc-gutter);
  max-width: var(--sc-maxw);
  font-size: var(--sc-t-lg); font-weight: 650; letter-spacing: var(--sc-track-snug);
  color: var(--navy); text-align: center;
}
.aufgang__markenzeile {
  margin: var(--sc-4) auto 0; padding-inline: var(--sc-gutter);
  max-width: 62ch; text-align: center;
  font-size: var(--sc-t-sm); color: #4A5D6B;
}
.marken__baender { display: grid; gap: var(--sc-2); }

.band {
  overflow: clip;
  /* In Länge statt Prozent: 6 % sind am Handy nur 23 px, das liest sich als
     abgeschnittenes Logo statt als Ausblendung. */
  --saum: clamp(2.5rem, 9%, 5.5rem);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--saum), #000 calc(100% - var(--saum)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--saum), #000 calc(100% - var(--saum)), transparent 100%);
}
/* Die Spur läuft doppelt so lang wie sichtbar, deshalb schiebt sie sich um genau
   die halbe Breite und fängt danach nahtlos von vorne an. */
.band__spur {
  display: flex; align-items: stretch; gap: var(--sc-4);
  margin: 0; padding: 0; list-style: none; width: max-content;
  animation: band-laufen var(--dauer, 52s) linear infinite;
}
/* Oben läuft es nach rechts, unten nach links. */
.band--vor .band__spur { animation-direction: reverse; }
@keyframes band-laufen {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marken__baender:hover .band__spur,
.marken__baender:focus-within .band__spur { animation-play-state: paused; }
.marke__name {
  color: var(--marke, var(--navy));
  font-weight: 700; font-size: var(--sc-t-base); letter-spacing: -.01em; white-space: nowrap;
}
/* Keine Kacheln: Die Logos stehen frei auf dem hellen Grund. */
.marke {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  min-width: 9rem; height: 3.5rem; padding: 0 1rem;
}
.marke__logo {
  max-height: 2.3rem; max-width: 9.5rem; width: auto; object-fit: contain;
  filter: saturate(1.65) contrast(1.32);
}
@media (prefers-reduced-motion: reduce) {
  /* Stehende Bänder beginnen links mit dem ersten Logo, dort gibt es nichts
     auszublenden. Nur rechts läuft die Reihe über den Rand hinaus. */
  .band {
    overflow: clip;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--saum)), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--saum)), transparent 100%);
  }
  .band__spur { animation: none; }
  .aufgang__marken { opacity: 1; translate: none; }
}

/* ------------------------------------------------------ 5 Warteliste -- */
/* 0,5 Bildschirmhöhen Überlappung mit dem Höhepunkt: die Warteliste schiebt sich
   über die Markenbänder, statt dass dazwischen eine leere Fläche durchläuft. */
.warteliste { margin-top: -22svh; }
/* Niedrige Laptop-Bildschirme: Der Markenblock füllt dort fast die ganze Höhe,
   weniger Überlappung lässt die Sortimentszeile länger stehen. */
@media (min-width: 861px) and (max-height: 950px) {
  .warteliste { margin-top: -12svh; }
}
.liste__stage { background: var(--edelweiss); color: var(--navy); }
.liste__bild {
  position: absolute; inset: 0; pointer-events: none; opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .55) 0%, transparent 42%, rgb(0 0 0 / .85) 100%);
          mask-image: linear-gradient(180deg, rgb(0 0 0 / .55) 0%, transparent 42%, rgb(0 0 0 / .85) 100%);
}
/* Schmaler heller Schleier nur unter der Fußzeile, damit die Zeile lesbar bleibt. */
.liste__fussschleier {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7rem; pointer-events: none; z-index: 4;
  background: linear-gradient(to top, color-mix(in oklab, var(--edelweiss) 88%, transparent), transparent);
}
.liste__bild img { width: 100%; height: 100%; object-fit: cover; }
.liste__inner {
  position: absolute; z-index: 5; left: var(--sc-gutter); right: var(--sc-gutter);
  top: calc(var(--leiste-h) + clamp(.75rem, 4vh, 4.5rem));
  max-width: 72rem;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.liste__inner h2 { grid-column: 1 / -1; font-size: var(--sc-t-3xl); max-width: 20ch; }
.liste__text { grid-column: 1; }
.liste__vorteil { margin: var(--sc-6) 0 0; font-size: var(--sc-t-lg); line-height: 1.45; max-width: 34ch; }
.liste__form { grid-column: 2; margin-top: var(--sc-6); display: grid; gap: var(--sc-4); }
.feld { display: grid; gap: var(--sc-2); }
.feld label, .wahl legend { font-weight: 650; font-size: var(--sc-t-sm); }
.feld label span { font-weight: 450; color: var(--sc-ink-soft); }
.feld input {
  min-height: 3rem; padding: .7rem .9rem; border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--navy) 38%, transparent);
  background: #FFFFFF; color: var(--navy);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.feld input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.feld input[aria-invalid="true"] { border-color: #A4262C; box-shadow: 0 0 0 1px #A4262C; }
.wahl { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); }
.wahl legend { margin-bottom: var(--sc-2); padding: 0; }
.wahl label, .einwilligung { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.wahl label { align-items: center; min-height: 2.75rem; }
.wahl input, .einwilligung input { width: 1.2rem; height: 1.2rem; margin: 0; flex: 0 0 auto; accent-color: var(--navy); }
.einwilligung { font-size: var(--sc-t-xs); line-height: 1.5; color: #33475A; }
.einwilligung input { margin-top: .12rem; }
.einwilligung a { color: var(--navy); font-weight: 650; }
.liste__form .cta { justify-self: start; }
.liste__status { margin: 0; min-height: 1.5em; font-weight: 600; font-size: var(--sc-t-sm); }
.liste__status[data-art="fehler"] { color: #A4262C; }
.liste__status[data-art="ok"] { color: #2F6125; }
.liste__klein { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); line-height: 1.5; color: #33475A; max-width: 44ch; }
/* Countdown: eine Zeile in Mono über der Headline. */
.liste__start {
  grid-column: 1 / -1; margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-mono); font-weight: 500; font-size: var(--sc-t-sm);
  letter-spacing: .02em; color: #6B5010;
}
.liste__rest { color: var(--navy); font-variant-numeric: tabular-nums; }
.liste__rest:not(:empty)::before { content: " · noch "; color: #6B5010; }
/* Angebot: Häkchen klappt die Adresse auf. */
.angebot { display: flex; gap: .6rem; align-items: center; cursor: pointer; font-size: var(--sc-t-sm); font-weight: 550; }
.angebot input { width: 1.2rem; height: 1.2rem; margin: 0; flex: 0 0 auto; accent-color: var(--navy); }
.adresse { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sc-3); }
.adresse[hidden] { display: none; }
.feld--strasse { grid-column: 1 / -1; }
.adresse .feld { min-width: 0; }
.adresse input { width: 100%; min-width: 0; box-sizing: border-box; }
/* Sonnen-Zähler: eine ruhige Zeile, keine Kachel. */
.liste__sonne {
  margin: var(--sc-5) 0 0; padding-top: var(--sc-4); max-width: 40ch;
  border-top: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-sm); line-height: 1.5; color: #33475A;
}
.liste__sonne strong { font-family: var(--sc-font-mono); font-weight: 500; color: var(--navy); font-variant-numeric: tabular-nums; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fuss {
  position: absolute; z-index: 5; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 1.1rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  font-size: var(--sc-t-xs); color: #3A4E5C;
}
.fuss a { color: var(--navy); }
[data-sc-spotlight].liste__stage::after {
  background: radial-gradient(30rem 30rem at calc(var(--sc-mx, .5) * 100%) calc(var(--sc-my, .5) * 100%),
    rgb(240 207 114 / .22), transparent 70%);
}

/* ------------------------------------------------------------- mobil -- */
@media (max-width: 860px) {
  :root { --leiste-h: 3.75rem; }
  /* Safari vergrößert den sichtbaren Bereich, wenn seine Leisten einklappen.
     100svh bleibt dabei klein und legt den dunkelblauen Seitengrund frei. */
  .nacht__stage, .aufgang__stage { height: 100vh; height: 100dvh; }
  .marke { min-width: 6.5rem; height: 2.5rem; padding: 0 .6rem; }
  .marke__logo { max-height: 1.6rem; max-width: 5.5rem; }
  /* Unter dem Introtext verankern, nicht am unteren Viewportrand. So bleiben
     Text und Marken auch bei niedrigen mobilen Safari-Viewports getrennt. */
  .aufgang__marken {
    top: calc(var(--copy-top) + var(--copy-h) + var(--sc-2));
    bottom: auto;
  }
  /* Keine Nebelmaske am Handy: angeschnittene Logos bleiben farbig und scharf. */
  .band { -webkit-mask-image: none; mask-image: none; }
  .aufgang__markentitel { font-size: var(--sc-t-base); }
  .aufgang__markenzeile { font-size: var(--sc-t-xs); }
  .marke__name { font-size: var(--sc-t-sm); }
  .marke__logo { max-height: 1.9rem; max-width: 7rem; }
  .leiste__marke span { display: none; }
  .sc-display--xl { font-size: var(--sc-t-3xl); }
  .nacht__copy { top: 36%; right: auto; max-width: 17rem; }
  .nacht__stage { --horizont: 79%; }
  /* Der Mond nutzt auch mobil die durchgehende diagonale Desktopbahn. */
  .nacht__scrim { background: linear-gradient(180deg, rgb(10 22 32 / .62) 0%, rgb(10 22 32 / .3) 55%, rgb(10 22 32 / .62) 100%); }
  .nacht__textgrund { background: radial-gradient(120% 55% at 30% 40%, rgb(8 18 27 / .94) 0%, rgb(8 18 27 / .82) 35%, rgb(8 18 27 / .5) 62%, rgb(8 18 27 / .18) 82%, transparent 100%); }
  .nacht__fakt { top: 36%; max-width: 17rem; font-size: var(--sc-t-xl); line-height: 1.14; }
  .aufgang__headline { font-size: var(--sc-t-2xl); }
  .liste__bild { inset: 0; opacity: .16; -webkit-mask-image: none; mask-image: none; }
  .liste__inner { top: calc(var(--leiste-h) + .75rem); display: block; }
  .liste__inner h2 { font-size: var(--sc-t-2xl); }
  .liste__vorteil { font-size: var(--sc-t-base); }
  .liste__form { margin-top: var(--sc-4); gap: var(--sc-3); }
  .liste__klein { display: none; }
  .liste__sonne { margin-top: var(--sc-3); padding-top: var(--sc-3); font-size: var(--sc-t-xs); }
  .liste__vorteil { margin-top: var(--sc-3); }
  .fuss { bottom: .6rem; gap: .2rem 1rem; }
}
@media (max-width: 860px) and (max-height: 760px) {
  .liste__vorteil { display: none; }
}
/* Handy: Die Warteliste fließt nach unten weiter statt in einem Bildschirm
   festzustehen. Countdown, Zähler und aufgeklappte Adresse passen sonst nicht,
   und der Knopf läge auf der Fußzeile. Alle Texte bleiben wie am Desktop sichtbar. */
@media (max-width: 860px) {
  .warteliste { margin-top: -6svh; height: auto !important; }
  .liste__stage { position: relative; height: auto; min-height: 100svh; min-height: 100dvh; }
  .liste__inner { position: relative; inset: auto; padding: calc(var(--leiste-h) + 1rem) 0 var(--sc-6); }
  .liste__stage > .liste__inner { margin-inline: var(--sc-gutter); }
  .fuss { position: relative; inset: auto; margin: 0 var(--sc-gutter); padding-bottom: 1.25rem; }
  .liste__vorteil, .liste__klein { display: block; }
}

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .nacht__mond { transform: translate3d(0, 14vh, 0); }
  .nacht__welt { transform: scale(1.04); }
  .aufgang__poster, .aufgang__film { transform: none; filter: none; }
  .aufgang__sonne { scale: 1; }
  .au-strahlen { rotate: 0deg; }
}