/* L'ÉLU – gemeinsame Seite aller drei Apps ("Drei Akte").
   Eigenständige statische Seite: keine Abhängigkeiten, keine Cookies, Schriften vom eigenen Server. */

:root {
  --nacht: #15110e;
  --kohle: #2d2926;
  --creme: #faf8f5;
  --leinen: #f1ebe3;
  --gold: #c5a059;
  --gold-hell: #e6d3a3;
  --salbei: #4a6b5b;
  --salbei-hell: #a9c4b5;
  --zitrone: #e4cb62;
  --olive: #66672c;
  --blush: #e8b4b8;
  --tinte: #2d2926;
  --tinte-leise: #6d655e;
  --linie: rgba(45, 41, 38, 0.16);
  --linie-hell: rgba(250, 248, 245, 0.18);
  --serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --breite: 1180px;
  --rand: clamp(20px, 5vw, 56px);
  --leiste: 56px;
  --kurve: cubic-bezier(0.22, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; overflow-x: clip; }
main { overflow-x: clip; }
body {
  margin: 0;
  background: var(--nacht);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--leiste);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--creme); color: var(--tinte); padding: 10px 16px; border-radius: 8px; }
.sprung:focus { top: 12px; }

.innen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }

/* Schrift */
.gross {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.mittel {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1.12;
  text-wrap: balance;
}
.klein-titel { font-family: var(--serif); font-weight: 600; font-size: 1.32rem; line-height: 1.2; }
.vortext { font-size: clamp(1rem, 1.25vw, 1.12rem); color: var(--tinte-leise); max-width: 60ch; }
.marke-akt { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--akzent-text, var(--gold)); }
.hinweis { font-size: 0.8rem; color: var(--tinte-leise); line-height: 1.5; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px;
  border-radius: 999px; border: 1px solid transparent;
  background: var(--gold); color: #1c1611;
  font-weight: 600; font-size: 0.95rem; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: transform 0.25s var(--kurve), background-color 0.25s, box-shadow 0.25s;
}
.knopf:hover { background: var(--gold-hell); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(197, 160, 89, 0.9); }
.knopf:active { transform: translateY(0); }
.knopf--dunkel { background: var(--kohle); color: var(--creme); }
.knopf--dunkel:hover { background: #46403b; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.7); }
.knopf--linie { background: transparent; border-color: currentColor; color: inherit; }
.knopf--linie:hover { background: rgba(197, 160, 89, 0.14); box-shadow: none; }
.knopf--klein { min-height: 42px; padding: 9px 18px; font-size: 0.85rem; }
.textlink { font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.textlink:hover { text-decoration-color: var(--gold); }

/* Kopfzeile */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px var(--rand);
  color: var(--creme);
  transition: background-color 0.4s, backdrop-filter 0.4s, padding 0.4s;
}
.kopf.ist-fest { background: rgba(21, 17, 14, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-block: 9px; }
.wortmarke { font-family: var(--serif); font-size: 1.55rem; font-weight: 500; letter-spacing: 0.08em; text-decoration: none; line-height: 1; }
.wortmarke small { display: block; font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.34em; font-weight: 500; opacity: 0.7; margin-top: 4px; text-transform: uppercase; }
.kopf nav { display: none; }
.kopf nav a { text-decoration: none; font-size: 0.86rem; font-weight: 500; opacity: 0.82; padding: 8px 2px; transition: opacity 0.2s; }
.kopf nav a:hover { opacity: 1; }
@media (min-width: 900px) {
  .kopf nav { display: flex; gap: 30px; }
}

/* ───────────── Vorspann ───────────── */
.vorspann {
  position: relative;
  min-height: 100svh;
  background: var(--nacht);
  color: var(--creme);
  display: grid;
  align-items: center;
  padding: 96px 0 40px;
  overflow: hidden;
}
.vorspann::before, .vorspann::after {
  /* Kinobalken, fahren beim Laden auf */
  content: ''; position: absolute; left: 0; right: 0; height: 50%; background: #000; z-index: 6;
  animation: balken 1.5s var(--kurve) 0.25s forwards;
  pointer-events: none;
}
.vorspann::before { top: 0; transform-origin: top; }
.vorspann::after { bottom: 0; transform-origin: bottom; }
@keyframes balken { to { transform: scaleY(0); } }

.vorspann-raster { display: grid; gap: 34px; }
.vorspann-text > * { opacity: 0; transform: translateY(22px); animation: steigen 1s var(--kurve) forwards; }
.vorspann-text > :nth-child(1) { animation-delay: 0.9s; }
.vorspann-text > :nth-child(2) { animation-delay: 1.02s; }
.vorspann-text > :nth-child(3) { animation-delay: 1.16s; }
.vorspann-text > :nth-child(4) { animation-delay: 1.3s; }
.vorspann-text > :nth-child(5) { animation-delay: 1.44s; }
@keyframes steigen { to { opacity: 1; transform: none; } }

.vorspann-haus { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--gold-hell); }
.vorspann h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.5rem, 5.3vw, 4.7rem);
  line-height: 1; letter-spacing: -0.02em;
  margin: 14px 0 22px;
  text-wrap: balance;
}
.vorspann h1 span { display: block; }
.vorspann h1 .zweite { font-style: italic; padding-left: clamp(0px, 4vw, 64px); color: var(--gold-hell); }
.vorspann-lead { color: rgba(250, 248, 245, 0.78); max-width: 54ch; font-size: clamp(1rem, 1.2vw, 1.1rem); }

.rollenwahl { margin-top: 30px; border: 0; padding: 0; min-width: 0; }
.rollenwahl legend { font-family: var(--serif); font-style: italic; font-size: 1.25rem; padding: 0; margin-bottom: 12px; color: var(--creme); }
.rollen { display: flex; flex-wrap: wrap; gap: 10px; }
.rolle {
  min-height: 50px; padding: 12px 20px; border-radius: 999px;
  background: rgba(250, 248, 245, 0.06); border: 1px solid var(--linie-hell); color: var(--creme);
  font-weight: 500; font-size: 0.92rem; cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--kurve);
}
.rolle:hover { border-color: var(--gold); transform: translateY(-2px); }
.rolle[aria-pressed='true'] { background: var(--gold); border-color: var(--gold); color: #1c1611; }

.zusagen { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 28px; font-size: 0.84rem; color: rgba(250, 248, 245, 0.72); }
.zusagen li { display: flex; align-items: center; gap: 9px; }
.zusagen li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }

/* Drei Bildtafeln */
.tafeln { display: flex; gap: 8px; height: min(52svh, 430px); opacity: 0; animation: steigen 1.3s var(--kurve) 0.7s forwards; transform: translateY(22px); }
.tafel {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 4px;
  text-decoration: none; color: var(--creme);
  transition: flex-grow 0.8s var(--kurve);
}
.tafel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); animation: schwenk 22s ease-in-out infinite alternate; filter: saturate(0.92) brightness(0.86); transition: filter 0.6s; }
.tafel:nth-child(2) img { animation-delay: -7s; }
.tafel:nth-child(3) img { animation-delay: -14s; }
@keyframes schwenk { from { transform: scale(1.12) translate3d(-1.5%, 1%, 0); } to { transform: scale(1.2) translate3d(1.5%, -1.5%, 0); } }
.tafel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 9, 7, 0.88) 0%, rgba(12, 9, 7, 0.1) 52%, rgba(12, 9, 7, 0.28) 100%); }
.tafel-text { position: absolute; left: 14px; right: 10px; bottom: 14px; z-index: 2; }
.tafel-akt { font-family: var(--serif); font-style: italic; font-size: 0.98rem; color: var(--gold-hell); display: block; }
.tafel-name { font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.9rem); line-height: 1.05; display: block; }
.tafel-wer { display: none; font-size: 0.8rem; opacity: 0.8; margin-top: 6px; }
.tafel:hover, .tafel:focus-visible { flex-grow: 1.9; }
.tafel:hover img, .tafel:focus-visible img { filter: saturate(1) brightness(1); }

@media (min-width: 960px) {
  .vorspann { padding: 110px 0 60px; }
  .vorspann-raster { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.92fr); gap: 64px; align-items: center; }
  .vorspann h1 span { white-space: nowrap; }
  .tafeln { height: min(74svh, 660px); gap: 12px; }
  .tafel:nth-child(1) { margin-top: 56px; }
  .tafel:nth-child(3) { margin-bottom: 56px; }
  .tafel-text { left: 20px; bottom: 22px; }
  .tafel-wer { display: block; }
}

/* Filmkorn auf den dunklen Kinobildern */
.vorspann > .innen, .akt-schrift { position: relative; z-index: 3; }
.vorspann .korn, .akt-buehne .korn {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.13; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* ───────────── Wegweiser ───────────── */
.wegweiser { background: var(--creme); padding: clamp(64px, 10vw, 128px) 0; }
.wegweiser-kopf { display: grid; gap: 14px; margin-bottom: 34px; }
.reiter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.reiter button {
  min-height: 48px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--linie); background: transparent;
  font-weight: 500; font-size: 0.92rem; cursor: pointer; transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.reiter button:hover { border-color: var(--tinte); }
.reiter button[aria-selected='true'] { background: var(--kohle); color: var(--creme); border-color: var(--kohle); }

.empfehlung { display: grid; gap: 0; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -50px rgba(45, 41, 38, 0.55); }
.empfehlung[hidden] { display: none; }
.empfehlung-bild { position: relative; min-height: 230px; }
.empfehlung-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.empfehlung-text { padding: clamp(24px, 4vw, 48px); display: grid; gap: 18px; align-content: center; }
.empfehlung-text p { color: var(--tinte-leise); max-width: 58ch; }
.fakten { display: grid; gap: 10px; }
.fakten li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 0.95rem; }
.fakten li::before { content: ''; width: 9px; height: 15px; margin: 3px 0 0 5px; border: solid var(--haken, var(--gold)); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.empfehlung.wechselt .empfehlung-text > * { animation: steigen 0.6s var(--kurve) both; }
.empfehlung.wechselt .empfehlung-text > :nth-child(2) { animation-delay: 0.05s; }
.empfehlung.wechselt .empfehlung-text > :nth-child(3) { animation-delay: 0.1s; }
.empfehlung.wechselt .empfehlung-text > :nth-child(4) { animation-delay: 0.15s; }
.empfehlung.wechselt .empfehlung-text > :nth-child(5) { animation-delay: 0.2s; }
@media (min-width: 900px) {
  .wegweiser-kopf { grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; }
  .empfehlung { grid-template-columns: 0.82fr 1fr; min-height: 470px; }
}

/* ───────────── Akt-Titel (Kinobild öffnet sich beim Scrollen) ───────────── */
.akt-titel { position: relative; height: 190vh; background: var(--nacht); color: var(--creme); --p: 0; }
.akt-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.akt-bild {
  position: absolute; inset: 0;
  clip-path: inset(calc((1 - var(--p)) * 21vh) calc((1 - var(--p)) * 9vw) round calc((1 - var(--p)) * 6px));
  will-change: clip-path;
}
.akt-bild img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.18 - var(--p) * 0.18)); will-change: transform; }
.akt-bild::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(12, 9, 7, 0.62) 0%, rgba(12, 9, 7, 0.5) 45%, rgba(12, 9, 7, 0.8) 100%); }
.akt-schrift { position: relative; z-index: 2; text-align: center; padding: 0 var(--rand); max-width: 980px; }
.akt-nummer { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.7rem); color: var(--akzent, var(--gold-hell)); letter-spacing: 0.04em; }
.akt-schrift h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(3.4rem, 12vw, 9.5rem); line-height: 0.92; letter-spacing: -0.025em; margin: 6px 0 20px; }
.akt-app { font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.8rem); line-height: 1.25; max-width: 30ch; margin-inline: auto; text-wrap: balance; }
.akt-fuer { margin-top: 22px; font-size: 0.9rem; color: rgba(250, 248, 245, 0.86); max-width: 52ch; margin-inline: auto; }
.akt-schrift { text-shadow: 0 2px 30px rgba(12, 9, 7, 0.7); }
.akt-app, .akt-fuer { opacity: calc(var(--p) * 2.4 - 0.3); transform: translateY(calc((1 - min(1, var(--p) * 2)) * 18px)); }

/* ───────────── Akt-Inhalt ───────────── */
.akt { padding: clamp(64px, 9vw, 120px) 0; background: var(--grund, var(--creme)); color: var(--tinte); }
.akt > .innen > * + * { margin-top: clamp(64px, 9vw, 116px); }
.akt--styled { --grund: #f8f4e7; --akzent: var(--zitrone); --akzent-text: var(--olive); --haken: var(--olive); }
.akt--planner { --grund: #eef1ec; --akzent: var(--salbei); --akzent-text: var(--salbei); --haken: var(--salbei); }
.akt--vite { --grund: var(--nacht); --akzent: var(--blush); --akzent-text: var(--blush); --haken: var(--blush); color: var(--creme); --tinte-leise: rgba(250, 248, 245, 0.7); --linie: var(--linie-hell); }
#akt-1 { --akzent: var(--zitrone); }
#akt-2 { --akzent: var(--salbei-hell); }
#akt-3 { --akzent: var(--blush); }

.abschnitt-kopf { display: grid; gap: 12px; max-width: 760px; margin-bottom: clamp(26px, 4vw, 44px); }

/* Vorher / Mit L'ÉLU */
.wandel { border-top: 1px solid var(--linie); }
.wandel li { display: grid; gap: 10px; padding: 22px 0; border-bottom: 1px solid var(--linie); }
.wandel .vorher { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.3; color: var(--tinte-leise); }
.wandel .nachher { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: 0.98rem; }
.wandel .nachher::before { content: ''; width: 9px; height: 16px; margin: 2px 0 0 7px; border: solid var(--haken); border-width: 0 2px 2px 0; transform: rotate(40deg); }
@media (min-width: 860px) {
  .wandel li { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 26px 0; }
}

/* Probier-Bühnen */
.probe { display: grid; gap: 22px; }
.probe-karte { background: #fff; border-radius: 22px; padding: clamp(22px, 3.4vw, 40px); box-shadow: 0 34px 70px -52px rgba(45, 41, 38, 0.6); display: grid; gap: 18px; align-content: start; }
.akt--vite .probe-karte { background: #211b17; box-shadow: none; border: 1px solid var(--linie-hell); }
.probe-karte > p { color: var(--tinte-leise); font-size: 0.95rem; }
.demo-marke { justify-self: start; font-size: 0.74rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--akzent) 30%, transparent); color: var(--tinte); }
.akt--vite .demo-marke { color: var(--creme); }
@media (min-width: 940px) { .probe--zwei { grid-template-columns: 1fr 1fr; } }

.regler { display: grid; gap: 6px; }
.regler label { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; font-weight: 500; }
.regler output { font-variant-numeric: tabular-nums; font-weight: 600; }
input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; margin: 0; }
input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--spur, var(--gold)) var(--f, 50%), var(--linie) var(--f, 50%)); }
input[type='range']::-moz-range-track { height: 4px; border-radius: 4px; background: var(--linie); }
input[type='range']::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--spur, var(--gold)); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: #fff; border: 2px solid var(--spur, var(--gold)); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); }
input[type='range']::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--spur, var(--gold)); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); }
.akt--styled input[type='range'] { --spur: var(--olive); }
.akt--planner input[type='range'] { --spur: var(--salbei); }
.akt--vite input[type='range'], .zusammen input[type='range'] { --spur: var(--gold); }

.ergebnis { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.ergebnis small { font-family: var(--sans); font-size: 0.9rem; color: var(--tinte-leise); font-weight: 500; }

/* Tischdecken-Zeichnung */
.tisch-bild { width: 100%; height: auto; max-height: 230px; }
.tisch-bild .decke { fill: color-mix(in srgb, var(--zitrone) 38%, #fff); stroke: var(--olive); stroke-width: 1.2; transition: all 0.35s var(--kurve); }
.tisch-bild .platte, .tisch-bild .bein { stroke: var(--tinte); stroke-width: 2; fill: none; transition: all 0.35s var(--kurve); }
.tisch-bild .boden { stroke: var(--linie); stroke-width: 1.5; }
.tisch-bild text { font-family: var(--sans); font-size: 11px; fill: var(--tinte-leise); }

/* Live-Regie */
.regie { display: grid; gap: 14px; }
.regie-jetzt { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; padding: 16px; border-radius: 16px; background: #f8f4e7; }
.regie-ring { position: relative; width: 84px; height: 84px; }
.regie-ring svg { width: 84px; height: 84px; transform: rotate(-90deg); }
.regie-ring circle { fill: none; stroke-width: 5; }
.regie-ring .bahn { stroke: rgba(45, 41, 38, 0.12); }
.regie-ring .lauf { stroke: var(--olive); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke 0.4s; }
.regie-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.regie-jetzt strong { display: block; font-size: 0.98rem; }
.regie-jetzt small { color: var(--tinte-leise); font-size: 0.82rem; }
.regie-status { font-size: 0.82rem; font-weight: 600; padding: 7px 12px; border-radius: 10px; background: color-mix(in srgb, var(--salbei) 16%, #fff); color: var(--salbei); }
.regie-status.verzug { background: #fbeceb; color: #9a3a34; }
.regie-liste li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linie); font-size: 0.9rem; }
.regie-liste time { font-variant-numeric: tabular-nums; font-weight: 600; transition: color 0.3s; }
.regie-liste li.neu time { color: #9a3a34; }
.regie-liste li.warn { color: #9a3a34; }
.regie-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Funktionen + Bildschirm */
.funktionen { display: grid; gap: 34px; align-items: center; }
.funktionsliste { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.funktionsliste li { padding: 16px 0; border-bottom: 1px solid var(--linie); display: grid; gap: 3px; }
.funktionsliste strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.funktionsliste span { font-size: 0.92rem; color: var(--tinte-leise); }
@media (min-width: 980px) { .funktionen { grid-template-columns: 0.72fr 1.28fr; gap: 64px; } .funktionen--gedreht { grid-template-columns: 1.28fr 0.72fr; } .funktionen--gedreht > :first-child { order: 2; } }

.fenster { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 50px 90px -50px rgba(20, 15, 10, 0.7), 0 0 0 1px rgba(45, 41, 38, 0.08); }
.fenster-leiste { display: flex; gap: 6px; padding: 11px 14px; background: #ece7df; }
.fenster-leiste i { width: 9px; height: 9px; border-radius: 50%; background: #cfc7bb; }
.fenster img { width: 100%; }
.geraete { position: relative; padding-bottom: 8%; }
.geraete .handy { position: absolute; right: -2%; bottom: 0; width: 23%; border-radius: 22px; overflow: hidden; border: 6px solid #1c1815; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6); background: #fff; }
.bildzeile { margin-top: 12px; }

/* Bildstreifen Planner */
.streifen { display: grid; gap: 20px; }
.streifen figure { display: grid; gap: 14px; }
.kino { aspect-ratio: 2.39 / 1; overflow: hidden; border-radius: 6px; background: #ddd; }
.kino img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--kurve); }
.streifen figure:hover .kino img { transform: scale(1.05); }
.streifen figcaption strong { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; display: block; line-height: 1.2; }
.streifen figcaption span { font-size: 0.93rem; color: var(--tinte-leise); }
@media (min-width: 860px) { .streifen { grid-template-columns: repeat(3, 1fr); gap: 28px; } .kino { aspect-ratio: 4 / 3; } }

/* Ablauf in drei Schritten (echte Reihenfolge) */
.schritte { display: grid; gap: 26px; counter-reset: schritt; }
.schritte li { counter-increment: schritt; padding-top: 18px; border-top: 2px solid var(--akzent); display: grid; gap: 8px; align-content: start; }
.schritte li::before { content: counter(schritt) '.'; font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--akzent-text); line-height: 1; }
.schritte p { font-size: 0.93rem; color: var(--tinte-leise); }
@media (min-width: 860px) { .schritte { grid-template-columns: repeat(3, 1fr); gap: 34px; } }
.schritte--vier li { border-top-color: var(--blush); }
@media (min-width: 860px) { .schritte--vier { grid-template-columns: repeat(4, 1fr); } }

/* Angebot am Akt-Ende */
.angebot { border-radius: 22px; padding: clamp(26px, 4.4vw, 54px); background: var(--kohle); color: var(--creme); display: grid; gap: 22px; }
.angebot p { color: rgba(250, 248, 245, 0.78); max-width: 60ch; }
.angebot .preiszeile { font-family: var(--serif); font-size: 1.3rem; color: var(--creme); }
.akt--vite .angebot { background: #241d19; border: 1px solid var(--linie-hell); }
@media (min-width: 900px) { .angebot { grid-template-columns: 1.2fr auto; align-items: center; gap: 48px; } .angebot .knopfreihe { flex-direction: column; align-items: stretch; } }

/* ───────────── Umschlag ───────────── */
.umschlag-raster { display: grid; gap: 30px; align-items: center; }
@media (min-width: 960px) { .umschlag-raster { grid-template-columns: 0.85fr 1.15fr; gap: 60px; } }
.feld { display: grid; gap: 7px; }
.feld label { font-size: 0.86rem; font-weight: 500; color: var(--tinte-leise); }
.feld input[type='text'] { min-height: 52px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--linie-hell); background: rgba(250, 248, 245, 0.06); color: var(--creme); font-size: 1rem; }
.feld input[type='text']::placeholder { color: rgba(250, 248, 245, 0.4); }
.gaesteliste { border-top: 1px solid var(--linie-hell); font-size: 0.9rem; }
.gaesteliste li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linie-hell); }
.gaesteliste em { font-style: normal; color: var(--tinte-leise); }
.gaesteliste .frisch { animation: frisch 2.2s ease-out; }
@keyframes frisch { 0% { background: rgba(232, 180, 184, 0.35); } 100% { background: transparent; } }
.marke-status { font-size: 0.76rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(169, 196, 181, 0.2); color: var(--salbei-hell); white-space: nowrap; }
.marke-status.offen { background: rgba(250, 248, 245, 0.1); color: rgba(250, 248, 245, 0.7); }
.marke-status.absage { background: rgba(232, 180, 184, 0.18); color: var(--blush); }

.buehne { position: relative; display: grid; justify-items: center; padding: 200px 0 30px; perspective: 1400px; }
.buehne::before { content: ''; position: absolute; left: 50%; bottom: 0; width: 120%; height: 70%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 70%, rgba(197, 160, 89, 0.2), transparent 62%); pointer-events: none; }
.umschlag { position: relative; width: min(100%, 430px); aspect-ratio: 43 / 29; }
.umschlag-rueck { position: absolute; inset: 0; border-radius: 8px; background: #e9dfd0; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.75); }
.umschlag-karte {
  position: absolute; left: 5%; right: 5%; top: 5%; height: 90%;
  --tinte: #2d2926; --tinte-leise: #6d6259;
  background: linear-gradient(160deg, #fffdf9, #f6efe4); border-radius: 6px; color: var(--tinte);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.5);
  display: grid; align-content: center; justify-items: center; text-align: center; gap: 5px; padding: 5% 7%;
  transform: translateY(0); transition: transform 1.2s var(--kurve) 0.75s;
  z-index: 1;
}
.umschlag-karte::before { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(197, 160, 89, 0.6); border-radius: 3px; pointer-events: none; }
.karte-anrede { font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--tinte-leise); }
.karte-namen { font-family: var(--serif); font-size: clamp(1.7rem, 6vw, 2.3rem); line-height: 1; font-weight: 500; }
.karte-zeile { font-size: 0.78rem; color: var(--tinte-leise); line-height: 1.45; }
.karte-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 8px; position: relative; z-index: 2; }
.karte-knoepfe .karte-danke { grid-column: 1 / -1; }
.karte-knoepfe button { min-height: 44px; padding: 6px 8px; border-radius: 999px; border: 1px solid var(--kohle); background: var(--kohle); color: var(--creme); font-weight: 600; font-size: 0.8rem; line-height: 1.15; cursor: pointer; transition: background-color 0.2s, transform 0.2s; }
.karte-knoepfe button + button { background: transparent; color: var(--tinte); }
.karte-knoepfe button:hover { transform: translateY(-1px); }
.karte-danke { font-family: var(--serif); font-style: italic; font-size: 1.15rem; margin-top: 10px; }
.umschlag-tasche { position: absolute; inset: 0; border-radius: 8px; z-index: 2; background: linear-gradient(170deg, #f4ecdf, #e6dac8); clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.umschlag-tasche::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(120, 96, 60, 0.16), transparent 55%); }
.umschlag-klappe { position: absolute; inset: 0 0 auto 0; height: 60%; z-index: 4; transform: perspective(1100px) rotateX(0deg); transform-origin: top center; transition: transform 0.95s var(--kurve) 0.15s, z-index 0s 0.55s; filter: drop-shadow(0 6px 8px rgba(60, 40, 20, 0.28)); }
.umschlag-klappe i { position: absolute; inset: 0; background: linear-gradient(180deg, #f7f0e4, #ebe0cf); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 8px 8px 0 0; }
.umschlag-name { position: absolute; left: 0; right: 0; bottom: 9%; z-index: 3; text-align: center; font-family: 'Alex Brush', var(--serif); font-size: clamp(1.4rem, 5vw, 2rem); color: #6a5a45; line-height: 1; padding: 0 8%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: opacity 0.4s; }
.siegel {
  position: absolute; left: 50%; top: 58%; z-index: 5; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 34% 30%, #f3dc9c 0%, #d2ac5c 38%, #a07a2e 100%);
  box-shadow: inset 0 0 0 5px rgba(160, 122, 46, 0.55), inset 0 -6px 12px rgba(90, 62, 12, 0.5), 0 8px 16px -4px rgba(0, 0, 0, 0.5);
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: #6e4f12; letter-spacing: 0.02em;
  transition: transform 0.5s var(--kurve), opacity 0.45s;
}
.siegel::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(230, 211, 163, 0.7); animation: puls 2.4s ease-out infinite; }
@keyframes puls { 0% { transform: scale(0.86); opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } }
.siegel:hover { transform: scale(1.07) rotate(-4deg); }
.siegel-hinweis { margin-top: 20px; font-size: 0.86rem; color: var(--tinte-leise); text-align: center; min-height: 1.5em; }

.umschlag.offen .siegel { transform: scale(1.5) rotate(18deg); opacity: 0; pointer-events: none; }
.umschlag.offen .umschlag-klappe { transform: perspective(1100px) rotateX(178deg); z-index: 0; }
.umschlag.offen .umschlag-karte { transform: translateY(-78%); }
.umschlag.offen .umschlag-name { opacity: 0; }
.umschlag.heraus .umschlag-karte { z-index: 6; transform: translateY(-58%) scale(1.04); transition: transform 0.8s var(--kurve); box-shadow: 0 34px 60px -24px rgba(0, 0, 0, 0.75); }

@media (max-width: 520px) {
  .umschlag-karte { top: 2%; height: 96%; gap: 3px; padding: 6% 7% 5%; }
  .karte-anrede { font-size: 1rem; }
  .karte-zeile { font-size: 0.72rem; line-height: 1.35; }
  .karte-knoepfe { margin-top: 5px; }
  .karte-knoepfe button { min-height: 42px; }
}

/* Fotowall */
.fotowand { display: grid; gap: 30px; align-items: center; }
.fotowand .kino { aspect-ratio: 3 / 2; border-radius: 10px; }
@media (min-width: 960px) { .fotowand { grid-template-columns: 1fr 1fr; gap: 60px; } }

/* Bildschirm-Wechsler */
.wechsler-reiter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.wechsler-reiter button { min-height: 44px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--linie-hell); background: transparent; color: var(--creme); font-size: 0.86rem; font-weight: 500; cursor: pointer; }
.wechsler-reiter button[aria-selected='true'] { background: var(--blush); color: #2b1c1d; border-color: var(--blush); }
.wechsler-bild { position: relative; }
.wechsler-bild img { transition: opacity 0.5s; }
.wechsler-bild img[hidden] { display: block; position: absolute; inset: 0; opacity: 0; pointer-events: none; }

/* ───────────── Zusammenspiel ───────────── */
.zusammen { background: var(--kohle); color: var(--creme); padding: clamp(72px, 10vw, 140px) 0; --tinte-leise: rgba(250, 248, 245, 0.72); --linie: var(--linie-hell); }
.zusammen .innen > * + * { margin-top: clamp(40px, 6vw, 72px); }
.kette { display: grid; gap: 0; }
.kette-app { border: 1px solid var(--linie-hell); border-radius: 18px; padding: 24px; display: grid; gap: 6px; background: rgba(250, 248, 245, 0.03); }
.kette-app b { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; line-height: 1.1; }
.kette-app span { font-size: 0.88rem; color: var(--tinte-leise); }
.kette-app i { font-family: var(--serif); font-size: 1rem; }
.kette-band { position: relative; padding: 18px 0 18px 34px; margin-left: 30px; border-left: 1px dashed var(--gold); display: grid; gap: 10px; font-size: 0.92rem; }
.kette-band p { position: relative; }
.kette-band p::before { content: ''; position: absolute; left: -39px; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
@media (min-width: 980px) {
  .kette { grid-template-columns: 1fr 0.9fr 1fr 0.9fr 1fr; align-items: center; }
  .kette-band { margin: 0; padding: 26px 18px 0; border-left: 0; border-top: 1px dashed var(--gold); text-align: center; align-self: center; }
  .kette-band p::before { left: 50%; top: -31px; margin-left: -4px; }
  .kette-band p + p::before { display: none; }
}
.provision { display: grid; gap: 26px; border-top: 1px solid var(--linie-hell); padding-top: clamp(34px, 5vw, 56px); }
.provision select { min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linie-hell); background: #37322e; color: var(--creme); width: 100%; }
.provision .ergebnis { color: var(--gold-hell); }
@media (min-width: 900px) { .provision { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } }

/* ───────────── Preise ───────────── */
.preise { background: var(--creme); padding: clamp(72px, 10vw, 140px) 0; }
.gruender { display: grid; gap: 6px; padding: 18px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--gold); margin-bottom: 34px; }
.gruender strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.gruender span { font-size: 0.92rem; color: var(--tinte-leise); }
.gruender em { font-style: italic; color: #8a6a22; white-space: nowrap; }
@media (min-width: 800px) { .gruender { grid-template-columns: auto 1fr; gap: 24px; align-items: center; } }
.preis-reiter { display: flex; gap: 8px; margin-bottom: 20px; }
.preis-reiter button { flex: 1; min-height: 48px; border-radius: 999px; border: 1px solid var(--linie); background: transparent; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.preis-reiter button[aria-selected='true'] { background: var(--kohle); color: var(--creme); border-color: var(--kohle); }
.preis-spalten { display: grid; gap: 22px; }
.preis-app { background: #fff; border-radius: 22px; padding: clamp(22px, 2.6vw, 32px); display: grid; gap: 18px; align-content: start; border-top: 5px solid var(--farbe); box-shadow: 0 34px 70px -56px rgba(45, 41, 38, 0.6); }
.preis-app--styled { --farbe: var(--zitrone); }
.preis-app--planner { --farbe: var(--salbei); }
.preis-app--vite { --farbe: var(--blush); }
.preis-app header { display: grid; gap: 4px; }
.preis-app header b { font-family: var(--serif); font-size: 1.8rem; font-weight: 500; line-height: 1.1; }
.preis-app header span { font-size: 0.86rem; color: var(--tinte-leise); }
.steuer { justify-self: start; font-size: 0.76rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--leinen); }
.tarife { display: grid; }
.tarife li { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 15px 0; border-top: 1px solid var(--linie); align-items: baseline; }
.tarife li.empfohlen { background: linear-gradient(to right, color-mix(in srgb, var(--farbe) 22%, transparent), transparent); margin-inline: -14px; padding-inline: 14px; border-radius: 10px; border-top-color: transparent; }
.tarife li.empfohlen + li { border-top-color: transparent; }
.tarif-name { font-weight: 600; }
.tarif-name em { font-style: normal; font-size: 0.72rem; font-weight: 600; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--kohle); color: var(--creme); white-space: nowrap; }
.tarif-preis { font-family: var(--serif); font-size: 1.65rem; font-weight: 600; line-height: 1; white-space: nowrap; text-align: right; }
.tarif-preis s { font-family: var(--sans); font-size: 0.8rem; font-weight: 400; color: var(--tinte-leise); margin-right: 6px; }
.tarif-text { grid-column: 1 / -1; font-size: 0.86rem; color: var(--tinte-leise); }
.preis-app .knopf { width: 100%; }
@media (max-width: 979px) { .preis-app[hidden] { display: none; } }
@media (min-width: 980px) {
  .preis-reiter { display: none; }
  .preis-spalten { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .preis-app[hidden] { display: grid; }
}

/* ───────────── Vertrauen ───────────── */
.vertrauen { background: var(--leinen); padding: clamp(72px, 10vw, 140px) 0; }
.vertrauen .innen > * + * { margin-top: clamp(48px, 7vw, 88px); }
.gruenderin { display: grid; gap: 30px; align-items: center; }
.gruenderin figure { justify-self: start; width: min(64%, 300px); }
.gruenderin figure img { border-radius: 160px 160px 12px 12px; aspect-ratio: 2 / 3; object-fit: cover; }
.gruenderin figcaption { font-size: 0.72rem; color: var(--tinte-leise); margin-top: 8px; }
.gruenderin blockquote { margin: 0; display: grid; gap: 20px; }
.gruenderin blockquote p { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.35rem); line-height: 1.22; text-wrap: pretty; }
.gruenderin cite { font-style: normal; font-size: 0.92rem; color: var(--tinte-leise); }
.gruenderin cite b { font-family: 'Alex Brush', var(--serif); font-weight: 400; font-size: 2rem; color: var(--tinte); display: block; line-height: 1.1; }
@media (min-width: 900px) { .gruenderin { grid-template-columns: 300px 1fr; gap: 72px; } .gruenderin figure { width: 100%; } }
.ehrlich { border-left: 3px solid var(--gold); padding: 6px 0 6px 24px; display: grid; gap: 10px; max-width: 780px; }
.ehrlich p { color: var(--tinte-leise); }
.belege { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.belege li { padding: 20px 0; border-bottom: 1px solid var(--linie); display: grid; gap: 4px; }
.belege strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.belege span { font-size: 0.92rem; color: var(--tinte-leise); }
@media (min-width: 860px) { .belege { grid-template-columns: 1fr 1fr; column-gap: 56px; } }

/* ───────────── Fragen ───────────── */
.fragen { background: var(--creme); padding: clamp(72px, 10vw, 140px) 0; }
.fragen-raster { display: grid; gap: 30px; }
@media (min-width: 960px) { .fragen-raster { grid-template-columns: 0.7fr 1.3fr; gap: 72px; } .fragen-raster > :first-child { position: sticky; top: 100px; align-self: start; } }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen details:first-of-type { border-top: 1px solid var(--linie); }
.fragen summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr 24px; gap: 16px; align-items: center; padding: 20px 0; font-family: var(--serif); font-size: 1.32rem; font-weight: 600; line-height: 1.25; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ''; width: 12px; height: 12px; border: solid var(--tinte); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform 0.3s var(--kurve); justify-self: center; margin-top: -6px; }
.fragen details[open] summary::after { transform: rotate(-135deg); margin-top: 6px; }
.fragen details p { padding: 0 0 22px; color: var(--tinte-leise); max-width: 66ch; }
.fragen details p + p { margin-top: -10px; }

/* ───────────── Abspann ───────────── */
.abspann { background: var(--nacht); color: var(--creme); padding: clamp(80px, 12vw, 160px) 0 60px; text-align: center; }
.abspann h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.5rem, 7vw, 5.4rem); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.abspann > .innen > p { color: rgba(250, 248, 245, 0.74); max-width: 54ch; margin: 22px auto 0; }
.tueren { display: grid; gap: 14px; margin-top: 48px; text-align: left; }
.tuer { position: relative; display: grid; align-content: end; gap: 6px; min-height: 270px; padding: 24px; border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--creme); isolation: isolate; }
.tuer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--kurve); }
.tuer::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(12, 9, 7, 0.92), rgba(12, 9, 7, 0.2) 70%); }
.tuer:hover img { transform: scale(1.07); }
.tuer i { font-family: var(--serif); font-size: 1rem; color: var(--gold-hell); }
.tuer b { font-family: var(--serif); font-weight: 500; font-size: 1.8rem; line-height: 1.05; }
.tuer span { font-size: 0.88rem; opacity: 0.84; }
.tuer u { text-decoration: none; margin-top: 12px; display: inline-flex; justify-self: start; padding: 10px 18px; border-radius: 999px; background: var(--gold); color: #1c1611; font-weight: 600; font-size: 0.86rem; transition: background-color 0.25s; }
.tuer:hover u { background: var(--gold-hell); }
@media (min-width: 860px) { .tueren { grid-template-columns: repeat(3, 1fr); } .tuer { min-height: 400px; } }
.kontakt { margin-top: 56px; font-size: 0.98rem; }

.nachspann { margin-top: 72px; padding-top: 34px; border-top: 1px solid var(--linie-hell); display: grid; gap: 18px; justify-items: center; font-size: 0.8rem; color: rgba(250, 248, 245, 0.62); }
.nachspann dl { display: grid; gap: 5px 18px; grid-template-columns: auto auto; text-align: left; }
.nachspann dt { text-align: right; font-style: italic; font-family: var(--serif); font-size: 0.95rem; }
.nachspann nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.nachspann button { background: none; border: 0; padding: 6px 0; cursor: pointer; color: inherit; font-size: inherit; text-decoration: underline; text-underline-offset: 4px; }
.nachspann a { text-underline-offset: 4px; padding: 6px 0; }

/* Rechtliches (Dialog) */
dialog { border: 0; border-radius: 18px; padding: 0; width: min(92vw, 720px); max-height: 86vh; color: var(--tinte); background: var(--creme); }
dialog::backdrop { background: rgba(12, 9, 7, 0.7); backdrop-filter: blur(4px); }
.dialog-innen { padding: clamp(22px, 4vw, 40px); display: grid; gap: 14px; font-size: 0.92rem; }
.dialog-innen h2 { font-family: var(--serif); font-size: 1.9rem; font-weight: 500; }
.dialog-innen h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; margin-top: 8px; }
.dialog-zu { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: 12px 12px 0; background: linear-gradient(var(--creme) 70%, transparent); }

/* ───────────── Kapitelleiste (Filmlaufleiste) ───────────── */
.leiste {
  position: fixed; inset: auto 0 0 0; z-index: 60; height: var(--leiste);
  background: rgba(21, 17, 14, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--creme); display: flex; align-items: center; gap: 14px; padding: 0 var(--rand);
  border-top: 1px solid var(--linie-hell);
}
.leiste-lauf { position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--lauf, 0)); }
.leiste-jetzt { flex: 1; min-width: 0; font-family: var(--serif); font-style: italic; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leiste ol { display: none; flex: 1; gap: 4px; }
.leiste ol a { display: block; padding: 8px 12px; border-radius: 999px; text-decoration: none; font-size: 0.8rem; font-weight: 500; opacity: 0.6; white-space: nowrap; transition: opacity 0.25s, background-color 0.25s; }
.leiste ol a:hover { opacity: 1; }
.leiste ol a[aria-current='true'] { opacity: 1; background: rgba(250, 248, 245, 0.1); color: var(--gold-hell); }
.leiste .knopf { flex: none; }
@media (min-width: 1040px) { .leiste-jetzt { display: none; } .leiste ol { display: flex; } }

/* Bilder, die sich wie ein Kinobild öffnen (einmalig beim Erscheinen) */
.oeffnet { clip-path: inset(12% 6% 12% 6%); transition: clip-path 1.3s var(--kurve); }
.oeffnet.sichtbar { clip-path: inset(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .vorspann::before, .vorspann::after { display: none; }
  .akt-titel { height: auto; }
  .akt-buehne { position: relative; }
  .akt-bild { clip-path: none; }
  .akt-bild img { transform: none; }
  .akt-schrift > * { opacity: 1; }
  .oeffnet { clip-path: none; }
  .tafel img { animation: none; transform: scale(1.05); }
}