/* Liza Snow, Vorschlag 3 "Eröffnung" (03.11.2026): Kopie von unique/css/unique.css (Vorschlag 2) plus Block
   "Vorschlag 3" am Ende: zwei Zustände vor und nach der Eröffnung, Umschalter im Entwurf.
   Seiten baut neue-seite/eroeffnung_bauen.py. */

@font-face { font-family: "Cormorant"; src: url("../schriften/cormorant-garamond-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../schriften/cormorant-garamond-latin-wght-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../schriften/figtree-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  color-scheme: only light;
  --papier: #FBFAF9;
  --tinte: #221E23;
  --grau: #6A6369;
  --rosa: #C4466F;          /* Altrosa der Marke, nur für feine Akzente */
  --rosa-tief: #A83A5E;
  --hauch: #F6E9ED;
  --linie: #E4DDE0;
  --rand: clamp(22px, 5.5vw, 80px);
  --breit: 1320px;
  --ecke: 10px;   /* leicht abgerundete Bildecken (Lukas 07.11.2026, vorher 2px) */
  --weich: cubic-bezier(0.25, 1, 0.5, 1);
  --kopf-h: 68px;
  --serif: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --sans: "Figtree", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 12px); }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 300 18px/1.7 var(--sans); letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--hauch); color: var(--tinte); }
:focus-visible { outline: 1px solid var(--rosa); outline-offset: 4px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 300; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h2 { font-size: clamp(40px, 6.2vw, 84px); line-height: 1.04; }
h3 { font-size: clamp(25px, 2.4vw, 32px); line-height: 1.2; font-weight: 400; }
p { margin: 0; text-wrap: pretty; }
strong { font-weight: 500; }
.leise { color: var(--grau); }
.klein { font-size: 15px; color: var(--grau); }

/* ---------- Knöpfe: schlank, dünner Rand, füllen sich sanft ---------- */
.knopf {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 30px; border-radius: 999px; border: 1px solid var(--tinte);
  background: var(--tinte); color: var(--papier); font: 400 16px/1 var(--sans); letter-spacing: 0.03em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 180ms var(--weich), background-color 320ms ease, color 320ms ease, border-color 320ms ease;
  user-select: none; -webkit-user-select: none;
}
.knopf:active { transform: scale(0.97); }
.knopf.klein { min-height: 42px; padding: 0 22px; font-size: 15px; }
.knopf.hell { background: transparent; color: var(--tinte); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: var(--rosa); border-color: var(--rosa); color: #fff; }
  .knopf.hell:hover { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
}

/* ---------- Hinweis und Kopf ---------- */
.hinweis { margin: 0; padding: 8px var(--rand); background: var(--tinte); color: #E9E3E6; font-size: 13px; letter-spacing: 0.02em; text-align: center; }
.hinweis a { color: #fff; }
.kopf {
  position: sticky; top: 0; z-index: 20; height: var(--kopf-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--rand); background: rgb(251 250 249 / 0.9);
  backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color 300ms ease;
}
.kopf.gescrollt { border-bottom-color: var(--linie); }
.marke { font: 400 26px/1 var(--serif); letter-spacing: 0.01em; text-decoration: none; }
.marke em { font-style: italic; }
.kopf-rechts { display: flex; align-items: center; gap: 14px; }
.menueknopf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 16px 4px 6px;
  border: 1px solid var(--linie); border-radius: 999px; background: transparent; color: var(--tinte);
  font: 400 15px/1 var(--sans); letter-spacing: 0.03em; cursor: pointer; transition: transform 180ms var(--weich), border-color 300ms ease;
}
.menueknopf:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .menueknopf:hover { border-color: var(--tinte); } }
.stapel { display: inline-flex; }
.stapel img { width: 24px; height: 30px; object-fit: cover; border-radius: 4px; border: 2px solid var(--papier); }
.stapel img + img { margin-left: -11px; }
.stapel img:nth-child(1) { transform: rotate(-5deg); }
.stapel img:nth-child(3) { transform: rotate(5deg); }
.nur-gross { display: none; }
@media (min-width: 760px) { .nur-gross { display: inline-flex; } }

/* ---------- Bildmenü ---------- */
.menue {
  position: fixed; inset: 0; z-index: 40; background: var(--papier);
  display: grid; align-content: center; padding: calc(var(--kopf-h) + 8px) var(--rand) 32px;
  overflow-y: auto; overscroll-behavior: contain;
}
.menue[hidden] { display: none; }
.menue ul { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: var(--breit); display: grid; }
.menue li { border-top: 1px solid var(--linie); }
.menue li:last-child { border-bottom: 1px solid var(--linie); }
.menue a {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); padding: 12px 0; text-decoration: none;
  font: 300 clamp(36px, 6.4vw, 76px)/1.05 var(--serif);
}
.menue a img { width: clamp(46px, 5.6vw, 76px); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; flex: none; }
.menue li { opacity: 0; transform: translateY(14px); }
.menue.offen li { opacity: 1; transform: none; transition: opacity 600ms var(--weich), transform 800ms var(--weich); transition-delay: calc(var(--i) * 60ms); }
@media (hover: hover) and (pointer: fine) {
  .menue a span { transition: transform 500ms var(--weich), color 300ms ease; }
  .menue a:hover span { transform: translateX(10px); font-style: italic; color: var(--rosa); }
}
.menue-zu {
  position: fixed; top: 12px; right: var(--rand); min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--papier); font: 400 15px/1 var(--sans); letter-spacing: 0.03em; cursor: pointer;
}

/* ---------- Einstieg ---------- */
.einstieg { display: grid; gap: 30px; padding: 18px var(--rand) 56px; max-width: var(--breit); margin: 0 auto; }
.einstieg h1 { font-size: clamp(50px, min(13.4vw, 10svh), 128px); line-height: 0.98; font-weight: 300; letter-spacing: -0.02em; }
.einstieg h1 .zeile:last-child { font-style: italic; }
/* Unterlängen (g, j, y in der Kursiven) brauchen Platz: Polster unten und seitlich (die kursive g-Schleife ragt auch
   nach links), Abstand per negativem Rand ausgeglichen. 0.28em war zu knapp (Lukas, 30.10.2026, zweimal "g ist
   abgeschnitten"); gemessen mit szenen/zeilen_pruefen.py, Pixelvergleich mit und ohne Abschneiden. */
.zeile { display: block; overflow: hidden; padding: 0 0.15em 0.5em; margin: 0 -0.15em -0.42em; }
.zeile > span { display: block; }
.einstieg-sub { max-width: 34ch; margin: 18px 0 26px; font-size: clamp(17px, 1.5vw, 20px); color: var(--grau); }
.einstieg-film { margin: 0; order: -1; position: relative; }
.film { width: 100%; height: 100%; object-fit: cover; background: var(--hauch); }
.einstieg-film .film { height: 52svh; min-height: 280px; object-position: 50% 0%; border-radius: var(--ecke); }
.einstieg-film figcaption { display: none; }
/* Platzhalter für Lizas Tanzvideo (Lukas 30.10.2026): Hinweis mittig über dem Foto, bis sie ein Video schickt */
.video-hinweis {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 20px 12px 12px; border-radius: 999px;
  background: rgb(34 30 35 / 0.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font: 400 16px/1.3 var(--sans); letter-spacing: 0.01em; text-wrap: balance;
}
.video-hinweis .abspielen { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--papier); position: relative; }
.video-hinweis .abspielen::after {
  content: ""; position: absolute; left: 16px; top: 12px; border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--tinte);
}
@media (min-width: 900px) {
  .einstieg { grid-template-columns: 1.25fr 0.75fr; align-items: end; min-height: calc(100svh - var(--kopf-h) - 40px); padding-top: 28px; }
  .einstieg h1 { font-size: clamp(64px, min(7.6vw, 15svh), 136px); }
  .einstieg-text { padding-bottom: 6svh; }
  .einstieg-film { order: 0; justify-self: end; width: min(100%, 540px); }
  /* Studio: Unterrichtsfoto ist fast quadratisch, im 9:16 von Vorschlag 3 wäre das Paar seitlich angeschnitten */
  .einstieg-film .film { height: auto; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--kopf-h) - 100px); }
  .einstieg-film figcaption { display: block; position: absolute; left: -1px; bottom: 18px; transform: translateX(-100%) rotate(180deg); writing-mode: vertical-rl; font: italic 400 17px/1 var(--serif); color: var(--grau); padding: 0 14px 0 0; }
}

/* Einmaliger Auftritt beim Laden: der Film öffnet sich langsam, die Zeilen gleiten herein */
.bereit .zeile > span { transform: translateY(165%); }   /* tiefer als das Polster, sonst schaut die Zeile vor dem Auftritt heraus */
.bereit .einstieg-sub, .bereit .einstieg .knopf { opacity: 0; transform: translateY(8px); }
.los .zeile > span { transform: none; transition: transform 1300ms var(--weich); }
.los .zeile:nth-child(2) > span { transition-delay: 120ms; }
.los .zeile:nth-child(3) > span { transition-delay: 240ms; }
.los .einstieg-sub, .los .einstieg .knopf { opacity: 1; transform: none; transition: opacity 900ms ease 650ms, transform 1100ms var(--weich) 650ms; }

/* ---------- Belegband (einziges Laufband der Seite), fein und ruhig ---------- */
.belege { overflow: hidden; border-block: 1px solid var(--linie); }
.belege-spur { display: flex; width: max-content; animation: laufen 60s linear infinite; }
.belege ul { display: flex; list-style: none; margin: 0; padding: 16px 0; }
.belege li { padding: 0 30px; font: italic 400 clamp(19px, 1.8vw, 23px)/1.2 var(--serif); white-space: nowrap; color: var(--grau); }
.belege li::after { content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 60px; vertical-align: middle; background: var(--rosa); opacity: 0.6; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* ---------- Abschnitte allgemein ---------- */
section { scroll-margin-top: var(--kopf-h); }
.anlass, .ablauf, .stimmen, .termine, .liza, .anfrage, .block { max-width: var(--breit); margin: 0 auto; padding: clamp(88px, 12vw, 170px) var(--rand) 0; }

/* ---------- Euer Anlass ---------- */
.anlass h2 { margin-bottom: clamp(28px, 4vw, 56px); max-width: 13ch; }
.anlass-buehne { display: grid; gap: 30px; }
.anlass-bilder { position: relative; aspect-ratio: 4 / 5; border-radius: var(--ecke); overflow: hidden; background: var(--hauch); }
.anlass-bilder figure { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.03); transition: opacity 700ms ease, transform 1400ms var(--weich); }
.anlass-bilder figure.aktiv { opacity: 1; transform: none; }
.anlass-bilder img, .anlass-bilder video { width: 100%; height: 100%; object-fit: cover; }
.anlass-bilder .nur-text { display: grid; place-items: center; padding: 14% 12%; background: var(--hauch); }
.anlass-bilder .nur-text p { font: italic 300 clamp(32px, 4.2vw, 54px)/1.12 var(--serif); text-align: center; color: var(--tinte); }
/* Auswahl direkt unter dem Bild; der Bildrahmen behält bei jedem Wechsel exakt Größe und Verhältnis */
.anlass-spalte { min-width: 0; }
.anlass-bilder figure img { position: absolute; inset: 0; }
.anlass-wahl {
  display: flex; gap: 6px 8px; flex-wrap: wrap; padding: 14px 0 0;
}
.anlass-wahl button {
  min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--linie);
  background: transparent; color: var(--tinte); font: 400 15px/1 var(--sans); letter-spacing: 0.02em; cursor: pointer;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 180ms var(--weich);
  user-select: none; -webkit-user-select: none;
}
.anlass-wahl button:active { transform: scale(0.96); }
.anlass-wahl button[aria-selected="true"] { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
@media (hover: hover) and (pointer: fine) { .anlass-wahl button:hover { border-color: var(--tinte); } }
@media (max-width: 760px) {
  .anlass-wahl { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand); scrollbar-width: none; overscroll-behavior-x: contain; }
  .anlass-wahl::-webkit-scrollbar { display: none; }
  .anlass-wahl button { flex: none; }
}
/* Texte: fester Platz für den längsten Text, damit nichts darunter springt */
.anlass-texte { display: grid; }
.anlass-texte article { grid-area: 1 / 1; }
.anlass-texte article[hidden] { display: block; visibility: hidden; }
.anlass-texte h3 { font-size: clamp(32px, 3.8vw, 50px); font-weight: 300; margin-bottom: 16px; }
.anlass-texte p { max-width: 44ch; }
.anlass-texte .fakten { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linie); color: var(--grau); font-size: 16px; }
.anlass-texte .knopf { margin-top: 30px; justify-self: start; grid-row: 2; }
.anlass-texte article.neu { animation: einblenden 600ms var(--weich); }
@keyframes einblenden { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 900px) {
  .anlass-buehne { grid-template-columns: 1.15fr 0.85fr; align-items: end; gap: clamp(48px, 7vw, 120px); }
  .anlass-bilder { aspect-ratio: 5 / 6; }
}

/* ---------- Ablauf: Panorama oben, Schritte darunter ---------- */
.ablauf { display: grid; gap: clamp(36px, 5vw, 64px); }
.ablauf-film { margin: 0; order: -1; }
.ablauf-film .film { width: 100%; aspect-ratio: 1440 / 535; height: auto; border-radius: var(--ecke); }
/* Handy: 16:9 und 41 % zeigen alle drei Köpfe ganz (4:3 schnitt den Mann links mitten durchs Gesicht) */
@media (max-width: 760px) { .ablauf-film .film { aspect-ratio: 16 / 9; object-position: 41% 30%; } }
.ablauf-text h2 { margin-bottom: 20px; max-width: 11ch; }
.ablauf-text > .leise { max-width: 40ch; margin-bottom: 44px; }
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 70px 1fr; column-gap: 20px; padding: 22px 0; border-top: 1px solid var(--linie); }
.schritte li:last-child { border-bottom: 1px solid var(--linie); }
.schritte li::before { content: counter(s); grid-row: span 2; font: italic 300 52px/0.9 var(--serif); color: var(--rosa); }
.schritte h3 { margin-bottom: 4px; }
.schritte p { color: var(--grau); }
@media (min-width: 900px) {
  .ablauf-text { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(48px, 7vw, 120px); align-items: start; }
  .ablauf-text > .leise { grid-column: 1; margin-bottom: 0; }
  .ablauf-text h2 { grid-column: 1; grid-row: 1; }
  .schritte { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- Stimmen ---------- */
.stimmen { text-align: center; }
.stimmen h2 { margin-bottom: 44px; font-size: clamp(22px, 2vw, 26px); font-family: var(--sans); font-weight: 400; letter-spacing: 0.04em; color: var(--grau); }
.stimme-gross { min-height: 12em; display: grid; justify-items: center; }
.stimme-gross figure { margin: 0; grid-area: 1 / 1; }
.stimme-gross figure[hidden] { display: none; }
.stimme-gross blockquote { margin: 0 auto; font: italic 300 clamp(32px, 4.6vw, 64px)/1.14 var(--serif); max-width: 22ch; }
.stimme-gross figcaption { margin-top: 24px; font-size: 16px; letter-spacing: 0.04em; color: var(--rosa); }
.stimme-gross figure.neu { animation: einblenden 700ms var(--weich); }
.stimme-namen { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 36px; }
.stimme-namen button {
  min-height: 44px; padding: 0 2px; border: 0; border-bottom: 1px solid transparent; background: none;
  font: 400 15px/1 var(--sans); letter-spacing: 0.02em; color: var(--grau); cursor: pointer; transition: color 300ms ease, border-color 300ms ease;
}
.stimme-namen button[aria-pressed="true"] { color: var(--tinte); border-bottom-color: var(--tinte); }
@media (hover: hover) and (pointer: fine) { .stimme-namen button:hover { color: var(--tinte); } }
@media (max-width: 760px) {
  .stimme-namen { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand); scrollbar-width: none; }
  .stimme-namen button { flex: none; }
}

/* ---------- Termine ---------- */
.termine h2 { margin-bottom: 36px; }
.termin { display: grid; gap: 14px; padding: 36px 0; border-top: 1px solid var(--tinte); }
.termin:last-child { border-bottom: 1px solid var(--linie); }
.datum { display: grid; font: 300 clamp(38px, 5.4vw, 70px)/1 var(--serif); }
.datum span + span { font-style: italic; color: var(--rosa); }
.termin h3 { margin-bottom: 10px; }
.termin p + p { margin-top: 6px; }
@media (min-width: 900px) { .termin { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } }

/* ---------- Liza: zwei Bilder leicht versetzt, wie bei den Compagnie-Seiten ---------- */
.liza { display: grid; gap: 40px; }
.liza-bilder { position: relative; margin: 0; padding-bottom: 18%; }
.liza-bilder .gross { width: 82%; height: auto; aspect-ratio: 4 / 5; object-position: 50% 20%; object-fit: cover; border-radius: var(--ecke); }
.liza-bilder .klein-rahmen { position: absolute; right: 0; bottom: 0; width: 46%; padding: 6px; background: var(--papier); }
.liza-bilder .klein-bild { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--ecke); }
.liza-bilder figcaption { margin-top: 10px; font-size: 13px; color: var(--grau); position: absolute; left: 0; bottom: 0; max-width: 50%; }
.liza-text h2 { margin-bottom: 20px; }
.liza-text > p { max-width: 50ch; }
.zeitleiste { list-style: none; margin: 36px 0; padding: 0; }
.zeitleiste li { display: grid; grid-template-columns: 5.6em 1fr; gap: 14px; padding: 15px 0; border-top: 1px solid var(--linie); }
.zeitleiste li:last-child { border-bottom: 1px solid var(--linie); }
.zeitleiste span { font: italic 400 21px/1.35 var(--serif); color: var(--rosa); }
@media (min-width: 900px) { .liza { grid-template-columns: 0.95fr 1.05fr; gap: clamp(56px, 8vw, 128px); align-items: start; } .liza-bilder { position: sticky; top: calc(var(--kopf-h) + 28px); } }

/* ---------- Anfrage ---------- */
.anfrage { display: grid; gap: 40px; padding-bottom: clamp(88px, 12vw, 170px); }
.anfrage-kopf h2 { margin-bottom: 18px; }
.anfrage-kopf p { max-width: 40ch; color: var(--grau); }
.wege { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.wege a { text-decoration: none; border-bottom: 1px solid var(--rosa); padding-bottom: 2px; }
.formular { display: grid; gap: 22px; }
.feld { display: grid; gap: 6px; }
.feld label { font-size: 14px; letter-spacing: 0.04em; color: var(--grau); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 50px; padding: 10px 0; border: 0; border-bottom: 1px solid #BDB3B8; border-radius: 0; background: transparent;
  font: 300 18px/1.4 var(--sans); color: var(--tinte); transition: border-color 300ms ease;
}
.feld input::placeholder, .feld textarea::placeholder { color: #8C8389; }
.feld select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinte) 50%), linear-gradient(135deg, var(--tinte) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 32px; }
.feld textarea { min-height: 120px; resize: vertical; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: none; border-bottom: 1px solid var(--rosa); box-shadow: 0 1px 0 var(--rosa); }
.formular .knopf { justify-self: start; margin-top: 8px; }
@media (min-width: 900px) {
  .anfrage { grid-template-columns: 0.85fr 1.15fr; gap: clamp(56px, 8vw, 128px); align-items: start; }
  .formular { grid-template-columns: 1fr 1fr; column-gap: 36px; }
  .feld.breit, .formular .knopf, .formular .klein { grid-column: 1 / -1; }
}

/* ---------- Fuß und Leiste ---------- */
.fuss { padding: 32px var(--rand) 110px; border-top: 1px solid var(--linie); color: var(--grau); font-size: 14px; display: grid; gap: 6px; max-width: var(--breit); margin: 0 auto; }
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 12px var(--rand) calc(12px + env(safe-area-inset-bottom));
  display: flex; justify-content: center; pointer-events: none;
  transform: translateY(110%); transition: transform 600ms var(--weich);
}
.leiste .knopf { pointer-events: auto; width: min(100%, 420px); }
.leiste.zeigen { transform: none; }
@media (min-width: 900px) { .leiste { display: none; } }


@media (prefers-reduced-motion: reduce) {
  .belege-spur { animation: none; }
  .bereit .zeile > span, .bereit .einstieg-sub, .bereit .einstieg .knopf { transform: none !important; opacity: 1 !important; }
  .menue li { opacity: 1; transform: none; }
  .anlass-bilder figure { transform: none; }
  html { scroll-behavior: auto; }
}


/* =====================================================================
   Vorschlag 4 "Das Studio": Bausteine für das Tanzstudio und die Unterseiten
   ===================================================================== */

/* ---------- Marke mit Zusatz, Hauptnavigation am Rechner ---------- */
.marke { display: inline-flex; align-items: center; gap: 12px; }
.marke-text { display: inline-flex; align-items: baseline; gap: 10px; }
.marke-logo { display: block; width: auto; height: 62px; flex: none; }
.marke small { font: italic 400 17px/1 var(--serif); color: var(--rosa); letter-spacing: 0.01em; }
.hauptnav { display: none; }
@media (min-width: 1100px) {
  .hauptnav { display: flex; gap: clamp(18px, 2vw, 30px); list-style: none; margin: 0; padding: 0; }
  .hauptnav a { position: relative; text-decoration: none; font: 400 15px/1 var(--sans); letter-spacing: 0.03em; padding: 14px 0; }
  .hauptnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--rosa); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--weich); }
  .hauptnav a[aria-current="page"]::after { transform: none; }
  .menueknopf { display: none; }
}
@media (hover: hover) and (pointer: fine) { .hauptnav a:hover::after { transform: none; } }
.menue a[aria-current="page"] span { font-style: italic; color: var(--rosa); }

/* ---------- Zweiter Knopf neben dem ersten, Textverweis ---------- */
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.textlink { display: inline-block; margin-top: 26px; text-decoration: none; border-bottom: 1px solid var(--rosa); padding-bottom: 3px; font-size: 16px; letter-spacing: 0.02em; }
.textlink::after { content: " \2192"; }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf { max-width: var(--breit); margin: 0 auto; padding: clamp(40px, 7vw, 96px) var(--rand) 0; display: grid; gap: 28px; }
.seitenkopf h1 { font-size: clamp(50px, 9vw, 120px); line-height: 0.98; letter-spacing: -0.02em; }
.seitenkopf h1 .zeile:last-child { font-style: italic; }
.seitenkopf .lead { max-width: 42ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--grau); margin-top: 22px; }
.seitenkopf figure { margin: 0; }
.seitenkopf figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ecke); }
@media (min-width: 900px) {
  .seitenkopf.mit-bild { grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: clamp(48px, 7vw, 120px); }
  .seitenkopf.mit-bild figure img { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--kopf-h) - 120px); }
}
.bereit .seitenkopf .lead, .bereit .seitenkopf .knoepfe { opacity: 0; transform: translateY(8px); }
.los .seitenkopf .lead, .los .seitenkopf .knoepfe { opacity: 1; transform: none; transition: opacity 900ms ease 500ms, transform 1100ms var(--weich) 500ms; }
.seitenkopf .knoepfe { margin-top: 28px; }

/* ---------- Kurswahl auf der Startseite: Fakten als Liste ---------- */
.kursfakten { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--linie); display: grid; gap: 4px; color: var(--grau); font-size: 16px; }
.spaeter {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 10px; border-radius: 999px;
  font: 400 12px/1.2 var(--sans); letter-spacing: 0.04em; color: var(--rosa-tief); background: var(--hauch); white-space: nowrap;
}

/* ---------- Abschnitte mit Überschrift (Unterseiten) ---------- */
.block h2 { margin-bottom: clamp(24px, 3vw, 40px); max-width: 14ch; }
.block > .leise { max-width: 46ch; margin: -8px 0 36px; }

/* ---------- Stundenplan ---------- */
.filter { display: flex; gap: 6px 8px; flex-wrap: wrap; margin-bottom: 28px; }
.filter button {
  min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--linie); background: transparent; color: var(--tinte);
  font: 400 15px/1 var(--sans); letter-spacing: 0.02em; cursor: pointer; transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 180ms var(--weich);
  user-select: none; -webkit-user-select: none;
}
.filter button:active { transform: scale(0.96); }
.filter button[aria-pressed="true"] { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
@media (hover: hover) and (pointer: fine) { .filter button:hover { border-color: var(--tinte); } }
@media (max-width: 760px) {
  .filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand); scrollbar-width: none; }
  .filter::-webkit-scrollbar { display: none; }
  .filter button { flex: none; }
}
.woche { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--tinte); }
.tag { display: grid; grid-template-columns: 4.6em 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.tag > h3 { font: italic 400 24px/1.3 var(--serif); color: var(--rosa); }
.tag ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tag .frei { color: var(--grau); font-size: 16px; padding-top: 6px; }
.eintrag a { display: grid; grid-template-columns: 6.4em 1fr; gap: 10px; align-items: baseline; padding: 6px 0; text-decoration: none; transition: opacity 400ms ease; }
.eintrag time { font-size: 15px; color: var(--grau); font-variant-numeric: tabular-nums; }
.eintrag b { font: 400 clamp(21px, 1.9vw, 24px)/1.25 var(--serif); }
.eintrag .spaeter { margin: 4px 0 0; }
.eintrag.aus a { opacity: 0.2; }
.eintrag.aus { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .eintrag a:hover b { color: var(--rosa); font-style: italic; } }
@media (min-width: 1000px) {
  .woche { grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 0; }
  .tag { grid-template-columns: 1fr; align-content: start; gap: 12px; padding: 18px 14px 26px; border-bottom: 0; border-left: 1px solid var(--linie); border-top: 1px solid var(--tinte); min-height: 280px; }
  .tag:first-child { border-left: 0; padding-left: 0; }
  .eintrag a { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
  .eintrag b { font-size: 21px; }
  .eintrag .spaeter { justify-self: start; }
}

/* ---------- Kursbeschreibungen ---------- */
.kurse-liste { display: grid; border-top: 1px solid var(--tinte); }
.kurs { display: grid; gap: 10px; padding: 34px 0; border-bottom: 1px solid var(--linie); scroll-margin-top: calc(var(--kopf-h) + 16px); }
.kurs h3 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 300; }
.kurs .wann { font: italic 400 21px/1.3 var(--serif); color: var(--rosa); margin-top: 6px; }
.kurs p { max-width: 52ch; }
.kurs .preis-zeile { color: var(--grau); font-size: 16px; }
.kurs .textlink { margin-top: 6px; justify-self: start; }
.kurs:target { animation: ziel 1800ms var(--weich); }
@keyframes ziel { from { background: var(--hauch); } }
@media (min-width: 900px) {
  .kurs { grid-template-columns: 0.9fr 1.1fr; column-gap: clamp(48px, 7vw, 120px); align-items: start; }
  .kurs > div:first-child { grid-row: span 3; }
}

/* ---------- Preise ---------- */
.preisliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinte); }
.preisliste li { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--linie); }
.preisliste h3 { grid-column: 1; grid-row: 1; font-size: clamp(26px, 2.6vw, 34px); font-weight: 300; }
.preisliste .betrag { grid-column: 2; grid-row: 1 / span 2; font: 300 clamp(34px, 4vw, 54px)/1 var(--serif); white-space: nowrap; text-align: right; }
.preisliste .betrag small { display: block; margin-top: 8px; font: 400 14px/1.2 var(--sans); color: var(--grau); letter-spacing: 0.02em; }
.preisliste p:not(.betrag) { grid-column: 1; grid-row: 2; color: var(--grau); font-size: 16px; max-width: 46ch; }
.preisliste li.hervor { background: linear-gradient(90deg, var(--hauch), rgb(246 233 237 / 0)); padding-left: 18px; border-left: 1px solid var(--rosa); }
.regeln { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.regeln li { counter-increment: r; display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; padding: 22px 0; border-top: 1px solid var(--linie); }
.regeln li:last-child { border-bottom: 1px solid var(--linie); }
.regeln li::before { content: counter(r); grid-row: span 2; font: italic 300 46px/0.9 var(--serif); color: var(--rosa); }
.regeln h3 { margin-bottom: 4px; }
.regeln p { color: var(--grau); }
.zwei > div:first-child { margin-bottom: 28px; }
@media (min-width: 900px) {
  .zwei > div:first-child { margin-bottom: 0; }
  .zwei { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(48px, 7vw, 120px); align-items: start; }
  .zwei > div:first-child { position: sticky; top: calc(var(--kopf-h) + 28px); }
}

/* ---------- Discokugel: der Abend im Studio (einziger dunkler Abschnitt) ---------- */
.kugel {
  position: relative; margin-top: clamp(88px, 12vw, 170px); height: 100vh; height: 100svh; min-height: 560px; max-height: 1100px;
  overflow: hidden; background: #0B080B; color: #F4ECE4;
}
.kugel-buehne { position: absolute; inset: 0; }
.kugel-film, .kugel-ende, .kugel-schleife { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kugel-ende { transition: opacity 900ms ease; }
.kugel.wartet:not(.fertig) .kugel-ende { opacity: 0; }
/* Endlos-Drehung nach dem Ablauf: erstes Schleifenbild = letztes Ablaufbild, daher ohne Überblendung */
.kugel-schleife { opacity: 0; }
.kugel.dreht .kugel-schleife { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .kugel-schleife { display: none; } }
.kugel-schleier { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(11 8 11 / 0.8) 0%, rgb(11 8 11 / 0.42) 40%, rgb(11 8 11 / 0) 66%); }
.kugel-texte { position: absolute; left: var(--rand); right: var(--rand); bottom: clamp(48px, 10svh, 120px); max-width: 560px; display: grid; gap: 26px; }
.kugel h2 { font-size: clamp(44px, 6vw, 86px); line-height: 1.02; color: #F4ECE4; }
.kugel h2 em { font-style: italic; color: #F2B4C6; }
.kugel-abende { list-style: none; margin: 0; padding: 0; }
.kugel-abende li { padding: 16px 0; border-top: 1px solid rgb(244 236 228 / 0.22); }
.kugel-abende h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 400; color: #F4ECE4; }
.kugel-abende p { color: #D3C8CF; font-size: 16px; }
.kugel .knopf { justify-self: start; background: #F4ECE4; color: #17111C; border-color: #F4ECE4; }
@media (hover: hover) and (pointer: fine) { .kugel .knopf:hover { background: #F2B4C6; border-color: #F2B4C6; color: #17111C; } }
/* Texte kommen nacheinander, im Takt der Kugel; ohne Skript stehen sie sofort da */
.kugel .kt { transition: opacity 900ms ease, transform 1100ms var(--weich); }
.kugel.wartet .kt { opacity: 0; transform: translateY(14px); }
.kugel.wartet .kt.da { opacity: 1; transform: none; }
/* Hochkant: Kugel oben frei, Texte darunter auf dunklem Grund (sonst läge die Überschrift auf der Kugel) */
@media (max-aspect-ratio: 1/1) {
  .kugel { height: auto; min-height: 0; max-height: none; }
  .kugel-buehne { position: relative; height: 74vh; height: 74svh; }
  .kugel-schleier { background: linear-gradient(0deg, #0B080B 0%, rgb(11 8 11 / 0.6) 18%, rgb(11 8 11 / 0) 40%); }
  .kugel-texte { position: relative; left: auto; right: auto; bottom: auto; margin-top: -12svh; padding: 0 var(--rand) calc(56px + env(safe-area-inset-bottom)); gap: 18px; }
  .kugel-abende li { padding: 12px 0; }
}

/* Zahlen in Cormorant sonst klein wie Mediävalziffern: für Zeiten und Preise gerade Ziffern */
.betrag, .wann, .eintrag time, .datum, .kugel-abende p, .zeitleiste span { font-variant-numeric: lining-nums; }

/* ---------- Woche in Kurzform (Startseite) ---------- */
.kurzwoche { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 1px solid var(--tinte); }
.kurzwoche li { padding: 16px 16px 18px 0; border-bottom: 1px solid var(--linie); }
.kurzwoche span { display: block; font: italic 400 22px/1.3 var(--serif); color: var(--rosa); margin-bottom: 4px; }
.kurzwoche p { font-size: 15px; line-height: 1.55; color: var(--grau); }

/* ---------- Teaser mit Bild (Hochzeit, Liza) ---------- */
.teaser { display: grid; gap: clamp(28px, 4vw, 48px); }
.teaser figure { margin: 0; }
.teaser figure img { width: 100%; height: auto; border-radius: var(--ecke); object-fit: cover; }
.teaser .breitbild { aspect-ratio: 1440 / 535; }
@media (max-width: 760px) { .teaser .breitbild { aspect-ratio: 4 / 3; object-position: 50% 35%; } }
.teaser h2 { margin-bottom: 18px; max-width: 13ch; }
.teaser p { max-width: 46ch; }
.teaser .portrait { aspect-ratio: 4 / 5; object-position: 50% 20%; }
.teaser .teaser-text > p + p { margin-top: 14px; }
/* "So tanzt ihr bei mir": Füße aus Lizas Linedance-Reel (Quelle nur 1080 px breit, deshalb in der Textspalte;
   unten liegt nur Asphalt, daher oben ausgerichtet) */
.art figure { margin: 0 0 28px; }
.art .band { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 0%; border-radius: var(--ecke); }
@media (max-width: 760px) { .art .band { aspect-ratio: 16 / 10; } }
@media (min-width: 900px) { .art { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(48px, 7vw, 120px); align-items: start; } }
@media (min-width: 900px) {
  .teaser-text { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(48px, 7vw, 120px); align-items: end; }
  .teaser.seitlich { grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: clamp(56px, 8vw, 128px); }
  .teaser.seitlich .teaser-text { display: block; }
}

/* ---------- Probestunde (Band vor dem Fuß) ---------- */
.probe-band { max-width: var(--breit); margin: clamp(88px, 12vw, 170px) auto clamp(64px, 8vw, 120px); padding: 0 var(--rand); }
.probe-band > div { background: var(--hauch); border-radius: var(--ecke); padding: clamp(40px, 6vw, 88px) clamp(24px, 6vw, 88px); display: grid; gap: 22px; }
.probe-band h2 { max-width: 14ch; }
.probe-band h2 em { font-style: italic; color: var(--rosa-tief); }
.probe-band p { max-width: 44ch; color: var(--grau); }
@media (min-width: 900px) { .probe-band > div { grid-template-columns: 1.2fr 0.8fr; align-items: end; } .probe-band .knoepfe { justify-content: flex-end; } }

/* ---------- Kontakt: Studio-Angaben, Belege ---------- */
.angaben { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.angaben li { padding: 14px 0; border-bottom: 1px solid var(--linie); display: grid; grid-template-columns: 6.5em 1fr; gap: 14px; }
.angaben span { font: italic 400 20px/1.4 var(--serif); color: var(--rosa); }
.platzhalter { color: var(--grau); font-style: italic; }
.belegliste { list-style: none; margin: 0; padding: 0; columns: 2 280px; column-gap: 48px; }
.belegliste li { break-inside: avoid; padding: 14px 0; border-top: 1px solid var(--linie); }

/* ---------- Fuß mit Seitenverweisen ---------- */
.fuss { gap: 22px; }
.fuss-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.fuss-nav a { text-decoration: none; color: var(--tinte); font-size: 15px; }
@media (hover: hover) and (pointer: fine) { .fuss-nav a:hover { color: var(--rosa); } }

@media (prefers-reduced-motion: reduce) {
  .kugel.wartet .kt { opacity: 1; transform: none; }
  .kugel-film { display: none; }
  .kugel-ende { opacity: 1; }
  .bereit .seitenkopf .lead, .bereit .seitenkopf .knoepfe { transform: none !important; opacity: 1 !important; }
}


/* =====================================================================
   Vorschlag 5 "Unique Dance" (03.11.2026)
   ===================================================================== */
.marke-name { white-space: nowrap; }
.marke small { white-space: nowrap; }
/* Handy: "by Liza Snow" unter den Namen, sonst bricht der Zusatz mitten durch */
@media (max-width: 520px) { .marke { gap: 10px; font-size: 25px; } .marke-text { flex-direction: column; align-items: flex-start; gap: 3px; } .marke-logo { height: 54px; } .marke small { font-size: 16px; } }

/* Dachzeile über großen Überschriften: sagt sofort, wo und was */
.dachzeile { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rosa-tief); margin-bottom: 18px; }

/* Zwei Türen gleich nach dem Einstieg: Hochzeitstanz und Kurse gleich groß */
.wege { max-width: var(--breit); margin: 0 auto; padding: clamp(72px, 10vw, 140px) var(--rand) 0; }
.wege h2 { margin-bottom: clamp(28px, 4vw, 52px); max-width: 14ch; }
.wege ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px; }
.wege a { display: grid; gap: 10px; text-decoration: none; }
.wege figure { margin: 0 0 10px; overflow: hidden; border-radius: var(--ecke); background: var(--hauch); }
.wege img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1400ms var(--weich); }
.weg-etikett { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rosa-tief); }
.wege h3 { font-size: clamp(36px, 4vw, 56px); font-weight: 300; line-height: 1.05; }
.wege p { color: var(--grau); max-width: 42ch; }
.wege .textlink { justify-self: start; margin-top: 8px; }
.wege a:active figure { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .wege a:hover img { transform: scale(1.03); }
  .wege a:hover h3 { font-style: italic; }
}
@media (min-width: 900px) { .wege ul { grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); } }

.ablauf-knoepfe { margin-top: 36px; }
@media (min-width: 900px) { .ablauf-knoepfe { grid-column: 2; } }
.preis-knoepfe { margin-top: 26px; }

/* Startprogramm: nur so viele Tagesspalten wie Kurstage, der Rest steht unter "Bald im Programm" */
@media (min-width: 1000px) { .woche { grid-template-columns: repeat(var(--tage, 7), minmax(0, 1fr)); } }
.bald-zeile { font-variant-numeric: lining-nums; margin-top: 22px; color: var(--grau); font-size: 16px; }
.bald-zeile .spaeter { margin: 0 8px 0 0; }
.bald-liste { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--tinte); }
.bald-liste li { display: grid; gap: 6px; padding: 26px 0; border-bottom: 1px solid var(--linie); scroll-margin-top: calc(var(--kopf-h) + 16px); }
.bald-liste h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 300; }
.bald-liste p { color: var(--grau); max-width: 52ch; }
.bald-liste .textlink { margin-top: 4px; justify-self: start; }
@media (min-width: 900px) { .bald-liste { grid-template-columns: 1fr 1fr; column-gap: clamp(48px, 7vw, 120px); } }

/* Leiste am Handy: Hochzeitstanz und Probestunde nebeneinander */
.leiste.zwei-knoepfe { gap: 10px; }
.leiste.zwei-knoepfe .knopf { flex: 1; width: auto; max-width: 240px; padding: 0 16px; }
.leiste.zwei-knoepfe .knopf.hell { background: var(--papier); }

/* Einstieg kleiner (Lukas 03.11.2026: "zu groß die Schrift", am Rechner brach "Und an eurem" in zwei Zeilen) */
.einstieg h1 { font-size: clamp(44px, min(12vw, 8.5svh), 96px); }
@media (min-width: 900px) { .einstieg h1 { font-size: clamp(56px, min(5.4vw, 10.5svh), 104px); } }

/* =====================================================================
   Vorschlag 3 "Eröffnung" (03.11.2026): vor und nach der Eröffnung
   ===================================================================== */
html[data-zustand="nachher"] .nur-vorher, html:not([data-zustand="nachher"]) .nur-nachher { display: none !important; }

/* Umschalter, nur im Entwurf */
.zustand-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; padding: 10px var(--rand);
  background: var(--hauch); border-bottom: 1px solid var(--linie); font-size: 14px; }
.zustand-leiste span { color: var(--grau); }
@media (max-width: 520px) { .zustand-leiste span { display: none; } }
.zustand-leiste button { font: 400 14px/1 var(--sans); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--tinte);
  background: var(--papier); color: var(--tinte); cursor: pointer; transition: transform 160ms var(--weich), background-color 250ms ease, color 250ms ease; }
.zustand-leiste button:active { transform: scale(0.96); }
.zustand-leiste button[aria-pressed="true"] { background: var(--tinte); color: var(--papier); }

/* ---------- Kopf vor der Eröffnung: sofort sichtbar, was es ist und was man schon buchen kann ---------- */
.bald-pille { display: inline-flex; align-items: center; gap: 10px; margin: -4px 0 20px; padding: 7px 16px 7px 12px; border-radius: 999px;
  background: var(--tinte); color: var(--papier); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.puls { width: 8px; height: 8px; border-radius: 50%; background: #F2B4C6; box-shadow: 0 0 0 0 rgb(242 180 198 / 0.7); animation: puls 2.4s ease-out infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgb(242 180 198 / 0.7); } 70%, 100% { box-shadow: 0 0 0 10px rgb(242 180 198 / 0); } }
.angebot { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--tinte); max-width: 620px; }
.angebot li { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.angebot h2 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; font-weight: 400; }
.angebot p { font-size: 15px; color: var(--grau); line-height: 1.45; }
.angebot .status { grid-column: 1; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); }
.angebot .status.jetzt { color: var(--rosa-tief); }
.angebot .knopf { grid-column: 2; grid-row: 1 / span 2; }
.ort { margin-top: 18px; font: italic 400 20px/1.3 var(--serif); color: var(--grau); font-variant-numeric: lining-nums; }
.ort::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 10px; vertical-align: middle; background: var(--rosa); }
.kopf-vorher h1 .zeile:last-child { font-style: italic; }
.kopf-vorher .einstieg-sub { margin: 16px 0 20px; }
@media (min-width: 900px) { .kopf-vorher h1 { font-size: clamp(52px, min(5vw, 9.5svh), 96px); } }
/* Stempel am Foto, leicht schräg */
.stempel { position: absolute; top: -18px; right: -14px; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: var(--rosa); color: #fff; font: italic 400 19px/1.05 var(--serif); transform: rotate(-12deg); box-shadow: 0 10px 24px rgb(168 58 94 / 0.25); }
@media (max-width: 899px) { .stempel { top: -16px; bottom: auto; right: 8px; width: 88px; height: 88px; font-size: 16px; } }
/* Handy: vor der Eröffnung zuerst die Botschaft, das Foto danach und flacher */
@media (max-width: 899px) {
  .kopf-vorher .einstieg-film { order: 0; margin-top: 12px; }
  .kopf-vorher .einstieg-film .film { height: 46svh; }
  .kopf-vorher { padding-top: 26px; }
}
.bereit .kopf-vorher .bald-pille, .bereit .kopf-vorher .angebot, .bereit .kopf-vorher .ort { opacity: 0; transform: translateY(8px); }
.los .kopf-vorher .bald-pille, .los .kopf-vorher .angebot, .los .kopf-vorher .ort { opacity: 1; transform: none; transition: opacity 900ms ease 650ms, transform 1100ms var(--weich) 650ms; }
@media (prefers-reduced-motion: reduce) {
  .puls { animation: none; }
  .bereit .kopf-vorher .bald-pille, .bereit .kopf-vorher .angebot, .bereit .kopf-vorher .ort { opacity: 1 !important; transform: none !important; }
}

/* Tageszähler bis zur Eröffnung (nur mit festem Datum, EROEFFNUNG_ISO im Bauskript) */
.countdown { margin-top: 14px; font: italic 400 22px/1.3 var(--serif); color: var(--grau); font-variant-numeric: lining-nums; }
.countdown b { font-weight: 500; color: var(--rosa-tief); }

/* Lizas Logo im Fuß (07.11.2026) */
.fuss-logo { display: block; width: 120px; height: auto; }

/* Hochzeitstanz: Überschrift und Auswahl rechts neben dem Bild, direkt über dem Text (07.11.2026) */
.anlass.neben-bild h2 { margin-bottom: 0; }
.anlass.neben-bild .anlass-wahl { padding-top: 0; }
@media (max-width: 899px) {
  /* Handy: Überschrift, Auswahl, Bild, Text */
  .anlass.neben-bild .anlass-seite { display: contents; }
  .anlass.neben-bild .anlass-buehne { gap: 22px; }
  .anlass.neben-bild h2 { order: -2; }
  .anlass.neben-bild .anlass-wahl { order: -1; }
  .anlass.neben-bild .anlass-texte { padding-top: 8px; }
}
@media (min-width: 900px) {
  .anlass.neben-bild .anlass-buehne { align-items: center; }
  .anlass.neben-bild .anlass-seite { display: grid; gap: 28px; }
  .anlass.neben-bild .anlass-texte { padding-top: 12px; }
}

/* Besondere Termine (Kinderdisco, Kinder-Karneval) als eigene Zeile direkt unter dem Wochenplan (07.11.2026) */
.woche.besonders .tag { grid-template-columns: 1fr; gap: 6px; }
.woche.besonders .tag ul { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: 28px; }
@media (min-width: 1000px) {
  .woche.besonders .tag { min-height: 0; padding-bottom: 22px; }
}

/* Kopfvideo (Lizas Weltmeisterschafts-Tanz, hochkant, ohne Ton, Schleife; 07.11.2026) */
.einstieg-film video.film { display: block; object-position: 50% 45%; }
.woche.besonders .eintrag b small { display: block; margin-top: 2px; font: 400 14px/1.4 var(--sans); color: var(--grau); }
/* Kopf am Rechner: Video mittig zum Textblock (Lukas 07.11.2026, vorher unten ausgerichtet und zu tief) */
@media (min-width: 900px) {
  .einstieg { align-items: center; }
  .einstieg-text { padding-bottom: 0; }
}

/* Karte „Euer Hochzeitstanz“: zwei Fotos blenden weich ineinander (Lukas 07.11.2026) */
.wege .wechsel { position: relative; }
.wege .wechsel img + img { position: absolute; inset: 0; height: 100%; opacity: 0; animation: wege-wechsel 12s ease-in-out infinite; }
@keyframes wege-wechsel { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wege .wechsel img + img { animation: none; } }

/* Kontaktformular live (07.11.2026): Robotfalle unsichtbar, Fehlerhinweis, Turnstile */
.formular .falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular-fehler { grid-column: 1 / -1; margin: 0; padding: 12px 16px; border-radius: var(--ecke); background: var(--hauch); color: var(--tinte); }
.formular .cf-turnstile { grid-column: 1 / -1; }
/* Impressum und Datenschutz */
.recht { display: grid; gap: 28px; max-width: 760px; }
.recht h2 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 8px; }
.recht p { color: var(--grau); }