/* Ansitzwind – Website zur App.
   Bühne in der Blauen Stunde am Waldrand, darauf ein iPhone mit der Ampel. Darunter Kartenpapier mit Höhenlinien.
   Schriften: Vollkorn für Überschriften, Barlow für Text, Barlow Semi Condensed für Werte. Die App-Ansichten nutzen die Systemschrift.
   Bewegung nur an zwei Stellen: die Szene oben und die Rechnung „Wie die Ampel rechnet“. */

@font-face { font-family: "Vollkorn"; src: url("schriften/vollkorn.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url("schriften/vollkorn-kursiv.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("schriften/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("schriften/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("schriften/barlow-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Barlow Schmal"; src: url("schriften/barlow-schmal-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Schmal"; src: url("schriften/barlow-schmal-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

:root {
  color-scheme: light dark;

  --nacht: #0E1A24;
  --nacht-tief: #08111A;
  --nacht-hell: #172736;
  --nebel: #E4EAEE;
  --nebel-leise: #A9B8C2;
  --daemmerblau: #2C5A87;
  --daemmerblau-hell: #8DB8E2;
  --abendglut: #E6A456;
  --hoehenlinie: #A88654;

  --grund: #EEF1EA;
  --flaeche: #E2E7DC;
  --karte: #FAFBF7;
  --linie: #CFD6C8;
  --text: #16201C;
  --text-leise: #4F5D56;
  --akzent: var(--daemmerblau);
  --auf-akzent: #FFFFFF;
  --schatten: 0 1px 2px rgb(22 32 28 / 0.08), 0 18px 40px -18px rgb(22 32 28 / 0.35);

  --gruen: #2B9254;
  --gelb: #E2A400;
  --rot: #CF3F2C;
  --gruen-wort: #1D7440;
  --gelb-wort: #855A00;
  --rot-wort: #B0301E;
  /* Ampelpunkt (Kreis mit ✓ ! ✕): eigene Füllung und Zeichenfarbe. Das Zeichen ist Text und
     braucht 4,5 : 1. Mit den Flächenfarben oben kam Weiß auf Grün nur auf 3,9, auf Rot am Pixel
     gemessen auf 4,47 (Barrierefreiheit-Check 31.10.2026). */
  --gruen-punkt: #1F7A45; --gelb-punkt: #E2A400; --rot-punkt: #B83420;
  --gruen-auf: #FFFFFF; --gelb-auf: #231A00; --rot-auf: #FFFFFF;
  --fahne: #5B4A9E;
  --windstrich: #27445F;
  --karte-halo: #F7F8F0;
  --karte-schrift: #24302A;

  --schrift-titel: "Vollkorn", "Iowan Old Style", Georgia, serif;
  --schrift-text: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-werte: "Barlow Schmal", "Barlow", "Arial Narrow", system-ui, sans-serif;
  --schrift-app: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  @media (prefers-color-scheme: dark) {
    --grund: #0B141B;
    --flaeche: #111E27;
    --karte: #14222C;
    --linie: #223543;
    --text: #E4EAEE;
    --text-leise: #A2B2BC;
    --akzent: #8DB8E2;
    --auf-akzent: #0B1620;
    --schatten: 0 1px 2px rgb(0 0 0 / 0.3), 0 18px 40px -18px rgb(0 0 0 / 0.75);
    --gruen: #3FB872;
    --gelb: #F0BF3A;
    --rot: #F2604C;
    --gruen-wort: #63D594;
    --gelb-wort: #F4C84A;
    --rot-wort: #FF8371;
    /* Dunkel: helle Punkte mit dunklem Zeichen (Weiß auf Rot kam nur auf 3,0). */
    --gruen-punkt: #3FB872; --gelb-punkt: #F0BF3A; --rot-punkt: #F2604C;
    --gruen-auf: #0B141B; --gelb-auf: #0B141B; --rot-auf: #0B141B;
    --fahne: #CDBFFF;
    --windstrich: #C9DCEB;
    --karte-halo: #15211B;
    --karte-schrift: #E2EADF;
  }

  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: 1rem; }
@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.6;
  overflow-wrap: break-word;
  font-size-adjust: from-font;
}

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

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

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

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

.rahmen { width: min(100% - 2rem, 72rem); margin-inline: auto; }

.sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 30;
  background: var(--akzent); color: var(--auf-akzent);
  padding: 0.5rem 1rem; border-radius: 8px;
}
.sprung:focus { top: 1rem; }

h1, h2, h3 { margin: 0 0 0.5em; text-wrap: balance; }
h1, h2 { font-family: var(--schrift-titel); font-weight: 650; letter-spacing: -0.012em; font-variant-numeric: lining-nums; }
h1 { font-size: clamp(2.7rem, 5.6vw, 5rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 3.9vw, 3.1rem); line-height: 1.08; }
h3 { font-family: var(--schrift-text); font-size: 1.2rem; line-height: 1.3; font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }

/* ---------- Ampel-Stufen (gelten für Seite, App-Ansichten und Karte) ---------- */

.stufe-gruen { --stufe: var(--gruen); --stufe-punkt: var(--gruen-punkt); --stufe-auf: var(--gruen-auf); --stufe-wort: var(--gruen-wort); }
.stufe-gelb { --stufe: var(--gelb); --stufe-punkt: var(--gelb-punkt); --stufe-auf: var(--gelb-auf); --stufe-wort: var(--gelb-wort); }
.stufe-rot { --stufe: var(--rot); --stufe-punkt: var(--rot-punkt); --stufe-auf: var(--rot-auf); --stufe-wort: var(--rot-wort); }
.stufe-offen { --stufe: #8E8E93; --stufe-punkt: #6C6C70; --stufe-auf: #FFFFFF; --stufe-wort: var(--text-leise); }

.ampel-punkt {
  display: inline-grid; place-items: center; flex: none;
  width: 1.45em; height: 1.45em; border-radius: 50%;
  background: var(--stufe-punkt, var(--stufe)); color: var(--stufe-auf);
  font-family: var(--schrift-app); font-weight: 800; font-size: 0.78em; line-height: 1;
  transition: background-color 0.5s ease, color 0.5s ease;
}
.ampel-wort { color: var(--stufe-wort); font-weight: 600; transition: color 0.5s ease; }

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

.kopf .rahmen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.4rem 1.5rem; min-height: 4.4rem; flex-wrap: wrap;
}
.marke {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--text); text-decoration: none;
  font-family: var(--schrift-titel); font-weight: 700; font-size: 1.32rem; letter-spacing: -0.01em;
}
.marke svg { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 0.55rem; }
.navigation ul { display: flex; gap: 0.2rem 1.35rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.navigation a { color: var(--text-leise); text-decoration: none; font-weight: 500; }
.navigation a:hover, .navigation a[aria-current="page"] { color: var(--text); }

/* Der Kopf liegt über dem Bühnenfoto; die Bühne hält dafür oben Platz frei (--kopf-hoehe). */
:root { --kopf-hoehe: 4.4rem; }
.kopf.auf-buehne { position: absolute; inset: 0 0 auto; z-index: 5; }
.kopf.auf-buehne .marke { color: #FFFFFF; }
.kopf.auf-buehne .navigation a { color: #C3D2DC; }
.kopf.auf-buehne .navigation a:hover { color: #FFFFFF; }

.kopf.einfach { background: var(--nacht); }
.kopf.einfach .marke { color: #FFFFFF; }
.kopf.einfach .navigation a { color: #C3D2DC; }

/* Menü-Knopf: nur auf schmalen Bildschirmen und nur, wenn der Browser Popover kann */
.menue-knopf { display: none; }

/* Breit steht die Navigation in der Zeile, das Popover-Attribut wirkt dort nicht */
@media (width > 40rem) {
  .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 in Browsern ohne Popover: alle Punkte umbrochen unter der Marke */
@media (max-width: 40rem) {
  :root { --kopf-hoehe: 7rem; }
  .kopf .rahmen { flex-direction: column; align-items: flex-start; gap: 0.3rem; padding-block: 0.7rem 0.5rem; }
  .navigation ul { gap: 0.3rem 1.15rem; }
  .navigation a { font-size: 0.95rem; }
}

/* Schmal mit Popover: Knopf „Menü“, die Liste klappt als Tafel unter dem Kopf auf */
@supports selector(:popover-open) {
  @media (max-width: 40rem) {
    :root { --kopf-hoehe: 4.4rem; }
    .kopf .rahmen { flex-direction: row; align-items: center; gap: 1rem; padding-block: 0; }

    .menue-knopf {
      display: inline-flex; align-items: center; gap: 0.5rem;
      min-height: 2.75rem; padding: 0 1rem 0 0.85rem;
      border: 1px solid rgb(255 255 255 / 0.22); border-radius: 999px;
      background: rgb(14 26 36 / 0.55); color: #FFFFFF;
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer;
    }
    .menue-knopf svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; 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: #0E1A24; border-color: rgb(255 255 255 / 0.35); }

    .navigation[popover] {
      position: fixed; inset: calc(var(--kopf-hoehe) - 0.4rem) 0.75rem auto; width: auto; height: auto; margin: 0;
      padding: 0.35rem; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 1.1rem;
      background: rgb(14 26 36 / 0.97); color: #E8EEF2;
      box-shadow: 0 1.4rem 3rem rgb(0 0 0 / 0.5);
    }
    .navigation ul { flex-direction: column; flex-wrap: nowrap; gap: 0; }
    .navigation li + li { border-top: 1px solid rgb(255 255 255 / 0.08); }
    .kopf .navigation[popover] a { display: block; padding: 0.85rem 1rem; border-radius: 0.7rem; font-size: 1.1rem; color: #E8EEF2; }
    .kopf .navigation[popover] a:hover { background: rgb(255 255 255 / 0.06); }
  }

  /* Weiches Aufklappen nur ohne „Bewegung reduzieren“; Schließen ist in Safari und Firefox sofort */
  @media (max-width: 40rem) 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 ---------- */

.buehne {
  --kanzel-x: calc(50cqw + min(100cqw - 2rem, 72rem) * 0.13);
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--nacht);
  color: var(--nebel);
}
.buehne-bild {
  position: absolute; inset: 0; z-index: -1;
  container-type: size;
  overflow: hidden;
}
.foto {
  --zoom: 1.3;
  --b: calc(max(100cqw, 179.17cqh) * var(--zoom));
  position: absolute;
  width: var(--b);
  aspect-ratio: 5504 / 3072;
  left: clamp(100cqw - var(--b), 50cqw + min(100cqw - 2rem, 72rem) * 0.13 - var(--b) * 0.672, 0px);
  top: clamp(100cqh - var(--b) * 0.5581, 42cqh - var(--b) * 0.5581 * 0.38, 0px);
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto-ebene { position: absolute; inset: 0; width: 100%; height: 100%; }
.buehne-bild::after {
  content: "";
  position: absolute; inset: 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(90deg, rgb(8 17 26 / 0.86) 0%, rgb(8 17 26 / 0.62) 30%, rgb(8 17 26 / 0.12) 52%, rgb(8 17 26 / 0) 64%),
    linear-gradient(0deg, rgb(8 17 26 / 0.95) 0%, rgb(8 17 26 / 0) 26%),
    linear-gradient(180deg, rgb(8 17 26 / 0.55) 0%, rgb(8 17 26 / 0) 18%);
  pointer-events: none;
}

/* Duftfahne an der Kanzel im Foto */
.foto-fahne {
  transform-box: view-box;
  transform-origin: 646.5px 205.5px;
  rotate: var(--winkel);
  scale: var(--laenge, 1) 1;
  transition: rotate 1.4s cubic-bezier(0.45, 0.05, 0.25, 1), scale 1.4s ease, opacity 0.6s ease;
  mix-blend-mode: screen;
}
.ohne-uebergang, .ohne-uebergang * { transition: none !important; }

/* Einstieg: Szene, Fahne und Schild erscheinen, wenn skripte/buehne.js bereit ist.
   Fällt das Skript aus, kommen sie nach vier Sekunden trotzdem. */
@media (prefers-reduced-motion: no-preference) {
  .js .buehne:not(.laeuft) :is(.szene, .foto-fahne, .foto-hinweis) { opacity: 0; animation: notauf 0.6s 4s forwards; }
  .js .buehne:not(.laeuft) .szene { translate: 0 1.6rem; }
  .js .szene { transition: opacity 0.9s ease, translate 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .foto-hinweis { transition: opacity 0.6s ease 0.9s; }
}
@keyframes notauf { to { opacity: 1; } }
.duft-teilchen circle {
  fill: #F2EEFF;
  opacity: 0;
  animation: duft-zieht 3.4s linear infinite;
  animation-delay: calc(var(--i) * -0.57s);
}
@keyframes duft-zieht {
  0% { translate: 0 0; opacity: 0; }
  15% { opacity: 0.85; }
  100% { translate: 250px 0; opacity: 0; }
}
.foto-sitz {
  fill: none;
  stroke: var(--stufe, #FFFFFF);
  stroke-width: 1.6;
}
.foto-hinweis {
  position: absolute;
  left: 58.5%;
  top: 19.5%;
  translate: -50% -100%;
  margin: 0;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.38rem 0.75rem 0.38rem 0.42rem;
  border-radius: 99px;
  background: rgb(8 17 26 / 0.62);
  border: 1px solid rgb(255 255 255 / 0.2);
  backdrop-filter: blur(10px) saturate(140%);
  color: #FFFFFF;
  font-family: var(--schrift-werte);
  font-weight: 500;
  font-size: clamp(0.8rem, 0.95vw, 0.95rem);
  white-space: nowrap;
  --gruen-wort: #6FDCA0; --gelb-wort: #F6CD55; --rot-wort: #FF8A78;
  /* Das Schild ist in hell und dunkel gleich dunkel: Punkte wie im Dunkelmodus. Alle drei Stufen
     mit dunklem Zeichen, damit auch der Übergang zwischen zwei Stufen lesbar bleibt (vorher
     wechselte das Zeichen zwischen Weiß und Dunkel und wurde dabei kurz unleserlich). */
  --gruen-punkt: #3FB872; --gelb-punkt: #F0BF3A; --rot-punkt: #F2604C;
  --gruen-auf: #0B141B; --gelb-auf: #0B141B; --rot-auf: #0B141B;
}
.foto-hinweis .ampel-punkt { font-size: 0.85em; }
.foto-hinweis-wort { color: var(--stufe-wort); font-weight: 600; transition: color 0.5s ease; }

.buehne-raster {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding-block: calc(var(--kopf-hoehe) + clamp(2rem, 5vw, 4rem)) clamp(3rem, 6vw, 5rem);
}
@media (min-width: 60rem) {
  .buehne-raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: clamp(40rem, calc(100svh - 2.6rem), 54rem); }
}
.buehne h1 { color: #FFFFFF; max-width: 12ch; }
.frage { margin-inline-start: -0.07em; }
.buehne .einleitung {
  font-size: clamp(1.15rem, 1.6vw, 1.32rem);
  line-height: 1.55;
  color: #CFDAE2;
  max-width: 31rem;
}
.haken { list-style: none; padding: 0; margin: 1.5rem 0 2.1rem; display: grid; gap: 0.6rem; }
.haken li { position: relative; padding-left: 2rem; color: #DFE7EC; }
.haken li::before {
  content: "";
  position: absolute; left: 0.2rem; top: 0.38em;
  width: 0.85rem; height: 0.48rem;
  border-left: 2.5px solid var(--abendglut);
  border-bottom: 2.5px solid var(--abendglut);
  transform: rotate(-45deg);
}
.bald {
  display: inline-flex; align-items: center; gap: 0.75rem; margin: 0;
  padding: 0.7rem 1.35rem 0.7rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgb(255 255 255 / 0.28);
  background: rgb(255 255 255 / 0.06);
  color: #FFFFFF; line-height: 1.2;
}
.bald svg { width: 1.7rem; height: 1.7rem; flex: none; color: var(--abendglut); }
.bald small { display: block; color: #AFC0CB; font-size: 0.82rem; }
.bald strong { font-size: 1.08rem; font-weight: 600; }

.buehne-quelle {
  margin-block: 0 1rem;
  color: #8A9BA7;
  font-size: 0.78rem;
  text-align: end;
}

/* Szene mit iPhone */

.szene {
  position: relative;
  margin: 0;
  justify-self: end;
  width: min(100%, 19.5rem);
  padding-bottom: 2.75rem;
}

/* ---------- iPhone (Rahmen wie bei Münzklar, Farbe Titan dunkel) ---------- */

.iphone {
  --neig-x: 0deg;
  --neig-y: 0deg;
  position: relative;
  container-type: inline-size;
  transform: perspective(1500px) rotateY(calc(-13deg + var(--neig-y))) rotateX(calc(4deg + var(--neig-x))) rotateZ(1.2deg);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.iphone-flach { transform: perspective(1800px) rotateY(-8deg) rotateX(2deg); }
.iphone-rand {
  position: relative; z-index: 1;
  border-radius: 17.6cqi;
  padding: 1.6cqi;
  background: linear-gradient(142deg, #4A524E 0%, #B9C1BC 12%, #333A37 30%, #8D9590 52%, #252B28 74%, #6D7570 100%);
  box-shadow:
    inset 0 0 0 0.35cqi rgb(255 255 255 / 0.3),
    inset 0 0 0 0.8cqi rgb(0 0 0 / 0.3),
    1.2cqi 0.4cqi 0 #2F3633,
    2.4cqi 0.8cqi 0 #262C29,
    3.4cqi 1.1cqi 0 #1C2120,
    4cqi 9cqi 12cqi rgb(0 0 0 / 0.4),
    10cqi 30cqi 42cqi rgb(0 0 0 / 0.5);
}
.iphone-glas { border-radius: 16cqi; padding: 3cqi; background: #040506; box-shadow: inset 0 0 0 0.25cqi #1A1F1E; }
.iphone-bildschirm {
  position: relative; overflow: hidden;
  border-radius: 13.2cqi;
  aspect-ratio: 1206 / 2622;
  container-type: inline-size;
}
/* Echte Bildschirmfotos der App im Gerät */
.app-foto { background: #000000; }
.app-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-foto img[data-held-stunde] { opacity: 0; transition: opacity 0.45s ease; }
.app-foto img[data-held-stunde].sichtbar { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .app-foto img[data-held-stunde] { transition: none; } }
.insel { position: absolute; top: 2.6cqi; left: 50%; translate: -50% 0; width: 29cqi; height: 8.6cqi; border-radius: 99px; background: #000000; z-index: 3; }
.spiegelung { position: absolute; inset: 0; background: linear-gradient(112deg, rgb(255 255 255 / 0.2) 0%, rgb(255 255 255 / 0.05) 26%, transparent 40%); pointer-events: none; z-index: 4; }
.taste { position: absolute; width: 1.3cqi; border-radius: 1cqi; background: linear-gradient(90deg, #1E2321, #9AA39E 50%, #2A302D); }
.taste-aktion { left: -0.7cqi; top: 17%; height: 5%; }
.taste-lauter { left: -0.7cqi; top: 25%; height: 8.5%; }
.taste-leiser { left: -0.7cqi; top: 35.5%; height: 8.5%; }
.taste-seite { right: -3.6cqi; top: 28%; height: 13%; z-index: 2; background: linear-gradient(90deg, #4D5652, #AEB7B2 60%, #3E4643); }
.taste-kamera { right: -3.4cqi; top: 56%; height: 7.5%; z-index: 2; background: linear-gradient(90deg, #3F4844, #8A938E 60%, #343B38); }

/* ---------- App-Ansichten (iOS) ---------- */

.ios, .app {
  --app-grund: #F2F2F7;
  --app-flaeche: #FFFFFF;
  --app-text: #000000;
  --app-leise: #6C6C70;
  --app-linie: rgb(60 60 67 / 0.16);
  --app-tint: #2C6DB0;
  --app-glas: rgb(255 255 255 / 0.78);
  --gruen: #2A9A52; --gelb: #E8A800; --rot: #E0402B;
  --gruen-wort: #1E7C40; --gelb-wort: #8A5D00; --rot-wort: #C2311D;
  font-family: var(--schrift-app);
  color: var(--app-text);
  background: var(--app-grund);
  font-size-adjust: none;
  letter-spacing: -0.01em;
  @media (prefers-color-scheme: dark) {
    --app-grund: #000000;
    --app-flaeche: #1C1C1E;
    --app-text: #FFFFFF;
    --app-leise: #98989F;
    --app-linie: rgb(84 84 88 / 0.55);
    --app-tint: #7FB2E5;
    --app-glas: rgb(28 28 30 / 0.78);
    --gruen: #34C268; --gelb: #FFC93A; --rot: #FF5A45;
    --gruen-wort: #4CD97F; --gelb-wort: #FFD24D; --rot-wort: #FF7D6B;
  }
}

/* Heute Abend */
.heute { padding: 15.5cqi 4.6cqi 0; }

/* Pause-Knopf der Bühne */
.pause {
  position: absolute; right: 0; bottom: 0; z-index: 4;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.8rem 0.4rem 0.6rem;
  border-radius: 99px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background: rgb(8 17 26 / 0.6);
  color: #D3DEE5;
  font: inherit; font-size: 0.85rem;
  cursor: pointer;
}
.pause:hover { color: #FFFFFF; border-color: rgb(255 255 255 / 0.45); }
.pause svg { width: 1rem; height: 1rem; }
.pause .zeichen-weiter { display: none; }
.angehalten .pause .zeichen-weiter { display: block; }
.angehalten .pause .zeichen-halt { display: none; }
.buehne.angehalten .duft-teilchen circle { animation-play-state: paused; }

@media (max-width: 59.99rem) {
  .buehne { --kanzel-x: 64cqw; }
  .buehne-bild { bottom: auto; height: min(118vw, 44rem); }
  .buehne-bild::after {
    background:
      linear-gradient(0deg, var(--nacht) 0%, rgb(14 26 36 / 0) 38%),
      linear-gradient(180deg, rgb(8 17 26 / 0.6) 0%, rgb(8 17 26 / 0) 30%);
  }
  .foto { --zoom: 1.1; left: clamp(100cqw - var(--b), 64cqw - var(--b) * 0.672, 0px); top: clamp(100cqh - var(--b) * 0.5581, 46cqh - var(--b) * 0.5581 * 0.38, 0px); }
  .buehne-raster { padding-top: calc(var(--kopf-hoehe) + min(70vw, 30rem)); }
  .foto-hinweis { font-size: 0.78rem; top: 49%; translate: -50% 0; }
  .szene { justify-self: center; width: min(78%, 18rem); }
  .buehne-quelle { text-align: start; }
}

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

.abschnitt { padding-block: clamp(4rem, 9vw, 7rem); }
.abschnitt-kopf { max-width: 42rem; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.abschnitt-kopf p, .abschnitt-leise { color: var(--text-leise); font-size: 1.15rem; max-width: 38rem; }

/* Warum: Reh */
.warum {
  position: relative; isolation: isolate; overflow: clip;
  background: #0A120F; color: #E3EAE4;
  min-height: clamp(30rem, 62vw, 46rem);
  display: grid; align-items: center;
}
.warum-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.warum::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(7 13 11 / 0.88) 0%, rgb(7 13 11 / 0.6) 36%, rgb(7 13 11 / 0) 62%);
}
.warum-raster { padding-block: clamp(4rem, 8vw, 6rem); }
.warum-text { max-width: 31rem; }
.warum h2 { color: #FFFFFF; }
.warum p { color: #CBD6CF; font-size: 1.12rem; }
.warum .bildnachweis, .schluss .bildnachweis { max-width: none; font-size: 0.75rem; text-shadow: none; }
.bildnachweis { position: absolute; left: 0; right: 0; bottom: 0.4rem; margin: 0 auto; color: rgb(255 255 255 / 0.55); font-size: 0.75rem; text-align: end; }
@media (max-width: 47.99rem) {
  .warum { align-items: end; }
  .warum-bild { height: 62%; object-position: 72% 30%; }
  .warum::after { background: linear-gradient(0deg, #0A120F 38%, rgb(10 18 15 / 0.2) 62%, rgb(10 18 15 / 0) 100%); }
  .warum-raster { padding-top: 22rem; padding-bottom: 3rem; }
}

/* So geht's */
.schritte { list-style: none; padding: 0; margin: 0; display: grid; gap: 2.5rem 1.6rem; counter-reset: schritt; }
@media (min-width: 52rem) { .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.schritt { counter-increment: schritt; }
.schritt-bild {
  position: relative; overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: 1.4rem;
  background: var(--flaeche);
  margin-bottom: 1.3rem;
  display: grid; place-items: center;
  container-type: inline-size;
}
.app-ausschnitt { display: block; box-shadow: inset 0 0 0 1px var(--linie, rgb(0 0 0 / 0.08)); }
.app-ausschnitt img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.schritt h3 { display: flex; align-items: baseline; gap: 0.6rem; }
.schritt h3::before {
  content: counter(schritt);
  flex: none; display: inline-grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 1.5px solid var(--text);
  font-family: var(--schrift-titel); font-size: 0.95rem; font-weight: 700;
  translate: 0 -0.1rem;
}
.schritt p { color: var(--text-leise); margin: 0; }
/* Wie die Ampel rechnet */
.regel-abschnitt { background: var(--flaeche); }
.regel-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .regel-raster { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; } }
.regel-text > p { color: var(--text-leise); font-size: 1.15rem; max-width: 34rem; }
.regeln { margin: 2rem 0; display: grid; gap: 1.1rem; }
.regeln div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: baseline; padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.regeln dt { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--stufe-wort); }
.regeln dd { margin: 0; color: var(--text-leise); }
@media (max-width: 30rem) { .regeln div { grid-template-columns: 1fr; gap: 0.3rem; } }

.nochmal {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.05rem; border-radius: 99px;
  border: 1.5px solid var(--text); background: transparent; color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer;
}
.nochmal svg { width: 1rem; height: 1rem; }
.nochmal:hover { background: var(--text); color: var(--grund); }

.rechnung { margin: 0; display: grid; gap: 1.5rem; justify-items: center; }
/* Kompass und Tabelle nebeneinander nur, solange der Abschnitt einspaltig ist; daneben wäre die Tabelle zu schmal */
@media (48rem <= width < 60rem) { .rechnung { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.rechnung-kompass { width: min(100%, 22rem); height: auto; }
.rk-ring { fill: var(--karte); stroke: var(--linie); stroke-width: 2; }
.rk-striche path { stroke: var(--text-leise); stroke-width: 1.4; opacity: 0.7; }
.rk-keil { fill: var(--gruen); fill-opacity: 0.2; stroke: var(--gruen); stroke-width: 2.5; stroke-linejoin: round; }
.rk-rand { fill: var(--gelb); fill-opacity: 0.22; }
.rk-n { fill: var(--text-leise); font: 600 16px var(--schrift-werte); text-anchor: middle; }
.rk-fahne { rotate: var(--richtung); transition: rotate 1s cubic-bezier(0.45, 0.05, 0.25, 1); }
.rk-fahne path { fill: var(--fahne); fill-opacity: 0.22; }
.rk-pfeil { rotate: var(--richtung); transition: rotate 1s cubic-bezier(0.45, 0.05, 0.25, 1); }
.rk-pfeil path { fill: none; stroke: var(--stufe); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.5s ease; }
.rk-sitz circle { fill: var(--text); stroke: var(--karte); stroke-width: 3; }
.rk-sitz path { fill: var(--karte); }

.rechnung-tabelle { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-family: var(--schrift-werte); font-size: 1.02rem; }
.rechnung-tabelle th, .rechnung-tabelle td { text-align: left; padding: 0.5rem 0.6rem 0.5rem 0; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.rechnung-tabelle thead th { font-family: var(--schrift-text); font-size: 0.85rem; font-weight: 500; color: var(--text-leise); }
.rechnung-tabelle tbody th { font-weight: 600; }
.rechnung-tabelle td:last-child { display: flex; align-items: center; gap: 0.45rem; color: var(--stufe-wort); font-weight: 600; }
@media (max-width: 22rem) {
  .rechnung-tabelle { font-size: 0.9rem; }
  .rechnung-tabelle th, .rechnung-tabelle td { padding-right: 0.35rem; }
}
/* Beim Abspielen: Noch nicht erreichte Zeilen bleiben lesbar, nur grau und ohne Ampelfarbe
   (nicht durchsichtig: 18 % Deckkraft ergaben Kontrast 1,4 : 1, Barrierefreiheit-Check 31.10.2026).
   Die aktuelle Zeile hebt sich neutral ab; eine Tönung in Ampelfarbe drückte das Ampelwort
   unter 4,5 : 1 (Grün 4,1, Rot 4,35). */
.rechnung-tabelle tbody tr { transition: background-color 0.45s ease; }
.rechnung-tabelle tbody :is(th, td), .rechnung-tabelle .ampel-punkt { transition: color 0.45s ease, background-color 0.45s ease, box-shadow 0.45s ease; }
.rechnung.bereit tbody tr:not(.gezeigt) :is(th, td) { color: var(--text-leise); font-weight: 400; }
.rechnung.bereit tbody tr:not(.gezeigt) .ampel-punkt { background: transparent; color: var(--text-leise); box-shadow: inset 0 0 0 1.5px currentColor; }
.rechnung.bereit tbody tr.jetzt { background: var(--grund); }

/* ---------- Ausprobieren: iPad auf dem Küchentisch ---------- */

.ausprobieren { position: relative; isolation: isolate; overflow: clip; background: #2A1D14; color: #F3ECE3; padding-block: clamp(4rem, 8vw, 6.5rem); }
.tisch { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ausprobieren::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 42% at 22% 8%, rgb(20 13 8 / 0.72), rgb(20 13 8 / 0) 70%),
    linear-gradient(180deg, rgb(20 13 8 / 0.82) 0%, rgb(20 13 8 / 0.55) 22%, rgb(20 13 8 / 0.15) 55%, rgb(20 13 8 / 0.55) 100%);
}
.auf-tisch h2 { color: #FFFFFF; }
.auf-tisch p { color: #EDE4D9; }
.auf-tisch h2, .auf-tisch p { text-shadow: 0 1px 2px rgb(0 0 0 / 0.7), 0 0 18px rgb(0 0 0 / 0.55); }
.ipad-vorfuehrung { margin: 0; }
/* Bedienleiste unter dem iPad, nur mit JavaScript */
.ipad-steuerung { display: none; }
.bedienbar .ipad-steuerung { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 1.2rem; margin-top: 1.6rem; }
.ipad-wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; padding: 0.25rem; border-radius: 99px; background: rgb(20 13 8 / 0.62); border: 1px solid rgb(255 255 255 / 0.18); }
.ipad-wahl button {
  font: inherit; font-size: 0.92rem; font-weight: 600;
  padding: 0.45rem 0.9rem; min-height: 2.5rem;
  border: 0; border-radius: 99px; background: transparent; color: #EDE4D9; cursor: pointer;
}
.ipad-wahl button:hover { background: rgb(255 255 255 / 0.12); color: #FFFFFF; }
.ipad-wahl button[aria-pressed="true"] { background: #F3ECE3; color: #1B140E; }
.ipad-wahl button[hidden] { display: none; }
.ipad-stunden:not(:has(button:not([hidden]))) { display: none; }
@media (max-width: 30rem) { .ipad-wahl button { padding-inline: 0.65rem; font-size: 0.85rem; } }
.ausprobieren-hinweis { max-width: 46rem; margin: 1.6rem auto 0; color: #D6CABD; font-size: 0.85rem; text-align: center; text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); }

.ipad { width: min(100%, 70rem); margin-inline: auto; container-type: inline-size; }
/* Ganzes iPad auf einen Blick: nicht höher als das Fenster */
@media (min-width: 48rem) { .ipad { width: min(100%, 70rem, calc((100svh - 3rem) * 1.4)); } }
.ipad-rand {
  position: relative;
  border-radius: 4.4cqi;
  padding: 2.1cqi;
  background: linear-gradient(160deg, #2A2E33, #16191C 40%, #23272B);
  box-shadow:
    inset 0 0 0 0.22cqi rgb(255 255 255 / 0.22),
    inset 0 0 0 0.5cqi rgb(0 0 0 / 0.5),
    0 0.4cqi 0 #3A3F44,
    0 2.5cqi 5cqi rgb(0 0 0 / 0.38),
    0 6cqi 12cqi -3cqi rgb(0 0 0 / 0.55);
}
.ipad-kamera { position: absolute; top: 0.8cqi; left: 50%; width: 0.6cqi; height: 0.6cqi; translate: -50% 0; border-radius: 50%; background: #0A0C0E; box-shadow: inset 0 0 0 0.12cqi #2C3238; }
.ipad-bildschirm { position: relative; overflow: hidden; border-radius: 2.3cqi; aspect-ratio: 2420 / 1668; }
@media (max-width: 47.99rem) {
  .ipad-rand { padding: 0; background: none; box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.5); border-radius: 1.1rem; }
  .ipad-kamera { display: none; }
  .ipad-bildschirm { border-radius: 1.1rem; }
}

.app {
  height: 100%;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  container-type: inline-size;
  font-size: clamp(0.72rem, 1.38cqi, 0.95rem);
  line-height: 1.35;
}

/* Unten auslaufen lassen, damit man sieht: hier geht es weiter */

.app input[type="range"] {
  --slider-track-size: 0.32em;
  --slider-thumb-size: 1.35em;
  --slider-fill-color: var(--app-tint);
  --slider-track-color: color-mix(in srgb, var(--app-leise) 30%, transparent);
  --attr-min: 0;
  --attr-max: 23;
  --control-value: 17;
  --slider-progress: calc((var(--control-value) - var(--attr-min)) / (var(--attr-max) - var(--attr-min)) * 100%);
  appearance: none;
  inline-size: 100%;
  block-size: 2em;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; cursor: pointer;
}
.app input[type="range"]::-webkit-slider-runnable-track {
  block-size: var(--slider-track-size); border: 0; border-radius: 99px;
  background: linear-gradient(to right, var(--slider-fill-color) var(--slider-progress), var(--slider-track-color) var(--slider-progress));
}
.app input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  inline-size: var(--slider-thumb-size); block-size: var(--slider-thumb-size);
  margin-block-start: calc((var(--slider-track-size) - var(--slider-thumb-size)) / 2);
  border: 0; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 0.5px 4px rgb(0 0 0 / 0.3), 0 0 0 0.5px rgb(0 0 0 / 0.08);
}
.app input[type="range"]::-moz-range-track { block-size: var(--slider-track-size); border: 0; border-radius: 99px; background: var(--slider-track-color); }
.app input[type="range"]::-moz-range-progress { block-size: var(--slider-track-size); border-radius: 99px; background: var(--slider-fill-color); }
.app input[type="range"]::-moz-range-thumb { inline-size: var(--slider-thumb-size); block-size: var(--slider-thumb-size); border: 0; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0.5px 4px rgb(0 0 0 / 0.3); }
.app input[type="range"]:focus-visible { outline: 2px solid var(--abendglut); outline-offset: 3px; }
.app input[type="range"]:disabled { cursor: default; opacity: 0.7; }
.sitz-knopf {
  width: 100%;
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.25em 0.65em; align-items: center;
  padding: 0.6em 0.6em;
  border: 0; border-radius: 0.7em; background: transparent; color: inherit;
  font: inherit; text-align: start; cursor: pointer;
}
.sitz-knopf .ampel-punkt { font-size: 0.9em; }
.sitz-text strong { display: block; font-weight: 600; }
.sitz-text small { display: block; color: var(--app-leise); font-size: 0.86em; }
.sitz-knopf .ampel-wort { font-size: 0.9em; text-align: end; }
.sitz-grund { grid-column: 2 / -1; color: var(--app-leise); font-size: 0.86em; display: none; }
.sitz-knopf[aria-pressed="true"] { background: color-mix(in srgb, var(--app-tint) 12%, transparent); }
.sitz-knopf[aria-pressed="true"] .sitz-grund { display: block; }
.zelle {
  display: inline-flex; align-items: center; gap: 0.4em;
  font: inherit; font-size: 0.88em; white-space: nowrap;
  padding: 0.25em 0.6em 0.25em 0.3em; border-radius: 99px; border: 0;
  background: transparent; color: inherit; cursor: pointer;
}
.zelle .ampel-punkt { font-size: 0.85em; }
.zelle[aria-pressed="true"] { background: color-mix(in srgb, var(--stufe) 18%, transparent); font-weight: 600; }

@container (max-width: 44rem) {
  .app { font-size: 0.86rem; }  .sitz-name { font-size: 26px; stroke-width: 6; }
}

/* Karte: Ebene mit Sitzen, Sektoren und Fahnen */
.sektor { fill: var(--stufe); fill-opacity: 0.2; stroke: var(--stufe); stroke-opacity: 0.75; stroke-width: 1.6; stroke-linejoin: round; }
.sektor.aktiv { fill-opacity: 0.3; stroke-width: 2.6; }
.fahne-anfang { stop-color: var(--fahne); stop-opacity: 0.6; }
.fahne-ende { stop-color: var(--fahne); stop-opacity: 0; }
.sitz-ring { fill: var(--karte-halo); fill-opacity: 0.85; }
.sitz.aktiv .sitz-ring { fill: none; stroke: var(--stufe); stroke-width: 3.5; }
.sitz-punkt { fill: var(--stufe); stroke: #FFFFFF; stroke-width: 2.5; }
.sitz-zeichen path { fill: #FFFFFF; stroke: #FFFFFF; }
.sitz-marke circle { fill: #13212B; stroke: #FFFFFF; stroke-width: 1.4; }
.sitz-marke text { fill: #FFFFFF; font: 800 8.5px var(--schrift-app); }
.sitz-name {
  font: 600 18px var(--schrift-werte);
  fill: var(--karte-schrift);
  paint-order: stroke; stroke: var(--karte-halo); stroke-width: 5; stroke-linejoin: round;
}
.windstrich {
  fill: none; stroke: var(--windstrich); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  /* Kurz wehen lassen (unter 5 Sekunden), dann als ruhige Pfeile stehen bleiben */
  animation: wehen 1.7s linear calc(var(--v) * -1.7s) 2, stehen 0.9s ease-out 3.4s forwards;
}
.windstriche.schwach .windstrich { animation-duration: 3.4s, 0.9s; animation-iteration-count: 1, 1; }
@keyframes wehen {
  0% { translate: 0 18px; opacity: 0; }
  30%, 70% { opacity: 0.55; }
  100% { translate: 0 -18px; opacity: 0; }
}
@keyframes stehen { from { opacity: 0; } to { opacity: 0.42; } }
@media (prefers-reduced-motion: reduce) {
  .windstrich { animation: none; opacity: 0.42; }
}

/* ---------- Funktionen ---------- */

.funktionen-raster { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 60rem) {
  .funktionen-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 4rem; }
  /* Rechts Platz für die überstehende Lupe, sonst ragt sie bei 60–65rem aus dem Fenster */
  .funktionen-raster .detail-szene { width: min(100% - 4.8rem, 22rem); margin-inline-end: 4.8rem; }
}
.merkmale { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
.merkmale li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; }
.merkmale svg { width: 2.6rem; height: 2.6rem; fill: none; stroke: var(--text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.merkmale svg .durch { stroke: var(--rot); }
.merkmale h3 { margin-bottom: 0.25rem; }
.merkmale p { margin: 0; color: var(--text-leise); }

.detail-szene { position: relative; margin: 0; justify-self: center; width: min(100%, 22rem); }
.detail-szene .iphone { width: min(100%, 19rem); margin-inline: auto; }
.detail-szene figcaption { margin-top: 2.2rem; color: var(--text-leise); font-size: 0.92rem; }
/* Lupe auf der Stundenleiste */
.lupe {
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  right: -19%;
  top: 49%;
  border-radius: 50%;
  overflow: hidden;
  container-type: inline-size;
  display: grid; place-items: center;
  background: var(--app-flaeche);
  box-shadow:
    0 0 0 0.4rem #3A4147,
    0 0 0 0.5rem #1E2327,
    0 0 0 0.58rem rgb(255 255 255 / 0.18),
    var(--schatten);
}
/* Glanz auf dem Glas; dunkel nur ein Hauch, sonst liegt ein grauer Schleier über den Werten */
.lupe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / 0.35), transparent 45%); pointer-events: none; }
@media (prefers-color-scheme: dark) { .lupe::after { background: radial-gradient(circle at 26% 20%, rgb(255 255 255 / 0.1), transparent 32%); } }
/* Schmal: Lupe hängt an der Unterkante des iPhones, damit sie keine Werte verdeckt */
@media (max-width: 34rem) {
  .detail-szene { display: grid; }
  .detail-szene .iphone, .detail-szene .lupe { grid-area: 1 / 1; }
  .lupe { position: relative; z-index: 2; inset: auto; justify-self: end; align-self: end; width: 40%; margin: 0 -1% -4.6rem 0; }
  .detail-szene figcaption { margin-top: 6rem; }
}

/* ---------- Kartenarten ---------- */

.kartenarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
@media (min-width: 60rem) { .kartenarten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }
.kartenarten figure { margin: 0; }
.kartenarten picture { display: block; aspect-ratio: 1; border-radius: 1.1rem; overflow: hidden; background: var(--flaeche); box-shadow: var(--schatten); }
.kartenarten img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kartenarten figcaption { margin-top: 0.7rem; font-weight: 600; }
.kartenarten-hinweis { margin-top: 1.6rem; color: var(--text-leise); font-size: 0.85rem; }

/* ---------- Mehrere Windbereiche je Sitz (neu seit 31.10.2026) ---------- */

.bereiche-raster { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .bereiche-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }
.neu-marke {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 0.9rem;
  font-family: var(--schrift-werte); font-weight: 600; font-size: 0.95rem; color: var(--text-leise);
}
.neu-marke span { padding: 0.12rem 0.65rem; border-radius: 99px; background: var(--abendglut); color: #1E1A14; }
.bereiche-szene { margin: 0; }
/* Zwei Geräte nebeneinander: das Formular etwas tiefer und hinten, die Sitzseite vorn */
.bereiche-geraete { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; max-width: 32rem; margin-inline: auto; padding-inline-end: 4%; }
.bereiche-geraete > .iphone:first-child { margin-top: 14%; }
.bereiche-geraete > .iphone:last-child { margin-inline-start: -10%; z-index: 2; }
.bereiche-szene figcaption { max-width: 32rem; margin: 2.4rem auto 0; color: var(--text-leise); font-size: 0.85rem; }

/* ---------- Foto vom Sitz und iCloud: dunkle Bühne ---------- */

.sitzfoto-abschnitt { position: relative; isolation: isolate; overflow: clip; background: var(--nacht); color: var(--nebel); }
.sitzfoto-abschnitt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse 55% 55% at 72% 40%, rgb(44 90 135 / 0.5), rgb(44 90 135 / 0) 70%),
    radial-gradient(ellipse 45% 40% at 10% 100%, rgb(230 164 86 / 0.14), rgb(230 164 86 / 0) 70%);
}
.sitzfoto-abschnitt h2 { color: #FFFFFF; }
.sitzfoto-text > p { color: var(--nebel); font-size: 1.15rem; }
.merkmale-nacht svg { stroke: var(--abendglut); }
.merkmale-nacht p { color: var(--nebel-leise); }
.merkmale-nacht h3 { color: #FFFFFF; }
.sitzfoto-raster { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .sitzfoto-raster { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; } }
.sitzfoto-szene { position: relative; margin: 0; padding-bottom: 14%; }
.sitzfoto-szene .ipad { width: 86%; margin: 0 0 0 auto; }
.sitzfoto-iphone { position: absolute; left: 0; bottom: 3.5rem; width: 31%; z-index: 2; }
.icloud-marke {
  position: absolute; z-index: 3; left: 27%; top: 50%;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.8rem 0.4rem 0.6rem; border-radius: 99px;
  background: rgb(14 26 36 / 0.78); border: 1px solid rgb(255 255 255 / 0.2);
  backdrop-filter: blur(8px);
  color: #FFFFFF; font-family: var(--schrift-werte); font-weight: 600; font-size: 0.9rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
}
.icloud-marke svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--daemmerblau-hell); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sitzfoto-szene figcaption { margin-top: 1.4rem; color: var(--nebel-leise); font-size: 0.85rem; max-width: 40rem; margin-inline-start: auto; }
/* Breit: Unterschrift rechts vom iPhone, sonst liegt das iPhone über ihrem Anfang */
@media (min-width: 48rem) { .sitzfoto-szene figcaption { margin-inline-start: 35%; } }
@media (max-width: 47.99rem) {
  .sitzfoto-szene { padding-bottom: 0; }
  .sitzfoto-szene .ipad { width: 100%; }
  .sitzfoto-iphone { position: relative; bottom: auto; width: 46%; margin: -18% 0 0 2%; }
  .icloud-marke { left: auto; right: 4%; top: auto; bottom: 5.5rem; }
}

/* ---------- Mitteilung und Widget ---------- */

.melden-abschnitt { background: var(--flaeche); }
.melden-raster { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .melden-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }
.melden-szene { position: relative; margin: 0; display: flex; justify-content: center; padding-bottom: 2rem; }
.iphone-klein { width: min(72%, 17rem); }
.sperre { background: #0E1A24; color: #FFFFFF; font-family: var(--schrift-app); }
.sperre > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sperre-inhalt { position: absolute; inset: 0; z-index: 1; padding: 15cqi 4.6cqi 6cqi; display: flex; flex-direction: column; align-items: center; background: linear-gradient(180deg, rgb(0 0 0 / 0.25), rgb(0 0 0 / 0) 40%, rgb(0 0 0 / 0.35)); }
.sperre-inhalt p { margin: 0; }
.sperre-datum { font-size: 4.6cqi; font-weight: 600; opacity: 0.9; }
.sperre-zeit { font-size: 25cqi; font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-top: 0.5cqi !important; }
/* Echtes Widget für den Sperrbildschirm (weiße Schrift ohne Hintergrund, aus der App gezeichnet) */
.sperre-widget { display: block; width: 46cqi; height: auto; margin-top: 3.5cqi; }
.mitteilung {
  margin-top: auto;
  display: grid; grid-template-columns: 9cqi 1fr; gap: 2.6cqi; align-items: start;
  width: 100%; padding: 3cqi 3.4cqi;
  border-radius: 5cqi;
  background: rgb(245 245 247 / 0.78); color: #000000;
  backdrop-filter: blur(16px) saturate(160%);
  font-size: 3.3cqi; line-height: 1.3;
}
.mitteilung-icon svg { width: 9cqi; height: 9cqi; border-radius: 2.2cqi; display: block; }
.mitteilung p { display: grid; grid-template-columns: 1fr auto; gap: 0 2cqi; }
.mitteilung strong { font-weight: 600; }
.mitteilung small { font-size: 2.9cqi; color: #6C6C70; }
.mitteilung p > span { grid-column: 1 / -1; }

/* Echtes mittleres Widget aus der App, die Ecken sind durchsichtig */
.widget {
  position: absolute;
  right: 0; top: 40%;
  width: min(56%, 17.5rem);
  filter: drop-shadow(0 12px 28px rgb(0 0 0 / 0.22));
}
.widget img { display: block; width: 100%; height: auto; }
@media (max-width: 30rem) { .widget { position: relative; width: 100%; max-width: 22rem; margin-top: 1.5rem; } .melden-szene { flex-direction: column; align-items: center; } }

/* ---------- Deine Daten ---------- */

.daten-raster { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) { .daten-raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 4rem; } }
.merkmale-zwei { margin-top: 0; }
@media (min-width: 44rem) { .merkmale-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; } }
.gpx { margin: 0; border-radius: 1rem; background: var(--nacht); color: #D6E2EA; overflow: hidden; box-shadow: var(--schatten); }
.gpx figcaption { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid rgb(255 255 255 / 0.1); font-family: var(--schrift-werte); font-weight: 600; color: #FFFFFF; }
.gpx figcaption svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--abendglut); stroke-width: 1.7; stroke-linejoin: round; }
.gpx pre { margin: 0; padding: 1rem 1.1rem 1.2rem; overflow-x: auto; font-size: 0.82rem; line-height: 1.6; }
.gpx code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* Sitze einlesen: Musterdatei als Tabelle, wie sie in Excel oder Numbers aussieht */
.einlesen { margin-top: clamp(3rem, 7vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--linie); display: grid; gap: 2rem; scroll-margin-top: 5rem; }
.einlesen-text { max-width: 44rem; }
.einlesen-text p { color: var(--text-leise); }
.einlesen-text h3 { font-size: clamp(1.35rem, 2.4vw, 1.6rem); }
.knopf-datei { gap: 0.6rem; margin-top: 0.4rem; }
.knopf-datei svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.einlesen-weg { font-size: 0.92rem; margin-top: 1rem; }
.tabelle-muster { margin: 0; min-width: 0; border-radius: 1rem; background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten); overflow: hidden; }
.tabelle-muster figcaption { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--linie); background: var(--flaeche); font-family: var(--schrift-werte); font-weight: 600; }
.tabelle-muster figcaption svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--gruen); stroke-width: 1.7; stroke-linejoin: round; }
.tabelle-rahmen { overflow-x: auto; }
.tabelle-rahmen:focus-visible { outline-offset: -3px; }
.tabelle-muster table { border-collapse: collapse; font-family: var(--schrift-app); font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 100%; }
.tabelle-muster th, .tabelle-muster td { border: 1px solid var(--linie); padding: 0.4rem 0.65rem; text-align: left; }
.tabelle-muster thead th { background: var(--flaeche); font-weight: 600; vertical-align: bottom; }
.tabelle-muster tbody th, .tabelle-muster .ecke { background: var(--flaeche); color: var(--text-leise); font-weight: 400; text-align: center; width: 2rem; }
.tabelle-muster tr > :first-child { border-left: 0; }
.tabelle-muster tr > :last-child { border-right: 0; }
.tabelle-muster tbody tr:last-child > * { border-bottom: 0; }
.spalte-buchstabe { display: block; font-weight: 400; font-size: 0.72rem; color: var(--text-leise); margin-bottom: 0.15rem; }
.spalten { margin: 0; display: grid; gap: 1rem 2.5rem; }
@media (min-width: 44rem) { .spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spalten dt { font-weight: 600; }
.spalten dd { margin: 0.15rem 0 0; color: var(--text-leise); }

.nicht-drin { margin-top: clamp(3rem, 7vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--linie); }
.nicht-drin ul { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1rem 2.5rem; }
@media (min-width: 52rem) { .nicht-drin ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nicht-drin li { color: var(--text-leise); }
.nicht-drin strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 0.2rem; }

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

.preise-abschnitt {
  background:
    url("bilder/revier-hell.svg") center / 140% auto no-repeat,
    var(--flaeche);
  background-blend-mode: luminosity, normal;
  position: relative;
  isolation: isolate;
}
.preise-abschnitt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--flaeche) 88%, transparent); }
@media (prefers-color-scheme: dark) { .preise-abschnitt { background-image: url("bilder/revier-dunkel.svg"); } }
.preise-abschnitt > .rahmen { position: relative; }
.preise { display: grid; margin: 0; border-radius: 1.4rem; background: var(--karte); box-shadow: var(--schatten); overflow: hidden; }
@media (min-width: 46rem) { .preise { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.preise > div { padding: 1.8rem 1.8rem 2rem; }
.preise > div + div { border-top: 1px solid var(--linie); }
@media (min-width: 46rem) { .preise > div + div { border-top: 0; border-left: 1px solid var(--linie); } }
.preise dt { font-family: var(--schrift-werte); font-weight: 600; font-size: 1.05rem; color: var(--text-leise); }
.preise dd { margin: 0.3rem 0 0; }
.preis { display: block; font-family: var(--schrift-titel); font-size: clamp(2.2rem, 4vw, 2.9rem); font-weight: 650; line-height: 1.1; font-variant-numeric: lining-nums; }
.preise small { display: block; margin-top: 0.4rem; color: var(--text-leise); font-size: 0.95rem; }
.preis-jahr { box-shadow: inset 0 4px 0 var(--abendglut); }
.preis-jahr dt { color: var(--text); }
.preise-fuss { margin-top: 1.2rem; color: var(--text-leise); font-size: 0.95rem; }

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

.fragen-raster { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 60rem) { .fragen-raster { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 4.5rem; } }
.fragen-bild { margin: 0; }
.fragen-bild img { border-radius: 1.4rem; box-shadow: var(--schatten); width: 100%; }
.fragen-bild figcaption { margin-top: 0.7rem; color: var(--text-leise); font-size: 0.88rem; }
@media (min-width: 60rem) { .fragen-bild { position: sticky; top: 2rem; } }
.fragen details { border-top: 1px solid var(--linie); }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1.05rem 0;
  font-weight: 600; font-size: 1.12rem;
  cursor: pointer; list-style: none;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; flex: none; width: 0.65rem; height: 0.65rem;
  border-right: 2px solid var(--text-leise); border-bottom: 2px solid var(--text-leise);
  rotate: 45deg; translate: 0 -0.15rem;
  transition: rotate 0.25s ease, translate 0.25s ease;
}
.fragen details[open] summary::after { rotate: 225deg; translate: 0 0.15rem; }
.fragen details p { margin: 0 0 1.2rem; color: var(--text-leise); max-width: 40rem; }

/* ---------- Schluss ---------- */

.schluss { position: relative; isolation: isolate; overflow: clip; background: #1E1A14; color: #FFFFFF; }
.schluss-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; }
.schluss::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 70% at 18% 45%, rgb(20 16 10 / 0.6), rgb(20 16 10 / 0) 75%),
    linear-gradient(90deg, rgb(20 16 10 / 0.82) 0%, rgb(20 16 10 / 0.55) 45%, rgb(20 16 10 / 0.12) 100%);
}
.schluss h2, .schluss p { text-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 0 20px rgb(0 0 0 / 0.45); }
.schluss-inhalt { padding-block: clamp(5rem, 11vw, 8.5rem); }
.schluss h2 { color: #FFFFFF; max-width: 16ch; }
.schluss p { color: #EDE5DA; font-size: 1.15rem; max-width: 32rem; }
.schluss-knoepfe { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.8rem; }
.knopf {
  display: inline-flex; align-items: center;
  padding: 0.85rem 1.5rem; border-radius: 99px;
  background: var(--abendglut); color: #1A1209;
  font-weight: 600; text-decoration: none;
}
.knopf:hover { background: #F0B66E; }
.bald-klein { padding: 0.55rem 1.1rem 0.55rem 0.85rem; }
.schluss .bald { background: rgb(0 0 0 / 0.25); }

/* ---------- Fuß ---------- */

.fuss { background: var(--nacht-tief); color: #9FB0BC; padding-block: 2.5rem 3rem; font-size: 0.92rem; }
.fuss .rahmen { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: baseline; }
.fuss p { margin: 0; }
.fuss ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.fuss a { color: #D4E0E8; }
.fuss-klein { flex-basis: 100%; display: grid; gap: 0.3rem; font-size: 0.8rem; color: #7F909C; }

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

.textseite { padding-block: clamp(3rem, 7vw, 5rem); }
.textseite .rahmen { max-width: 46rem; }
.textseite h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); }
.textseite h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.textseite h3 { margin-top: 1.5rem; }
.textseite p, .textseite li { color: var(--text-leise); }
.textseite .einleitung { font-size: 1.15rem; color: var(--text); }
.stand { font-size: 0.92rem; }
.entwurf { padding: 1rem 1.2rem; border-radius: 0.9rem; background: color-mix(in srgb, var(--abendglut) 18%, var(--karte)); border: 1px solid color-mix(in srgb, var(--abendglut) 50%, transparent); margin-bottom: 2rem; }
.entwurf p { margin: 0; color: var(--text); }
.textseite ul { padding-left: 1.3rem; }
.textseite li + li { margin-top: 0.25rem; }
.textseite section { scroll-margin-top: 5rem; }
/* Widerspruchsrecht: hervorgehoben statt in Versalien (schlecht lesbar, für Screenreader teils problematisch) */
.textseite .hervorgehoben { border-left: 3px solid var(--abendglut); background: color-mix(in srgb, var(--abendglut) 12%, transparent); padding: 0.75rem 1rem; color: var(--text); font-weight: 600; }
.textseite .widerspruch { margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: 0.9rem; background: var(--flaeche); }
.textseite .widerspruch h3 { margin-top: 0; }
.textseite .widerspruch p { margin-bottom: 0; }
.textseite .widerspruch .widerspruch-klein { margin-top: 1rem; font-size: 0.88rem; }
/* Bis Matomo antwortet, nichts zeigen, was gleich umspringt; ohne JavaScript gilt der Hinweis „nicht aktiv“ */
.js .widerspruch:not(.bereit) .widerspruch-inhalt { visibility: hidden; }
.knopf-zweit {
  display: inline-flex; align-items: center; margin-top: 0.9rem;
  padding: 0.7rem 1.3rem; border-radius: 99px; border: 1.5px solid var(--text-leise);
  background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.knopf-zweit:hover { border-color: var(--text); }
.offen { background: color-mix(in srgb, var(--abendglut) 30%, transparent); color: var(--text); padding: 0 0.2em; border-radius: 0.2em; }

/* ---------- Ruhige Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  .iphone, .foto-fahne, .mk-pfeil, .rk-pfeil, .rk-fahne, .ampel-punkt, .ampel-wort, .heute-stunden li { transition: none; }
  .duft-teilchen circle { animation: none; opacity: 0; }
  .pause { display: none; }
}