/* Takt & Trubel · Lichtkegel im Saal
   Farben, Schriften und verschiebbare Werte als Variablen auf :root (für das Regler-Panel). */

@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/bodoni-moda-latin-standard-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/bodoni-moda-latin-standard-italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  /* Palette Kerzenlicht */
  --nacht: #0E0D0B;
  --nacht-2: #16140F;
  --creme: #F6EFDF;
  --creme-70: rgba(246, 239, 223, .74);
  --creme-50: rgba(246, 239, 223, .56);
  --creme-20: rgba(246, 239, 223, .2);
  --gold: #C8AD86;
  --gold-40: rgba(200, 173, 134, .4);
  --papier: #FCFAF5;
  --papier-2: #F3ECDC;
  --tinte: #141311;
  --gold-dunkel: #7E6440;
  --stein: #5A554D;
  --linie-hell: rgba(20, 19, 17, .16);

  /* Schrift */
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Verschiebbare Werte (Regler-Panel) */
  --slogan-groesse: clamp(3.1rem, 8.2vw, 7.4rem);
  --h1-groesse: clamp(1.3rem, 2vw, 1.75rem);
  --h2-groesse: clamp(2.2rem, 4.6vw, 4.2rem);
  --text-groesse: 17px;
  --hero-oben: clamp(7.5rem, 18vh, 11.5rem);
  --hero-gobo-groesse: min(68vw, 752px);
  --abschnitt-abstand: clamp(5.5rem, 12vw, 10rem);
  --seitenrand: clamp(1rem, 4vw, 3.5rem);
  --inhalt-breite: 1240px;
  --lichtkegel-staerke: .11;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--nacht);
  color: var(--creme);
  font-family: var(--sans);
  font-size: var(--text-groesse);
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--gold); color: var(--nacht); }
.licht-an ::selection { background: var(--tinte); color: var(--papier); }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 4px; }
.licht-an :focus-visible { outline-color: var(--gold-dunkel); }
html { scrollbar-color: #3a352c var(--nacht); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--seitenrand); top: -4rem; z-index: 100;
  background: var(--creme); color: var(--nacht); padding: .7rem 1rem; text-decoration: none;
}
.skip:focus { top: 1rem; }

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

/* ---------- Lichtkegel (Verfolgerspot) ---------- */
.spot {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  --sx: 50%; --sy: 38%;
  background:
    radial-gradient(ellipse 34vmax 26vmax at var(--sx) var(--sy),
      rgba(246, 239, 223, var(--lichtkegel-staerke)),
      rgba(246, 239, 223, calc(var(--lichtkegel-staerke) * .38)) 42%,
      transparent 72%);
  transition: opacity .9s var(--ease-out);
  mix-blend-mode: screen;
}
body.saallicht .spot { opacity: 0; }
main, .kopf, .fuss { position: relative; z-index: 2; }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.kopf.ist-gescrollt { background: rgba(14, 13, 11, .97); border-bottom-color: rgba(200, 173, 134, .18); }
.kopf .innen { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); height: 4.75rem; }
.kopf .marke { margin-right: auto; display: block; }
.kopf .marke img { height: 2.35rem; width: auto; }
.nav { display: flex; gap: clamp(1rem, 2.2vw, 2rem); font-size: .9rem; letter-spacing: .02em; }
.nav a { color: var(--creme-70); text-decoration: none; padding: .4rem 0; transition: color .25s; }
.nav a:hover { color: var(--creme); }
.kopf-cta {
  font-size: .9rem; font-weight: 500; color: var(--gold); text-decoration: none;
  padding: .55rem 0; border-bottom: 1px solid var(--gold); transition: color .25s, border-color .25s;
}
.kopf-cta:hover { color: var(--creme); border-color: var(--creme); }
@media (max-width: 960px) { .nav { display: none; } }

/* ---------- Buttons ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1.05rem 1.7rem; font-size: .98rem; font-weight: 550; letter-spacing: .015em;
  text-decoration: none; border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out), border-color .3s;
}
.knopf svg { width: 1.05rem; height: 1.05rem; transition: transform .35s var(--ease-out); }
.knopf:hover svg { transform: translateX(3px); }
.knopf-licht { background: var(--creme); color: var(--nacht); }
.knopf-licht:hover { background: #fffaf0; }
.knopf-tinte { background: var(--tinte); color: var(--papier); }
.knopf-tinte:hover { background: #2a2722; }
.knopf-leise {
  padding-inline: 0; color: var(--creme); border-bottom: 1px solid var(--creme-20); border-radius: 0;
}
.knopf-leise:hover { border-bottom-color: var(--gold); }
.knopf[disabled] { opacity: .55; cursor: progress; }

/* ---------- Abschnitte allgemein ---------- */
.abschnitt { padding-block: var(--abschnitt-abstand); position: relative; }
.h2 {
  font-family: var(--serif); font-weight: 500; font-size: var(--h2-groesse);
  line-height: 1.04; letter-spacing: -.02em; text-wrap: balance;
  font-variation-settings: "opsz" 72;
}
.h2 em { font-style: italic; font-weight: 400; color: var(--gold); }
.licht-an .h2 em { color: var(--gold-dunkel); }
.h3 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.3vw, 2.05rem);
  line-height: 1.12; letter-spacing: -.01em; font-variation-settings: "opsz" 36;
}
.fliess { max-width: 62ch; color: var(--creme-70); }
.fliess + .fliess { margin-top: 1.1em; }
.fliess strong { color: var(--creme); font-weight: 550; }

/* Saallicht an: helle Abschnitte */
.licht-an { background: var(--papier); color: var(--tinte); }
.licht-an .fliess { color: var(--stein); }
.licht-an .fliess strong { color: var(--tinte); }

/* Übergang Saal -> Saallicht: weicher Lichtrand statt harter Kante */
.licht-an::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-40), transparent);
}

/* ---------- 1 Einstieg ---------- */
.einstieg {
  min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden;
  padding-top: var(--hero-oben); position: relative; isolation: isolate;
}
.einstieg .kegel {
  position: absolute; inset: -10vh -20vw 0; z-index: -1; pointer-events: none;
  background:
    conic-gradient(from 180deg at 50% -6%,
      transparent 157deg, rgba(246, 239, 223, .055) 166deg, rgba(246, 239, 223, .1) 180deg,
      rgba(246, 239, 223, .055) 194deg, transparent 203deg);
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}
.einstieg .boden {
  position: absolute; left: 50%; bottom: 0; width: 140vw; height: 46vh; z-index: -1;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse 30% 46% at 50% 76%, rgba(246, 239, 223, .16), rgba(246, 239, 223, .05) 48%, transparent 74%);
}
.gobo {
  position: absolute; left: 50%; bottom: clamp(-15rem, -16vw, -6rem); z-index: -1;
  width: var(--hero-gobo-groesse); aspect-ratio: 1;
  transform: translateX(-50%) perspective(900px) rotateX(70deg);
  opacity: .42; filter: blur(.6px) drop-shadow(0 0 18px rgba(200, 173, 134, .2));
  pointer-events: none;
}
.gobo img { width: 100%; height: 100%; animation: gobo-drehen 160s linear infinite; }
@keyframes gobo-drehen { to { transform: rotate(360deg); } }

.einstieg-text { text-align: center; padding-inline: var(--seitenrand); align-self: start; }
.slogan {
  font-family: var(--serif); font-weight: 500; font-size: var(--slogan-groesse);
  line-height: .96; letter-spacing: -.03em; font-variation-settings: "opsz" 96;
}
.slogan span { display: block; }
.slogan em { font-style: italic; font-weight: 400; color: var(--gold); letter-spacing: -.02em; }
.einstieg h1 {
  font-family: var(--serif); font-weight: 400; font-size: var(--h1-groesse); line-height: 1.3;
  margin-top: clamp(1.4rem, 3vh, 2.2rem); color: var(--creme); text-wrap: balance;
  font-variation-settings: "opsz" 28;
}
.einstieg .lead {
  max-width: 40rem; margin: 1rem auto 0; color: var(--creme-70); font-size: clamp(1rem, 1.25vw, 1.12rem);
  text-wrap: pretty;
}
.einstieg .aktionen { display: flex; gap: 1.8rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 2.2rem; }
.leiste {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.6rem var(--seitenrand) 2rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--creme-50); position: relative; z-index: 1;
}
.leiste b { color: var(--gold); font-weight: 600; }
@media (max-width: 640px) {
  .gobo { width: 118vw; bottom: -9rem; opacity: .26; }
  .leiste { justify-content: center; text-align: center; letter-spacing: .1em; }
  .leiste span:nth-child(2) { display: none; }
}

/* ---------- 2 Eine Ansprechperson ---------- */
.eine { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.eine .text .h2 { margin-bottom: 1.6rem; }
.suche { position: relative; padding-block: 1rem; }
.suche li {
  font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.25;
  color: rgba(246, 239, 223, .54); padding: .55rem 0; border-bottom: 1px solid rgba(246, 239, 223, .08);
  transition: color 1.2s var(--ease-out);
}
.suche li:nth-child(odd) { padding-left: 2.2rem; }
.suche .eins {
  margin-top: 1.4rem; padding: 1.4rem 0 0; border: 0; color: var(--creme);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem); font-style: italic; font-weight: 400;
}
.suche .eins b { font-style: normal; font-weight: 500; color: var(--gold); }
.suche .eins::before {
  content: ""; display: block; width: 3rem; height: 1px; background: var(--gold); margin-bottom: 1.2rem;
}
@media (max-width: 860px) { .eine { grid-template-columns: 1fr; } }

/* ---------- 3 Leistungen ---------- */
.leistungen-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.leistungen-kopf .fliess { justify-self: end; }
.programm { border-top: 1px solid var(--creme-20); }
.programm li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem 3rem; align-items: baseline;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) 0; border-bottom: 1px solid var(--creme-20); position: relative;
  transition: background-color .6s var(--ease-out);
}
.programm li::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity .6s var(--ease-out);
}
.programm li.ist-aktiv::before { opacity: 1; }
.programm li.ist-aktiv .h3 { color: var(--creme); }
.programm .h3 { color: var(--creme-70); transition: color .6s var(--ease-out); }
.programm p { color: var(--creme-70); max-width: 56ch; }
.leistungen-fuss { margin-top: 2.6rem; display: flex; justify-content: flex-end; }
@media (max-width: 860px) {
  .leistungen-kopf { grid-template-columns: 1fr; }
  .leistungen-kopf .fliess { justify-self: start; }
  .programm li { grid-template-columns: 1fr; gap: .5rem; }
  .leistungen-fuss { justify-content: flex-start; }
}

/* ---------- 4 Hochzeitstag: Länge ist Dauer ---------- */
.tag-kopf { max-width: 46rem; margin-bottom: clamp(2.8rem, 5vw, 4rem); }
.tag-kopf .fliess { margin-top: 1.4rem; }
.tag-band { display: none; }
.tag { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); align-items: start; }
.tag > li { flex: var(--dauer) 1 0; min-width: 0; position: relative; padding-top: 2.2rem; }
.tag > li::before { content: ""; position: absolute; left: 0; right: calc(-1 * clamp(1rem, 2.4vw, 2.2rem) + 2px); top: 0; height: 6px; background: var(--gold); opacity: var(--hell); }
.tag > li:last-child::before { right: 0; }
.tag .h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); margin-bottom: .6rem; }
.tag p { color: var(--creme-70); font-size: .98rem; }
.tag-satz { margin-top: clamp(2.5rem, 5vw, 3.5rem); font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--creme); max-width: 40rem; }
@media (max-width: 860px) {
  .tag { flex-direction: column; gap: 0; }
  .tag > li { padding: 1.3rem 0 1.3rem 1.2rem; min-height: calc(var(--dauer) * 1.6rem + 4rem); }
  .tag > li::before { left: 0; right: auto; top: 1.6rem; bottom: .4rem; width: 2px; height: auto; }
}

/* ---------- 5 Firmenfeier ---------- */
.firma { background: var(--nacht-2); }
.firma .innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.anlaesse li {
  font-family: var(--serif); font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.08; letter-spacing: -.02em;
  color: rgba(246, 239, 223, .54); transition: color .9s var(--ease-out);
}
.anlaesse li.ist-aktiv { color: var(--creme); }
.anlaesse li:nth-child(2) { padding-left: 1.5em; }
.anlaesse li:nth-child(3) { padding-left: .7em; }
.anlaesse li:nth-child(4) { padding-left: 2.2em; }
.firma .h2 { margin-bottom: 1.6rem; }
.firma .knopf { margin-top: 2rem; }
@media (max-width: 860px) { .firma .innen { grid-template-columns: 1fr; } .anlaesse { order: 2; } }

/* ---------- 6 Ablauf (Saallicht an) ---------- */
.ablauf .h2 { max-width: 18ch; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.schritte::before {
  content: ""; position: absolute; left: 0; right: 0; top: 2.1rem; height: 1px; background: var(--linie-hell);
}
.schritte::after {
  content: ""; position: absolute; left: 0; top: 2.1rem; height: 1px; width: calc(var(--fortschritt, 0) * 100%);
  background: var(--tinte); transition: width .2s linear;
}
.schritt { position: relative; padding-right: clamp(1rem, 2.5vw, 2.5rem); }
.schritt .zahl {
  display: block; font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--tinte);
  background: var(--papier); width: max-content; padding-right: .8rem; position: relative; z-index: 1;
  font-variant-numeric: lining-nums;
}
.schritt .taktstrich { position: absolute; left: 0; top: 0; width: 1px; height: 4.2rem; background: var(--linie-hell); display: none; }
.schritt .h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); margin: 1.6rem 0 .7rem; }
.schritt p { color: var(--stein); font-size: .98rem; }
.schritt-ende .zahl::after { content: ""; }
.schritte-rahmen { position: relative; }
.schluss {
  position: absolute; right: 0; top: 1.2rem; width: 14px; height: 1.8rem; z-index: 1;
  border-left: 2px solid var(--tinte); border-right: 6px solid var(--tinte); background: var(--papier);
  box-sizing: content-box; margin-right: -2px;
}
@media (max-width: 860px) {
  .schritte { grid-template-columns: 1fr; gap: 2.2rem; padding-left: 1.6rem; }
  .schritte::before { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .schritte::after { left: 0; top: 0; width: 1px; height: calc(var(--fortschritt, 0) * 100%); }
  .schritt .zahl { background: none; padding: 0; font-size: 2.1rem; }
  .schritt .h3 { margin-top: .6rem; }
  .schluss { display: none; }
}

/* ---------- 7 Zahlen und Stimmen ---------- */
.belege .h2 { max-width: 20ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.belege-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.setliste li {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.5rem; align-items: baseline;
  padding: 1.15rem 0; border-bottom: 1px solid var(--creme-20);
}
.setliste li:first-child { border-top: 1px solid var(--creme-20); }
.setliste b {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1;
  color: var(--creme); font-variant-numeric: lining-nums;
}
.setliste span { color: var(--creme-70); }
.setliste small { display: block; font-size: .82rem; color: var(--creme-50); margin-top: .2rem; }
.stimmen h3 { font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--creme-50); margin-bottom: 1.6rem; }
.stimme + .stimme { margin-top: 2.2rem; padding-top: 2.2rem; border-top: 1px solid var(--creme-20); }
.stimme blockquote p {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  line-height: 1.3; color: var(--creme); text-wrap: pretty;
}
.stimme figcaption { margin-top: .9rem; color: var(--gold); font-size: .95rem; }
.stimmen .hinweis { margin-top: 2rem; font-size: .85rem; color: var(--creme-50); }
@media (max-width: 860px) { .belege-raster { grid-template-columns: 1fr; } }

/* ---------- 8 Über Toby ---------- */
.toby .innen { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.toby-bild { position: relative; max-width: 30rem; }
.toby-bild::after {
  content: ""; position: absolute; inset: -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(246, 239, 223, .12), transparent 62%);
}
.toby-portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.85) contrast(1.03); }
.toby-siegel { width: 88%; margin-inline: auto; opacity: .85; }
.toby-bild.hat-foto .toby-siegel { position: absolute; width: 34%; right: -10%; bottom: -8%; opacity: 1;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6)); animation: gobo-drehen 90s linear infinite; }
.toby .h2 { margin-bottom: 1.6rem; }
.toby .mehr { margin-top: 1.8rem; display: inline-block; color: var(--gold); }
@media (max-width: 860px) { .toby .innen { grid-template-columns: 1fr; } .toby-bild { max-width: 22rem; } .toby-bild.hat-foto .toby-siegel { right: -4%; width: 30%; } }

/* ---------- 9 Einsatzgebiet ---------- */
.gebiet { padding-block: calc(var(--abschnitt-abstand) * .7); text-align: center; border-top: 1px solid rgba(246, 239, 223, .06); }
.orte {
  font-family: var(--serif); font-size: clamp(2.2rem, 6.4vw, 5.6rem); line-height: 1.02; letter-spacing: -.025em;
  margin-top: 1.6rem; color: var(--creme);
}
.orte .punkt { color: var(--gold); }
.orte .leise { color: var(--creme-50); font-style: italic; }
.gebiet .h2 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 400; color: var(--creme-70); }
.gebiet .fliess { margin: 2rem auto 0; }

/* ---------- 10 Fragen (Saallicht an) ---------- */
.fragen .innen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.fragen-kopf { position: sticky; top: 7rem; }
.fragen-kopf .fliess { margin-top: 1.4rem; }
.faq details { border-bottom: 1px solid var(--linie-hell); }
.faq details:first-child { border-top: 1px solid var(--linie-hell); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1.4rem 1fr 1.2rem; gap: .6rem; align-items: baseline;
  padding: 1.35rem 0; font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.38rem); line-height: 1.3; color: var(--tinte);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .strich { width: 9px; height: 1.05em; align-self: center; opacity: 0; transition: opacity .3s; }
.faq summary .strich::before {
  content: ""; display: block; width: 100%; height: 100%;
  border-left: 1px solid var(--gold-dunkel); border-right: 3px solid var(--gold-dunkel); box-sizing: border-box;
}
.faq details[open] summary .strich { opacity: 1; }
.faq summary .plus { width: 1rem; height: 1rem; position: relative; align-self: center; }
.faq summary .plus::before, .faq summary .plus::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--tinte);
  transition: transform .35s var(--ease-out);
}
.faq summary .plus::after { transform: rotate(90deg); }
.faq details[open] summary .plus::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--gold-dunkel); }
.faq .antwort { padding: 0 2rem 1.6rem 2rem; color: var(--stein); max-width: 62ch; }
.faq .antwort a { color: var(--tinte); }
@media (max-width: 860px) { .fragen .innen { grid-template-columns: 1fr; } .fragen-kopf { position: static; } .faq .antwort { padding-inline: 2rem 0; } }

/* ---------- 11 Anfrage (Saallicht an) ---------- */
.anfrage { background: var(--papier); }
.anfrage .innen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.anfrage-kopf .fliess { margin-top: 1.4rem; }
.anfrage-kopf .direkt { margin-top: 2.2rem; font-size: .95rem; color: var(--stein); }
.anfrage-kopf .direkt a { color: var(--tinte); }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.5rem; }
.feld { display: flex; flex-direction: column; gap: .45rem; }
.feld.breit, fieldset.feld { grid-column: 1 / -1; }
.feld label, .feld legend { font-size: .9rem; font-weight: 600; color: var(--tinte); }
.feld .opt { font-weight: 400; color: var(--stein); }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld input[type="number"],
.feld input[type="date"], .feld select, .feld textarea {
  width: 100%; padding: .85rem .95rem; background: var(--papier); color: var(--tinte);
  border: 1px solid rgba(20, 19, 17, .28); border-radius: 2px; font-size: 1rem; line-height: 1.4;
  transition: border-color .25s, box-shadow .25s;
}
.feld textarea { min-height: 7.5rem; resize: vertical; }
.feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinte) 50%), linear-gradient(135deg, var(--tinte) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: rgba(20, 19, 17, .5); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px rgba(126, 100, 64, .22); }
.feld input::placeholder, .feld textarea::placeholder { color: #6f685d; }
.feld .tipp { font-size: .85rem; color: var(--stein); }
.feld .fehler { display: none; font-size: .85rem; color: #8E2A1E; }
.feld.hat-fehler .fehler { display: block; }
.feld.hat-fehler input, .feld.hat-fehler select, .feld.hat-fehler textarea { border-color: #8E2A1E; }
fieldset.feld { border: 0; padding: 0; margin: 0; }
.wahl { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.wahl label { position: relative; cursor: pointer; font-size: .92rem; font-weight: 500; }
.wahl input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.wahl span {
  display: inline-flex; align-items: center; gap: .55rem; padding: .6rem .95rem; border: 1px solid rgba(20, 19, 17, .28);
  border-radius: 2px; background: var(--papier); transition: border-color .2s, background-color .2s;
}
.wahl span::before {
  content: ""; width: 0; height: .95em; border-left: 1px solid var(--tinte); border-right: 3px solid var(--tinte);
  opacity: 0; margin-right: -.55rem; transition: opacity .2s, width .2s, margin .2s;
}
.wahl input:checked + span { border-color: var(--tinte); background: #fff; }
.wahl input:checked + span::before { opacity: 1; width: 7px; margin-right: 0; }
.wahl input:focus-visible + span { outline: 1.5px solid var(--gold-dunkel); outline-offset: 3px; }
.wahl label:hover span { border-color: var(--tinte); }
.zustimmung label { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; font-size: .92rem; color: var(--stein); }
.zustimmung input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--tinte); flex: none; }
.zustimmung a { color: var(--tinte); }
.senden { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: .4rem; }
.status { font-size: .92rem; color: #8E2A1E; }
.hp { position: absolute; left: -9999px; }
.danke[hidden] { display: none; }
.danke { padding: 2.5rem 0; }
.danke .h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.danke p { margin-top: 1rem; color: var(--stein); }
#anfrage-bereich.ist-gesendet .formular { display: none; }
@media (max-width: 860px) { .anfrage .innen { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .formular { grid-template-columns: 1fr; } }

/* ---------- Fuß ---------- */
.fuss { background: var(--nacht); padding: 4.5rem 0 2.5rem; border-top: 1px solid rgba(200, 173, 134, .18); }
.fuss .innen { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem 3rem; align-items: center; }
.fuss .siegel-klein { width: 5.5rem; }
.fuss .wer { font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; }
.fuss .wer span { display: block; font-family: var(--sans); font-size: .9rem; color: var(--creme-50); margin-top: .3rem; }
.fuss .kontakt { font-size: .92rem; color: var(--creme-70); text-align: right; line-height: 1.9; }
.fuss .kontakt a { text-decoration: none; }
.fuss .kontakt a:hover { color: var(--gold); }
.fuss .unten {
  grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding-top: 1.8rem; margin-top: 1rem; border-top: 1px solid rgba(246, 239, 223, .08); font-size: .85rem; color: var(--creme-50);
}
.fuss .unten nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.fuss .unten a { text-decoration: none; }
.fuss .unten a:hover { color: var(--creme); }
@media (max-width: 760px) { .fuss .innen { grid-template-columns: 1fr; } .fuss .kontakt { text-align: left; } }

/* ---------- Ratgeber-Seite ---------- */
.ratgeber-kopf { padding-top: calc(var(--hero-oben) * .9); padding-bottom: clamp(4rem, 9vw, 7rem); position: relative; overflow: hidden; isolation: isolate; }
.ratgeber-kopf .kegel { position: absolute; inset: -10vh -20vw 0; z-index: -1; pointer-events: none;
  background: conic-gradient(from 180deg at 28% -6%, transparent 160deg, rgba(246, 239, 223, .06) 170deg, rgba(246, 239, 223, .1) 180deg, rgba(246, 239, 223, .06) 190deg, transparent 200deg); }
.ratgeber-kopf h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1; letter-spacing: -.025em;
  max-width: 14ch; text-wrap: balance; font-variation-settings: "opsz" 96;
}
.ratgeber-kopf h1 em { font-style: italic; font-weight: 400; color: var(--gold); }
.kurz {
  margin-top: clamp(2rem, 4vw, 3rem); max-width: 42rem; font-family: var(--sans); font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.6; color: var(--creme); padding-top: 1.6rem; border-top: 1px solid var(--gold-40);
}
.autor { margin-top: 1.6rem; font-size: .9rem; color: var(--creme-50); }
.autor a { color: var(--gold); }
.brotkrumen { font-size: .85rem; color: var(--creme-50); margin-bottom: 2.2rem; }
.brotkrumen a { color: var(--creme-70); }
.ratgeber .h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 2rem; max-width: 22ch; }
.faktoren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 4rem; }
.faktoren li { padding-top: 1.3rem; border-top: 1px solid var(--linie-hell); }
.faktoren .h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); margin-bottom: .6rem; }
.faktoren p { color: var(--stein); }
.haken li { padding: .9rem 0 .9rem 2rem; border-bottom: 1px solid var(--linie-hell); position: relative; color: var(--tinte); max-width: 60ch; }
.haken li::before {
  content: ""; position: absolute; left: 0; top: 1.15rem; width: 7px; height: 1.05em;
  border-left: 1px solid var(--gold-dunkel); border-right: 3px solid var(--gold-dunkel); box-sizing: border-box;
}
.zwei-spalten { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.zitat-satz { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.2; color: var(--creme); max-width: 24ch; }
.abschluss { text-align: center; }
.abschluss .h2 { margin-inline: auto; }
.abschluss .fliess { margin: 0 auto 2.2rem; }
@media (max-width: 860px) { .faktoren, .zwei-spalten { grid-template-columns: 1fr; } }

/* ---------- Rechtstexte ---------- */
.recht { padding-top: calc(var(--hero-oben) * .8); }
.recht h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; margin-bottom: 2.5rem; }
.recht h2 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin: 2.5rem 0 .8rem; }
.recht p, .recht li { color: var(--stein); max-width: 68ch; }
.recht p + p { margin-top: .9rem; }

/* ---------- Einblenden (Inhalt immer sichtbar, nur sanft) ---------- */
.js .auftritt { opacity: .001; transform: translateY(18px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.js .auftritt.ist-da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gobo img { animation: none; }
  .spot { display: none; }
  .js .auftritt { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; }
}


/* ================= Ergänzung: Fotos und Bewegung ================= */

/* Button mit Rahmen (gut sichtbar auf Dunkel) */
.knopf-rahmen { color: var(--creme); border-color: rgba(246, 239, 223, .55); background: rgba(246, 239, 223, .04); }
.knopf-rahmen:hover { border-color: var(--creme); background: rgba(246, 239, 223, .1); }

/* Lichtschimmer über Buttons beim Darüberfahren */
.knopf { position: relative; overflow: hidden; isolation: isolate; }
.knopf::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s var(--ease-out);
}
.knopf-tinte::after, .knopf-rahmen::after { background: linear-gradient(105deg, transparent 30%, rgba(246, 239, 223, .18) 50%, transparent 70%); }
.knopf:hover::after { transform: translateX(120%); }

/* Einstieg: Foto unter dem Lichtkegel, Kegel pendelt wie ein Moving Head, Staub im Licht */
.einstieg-foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  opacity: .28; filter: grayscale(.35) brightness(.7);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 35%, #000 20%, transparent 80%);
}
.einstieg .kegel { transform-origin: 50% 0; animation: kegel-pendeln 11s ease-in-out infinite alternate; }
@keyframes kegel-pendeln { from { transform: rotate(-3.2deg); } to { transform: rotate(3.2deg); } }
.staub { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* Slogan: Licht fährt beim Laden einmal über die Zeilen */
.js .slogan span, .js .slogan em {
  display: block;
  background: linear-gradient(100deg, currentColor 0 40%, #fffaf0 50%, currentColor 60% 100%) 0 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: slogan-licht 2.6s .35s var(--ease-out) both;
}
.js .slogan em { animation-delay: .75s; }
@keyframes slogan-licht { from { background-position: 100% 0; opacity: .15; } 30% { opacity: 1; } to { background-position: 0 0; opacity: 1; } }

/* Überschriften: wischen beim Hereinscrollen ins Licht */
.js .wisch { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--ease-out); }
.js .wisch.ist-da { clip-path: inset(0 0 0 0); }

/* Leistungen: Foto erscheint im Licht der aktiven Zeile */
.programm li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 15rem; }
.leistung-foto {
  grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 100%; aspect-ratio: 10 / 7; object-fit: cover;
  opacity: 0; transform: scale(.94) translateX(12px); filter: grayscale(.5) brightness(.8);
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
}
.programm li.ist-aktiv .leistung-foto, .programm li:hover .leistung-foto { opacity: 1; transform: none; filter: none; }
.programm.ohne-fotos li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 860px) {
  .programm li { grid-template-columns: 1fr; }
  .leistung-foto { grid-column: 1; grid-row: auto; opacity: 1; transform: none; filter: none; margin-top: .6rem; }
}

/* Momente: langsam laufender Fotostreifen */
.momente { overflow: hidden; padding-block: clamp(2rem, 5vw, 4rem); position: relative; z-index: 2; }
.momente[hidden] { display: none; }
.momente-band { display: flex; gap: clamp(.8rem, 1.5vw, 1.4rem); width: max-content; animation: momente-laufen 60s linear infinite; }
.momente:hover .momente-band { animation-play-state: paused; }
.momente-band img { height: clamp(16rem, 34vw, 26rem); width: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(.3) brightness(.85); transition: filter .6s; }
.momente-band img:hover { filter: none; }
@keyframes momente-laufen { to { transform: translateX(-50%); } }

/* Anlässe leuchten nacheinander auf */
.anlaesse li { transition: color .9s var(--ease-out), text-shadow .9s var(--ease-out); }
.anlaesse li.ist-aktiv { text-shadow: 0 0 40px rgba(246, 239, 223, .18); }

@media (prefers-reduced-motion: reduce) {
  .einstieg .kegel, .momente-band, .toby-bild.hat-foto .toby-siegel { animation: none; }
  .js .slogan span, .js .slogan em { animation: none; -webkit-text-fill-color: currentColor; background: none; }
  .js .wisch { clip-path: none; }
  .staub { display: none; }
  .momente { overflow-x: auto; }
}

/* ================= Leistungen als Bühne ================= */
.leistungen-buehne { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.buehne {
  position: sticky; top: 6.5rem; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 70% 60% at 50% 105%, #1d1a14, var(--nacht) 70%);
  border: 1px solid rgba(200, 173, 134, .16);
}
.buehne-licht {
  position: absolute; inset: -20% -10% 0; z-index: 1; pointer-events: none; transform-origin: 50% 0;
  background: conic-gradient(from 180deg at 50% 0%, transparent 155deg, rgba(246, 239, 223, .07) 166deg, rgba(246, 239, 223, .16) 180deg, rgba(246, 239, 223, .07) 194deg, transparent 205deg);
  transition: transform 1s var(--ease-out);
}
.buehne.schwenk .buehne-licht { animation: schwenk 1.1s var(--ease-out); }
@keyframes schwenk { 0% { transform: rotate(-22deg); opacity: .4; } 100% { transform: rotate(0); opacity: 1; } }
.buehne-boden {
  position: absolute; left: 50%; bottom: -18%; width: 80%; height: 40%; transform: translateX(-50%); z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(246, 239, 223, .16), transparent 65%);
}
.szene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .7s var(--ease-out); z-index: 2; }
.szene.ist-aktiv { opacity: 1; }
.szene .ill { width: 74%; height: auto; color: var(--gold); overflow: visible; }
.ill * { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ill .rille { stroke: rgba(200, 173, 134, .45); stroke-width: 1; }
.ill .tasten circle, .ill .noten ellipse, .ill .lichter circle, .ill .rec { fill: currentColor; stroke: none; }
.ill .zug { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out); }
.szene.ist-aktiv .zug { stroke-dashoffset: 0; }
.szene.ist-aktiv .dreh { animation: drehen 6s linear infinite; }
.szene.ist-aktiv .wellen path { animation: pulsieren 1.6s ease-in-out infinite alternate; }
.szene.ist-aktiv .wellen path + path { animation-delay: .5s; }
.szene.ist-aktiv .noten > g { animation: schweben 3.2s ease-in-out infinite alternate; }
.szene.ist-aktiv .noten .n2 { animation-delay: .8s; } .szene.ist-aktiv .noten .n3 { animation-delay: 1.6s; }
.szene.ist-aktiv .blitz path, .szene.ist-aktiv .funken path { animation: blitzen 2.4s ease-in-out infinite; }
.szene.ist-aktiv .ringe { animation: schweben 4s ease-in-out infinite alternate; }
.szene.ist-aktiv .lichter circle { animation: funkeln 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * .27s); }
.szene.ist-aktiv .stock { animation: schlag 0.9s ease-in-out infinite alternate; transform-origin: 300px 168px; }
.szene.ist-aktiv .stock2 { animation: schlag 0.9s .45s ease-in-out infinite alternate; transform-origin: 340px 168px; }
.szene.ist-aktiv .rec { animation: blitzen 1.4s steps(2) infinite; fill: #c0563e; }
@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes pulsieren { from { opacity: .25; } to { opacity: 1; } }
@keyframes schweben { from { transform: translateY(6px); } to { transform: translateY(-8px); } }
@keyframes blitzen { 0%, 70%, 100% { opacity: .15; } 80% { opacity: 1; } }
@keyframes funkeln { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes schlag { from { transform: rotate(0); } to { transform: rotate(-14deg); } }
.szene-foto, .szene-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.szene-video:not([data-bereit]) { display: none; }
.szene.hat-medium .ill { display: none; }
.szene.hat-medium::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(14, 13, 11, .55)); }

.leistungen-buehne .programm { border-top: 1px solid var(--creme-20); }
.leistungen-buehne .programm li.leistung {
  display: block; padding: 1.5rem 0 1.5rem 1.6rem; border-bottom: 1px solid var(--creme-20); cursor: pointer; position: relative;
  transition: background-color .5s var(--ease-out);
}
.leistungen-buehne .programm li.leistung::before {
  content: ""; position: absolute; left: 0; top: 1.85rem; width: 7px; height: 1.3rem; opacity: 0; transform: scaleY(.4);
  border-left: 1px solid var(--gold); border-right: 3px solid var(--gold); box-sizing: border-box; background: none;
  transition: opacity .4s, transform .5s var(--ease-out); right: auto;
}
.leistungen-buehne .programm li.leistung.ist-gewaehlt::before { opacity: 1; transform: none; }
.leistungen-buehne .programm li.leistung .h3 { color: var(--creme-50); transition: color .5s var(--ease-out), transform .5s var(--ease-out); }
.leistungen-buehne .programm li.leistung.ist-gewaehlt .h3, .leistungen-buehne .programm li.leistung:hover .h3 { color: var(--creme); }
.leistungen-buehne .programm li.leistung.ist-gewaehlt .h3 { transform: translateX(4px); }
.leistungen-buehne .programm li.leistung p { display: grid; grid-template-rows: 0fr; opacity: 0; margin: 0; transition: opacity .5s, margin .5s var(--ease-out); max-height: 0; overflow: hidden; }
.leistungen-buehne .programm li.leistung.ist-gewaehlt p { opacity: 1; max-height: 12rem; margin-top: .7rem; }
.leistungen-buehne .programm li.leistung .passt { font-size: .85rem; letter-spacing: .01em; color: var(--gold); }
.leistungen-buehne .programm li.leistung .passt span { color: var(--creme-50); margin-right: .4rem; }
.leistungen-buehne .programm li.leistung:focus-visible { outline-offset: -2px; }
@media (max-width: 860px) {
  .leistungen-buehne { grid-template-columns: 1fr; }
  .buehne { top: 4.75rem; z-index: 3; aspect-ratio: 16 / 9; box-shadow: 0 -14px 0 var(--nacht), 0 18px 24px -6px var(--nacht); }
  .leistungen-buehne .programm li.leistung p { opacity: 1; max-height: none; margin-top: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .szene .zug { stroke-dashoffset: 0; transition: none; }
  .szene * { animation: none !important; }
}

/* ================= Firmenfeier: großer Auftritt ================= */
section.firma {
  position: relative; overflow: hidden; padding: 0 0 var(--abschnitt-abstand);
  background: linear-gradient(180deg, var(--nacht) 0%, #17140f 30%, #17140f 75%, var(--nacht) 100%);
  border-top: 1px solid rgba(200, 173, 134, .22); border-bottom: 1px solid rgba(200, 173, 134, .22);
}
section.firma .innen { display: block; }
section.firma .knopf { margin-top: 0; }
.laufschrift { overflow: hidden; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.laufschrift-band { display: flex; width: max-content; animation: laufen 38s linear infinite; }
.laufschrift-band span {
  font-family: var(--serif); font-weight: 500; font-size: clamp(4.5rem, 13vw, 12rem); line-height: .9; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1px rgba(200, 173, 134, .55); padding-right: .45em; white-space: nowrap;
}
.laufschrift-band span:nth-child(even) { font-style: italic; font-weight: 400; -webkit-text-stroke: 1px rgba(246, 239, 223, .3); }
@keyframes laufen { to { transform: translateX(-50%); } }

.firma-kopf { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2.5rem, 6vw, 6rem); align-items: end; }
.firma-kopf .h2 { font-size: clamp(2.6rem, 5.6vw, 5.2rem); }

.firma-planer { display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); margin-top: clamp(3.5rem, 7vw, 6rem); align-items: start; }
.anlass .h3 { font-size: 1rem; font-family: var(--sans); font-weight: 600; color: var(--creme-50); margin-bottom: 1.2rem; }
.anlass-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--creme-20); }
.anlass-tab {
  all: unset; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--creme-20);
  font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.1; color: var(--creme-50);
  transition: color .4s var(--ease-out), padding .5s var(--ease-out);
}
.anlass-tab::before {
  content: ""; width: 7px; height: .9em; flex: none; border-left: 1px solid var(--gold); border-right: 3px solid var(--gold);
  box-sizing: border-box; opacity: 0; transform: scaleY(.3); transition: opacity .4s, transform .5s var(--ease-out);
}
.anlass-tab:hover { color: var(--creme-70); }
.anlass-tab[aria-selected="true"] { color: var(--creme); padding-left: .4rem; }
.anlass-tab[aria-selected="true"]::before { opacity: 1; transform: none; }
.anlass-tab:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 4px; }
.anlass-panel { padding-top: 1.6rem; animation: panel-ein .7s var(--ease-out); }
@keyframes panel-ein { from { opacity: 0; transform: translateY(10px); } }
.anlass-satz { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.35; color: var(--creme); max-width: 34ch; }
.anlass-passt { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1.2rem; font-size: .88rem; }
.anlass-passt span { color: var(--creme-50); margin-right: .3rem; }
.anlass-passt b { font-weight: 500; color: var(--gold); border: 1px solid rgba(200, 173, 134, .4); padding: .35rem .7rem; border-radius: 2px; }

.pegel { margin: 0; padding: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid rgba(200, 173, 134, .2); background: rgba(14, 13, 11, .55); position: relative; }
.pegel figcaption { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--creme); margin-bottom: 1.6rem; }
.pegel-balken { display: flex; align-items: flex-end; gap: 3px; height: clamp(9rem, 16vw, 13rem); }
.pegel-balken i {
  flex: 1 1 0; background: linear-gradient(to top, rgba(200, 173, 134, .35), var(--gold)); border-radius: 1px;
  height: calc(var(--h) * 1%); transform-origin: bottom; transform: scaleY(.04); transition: transform 1.2s var(--ease-out);
  transition-delay: calc(var(--n) * 14ms);
}
.pegel.ist-an .pegel-balken i { transform: scaleY(1); animation: zittern calc(.5s + var(--z) * .5s) ease-in-out calc(1.2s + var(--n) * 14ms) infinite alternate; }
.pegel-balken i.ruhe { background: rgba(246, 239, 223, .16); }
@keyframes zittern { from { transform: scaleY(1); } to { transform: scaleY(calc(.72 + var(--z) * .2)); } }
.pegel-phasen { display: flex; margin-top: 1rem; border-top: 1px solid var(--creme-20); }
.pegel-phasen li { flex: var(--b) 1 0; padding: .9rem .6rem 0 0; min-width: 0; }
.pegel-phasen b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.15rem; color: var(--creme); }
.pegel-phasen span { display: block; font-size: .82rem; line-height: 1.4; color: var(--creme-50); margin-top: .2rem; }

.gruende { margin-top: clamp(3.5rem, 7vw, 6rem); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--creme-20); }
.gruende li { padding: 1.4rem 1.4rem 0 0; color: var(--creme-70); font-size: .95rem; line-height: 1.5; position: relative; }
.gruende li + li { padding-left: 1.4rem; border-left: 1px solid var(--creme-20); }
.gruende b { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.15; color: var(--creme); margin-bottom: .5rem; }
.firma-aktion { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }

@media (max-width: 960px) {
  .firma-kopf, .firma-planer { grid-template-columns: 1fr; }
  .gruende { grid-template-columns: 1fr 1fr; }
  .gruende li + li { border-left: 0; padding-left: 0; }
  .gruende li { border-bottom: 1px solid var(--creme-20); padding-bottom: 1.2rem; }
}
@media (max-width: 560px) {
  .gruende { grid-template-columns: 1fr; }
  .pegel-phasen { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1rem; }
  .pegel-phasen li { padding-top: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .laufschrift-band { animation: none; }
  .pegel-balken i { transform: none; transition: none; }
  .pegel.ist-an .pegel-balken i { animation: none; }
}

/* ================= Unterseiten Firmenfeier / Weihnachtsfeier ================= */
.unterseite-kopf { min-height: 82svh; display: flex; align-items: center; }
.unterseite-kopf h1 { max-width: 16ch; }
.unterseite-kopf .staub { position: absolute; inset: 0; z-index: -1; }
.aktionen-links { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin-top: 2.4rem; }
.aktionen-mitte { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; justify-content: center; margin-top: 2.2rem; }

/* Kundennamen als laufende Schrift */
.kunden { padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid rgba(200, 173, 134, .18); border-bottom: 1px solid rgba(200, 173, 134, .18); overflow: hidden; position: relative; z-index: 2; background: var(--nacht); }
.kunden-titel { font-family: var(--sans); font-size: .95rem; font-weight: 600; letter-spacing: .02em; color: var(--creme-70); margin-bottom: 2rem; }
.kunden-reihen { display: grid; gap: .6rem; }
.kunden-band { display: flex; width: max-content; animation: laufen 55s linear infinite; }
.kunden-band.rueck { animation-direction: reverse; animation-duration: 48s; }
.kunden-band span {
  font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.2; color: var(--creme); white-space: nowrap; padding-right: .9em; position: relative;
}
.kunden-band span::after { content: "·"; position: absolute; right: .3em; color: var(--gold); }
.kunden-band.rueck span { font-style: italic; color: var(--creme-70); }
.kunden:hover .kunden-band { animation-play-state: paused; }

.gruende-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gruende-6 li { padding: 1.4rem 1.4rem 1.6rem 0; border-bottom: 1px solid var(--creme-20); }
.gruende-6 li + li { padding-left: 0; border-left: 0; }
.gruende-6 li:not(:nth-child(3n+1)) { padding-left: 1.4rem; border-left: 1px solid var(--creme-20); }
section.firma.firma-unterseite { padding-top: var(--abschnitt-abstand); }

.liste-gross li { padding: 1.3rem 0; border-bottom: 1px solid var(--creme-20); color: var(--creme-70); transition: color .6s; }
.liste-gross li:first-child { border-top: 1px solid var(--creme-20); }
.liste-gross b { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; color: var(--creme-70); margin-bottom: .4rem; transition: color .6s, transform .6s var(--ease-out); }
.liste-gross li.ist-aktiv b { color: var(--creme); transform: translateX(6px); }

.abend { display: flex; gap: 2px; margin-top: clamp(2.5rem, 5vw, 4rem); }
.abend li { flex: var(--d) 1 0; min-width: 0; padding: 1.6rem 1.4rem 1.4rem; background: rgba(246, 239, 223, .035); border-top: 2px solid rgba(200, 173, 134, .35); transition: background-color .6s, border-color .6s; }
.abend li.ist-aktiv { background: rgba(246, 239, 223, .08); border-top-color: var(--gold); }
.abend-nr { display: block; font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--gold); margin-bottom: 1rem; }
.abend b { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 1.8vw, 1.6rem); color: var(--creme); margin-bottom: .5rem; }
.abend p { color: var(--creme-70); font-size: .97rem; }

.ideen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--creme-20); }
.ideen li {
  display: flex; align-items: center; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--creme-20);
  font-family: var(--serif); font-size: clamp(1.3rem, 2.1vw, 1.8rem); line-height: 1.2; color: var(--creme-70); transition: color .6s;
}
.ideen li::before { content: ""; flex: none; width: 7px; height: .9em; border-left: 1px solid var(--gold); border-right: 3px solid var(--gold); box-sizing: border-box; opacity: .4; transition: opacity .5s; }
.ideen li.ist-aktiv { color: var(--creme); }
.ideen li.ist-aktiv::before { opacity: 1; }

@media (max-width: 860px) {
  .gruende-6 { grid-template-columns: 1fr 1fr; }
  .gruende-6 li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .abend { flex-direction: column; }
  .ideen { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .gruende-6 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .kunden-band { animation: none; flex-wrap: wrap; width: auto; } }
.firma-weiter { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin-top: 1.8rem; }
.firma-weiter a { color: var(--gold); text-decoration: underline; text-decoration-color: var(--gold-40); }
.firma-weiter a:hover { color: var(--creme); }
.kopf-siegel {
  position: absolute; right: max(var(--seitenrand), calc((100vw - var(--inhalt-breite)) / 2)); top: 50%; z-index: -1;
  width: min(34vw, 30rem); opacity: .5; transform: translateY(-42%); animation: gobo-drehen 140s linear infinite;
  filter: drop-shadow(0 0 30px rgba(200, 173, 134, .18));
}
@media (max-width: 960px) { .kopf-siegel { width: 60vw; right: -18vw; top: 18%; opacity: .16; } }
@media (prefers-reduced-motion: reduce) { .kopf-siegel { animation: none; } }

/* ================= Anfrage in vier Schritten ================= */
.formular.schrittweise { display: block; background: var(--papier); border: 1px solid rgba(20, 19, 17, .14); padding: clamp(1.4rem, 3.5vw, 2.6rem); }
.takte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 1.1rem; }
.takt { display: flex; flex-direction: column; gap: .55rem; font-size: .78rem; letter-spacing: .04em; color: var(--stein); }
.takt i { display: block; height: 4px; background: rgba(20, 19, 17, .12); position: relative; overflow: hidden; }
.takt i::after { content: ""; position: absolute; inset: 0; background: var(--tinte); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.takt.ist-dran i::after { transform: scaleX(.5); background: var(--gold-dunkel); }
.takt.ist-fertig i::after { transform: scaleX(1); }
.takt.ist-fertig { cursor: pointer; color: var(--tinte); }
.takt.ist-dran { color: var(--tinte); font-weight: 600; }
.schritt-info { font-size: .82rem; color: var(--stein); margin-bottom: 1.6rem; }
.schritt-feld { border: 0; margin: 0; padding: 0; min-width: 0; }
.ist-schrittweise .schritt-feld.ist-dran { animation: schritt-ein .6s var(--ease-out); }
@keyframes schritt-ein { from { opacity: 0; transform: translateX(18px); } }
.schritt-feld:focus { outline: none; }
.frage { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1; color: var(--tinte); margin-bottom: 1.2rem; padding: 0; }
.schritt-feld > .tipp { margin: -.6rem 0 1rem; font-size: .88rem; color: var(--stein); }
.schritt-feld .fehler { display: none; font-size: .88rem; color: #8E2A1E; margin-top: .8rem; }
.schritt-feld.hat-fehler > .fehler { display: block; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.felder .breit { grid-column: 1 / -1; }
.schritt-feld > .feld { margin-top: 1.6rem; }

.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.kachel { position: relative; cursor: pointer; }
.kachel input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.kachel-inhalt {
  display: flex; flex-direction: column; gap: .35rem; min-height: 7.2rem; justify-content: flex-end; padding: 1.1rem 1.2rem;
  border: 1px solid rgba(20, 19, 17, .22); background: #fff; transition: border-color .25s, background-color .3s, transform .3s var(--ease-out); position: relative; overflow: hidden;
}
.kachel-inhalt::before {
  content: ""; position: absolute; top: 1rem; right: 1rem; width: 9px; height: 1.3rem;
  border-left: 1px solid var(--tinte); border-right: 4px solid var(--tinte); box-sizing: border-box; opacity: 0; transform: scaleY(.3); transition: opacity .3s, transform .4s var(--ease-out);
}
.kachel-inhalt b { font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 1.55rem); line-height: 1.15; color: var(--tinte); }
.kachel-inhalt small { font-size: .85rem; color: var(--stein); }
.kachel:hover .kachel-inhalt { border-color: var(--tinte); transform: translateY(-2px); }
.kachel input:checked + .kachel-inhalt { background: var(--tinte); border-color: var(--tinte); }
.kachel input:checked + .kachel-inhalt b { color: var(--papier); }
.kachel input:checked + .kachel-inhalt small { color: rgba(252, 250, 245, .7); }
.kachel input:checked + .kachel-inhalt::before { opacity: 1; transform: none; border-color: var(--gold); }
.kachel input:focus-visible + .kachel-inhalt { outline: 1.5px solid var(--gold-dunkel); outline-offset: 3px; }
.wahl-gross label { font-size: .98rem; }
.wahl-gross span { padding: .8rem 1.1rem; }
.wahl-gross input:checked + span { background: var(--tinte); color: var(--papier); }
.wahl-gross input:checked + span::before { border-color: var(--gold); }

.schritt-knoepfe { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--linie-hell); }
.schritt-knoepfe [data-weiter], .schritt-knoepfe [data-senden] { margin-left: auto; }
.knopf-zurueck { background: none; color: var(--tinte); padding-inline: 0; border-bottom: 1px solid var(--linie-hell); border-radius: 0; }
.knopf-zurueck:hover { border-bottom-color: var(--tinte); }
.knopf-zurueck svg { transform: none !important; }
.knopf[hidden] { display: none; }

/* Live-Karte */
.karte {
  margin-top: 2.4rem; padding: 1.6rem 1.6rem 1.2rem; background: var(--papier); border: 1px solid rgba(20, 19, 17, .14); position: relative;
}
.karte-siegel { position: absolute; top: -1.6rem; right: 1.2rem; width: 3.6rem; animation: gobo-drehen 80s linear infinite; }
.karte-titel { font-family: var(--serif); font-size: 1.35rem; color: var(--tinte); margin-bottom: .8rem; }
.karte dl { margin: 0; }
.karte dl > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--linie-hell); font-size: .92rem; }
.karte dt { color: var(--stein); }
.karte dd { margin: 0; color: #6f685d; font-style: italic; }
.karte dd.ist-gefuellt { color: var(--tinte); font-style: normal; font-weight: 500; }
.karte dd.blink { animation: karte-blink .9s var(--ease-out); }
@keyframes karte-blink { from { background: rgba(200, 173, 134, .45); } to { background: transparent; } }
.karte.ist-gesendet { border-color: var(--gold-dunkel); }
.danke { text-align: left; padding: clamp(2rem, 5vw, 3.5rem); background: var(--papier); border: 1px solid rgba(20, 19, 17, .14); }
.danke-siegel { width: 6rem; margin-bottom: 1.4rem; animation: gobo-drehen 40s linear infinite; }

@media (max-width: 860px) { .karte { display: none; } }
@media (max-width: 560px) {
  .felder, .kacheln { grid-template-columns: 1fr; }
  .kachel-inhalt { min-height: 0; }
  .takt { font-size: 0; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .karte-siegel, .danke-siegel { animation: none; }
  .ist-schrittweise .schritt-feld.ist-dran { animation: none; }
}
.kachel { display: flex; } .kachel-inhalt { flex: 1; }


/* ================= Fixes nach unabhängiger Prüfung (15.10.2026) ================= */
/* 1 Überstand Handy: Lichtschein hinter dem Porträt im Abschnitt halten */
.toby { overflow: clip; }
/* 4 Inhalt immer sichtbar: Überschriften starten teilweise sichtbar, Slogan nie fast unsichtbar */
.js .wisch { clip-path: inset(0 35% 0 0); opacity: .45; transition: clip-path 1.3s var(--ease-out), opacity 1.3s var(--ease-out); }
.js .wisch.ist-da { clip-path: inset(0 0 0 0); opacity: 1; }
@keyframes slogan-licht { from { background-position: 100% 0; opacity: .6; } to { background-position: 0 0; opacity: 1; } }
/* 3 Bewegung beruhigen: Pegel zeichnet einmal, dann Ruhe; Schleifen pausieren außerhalb des Bildschirms */
.pegel.ist-an .pegel-balken i { animation: none; }
.pausiert, .pausiert * { animation-play-state: paused !important; }
.kunden-statisch .kunden-band { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: .2rem 0; }
.kunden-statisch .kunden-band span:nth-child(n+22) { display: none; }
/* 5 Keine kleinen Etiketten über Inhalten */
.kunden-titel { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.01em; color: var(--creme); margin-bottom: 1.6rem; }
.stimmen h3 { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--creme); }
.gebiet .orte { margin-top: 0; }
/* 6 Kennzahlen-Leiste kollidiert nicht mehr mit dem Siegel */
.gobo { bottom: clamp(-21rem, -22vw, -8rem); }
@media (max-width: 640px) {
  .leiste { flex-direction: column; align-items: center; gap: .35rem; padding-bottom: 1.4rem; }
  .leiste span:nth-child(2) { display: inline; }
  .gobo { bottom: -12rem; opacity: .2; }
}
/* 7 Abstände */
#leistungen { padding-top: calc(var(--abschnitt-abstand) * .55); }
.ratgeber.firma { padding-top: var(--abschnitt-abstand); }
.ratgeber-enthalten { padding-top: calc(var(--abschnitt-abstand) * .55) !important; }
/* 8 Keine Kachel-Optik: Pegel ohne Rahmen, Abend als Haarlinien-Folge */
.pegel { border: 0; background: none; padding: 0; }
.abend { gap: clamp(1rem, 2.4vw, 2.2rem); }
.abend li { background: none; padding: 1.2rem 0 0; border-top: 1px solid var(--creme-20); position: relative; }
.abend li::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--gold); transition: width 1s var(--ease-out); }
.abend li.ist-aktiv { background: none; }
.abend li.ist-aktiv::before { width: 100%; }
.abend-nr { font-size: 2.2rem; }
/* Beispielabend (Firmenfeier-Unterseite) */
.beispielabend { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--creme-20); }
.beispielabend li { display: grid; grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem 2rem; align-items: baseline; padding: 1.2rem 0; border-bottom: 1px solid var(--creme-20); transition: color .6s; color: var(--creme-70); }
.beispielabend time { font-family: var(--serif); font-size: 1.6rem; color: var(--gold); font-variant-numeric: lining-nums; }
.beispielabend b { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--creme-70); transition: color .6s; }
.beispielabend li.ist-aktiv b { color: var(--creme); }
.beispielabend-hinweis { margin-top: 1rem; font-size: .88rem; color: var(--creme-50); }
@media (max-width: 760px) { .beispielabend li { grid-template-columns: 4.5rem 1fr; } .beispielabend li p { grid-column: 2; } }
.leiste { background: linear-gradient(to top, rgba(14, 13, 11, .8) 30%, rgba(14, 13, 11, 0)); padding-top: 2.4rem; }

/* Nachprüfung: Kennzahl in der Mitte nur auf dem Handy (auf dem Desktop lag sie auf dem Siegel), Lücke unter dem ersten Abschnitt, gleiche Spalten */
@media (min-width: 641px) { .leiste span:nth-child(2) { display: none; } }
.einstieg + .abschnitt { padding-bottom: calc(var(--abschnitt-abstand) * .4); }
.abend li { flex: 1 1 0; }
.kunden-statisch .kunden-band span:nth-child(n+22) { display: inline; }

/* Abnahme-Runde: kursive Überhänge nicht abschneiden; Pegel auf dem Handy mit Beschriftung direkt unter den Balken */
.js .wisch { clip-path: inset(-25% 35% -25% -10%); }
.js .wisch.ist-da { clip-path: inset(-25% -10% -25% -10%); }
@media (max-width: 560px) {
  .pegel-phasen { display: flex; gap: 0; }
  .pegel-phasen li { padding: .6rem .3rem 0 0; border-left: 1px solid var(--creme-20); padding-left: .35rem; }
  .pegel-phasen li:first-child { border-left: 0; padding-left: 0; }
  .pegel-phasen b { font-size: .82rem; }
  .pegel-phasen span { display: none; }
  .pegel-balken { gap: 2px; height: 8rem; }
  .pegel-balken i:nth-child(odd) { display: none; }
  .pegel figcaption { font-size: 1.25rem; }
}

/* Fußzeile: alle Seiten, Links in Leistungen */
.fuss .seiten { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; font-size: .92rem; padding-top: 2rem; border-top: 1px solid rgba(200, 173, 134, .12); }
.fuss .seiten a { color: var(--creme-70); text-decoration: none; }
.fuss .seiten a:hover { color: var(--gold); }
.leistung .mehr { display: inline-block; margin-top: .7rem; font-size: .9rem; color: var(--gold); text-decoration: underline; text-decoration-color: var(--gold-40); text-underline-offset: .2em; }
.leistung .mehr:hover { color: var(--creme); }
.leistungen-buehne .programm li.leistung .mehr { display: none; }
.leistungen-buehne .programm li.leistung.ist-gewaehlt .mehr { display: inline-block; }

/* Leitsatz auf Unterseiten */
.satz-abschnitt { padding-block: clamp(4rem, 9vw, 7.5rem); }
.satz-abschnitt .zitat-satz { max-width: 22ch; font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.12; }
.satz-abschnitt.licht-an .zitat-satz { color: var(--tinte); }

/* Duell: Saxophon oder Live-Drums */
.duell { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: stretch; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.duell-feld { position: relative; padding: clamp(1.6rem, 3vw, 2.6rem); border: 1px solid rgba(200, 173, 134, .2); background: radial-gradient(120% 80% at 50% 0%, rgba(200, 173, 134, .09), transparent 60%); transition: border-color .5s var(--ease-out), background .5s var(--ease-out), transform .5s var(--ease-out); }
.duell-feld:hover { border-color: rgba(200, 173, 134, .55); background: radial-gradient(120% 80% at 50% 0%, rgba(200, 173, 134, .16), transparent 65%); transform: translateY(-4px); }
.duell-bild { aspect-ratio: 4 / 3; display: grid; place-items: center; margin-bottom: 1.4rem; }
.duell-bild .ill { width: 78%; height: auto; color: var(--gold); overflow: visible; }
.duell-titel { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; color: var(--creme); }
.duell-gefuehl { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--gold); margin: .6rem 0 1rem; }
.duell-feld > p:not([class]) { color: var(--creme-70); max-width: 42ch; }
.duell-oder { align-self: center; font-family: var(--serif); font-style: italic; font-size: clamp(2.4rem, 5vw, 4.4rem); color: var(--gold); opacity: .8; }
.einsatz { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 1.6rem; font-size: .8rem; letter-spacing: .02em; }
.einsatz li { padding-top: .7rem; border-top: 3px solid rgba(246, 239, 223, .1); color: var(--creme-50); }
.einsatz li.an { border-top-color: var(--gold); color: var(--creme); }
.duell-feld .zug { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-out) .2s; }
.duell-feld.ist-da .zug, .no-js .duell-feld .zug { stroke-dashoffset: 0; }
.duell-feld.ist-da .noten > g { animation: schweben 3.2s ease-in-out infinite alternate; }
.duell-feld.ist-da .noten .n2 { animation-delay: .8s; } .duell-feld.ist-da .noten .n3 { animation-delay: 1.6s; }
.duell-feld.ist-da .stock { animation: schlag .5s ease-in-out infinite alternate; transform-origin: 70px 128px; }
.duell-feld.ist-da .stock2 { animation: schlag .5s .25s ease-in-out infinite alternate; transform-origin: 226px 92px; }
.duell-feld.ist-da .wellen path { animation: pulsieren .5s ease-in-out infinite alternate; }
.duell-feld.ist-da .wellen path + path { animation-delay: .25s; }
.duell-feld:hover .stock, .duell-feld:hover .stock2, .duell-feld:hover .wellen path { animation-duration: .3s; }
.duell-abschnitt .firma-weiter { margin-top: 2.2rem; }
@media (max-width: 860px) { .duell { grid-template-columns: 1fr; } .duell-oder { justify-self: center; margin: -.4rem 0; } }
@media (prefers-reduced-motion: reduce) { .duell-feld * { animation: none !important; } .duell-feld .zug { stroke-dashoffset: 0; transition: none; } }
.stadt-feld .duell-titel { font-size: clamp(2.6rem, 5vw, 4.2rem); }
.stadt-feld > p:not([class]) + p:not([class]) { margin-top: 1rem; }
.stadt-zwischen { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 1.15rem; margin: 1.8rem 0 .4rem; }
.stadt-orte { list-style: none; padding: 0; }
.stadt-orte li { padding: .8rem 0; border-bottom: 1px solid rgba(246, 239, 223, .1); color: var(--creme-70); font-size: .95rem; }
.stadt-orte li b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--creme); margin-bottom: .15rem; }

/* =========================================================
   Spielereien (assets/js/spiel.js, deploy/bausteine.py)
   ========================================================= */

/* Takt-Tipper */
.tipper { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.tipper .fliess { margin-top: 1.2rem; }
.takt-satz { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.8rem); color: var(--gold); margin-top: 1.8rem; min-height: 2.4em; }
.takt-song[hidden] { display: none; }
.takt-song { margin-top: 1.4rem; display: grid; gap: .5rem; font-size: .9rem; color: var(--creme-70); }
.takt-song-reihe { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; }
.takt-song input { flex: 1 1 14rem; font: inherit; font-size: 1rem; color: var(--creme); background: transparent; border: 0; border-bottom: 1px solid var(--gold-40); padding: .6rem 0; }
.takt-song input:focus { outline: none; border-bottom-color: var(--gold); }
.takt-knopf { --takt: 0s; position: relative; justify-self: center; width: min(78vw, 22rem); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--gold-40);
  background: radial-gradient(circle at 50% 40%, rgba(200, 173, 134, .16), rgba(14, 13, 11, 0) 65%); color: var(--creme); cursor: pointer;
  display: grid; place-content: center; text-align: center; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: border-color .4s; }
.takt-knopf:hover, .takt-knopf:focus-visible { border-color: var(--gold); outline: none; }
.takt-zahl { font-family: var(--serif); font-size: clamp(3.4rem, 9vw, 5.6rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.takt-einheit { font-size: .78rem; letter-spacing: .2em; color: var(--creme-50); margin-top: .5rem; }
.takt-ring { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; pointer-events: none; }
.takt-knopf.schlag { animation: takt-druck .18s ease-out; }
.takt-knopf.schlag .takt-ring:not(.zwei) { animation: takt-welle .7s ease-out; }
.hat-takt .takt-ring.zwei { animation: takt-welle var(--takt) ease-out infinite; }
@keyframes takt-druck { 50% { transform: scale(.97); } }
@keyframes takt-welle { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }

/* Hörprobe */
.hoerprobe { position: relative; aspect-ratio: 16 / 9; border: 1px solid rgba(200, 173, 134, .25); background: #0a0908; overflow: hidden; }
.hoerprobe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hoerprobe-start { position: absolute; inset: 0; width: 100%; border: 0; text-decoration: none; background: radial-gradient(70% 90% at 30% 50%, rgba(200, 173, 134, .12), transparent 70%); color: var(--creme); cursor: pointer;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(1rem, 3vw, 2.2rem); align-items: center; text-align: left; padding: clamp(1rem, 4vw, 2.6rem); }
.hoerprobe-scheibe { grid-row: 1 / -1; position: relative; width: clamp(7rem, 16vw, 12rem); aspect-ratio: 1; }
.hoerprobe-platte { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: repeating-radial-gradient(circle, #151412 0 2px, #0c0b0a 2px 4px); box-shadow: 0 0 0 1px rgba(200, 173, 134, .25), 0 20px 50px rgba(0, 0, 0, .6);
  animation: gobo-drehen 6s linear infinite; }
.hoerprobe-platte img { width: 46%; opacity: .55; }
.hoerprobe-start:hover .hoerprobe-platte { animation-duration: 1.8s; }
.hoerprobe-play { position: absolute; left: 50%; top: 50%; width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem; border-radius: 50%; background: var(--creme);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5); transition: transform .4s var(--ease-out); }
.hoerprobe-play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -.6rem 0 0 -.3rem; border-style: solid; border-width: .6rem 0 .6rem .95rem; border-color: transparent transparent transparent var(--nacht); }
.hoerprobe-start:hover .hoerprobe-play { transform: scale(1.1); }
.hoerprobe-titel { grid-row: 2; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.hoerprobe-hinweis { grid-row: 3; font-size: .78rem; line-height: 1.5; color: var(--creme-50); margin-top: .6rem; max-width: 34ch; }
.hoerprobe-start:focus-visible { outline: 1px solid var(--gold); outline-offset: -6px; }

/* Karte des Nordens */
.karte-nord { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: 2rem; }
.karte-nord-svg { width: 100%; height: auto; overflow: visible; }
.karte-nord-svg * { vector-effect: non-scaling-stroke; }
.k-kueste, .k-elbe { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease-out); }
.k-elbe { stroke: var(--gold-40); stroke-width: 2.2; }
.karte-nord.ist-da .k-kueste, .karte-nord.ist-da .k-elbe { stroke-dashoffset: 0; }
.k-grenze { fill: none; stroke: var(--gold-40); stroke-width: 1; stroke-dasharray: 3 5; }
.k-insel { fill: none; stroke: var(--gold); stroke-width: 1.2; }
.k-meer { font-family: var(--serif); font-style: italic; font-size: 22px; fill: rgba(200, 173, 134, .4); letter-spacing: .08em; }
.k-weg { fill: none; stroke: rgba(246, 239, 223, .28); stroke-width: 1; stroke-dasharray: 2 7; animation: k-wandern 3s linear infinite; }
@keyframes k-wandern { to { stroke-dashoffset: -36; } }
.k-punkt { cursor: pointer; outline: none; }
.k-fang { fill: transparent; }
.k-ort { fill: var(--gold); transition: r .3s var(--ease-out), fill .3s; }
.k-punkt:hover .k-ort, .k-punkt:focus-visible .k-ort, .k-punkt.ist-an .k-ort { fill: var(--creme); r: 7px; }
.k-stadt .k-ort { fill: var(--creme); }
.k-stadt:hover .k-ort, .k-stadt.ist-an .k-ort, .k-stadt:focus-visible .k-ort { r: 9px; fill: var(--gold); }
.k-puls { fill: none; stroke: var(--gold); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.k-heim .k-puls { animation: k-puls 2.4s ease-out infinite; }
@keyframes k-puls { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
.k-stadt text { font-family: var(--serif); font-size: 26px; fill: var(--creme); pointer-events: none; }
.k-punkt:focus-visible .k-fang { stroke: var(--gold); stroke-width: 1; }
.karte-nord-info { border-top: 1px solid rgba(200, 173, 134, .3); padding-top: 1.4rem; min-height: 11rem; }
.karte-nord-name { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.1; color: var(--creme); }
.karte-nord-text { color: var(--creme-70); margin-top: .8rem; max-width: 32ch; }

/* Discokugel in der Fußzeile */
.fuss { position: relative; overflow: hidden; }
.disco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fuss .innen { position: relative; z-index: 1; }
.disco-faden { position: absolute; left: 50%; top: 0; width: 1px; height: 0; background: linear-gradient(var(--gold-40), var(--gold)); transition: height 1.6s var(--ease-out); }
.disco-kugel { position: absolute; left: 50%; top: 0; width: 3.4rem; height: 3.4rem; margin-left: -1.7rem; border-radius: 50%; transform: translateY(-4.5rem);
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 250, 240, .95) 0 6%, transparent 22%),
    repeating-linear-gradient(0deg, rgba(14, 13, 11, .55) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(14, 13, 11, .55) 0 1px, transparent 1px 7px),
    conic-gradient(from 0deg, #7E6440, #F6EFDF, #C8AD86, #5A554D, #E3CFA8, #7E6440, #C8AD86, #F6EFDF, #7E6440);
  box-shadow: 0 0 30px rgba(200, 173, 134, .35); transition: transform 1.6s var(--ease-out); }
.disco-licht span { position: absolute; left: var(--x); top: var(--y); width: 7px; height: 7px; border-radius: 50%; background: var(--creme); opacity: 0; box-shadow: 0 0 12px 2px rgba(246, 239, 223, .5); }
.fuss.disco-an .disco-faden { height: 2.2rem; }
.fuss.disco-an .disco-kugel { transform: translateY(2.2rem); animation: kugel-glanz 3s linear 1.6s infinite; }
.fuss.disco-an.disco-licht-an .disco-licht span { animation: lichtpunkt 5s linear infinite; animation-delay: calc(1.4s + var(--v)); }
@keyframes kugel-glanz { 50% { filter: hue-rotate(-8deg) brightness(1.15); } }
@keyframes lichtpunkt { 0% { opacity: 0; transform: translateX(-40px); } 15%, 75% { opacity: .55; } 100% { opacity: 0; transform: translateX(80px); } }
@media (max-width: 760px) { .disco-kugel { left: auto; right: 2rem; } .disco-faden { left: auto; right: calc(2rem + 1.7rem); } }

/* Geheimwort */
.party { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: grid; place-items: center;
  background: radial-gradient(40% 50% at 30% 30%, rgba(200, 173, 134, .18), transparent 70%), radial-gradient(40% 50% at 70% 70%, rgba(246, 239, 223, .12), transparent 70%);
  animation: party-licht 1.2s ease-in-out infinite alternate; }
.party canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.party-satz { position: relative; font-family: var(--serif); font-style: italic; font-size: clamp(2.6rem, 8vw, 6rem); color: var(--creme); text-shadow: 0 4px 40px rgba(0, 0, 0, .7); animation: party-satz 4.8s var(--ease-out) forwards; }
@keyframes party-licht { from { background-position: 0 0, 0 0; filter: hue-rotate(0); } to { filter: hue-rotate(-12deg) brightness(1.2); } }
@keyframes party-satz { 0% { opacity: 0; transform: scale(.9); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (max-width: 860px) {
  .tipper, .karte-nord { grid-template-columns: 1fr; }
  .karte-nord-info { min-height: 8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hoerprobe-platte, .k-weg, .k-heim .k-puls, .hat-takt .takt-ring.zwei, .fuss.disco-an .disco-licht span, .party { animation: none !important; }
  .k-kueste, .k-elbe { stroke-dashoffset: 0; transition: none; }
}


/* Eine Ansprechperson: der ganze Aufwand wird mit einem Strich weggestrichen */
.suche-vorher { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--creme-50); margin-bottom: .6rem; }
.suche-block { position: relative; }
.suche li s { text-decoration: none; }
.kreuz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.kreuz-strich { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kreuz-spur { stroke-width: 1; opacity: .45; }
.stift { opacity: 0; transition: opacity .4s; }
.stift path, .stift rect { fill: var(--creme); }
.stift .stift-spalt { fill: none; stroke: var(--nacht); stroke-width: .8; }
.stift .stift-ring { fill: var(--gold); }
.suche-block li { transition: color .8s .2s; }
.suche-block.gekreuzt li { color: rgba(246, 239, 223, .44); }
.suche .eins a { color: inherit; text-decoration: none; }
.suche .eins svg { display: inline-block; width: .7em; height: .7em; margin-left: .3em; vertical-align: .05em; color: var(--gold); transition: transform .4s var(--ease-out); }
.suche .eins a:hover svg { transform: translateX(6px); }
.suche .eins a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.suche .eins { opacity: .62; transition: opacity 1s var(--ease-out); }
.suche .eins.an, .no-js .suche .eins { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .suche .eins { transition: none; } }
.suche .eins .nowrap { white-space: nowrap; }

/* Lichtinseln: jeder dunkle Abschnitt bekommt Licht auf sein Hauptelement */
.belege { background: radial-gradient(42% 55% at 24% 62%, rgba(246, 239, 223, .06), transparent 72%), radial-gradient(38% 50% at 74% 58%, rgba(200, 173, 134, .06), transparent 72%); }
.hoerprobe-abschnitt { background: radial-gradient(40% 70% at 70% 52%, rgba(200, 173, 134, .09), transparent 70%); }
.eine-abschnitt, section[aria-labelledby="h-eine"] { background: radial-gradient(40% 60% at 72% 50%, rgba(246, 239, 223, .05), transparent 70%); }
.gebiet { background: radial-gradient(50% 60% at 50% 70%, rgba(200, 173, 134, .07), transparent 72%); }
.takt-abschnitt { padding-top: clamp(2rem, 4vw, 3rem); }
.gebiet .karte-nord { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: left; }
.gebiet .firma-weiter { justify-content: center; }
.gebiet .karte-nord { max-width: 64rem; margin-inline: auto; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); }