/* Flaschenreif – Website zur App.
   Edel und ruhig: Schwarz, warmes Elfenbein und Bordeaux als einziger Akzent, Gold nur für Haarlinien
   und kleine Kapitälchen. Fraunces (ohne Schnörkel: SOFT 0, WONK 0) für Titel, Inter für Text.
   Bewegung an zwei Stellen: die Szene oben (einmal, gut 5 Sekunden, danach ein leiser Puls mit Pause-Knopf)
   und die Trinkfenster-Grafik weiter unten (skripte/fenster.js). Ohne JavaScript und mit „Bewegung
   reduzieren“ steht überall das Endbild.
   Bis zum Store-Start Bildschirmfotos ohne Gerät (Abschnitt „Bildschirme“), gerade und still. */

@font-face { font-family: "Fraunces"; src: url("schriften/fraunces-variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("schriften/fraunces-variable-italic.woff2") format("woff2-variations"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("schriften/inter-variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;

  /* Farben der App (Assets.xcassets): Bordeaux, Gold, Grund, Fläche, Linie */
  --bordeaux: #6E1A33;
  --bordeaux-tief: #561428;
  --bordeaux-hell: #B8848F;
  --rose: #DDB7C0;
  --gold: #876A33;
  --gold-hell: #CDB27A;
  --elfenbein: #F7F4EF;
  --papier: #F1EBDF;
  --nacht-950: #0A0909;
  --nacht-900: #0E0C0D;
  --nacht-850: #141112;
  --nacht-800: #1A1718;
  --nacht-700: #242021;
  --nacht-600: #2E2A2B;
  --nacht-text: #F2EDE6;
  --nacht-leise: #B4AAA6;

  /* Bedeutungen, hell */
  --grund: var(--elfenbein);
  --flaeche: #EFEAE2;
  --karte: #FFFFFF;
  --linie: #E2DAD0;
  --linie-fein: rgb(27 23 24 / 0.07);
  --text: #1B1718;
  --text-leise: #625A5C;
  --akzent: var(--bordeaux);
  --akzent-text: var(--bordeaux);
  --gold-text: var(--gold);
  --gold-balken: #B8975A;
  --haarlinie: rgb(135 106 51 / 0.4);
  --fokus: var(--bordeaux);
  --schatten-karte: 0 1px 2px rgb(27 23 24 / 0.05), 0 12px 30px -18px rgb(27 23 24 / 0.25);
  --schatten: 0 2px 6px rgb(27 23 24 / 0.08), 0 30px 60px -30px rgb(27 23 24 / 0.45);

  @media (prefers-color-scheme: dark) {
    --grund: var(--nacht-900);
    --flaeche: var(--nacht-850);
    --karte: var(--nacht-800);
    --linie: var(--nacht-600);
    --linie-fein: rgb(242 237 230 / 0.07);
    --text: var(--nacht-text);
    --text-leise: var(--nacht-leise);
    --akzent: var(--bordeaux-hell);
    --akzent-text: var(--rose);
    --gold-text: var(--gold-hell);
    --gold-balken: var(--gold-hell);
    --haarlinie: rgb(205 178 122 / 0.3);
    --fokus: var(--gold-hell);
    --schatten-karte: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 30px -18px rgb(0 0 0 / 0.7);
    --schatten: 0 2px 6px rgb(0 0 0 / 0.3), 0 30px 60px -30px rgb(0 0 0 / 0.9);
  }

  --schrift-titel: "Fraunces", ui-serif, "New York", Georgia, "Times New Roman", serif;
  --schrift-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Feines Rauschen für die dunklen Flächen */
  --rauschen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");

  accent-color: var(--akzent);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-wrap: break-word;
  font-feature-settings: "kern", "liga", "cv11";
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }

::selection { background: var(--bordeaux); color: var(--elfenbein); }

img { display: block; max-width: 100%; height: auto; }
svg { overflow: visible; }
picture { display: contents; }

a { color: var(--akzent-text); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; border-radius: 2px; }

.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.symbole { position: absolute; width: 0; height: 0; overflow: hidden; }

.symbol {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.rahmen { width: min(100% - 2.5rem, 74rem); margin-inline: auto; }
@media (min-width: 40rem) { .rahmen { width: min(100% - 5rem, 74rem); } }
.schmal { max-width: 46rem; }

.sprung {
  position: absolute; left: 1rem; top: -5rem; z-index: 30;
  background: var(--elfenbein); color: var(--nacht-900);
  padding: 0.7rem 1.1rem; font-weight: 600;
}
.sprung:focus { top: 1rem; }

h1, h2, h3 { margin: 0 0 0.5em; text-wrap: balance; }
.satz { display: inline-block; }
h1, h2, h3, .betrag, summary, .marke {
  font-family: var(--schrift-titel);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-optical-sizing: auto;
}
h1, h2 { font-weight: 340; letter-spacing: -0.015em; hyphens: manual; }
h1 { font-size: clamp(2.7rem, 5.6vw, 4.9rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 3.7vw, 3.15rem); line-height: 1.1; }
h3 { font-size: 1.22em; line-height: 1.3; font-weight: 460; }
h1 em, h2 em { font-style: italic; font-weight: 300; }
p { margin: 0 0 1em; text-wrap: pretty; }

.gross { font-size: 1.1em; color: var(--text-leise); }
.klein { font-size: 0.88em; color: var(--text-leise); }
.mitte { text-align: center; margin-inline: auto; }

/* Kapitälchen wie in der App: klein, gesperrt, in Gold */
.kapitaelchen {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0 0 1.3rem;
  color: var(--gold-text);
  font-size: 0.76rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase;
}
.kapitaelchen .symbol { width: 1.35rem; height: 1.35rem; stroke-width: 1.4; }
.kapitaelchen:not(:has(.symbol))::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; opacity: 0.8; }
.kapitaelchen.auf-dunkel, .buehne .kapitaelchen { color: var(--gold-hell); }
.abschnitt-kopf.mitte .kapitaelchen { justify-content: center; }

/* ---------- Knöpfe (mindestens 52 px hoch) ---------- */

.knoepfe { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  min-height: 3.25rem; padding: 0.7rem 1.6rem;
  border-radius: 2px; border: 1px solid transparent;
  font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3; text-align: center;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.knopf .symbol { width: 1.2rem; height: 1.2rem; }
.knopf-voll { background: var(--bordeaux); color: var(--elfenbein); border-color: rgb(221 183 192 / 0.35); }
.knopf-voll:hover { background: #81203D; }
.knopf-rand { background: transparent; color: var(--akzent-text); border-color: currentColor; }
.knopf-rand:hover { background: var(--linie-fein); }
.buehne .knopf-rand { color: var(--nacht-text); border-color: rgb(242 237 230 / 0.5); }
.buehne .knopf-rand:hover { background: rgb(242 237 230 / 0.07); border-color: var(--nacht-text); }

/* ---------- Kopf ---------- */

:root { --kopf-hoehe: 5rem; }

/* Einheitliche iPhone-Breite im Textfluss (Kopf, Kiste, Regale, Heute, Öffnen, Übersicht). Schmal 240 px:
   über Apples Mindestgröße von 200 px und mit Rand bei 375 px Fensterbreite. */
:root { --iphone: 19rem; }
@media (width < 36rem) { :root { --iphone: min(15rem, 72vw); } }
.kopf .rahmen { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; min-height: var(--kopf-hoehe); }
.marke {
  display: inline-flex; align-items: center; gap: 0.75rem;
  color: var(--nacht-text); text-decoration: none;
  font-weight: 400; font-size: 1.4rem; line-height: 1.1; letter-spacing: 0.01em;
}
.marke img { width: 2.5rem; height: 2.5rem; flex: none; border-radius: 0.6rem; box-shadow: 0 0 0 1px rgb(242 237 230 / 0.12), 0 6px 16px -8px rgb(0 0 0 / 0.9); }
.navigation ul { display: flex; gap: 0.3rem 2rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.navigation a {
  color: #D8CFC7; text-decoration: none;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
.navigation a:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--gold-hell); text-underline-offset: 0.5em; }

.menue-knopf { display: none; }

@media (width >= 62rem) {
  .navigation[popover] {
    display: block; position: static; inset: auto; width: auto; height: auto;
    margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible;
  }
}

/* Schmal ohne Popover: alle Punkte unter der Marke */
@media (width < 62rem) {
  .kopf .rahmen { flex-direction: column; align-items: flex-start; gap: 0.4rem; padding-block: 0.8rem 0.4rem; }
  .navigation ul { gap: 0.2rem 1.2rem; }
}

/* Schmal mit Popover: Knopf „Menü“, die Liste klappt als Tafel auf */
@supports selector(:popover-open) {
  @media (width < 62rem) {
    .kopf .rahmen { flex-direction: row; align-items: center; padding-block: 0.5rem; }
    .menue-knopf {
      display: inline-flex; flex: none; align-items: center; gap: 0.55rem;
      min-height: 3rem; padding: 0 1.1rem 0 0.9rem;
      border: 1px solid rgb(242 237 230 / 0.3); border-radius: 2px;
      background: rgb(14 12 13 / 0.6); color: var(--nacht-text);
      font: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
    }
    .menue-knopf svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
    .menue-knopf .symbol-auf { display: none; }
    .kopf:has(.navigation:popover-open) .menue-knopf .symbol-zu { display: none; }
    .kopf:has(.navigation:popover-open) .menue-knopf .symbol-auf { display: block; }
    .kopf:has(.navigation:popover-open) .menue-knopf { background: var(--nacht-700); }

    .navigation[popover] {
      position: fixed; inset: calc(var(--kopf-hoehe) + 0.2rem) 1rem auto; width: auto; height: auto; margin: 0;
      padding: 0.4rem; border: 1px solid rgb(205 178 122 / 0.22); border-radius: 4px;
      background: rgb(20 17 18 / 0.98); color: var(--nacht-text);
      box-shadow: 0 1.4rem 3rem rgb(0 0 0 / 0.6);
    }
    .navigation ul { flex-direction: column; flex-wrap: nowrap; gap: 0; }
    .navigation li + li { border-top: 1px solid rgb(242 237 230 / 0.08); }
    .kopf .navigation[popover] a { display: block; padding: 1rem 1rem; font-size: 0.85rem; color: var(--nacht-text); }
    .kopf .navigation[popover] a:hover { background: rgb(255 255 255 / 0.05); }
  }
  @media (width < 62rem) and (prefers-reduced-motion: no-preference) {
    .navigation[popover] {
      opacity: 0; translate: 0 -0.5rem;
      transition-property: opacity, translate, display, overlay;
      transition-duration: 0.22s; transition-timing-function: ease-out;
      transition-behavior: allow-discrete;
    }
    .navigation[popover]:popover-open { opacity: 1; translate: 0 0; }
    @starting-style { .navigation[popover]:popover-open { opacity: 0; translate: 0 -0.5rem; } }
  }
}

/* ---------- Bühne: immer dunkel, Bordeauxlicht hinter dem iPhone, Flaschenböden im Hintergrund ---------- */

.buehne {
  --fokus: var(--gold-hell);
  position: relative; isolation: isolate; overflow: clip;
  background: var(--nacht-900); color: var(--nacht-text);
}
.buehne-licht { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.buehne-licht {
  background:
    radial-gradient(40rem 34rem at 76% 46%, rgb(110 26 51 / 0.55), rgb(86 20 40 / 0.18) 50%, transparent 74%),
    radial-gradient(46rem 22rem at 18% -10%, rgb(205 178 122 / 0.1), transparent 70%),
    linear-gradient(180deg, #151112 0%, var(--nacht-900) 70%);
}
/* Raster aus Flaschenböden wie im Regal, zur Mitte hin ausgeblendet */
.buehne-licht::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at center,
    transparent 0 0.62rem, rgb(242 237 230 / 0.06) 0.62rem 0.68rem,
    transparent 0.68rem 1.02rem, rgb(242 237 230 / 0.045) 1.02rem 1.08rem, transparent 1.08rem);
  background-size: 2.6rem 2.6rem;
  mask-image: radial-gradient(52% 70% at 74% 44%, #000 0%, transparent 80%);
}
.buehne-licht::after { content: ""; position: absolute; inset: 0; background-image: var(--rauschen); opacity: 0.16; mix-blend-mode: soft-light; }
@media (width < 64rem) {
  .buehne-licht { background:
    radial-gradient(30rem 30rem at 60% 74%, rgb(110 26 51 / 0.55), rgb(86 20 40 / 0.18) 50%, transparent 74%),
    linear-gradient(180deg, #151112 0%, var(--nacht-900) 70%); }
  .buehne-licht::before { mask-image: radial-gradient(80% 42% at 55% 72%, #000 0%, transparent 80%); }
}

.buehne-raster { display: grid; gap: 3rem; padding-block: 2rem 7rem; }
@media (min-width: 64rem) {
  .buehne-raster {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 3.5rem; align-items: center;
    min-height: min(56rem, calc(100svh - var(--kopf-hoehe))); padding-block: 1rem 7rem;
  }
}
.buehne-text { max-width: 35rem; }
.buehne h1 { color: var(--nacht-text); }
.buehne h1 em { color: var(--rose); }
.einleitung { font-size: 1.15em; color: #D9D0C8; max-width: 32rem; }

.bald {
  display: inline-flex; align-items: center; gap: 0.85rem;
  margin: 2.2rem 0 0; padding: 0.65rem 1.25rem 0.65rem 1rem;
  border-top: 1px solid rgb(205 178 122 / 0.3); border-bottom: 1px solid rgb(205 178 122 / 0.3);
}
/* Hinweis „Bald im App Store“ statt Apples Abzeichen (erst zum Store-Start erlaubt). Die Uhr ist so hoch wie
   vorher das Abzeichen: 2,75 rem, goldene Haarlinie im Kreis. */
.bald-uhr {
  display: block; flex: none; width: 2.75rem; height: 2.75rem; padding: 0.5rem;
  border: 1px solid rgb(205 178 122 / 0.45); border-radius: 50%;
  color: var(--gold-hell); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.bald > span { display: grid; line-height: 1.3; }
.bald small { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nacht-leise); }
.bald strong { font-family: var(--schrift-titel); font-weight: 400; font-size: 1.15rem; font-variation-settings: "SOFT" 0, "WONK" 0; }

/* Szene: zwei Spalten. Links Etikett und Trinkfenster-Karte, rechts das iPhone. So kann nichts auf das Gerät
   rutschen. Maße der Kinder in cqi, damit die Szene auf jedem Bildschirm gleich aussieht (die Szene selbst
   rechnet in %, cqi bezöge sich bei ihr auf das Fenster). */
.szene {
  position: relative; margin: 0;
  width: min(100%, 38rem); justify-self: center;
  container-type: inline-size;
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) clamp(12.5rem, 51%, 19rem);
  column-gap: 5%;
}
.szene > .etikett { grid-column: 1; grid-row: 1; }
.szene > .fenster-karte { grid-column: 1; grid-row: 2; }
.szene > .geraet { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: end; width: 100%; }
/* Schmal: Etikett und Karte nebeneinander, darunter der iPhone-Bildschirm (mindestens 200 px, wie Apple es für
   Gerätebilder verlangt) */
@media (width < 36rem) {
  .szene { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); column-gap: 5%; row-gap: 2.6rem; }
  .szene > .etikett { grid-column: 1; grid-row: 1; align-self: center; }
  .szene > .fenster-karte { grid-column: 2; grid-row: 1; align-self: center; }
  .szene > .geraet { grid-column: 1 / -1; grid-row: 2; justify-self: center; width: var(--iphone); }
}

/* Das Etikett: Papier, doppelter Rahmen, Satz wie auf dem Vorführ-Etikett der App. Eigener Container, die Schrift
   wächst mit dem Etikett (Maße innen in cqi des Etiketts). */
.etikett {
  position: relative; z-index: 1;
  width: 90%; margin: 3cqi 0 5cqi 2cqi;
  aspect-ratio: 514 / 672;
  container-type: inline-size;
  background:
    radial-gradient(120% 90% at 30% 10%, rgb(255 255 255 / 0.55), transparent 60%),
    var(--papier);
  color: #231E1C;
  rotate: -4deg;
  box-shadow: 0 0.5cqi 1cqi rgb(0 0 0 / 0.3), 0 5cqi 10cqi -2cqi rgb(0 0 0 / 0.7);
  overflow: hidden;
}
@media (width < 36rem) { .etikett { width: 94%; margin: 0 0 0 3%; } }
.etikett::after { content: ""; position: absolute; inset: 0; background-image: var(--rauschen); opacity: 0.35; mix-blend-mode: multiply; pointer-events: none; }
.etikett-rahmen {
  position: absolute; inset: 4.4cqi;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 0.56cqi solid #2B2522; outline: 0.27cqi solid rgb(43 37 34 / 0.55); outline-offset: -2.2cqi;
  padding: 11cqi 4.4cqi 5.8cqi;
  font-family: var(--schrift-titel); font-variation-settings: "SOFT" 0, "WONK" 0; line-height: 1.2;
}
.etikett p { margin: 0; }
.et-weingut { font-size: 4.8cqi; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.et-jahr { margin-top: 11cqi !important; font-size: 8.9cqi; font-weight: 380; }
.et-name { margin-top: 2.2cqi !important; font-size: 10.9cqi; font-weight: 380; letter-spacing: -0.01em; }
.et-rebe { margin-top: 5.3cqi !important; font-size: 5.8cqi; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #7A1E35; }
.et-stufe { margin-top: 1.3cqi !important; font-size: 4.1cqi; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.et-herkunft { margin-top: auto !important; font-size: 4cqi; line-height: 1.5; }
.et-menge { display: flex; gap: 7.8cqi; margin-top: 7.8cqi !important; font-size: 3.7cqi; }
.et-abfueller { margin-top: 2.7cqi !important; font-size: 2.6cqi; }
/* Erkannte Angaben: feine Goldlinie darunter */
.feld {
  background-image: linear-gradient(var(--gold-hell), var(--gold-hell));
  background-repeat: no-repeat; background-size: 100% 0.71cqi; background-position: 0 100%;
  padding-bottom: 0.44cqi;
}
/* Die Lesezeile fährt nur während der Bewegung über das Etikett */
.scan {
  position: absolute; left: 0; right: 0; top: 0; height: 1cqi; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold-hell) 20%, #FFF4DA 50%, var(--gold-hell) 80%, transparent);
  box-shadow: 0 0 5.5cqi 1.8cqi rgb(205 178 122 / 0.45);
}

/* Trinkfenster-Karte links unter dem Etikett, wie in der Weinansicht der App. Oben die drei Angaben vom Etikett,
   aus denen die Faustregel das Fenster schätzt. */
.fenster-karte {
  position: relative; z-index: 2;
  padding: 2.6cqi 3cqi 2.4cqi;
  border-radius: 1.4cqi; border: 1px solid rgb(205 178 122 / 0.32);
  background: rgb(26 23 24 / 0.9); color: var(--nacht-text);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 3cqi 7cqi -2cqi rgb(0 0 0 / 0.8);
}
.fenster-karte p { margin: 0; }
.fk-kopf {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 2cqi;
  font-size: max(1.75cqi, 0.62rem); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nacht-leise);
}
.fk-status { color: var(--gold-hell); }
.fk-erkannt { display: flex; flex-wrap: wrap; gap: max(0.8cqi, 0.25rem); margin-top: max(1.5cqi, 0.45rem) !important; }
.angabe {
  padding: 0.1em 0.75em; border-radius: 99px;
  border: 1px solid rgb(205 178 122 / 0.55); background: rgb(205 178 122 / 0.12);
  color: var(--nacht-text); font-size: max(1.95cqi, 0.66rem); font-weight: 600; line-height: 1.55; white-space: nowrap;
}
.fk-jahre {
  margin: max(1.2cqi, 0.35rem) 0 max(1.8cqi, 0.5rem) !important;
  font-family: var(--schrift-titel); font-variation-settings: "SOFT" 0, "WONK" 0; font-weight: 360;
  font-size: max(6.2cqi, 1.5rem); line-height: 1.1; font-variant-numeric: lining-nums;
}
.fk-spur { position: relative; height: max(1.1cqi, 0.3rem); border-radius: 99px; background: rgb(242 237 230 / 0.13); }
.fk-balken {
  position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--gold-hell);
  left: calc((var(--von) - 2020) / 21 * 100%); width: calc((var(--bis) - var(--von) + 1) / 21 * 100%);
  transform-origin: left center;
}
.fk-heute {
  position: absolute; top: 50%; left: 32.4%; translate: -50% -50%;
  width: max(2.8cqi, 0.75rem); height: max(2.8cqi, 0.75rem); border-radius: 50%;
  background: var(--bordeaux); box-shadow: 0 0 0 max(0.45cqi, 2px) var(--elfenbein), 0 0.6cqi 1.2cqi rgb(0 0 0 / 0.6);
}
.fk-heute i { position: absolute; inset: 0; border-radius: 50%; border: max(0.3cqi, 1.5px) solid var(--gold-hell); opacity: 0; }
.fk-achse { position: relative; display: flex; justify-content: space-between; margin-top: max(1cqi, 0.3rem) !important; font-size: max(1.6cqi, 0.6rem); color: var(--nacht-leise); font-variant-numeric: tabular-nums; }
.fk-achse span:nth-child(2) { position: absolute; left: 32.4%; translate: -50% 0; color: var(--rose); }
.fk-grund { margin-top: max(1.5cqi, 0.45rem) !important; font-size: max(1.7cqi, 0.62rem); line-height: 1.45; color: var(--nacht-leise); }
@media (width < 36rem) { .fenster-karte { padding: 0.75rem 0.8rem 0.7rem; border-radius: 0.45rem; } }

/* ---------- Bildschirme: echte Bildschirmfotos ohne Gerät (bis zum Store-Start) ---------- */
/* Apples Gerätebilder („Product Bezels“) und das Abzeichen sind erst erlaubt, wenn die App im App Store ist (Lizenz
   EA0861, Ziffer 1), nachgebaute Geräte nie. Bis dahin steht jeder Bildschirm allein: Bildschirmfoto mit den runden
   Ecken des echten Bildschirms und einer feinen Kontur (1 px, halbtransparent). Keine Insel, keine Tasten, kein
   Rahmen, keine Neigung, kein Glanz, kein Schatten. Breiten wie mit Rahmen, der Bildschirm füllt den Platz. Die
   Fassung mit Rahmen liegt in ~/apps/flaschenreif.de-rahmen (siehe LIESMICH). */
.geraet { position: relative; flex: none; --kontur-bildschirm: rgb(27 23 24 / 0.16); }
@media (prefers-color-scheme: dark) { .geraet { --kontur-bildschirm: rgb(242 237 230 / 0.2); } }
:is(.buehne, .kiste, .heute, .uebersicht) .geraet { --kontur-bildschirm: rgb(242 237 230 / 0.2); }   /* dunkle Bänder */
/* Feste Breite und Höchstbreite, nie breiter als der Container. iPhone überall --iphone (19 rem), iPad füllt seine
   Spalte bis 34,25 rem (so breit wie die Fotos daneben). */
.geraet-iphone { aspect-ratio: 1320 / 2868; width: var(--iphone); max-width: min(100%, 19rem); }
.geraet-ipad { aspect-ratio: 2064 / 2752; width: 100%; max-width: 34.25rem; }
.geraet-bildschirm { position: absolute; inset: 0; overflow: hidden; background: #000000; box-shadow: 0 0 0 1px var(--kontur-bildschirm); }
/* Eckenradius des echten Bildschirms: iPhone 142 px bei 1320 × 2868, iPad Pro 13″ 60 px bei 2064 × 2752 */
.geraet-iphone > .geraet-bildschirm { border-radius: 10.78% / 4.96%; }
.geraet-ipad > .geraet-bildschirm { border-radius: 2.91% / 2.18%; }
.geraet-bildschirm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Steuerung der Bühne */
.szene-steuerung { position: absolute; left: 0; right: 0; bottom: -4.75rem; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.pause, .nochmal-oben {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.4rem 1rem 0.4rem 0.8rem;
  border-radius: 2px; border: 1px solid rgb(242 237 230 / 0.28);
  background: rgb(14 12 13 / 0.7); color: #E4DCD3;
  font: inherit; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
}
.pause:hover, .nochmal-oben:hover { color: #FFFFFF; border-color: rgb(242 237 230 / 0.6); }
.pause svg, .nochmal-oben svg { width: 1rem; height: 1rem; }
@media (width < 30rem) { .pause, .nochmal-oben { letter-spacing: 0.08em; padding-inline: 0.65rem 0.8rem; } }
@media (width < 40rem) {
  .szene-steuerung { bottom: auto; top: calc(100% + 1rem); }
  .buehne-raster { padding-bottom: 9.5rem; }
}
.pause .zeichen-weiter { display: none; }
.angehalten .pause .zeichen-weiter { display: block; }
.angehalten .pause .zeichen-halt { display: none; }

/* ---------- Bewegung der Bühne: einmal, gut 5 Sekunden, sobald sie zu sehen ist. skripte/buehne.js setzt .bereit
   (wartet) und .spielt (läuft). Grundzustand ist das Endbild. Der iPhone-Bildschirm bewegt sich nie: Er steht von
   Anfang an da, nur sein Inhalt blendet vom Etikett zur Weinansicht über. ---------- */

@media (prefers-reduced-motion: no-preference) {
  .szene.bereit:not(.spielt) :is(.etikett, .fenster-karte, .angabe, .fk-status, .fk-jahre, .fk-grund, .fk-heute, .bild-wein img) { opacity: 0; }
  .szene.bereit:not(.spielt) .feld { background-size: 0% 0.71cqi; }
  .szene.bereit:not(.spielt) .fk-balken { scale: 0 1; }

  .szene.spielt .etikett { animation: hinlegen 0.9s cubic-bezier(0.2, 0.8, 0.25, 1) 0.1s backwards; }
  .szene.spielt .scan { animation: lesen 1.3s cubic-bezier(0.45, 0, 0.55, 1) 0.8s; }
  .szene.spielt .feld { animation: markieren 0.45s ease-out backwards; animation-delay: calc(0.95s + var(--n, 0) * 0.15s); }
  .szene.spielt .fenster-karte { animation: aufziehen 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) 1.5s backwards; }
  .szene.spielt .angabe { animation: landen 1s cubic-bezier(0.55, 0, 0.25, 1) backwards; animation-delay: calc(2s + var(--n, 0) * 0.18s); }
  .szene.spielt .bild-wein img { animation: ueberblenden 0.9s ease-in-out 3.1s backwards; }
  .szene.spielt :is(.fk-status, .fk-jahre, .fk-grund) { animation: auftauchen 0.5s ease-out 3.4s backwards; }
  .szene.spielt .fk-balken { animation: wachsen 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) 3.7s backwards; }
  .szene.spielt .fk-heute { animation: setzen 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4) 4.5s backwards; }
  .szene.spielt .fk-heute i { animation: pulsieren 3s ease-out 5.2s infinite; }
  /* Pause hält alles an, auch den ersten Durchlauf */
  .buehne.angehalten .szene * { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .scan, .fk-heute i { display: none; } }

@keyframes hinlegen { from { opacity: 0; translate: -5cqi 4cqi; rotate: -10deg; } }
@keyframes lesen {
  0% { opacity: 0; translate: 0 4cqi; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; translate: 0 122cqi; }
}
@keyframes markieren { from { background-size: 0% 0.71cqi; } }
@keyframes aufziehen { from { opacity: 0; translate: 0 3cqi; } }
/* Erkannte Angabe: taucht über ihrem Feld auf dem Etikett auf und gleitet an ihren Platz in der Karte
   (Weg misst skripte/buehne.js; ohne Messung blendet sie an Ort und Stelle ein) */
@keyframes landen {
  0% { opacity: 0; translate: var(--von-x, 0px) var(--von-y, 0px); scale: 1.12; }
  20% { opacity: 1; translate: var(--von-x, 0px) var(--von-y, 0px); scale: 1.12; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes ueberblenden { from { opacity: 0; } }
@keyframes auftauchen { from { opacity: 0; } }
@keyframes wachsen { from { scale: 0 1; } }
@keyframes setzen { from { opacity: 0; scale: 0.4; } }
@keyframes pulsieren {
  0% { opacity: 0.9; scale: 1; }
  70% { opacity: 0; scale: 2.8; }
  100% { opacity: 0; scale: 2.8; }
}

/* ---------- Versprechen unter der Bühne ---------- */

.versprechen { background: var(--flaeche); padding-block: 3.2rem; border-bottom: 1px solid var(--linie); }
.versprechen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 3rem; }
@media (min-width: 52rem) { .versprechen ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.versprechen li { display: flex; gap: 1.1rem; align-items: flex-start; }
.versprechen li > .symbol { width: 2rem; height: 2rem; color: var(--gold-text); stroke-width: 1.2; margin-top: 0.15rem; }
.versprechen h3 { margin-bottom: 0.3rem; }
.versprechen p { margin: 0; color: var(--text-leise); font-size: 0.94em; }

/* ---------- Abschnitte ---------- */

.abschnitt { padding-block: clamp(4.5rem, 10vw, 8.5rem); }
.abschnitt-kopf { max-width: 46rem; margin-bottom: 3rem; }
.abschnitt-kopf.mitte { text-align: center; }
.flaeche { background: var(--flaeche); }

.raster-zwei { display: grid; gap: 3.5rem; }
@media (min-width: 64rem) { .raster-zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5.5rem; align-items: center; } }
/* Schmal steht der Text vor dem Bild */
@media (width < 64rem) { .raster-bild-links > figure { order: 2; } }

.merkliste { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.merkliste li { display: flex; gap: 0.8rem; align-items: flex-start; }
.merkliste .symbol { margin-top: 0.25em; color: var(--gold-text); stroke-width: 1.8; }

/* Schild auf Bildern: Foto, Ausschnitt, KI-Bild */
.schild {
  position: absolute; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  background: rgb(14 12 13 / 0.82); color: #F2EDE6;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4;
}
.schild .symbol { width: 0.95rem; height: 0.95rem; }

/* ---------- Etikett: Foto und Lupe auf das ausgefüllte Formular ---------- */

.etikett-szene { margin: 0; position: relative; display: grid; gap: 1.2rem; }
.etikett-foto { position: relative; width: min(60%, 15rem); rotate: -3deg; box-shadow: var(--schatten); }
.etikett-foto .schild { left: 0.6rem; bottom: 0.6rem; }
.lupe {
  position: relative; justify-self: end; width: min(100%, 27rem); margin-top: -7rem;
  border-radius: 1.2rem; overflow: hidden;
  border: 0.45rem solid var(--nacht-800);
  box-shadow: 0 0 0 1px var(--haarlinie), 0 1.4rem 3rem -1rem rgb(0 0 0 / 0.45);
  rotate: 1.2deg;
}
.lupe img { width: 100%; }
.lupe::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 15%, rgb(255 255 255 / 0.3), transparent 36%); }
@media (prefers-color-scheme: dark) { .lupe::after { background: radial-gradient(circle at 20% 15%, rgb(255 255 255 / 0.08), transparent 36%); } }
.lupe .schild { right: 0.7rem; bottom: 0.7rem; z-index: 1; }
.etikett-szene figcaption { max-width: 30rem; }
@media (min-width: 64rem) { .lupe { margin-right: -2rem; } }
@media (width < 40rem) { .lupe { margin-top: -3.5rem; } }

/* ---------- Trinkfenster: Zeitleiste mit echten Weinen aus dem Beispielkeller ---------- */

.fenster-grafik {
  --name-breite: 17rem; --status-breite: 10rem; --luecke: 2rem;
  --jahre: 23;   /* 2020 bis 2042 */
  --heute: 6.83; /* Ende Oktober 2026, in Jahren nach 2020 */
  margin: 0;
}
.fenster-flaeche { position: relative; padding-block: 2.4rem 2.2rem; }
.fenster-achse { position: absolute; inset: auto 0 0; height: 2.2rem; margin: 0; font-size: 0.78rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.fenster-achse span {
  position: absolute; top: 0.6rem;
  left: calc(var(--name-breite) + var(--luecke) + (100% - var(--name-breite) - var(--status-breite) - 2 * var(--luecke)) * (var(--jahr) - 2020) / var(--jahre));
  translate: -50% 0;
}
.fenster-achse span:first-child { translate: 0 0; }
.fenster-liste { list-style: none; margin: 0; padding: 0; border-block: 1px solid var(--linie); }
.fenster-liste li {
  display: grid; grid-template-columns: var(--name-breite) minmax(0, 1fr) var(--status-breite); gap: var(--luecke); align-items: center;
  padding: 1.05rem 0; border-bottom: 1px solid var(--linie-fein);
}
.fenster-liste li:last-child { border-bottom: 0; }
.fenster-liste p { margin: 0; }
.fenster-name { line-height: 1.3; }
.fenster-name b { font-family: var(--schrift-titel); font-variation-settings: "SOFT" 0, "WONK" 0; font-weight: 460; font-size: 1.12rem; }
.fenster-name small { display: block; font-size: 0.82rem; color: var(--text-leise); }
.fenster-spur { position: relative; height: 0.62rem; border-radius: 99px; background: var(--linie-fein); }
.fenster-balken {
  position: absolute; top: 0; bottom: 0; border-radius: 99px;
  left: calc((var(--von) - 2020) / var(--jahre) * 100%);
  width: calc((var(--bis) - var(--von) + 1) / var(--jahre) * 100%);
  transform-origin: left center;
}
.fenster-status { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.reif .fenster-balken { background: var(--gold-balken); }
.reif .fenster-status { color: var(--gold-text); }
.letztes .fenster-balken { background: var(--akzent); }
.letztes .fenster-status, .vorbei .fenster-status { color: var(--akzent-text); }
.vorbei .fenster-balken { background: var(--akzent); opacity: 0.45; }
.lagern .fenster-balken { box-shadow: inset 0 0 0 1.5px var(--gold-balken); }
.lagern .fenster-status { color: var(--text-leise); }

.heute-linie {
  position: absolute; top: 0; bottom: 2.2rem; width: 0; pointer-events: none;
  left: calc(var(--name-breite) + var(--luecke) + (100% - var(--name-breite) - var(--status-breite) - 2 * var(--luecke)) * var(--heute) / var(--jahre));
  border-left: 1px solid var(--akzent);
  transform-origin: top center;
}
.heute-linie span {
  position: absolute; top: 0; left: 0; translate: -50% 0; white-space: nowrap;
  padding: 0.2rem 0.6rem; background: var(--akzent); color: var(--grund);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.fenster-grafik figcaption { margin-top: 1.2rem; }
.nochmal-fenster { margin-top: 1.4rem; }

/* Schmal: Name und Status über dem Balken */
@media (width < 52rem) {
  .fenster-grafik { --name-breite: 0rem; --status-breite: 0rem; --luecke: 0rem; }
  .fenster-name { position: relative; z-index: 1; }
  .fenster-name b, .fenster-name small { display: block; width: fit-content; padding-right: 0.4rem; background: var(--flaeche); }
  .fenster-liste li { grid-template-columns: minmax(0, 1fr) auto; gap: 0.55rem 1rem; padding: 1rem 0 1.15rem; }
  .fenster-spur { grid-column: 1 / -1; grid-row: 2; }
  .fenster-status { text-align: right; align-self: start; padding-top: 0.25rem; }
  .fenster-achse span:nth-child(2), .fenster-achse span:nth-child(4) { display: none; }
  .fenster-achse span:last-child { translate: -100% 0; }
}

/* Bewegung: Die Balken wachsen nacheinander, dann senkt sich die Linie „heute“, dann erscheint der Stand.
   skripte/fenster.js setzt .bereit (wartet auf den Blick) und .spielt (läuft). */
@media (prefers-reduced-motion: no-preference) {
  .fenster-grafik.bereit:not(.spielt) .fenster-balken { scale: 0 1; }
  .fenster-grafik.bereit:not(.spielt) .heute-linie,
  .fenster-grafik.bereit:not(.spielt) .fenster-status { opacity: 0; }
  .fenster-grafik.spielt .fenster-balken { animation: wachsen 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) backwards; animation-delay: calc(0.15s + var(--n) * 0.17s); }
  .fenster-grafik.spielt .heute-linie { animation: senken 0.8s cubic-bezier(0.3, 0.7, 0.2, 1) 1.45s backwards; }
  .fenster-grafik.spielt .fenster-status { animation: einblenden 0.5s ease-out backwards; animation-delay: calc(2.05s + var(--n) * 0.12s); }
}
@keyframes senken { from { scale: 1 0; opacity: 0; } }
@keyframes einblenden { from { opacity: 0; translate: -0.4rem 0; } }

/* Kellerbrief: zwei Mitteilungen wie auf dem Sperrbildschirm */
.kellerbrief { display: grid; gap: 2.5rem; margin-top: clamp(4rem, 8vw, 6rem); }
@media (min-width: 60rem) { .kellerbrief { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; } }
.kellerbrief h3 { display: flex; align-items: center; gap: 0.7rem; font-size: 1.5rem; }
.kellerbrief h3 .symbol { color: var(--gold-text); stroke-width: 1.3; width: 1.6rem; height: 1.6rem; }
.kellerbrief-text p { color: var(--text-leise); margin: 0; }
.mitteilungen {
  list-style: none; margin: 0; padding: clamp(1rem, 3vw, 1.8rem);
  display: grid; gap: 0.75rem; border-radius: 1.6rem;
  background:
    radial-gradient(30rem 18rem at 80% 0%, rgb(110 26 51 / 0.65), transparent 70%),
    linear-gradient(165deg, #241417, #0E0C0D 75%);
  box-shadow: var(--schatten);
  position: relative; isolation: isolate; overflow: hidden;
}
.mitteilungen::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--rauschen); opacity: 0.15; mix-blend-mode: soft-light; }
.mitteilung {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 0.85rem 1rem 0.95rem; border-radius: 1.2rem;
  background: rgb(242 237 230 / 0.12); color: var(--nacht-text);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgb(242 237 230 / 0.08);
  font-size: 0.92rem; line-height: 1.4;
}
.mitteilung img { width: 2.4rem; height: 2.4rem; border-radius: 0.55rem; flex: none; }
.mitteilung div { flex: 1; min-width: 0; }
.mitteilung p { margin: 0; }
.mitteilung b { display: block; font-weight: 600; }
.mitteilung-kopf { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.15rem !important; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nacht-leise); }
.mitteilung-kopf time { text-transform: none; letter-spacing: 0; }

/* Widget „Jetzt trinken“: echte Vorschau-Bilder aus Xcode mit dem Beispielkeller. Raster wie auf dem Home-Bildschirm:
   mittel = zwei kleine plus Abstand, groß = zwei mittlere übereinander. Im Wechsel zum Kellerbrief steht das Bild links. */
.widget-block { margin-top: clamp(3.5rem, 7vw, 5rem); }
@media (min-width: 60rem) {
  .widget-block { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .widget-block .widgets { order: -1; }
}
.widgets {
  margin: 0; padding: clamp(1rem, 3vw, 1.8rem); border-radius: 1.6rem;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.6rem, 1.6vw, 1rem); align-items: start;
  background:
    radial-gradient(30rem 18rem at 15% 100%, rgb(110 26 51 / 0.6), transparent 70%),
    linear-gradient(200deg, #241417, #0E0C0D 75%);
  box-shadow: var(--schatten);
  position: relative; isolation: isolate; overflow: hidden;
}
.widgets::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--rauschen); opacity: 0.15; mix-blend-mode: soft-light; }
.widgets picture, .widgets img { display: block; width: 100%; height: auto; }
.widgets img { filter: drop-shadow(0 0.5rem 1rem rgb(0 0 0 / 0.35)); }
.widget-gross { grid-column: 1 / 3; grid-row: 1 / 3; }
.widget-mittel { grid-column: 3 / 5; }
.widget-klein { grid-column: 3 / 4; }
/* Schmal wäre das große Widget zu klein zum Lesen: mittel über die ganze Breite, klein darunter */
@media (width < 40rem) {
  .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .widgets .widget-gross { display: none; }
  .widget-mittel { grid-column: 1 / 3; }
  .widget-klein { grid-column: 1 / 2; }
}

/* ---------- Regale und Heute: Foto, davor das iPhone ---------- */
/* Beide liegen im selben Rasterfeld. Das Gerät darf das Foto verdecken, auf dem Gerät liegt nichts
   (das Schild „KI-Bild“ steht auf der freien Seite des Fotos). */

.regal-szene, .heute-szene { margin: 0; display: grid; align-items: start; }
.regal-szene > *, .heute-szene > * { grid-area: 1 / 1; }
.foto { position: relative; overflow: hidden; box-shadow: var(--schatten); }
.foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.foto .schild { left: 0.7rem; top: 0.7rem; }
/* Anordnung wie früher: Gerät 1 rem über den Rand der Spalte, etwas tiefer gesetzt, weil es jetzt so groß ist wie
   die übrigen iPhones (früher 181 px) */
.regal-szene .geraet, .heute-szene .geraet { margin-top: 34%; }
.regal-szene .geraet { justify-self: end; margin-right: -1rem; }
.heute-szene .foto { margin-left: 12%; }
.heute-szene .geraet { justify-self: start; margin-left: -1rem; }
@media (width < 40rem) {
  /* Schmal deckt das Gerät nur den unteren Streifen des Fotos */
  .regal-szene .geraet, .heute-szene .geraet { margin-top: 50%; }
  .regal-szene .geraet { margin-right: 0; }
  .heute-szene .geraet { margin-left: 0; }
  .heute-szene .foto { margin-left: 0; }
}

.fundort {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem;
  padding: 0.7rem 1.1rem 0.7rem 0.9rem; border: 1px solid var(--haarlinie); background: var(--karte);
  color: var(--akzent-text); font-size: 0.95em;
}
.fundort .symbol { color: var(--akzent); }

/* Lagerstand wie in der Kellerliste der App: goldener Haken, gestrichelter Kreis, dazu der Fundort */
.lagerstand { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.lagerstand li {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 1rem 0.55rem 0.8rem; border: 1px solid var(--linie); background: var(--karte);
  font-size: 0.9em; color: var(--text);
}
.lagerstand li .symbol { color: var(--gold-text); stroke-width: 1.6; }
.lagerstand .ohne-platz { color: var(--text-leise); }
.lagerstand .ohne-platz .symbol { color: var(--text-leise); }
.lagerstand .fundort { margin: 0; border-color: var(--haarlinie); color: var(--akzent-text); }
.lagerstand .fundort .symbol { color: var(--akzent); stroke-width: 1.05; }   /* feines Raster, sonst läuft das markierte Fach zu */

/* ---------- Siri und Suche: zwei echte Antworten aus dem Beispielkeller, im Stil der Seite (keine Siri-Nachbildung) ---------- */
.antworten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.antwort { padding: 1.5rem 1.5rem 1.4rem; background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten-karte); }
.antwort-frage {
  display: flex; align-items: flex-start; gap: 0.65rem; margin: 0 0 0.7rem;
  font-family: var(--schrift-titel); font-style: italic; font-size: 1.15rem; line-height: 1.35; color: var(--akzent-text);
}
.antwort-frage .symbol { flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.12rem; color: var(--gold-text); }
.antwort-text { margin: 0; }
.antwort-weine { list-style: none; margin: 1.1rem 0 0; padding: 0; border-top: 1px solid var(--linie); }
.antwort-weine li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.1rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--linie-fein);
}
.antwort-weine li:last-child { border-bottom: 0; padding-bottom: 0; }
.wein-titel { grid-column: 1; font-family: var(--schrift-titel); font-size: 1.05rem; overflow-wrap: anywhere; }
.wein-menge { grid-column: 2; grid-row: 1; color: var(--text-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wein-zeile, .wein-ort { grid-column: 1 / -1; font-size: 0.88em; color: var(--text-leise); }
.wein-ort { display: flex; align-items: center; gap: 0.45rem; color: var(--akzent-text); }
.wein-ort .symbol { flex: none; width: 1rem; height: 1rem; color: var(--akzent); stroke-width: 1.05; }
.wein-ort.ohne-platz, .wein-ort.ohne-platz .symbol { color: var(--text-leise); stroke-width: 1.6; }

/* Heute: dunkles Band wie ein Abend am Tisch */
.heute { position: relative; isolation: isolate; overflow: clip; background: var(--nacht-900); color: var(--nacht-text); --fokus: var(--gold-hell); }
.heute::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(46rem 30rem at 78% 40%, rgb(110 26 51 / 0.4), transparent 70%),
    radial-gradient(30rem 20rem at 10% 100%, rgb(205 178 122 / 0.08), transparent 70%);
}
.heute::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--rauschen); opacity: 0.14; mix-blend-mode: soft-light; }
.heute h2 { color: var(--nacht-text); }
.heute .gross { color: #D9D0C8; }
.gerichte { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gerichte li {
  padding: 0.35rem 0.9rem; border-radius: 99px; border: 1px solid rgb(242 237 230 / 0.2);
  font-size: 0.86rem; color: #E4DCD3;
}
.gerichte li[aria-current] { background: var(--bordeaux-hell); border-color: var(--bordeaux-hell); color: #140A0D; font-weight: 600; }
.vorschlag {
  margin: 1.8rem 0 0; padding: 1.1rem 1.3rem; max-width: 30rem;
  border-left: 1px solid var(--gold-hell); background: rgb(242 237 230 / 0.04);
  font-family: var(--schrift-titel); font-variation-settings: "SOFT" 0, "WONK" 0; font-size: 1.15rem; line-height: 1.45;
}
.vorschlag em { display: block; font-style: italic; font-weight: 300; color: #D9D0C8; }
.kapitaelchen-klein { display: block; font-family: var(--schrift-text); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hell); margin-bottom: 0.25rem; }

/* ---------- Verkostet: oben das iPad allein, darunter in eigener Zeile das Öffnen auf dem iPhone ---------- */
/* iPad und iPhone stehen nie zusammen in einem Bild: Apple verlangt dann das echte Größenverhältnis
   (iPad-Bild 2,73-mal so breit wie das iPhone-Bild), das iPhone wäre neben dem iPad zu klein. Einzeln ist das iPad
   so breit wie seine Spalte, gut 1,8-mal so breit wie die iPhones. */

.verkostet-szene { margin: 0; }
.verkostet-szene .geraet-ipad { margin-inline: auto; }
.oeffnen-block {
  display: grid; gap: 2.5rem;
  margin-top: clamp(4rem, 8vw, 6rem); padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--linie);
}
@media (min-width: 64rem) { .oeffnen-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5.5rem; align-items: center; } }
.oeffnen-block h3 { display: flex; align-items: center; gap: 0.7rem; font-size: 1.5rem; }
.oeffnen-block h3 .symbol { color: var(--gold-text); stroke-width: 1.3; width: 1.6rem; height: 1.6rem; }
.oeffnen-text > p { color: var(--text-leise); margin: 0; }
.oeffnen-szene { margin: 0; }
.oeffnen-szene .geraet-iphone { margin-inline: auto; }
@media (min-width: 64rem) { .oeffnen-szene .geraet-iphone { margin-inline: 0 auto; } }   /* nah am Text */

.notiz { margin: 2rem 0 0; padding: 0.2rem 0 0.2rem 1.5rem; border-left: 1px solid var(--gold-text); }
.notiz p { margin: 0 0 0.7rem; font-family: var(--schrift-titel); font-variation-settings: "SOFT" 0, "WONK" 0; font-style: italic; font-weight: 320; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.35; }
.notiz footer { font-size: 0.9rem; color: var(--text-leise); }
.sterne { color: var(--gold-text); letter-spacing: 0.12em; margin-right: 0.5rem; }

/* ---------- iPhone Duo (seit 02.11.2026): zugeklappt und aufgeklappt, ohne Gerät ----------
   Zugeklappt der Außenbildschirm (466 × 678 pt), aufgeklappt quer der Innenbildschirm (951 × 669 pt). Breit stehen
   beide im echten Größenverhältnis nebeneinander: Die Breiten verhalten sich wie 466 zu 951, damit sind beide fast
   gleich hoch. Schmal untereinander, damit der zugeklappte nicht zu klein wird. Eckenradius etwa 40 pt. */
.geraet-duo-zu { aspect-ratio: 1398 / 2034; }
.geraet-duo-quer { aspect-ratio: 2853 / 2007; }
.geraet-duo-zu > .geraet-bildschirm { border-radius: 8.6% / 5.9%; }
.geraet-duo-quer > .geraet-bildschirm { border-radius: 4.2% / 6%; }
.duo-szene { margin: 0; }
.duo-paar { display: grid; gap: 2rem; justify-items: center; }
.duo-lage { width: 100%; }
.duo-zu { max-width: 16rem; }
.duo-etikett { margin: 0 0 0.75rem; color: var(--gold-text); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; }
@media (min-width: 48rem) {
  .duo-paar { display: flex; align-items: flex-start; justify-content: center; gap: 2.5rem; max-width: 68rem; margin-inline: auto; }
  .duo-zu { flex: 466 1 0; max-width: none; }
  .duo-quer { flex: 951 1 0; }
}
.duo-szene figcaption { max-width: 40rem; margin: 2rem auto 0; color: var(--text-leise); font-size: 0.85rem; text-align: center; }

/* ---------- Übersicht: dunkles Band wie ein Kellerbuch, Zahlen aus dem Beispielkeller ---------- */

.uebersicht { position: relative; isolation: isolate; overflow: clip; background: var(--nacht-900); color: var(--nacht-text); --fokus: var(--gold-hell); }
.uebersicht::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40rem 28rem at 82% 45%, rgb(110 26 51 / 0.42), transparent 70%),
    radial-gradient(28rem 22rem at 6% 8%, rgb(205 178 122 / 0.09), transparent 70%),
    linear-gradient(180deg, var(--nacht-950), var(--nacht-900) 30%);
}
.uebersicht::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--rauschen); opacity: 0.14; mix-blend-mode: soft-light; }
.uebersicht h2 { color: var(--nacht-text); }
.uebersicht .gross { color: #D9D0C8; }
.uebersicht .klein { color: var(--nacht-leise); }
.uebersicht .merkliste .symbol { color: var(--gold-hell); }

/* Kennzahlen: Zahl groß in Fraunces, Beschriftung klein darunter, goldene Haarlinien dazwischen */
.kellerzahlen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2.2rem 0 0; border-top: 1px solid rgb(205 178 122 / 0.35);
}
.kellerzahlen > div {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.35rem;
  padding: 1.1rem 1rem 1.1rem 0; border-bottom: 1px solid rgb(205 178 122 / 0.2);
}
.kellerzahlen dd {
  margin: 0; font-family: var(--schrift-titel); font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 320; font-size: clamp(2.1rem, 4vw, 2.7rem); line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--nacht-text);
}
.kellerzahlen dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nacht-leise); }
@media (width < 30rem) {
  .kellerzahlen > div { padding-right: 0.6rem; }
  .kellerzahlen dt { font-size: 0.64rem; letter-spacing: 0.1em; }
}
/* Der Warenwert bekommt eine eigene, breite Zeile */
.kellerzahlen .kellerzahlen-wert { grid-column: 1 / -1; }
.kellerzahlen .kellerzahlen-wert dd { font-size: clamp(2.6rem, 6vw, 3.6rem); }
.kellerzahlen .kellerzahlen-wert dt { color: var(--gold-hell); }
.kellerzahlen-quelle { margin: 0.8rem 0 0; }

/* ---------- Neue Kiste: dunkles Band, iPhone mit der Serienliste, daneben die Lupe auf „Kauf eintragen“ ---------- */

.kiste { position: relative; isolation: isolate; overflow: clip; background: var(--nacht-900); color: var(--nacht-text); --fokus: var(--gold-hell); }
.kiste::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40rem 28rem at 18% 45%, rgb(110 26 51 / 0.42), transparent 70%),
    radial-gradient(28rem 22rem at 94% 10%, rgb(205 178 122 / 0.08), transparent 70%);
}
.kiste::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--rauschen); opacity: 0.14; mix-blend-mode: soft-light; }
.kiste h2 { color: var(--nacht-text); }
.kiste .gross { color: #D9D0C8; }
.kiste .merkliste .symbol { color: var(--gold-hell); }

/* Gerät mit Lupe daneben (Kiste, Übersicht): nebeneinander, solange die Lupe mindestens 12,5 rem breit sein kann,
   sonst darunter. Die Lupe berührt das Gerät nie. */
.geraet-mit-lupe {
  margin: 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  gap: 1.75rem clamp(1rem, 4%, 2rem);
}

.geraet-mit-lupe .lupe { flex: 1 1 12.5rem; width: auto; max-width: 18rem; margin: 0 0 12%; }
@media (width < 36rem) {
  .geraet-mit-lupe .lupe { margin: 0; }
}
.kiste-szene { flex-direction: row-reverse; }   /* Lupe links, iPhone rechts; schmal steht die Lupe darunter */

.lupe-kauf {
  border-color: var(--nacht-700);
  box-shadow: 0 0 0 1px rgb(205 178 122 / 0.35), 0 1.6rem 3.4rem -1rem rgb(0 0 0 / 0.75);
  rotate: -1.5deg;
}
.lupe-kauf::after { background: radial-gradient(circle at 20% 15%, rgb(255 255 255 / 0.09), transparent 36%); }
.lupe-kauf .schild { right: 0.6rem; bottom: 0.6rem; }   /* unten ist der Ausschnitt frei, oben stünde es auf dem Weinnamen */

/* Merkliste (heller Abschnitt): iPhone mit der Weinansicht des gemerkten Weins, rechts daneben die Lupe auf
   „Bestand niedrig · Nachkaufen merken“. Das Schild zeigt nur das Zeichen, unten rechts ist der Kasten frei;
   das Wort stünde auf dem Knopf. */
.lupe-nachkaufen { rotate: -1.2deg; }
.lupe-nachkaufen .schild { right: 0.6rem; bottom: 0.6rem; padding: 0.35rem; }

/* Rechnung (Fläche): links das echte Foto der erfundenen Testrechnung, ein Pfeil, rechts die gelesene Liste.
   Das Foto berührt den Bildschirm nie; schmal stehen beide untereinander, der Pfeil zeigt nach unten. */
.rechnung-szene {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.5rem clamp(0.6rem, 2.5%, 1.2rem);
}
.rechnung-foto { position: relative; flex: 1 1 13rem; max-width: 19rem; rotate: -2deg; background: #FFFFFF; box-shadow: var(--schatten); }
.rechnung-szene .geraet-iphone { width: 15rem; }
.rechnung-foto img { display: block; width: 100%; height: auto; }
.rechnung-foto .schild { left: 0.6rem; bottom: 0.6rem; }
.rechnung-pfeil { flex: none; width: 1.4rem; height: 1.4rem; color: var(--gold-text); }
.rechnung-szene figcaption { flex-basis: 100%; max-width: 30rem; margin: 0.5rem auto 0; color: var(--text-leise); font-size: 0.85rem; text-align: center; }
@media (width < 36rem) {
  .rechnung-szene { flex-direction: column; flex-wrap: nowrap; } .rechnung-szene figcaption { flex-basis: auto; }
  .rechnung-foto { flex: none; width: min(100%, 20rem); max-width: none; }
  .rechnung-pfeil { rotate: 90deg; }
}

/* Übersicht: iPhone, rechts daneben die Lupe auf die Karte „Warenwert eingelagert“ */
.lupe-wert {
  border-color: var(--nacht-700);
  box-shadow: 0 0 0 1px rgb(205 178 122 / 0.35), 0 1.6rem 3.4rem -1rem rgb(0 0 0 / 0.75);
  rotate: 1.5deg;
}
.lupe-wert::after { background: radial-gradient(circle at 20% 15%, rgb(255 255 255 / 0.09), transparent 36%); }
/* Oben rechts ist die Karte frei, unten stünde das Schild auf der Fußnote */
.lupe-wert { container-type: inline-size; }
.lupe-wert .schild { top: 0.6rem; bottom: auto; right: 0.6rem; }
@container (width < 20rem) {
  /* Ist die Lupe schmal, reicht das Zeichen, das Wort stünde auf der Überschrift der Karte */
  .lupe-wert .schild { padding: 0.35rem; }
  .lupe-wert .schild-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Preise ---------- */

.preise { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
@media (min-width: 56rem) { .preise { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-items: start; } }
.preis {
  position: relative; padding: 2rem 1.7rem 2rem;
  background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten-karte);
}
.preis h3 { margin-bottom: 0.4rem; font-size: 1.3rem; }
.betrag { margin: 0; font-weight: 300; font-size: 2.6rem; line-height: 1.1; font-variant-numeric: lining-nums; }
.betrag small { font-family: var(--schrift-text); font-size: 0.95rem; color: var(--text-leise); }
.umgerechnet { margin: 0.35rem 0 0; color: var(--text-leise); font-size: 0.94em; }
.preis-pro { border: 1px solid var(--akzent); box-shadow: var(--schatten); }
@media (min-width: 56rem) { .preis-pro { translate: 0 -0.8rem; } }
.etikett-band {
  position: absolute; top: -0.8rem; left: 1.5rem; margin: 0;
  padding: 0.22rem 0.8rem; background: var(--bordeaux); color: var(--elfenbein);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
/* Einmalkauf: über die ganze Breite unter den drei Preisen, weil er kein Abo ist */
.preis-einmal-kopf h3 { margin-bottom: 0.2rem; }
@media (min-width: 56rem) {
  .preis-einmal {
    grid-column: 1 / -1; display: grid; gap: 1rem 2.5rem; align-items: center;
    grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1.2fr); padding-block: 1.7rem;
  }
  .preis-einmal .merkliste { margin: 0; }
}
.preise-hinweis { margin-top: 2.2rem; max-width: 44rem; }

/* ---------- Fragen ---------- */

details { border-bottom: 1px solid var(--linie); }
details:first-of-type { border-top: 1px solid var(--linie); }
summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 3.6rem; padding: 1rem 0.2rem; cursor: pointer; list-style: none;
  font-weight: 420; font-size: 1.22em; line-height: 1.35;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; flex: none; width: 0.9rem; height: 0.9rem; margin-right: 0.2rem;
  background: linear-gradient(var(--gold-text), var(--gold-text)) center / 100% 1.5px no-repeat,
              linear-gradient(var(--gold-text), var(--gold-text)) center / 1.5px 100% no-repeat;
}
details[open] summary::after { background: linear-gradient(var(--gold-text), var(--gold-text)) center / 100% 1.5px no-repeat; }
details p { color: var(--text-leise); padding-inline: 0.2rem; }
#fragen .klein { margin-top: 1.8rem; }

/* ---------- Schluss und Fuß ---------- */

.schluss { position: relative; isolation: isolate; overflow: clip; background: var(--nacht-900); color: var(--nacht-text); padding-block: clamp(4rem, 9vw, 7rem); --fokus: var(--gold-hell); }
.schluss::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(36rem 22rem at 20% 50%, rgb(110 26 51 / 0.5), transparent 72%); }
.schluss-raster { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 48rem) { .schluss-raster { grid-template-columns: 9rem minmax(0, 1fr); gap: 3rem; } }
.schluss-icon { width: 7.5rem; height: 7.5rem; border-radius: 1.7rem; box-shadow: 0 0 0 1px rgb(242 237 230 / 0.1), 0 30px 60px -24px rgb(0 0 0 / 0.9); }
@media (min-width: 48rem) { .schluss-icon { width: 9rem; height: 9rem; border-radius: 2rem; } }
.schluss h2 { margin-bottom: 0.3em; color: var(--nacht-text); }
.schluss h2 em { color: var(--rose); }
.schluss .gross { margin: 0; color: #D9D0C8; }

.fuss { padding-block: 2.6rem 3rem; background: var(--grund); border-top: 1px solid var(--linie); }
.fuss p { margin: 0 0 0.5rem; }
.fuss a { font-weight: 500; }

/* ---------- Textseiten (Hilfe, Datenschutz, Impressum) ---------- */

.textseite { padding-block: 3rem 5rem; background: var(--grund); color: var(--text); }
.textseite .rahmen { max-width: 46rem; }
.textseite h1 { font-size: clamp(2.3rem, 4.4vw, 3.3rem); margin-bottom: 0.6em; }
.textseite h2 { font-size: 1.55rem; margin-top: 2.4rem; font-weight: 420; }
.textseite ul { padding-left: 1.3rem; }
.textseite li { margin-bottom: 0.55rem; }
.textseite .stand { color: var(--text-leise); }
.kopf-schmal { background: var(--nacht-900); --fokus: var(--gold-hell); }
.kopf-schmal .rahmen { min-height: var(--kopf-hoehe); }
.entwurf { margin-bottom: 2.2rem; padding: 1rem 1.2rem; border: 1px dashed var(--akzent); background: var(--flaeche); }
.entwurf p { margin: 0; }
.offen { background: rgb(205 178 122 / 0.35); padding: 0.05rem 0.3rem; }

/* Widerspruch gegen die Reichweitenmessung (Datenschutz, Abschnitt 3), wie auf ansitzwind.de */
.textseite .widerspruch { margin-top: 1.5rem; padding: 1.1rem 1.3rem; border: 1px solid var(--linie-fein); background: var(--flaeche); }
.textseite .widerspruch h3 { margin-top: 0; }
.textseite .widerspruch p { margin-bottom: 0; }
.textseite .widerspruch .knopf { margin-top: 0.9rem; }
.textseite .widerspruch .widerspruch-klein { margin-top: 1rem; font-size: 0.88rem; color: var(--text-leise); }
/* Bis Matomo antwortet, nichts zeigen, was gleich umspringt; ohne JavaScript gilt der Hinweis „nicht aktiv“ */
.js .widerspruch:not(.bereit) .widerspruch-inhalt { visibility: hidden; }