/* Scroll-Konzept · lokale Vorschau, getrennt von der Live-Seite.
   Farben und Schrift aus dem Goldstein-Auftritt, eigene Klassen, keine Abhängigkeit zu seite.css. */

@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 {
  --nacht: #08090B;
  --flaeche: #101217;
  --navy: #132A3A;
  --warmweiss: #F4F2EF;
  --grau: #9A9BA1;
  --gold: #DCB552;
  --gold-hell: #F3D27A;
  --gold-tief: #6B5010;
  --tinte: #132A3A;
  --tinte-soft: #45596A;
  --haar: color-mix(in oklab, #F4F2EF 14%, transparent);
  --haar-hell: color-mix(in oklab, #132A3A 12%, transparent);

  --schrift: "Manrope", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --rand: clamp(1.5rem, 5vw, 5rem);
  --sonne-d: clamp(6rem, 15vh, 10rem);
  --kopf-h: 4.5rem;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Hero-Karten als Glas: ein gemeinsames Materialrezept für Karten, Suchfeld und Kacheln.
     Die Szene bleibt durch die Fläche sichtbar (Unschärfe dahinter), leicht aufgehellte Oberfläche,
     helle Lichtkante oben, feine warm-goldene Kontur, flacher Schatten. Ohne backdrop-filter: dichtere Tönung. */
  --karte-grund: rgb(14 35 52 / .8);           /* ohne backdrop-filter */
  --karte-grund-blur:
    linear-gradient(180deg, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / .05) 45%, rgb(255 255 255 / .03) 100%),
    rgb(10 26 40 / .32);
  --karte-rand: rgb(236 208 140 / .34);
  --karte-rand-hover: rgb(236 208 140 / .6);
  --karte-blur: blur(16px) saturate(150%) brightness(.9);
  --karte-radius: 14px;
  --karte-schatten: 0 1px 0 rgb(255 255 255 / .22) inset, 0 -1px 0 rgb(255 255 255 / .04) inset, 0 18px 40px -26px rgb(3 10 17 / .55);
  --kachel-grund: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03));
  --kachel-rand: rgb(236 208 140 / .26);
  --feld-grund: linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / .03)), rgb(6 18 28 / .24);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--kopf-h); }
body {
  margin: 0; background: var(--nacht); color: var(--warmweiss);
  font: 450 1rem/1.55 var(--schrift);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
img, svg { display: block; }
a { color: inherit; }
::selection { background: var(--navy); color: var(--gold-hell); }
:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; border-radius: 4px; }

.ico { width: 1.25em; height: 1.25em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico--gold { color: var(--gold); }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sprung {
  position: fixed; left: var(--rand); 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; }

/* ----------------------------------------------------------------- Knopf */
/* Ein primärer CTA-Stil für die ganze Seite. --klein nur für den Kopf. */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  height: 3.5rem; padding: 0 2rem;
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-hell) 0%, var(--gold) 100%);
  color: var(--navy); font: 700 1.0625rem/1 var(--schrift); letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 0 rgb(255 255 255 / .4) inset, 0 10px 24px -14px rgb(160 120 30 / .7);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.knopf .ico { width: 1.25rem; height: 1.25rem; stroke-width: 2; transition: transform .2s var(--ease); }
.knopf:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 1px 0 rgb(255 255 255 / .45) inset, 0 14px 28px -14px rgb(160 120 30 / .8); }
.knopf:hover .ico { transform: translateX(3px); }
.knopf:active { transform: translateY(0) scale(.98); filter: brightness(.97); }
.knopf:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--warmweiss), 0 0 0 4px var(--navy); }
.knopf--klein { height: 2.75rem; padding: 0 1.25rem; gap: .5rem; font-size: .9375rem; }
.knopf--klein .ico { width: 1.1rem; height: 1.1rem; }
.knopf:disabled { opacity: .6; cursor: progress; }

/* ------------------------------------------------------------------ Kopf */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--kopf-h);
  display: flex; align-items: center; gap: 2rem;
  padding-inline: var(--rand);
  color: var(--warmweiss);
  transition: color .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.kopf--hell {
  color: var(--tinte);
  background: rgb(244 242 239 / .82);
  -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 10px 30px -24px rgb(19 42 58 / .35);
}
.kopf__marke { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; flex: 0 0 auto; }
.kopf__logo { width: 2.75rem; height: 2.75rem; }
.kopf__name { font-weight: 700; font-size: 1rem; line-height: 1.1; letter-spacing: -.01em; }
.kopf__nav { display: flex; gap: 2rem; margin-left: 1.5rem; font-size: .9rem; font-weight: 550; }
.kopf__nav a { text-decoration: none; opacity: .9; line-height: 1; padding-block: .5rem; }
.kopf__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .4em; text-decoration-color: var(--gold); }
.kopf__start { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; line-height: 1; opacity: .88; white-space: nowrap; }
.kopf__start .ico { width: 1.05rem; height: 1.05rem; }
.kopf .knopf--klein { box-shadow: 0 1px 0 rgb(255 255 255 / .4) inset; }

/* ----------------------------------------------------------------- Bühne */
.buehne { position: relative; height: 1215vh; background: var(--nacht); }
.buehne__sticky {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
  isolation: isolate;
}

.himmel { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0A1620; }
.himmel__kamera { position: absolute; inset: 0; will-change: transform; }
.himmel__medium { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
/* Standbild nur im ruhigen Modus, sonst läuft das Video */
.himmel__standbild { display: none; }
@media (max-width: 860px) { .himmel__medium { object-position: 50% 60%; } }
/* Sterne in drei Ebenen, die langsam driften, plus eine Ebene, die ganz leicht funkelt */
.himmel__sterne { position: absolute; inset: 0; pointer-events: none; }
.sterne { position: absolute; top: 0; left: -6%; width: 112%; height: 62%; will-change: transform; }
.sterne--fern { animation: drift 240s linear infinite alternate; }
.sterne--mitte { animation: drift 170s linear infinite alternate-reverse; }
.sterne--nah { animation: drift 120s linear infinite alternate; }
.sterne--funkeln { animation: drift 170s linear infinite alternate-reverse, funkeln 5.5s ease-in-out infinite; }
.sterne--funkeln2 { animation: drift 240s linear infinite alternate, funkeln 7s 2.2s ease-in-out infinite; }
.sterne-ruhen .sterne, .baender-ruhen .band__spur { animation-play-state: paused; }
@keyframes drift { from { transform: translate3d(-2.2%, 0, 0); } to { transform: translate3d(2.2%, -1.2%, 0); } }
@keyframes funkeln { 0%, 100% { opacity: .95; } 50% { opacity: .35; } }

/* Mond: Blend auf dem Container, damit der dunkle Bildrand wirklich verschwindet.
   Maske sitzt knapp auf dem Mondrand, die Korona ist ein eigener, weicher Verlauf. */
.himmel__mondbahn {
  position: absolute; left: 7%; top: 11%;
  width: clamp(3.8rem, 6.4vw, 6.4rem); aspect-ratio: 1;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  /* Monduntergang: Weg in Viewport-Einheiten, der Fortschritt (--mondweg) kommt aus der Timeline */
  translate: calc(var(--mondweg, 0) * var(--mond-x, 10vw)) calc(var(--mondweg, 0) * var(--mond-y, 44vh));
  scale: calc(1 - var(--mondweg, 0) * .14);
}
.himmel__mondbahn::before {
  content: ""; position: absolute; inset: -90%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(246 238 214 / .16) 0%, rgb(246 238 214 / .07) 22%, rgb(246 238 214 / .02) 40%, transparent 60%);
}
.himmel__mond {
  position: relative; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 73%, transparent 77.5%);
          mask-image: radial-gradient(circle closest-side, #000 73%, transparent 77.5%);
}
/* Sternschnuppe: Laufweg setzt konzept.js, alle 7–12 s */
.himmel__schnuppe {
  position: absolute; left: 0; top: 0; width: 11rem; height: 1.5px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(236 242 250 / .35) 60%, rgb(255 255 255 / .95) 100%);
  border-radius: 2px; transform-origin: 100% 50%;
}
.himmel__schnuppe::after {
  content: ""; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; translate: 0 -50%;
  border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgb(255 255 255 / .6);
}
/* Warmes Licht dort, wo im Film die Sonne steht. Position setzt konzept.js. */
.himmel__glut {
  position: absolute; left: var(--sonne-x, 86%); top: var(--sonne-y, 47%);
  width: 70vmax; height: 70vmax; translate: -50% -50%;
  background: radial-gradient(circle, rgb(243 210 122 / .4) 0%, rgb(220 181 82 / .14) 24%, transparent 55%);
  opacity: 0; mix-blend-mode: screen; pointer-events: none;
}
/* Dunkelt für den Hero-Text ab: links kräftig, rechts frei für die Sonne. */
.himmel__schleier {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(8 9 11 / .88) 0%, rgb(9 26 39 / .74) 32%, rgb(13 34 50 / .4) 58%, rgb(13 34 50 / .26) 100%),
    linear-gradient(180deg, rgb(8 9 11 / .66) 0%, rgb(13 34 50 / 0) 24%, rgb(13 34 50 / .08) 60%, rgb(8 9 11 / .88) 100%);
}

.hinweis {
  position: absolute; left: 50%; bottom: 2.2rem; z-index: 3; translate: -50% 0;
  display: grid; justify-items: center; gap: .7rem;
  font: 500 .72rem/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: rgb(244 242 239 / .7);
}
.hinweis::after {
  content: ""; width: 1px; height: 2.8rem;
  background: linear-gradient(180deg, rgb(244 242 239 / .7), transparent);
  animation: hinweis 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes hinweis { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ------------------------------------------------------------------ Hero */
.held {
  position: absolute; inset: 0; z-index: 2;
  padding: calc(var(--kopf-h) + clamp(1rem, 4vh, 3rem)) var(--rand) 0;
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
  grid-template-rows: 1fr auto; column-gap: clamp(1.5rem, 3vw, 3rem);
  pointer-events: none;
}
.held a, .held input, .held button { pointer-events: auto; }
.held__text { align-self: center; max-width: 42rem; padding-bottom: 2vh; }
.held__label {
  display: flex; align-items: center; gap: 1rem;
  font: 700 .78rem/1 var(--schrift); letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
}
.held__label::after { content: ""; width: 2.4rem; height: 2px; background: var(--gold); }
.held__titel {
  margin-top: 1.1rem;
  font-size: clamp(2.3rem, 1rem + 3vw, 3.75rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 700;
}
.zeile { display: block; }
.zeile--gold { color: var(--gold); }
.held__unter { margin-top: 1.4rem; font-size: clamp(1rem, .9rem + .45vw, 1.28rem); line-height: 1.42; max-width: 42ch; }
.held__text-lang { margin-top: 1.1rem; font-size: clamp(.95rem, .88rem + .25vw, 1.08rem); line-height: 1.55; color: rgb(244 242 239 / .86); max-width: 44ch; }
.held__aktion { margin-top: clamp(1.4rem, 3.4vh, 2.2rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; }
.held__rabatt { display: flex; align-items: center; gap: .85rem; font-size: .92rem; line-height: 1.3; color: rgb(244 242 239 / .92); }
.held__rabatt .ico { width: 1.9rem; height: 1.9rem; stroke-width: 1.4; }

/* Karten rechts: gestapelt mit festem Abstand, versetzt wie in der Referenz.
   Die Gruppe hat eine eigene Perspektive, deren Fluchtpunkt links liegt, also zur Seitenmitte.
   Die Neigung setzt konzept.js auf .karte-lage (Desktop deutlich, Tablet schwächer, Handy keine). */
.held__karten {
  align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding-bottom: 1rem;
  perspective: 1400px; perspective-origin: -20% 50%;
}
.karte-lage { width: 100%; transform-style: preserve-3d; }
.karte-lage--preise { max-width: 24rem; }
.karte-lage--ki { max-width: 28rem; margin-left: 10%; }
.karte-lage--kategorien { max-width: 32rem; margin-left: 4%; }
.karte-schwebe { width: 100%; }
.karte {
  position: relative; width: 100%;
  background: var(--karte-grund);
  border: 1px solid var(--karte-rand);
  border-radius: var(--karte-radius); padding: 1rem 1.5rem 1.25rem;
  box-shadow: var(--karte-schatten);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
  isolation: isolate;                               /* Glanz (::before) liegt zwischen Fläche und Inhalt */
  text-shadow: 0 1px 2px rgb(3 10 17 / .28);        /* Lesbarkeit über hellen Stellen der Szene */
}
/* Zurückhaltender Lichtreflex: diagonal von oben links, läuft früh aus. Keine Unschärfe auf dem Inhalt. */
.karte::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgb(255 255 255 / .09) 0%, rgb(255 255 255 / .02) 28%, rgb(255 255 255 / 0) 45%);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .karte { background: var(--karte-grund-blur); -webkit-backdrop-filter: var(--karte-blur); backdrop-filter: var(--karte-blur); }
}
@media (hover: hover) and (pointer: fine) {
  .karte:hover { border-color: var(--karte-rand-hover); box-shadow: 0 1px 0 rgb(255 255 255 / .28) inset, 0 -1px 0 rgb(255 255 255 / .05) inset, 0 24px 48px -28px rgb(3 10 17 / .6), 0 0 0 1px rgb(220 181 82 / .12); }
}
.karte__titel { display: flex; align-items: center; gap: .75rem; font-size: 1rem; line-height: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.karte__titel .ico { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
.preise { display: flex; align-items: center; gap: 1.5rem; margin-top: .5rem; padding-left: 2rem; }
.preise__kurve { flex: 1 1 8rem; min-width: 0; max-width: 11rem; height: 4rem; overflow: visible; }
.preise__raster { stroke: rgb(244 242 239 / .1); stroke-width: 1; fill: none; }
.preise__flaeche { fill: url(#preis-verlauf); stroke: none; }
.preise__linie { stroke: var(--gold); stroke-width: 1.75; fill: none; stroke-linejoin: round; }
.preise__punkte { fill: var(--gold-hell); }
.preise__wert { flex: 0 0 auto; white-space: nowrap; display: grid; gap: .25rem; font-size: .8125rem; line-height: 1.25; color: rgb(244 242 239 / .82); }
.preise__wert strong { font-size: 2rem; line-height: 1; color: var(--gold); font-weight: 700; letter-spacing: -.02em; }
.ki {
  margin-top: 1rem; display: flex; align-items: center; gap: .5rem; height: 3rem;
  border: 1px solid rgb(244 242 239 / .22); border-radius: 8px; padding-left: 1rem; background: var(--feld-grund); overflow: hidden;
  box-shadow: 0 1px 0 rgb(255 255 255 / .1) inset;
}
.ki .ico { color: rgb(244 242 239 / .75); }
.ki input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--warmweiss);
  font: 450 .875rem var(--schrift);
}
.ki input::placeholder { color: rgb(244 242 239 / .62); }
.ki input:focus { outline: none; }
.ki:focus-within { border-color: var(--gold); }
.ki button {
  width: 3rem; height: 100%; border: 0; cursor: pointer; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--gold); color: var(--navy);
}
.ki button:focus-visible { outline: 2px solid var(--warmweiss); outline-offset: -4px; }
.ki button .ico { color: var(--navy); stroke-width: 2.2; }
.karte__text { margin-top: .75rem; font-size: .8125rem; line-height: 1.25rem; color: rgb(244 242 239 / .78); max-width: 40ch; }
.kategorien { margin-top: 1rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.kategorien li {
  display: grid; justify-items: center; align-content: center; gap: .5rem; height: 5rem; padding: .5rem .25rem;
  border: 1px solid var(--kachel-rand); border-radius: 8px; background: var(--kachel-grund);
  box-shadow: 0 1px 0 rgb(255 255 255 / .1) inset;
  font-size: .6875rem; font-weight: 550; text-align: center; line-height: 1.15; hyphens: manual; min-width: 0;
}
.kategorien .ico { width: 1.6rem; height: 1.6rem; color: var(--gold); stroke-width: 1.4; }

/* Markenreihe unten */
.held__marken {
  grid-column: 1 / -1; display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
  padding: 1.1rem 0 1.4rem; border-top: 1px solid rgb(244 242 239 / calc(.14 * var(--linie, 1)));
}
.held__markenlabel { flex: 0 0 auto; font: 700 .66rem/1.6 var(--schrift); letter-spacing: .2em; text-transform: uppercase; color: rgb(244 242 239 / .66); }
.held__markenreihe { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: clamp(.8rem, 1.6vw, 1.6rem); min-width: 0; }
.held__markenreihe li { flex: 0 1 auto; min-width: 0; }
.held__markenreihe img { height: 1.45rem; width: auto; max-width: 100%; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); opacity: .74; }
.held__markenreihe span { font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; opacity: .74; white-space: nowrap; }
.held__weitere { font-size: .8rem; color: rgb(244 242 239 / .66); white-space: nowrap; }

/* ------------------------------------------------ Szene 4 · Licht und Marken */
.licht { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.licht__gold, .licht__weiss { position: absolute; inset: 0; opacity: 0; }
/* Goldener Dunst: oben heller, zum Horizont wärmer. Die Stadt aus dem Film schimmert durch. */
.licht__gold {
  background:
    radial-gradient(80% 62% at 50% 22%, rgb(252 244 220 / .95) 0%, rgb(246 226 172 / .84) 42%, rgb(232 200 128 / .58) 78%, rgb(214 176 100 / .46) 100%);
}
.licht__weiss { background: var(--warmweiss); }

.marken {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  /* Endlage der Sonne mit sicherem Abstand unter dem Kopf */
  padding: calc(var(--kopf-h) + clamp(1.25rem, 5vh, 3rem)) 0 clamp(1.4rem, 4vh, 3rem);
  color: var(--tinte); pointer-events: none;
}
.marken a { pointer-events: auto; }
/* Texte über dem Licht hinter der Schrift */
.marken > :not(.marken__licht) { position: relative; z-index: 2; }
/* Platz des Markenzeichens: Endlage der Sonne. Das Logo darin ist nur im ruhigen Modus sichtbar. */
.sonne-platz { flex: 0 0 auto; width: var(--sonne-d); aspect-ratio: 1; }
.sonne-platz img { width: 100%; height: 100%; visibility: hidden; }
.ruhig .sonne-platz img { visibility: visible; }
/* Lokales, weiches Licht hinter Headline und Marken statt einer Vollfläche über dem Video */
.marken__licht {
  position: absolute; z-index: 0; left: 50%; top: 18%; width: min(76rem, 118vw); height: 64%;
  translate: -50% 0; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgb(250 246 236 / .9) 0%, rgb(250 246 236 / .72) 45%, rgb(250 246 236 / .3) 75%, rgb(250 246 236 / 0) 100%);
}

/* ------------------------------------------------ Sonnenbühne */
/* Die Sonne selbst ist Teil des Videos. Hier liegt nur das Goldstein-Zeichen für die Logo-Transformation:
   über dem Licht (z 3, später im DOM), unter dem Markenblock, ohne Glow, Maske, Schatten oder Filter. */
.sonnenbuehne { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* Bahn: nur x/y (GSAP). Nullpunkt ist die Mitte des Zeichens. */
.sonne-bahn {
  position: absolute; left: 0; top: 0; width: var(--sonne-d); aspect-ratio: 1;
  margin: calc(var(--sonne-d) / -2) 0 0 calc(var(--sonne-d) / -2);
  visibility: hidden;
}
/* Bild: Deckkraft und leichte Skalierung (GSAP) */
.sonne-bild { position: absolute; inset: 0; }
.sonne-logo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ruhig .sonnenbuehne { display: none; }

.marken__titel {
  margin-top: clamp(1rem, 3vh, 2rem); padding-inline: var(--rand);
  font-size: clamp(2.3rem, 1rem + 4.4vw, 5.3rem); line-height: 1; letter-spacing: -.045em; font-weight: 650; max-width: 18ch;
}
.marken__unter { margin-top: clamp(.8rem, 2vh, 1.4rem); padding-inline: var(--rand); font-size: clamp(1.02rem, .9rem + .5vw, 1.4rem); color: var(--tinte-soft); }
.baender { width: 100%; margin-top: clamp(1.4rem, 4vh, 2.8rem); display: grid; gap: clamp(.5rem, 1.6vh, 1.1rem); pointer-events: auto; }
.band { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.band__spur { display: flex; width: max-content; animation: laufband var(--dauer, 60s) linear infinite; }
.band--zurueck .band__spur { animation-direction: reverse; }
.baender:hover .band__spur { animation-play-state: paused; }
@keyframes laufband { to { transform: translateX(-50%); } }
.marke { flex: 0 0 auto; display: grid; place-items: center; width: clamp(8rem, 12vw, 11.5rem); height: clamp(2.8rem, 6vh, 3.6rem); padding-inline: 1rem; }
.marke img { height: clamp(1.6rem, 3.4vh, 2.1rem); max-width: 100%; width: auto; object-fit: contain; }
.marke__name { color: var(--marke, var(--tinte)); font-weight: 750; font-size: clamp(1rem, .9rem + .4vw, 1.35rem); letter-spacing: -.02em; }
.marken__regal { margin-top: clamp(1rem, 3.4vh, 2.2rem); padding-inline: var(--rand); font-size: clamp(1.05rem, .9rem + .55vw, 1.55rem); font-weight: 650; letter-spacing: -.02em; }
.marken__zeile { margin-top: .6rem; padding-inline: var(--rand); font-size: clamp(.85rem, .8rem + .2vw, 1rem); color: var(--tinte-soft); max-width: 60ch; }

/* ------------------------------------------------ Szene 5 · Mehr als ein Shop */
.mehr__aussen { position: relative; z-index: 1; }
.mehr { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; background: var(--warmweiss); color: var(--tinte); overflow: hidden; }
/* Kamera-Ebene: konzept.js bewegt sie beim Zoom (x, y, scale, Ursprung 0 0). Kein will-change,
   damit der Text im Display beim Vergrößern scharf neu gerastert wird. */
.mehr__innen {
  position: relative; z-index: 1; min-height: var(--vp-h, 100vh);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--kopf-h) + clamp(1.5rem, 4vh, 3rem)) var(--rand) clamp(2.5rem, 6vh, 4rem); transform-origin: 0 0;
}
.mehr__raster, .mehr__fuss { width: 100%; }
/* Hintergrund der Warteliste: exakt so groß wie der Viewport am Pin, blendet beim Zoom ein */
.mehr__ziel { position: absolute; left: 0; right: 0; bottom: 0; height: var(--vp-h, 100vh); z-index: 0; background: var(--warmweiss); opacity: 0; visibility: hidden; overflow: hidden; }
/* Große Bildebenen, die im gepinnten Abschnitt erst später erscheinen: eigene Ebene, nur Deckkraft animieren.
   So rastert der Browser sie vorab und nicht im ersten sichtbaren Frame (das kostete dort 90 – 200 ms). */
.js-pin .mehr__ziel { visibility: visible; pointer-events: none; will-change: opacity; }
.js-pin .liste { will-change: opacity; }
.js-pin .liste__bild { visibility: visible; will-change: opacity; opacity: calc(var(--bild-o, .3) * var(--bild-an, 1)); }
.mehr__raster { max-width: 88rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.mehr__label { display: flex; align-items: center; gap: .8rem; font-size: .9rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-soft); }
.mehr__label::before { content: ""; width: 3px; height: 1.1rem; background: var(--gold); }
.mehr__label span { color: var(--gold-tief); }
.mehr__titel { margin-top: 1rem; font-size: clamp(1.9rem, 3vw, 3rem); white-space: nowrap; line-height: 1.06; letter-spacing: -.035em; font-weight: 750; }
.mehr__titel span { color: #B8902F; }
.mehr__lede { margin-top: 1.2rem; font-size: clamp(1rem, .92rem + .3vw, 1.2rem); line-height: 1.55; max-width: 46ch; }
.vorteile { margin-top: 1.8rem; display: grid; gap: 1rem; }
.vorteile li { display: flex; align-items: center; gap: 1.2rem; }
.vorteile__ico {
  flex: 0 0 auto; width: 4.2rem; height: 4.2rem; display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(180deg, #FBF3DF, #F4E6C2); color: #A67F24;
  box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 6px 14px -10px rgb(107 80 16 / .5);
}
.vorteile__ico .ico { width: 1.9rem; height: 1.9rem; stroke-width: 1.5; }
.vorteile h3 { font-size: 1.1rem; font-weight: 750; letter-spacing: -.015em; }
.vorteile p { margin-top: .2rem; font-size: .94rem; color: var(--tinte-soft); line-height: 1.45; }

/* Geräte: transparente PNG-Rahmen, darin echte HTML-Oberflächen in einer Maske */
.geraete {
  position: relative;
  display: grid; grid-template-columns: 33% 1fr; grid-template-rows: auto 4.5rem;
  align-items: start;
}
.geraet { margin: 0; }
.geraet--tablet { grid-area: 1 / 1 / 2 / 3; }
.geraet--handy { grid-area: 1 / 1 / 3 / 2; align-self: end; z-index: 2; }
.geraet__wrap { position: relative; }
.geraet__rahmen { position: relative; z-index: 0; width: 100%; height: auto; pointer-events: none; }
.geraet--tablet .geraet__rahmen { filter: drop-shadow(0 26px 44px rgb(19 42 58 / .3)); }
.geraet--handy .geraet__rahmen { filter: drop-shadow(0 20px 34px rgb(19 42 58 / .38)); }
/* Die PNGs sind in der Displayfläche deckend, das echte Display liegt deshalb darüber */
.geraet__screen { position: absolute; z-index: 1; overflow: hidden; container-type: inline-size; background: #FBFAF7; }
/* Lage der Displayflächen in den PNGs */
.screen--tablet { left: 11.2%; top: 11.91%; width: 77.86%; height: 75.29%; border-radius: .6cqw; }
.screen--handy {
  --rund: 1; left: 20.9%; top: 13.35%; width: 58.4%; height: 77.8%;
  /* Displayecken wie im PNG: etwa 11 % der Breite. Prozent der eigenen Box, denn cqw bezieht sich
     auf einen Vorfahren-Container, und ohne ihn rechnet der Browser in Viewport-Einheiten. */
  border-radius: 0 0 calc(var(--rund) * 11%) calc(var(--rund) * 11%) / 0 0 calc(var(--rund) * 5.6%) calc(var(--rund) * 5.6%);
}

/* ---- Tablet-Oberfläche (Maße in cqw = Anteil der Displaybreite) ---- */
.ui-t { position: absolute; inset: 0; display: flex; flex-direction: column; color: var(--tinte); font-size: 1.85cqw; }
.ui-t__kopf { position: relative; z-index: 1; display: flex; align-items: center; gap: 2.4cqw; padding: 0 2.2cqw; height: 11.7cqw; flex: 0 0 auto; background: #0F1B26; color: #EDEBE6; }
.ui-marke { display: flex; align-items: center; gap: 1.2cqw; font-weight: 700; font-size: 2.2cqw; line-height: 1.08; white-space: nowrap; }
.ui-marke img { width: 5cqw; height: 5cqw; }
.ui-t__suche { flex: 1; display: flex; align-items: center; gap: 1.4cqw; height: 5.2cqw; padding: 0 2cqw; border-radius: 2.6cqw; background: #F6F4F1; color: #6A7884; font-size: 1.85cqw; }
.ui-t__suche .ico, .ui-t__kopf > .ico { width: 2.6cqw; height: 2.6cqw; stroke-width: 1.6; }
.ui-t__body { flex: 1; translate: 0 calc(var(--tscroll, 0) * -13cqw); display: grid; grid-template-columns: 31cqw 1fr; align-items: start; min-height: 0; background: #FBFAF7; }
.ui-t__menue { position: relative; display: grid; align-content: start; gap: 2.6cqw; padding: 3cqw 2.2cqw; border-right: .1cqw solid rgb(19 42 58 / .1); min-height: 100%; }
.ui-t__menue b { position: relative; font-size: 2.6cqw; }
.ui-t__menue span { position: relative; display: flex; align-items: center; gap: 1.4cqw; color: var(--tinte); }
.ui-t__menue span i { margin-left: auto; width: 1.2cqw; height: 1.2cqw; border-top: .18cqw solid rgb(19 42 58 / .45); border-right: .18cqw solid rgb(19 42 58 / .45); rotate: 45deg; }
.ui-t__menue .ico { width: 2.4cqw; height: 2.4cqw; stroke-width: 1.5; }
/* Auswahlbalken in der Sidebar, wandert per transform zwischen den Einträgen */
.ui-t__marker { position: absolute; left: 1cqw; right: 1cqw; top: 0; translate: 0 calc(var(--m0, 0px) + var(--mp, 0) * (var(--m2, 0px) - var(--m0, 0px))); height: 5cqw; border-radius: .8cqw; background: rgb(220 181 82 / .16); box-shadow: inset .4cqw 0 0 var(--gold); opacity: 0; }
.ui-t__haupt { display: grid; align-content: start; gap: 2.2cqw; padding: 3.4cqw 3cqw; }
.ui-t__frage { margin: 0; font-size: 3.85cqw; line-height: 1.16; letter-spacing: -.02em; font-weight: 750; }
.ui-t__frage span { display: block; }
.ui-t__feld {
  position: relative; height: 5.9cqw; display: flex; align-items: center; padding: 0 1.8cqw;
  border: .1cqw solid rgb(19 42 58 / .18); border-radius: .7cqw; background: #fff; color: #7A8894;
  box-shadow: 0 0 0 calc(var(--fokus, 0) * .35cqw) rgb(220 181 82 / .45);
  border-color: color-mix(in oklab, var(--gold) calc(var(--fokus, 0) * 100%), rgb(19 42 58 / .18));
}
.ui-t__getippt { position: absolute; left: 1.8cqw; top: 50%; translate: 0 -50%; color: var(--navy); font-weight: 600; white-space: nowrap; clip-path: inset(0 100% 0 0); }
/* dezent blinkender Cursor, nur während des Fokus */
.ui-t__feld::after {
  content: ""; position: absolute; left: 1.8cqw; top: 30%; height: 40%; width: .16cqw;
  background: var(--navy); opacity: var(--cursor, 0); animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.ruhig .ui-t__feld::after { animation: none; }
.ui-t__vorschlaege { display: grid; gap: 1cqw; }
.ui-t__vorschlaege i {
  font-style: normal; display: flex; align-items: center; gap: 1.4cqw; height: 4.6cqw; padding: 0 1.6cqw;
  border: .1cqw solid rgb(19 42 58 / .14); border-radius: .7cqw; background: #fff; font-size: 1.7cqw; font-weight: 600;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ui-t__vorschlaege .ico { width: 2.2cqw; height: 2.2cqw; color: #A67F24; }
.ui-t__vorschlaege i[data-aktiv="1"] { border-color: var(--gold); box-shadow: 0 0 0 .2cqw rgb(220 181 82 / .35); }
.ui-t__chips { display: flex; flex-wrap: wrap; gap: 1.2cqw; }
.ui-t__chips i {
  font-style: normal; display: inline-flex; align-items: center; height: 3.9cqw; padding: 0 1.6cqw;
  border: .1cqw solid rgb(19 42 58 / .18); border-radius: 2cqw; background: #fff; font-size: 1.6cqw; white-space: nowrap;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ui-t__chips i[data-aktiv="1"] { border-color: var(--gold); box-shadow: 0 0 0 .2cqw rgb(220 181 82 / .35); }
.ui-t__ki {
  position: relative; overflow: hidden; justify-self: center; display: inline-flex; align-items: center; gap: 1.2cqw;
  height: 6cqw; padding: 0 3.4cqw; border-radius: .7cqw; font-size: 2cqw; font-weight: 700;
  background: linear-gradient(180deg, #EFD58E, #D9B456); color: var(--navy);
}
.ui-t__ki .ico { width: 2.2cqw; height: 2.2cqw; }
.ui-t__glanz { position: absolute; inset: 0 auto 0 -40%; width: 40%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .75), transparent); }
.ui-t__haupt small { justify-self: center; font-size: 1.6cqw; color: var(--tinte-soft); }

/* ---- Smartphone-Display: geklonte Warteliste ----
   Die Box ist so groß wie der Viewport im Seitenverhältnis des Displays (--disp-b × --vp-h)
   und wird mit --disp-k auf die Displaybreite verkleinert. Beim Zoom wächst die Kamera
   genau um 1 / --disp-k, dann steht die Box pixelgleich über dem echten Abschnitt. */
.vorschau { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: var(--warmweiss); }
.vorschau__box { position: absolute; left: 0; top: 0; width: var(--disp-b, 450px); height: var(--vp-h, 900px); overflow: hidden; transform-origin: 0 0; scale: var(--disp-k, .25); }
.vorschau__inhalt { position: absolute; left: 0; top: 0; width: 100%; translate: 0 calc(var(--iscroll, 0) * var(--iweg, 0px)); }
.vorschau__inhalt .liste { width: var(--spalte, 100%); margin-inline: auto; min-height: var(--vp-h, 100vh); }
/* Das Bild im Klon hat dieselbe Viewport-Geometrie wie im echten Abschnitt */
.vorschau__inhalt .liste__bild, .mehr__ziel .liste__bild { left: 50%; right: auto; width: var(--vp-b, 100vw); translate: -50% 0; }
.vorschau__kopf {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: var(--kopf-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: 1.5rem;
  background: rgb(244 242 239 / .9); color: var(--tinte); box-shadow: 0 10px 30px -24px rgb(19 42 58 / .35);
}
.vorschau__marke { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .9rem; line-height: 1.1; }
.vorschau__marke img { width: 2.25rem; height: 2.25rem; }
.vorschau__kopf .knopf--klein { height: 2.5rem; padding: 0 1rem; font-size: .8125rem; box-shadow: 0 1px 0 rgb(255 255 255 / .4) inset; }

.mehr__fuss {
  max-width: 88rem; margin: clamp(2rem, 5vh, 3rem) auto 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 1.5rem 2.5rem;
}
.mehr__fuss p { display: flex; align-items: center; gap: .75rem; font-size: 1rem; line-height: 1.5rem; color: var(--tinte); }
.mehr__fuss .ico { width: 1.5rem; height: 1.5rem; stroke-width: 1.5; color: #A67F24; }

/* ------------------------------------------------ Szene 6 · Warteliste */
/* Ein Baustein, zwei Layouts per Container Query:
   schmal (im Smartphone-Display und am Handy) einspaltig, breit (Desktop) vollflächig zweispaltig.
   Der Klon im Display ist nur so breit wie die Displayspalte (--spalte) und bekommt deshalb das
   schmale Layout, der echte Abschnitt über die volle Breite das breite. Beim Zoom wandern die
   Blöcke per --m (0 → 1) von ihrer Lage im Display an ihren Platz im breiten Layout. */
.js-pin #warteliste { margin-top: calc(-1 * var(--vp-h, 100vh)); }
/* Gemeinsamer Block aus Zoom-Abschnitt und Warteliste, wird als Ganzes gepinnt (konzept.js) */
.mehr-block { position: relative; }
/* Rundungsrest der Pin-Höhe (unter 1 px): kein dunkler Haarstrich unter der Fußzeile */
.js-pin #warteliste { box-shadow: 0 4px 0 var(--warmweiss); }
.liste {
  --m: 1; --grund: 1;
  position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh;
  background: rgb(244 242 239 / var(--grund)); color: var(--tinte); overflow: hidden;
  container: liste / inline-size;
}
.liste__bild {
  position: absolute; left: 0; top: 0; width: 100%; height: var(--vp-h, 100vh); pointer-events: none; opacity: var(--bild-o, .3);
}
/* Oben frei für Text, die Stadt trägt erst im unteren Drittel. Statt einer Maske ein Verlauf in der Grundfarbe
   des Abschnitts darüber (rechnerisch dasselbe Bild, weil dahinter immer Warmweiß liegt): Safari muss Masken auf
   skalierten Ebenen in jedem Frame neu berechnen, das ließ den Zoom ins Smartphone auf dem iPhone ruckeln. */
.liste__bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(244 242 239) 0%, rgb(244 242 239) 52%, rgb(244 242 239 / .7) 70%, rgb(244 242 239 / .15) 88%, rgb(244 242 239 / 0) 100%);
}
/* Handy: die Warteliste ist länger als ein Bildschirm; das Bild läuft unten weich aus statt mit harter Kante zu enden */
@media (max-width: 860px) {
  .liste__bild::after {
    background: linear-gradient(180deg, rgb(244 242 239) 0%, rgb(244 242 239) 52%, rgb(244 242 239 / .7) 70%, rgb(244 242 239 / .15) 84%, rgb(244 242 239 / 0) 90%, rgb(244 242 239 / .6) 96%, rgb(244 242 239) 100%);
  }
}
.liste__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* Auf Desktop trägt das Bild kräftiger, im Display ebenso, damit Display und Umgebung beim Zoom gleich aussehen */
@media (min-width: 861px) { .liste__bild, .mehr__ziel .liste__bild { --bild-o: .92; } }
.liste__inner {
  position: relative; z-index: 2;
  min-height: var(--vp-h, 100vh);
  padding: calc(var(--kopf-h) + 1.4rem) 1.5rem 0;
  display: flex; flex-direction: column;
}
/* Morph-Ebene: Blöcke sitzen bei --m 0 dort, wo sie im Display stehen (--dx, --dy, --s misst konzept.js) */
.liste__start, .liste__titel, .liste__vorteil, .liste__klein, .liste__sonne, .liste__form, .fuss {
  transform-origin: 0 0;
  translate: calc((1 - var(--m)) * var(--dx, 0px)) calc((1 - var(--m)) * var(--dy, 0px));
  scale: calc(1 + (1 - var(--m)) * (var(--s, 1) - 1));
  opacity: clamp(0, calc((var(--m) - .05) * 4), 1);
}
.liste--klon .liste__start, .liste--klon .liste__titel, .liste--klon .liste__vorteil, .liste--klon .liste__klein,
.liste--klon .liste__sonne, .liste--klon .liste__form, .liste--klon .fuss { translate: none; scale: none; opacity: 1; }
.liste__start { margin-bottom: .6rem; font: 500 .8rem/1.5 var(--mono); letter-spacing: .01em; color: var(--gold-tief); }
.liste__rest { color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.liste__rest:not(:empty)::before { content: " · noch "; color: var(--gold-tief); }
.liste__titel { font-size: calc(100cqw * .088); line-height: 1.02; letter-spacing: -.04em; font-weight: 600; }
.liste__vorteil { margin-top: 1rem; font-size: 1.02rem; line-height: 1.45; }
.liste__klein { margin-top: .8rem; font-size: .86rem; line-height: 1.5; color: #33475A; }
.liste__sonne { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--haar-hell); font-size: .84rem; line-height: 1.5; color: #33475A; }
.liste__sonne strong { font-family: var(--mono); font-weight: 500; color: var(--navy); font-variant-numeric: tabular-nums; }
.liste__form { margin-top: 1.25rem; display: grid; gap: .8rem; }
.feld { display: grid; gap: .45rem; }
.feld label, .wahl legend { font-weight: 650; font-size: .9rem; }
.feld label span { font-weight: 450; color: var(--tinte-soft); }
.feld input {
  min-height: 3rem; padding: .7rem .9rem; border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--navy) 38%, transparent);
  background: #fff; color: var(--navy); font: inherit;
}
.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: 0 1.25rem; }
.wahl legend { margin-bottom: .35rem; padding: 0; }
.wahl label, .einwilligung, .angebot { display: flex; gap: .6rem; cursor: pointer; }
.wahl label { align-items: center; min-height: 2.75rem; font-size: 1rem; }
.wahl input, .einwilligung input, .angebot input { width: 1.2rem; height: 1.2rem; margin: 0; flex: 0 0 auto; accent-color: var(--navy); }
.wahl input:focus-visible, .einwilligung input:focus-visible, .angebot input:focus-visible { outline: 2px solid var(--navy); }
.angebot { align-items: center; font-size: .92rem; font-weight: 550; }
.einwilligung { align-items: flex-start; font-size: .8rem; line-height: 1.5; color: #33475A; }
.einwilligung input { margin-top: .12rem; }
.einwilligung a { color: var(--navy); font-weight: 650; }
.adresse { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; }
.feld--strasse { grid-column: 1 / -1; }
.adresse input { width: 100%; min-width: 0; }
.liste__form .knopf { justify-self: start; }
.liste__status { min-height: 1.5em; font-weight: 600; font-size: .9rem; }
.liste__status[data-art="fehler"] { color: #A4262C; }
.liste__status[data-art="ok"] { color: #2F6125; }
/* Spamschutz: für Menschen unsichtbar, Bots füllen es aus (wie auf der bisherigen Seite) */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Sprunglinks setzen den Fokus auf den Abschnitt (für Tastatur und Screenreader), ohne Rahmen um die ganze Fläche */
section[tabindex="-1"]:focus { outline: none; }
.liste__form .knopf:disabled { opacity: .65; cursor: progress; }
.fuss {
  margin-top: auto; display: flex; flex-wrap: wrap; gap: .2rem 1rem;
  padding: 1.25rem 0 1.4rem; font-size: .8rem; color: #3A4E5C;
}
.fuss a { color: var(--navy); }

/* Breites Layout: vollflächig, links Headline, Bonus und Statistik, rechts das Formular */
@container liste (min-width: 861px) {
  .liste__inner {
    max-width: 84rem; margin-inline: auto;
    padding: calc(var(--kopf-h) + clamp(1.5rem, 5vh, 3.5rem)) var(--rand) 0;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 6cqw, 7rem);
    grid-template-rows: auto auto 1fr auto; align-content: start;
  }
  .liste__start { grid-column: 1 / -1; margin-bottom: .75rem; font-size: .95rem; }
  /* 10.6em: Umbruch nach „wenn“ wie im Display und in der Referenz */
  .liste__titel { grid-column: 1 / -1; font-size: clamp(2.8rem, 1.2rem + 4.4cqw, 5.6rem); max-width: 10.6em; line-height: .98; }
  .liste__text { grid-column: 1; }
  .liste__form { grid-column: 2; margin-top: clamp(1.5rem, 4vh, 2.5rem); gap: 1.1rem; }
  .liste__vorteil { margin-top: clamp(1.5rem, 4vh, 2.5rem); font-size: clamp(1.2rem, .9rem + .7cqw, 1.6rem); line-height: 1.42; max-width: 30ch; }
  .liste__klein { margin-top: 1.2rem; font-size: .98rem; max-width: 44ch; }
  .liste__sonne { margin-top: 1.5rem; padding-top: 1.1rem; font-size: .98rem; max-width: 40ch; }
  .feld label, .wahl legend { font-size: 1rem; }
  .feld input { min-height: 3.4rem; }
  .wahl label { font-size: 1.1rem; }
  .angebot { font-size: 1rem; }
  .einwilligung { font-size: .88rem; }
  .fuss { grid-column: 1 / -1; font-size: .84rem; }
}

/* ----------------------------------------------------------------- Mobil */
@media (max-width: 1180px) {
  .kopf__nav { display: none; }
}
@media (max-width: 1100px) {
  /* Schmale Viewports: Karten als ruhiger Stapel unter dem Text */
  .held { display: flex; flex-direction: column; padding-top: calc(var(--kopf-h) + 1rem); }
  .held__text { align-self: stretch; padding-bottom: 0; }
  .held__titel { margin-top: .75rem; font-size: clamp(1.85rem, 1rem + 3.6vw, 3rem); }
  .held__unter { margin-top: .75rem; font-size: clamp(.9rem, .8rem + .4vw, 1.05rem); }
  .held__text-lang { display: none; }
  .held__aktion { margin-top: 1rem; gap: .75rem 1rem; }
  .held__karten { align-self: stretch; margin-top: 1.25rem; gap: .5rem; padding-bottom: 0; }
  .karte-lage, .karte-lage--ki, .karte-lage--kategorien { max-width: 34rem; margin-left: 0; }
  .karte { padding: .75rem 1rem; }
  .karte__text { display: none; }
  /* Mit Scroll-Animation (konzept.js setzt .karten-folge): die drei Karten liegen an derselben Stelle
     und erscheinen nacheinander, statt dass Karten ausgeblendet werden, weil nicht alle in den Bildschirm passen. */
  .karten-folge .held__karten { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .karten-folge .karte-lage { grid-area: 1 / 1; }
  .karten-folge .karte__text { display: block; margin-top: .5rem; }
  .karten-folge .preise { padding-left: 0; gap: 1rem; }
  .ki { margin-top: .5rem; height: 2.75rem; }
  .kategorien { margin-top: .5rem; gap: .375rem; }
  .kategorien li { height: 3.75rem; font-size: .5625rem; padding: .375rem .125rem; gap: .375rem; }
  .kategorien .ico { width: 1.25rem; height: 1.25rem; }
  .held__marken { margin-top: auto; padding: .75rem 0 1rem; gap: 1rem; }
  .held__markenlabel { display: none; }
  .held__markenreihe { gap: 1rem; overflow: hidden; justify-content: flex-start; }
  .held__markenreihe li:nth-child(n+7) { display: none; }
  .held__markenreihe img { height: 1.1rem; max-width: 4rem; }
  .held__markenreihe span { font-size: .8rem; }
}

@media (max-width: 860px) {
  :root { --kopf-h: 4rem; }
  .kopf { gap: .75rem; }
  .kopf__logo { width: 2.25rem; height: 2.25rem; }
  .kopf__name { font-size: .875rem; }
  .kopf__start { display: none; }
  .kopf .knopf--klein { margin-left: auto; height: 2.5rem; padding: 0 1rem; font-size: .8125rem; }
  .kopf .knopf--klein .ico { display: none; }
  /* Handy: Kopf transparent über der Szene. Keine Fläche, keine Kante: nur ein weicher Verlauf, der nach
     unten vollständig ausläuft (dunkel über Köln, hell über den hellen Abschnitten), je als eigene Ebene
     mit Überblendung. Safe Area für Geräte mit Notch im Querformat. */
  .kopf, .kopf--hell {
    background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    height: calc(var(--kopf-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px);
    padding-inline: max(var(--rand), env(safe-area-inset-left, 0px)) max(var(--rand), env(safe-area-inset-right, 0px));
  }
  .kopf::before, .kopf::after {
    content: ""; position: absolute; inset: 0 0 -2.75rem; z-index: -1; pointer-events: none;
    transition: opacity .35s var(--ease);
  }
  .kopf::before { background: linear-gradient(180deg, rgb(5 16 27 / .42) 0%, rgb(5 16 27 / .2) 50%, rgb(5 16 27 / 0) 100%); }
  /* Über hellen Abschnitten: bis kurz unter die Schrift deckend Warmweiß (keine Überlagerung mit dem Text darunter),
     danach weich auslaufend, ohne Kante */
  .kopf::after { background: linear-gradient(180deg, rgb(244 242 239) 0%, rgb(244 242 239) 56%, rgb(244 242 239 / .8) 68%, rgb(244 242 239 / 0) 100%); opacity: 0; }
  .kopf--hell::before { opacity: 0; }
  .kopf--hell::after { opacity: 1; }
  .held .knopf { height: 3rem; padding: 0 1.5rem; font-size: .9375rem; }
  .held__label { font-size: .6875rem; }
  .held__titel { font-size: clamp(1.85rem, 8.4vw, 2.4rem); }
  .held__rabatt { font-size: .78rem; }
  .held__rabatt .ico { width: 1.5rem; height: 1.5rem; }

  .himmel__mondbahn { left: 12%; top: 13%; --mond-x: 14vw; --mond-y: 42vh; }
  .himmel__schleier {
    background:
      linear-gradient(180deg, rgb(8 9 11 / .9) 0%, rgb(9 26 39 / .78) 45%, rgb(13 34 50 / .5) 62%, rgb(8 9 11 / .88) 100%);
  }

  .marken { padding-top: calc(var(--kopf-h) + clamp(1.25rem, 4vh, 2rem)); }
  :root { --sonne-d: clamp(4.6rem, 12vh, 6.5rem); }
  .marken__titel { font-size: clamp(2rem, 9.4vw, 2.6rem); }
  .marken__unter { font-size: .98rem; }
  .band { -webkit-mask-image: none; mask-image: none; }
  .marke { width: 7rem; height: 2.6rem; padding-inline: .6rem; }
  .marken__regal { font-size: 1.02rem; }
  .marken__zeile { font-size: .82rem; }

  .mehr__raster { grid-template-columns: 1fr; }
  .mehr__titel { white-space: normal; font-size: clamp(1.8rem, 8vw, 2.3rem); }
  .vorteile__ico { width: 3.3rem; height: 3.3rem; }
  .vorteile__ico .ico { width: 1.5rem; height: 1.5rem; }
  .vorteile h3 { font-size: 1rem; }
  .vorteile p { font-size: .86rem; }
  /* Handy: Geräte gestapelt und ans Ende gerückt, damit Tablet und Smartphone
     gemeinsam im gepinnten Viewport stehen. Die Fußzeile wandert davor. */
  .mehr__innen { display: flex; flex-direction: column; }
  .mehr__raster { display: contents; }
  .mehr__text { order: 1; }
  .mehr__fuss { order: 2; grid-template-columns: 1fr; gap: .75rem; margin-top: 2rem; }
  .geraete { order: 3; margin-top: 2.5rem; grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 1.25rem; }
  .geraet--tablet { grid-area: auto; }
  .geraet--handy { grid-area: auto; width: 58%; justify-self: center; align-self: auto; }
  .geraete__notiz { display: none; }
  .mehr__fuss .knopf { justify-self: start; margin-top: .5rem; }
}
/* Handy quer (niedrig und breit): Text links, Kartenfeld rechts, sonst liegen die Karten unter dem Bildrand */
@media (max-width: 1100px) and (min-width: 600px) and (max-height: 500px) {
  .karten-folge .held {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); grid-template-rows: 1fr;
    column-gap: 1.5rem; align-items: center; padding-top: calc(var(--kopf-h) + .5rem);
  }
  .karten-folge .held__karten { margin-top: 0; align-self: center; }
  .karten-folge .held__titel { font-size: min(2.4rem, 8.5vh); }
  .karten-folge .held__unter { margin-top: .5rem; font-size: .85rem; }
  .karten-folge .held__aktion { margin-top: .75rem; }
  .karten-folge .held__marken { display: none; }
}
/* Niedrige Laptops: Feature-Abschnitt passt komplett unter den Kopf */
@media (min-width: 861px) and (max-height: 880px) {
  .mehr__innen { padding-top: calc(var(--kopf-h) + 1.25rem); padding-bottom: 1.75rem; }
  .mehr__titel { margin-top: .75rem; }
  .mehr__lede { margin-top: .875rem; font-size: 1rem; }
  .vorteile { margin-top: 1.25rem; gap: .75rem; }
  .vorteile__ico { width: 3.5rem; height: 3.5rem; }
  .vorteile__ico .ico { width: 1.6rem; height: 1.6rem; }
  .mehr__fuss { margin-top: 1.5rem; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .mehr__raster { grid-template-columns: 1fr; }
  .geraete { max-width: 44rem; margin-inline: auto; }
  .mehr__fuss { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mehr__fuss .knopf { grid-column: 1 / -1; justify-self: start; }
}

/* ------------------------------------------------ Ruhig (reduced motion / ohne GSAP) */
.ruhig .buehne { height: auto; }
.ruhig .buehne__sticky { position: relative; height: auto; overflow: visible; }
.ruhig .himmel { position: absolute; inset: 0 0 auto; height: 100vh; height: 100dvh; }
.ruhig .himmel__sterne, .ruhig .himmel__mondbahn, .ruhig .himmel__schnuppe, .ruhig .hinweis { display: none; }
.ruhig .himmel__schleier { opacity: 1; }
.ruhig .held { position: relative; min-height: 100vh; min-height: 100dvh; }
.ruhig .licht { display: none; }
.ruhig .marken { position: relative; inset: auto; background: var(--warmweiss); padding-block: 5rem 4rem; overflow: hidden; }
.ruhig .band__spur { animation: none; }
.ruhig .band { overflow-x: auto; }
.ruhig .knopf, .ruhig .knopf .ico { transition: none; }
.ruhig .sterne { animation: none; }
.ruhig .himmel__video { display: none; }
.ruhig .himmel__standbild { display: block; }

@media (max-width: 860px) {
  .ruhig .held { min-height: 0; padding-bottom: 1rem; }
  .ruhig .himmel { height: 100%; }
}