/* NUIT VISIBLE — v1.0 · Kampagne statt Shop
   Startzustand steht vollständig im CSS; app.js ändert nur, was Scrollen auslöst.
   Regel (Beast Gate 9): jeder Bildschirm hat EINEN dominanten Gedanken — großes Bild oder große Schrift. */

:root {
  --schwarz: #000;
  --creme: #f3eadb;
  --papier: #efe6d8;   /* Creme-Kapitel */
  --tinte: #15110d;    /* Schrift auf Creme */
  --gold: #c9a066;
  --gold-dunkel: #8a5a24;
  --grau: #8a8174;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 72px);
}

* { box-sizing: border-box; }
h1, h2, p { text-wrap: pretty; }
html { background: var(--schwarz); }
body {
  margin: 0;
  background: var(--schwarz);
  color: var(--creme);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- Kopf: eine Marke, kein Menü ---- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; justify-content: center;
  padding: 22px var(--gutter);
  pointer-events: none;
  mix-blend-mode: difference;
  transition: opacity .6s ease;
}
.kopf--weg { opacity: 0; }
.marke {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-weight: 400; font-size: 12px; letter-spacing: .42em; padding-left: .42em;
}
.marke small { font-size: 10px; letter-spacing: .42em; color: #a9a094; }   /* 18e: 8 px war zu klein */

/* ---- Bahn + Bühne (Höhe der Bahn setzt app.js aus der KARTE) ---- */
.bahn { position: relative; height: 2200vh; background: var(--schwarz); }
.buehne {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--schwarz);
}

/* ---- 01 Hero: Flakon auf Fels, Rauch lebt dahinter ---- */
/* v1.9 (18y3): das Standbild ist ein <picture> je Format hinter dem durchsichtigen Video — kein Poster, kein Doppel-Download */
.hero { position: absolute; inset: 0; z-index: 1; background: #000; }
/* v1.10: <picture> ist inline und belegte eine Textzeile — das Video rutschte ~30 px tiefer, oben entstand eine Kante (Ralph, iPhone) */
.hero__bild { position: absolute; inset: 0; display: block; }
.hero__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; background: transparent; }
.hero::after { /* linke Hälfte ruhig für die Schrift */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.25) 34%, transparent 52%);
}

/* ---- Film ---- */
.film {
  position: absolute; inset: 0; z-index: 2;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.film::after { /* Bilderrahmen, erscheint beim Schrumpfen */
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(201, 160, 102, var(--rahmen, 0));
  pointer-events: none;
}
.film__flaeche { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* dunkelt nur die Ecke unten links ab, in der Tafeln und Kapitelwörter stehen */
.schleier {
  position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 0% 100%, rgba(0,0,0,.78) 0%, rgba(0,0,0,.4) 38%, transparent 62%);
}

.partikel {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 5; pointer-events: none; display: block;
}

/* ---- 18y Ladezustand: oben mittig — dort steht weder der Ton-Knopf (oben links) noch eine
   Bildunterschrift (unten links) noch der Satz (38 %). Leise, damit er den Film nicht überredet. ---- */
.laden {
  position: absolute; left: 0; right: 0; top: 13vh; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 1.4em;
  pointer-events: none;
  animation: ladenAuf .6s ease both;
}
.laden[hidden] { display: none; }
.laden__wort, .laden__zahl {
  margin: 0; font-family: var(--sans); font-weight: 300;
  font-size: clamp(10px, .78vw, 13px); letter-spacing: .34em; text-transform: uppercase;
  color: #9b9088; text-shadow: 0 0 18px rgba(0,0,0,.9);
}
.laden__linie {
  width: min(38vw, 300px); height: 1px; overflow: hidden;
  background: rgba(243,234,219,.16);
}
.laden__linie i {
  display: block; height: 100%; background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s linear;
}
/* Solange von dieser Szene noch kein einziges Bild da ist, wäre „0 %" mit stehender Linie eine
   tote Anzeige. Dann sucht die Linie — das ist wahr und sagt: es passiert etwas. */
.laden--sucht .laden__linie i { width: 34%; animation: ladenSuch 1.6s ease-in-out infinite; }
.laden--sucht .laden__zahl { visibility: hidden; }
@keyframes ladenSuch { from { transform: translateX(-110%) } to { transform: translateX(310%) } }
@keyframes ladenAuf { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .laden { animation: none }
  .laden__linie i { transition: none }
  .laden--sucht .laden__linie i { animation: none; width: 100%; opacity: .35; transform: none; }
}

/* ---- Texte auf der Bühne ---- */
.buehne [data-akt] { opacity: 0; will-change: opacity, transform; }
.hero__text { opacity: 1; }
.hero__text {
  position: absolute; z-index: 10;
  left: calc(var(--gutter) * 1.4); top: 50%; translate: 0 -50%;
  max-width: 31vw;   /* endet vor dem Flakon (Flakon steht bei 38–62 % der Breite) */
}
.titel {
  margin: 0; font-family: var(--serif); font-weight: 300; text-transform: uppercase;
  font-size: clamp(34px, 2.9vw, 84px); line-height: 1.04; letter-spacing: .02em;
}
.unterzeile {
  margin: 3.4vh 0 0; font-size: clamp(11px, .85vw, 16px); letter-spacing: .34em; text-transform: uppercase; color: #d9cfbf;
}
.los {
  margin-top: 7vh; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; gap: 20px;
  color: var(--creme); font: 400 clamp(10px, .7vw, 13px)/1 var(--sans); letter-spacing: .38em; text-transform: uppercase;
}
.los__kreis {
  width: clamp(48px, 3.4vw, 72px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(243, 234, 219, .7); position: relative; transition: background .3s, border-color .3s;
}
.los__kreis::before { /* Pfeil nach unten */
  content: ""; position: absolute; left: 50%; top: 30%; width: 1px; height: 38%; background: currentColor; translate: -50% 0;
}
.los__kreis::after {
  content: ""; position: absolute; left: 50%; top: 58%; width: 22%; aspect-ratio: 1;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; translate: -50% 0; rotate: 45deg;
}
.los:hover .los__kreis, .los:focus-visible .los__kreis { background: rgba(201, 160, 102, .18); border-color: var(--gold); }
.los:focus-visible { outline: 1px solid var(--gold); outline-offset: 8px; }

/* 02 Filmtafeln: wo, wer, was — ohne Ton lesbar */
.filmtafel {
  position: absolute; z-index: 10; margin: 0;
  left: var(--gutter); bottom: 9vh; max-width: min(60vw, 900px);
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(26px, 2.6vw, 58px); line-height: 1.12;
  text-shadow: 0 0 24px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.6);
}
.filmtafel span {
  display: block; margin-bottom: .2em;
  font-style: normal; text-transform: uppercase; letter-spacing: .16em;
  font-size: 1.9em; line-height: 1;
}
.filmtafel--klein span { font-size: 1.3em; }
.filmtafel--tuer { left: auto; right: var(--gutter); text-align: right; }   /* 18c: links steht der Flakon */

.satz, .rauch, .sichtbar { position: absolute; z-index: 10; margin: 0; font-weight: 300; }
.satz {
  left: 0; right: 0; text-align: center;
  font-family: var(--serif); text-transform: uppercase;
  font-size: clamp(30px, 5vw, 96px); letter-spacing: .14em; line-height: 1;
  padding: 0 var(--gutter);
}
.satz--a { top: 38%; }
.satz--b { top: calc(38% + clamp(52px, 8vw, 150px)); color: var(--gold); }
.nur-schmal { display: none; }

/* 05–08 Kapitel: das Wort besitzt den Bildschirm */
.kapitel {
  position: absolute; z-index: 10;
  left: var(--gutter); bottom: 7vh;
  max-width: min(70vw, 1400px);
  text-shadow: 0 0 30px rgba(0,0,0,.7);
}
.kapitel__nr { display: inline-block; padding: 7px 18px 6px; margin-left: -18px; border-radius: 999px; background: radial-gradient(ellipse at center, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 55%, rgba(0,0,0,0) 100%); font-size: clamp(12px, .95vw, 17px); font-weight: 400; letter-spacing: .38em; text-transform: uppercase; color: #f0d6aa; text-shadow: 0 2px 18px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.85); }   /* 18e: Etikett auf hellem Bild lesbar */
.kapitel__wort {
  margin: 1vh 0 0; font-family: var(--serif); font-weight: 300; text-transform: uppercase;
  font-size: clamp(72px, 12vw, 300px); line-height: .9; letter-spacing: .02em; margin-left: -.05em;
}
.kapitel__namen { margin: 2.4vh 0 0; font-size: clamp(12px, .95vw, 18px); letter-spacing: .3em; text-transform: uppercase; }
.kapitel__satz { margin: 1.2vh 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.5vw, 30px); color: #e6dccb; }

.rauch {
  left: 0; right: 0; top: 50%; translate: 0 -50%;
  text-align: center; font-family: var(--serif); font-style: italic;
  font-size: clamp(34px, 5.4vw, 104px); line-height: 1.05; letter-spacing: .02em;
  padding: 0 var(--gutter);
  text-shadow: 0 0 40px rgba(0,0,0,.8);
}

.sichtbar {
  inset: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  font-family: var(--serif); text-transform: uppercase;
  font-size: clamp(40px, 5.4vw, 130px); letter-spacing: .08em; line-height: 1;
  pointer-events: none;
}
.sichtbar__a, .sichtbar__b { width: auto; }
.sichtbar__b { text-align: right; color: var(--gold); }

.rahmen-text {
  position: absolute; z-index: 10;
  right: var(--gutter); top: 50%; translate: 0 -50%;
  width: 29%;
}
.rahmen-text__marke, .rahmen-text__hinweis { font-size: 11px; letter-spacing: .36em; text-transform: uppercase; color: var(--gold); }
.rahmen-text__satz {
  margin: 22px 0 0; text-wrap: balance; font-family: var(--serif); font-size: clamp(30px, 3.2vw, 62px); line-height: 1.1;
}
.rahmen-text__satz em { color: var(--gold); }
@media (min-width: 1200px) { .rahmen-text { width: 25%; } }
@media (min-width: 2000px) { .rahmen-text { width: 21%; } }   /* 18e: der breitere Rahmen braucht die Spalte schmaler */
.rahmen-text__hinweis { color: var(--grau); }

/* 04 · 07 Creme-Tafeln: schieben sich über die Bühne */
.tafel {
  position: absolute; inset: 0; z-index: 20; overflow: hidden;
  visibility: hidden; transform: translate3d(0, 100%, 0);
  background: var(--papier); color: var(--tinte);
  will-change: transform;
}
.tafel__bild { position: absolute; inset: -6% 0; display: block; }
.tafel__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tafel__frage {
  position: absolute; z-index: 1; margin: 0;
  left: var(--gutter); right: var(--gutter); top: 13vh;
  font-family: var(--serif); font-weight: 300; text-transform: uppercase;
  font-size: clamp(48px, 7.6vw, 190px); line-height: .96; letter-spacing: .01em;
}
.tafel--rechts .tafel__text { position: absolute; z-index: 1; left: var(--gutter); top: 50%; translate: 0 -50%; width: 46%; }
.tafel--rechts .tafel__frage { position: static; }
.tafel__nr { display: block; margin-bottom: 3vh; font-size: clamp(11px, .75vw, 14px); letter-spacing: .42em; text-transform: uppercase; color: var(--gold-dunkel); }

/* ---- Kaufzone: jeder Abschnitt ein Bildschirm, Bild randlos ---- */
.vollbild { position: absolute; inset: 0; display: block; }
.vollbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gross {
  margin: 0; font-family: var(--serif); font-weight: 300; text-transform: uppercase;
  font-size: clamp(44px, 6vw, 150px); line-height: .98; letter-spacing: .01em;
}
.gross em { font-style: italic; text-transform: none; color: var(--gold); }
.marke-klein { font-size: clamp(11px, .75vw, 14px); letter-spacing: .42em; text-transform: uppercase; color: var(--gold); }

/* 11 Composition (Creme III) */
.komposition { position: relative; min-height: 100vh; min-height: 100svh; background: var(--papier); color: var(--tinte); overflow: hidden; }
.komposition__text { position: relative; z-index: 1; padding: 13vh var(--gutter); }
.komposition .gross { font-size: clamp(40px, 4.2vw, 110px); }
.komposition .noten { display: none; }   /* die Noten stehen am Produkt; hier spricht das Stillleben */
.noten { margin: 6vh 0 0; padding: 0; display: grid; gap: 2.2vh; }
.noten div { display: grid; grid-template-columns: clamp(64px, 5vw, 110px) 1fr; gap: 16px; align-items: baseline; border-top: 1px solid rgba(21, 17, 13, .2); padding-top: 1.4vh; }
.noten dt { font-size: 11px; letter-spacing: .38em; text-transform: uppercase; color: var(--gold-dunkel); }
.noten dd { margin: 0; font-family: var(--serif); font-size: clamp(18px, 1.35vw, 28px); }
.noten--hell div { border-top-color: #2a2620; }
.noten--hell dt { color: var(--gold); }

/* 12 Craft */
.szene { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #000; }
.szene__text { position: absolute; z-index: 1; left: var(--gutter); bottom: 12vh; text-shadow: 0 0 30px rgba(0,0,0,.7); }
.specs { margin: 4vh 0 0; display: flex; align-items: center; gap: 18px; font-size: clamp(11px, .8vw, 15px); letter-spacing: .36em; text-transform: uppercase; color: #d9cfbf; }
.specs i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* 13 Two sprays: sticky Szene, Scroll löst die Sprühstöße aus */
.spray { position: relative; height: 320vh; background: #000; }   /* v1.10: länger, weil der Scroll jetzt das Sprühen fährt */
.spray__buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.spray__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.spray__zeile {
  position: absolute; z-index: 2; margin: 0; right: var(--gutter); top: 9vh;
  width: 52vw; text-align: right; opacity: 0; text-shadow: 0 0 30px rgba(0,0,0,.8);
  font-family: var(--serif); font-weight: 300; text-transform: uppercase;
  font-size: clamp(44px, 6vw, 150px); line-height: .98;
}
.spray__zeile--2 { color: var(--gold); }
.spray__zeile--3 { text-transform: none; font-style: italic; font-size: clamp(36px, 4.4vw, 110px); }

/* 14 Character */
.charakter { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #000; }
.charakter__text { position: absolute; z-index: 1; right: var(--gutter); top: 50%; translate: 0 -50%; width: 44vw; }
.charakter__zeilen {
  margin: 3vh 0 0; font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(40px, 4.8vw, 120px); line-height: 1.08;
}

/* 15 Product (17d2): Bild randlos links, Kaufspalte rechts — kein Shop-Template */
.produkt {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  min-height: 100vh; min-height: 100svh; background: #000;
}
.produkt__bild { position: relative; display: block; min-height: 100%; }
.produkt__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.produkt__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 70%, #000 100%); }
.produkt__text { max-width: 640px; padding: 12vh var(--gutter) 10vh clamp(32px, 4vw, 96px); align-self: center; }
.produkt__art { font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--gold); }
.produkt__titel { margin: 18px 0 14px; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 4.4vw, 104px); letter-spacing: .1em; line-height: 1; }
.produkt__lead { margin: 0 0 24px; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 1.8vw, 36px); line-height: 1.3; }
.produkt__preis { margin: 0 0 24px; display: flex; align-items: center; gap: 16px; font-size: 18px; letter-spacing: .14em; color: #d9cfbf; }
.produkt__preis i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.kaufen {
  width: 100%; padding: 22px; border: 1px solid #4a4238; background: transparent; color: #8a8174;
  font: 400 12px/1 var(--sans); letter-spacing: .4em; text-transform: uppercase; cursor: not-allowed;
}
.kaufen__grund { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: #a59a89; }

/* FAQ: in der Kaufspalte, direkt unter dem Knopf */
.fragen { margin-top: 5vh; border-top: 1px solid #2a2620; }
.fragen details { border-bottom: 1px solid #2a2620; }
.fragen summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; position: relative; font-family: var(--serif); font-size: clamp(18px, 1.3vw, 24px); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font-family: var(--sans); font-size: 20px; color: var(--gold); }
.fragen details[open] summary::after { content: "–"; }
.fragen summary:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.fragen details p { margin: 0 0 16px; max-width: 60ch; font-size: 14px; line-height: 1.7; color: #cfc4b2; }

/* 16 Reveal */
.aufloesung {
  min-height: 90vh; padding: 16vh var(--gutter) 12vh; text-align: center;
  border-top: 1px solid #1c1a16;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.aufloesung__marke { font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--gold); }
.aufloesung__frage { margin: 3vh 0 3vh; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 6vw, 150px); line-height: 1; max-width: 16ch; }
.aufloesung__antwort { margin: 0 0 3vh; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.2vw, 44px); color: var(--gold); }
.aufloesung__text { margin: 0 0 5vh; max-width: 58ch; font-size: 16px; line-height: 1.8; color: #cfc4b2; }
.aufloesung__link {
  color: var(--creme); text-decoration: none; font-size: 13px; letter-spacing: .36em; text-transform: uppercase;
  border: 1px solid var(--gold); padding: 20px 34px;
}
.aufloesung__link:hover, .aufloesung__link:focus-visible { background: var(--gold); color: #000; }
.aufloesung__leise { margin: 3vh 0 0; font-size: 14px; color: #a59a89; }
.aufloesung__leise a { color: var(--creme); text-underline-offset: 4px; }

/* ---- Fuß ---- */
.fuss {
  display: flex; justify-content: center; text-align: center;
  padding: 6vh var(--gutter) 28px;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #9a9184;
}

/* ---- Hochformat (Handy, Tablet hochkant) ---- */
@media (max-aspect-ratio: 1/1) {
  /* Handy: Flakon oben, Schrift und Pfeil unten im Schwarz, nichts liegt auf dem Etikett */
  /* v1.10: das Video nicht mehr in einen Kasten (top 5vh, 68 % Höhe) — dort wurde es oben und unten beschnitten, die Kappe
     war abgeschnitten und darüber stand ein Streifen (Ralph, iPhone 24.09.). Es liegt jetzt deckungsgleich auf dem Standbild. */
  .hero::after { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.93) 63%, #000 70%); }   /* v1.10: Flakonfuß läuft früher ins Schwarz, der Titel liegt nicht auf „Eau de Parfum" */
  .hero__text { left: var(--gutter); right: var(--gutter); top: auto; bottom: 4vh; translate: none; max-width: none; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .titel { font-size: clamp(34px, 9.6vw, 64px); }
  .unterzeile { margin-top: 16px; font-size: 10px; letter-spacing: .28em; }
  .los { margin-top: 3.2vh; flex-direction: column; gap: 12px; font-size: 9px; }
  .filmtafel { right: var(--gutter); max-width: none; font-size: 24px; bottom: 8vh; }
  /* 18a: bei 390 nichts auf Sofia, Hand oder Flakon — Paris in den Himmel, Sofia/Midnight rechts neben den Flakon */
  .filmtafel--oben { top: 11vh; bottom: auto; }
  .filmtafel--rechts { left: 40%; text-align: right; bottom: 5vh; }
  .filmtafel--tuer { left: 40%; text-align: right; top: 11vh; bottom: auto; }
  .satz { font-size: 34px; letter-spacing: .1em; line-height: 1.12; }
  .nur-schmal { display: inline; }
  .satz--a { top: 30%; }
  .satz--b { top: calc(30% + 118px); }
  .kapitel { right: var(--gutter); bottom: 6vh; max-width: none; }
  .kapitel__wort { font-size: 21vw; }
  .kapitel__namen { font-size: 10px; letter-spacing: .22em; }
  .kapitel__satz { font-size: 18px; }
  .schleier { background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 32%, transparent 55%); }
  .sichtbar { flex-direction: column; justify-content: flex-end; gap: 6px; padding: 0 var(--gutter) 7vh; font-size: 48px; text-shadow: 0 0 18px #000, 0 0 6px #000;
    background: linear-gradient(180deg, transparent 62%, rgba(0,0,0,.8) 80%, #000 100%); }
  .sichtbar__a, .sichtbar__b { width: auto; text-align: center; }
  /* 18a: eine Zeile unter dem Flakonboden statt zwei auf dem Etikettfuß */
  .sichtbar { flex-direction: row; align-items: flex-end; justify-content: center; gap: .3em; padding-bottom: 3vh; font-size: 40px; }
  .rahmen-text { left: var(--gutter); right: var(--gutter); top: auto; bottom: 7vh; translate: none; width: auto; text-align: center; }
  .rahmen-text__satz { margin: 14px 0 16px; font-size: 30px; }
  .tafel__frage { top: 11vh; font-size: 13vw; }
  .tafel--rechts .tafel__text { top: 10vh; translate: none; width: auto; right: var(--gutter); }
  .komposition__text, .charakter__text { max-width: none; width: auto; }
  .komposition__text { padding: 10vh var(--gutter) 0; }
  .charakter__text { left: var(--gutter); top: 9vh; translate: none; }
  .charakter__zeilen { font-size: 10vw; }
  .charakter::after { content: ""; position: absolute; inset: 0 0 auto; height: 52%; background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 55%, transparent 100%); }
  .charakter__text { z-index: 2; }
  .spray__bild { object-position: 50% 50%; top: 22vh; height: 78%; }
  .spray__zeile { left: var(--gutter); right: var(--gutter); top: auto; bottom: 12vh; translate: none; width: auto; text-align: left; font-size: 13vw; }
  .spray__zeile--3 { font-size: 10vw; }
  .gross { font-size: 12vw; }
  .szene__text { top: 11vh; bottom: auto; right: var(--gutter); }
  .specs { flex-wrap: wrap; gap: 10px 14px; letter-spacing: .24em; }
  .spray__zeile { top: 9vh; bottom: auto; font-size: 10.5vw; }
}

@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .produkt { grid-template-columns: 1fr; }
  .produkt__bild { min-height: 0; height: 72svh; }
  .produkt__bild::after { background: linear-gradient(180deg, transparent 70%, #000 100%); }
  .produkt__text { max-width: none; padding: 4vh var(--gutter) 8vh; }
}

@media (prefers-reduced-motion: reduce) {
  .buehne [data-akt] { transition: none; }
  .tafel { transform: none; }
}

/* ---- Tasche (v1.2): Seitenleiste rechts, ehrliches Ende ---- */
.kaufen { color: var(--creme); border-color: var(--gold); cursor: pointer; transition: background .25s, color .25s; }
.kaufen:hover, .kaufen:focus-visible { background: var(--gold); color: #000; outline: none; }
.kaufen--drin { background: transparent; color: var(--gold); }
.tasche-knopf {
  position: fixed; top: 18px; right: var(--gutter); z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(201,160,102,.6); color: var(--creme); cursor: pointer;
  font: 400 11px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; backdrop-filter: blur(6px);
}
.tasche-knopf[hidden] { display: none; }
/* v1.6: Ton-Knopf, Gegenstück zum Taschen-Knopf */
.ton-knopf {
  position: fixed; top: 18px; left: var(--gutter); z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 44px;
  background: rgba(0,0,0,.82); border: 1px solid #C9A066; color: var(--creme); cursor: pointer;
  font: 400 11px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase;
}
.ton-knopf__zeichen { width: 9px; height: 9px; border-radius: 50%; background: #5a5148; }
.ton-knopf[aria-pressed="true"] .ton-knopf__zeichen { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.ton-knopf:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.ton-knopf__symbol { display: none; }
/* v1.8 (18h2): auf dem Handy ein 44-px-Symbol statt des Wortkastens — lag sonst auf jedem Bild und stieß an die Wortmarke.
   Das Wort bleibt für Screenreader da; das Symbol zeigt an/aus (Wellen / Kreuz). */
@media (max-aspect-ratio: 1/1) {
  .ton-knopf { top: 16px; width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0;
    background: rgba(0,0,0,.45); border-color: rgba(201,160,102,.55); border-radius: 50%; backdrop-filter: blur(6px); }
  .ton-knopf__zeichen { display: none; }
  .ton-knopf__symbol { display: block; width: 20px; height: 20px; fill: none; stroke: var(--creme); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .ton-knopf__symbol .ts-box { fill: var(--creme); stroke: none; }
  .ton-knopf .ts-an { display: none; }
  .ton-knopf[aria-pressed="true"] .ts-an { display: inline; stroke: var(--gold); }
  .ton-knopf[aria-pressed="true"] .ts-aus { display: none; }
  .ton-knopf__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.tasche-knopf__zahl { min-width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #000; letter-spacing: 0; font-size: 11px; }
.tasche-knopf:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.tasche-schleier { position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.6); }
.tasche-schleier[hidden] { display: none; }
.tasche {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(460px, 100vw);
  background: #0b0a08; border-left: 1px solid #2a2620; color: var(--creme);
  display: flex; flex-direction: column; padding: 28px clamp(20px, 2.4vw, 36px);
  overflow-y: auto; animation: tasche-rein .35s ease;
}
.tasche[hidden] { display: none; }
@keyframes tasche-rein { from { transform: translateX(40px); opacity: 0; } }
.tasche__kopf { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2a2620; padding-bottom: 18px; }
.tasche__titel { margin: 0; font: 300 28px/1 var(--serif); letter-spacing: .06em; }
.tasche__zu { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; color: var(--creme); font-size: 30px; line-height: 1; cursor: pointer; }   /* 18h: 44 px Mindestmaß */
.tasche__inhalt { padding-top: 24px; flex: 1; display: flex; flex-direction: column; }
.tasche__inhalt[hidden] { display: none; }
.tasche__leer p { font: italic 300 22px/1.4 var(--serif); margin: 0 0 20px; }
.posten { display: grid; grid-template-columns: 84px 1fr auto; gap: 18px; align-items: start; padding-bottom: 24px; border-bottom: 1px solid #2a2620; }
.posten__bild { width: 84px; height: auto; display: block; }
.posten__text { display: flex; flex-direction: column; gap: 6px; }
.posten__name { font: 400 16px/1.2 var(--serif); letter-spacing: .14em; }
.posten__art { font-size: 12px; color: #a59a89; letter-spacing: .08em; }
.posten__preis { font-size: 15px; letter-spacing: .08em; }
.menge { display: inline-flex; align-items: center; border: 1px solid #3a342c; width: max-content; margin-top: 8px; }
.menge button { width: 46px; height: 46px; background: none; border: 0; color: var(--creme); font-size: 18px; cursor: pointer; }
.menge button:disabled { color: #4a4238; cursor: default; }
.menge__zahl { min-width: 28px; text-align: center; font-size: 14px; }
.posten__weg { align-self: flex-start; background: none; border: 0; padding: 12px 0; min-height: 44px; color: #a59a89; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tasche__summe { display: flex; justify-content: space-between; padding: 22px 0 8px; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; }
.tasche__hinweis { margin: 0 0 24px; font-size: 13px; color: #a59a89; }
.tasche__kasse, .tasche__gespraech {
  display: block; width: 100%; padding: 20px; text-align: center; text-decoration: none; cursor: pointer;
  background: var(--gold); color: #000; border: 1px solid var(--gold);
  font: 400 12px/1 var(--sans); letter-spacing: .36em; text-transform: uppercase;
}
.tasche__kasse:hover, .tasche__gespraech:hover { background: #d8b27c; }
.tasche__weiter { margin-top: 14px; background: none; border: 1px solid #3a342c; color: var(--creme); padding: 16px; cursor: pointer; font: 400 11px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; }
.tasche__marke { font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--gold); }
.tasche__satz { margin: 18px 0 14px; font: 300 34px/1.1 var(--serif); }
.tasche__klar { margin: 0 0 28px; font-size: 15px; line-height: 1.7; color: #cfc4b2; }
.tasche button:focus-visible, .tasche a:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }