/* OFF LIGHT Startseite
   Raster: 12 Spalten über die volle Breite, Rand und Spaltenabstand 18 px, Nummer oder
   Etikett in Spalten 1 bis 4, Titel ab Spalte 5. Ab 1440 px wächst alles mit der Fensterbreite (1rem).
   Farben nach DESIGN.md der Startseite: Nacht wie der Fotogrund, eine helle Strecke in Wachs,
   Bernstein nur für Kerzenlicht, Kaltlicht nur für Handylicht. */

/* Zwei Schriften, beide selbst gehostet, Lizenz OFL im Ordner schrift: Hanken Grotesk für alles, Libre Baskerville
   nur für den Namen OFF LIGHT (große und kleine Wortmarke). Libre Baskerville ist die Schrift des Logos und des
   Aufdrucks auf der Box (OFFLIGHT Logo.pdf), Laufweite wie im Logo -0,07 em. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("schrift/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("schrift/libre-baskerville-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --nacht: #1d1612;          /* Grund, gleich dem Fotogrund der Ebenen */
  --wachs: #f2ece2;          /* die eine helle Strecke */
  --tinte: #221a15;
  --tinte-leise: #6b5f55;
  --weiss: #ece4d7;          /* Kerzenweiß */
  --asche: #a89a8b;
  --creme: #f4efe6;          /* nur der helle Knopf */
  --bernstein: #eea04a;      /* nur Kerzenlicht */
  --kaltlicht: #a9c8f5;      /* nur Handylicht */
  --glas: rgba(29, 22, 18, .6);
  --karte-dunkel: rgba(236, 228, 215, .065);
  --karte-hell: rgba(34, 26, 21, .05);

  --schrift: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --anzeige: var(--schrift);   /* Überschriften, Momentsätze */
  --anzeige-w: 400;
  --ag: 1;             /* Größenfaktor der Anzeigeschrift (aus der Zeit mit drei Schriften) */
  --sp: .6;            /* Anteil der engen Sperrung bei Anzeigeschrift */
  --logo: "Libre Baskerville", Baskerville, "Times New Roman", serif;   /* nur der Name OFF LIGHT */
  --wm-w: 400;         /* Gewicht der Wortmarke */
  --wm-sp: -.07em;     /* Laufweite wie im Logo */
  --rand: 1.8rem;
  --spalt: 1.8rem;
  --leiste: 7.6rem;
  --r-karte: 14px;
  --r-knopf: 8px;
  --kurve: cubic-bezier(.25, 1, .5, 1);            /* Zeilen und Blöcke steigen */
  --kurve-bedienung: cubic-bezier(.77, 0, .18, 1); /* Vorhänge, Wechsel, Menü */
  --vh: 100vh;
  --h: max(100vh, 640px);                          /* Höhe des Einstiegs */
}
@supports (height: 100svh) { :root { --vh: 100svh; --h: max(100svh, 640px); } }

html { font-size: 10px; }
@media (min-width: 1440px) { html { font-size: .69444vw; } }

* { box-sizing: border-box; }
html {
  background: var(--nacht);
  color-scheme: dark;
  scroll-behavior: smooth;
  scrollbar-color: rgba(236, 228, 215, .28) var(--nacht);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--nacht);
  color: var(--weiss);
  font: 400 1.6rem/1.5 var(--schrift);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
html.menue-offen { overflow: hidden; }
::selection { background: var(--weiss); color: var(--nacht); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.anker { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
.punkt { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hell { background: var(--wachs); color: var(--tinte); }

/* Abdunkeln, wenn sich der nächste Abschnitt darüberschiebt (bis 35 % Schwarz) */
.abdunkeln { position: absolute; inset: 0; z-index: 20; background: #000; opacity: var(--dunkel, 0); pointer-events: none; }

/* Zeilen steigen aus einer Maske */
.zeile { display: block; overflow: hidden; padding: .08em 0 .12em; margin: -.08em 0 -.12em; }
.zeile > span { display: inline-block; white-space: nowrap; }
.js [data-steigt] .zeile > span, .js [data-zeilen] .zeile > span { transform: translateY(120%); }
.js .da .zeile > span, .js [data-zeilen].da .zeile > span {
  transform: none;
  transition: transform 1.2s var(--kurve) calc(var(--z, 0) * .1s);
}
.js [data-steigt]:not(.kapitelkopf) { opacity: 0; transform: translateY(40px); }
.js [data-steigt].da:not(.kapitelkopf) {
  opacity: 1; transform: none;
  transition: opacity 1.2s var(--kurve) calc(var(--i, 0) * .1s), transform 1.2s var(--kurve) calc(var(--i, 0) * .1s);
}

/* ---------- Knöpfe ---------- */
.pfeil { position: relative; display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 6px; }
.pfeil::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .14; transition: opacity .3s ease; }
.pfeil svg { position: relative; width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }

.knopf-umriss {
  position: relative; display: inline-flex; align-items: center; gap: 1.2rem;
  height: 4rem; padding: 0 .8rem 0 1.6rem; border-radius: var(--r-knopf);
  font-weight: 500; text-decoration: none; white-space: nowrap;
}
.knopf-umriss::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid currentColor; opacity: .4; pointer-events: none; }
.knopf-umriss::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
@media (hover: hover) {
  .knopf-umriss:hover::after { opacity: .1; }
  .knopf-umriss:hover .pfeil::before { opacity: 1; }
  .knopf-umriss:hover .pfeil svg { stroke: var(--gegen, var(--nacht)); }
}

.knopf-hell {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  height: 4.8rem; padding: 0 .8rem 0 1.8rem; border-radius: var(--r-knopf);
  background: var(--creme); color: var(--tinte);
  font: 500 1.5rem/1 var(--schrift); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .3s ease;
}
.knopf-hell .pfeil { width: 3.2rem; height: 3.2rem; }
.knopf-hell .pfeil::before { background: var(--tinte); opacity: .08; }
@media (hover: hover) {
  .knopf-hell:hover { background: #fbf7f0; }
  .knopf-hell:hover .pfeil::before { opacity: 1; }
  .knopf-hell:hover .pfeil svg { stroke: var(--creme); }
}
.knopf-hell:focus-visible { outline-color: var(--weiss); }

/* ---------- Leiste ---------- */
.leiste {
  --gegen: var(--nacht);
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--leiste); padding: 0 var(--rand);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: center;
  color: var(--weiss); font: 500 1.4rem/1 var(--schrift);
  transition: color .3s ease, transform .7s var(--kurve-bedienung);
}
.leiste[data-ton="hell"] { --gegen: var(--wachs); color: var(--tinte); }
.leiste::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(29, 22, 18, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .5s ease, background-color .3s ease;
}
.leiste[data-ton="hell"]::before { background: rgba(242, 236, 226, .72); }
.leiste::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: 0; transition: opacity .5s ease; }
.leiste.glas::before { opacity: 1; }
.leiste.glas::after { opacity: .2; }
.js .leiste:not(.da) { transform: translateY(-100%); }

.marke {
  grid-column: 1 / 4; justify-self: start;
  font-family: var(--logo); font-weight: 400; font-size: 2.1rem; line-height: 1; letter-spacing: var(--wm-sp); text-decoration: none;
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s;
}
.leiste.marke-da .marke { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.navi { grid-column: 5 / 10; display: flex; gap: 2.5rem; }
.navi a, .fuss a { position: relative; text-decoration: none; }
.navi a { padding: 1rem 0; }
.navi a::after, .fuss a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .6rem; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--kurve);
}
@media (hover: hover) { .navi a:hover::after, .fuss a:hover::after { transform: scaleX(1); } }
.leiste .knopf-umriss { grid-column: 10 / 13; justify-self: end; transition: opacity .4s ease, visibility 0s; }
/* Im Einstieg steht Vormerken unten rechts, oben erst, wenn auch die kleine Wortmarke kommt */
.leiste:not(.marke-da):not(.textseite-leiste) .knopf-umriss { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.menue-knopf { display: none; }
.leiste.menue-auf { color: var(--weiss); }
.leiste.menue-auf::before, .leiste.menue-auf::after { opacity: 0; }

/* Menü am Handy: dunkler Vorhang von oben */
.menue {
  position: fixed; inset: 0; z-index: 39;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(var(--leiste) + 28px) var(--rand) calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--nacht); color: var(--weiss);
  clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--kurve-bedienung);
}
.menue.offen { clip-path: inset(0); }
.menue nav { display: grid; gap: 6px; }
/* Handy quer: das Menü ist höher als das Fenster und scrollt selbst (die Seite dahinter ist gesperrt) */
.menue { overflow-y: auto; overscroll-behavior: contain; }
.menue nav a { font-size: 30px; font-weight: 500; line-height: 1.25; text-decoration: none; transform: translateY(40px); opacity: 0; transition: transform .8s var(--kurve), opacity .8s var(--kurve); }
.menue.offen nav a { transform: none; opacity: 1; transition-delay: calc(.25s + var(--i, 0) * .05s); }
.menue .knopf-hell { width: 100%; }

/* ---------- Einstieg ---------- */
.einstieg {
  position: relative; z-index: 3;
  height: var(--h); overflow: hidden;
  background: var(--nacht); color: var(--weiss);
}
.einstieg-kopf { position: absolute; left: 0; right: 0; top: calc(var(--leiste) + 2rem); }
.wortmarke {
  position: relative; z-index: 2;
  margin: 0 var(--rand);
  font-family: var(--logo); font-weight: var(--wm-w); font-size: var(--wm, calc((100vw - 2 * var(--rand)) / 5.69));
  line-height: .74; letter-spacing: var(--wm-sp); text-transform: uppercase; white-space: nowrap;
}
/* Rückfall ohne Messung: Breite durch 5,69 (Libre Baskerville mit -0,07 em). --wm-l zieht die Luft vor dem O ab, damit die Tinte bündig am Rand beginnt (seite.js misst sie) */
.wm-maske { display: block; overflow: hidden; padding: .07em 0 .04em; margin: -.07em 0 -.04em var(--wm-l, 0px); }
.wm-b { display: inline-block; white-space: pre; }
.js .wm-b { transform: translateY(110%); }
.js .einstieg.los .wm-b { transform: none; transition: transform 1.2s var(--kurve) calc(.2s + var(--v, 0) * .05s); }
/* Fußzeile des Einstiegs: links was es ist, rechts Preis und Vormerken, sonst steht dort nur der Name */
.einstieg-ecke {
  position: absolute; z-index: 4; left: var(--rand); right: var(--rand); bottom: 4rem;
  display: flex; align-items: center; gap: 2.4rem;
}
.einstieg-was { margin: 0 auto 0 0; font-size: 1.8rem; line-height: 1.3; color: var(--asche); text-wrap: balance; }
.einstieg-ecke .knopf-umriss { font-size: 1.5rem; }
.preis-link { padding: 12px 0; font-size: 1.8rem; font-weight: 500; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) { .preis-link:hover { text-decoration: underline; text-underline-offset: .3em; } }
.js .einstieg-ecke { opacity: 0; transform: translateY(20px); }
.js .einstieg.los .einstieg-ecke { opacity: 1; transform: none; transition: opacity 1.2s var(--kurve) .6s, transform 1.2s var(--kurve) .6s; }

/* Die Box: Unterkante etwa 84 px über dem Fensterrand, offen nie unter der Leiste.
   Die Fläche bildet keinen eigenen Stapel, damit die Wortmarke zwischen den Ebenen liegen kann. */
.einstieg-buehne {
  --S: min(calc(var(--h) * .98), 98rem, calc((var(--h) - 18rem) / .7918));
  position: absolute; width: var(--S); aspect-ratio: 1;
  left: calc(50% - var(--S) / 2); top: calc(var(--h) - 8.4rem - .8636 * var(--S));
  -webkit-tap-highlight-color: transparent; outline: none;
}
/* Zeiger nur über Boxkörper, Deckel und Kerze (seite.js prüft die Lage, Wortmarke und Zeile liegen darüber) */
.einstieg.ueber-box, .einstieg.ueber-box * { cursor: pointer; }
.einstieg-buehne:focus-visible { outline: 2px solid rgba(236, 228, 215, .5); outline-offset: -4.4rem; border-radius: var(--r-karte); }
[data-ebene] {
  position: absolute; display: block; pointer-events: none;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  transform-origin: 0 0; will-change: transform, opacity;
}
[data-ebene].licht { mix-blend-mode: plus-lighter; }
@supports not (mix-blend-mode: plus-lighter) { [data-ebene].licht { mix-blend-mode: screen; } }
[data-ebene].schatten.kerze { background: radial-gradient(closest-side, rgba(0, 0, 0, .5) 80%, rgba(0, 0, 0, 0) 100%); }
.einstieg-buehne .hinten { z-index: 1; }
.einstieg-buehne .vorne { z-index: 3; }
/* weiche Ränder je Ebene (nicht auf der Fläche, sonst kann die Wortmarke nicht dazwischen liegen) */
.einstieg-buehne .voll {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.standbild { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* „Flamme.“ bleibt Kerzenweiß, bis im Produktfoto die Kerze brennt */
.flamme-wort { color: color-mix(in oklab, var(--bernstein) calc(var(--licht, 0) * 100%), var(--weiss)); }

/* ---------- Kapitelköpfe ---------- */
.kapitelkopf {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: baseline;
  padding: 10rem var(--rand) 3.5rem;
}
.kapitelkopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .2; transform-origin: left; }
.js .kapitelkopf[data-steigt]::after { transform: scaleX(0); }
.js .kapitelkopf[data-steigt].da::after { transform: none; transition: transform 1.4s var(--kurve) .2s; }
.kk-nr, .kapitelkopf h2 { font-family: var(--anzeige); font-size: calc(6rem * var(--ag)); font-weight: var(--anzeige-w); line-height: 1; letter-spacing: calc(-.01em * var(--sp)); font-variant-numeric: lining-nums; }
.kk-nr { grid-column: 1 / 5; }
.kapitelkopf h2 { grid-column: 5 / 13; }

/* ---------- 1. Momente ---------- */
/* Der Einstieg fährt weg (eine Einstiegshöhe), dann steht das Kapitel eine Bildschirmhöhe, dann schiebt sich Kapitel 2 darüber */
.momente {
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--h));
  height: calc(var(--h) + 3 * var(--vh));
  --kerze: 0; --griff: 0;
}
.momente > .anker { top: var(--h); }
.momente-fest { position: sticky; top: 0; height: var(--vh); overflow: hidden; background: var(--nacht); touch-action: pan-y pinch-zoom; }
.momente-bild { position: absolute; inset: 0; transform: scale(var(--zoom, 1)); }
.momente-bild::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to right, rgba(29, 22, 18, .86) 0, rgba(29, 22, 18, .62) 26%, rgba(29, 22, 18, 0) 56%),
    linear-gradient(to bottom, var(--nacht) 0, rgba(29, 22, 18, 0) 14%, rgba(29, 22, 18, 0) 86%, var(--nacht) 100%);
}
.m-paar { position: absolute; inset: 0; visibility: hidden; overflow: hidden; }
.m-paar.an { visibility: visible; z-index: 2; clip-path: inset(0); transition: clip-path .9s var(--kurve-bedienung); }
.m-paar.geht { visibility: visible; z-index: 1; }
.m-paar.rein { clip-path: inset(100% 0 0 0); transition: none; }
.m-paar::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .9s var(--kurve-bedienung); }
.m-paar.geht::after { opacity: .6; }
.m-paar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.m-paar.an img { transition: transform .9s var(--kurve-bedienung); }
.m-paar.rein img { transform: scale(1.06); transition: none; }
.m-paar .m-kerze { opacity: var(--kerze); }
/* Momentbilder 3:2 mit der Box knapp rechts der Mitte: die Mitte reicht für Vollbild und Handy (4:5) */
.momente-bild .abdunkeln { z-index: 4; }

.momente-inhalt {
  position: absolute; inset: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: var(--spalt);
  padding: calc(var(--leiste) + 2.4rem) var(--rand) 5.6rem;
}
.momente .kapitelkopf { grid-column: 1 / -1; grid-row: 1; padding: 0 0 2.4rem; }
.momente .kapitelkopf::after { left: calc(-1 * var(--rand)); right: calc(-1 * var(--rand)); }
.m-saetze { grid-column: 1 / 7; grid-row: 2; align-self: center; display: grid; }
.m-satz {
  grid-area: 1 / 1; max-width: 10.5em; visibility: hidden;
  font-family: var(--anzeige); font-weight: var(--anzeige-w); font-size: calc(clamp(3rem, min(3.6vw, 5.6vh), 5.2rem) * var(--ag));
  line-height: 1.04; letter-spacing: calc(-.02em * var(--sp)); text-wrap: balance;
}
.m-satz.an, .m-satz.geht { visibility: visible; }
.m-name { color: var(--weiss); }
.m-rest { color: var(--asche); }
.m-satz .zeile > span { transform: translateY(110%); transition: transform .6s var(--kurve-bedienung) calc(var(--z, 0) * .08s); }
.m-satz.an .zeile > span { transform: none; }
.m-satz.geht .zeile > span { transform: translateY(-110%); }
.m-satz.sofort .zeile > span { transition: none; }

.m-karte {
  grid-column: 10 / 13; grid-row: 3; align-self: end; justify-self: end;
  width: 100%; max-width: 33.5rem; padding: 2rem;
  border-radius: var(--r-karte); background: rgba(29, 22, 18, .72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.m-karte-kopf { font-size: 1.4rem; margin-bottom: 1.4rem; }
.m-wahl { display: grid; gap: .8rem; }
/* Nicht gewählte Einträge: das Vorschaubild tritt zurück, die Schrift bleibt über 4,5:1 */
.m-wahl button {
  display: flex; align-items: center; gap: 1.4rem; width: 100%; min-height: 5.6rem;
  padding: .6rem 1rem .6rem .6rem; border-radius: var(--r-knopf); text-align: left;
  color: var(--weiss); transition: background-color .3s ease;
}
.m-wahl button[aria-selected="true"] { background: rgba(236, 228, 215, .12); }
.m-wahl button[aria-selected="false"] .m-vorschau { opacity: .55; }
.m-wahl button[aria-selected="false"] .m-tab-text { color: rgba(236, 228, 215, .8); }
@media (hover: hover) {
  .m-wahl button[aria-selected="false"]:hover .m-vorschau { opacity: .85; }
  .m-wahl button[aria-selected="false"]:hover .m-tab-text { color: var(--weiss); }
}
.m-vorschau { position: relative; flex: none; width: 4.4rem; height: 4.4rem; border-radius: var(--r-knopf); overflow: hidden; transition: box-shadow .3s ease, opacity .3s ease; }
.m-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-wahl button[aria-selected="true"] .m-vorschau { box-shadow: 0 0 0 2px var(--nacht), 0 0 0 3.5px var(--weiss); }
.m-tab-text { display: grid; gap: .2rem; min-width: 0; transition: color .3s ease; }
.m-nr { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.m-tab-name { font-size: 1.8rem; font-weight: 500; line-height: 1.15; }

/* Lichtschieber wie auf der Startseite (Anruf-Schieber), Spur in Nachtglas */
.momente .regler { grid-column: 1 / 7; grid-row: 3; align-self: end; width: min(42rem, 100%); container-type: inline-size; }
.regler-spur {
  --warm: clamp(0, (var(--griff, 0) - .5) * 10000, 1);
  position: relative; height: 64px; border-radius: 32px; overflow: hidden; cursor: pointer;
  background: rgba(29, 22, 18, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(236, 228, 215, .1);
  touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
}
.regler-fuellung { position: absolute; inset: 0 auto 0 0; width: calc(64px + (100% - 64px) * var(--griff, 0)); border-radius: 32px; background: var(--bernstein); opacity: .18; }
.regler-text { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 58px; font-size: 16px; font-weight: 500; letter-spacing: .01em; opacity: calc(1 - var(--griff, 0) * 2.5); pointer-events: none; }
.regler-text span {
  white-space: nowrap;
  background: linear-gradient(90deg, var(--asche) 0%, var(--asche) 38%, var(--weiss) 50%, var(--asche) 62%, var(--asche) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: schimmern 3.2s linear infinite;
}
@container (max-width: 320px) { .regler-text { font-size: 14px; } }
@container (max-width: 250px) { .regler-text { display: none; } }
@keyframes schimmern { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.regler-griff {
  position: absolute; top: 6px; left: calc(6px + (100% - 64px) * var(--griff, 0));
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--kaltlicht); color: #1d1612; cursor: grab; outline: none; isolation: isolate;
  touch-action: none;   /* wer den Griff fasst, schiebt; die Seite scrollt dabei nicht */
}
.regler-griff::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--bernstein); opacity: var(--warm); transition: opacity .18s ease; }
.regler-spur.zieht .regler-griff { cursor: grabbing; }
.regler-griff:focus-visible { box-shadow: 0 0 0 2px var(--nacht), 0 0 0 4px var(--weiss); }
.regler-griff svg { position: absolute; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.regler-griff .ikon-handy { opacity: calc(1 - var(--warm)); transition: opacity .18s ease; }
.regler-griff .ikon-flamme { opacity: var(--warm); transition: opacity .18s ease; }

/* ---------- 2. So geht’s ---------- */
.schritte { position: relative; z-index: 4; margin-top: calc(-1 * var(--vh)); background: var(--nacht); }
.schritte-spur { position: relative; height: calc(5 * var(--vh)); }
.schritte-fest { position: sticky; top: 0; height: var(--vh); overflow: hidden; }
.schritte-buehne {
  --S: min(86.4rem, calc(var(--vh) - 3.6rem));
  position: absolute; bottom: 0; left: calc(33% - var(--S) / 2);
  width: var(--S); aspect-ratio: 1; isolation: isolate; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 100%);
  mask-composite: intersect;
  opacity: 0; transition: opacity .8s ease;
}
.schritte-buehne.bereit { opacity: 1; }
.sk-linie { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.sk-linie path { fill: none; stroke: rgba(236, 228, 215, .3); stroke-width: 1; stroke-dasharray: 6 6; }
.hotspot {
  position: absolute; left: 0; top: 0; z-index: 3; width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem;
  color: rgba(236, 228, 215, .6); pointer-events: none; transition: color .4s ease;
  transform: translate(var(--hx, -999px), var(--hy, -999px));
}
.hotspot[data-licht="kalt"] { color: var(--kaltlicht); }
.hotspot[data-licht="warm"] { color: var(--bernstein); }
.hs-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid currentColor; }
.hs-punkt { position: absolute; left: 50%; top: 50%; width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem; border-radius: 50%; background: var(--weiss); }
.schritte-karte {
  position: absolute; right: var(--rand); top: 0; z-index: 4;
  width: 36rem; padding: 2.4rem; border-radius: var(--r-karte); background: var(--karte-dunkel);
  transform: translateY(var(--ky, 9.4rem));
}
.sk-kopf { font-size: 1.4rem; color: var(--asche); }
.sk-nummern { display: flex; gap: 1.2rem; margin-top: 1.8rem; }
.sk-nummern button {
  position: relative; width: 2.8rem; height: 2.8rem; border-radius: var(--r-knopf);
  box-shadow: inset 0 0 0 1px rgba(236, 228, 215, .3);
  font-size: 1.3rem; font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.sk-nummern button::before { content: ""; position: absolute; inset: -8px; }
.sk-nummern button[aria-current="step"] { background: var(--weiss); color: var(--nacht); box-shadow: none; }
.sk-nummern button:focus-visible { outline-color: var(--weiss); }
@media (hover: hover) { .sk-nummern button:not([aria-current="step"]):hover { box-shadow: inset 0 0 0 1px rgba(236, 228, 215, .7); } }
.sk-fenster { position: relative; overflow: hidden; height: var(--fh, 17rem); margin-top: 2.4rem; }
/* --nr0 kommt je Bild aus dem Scrollweg (seite.js), der Text gleitet mit dem Scrollen statt nach Zeit */
.sk-band { transform: translateY(calc(var(--nr0, 0) * -1 * var(--fh, 17rem))); }
.sk-schritt { height: var(--fh, 17rem); }
.sk-etikett { font-size: 1.2rem; font-variant-numeric: tabular-nums; color: var(--asche); }
.sk-schritt h3 { margin-top: .8rem; font-family: var(--anzeige); font-size: calc(3.6rem * var(--ag)); font-weight: var(--anzeige-w); line-height: 1.05; letter-spacing: calc(-.01em * var(--sp)); }
.sk-satz { margin-top: 1.2rem; font-size: 1.6rem; line-height: 1.5; color: var(--asche); text-wrap: pretty; }
.sk-fortschritt { height: 2px; margin-top: 1.6rem; border-radius: 1px; background: rgba(236, 228, 215, .12); overflow: hidden; }
.sk-fortschritt span { display: block; height: 100%; background: rgba(236, 228, 215, .55); transform-origin: left; transform: scaleX(var(--sp, 0)); }

/* ---------- Vier Farben. Eine Flamme. ---------- */
.farben {
  position: relative; z-index: 5; margin-top: calc(-1 * var(--vh)); height: calc(3 * var(--vh)); background: var(--nacht);
  --fk-b: 33.8rem; --frei-l: calc(var(--rand) + var(--fk-b) + 2.4rem); --frei-r: var(--frei-l);
}
.farben-fest { position: sticky; top: 0; height: var(--vh); overflow: hidden; }
/* --sz-y rückt die Zeile so weit herunter, dass das Produkt sie von unten fast berührt (seite.js misst das) */
.superzeile {
  --licht: 0;
  position: absolute; left: 0; right: 0; top: calc(var(--leiste) + 2rem); z-index: 3;
  text-align: center; font-family: var(--anzeige); font-weight: var(--anzeige-w); font-size: calc(min(17rem, 11.5vw, 19vh) * var(--ag)); line-height: 1; letter-spacing: calc(-.03em * var(--sp));
  pointer-events: none; transform: translateY(var(--sz-y, 0px));
}
.superzeile .sz { display: block; }
.superzeile .sz + .sz { margin-top: -.12em; }
.produkt-buehne {
  position: absolute; z-index: 2; bottom: -3%;
  left: calc(var(--frei-l) + (100% - var(--frei-l) - var(--frei-r)) / 2);
  width: calc(min(110rem, calc((var(--vh) - 10rem) * 1.5), calc((100% - var(--frei-l) - var(--frei-r)) / .78)) * var(--p-skal, 1)); aspect-ratio: 1254 / 836;
  transform: translate(-50%, var(--p-y, 0));
  -webkit-mask-image:
    radial-gradient(ellipse 58% 62% at 50% 52%, #000 87%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    radial-gradient(ellipse 58% 62% at 50% 52%, #000 87%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 90%, transparent 100%);
  mask-composite: intersect, intersect;
}
.produkt-licht { position: absolute; inset: 0; opacity: 0; }
html:not(.js) .produkt-licht { opacity: 1; }
.produkt-szene { position: absolute; inset: 0; isolation: isolate; }
.produkt-szene img { position: absolute; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; transform-origin: 0 0; will-change: transform, opacity; }
.produkt-szene .p-aus, .produkt-szene .p-schein { inset: 0; width: 100%; height: 100%; }
.produkt-szene .licht { mix-blend-mode: plus-lighter; }
@supports not (mix-blend-mode: plus-lighter) { .produkt-szene .licht { mix-blend-mode: screen; } }

.farbkarte {
  position: absolute; z-index: 4; left: var(--rand); bottom: 2.4rem;
  width: var(--fk-b); padding: 2rem; border-radius: var(--r-karte); background: var(--karte-dunkel);
}
.fk-titel { font-size: 1.6rem; color: var(--asche); }
.fk-titel span { margin-left: .6rem; color: var(--weiss); font-weight: 500; }
.muster { display: flex; gap: 1.2rem; margin-top: 1.2rem; }
.farbe {
  position: relative; width: 3.6rem; height: 3.6rem; border-radius: var(--r-knopf);
  background: var(--muster); background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(236, 228, 215, .3); transition: box-shadow .2s ease;
}
.farbe::before { content: ""; position: absolute; inset: -4px; }
@media (hover: hover) { .farbe:hover { box-shadow: inset 0 0 0 1px rgba(236, 228, 215, .3), 0 0 0 2px var(--nacht), 0 0 0 3px rgba(236, 228, 215, .4); } }
.farbe[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgba(236, 228, 215, .3), 0 0 0 2px var(--nacht), 0 0 0 3.5px var(--weiss); }
.farbe:focus-visible { outline: 2px solid var(--weiss); outline-offset: 6px; }
.fk-entwurf { margin-top: 1.2rem; font-size: 1.4rem; color: var(--asche); }
.fk-preis-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; margin-top: 2rem; font-size: 1.4rem; color: var(--asche); }
.fk-preis { font-size: 3.2rem; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; color: var(--weiss); font-variant-numeric: tabular-nums; }
/* Vormerken in der Farbkarte: Feld und Knopf untereinander, die Karte ist dafür zu schmal nebeneinander */
.farbkarte .vormerken { grid-template-columns: minmax(0, 1fr); gap: .8rem; margin-top: 1.4rem; }
.farbkarte .knopf-hell { width: 100%; }
.farbkarte .vk-hinweis { color: var(--asche); opacity: 1; }
.farben-text { position: absolute; z-index: 4; right: var(--rand); bottom: 2.4rem; width: var(--fk-b); }
.farben-text h3 { font-family: var(--anzeige); font-size: calc(3.6rem * var(--ag)); font-weight: var(--anzeige-w); line-height: 1.05; letter-spacing: calc(-.01em * var(--sp)); text-wrap: balance; }
.farben-text p { margin-top: 1.2rem; color: var(--asche); text-wrap: pretty; }

/* ---------- 3. Die Box (hell) ---------- */
.kapitel-box { position: relative; z-index: 6; margin-top: calc(-1 * var(--vh)); padding-bottom: 16rem; }
.box-inhalt {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start;
  padding: 5rem var(--rand) 0;
}
.box-links { grid-column: 1 / 5; }
.h4 { font-family: var(--anzeige); font-size: calc(3.6rem * var(--ag)); font-weight: var(--anzeige-w); line-height: 1.05; letter-spacing: calc(-.01em * var(--sp)); max-width: 12em; }
.buchstaben { list-style: none; padding: 0; margin-top: 3.6rem; display: grid; gap: 1.2rem; max-width: 40rem; }
.buchstaben li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); column-gap: 1.8rem; align-items: start; }
.kreis { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(34, 26, 21, .2); font-size: 1.3rem; font-weight: 500; }
.buchstaben p { padding-top: .6rem; text-wrap: pretty; }
.buchstaben strong { font-weight: 500; }
/* Ohne Rahmen: der Bildgrund ist der Wachston der Seite, die Ränder laufen zur Sicherheit weich aus */
.box-bild {
  grid-column: 5 / 10; aspect-ratio: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
}
.box-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--bz, 1.06)); transform-origin: 50% 55%; }
.box-zahlen { grid-column: 10 / 13; }
.box-zahlen dl { display: grid; gap: 1.2rem; }
.zahl { display: flex; flex-direction: column-reverse; padding: 2rem; border-radius: var(--r-karte); background: var(--karte-hell); }
.zahl dd { font-size: 3rem; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.zahl dt { margin-top: .4rem; font-size: 1.4rem; color: var(--tinte-leise); }
.etikett { margin-top: 1.6rem; font-size: 1.2rem; text-transform: uppercase; color: var(--tinte-leise); }

/* ---------- 4. Fragen (hell) ---------- */
.fragen { position: relative; z-index: 6; padding-bottom: 16rem; }
.fragen-liste {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 1.2rem;
  padding: 5rem var(--rand) 0;
}
/* Nummer und Frage stehen genau im Seitenraster unter „4.“ und „Fragen“, die Kartenfläche reicht 12 px darüber hinaus */
.frage {
  grid-column: 1 / -1; position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start;
  padding: 2.2rem 0 3rem;
}
.frage::before { content: ""; position: absolute; inset: 0 -1.2rem; z-index: -1; border-radius: var(--r-karte); background: var(--karte-hell); }
@supports (grid-template-columns: subgrid) { .frage { grid-template-columns: subgrid; } }
.f-nr { grid-column: 1 / 5; font-family: var(--anzeige); font-size: calc(3.2rem * var(--ag)); font-weight: var(--anzeige-w); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.frage h3 { grid-column: 5 / 10; padding-right: 4rem; font-family: var(--anzeige); font-size: calc(3.2rem * var(--ag)); font-weight: var(--anzeige-w); line-height: 1.1; letter-spacing: calc(-.01em * var(--sp)); text-wrap: balance; }
.frage p { grid-column: 10 / 13; padding-top: .4rem; text-wrap: pretty; }

/* ---------- PHONE OFF. LIGHT ON. ---------- */
.finale { position: relative; z-index: 7; height: calc(3 * var(--vh)); background: var(--wachs); color: var(--tinte); --fx: 40%; --fy: 44%; }
.finale > .anker { top: calc(1.9 * var(--vh)); }
.finale-fest { position: sticky; top: 0; height: var(--vh); overflow: hidden; }
.band {
  position: absolute; left: 0; right: 0; top: var(--fy); z-index: 1;
  height: .9em; margin-top: -.45em;
  font-size: 24rem; font-weight: var(--wm-w); line-height: .8; letter-spacing: calc(var(--wm-sp) / 2); text-transform: uppercase; white-space: nowrap;
}
.band::before, .band::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; opacity: .2; }
.band::before { top: 0; }
.band::after { bottom: 0; }
.band-lauf { display: flex; padding-top: .05em; transform: translateX(var(--bx, 0)); will-change: transform; }
.band-lauf span { flex: none; padding-right: .5em; }
.finale-foto {
  position: absolute; inset: 0; z-index: 2; background: var(--nacht); color: var(--weiss);
  -webkit-mask-image: var(--flammen-maske); mask-image: var(--flammen-maske);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: var(--mw, 0) var(--mh, 0); mask-size: var(--mw, 0) var(--mh, 0);
  -webkit-mask-position: var(--mx, 50%) var(--my, 50%); mask-position: var(--mx, 50%) var(--my, 50%);
}
.finale-foto.offen { -webkit-mask-image: none; mask-image: none; }
/* Breite --fb-b misst seite.js: so groß, dass das Foto das Fenster deckt, am Handy höchstens 1,6 Fensterbreiten.
   Die Flamme (Foto 1536 x 1024: x 768, breiteste Stelle y 444) liegt genau auf --fx/--fy, dort setzt auch der Zoom an. */
.finale-bild {
  --fb-b: max(120vw, 180vh);
  position: absolute; width: var(--fb-b); aspect-ratio: 3 / 2;
  left: calc(var(--fx) - var(--fb-b) * .5); top: calc(var(--fy) - var(--fb-b) * .28906);
  transform: scale(var(--fz, 1)); transform-origin: 50% 43.36%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
.finale-bild img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.vormerkkarte {
  position: absolute; z-index: 5; right: var(--rand); top: 50%;
  width: min(52rem, 40vw); padding: 2.8rem; border-radius: var(--r-karte); color: var(--weiss);
  background: var(--glas); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  transform: translateY(calc(-50% + var(--vk-y, 100vh)));
  opacity: var(--vk-o, 0);
}
html:not(.js) .vormerkkarte { --vk-y: 0px; --vk-o: 1; }
html:not(.js) .finale-foto { -webkit-mask-image: none; mask-image: none; }
html:not(.js) .marke, html:not(.js) .leiste:not(.marke-da) .knopf-umriss { opacity: 1; visibility: visible; }
html:not(.js) .schritte-buehne { opacity: 1; }
html:not(.js) .sk-fenster, html:not(.js) .sk-schritt { height: auto; }
html:not(.js) .sk-schritt + .sk-schritt { margin-top: 1.6rem; }
html:not(.js) .sk-nummern, html:not(.js) .sk-fortschritt { display: none; }
html:not(.js) .schritte-karte { max-height: calc(var(--vh) - 11rem); overflow: auto; }
.vormerkkarte h2 { font-family: var(--anzeige); font-size: calc(3.6rem * var(--ag)); font-weight: var(--anzeige-w); line-height: 1.05; letter-spacing: calc(-.01em * var(--sp)); }
.vk-satz { margin-top: 1rem; color: var(--weiss); text-wrap: pretty; }
.vk-satz a { text-underline-offset: .2em; white-space: nowrap; }
.vormerken { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; margin-top: 2.4rem; }
.vormerken input[type="email"] {
  height: 4.8rem; min-width: 0; padding: 0 1.4rem; border-radius: var(--r-knopf);
  border: 1px solid rgba(236, 228, 215, .42); background: rgba(236, 228, 215, .05); color: var(--weiss);
  font: 400 1.6rem/1 var(--schrift);
}
.vormerken input::placeholder { color: rgba(236, 228, 215, .72); }
.vormerken input[aria-invalid="true"] { border-color: #f09b8b; }
.vormerken input:focus-visible { outline: 2px solid var(--weiss); outline-offset: 2px; }
.vk-meldung { grid-column: 1 / -1; font-size: 1.4rem; min-height: 0; }
.vk-meldung:empty { display: none; }
.vk-meldung.fehler { color: #f09b8b; }
.vk-hinweis { margin-top: 1.2rem; font-size: 1.4rem; color: var(--weiss); opacity: .8; }
/* Nach Erfolg verschwinden Feld und Knopf, die Meldung steht an ihrer Stelle (wie auf der Startseite).
   Steht eine Meldung da, tritt sie an die Stelle des Hinweises, damit die Karte nicht wächst. */
.vormerken.fertig input[type="email"], .vormerken.fertig .knopf-hell { visibility: hidden; }
.vormerken.fertig .vk-meldung { position: absolute; left: 0; right: 0; top: 0; color: var(--weiss); font-size: 1.6rem; font-weight: 500; line-height: 1.35; outline: none; }
.vormerken:has(.vk-meldung.fehler:not(:empty)) ~ .vk-hinweis { display: none; }
.vormerken.fertig ~ .vk-hinweis { visibility: hidden; }

/* ---------- Fuß: klebt unten und wird am Ende aufgedeckt ---------- */
main { position: relative; z-index: 2; background: var(--nacht); }
.fuss {
  position: sticky; bottom: 0; z-index: 1;
  background: var(--nacht); color: var(--weiss);
  padding: 10rem var(--rand) 0;
}
.fuss-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 4rem; padding-bottom: 8rem; position: relative; }
.fs-spalte { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.fs-marke { grid-column: 1 / 5; }
.fs-spalte:nth-child(2) { grid-column: 5 / 9; }
.fs-spalte:nth-child(3) { grid-column: 9 / 11; }
.fs-spalte:nth-child(4) { grid-column: 11 / 13; }
.fs-kopf { font-size: 1.2rem; text-transform: uppercase; color: var(--asche); padding-bottom: 1.6rem; margin-bottom: 2rem; width: 100%; }
.fuss-raster::before { content: ""; position: absolute; left: calc(-1 * var(--rand)); right: calc(-1 * var(--rand)); top: 3.4rem; height: 1px; background: currentColor; opacity: .2; }
.fs-claim { font-family: var(--anzeige); font-size: calc(3.6rem * var(--ag)); font-weight: var(--anzeige-w); line-height: 1.05; letter-spacing: calc(-.01em * var(--sp)); }
.fs-satz { margin-top: 1.2rem; color: var(--asche); max-width: 30rem; }
.fuss nav a { display: inline-flex; align-items: center; min-height: 4.4rem; line-height: 1.2; }
.fuss nav a::after { bottom: 1rem; }
.luecke { display: inline-block; padding: .2rem .8rem; border-radius: var(--r-knopf); background: rgba(236, 228, 215, .1); color: var(--asche); }
.fs-unten {
  position: relative; display: flex; justify-content: space-between; align-items: center; height: 6rem;
  font-size: 1.2rem; text-transform: uppercase; color: var(--asche);
}
.fs-unten::before { content: ""; position: absolute; left: calc(-1 * var(--rand)); right: calc(-1 * var(--rand)); top: 0; height: 1px; background: var(--weiss); opacity: .2; }
.fs-unten nav { display: flex; gap: 2.4rem; }
.fs-unten a { min-height: 4.4rem; display: inline-flex; align-items: center; }
.fs-unten a::after { bottom: 1.2rem; }

/* ---------- Textseiten (Impressum, Datenschutz) ---------- */
.textseite { max-width: 72rem; margin: 0 auto; padding: calc(var(--leiste) + 6rem) var(--rand) 10rem; }
.textseite h1 { font-family: var(--anzeige); font-size: min(6rem, 13vw); font-weight: var(--anzeige-w); line-height: 1; letter-spacing: calc(-.01em * var(--sp)); margin-bottom: 4rem; }
.textseite h2 { font-family: var(--anzeige); font-size: calc(2.4rem * var(--ag)); font-weight: var(--anzeige-w); margin: 4rem 0 1.2rem; }
.textseite p { margin: 0 0 1.2rem; text-wrap: pretty; }
.textseite address { font-style: normal; }
.textseite a { text-underline-offset: .2em; }
.textseite .stand { margin-top: 4rem; color: var(--asche); font-size: 1.4rem; }
.textseite [id] { scroll-margin-top: calc(var(--leiste) + 2rem); }
.textseite-leiste .marke { opacity: 1; visibility: visible; }
.textseite-leiste::before { opacity: 1; }
.fuss.fuss-text { position: relative; padding-top: 0; }

/* ---------- Mittlere Breiten (etwa 1000 px) ---------- */
@media (max-width: 1279px) {
  .m-karte { grid-column: 8 / 13; }
  .m-saetze, .momente .regler { grid-column: 1 / 7; }
  /* Der Satz steht oben unter dem Kapitelkopf: in der Mitte läge er beim Abend auf dem Aufdruck der Box */
  .m-saetze { align-self: start; padding-top: 3.2rem; }
  /* Einstieg: die Box bleibt schmal genug für Wortmarke und Zeile */
  .einstieg-buehne { --S: min(calc(var(--h) * .98), 98rem, calc((var(--h) - 18rem) / .7918), calc(65vw - 30px)); }
  .farben { --fk-b: 28rem; }
  .box-bild { grid-column: 5 / 9; }
  .box-zahlen { grid-column: 9 / 13; }
  .vormerkkarte { width: min(46rem, 44vw); }
  .finale { --fx: 32%; }
}
@media (max-width: 1100px) {
  .farben { --frei-r: calc(var(--rand) + 4rem); }
  .farben-text { display: none; }
  .vormerken { grid-template-columns: minmax(0, 1fr); }
  .vormerken .knopf-hell { width: 100%; }
}
/* Momente: die Wahl als kompakte Reihe unten rechts neben dem Schieber, wenn Breite oder Höhe knapp sind */
@media (max-width: 1279px), (max-height: 760px) {
  .m-karte { padding: 1.2rem; }
  .m-karte-kopf, .m-nr { display: none; }
  .m-wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-wahl button { flex-direction: column; align-items: flex-start; gap: .6rem; min-height: 0; padding: .6rem; }
  .m-tab-name { font-size: 1.3rem; }
}
/* Niedrige Fenster: die Farbkarte mit Formular wird kürzer, damit sie unter „Eine Flamme.“ bleibt */
@media (max-height: 820px) and (min-width: 761px) {
  .farbkarte { padding: 1.6rem 2rem; }
  .fk-entwurf { display: none; }
  .fk-preis-zeile { margin-top: 1.4rem; }
}
/* Tablet hochkant: ohne gestrichelte Linie, die Navigation bleibt einzeilig */
@media (max-width: 959px) {
  .sk-linie { display: none; }
  .navi { grid-column: 4 / 10; gap: 2rem; }
  .navi a { white-space: nowrap; }
}

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  :root { --rand: 16px; --spalt: 12px; --leiste: 60px; }
  .leiste { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; font-size: 14px; }
  .marke { grid-column: 1; font-size: 18px; }
  .navi { display: none; }
  .leiste .knopf-umriss { grid-column: 2; height: 40px; padding: 0 14px; font-size: 14px; }
  .leiste .knopf-umriss .pfeil { display: none; }
  .menue-knopf { grid-column: 3; display: grid; place-items: center; position: relative; width: 40px; height: 40px; border-radius: var(--r-knopf); }
  .menue-knopf::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid currentColor; opacity: .4; }
  .menue-knopf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  /* Zu zwei Striche, offen ein Kreuz: nur die Deckkraft wechselt */
  .menue-knopf path { transition: opacity .3s ease; }
  .menue-knopf .mk-offen, .menue-knopf[aria-expanded="true"] .mk-zu { opacity: 0; }
  .menue-knopf[aria-expanded="true"] .mk-offen { opacity: 1; }

  /* Einstieg: Wortmarke, Box, darunter Preis und Vormerken */
  /* Mindesthöhe so, dass Preis und Vormerken auch auf dem iPhone SE (548 px sichtbar) im ersten Bild stehen */
  .einstieg { --h: max(var(--vh), 520px); }
  .einstieg-kopf { top: calc(var(--leiste) + 12px); }
  .wortmarke { font-size: var(--wm, calc((100vw - 32px) / 5.69)); }
  .einstieg-ecke { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
  .einstieg-was { flex: 1 1 0; min-width: 0; font-size: 14px; }
  .einstieg-ecke .knopf-umriss { height: 40px; padding: 0 14px; font-size: 14px; }
  .einstieg-ecke .knopf-umriss .pfeil { display: none; }
  /* Unter der Wortmarke (Höhe etwa 0,145 ihrer Breite) bleibt Platz für die offene Box, unten für Preis und Vormerken */
  .einstieg-buehne {
    --zeile-unten: calc(var(--leiste) + 28px + (100vw - 32px) * .145);
    --S: min(116vw, calc((var(--h) - 100px - var(--zeile-unten)) / .7918));
    top: calc(var(--h) - 100px - .8636 * var(--S));
  }

  /* Momente: nicht klebend, Kopf, Foto im Hochformat, Satz, Wahl und Schieber untereinander */
  .momente { margin-top: 0; height: auto; }
  .momente > .anker { top: 0; }
  .momente-fest { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; padding-bottom: 56px; }
  .momente-inhalt { display: contents; }
  .momente .kapitelkopf { order: 0; padding: 72px var(--rand) 14px; }
  .momente .kapitelkopf::after { left: 0; right: 0; }
  .momente-bild { order: 1; position: relative; inset: auto; aspect-ratio: 4 / 5; overflow: hidden; margin-top: 16px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 100%); }
  .momente-bild::after { background: none; }
  .m-saetze { order: 2; align-self: stretch; position: relative; z-index: 2; margin: -72px var(--rand) 0; }
  .m-satz { font-size: calc(30px * var(--ag)); max-width: none; }
  .m-karte { order: 3; align-self: stretch; margin: 22px var(--rand) 0; padding: 0; width: auto; max-width: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .m-karte-kopf { display: none; }
  .m-wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .m-wahl button { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 6px; }
  .m-vorschau { width: 64px; height: 64px; }
  .m-nr { display: none; }
  .m-tab-name { font-size: 13px; }
  .momente .regler { order: 4; align-self: stretch; width: auto; margin: 22px var(--rand) 0; }

  .kapitelkopf { padding: 72px var(--rand) 14px; }
  .kk-nr, .kapitelkopf h2 { font-size: calc(30px * var(--ag)); }
  .kk-nr { grid-column: 1 / 3; }
  .kapitelkopf h2 { grid-column: 3 / 13; }

  /* So geht’s: Bühne oben klebend, Karte im Daumenbereich */
  .schritte { margin-top: 0; }
  .schritte-spur { height: calc(4.6 * var(--vh)); }
  .schritte-buehne { --S: min(116vw, calc(var(--vh) - 290px)); left: calc(50% - var(--S) / 2); top: calc(var(--leiste) - 10px); bottom: auto; }
  .schritte-karte {
    left: var(--rand); right: var(--rand); top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: auto;
    padding: 16px 16px 14px; background: rgba(29, 22, 18, .78);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transform: none;
  }
  .sk-kopf { display: none; }
  .sk-nummern { margin-top: 0; gap: 10px; }
  .sk-fenster { margin-top: 12px; }
  .sk-schritt h3 { font-size: calc(22px * var(--ag)); margin-top: 4px; }
  .sk-satz { font-size: 15px; margin-top: 6px; }
  .sk-fortschritt { margin-top: 10px; }

  /* Farben: im normalen Fluss */
  .farben { margin-top: 0; height: auto; padding-bottom: 64px; overflow: hidden; }
  .farben-fest { position: relative; height: auto; overflow: visible; padding-top: 88px; }
  .superzeile { position: relative; top: auto; font-size: calc(52px * var(--ag)); transform: none; }
  .produkt-buehne { position: relative; left: 50%; bottom: auto; width: 116vw; margin-top: -36px; transform: translateX(-50%); }
  .farben-text { display: block; }
  .finale { --fx: 50%; }
  .farbkarte { position: relative; left: auto; bottom: auto; width: auto; margin: 0 var(--rand); }
  .farben-text { position: relative; right: auto; bottom: auto; width: auto; margin: 28px var(--rand) 0; }
  .farben-text h3 { font-size: calc(24px * var(--ag)); }

  .kapitel-box { margin-top: 0; padding-bottom: 96px; }
  .box-inhalt { display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding-top: 28px; }
  .box-bild { order: -1; align-self: stretch; }
  .h4 { font-size: calc(24px * var(--ag)); }
  .buchstaben { margin-top: 22px; }
  .box-zahlen dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zahl { padding: 16px; }
  .zahl dd { font-size: 22px; }

  .fragen { padding-bottom: 96px; }
  .fragen-liste { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
  .frage { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 22px; row-gap: 8px; }
  .frage::before { inset: 0; }
  .f-nr, .frage h3, .frage p { grid-column: 1; padding-right: 0; }
  .f-nr, .frage h3 { font-size: calc(20px * var(--ag)); }

  .band { font-size: 56px; }
  /* Flamme und Band weit oben, die Vormerkkarte steht darunter */
  .finale { --fy: 18%; }
  .vormerkkarte { left: var(--rand); right: var(--rand); top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: auto; padding: 20px; transform: translateY(var(--vk-y, 100vh)); background: rgba(29, 22, 18, .78); }
  .vormerkkarte h2 { font-size: calc(24px * var(--ag)); }
  .vormerken { margin-top: 14px; }

  .fuss { position: relative; padding-top: 64px; }
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 32px; }
  .fuss-raster::before { display: none; }
  .fs-marke, .fs-spalte:nth-child(2) { grid-column: 1 / -1; }
  .fs-spalte:nth-child(3) { grid-column: 1; }
  .fs-spalte:nth-child(4) { grid-column: 2; }
  .fs-kopf { border-bottom: 1px solid rgba(236, 228, 215, .2); padding-bottom: 10px; margin-bottom: 8px; }
  .fs-claim { font-size: calc(28px * var(--ag)); }
}

/* Handy quer: die Farbkarte mit Formular ist hochkant gestapelt höher als das Fenster. Quer steht links Farbe und
   Preis, rechts Feld, Knopf und Hinweis. Bei So geht’s stehen Bühne und Karte nebeneinander. */
@media (max-width: 760px) and (orientation: landscape) {
  .farbkarte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 16px 20px; }
  .farbkarte > :not(.vormerken):not(.vk-hinweis):not(noscript) { grid-column: 1; }
  .farbkarte .vormerken { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  .farbkarte .vk-hinweis { grid-column: 2; grid-row: 5; margin-top: 8px; }
  .fk-entwurf { display: none; }
  .fk-preis-zeile { margin-top: 14px; }
  /* So geht’s quer: Bühne links, Karte rechts, statt einer winzigen Bühne über der Karte */
  .schritte-buehne { --S: min(48vw, calc(var(--vh) - var(--leiste) - 8px)); left: calc(25vw - var(--S) / 2); top: calc(var(--leiste) + 4px); }
  .schritte-karte { left: 50vw; right: var(--rand); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}