/* ==========================================================
   Mark Johns – Landingpage
   Mobile-first. Marquee- und Setlist-Komponenten wiederverwendet
   aus dem Louisa-Projekt (gleiche Klassennamen, neue Farbwelt).
   ========================================================== */

:root {
  --color-ink: #241E14;
  --color-paper: #FCF9F2;
  --color-paper-muted: #F4EEDF;
  --color-dark: #1B1710;
  --color-dark-2: #241F16;
  --color-gold: #C69214;
  --color-gold-dark: #9C7310;
  --color-navy: #1C2A4A;
  --color-line: rgba(36, 30, 20, 0.12);

  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1120px;
  --radius: 14px;
  --shadow-soft: 0 12px 30px rgba(36, 30, 20, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.wrap-narrow { max-width: 640px; }

.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-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--color-ink); color: #fff; padding: 10px 16px;
  border-radius: 8px; z-index: 1000; transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  padding: 15px 26px; border-radius: 999px;
  font-weight: 700; text-decoration: none; border: 2px solid transparent;
  cursor: pointer; font-size: 1rem; white-space: nowrap;
}
.btn-primary { background: var(--color-gold); color: #241E14; }
.btn-primary:hover { background: #fff; color: var(--color-gold-dark); }
.btn-outline { border-color: var(--color-ink); background: transparent; }
.btn-outline:hover { background: var(--color-ink); color: #fff; }
.btn-small { padding: 11px 22px; font-size: 0.9rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252, 249, 242, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; }
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 1.3rem; text-decoration: none; color: inherit; font-weight: 700;
}
.logo-img { height: 32px; width: auto; display: block; }

.nav-toggle { background: none; border: 0; cursor: pointer; padding: 8px; display: inline-flex; }
.burger, .burger::before, .burger::after { display: block; width: 24px; height: 2px; background: currentColor; position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -7px; }
.burger::after { top: 7px; }

/* Mobile-Menü.
   Wichtig: NICHT position:fixed. Der Header trägt backdrop-filter, und
   diese Eigenschaft macht ihn zum Bezugsrahmen für fixierte Kinder —
   das Menü richtete sich dadurch am 65 Pixel hohen Header aus statt am
   Bildschirm und war praktisch unsichtbar.
   Jetzt hängt es absolut unter dem Header. Sichtbarkeit über display,
   nicht über eine Transition: Was der Nutzer aufklappt, muss auch dann
   erscheinen, wenn eine Animation nicht anläuft. */
.primary-nav {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 120;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
  box-shadow: 0 18px 40px rgba(36, 30, 20, 0.16);
  display: none; flex-direction: column; gap: 4px; padding: 20px;
  max-height: calc(100dvh - 65px); overflow-y: auto;
}
.primary-nav.is-open { display: flex; animation: navDrop 0.22s ease; }
@keyframes navDrop { from { transform: translateY(-8px); } to { transform: none; } }
.primary-nav a:not(.btn) { text-decoration: none; padding: 14px 4px; border-bottom: 1px solid var(--color-line); font-size: 1.1rem; }
.primary-nav .btn { text-decoration: none; text-align: center; margin-top: 10px; }

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .primary-nav {
    position: static; inset: auto; transform: none; flex-direction: row;
    align-items: center; padding: 0; background: transparent; gap: 24px;
    display: flex; max-height: none; overflow: visible;
    border-bottom: 0; box-shadow: none; animation: none;
  }
  .primary-nav a:not(.btn) { border-bottom: 0; padding: 4px 0; font-size: 0.95rem; }
  .primary-nav .btn { margin-top: 0; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; margin-top: -65px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(36,25,10,0.25) 0%, rgba(28,20,8,0.35) 45%, rgba(20,14,6,0.85) 100%);
}
.hero-content { position: relative; color: #fff; padding-bottom: 64px; }
.hero-content h1 { font-size: clamp(2rem, 6vw, 3.4rem); margin-bottom: 0.3em; text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
.hero-tagline { font-size: clamp(1rem, 2.2vw, 1.15rem); margin-bottom: 1.4em; max-width: 48ch; }

/* ---------- Sections (generic) ---------- */
.section { padding-block: clamp(48px, 8vw, 96px); }
.section-dark { background: var(--color-dark); color: var(--color-paper); }
.section-dark h2 { color: #fff; }
.section-muted { background: var(--color-paper-muted); }
.section h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.section-lead { max-width: 56ch; opacity: 0.8; }
.section-note { font-size: 0.85rem; opacity: 0.7; max-width: 68ch; margin-top: 20px; }
.section-note code { background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 4px; }

/* ---------- Marquee (reused) ---------- */
.proof-strip { padding-block: 32px; background: var(--color-paper); }
.proof-strip-label { text-align: center; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; opacity: 0.6; margin-bottom: 18px; }
/* Schmalere "Bühne" statt volle Seitenbreite: bei nur 5 Logos sonst auf großen Screens
   sichtbare Lücke/Leerlauf, bevor die Wiederholung wieder reinkommt. Die Bühne hat eine
   eigene (dunklere) Hintergrundfarbe, die Sektion drumrum die hellere Seiten-Grundfarbe –
   echter Farbverlauf am Übergang (30%/70%), nicht nur eine Transparenz-Maske auf den Logos. */
.marquee {
  overflow: hidden;
  background: var(--color-paper);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
@media (min-width: 900px) {
  .marquee { max-width: 620px; margin: 0 auto; }
}
.marquee-track { display: flex; gap: 64px; list-style: none; margin: 0; padding: 0; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.marquee-track li a {
  display: flex; align-items: center; height: 48px;
  text-decoration: none; opacity: 0.75; transition: transform 0.2s ease, opacity 0.2s ease;
}
.marquee-logo { height: 100%; width: auto; max-width: 140px; object-fit: contain; }
.marquee-logo-invert { filter: invert(1); }
@media (hover: hover) and (pointer: fine) {
  .marquee-track li a:hover { transform: scale(1.15); opacity: 1; cursor: pointer; }
}
.marquee-track li a:focus-visible { opacity: 1; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Video grid ---------- */
.subsection-title { font-size: 1.1rem; margin: 32px 0 4px; opacity: 0.8; }

/* ---------- Hörproben-Playlist ---------- */
.playlist { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--color-line); }
.playlist-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 4px;
  border-bottom: 1px solid var(--color-line);
}
.playlist-row.is-active .playlist-title { color: var(--color-gold); font-weight: 700; }
.playlist-row-disabled { opacity: 0.45; }
.playlist-row-disabled em { font-style: normal; font-size: 0.82rem; }
.playlist-play {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-line);
  background: transparent; color: inherit; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; font-size: 0.8rem;
}
button.playlist-play:hover { border-color: var(--color-gold); color: var(--color-gold); }
.playlist-title { font-size: 0.98rem; }

/* ---------- Video-Feature: großer Hauptplayer + Auswahl-Thumbnails darunter ---------- */
.video-feature { margin: 20px 0 0; }
.video-feature-main { margin-bottom: 14px; }
.video-thumb {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; background: var(--color-dark);
}
.video-thumb-large { aspect-ratio: 16/9; box-shadow: var(--shadow-soft); }
.video-thumb-large .play-glyph { font-size: 3.4rem; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.play-glyph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 2rem; background: rgba(20,14,6,0.25); transition: background 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .video-thumb:hover .play-glyph { background: rgba(20,14,6,0.45); }
}
.video-caption { font-size: 0.9rem; margin-top: 8px; opacity: 0.75; }
.video-feature-main iframe, .video-feature-main video {
  width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-soft);
}

.video-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 639px) { .video-strip { grid-template-columns: repeat(2, 1fr); } }
.video-strip .video-thumb, .video-strip button {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; background: var(--color-dark);
}
.video-strip button img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.75; transition: opacity 0.2s ease; }
.video-strip .video-card.is-active button img { opacity: 1; outline: 3px solid var(--color-gold); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .video-strip button:hover img { opacity: 1; }
}
.video-strip .video-caption { font-size: 0.78rem; margin-top: 6px; opacity: 0.7; }
.video-card iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius); }

/* ---------- Über Mark ---------- */
.about-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 760px) { .about-grid { grid-template-columns: 1fr 1.2fr; } }
.about-photo { border-radius: var(--radius); box-shadow: var(--shadow-soft); }

/* ---------- Setlist (reused) ---------- */
.setlist { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.setlist-item a {
  display: flex; align-items: center; gap: 18px; text-decoration: none; color: inherit;
  padding: 18px 20px; border: 1px solid rgba(252,249,242,0.15); border-radius: var(--radius);
  transition: border-color 0.2s ease, background 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .setlist-item a:hover { border-color: var(--color-gold); background: rgba(198,146,20,0.08); }
}
.setlist-num { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-gold); min-width: 2.4ch; }
.setlist-title { display: block; font-weight: 700; font-size: 1.05rem; }
.setlist-desc { display: block; font-size: 0.92rem; opacity: 0.75; }
.trust-strip { margin-top: 36px; display: grid; gap: 8px; font-size: 0.95rem; }
.trust-strip a { color: var(--color-gold); font-weight: 600; }

/* ---------- Package tiles (Bild-Kacheln statt Liste) ---------- */
.package-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 640px) { .package-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .package-grid { grid-template-columns: repeat(3, 1fr); } }
.package-tile {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background-size: cover; background-position: center; aspect-ratio: 4/5;
  opacity: 1; transform: none;
}
.package-tile.reveal-init { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.package-tile.is-visible { opacity: 1; transform: translateY(0); }
.package-tile::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,14,6,0.05) 0%, rgba(20,14,6,0.85) 85%);
}
.package-tile-tint::before { background: linear-gradient(180deg, rgba(28,20,60,0.15) 0%, rgba(15,10,30,0.88) 85%); }
.package-tile a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 20px; text-decoration: none; color: #fff; }
.package-tile-title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin-bottom: 6px; }
.package-tile-desc { font-size: 0.88rem; opacity: 0.9; line-height: 1.4; }
@media (hover: hover) and (pointer: fine) {
  .package-tile { transition: transform 0.3s ease, opacity 0.5s ease; }
  .package-tile:hover { transform: scale(1.02); }
}

/* ---------- Music player (Hero-CTA + Floating-FAB) ---------- */
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

@keyframes music-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.25); }
  50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}

/* Variante A (archiviert, siehe Chat) – Play-Button inline neben "Jetzt anfragen":
.btn-music {
  background: rgba(255,255,255,0.12); color: #fff; border: 2px solid rgba(255,255,255,0.4);
  animation: music-pulse 2.4s ease-in-out infinite;
}
.btn-music:hover { background: rgba(255,255,255,0.22); }
@media (prefers-reduced-motion: reduce) { .btn-music { animation: none; } }
*/

/* Variante B (aktiv) – freistehender Orb-Button über der Headline, fliegt beim Laden ein */
.music-intro {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
  opacity: 0; transform: translateX(-32px);
  animation: music-intro-fly-in 0.7s ease 0.4s forwards;
}
@keyframes music-intro-fly-in { to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .music-intro { animation: none; opacity: 1; transform: none; }
}
.music-orb {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-gold); color: #241E14; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  animation: music-pulse-gold 2.4s ease-in-out infinite;
}
@keyframes music-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198,146,20,0.45); }
  50% { box-shadow: 0 0 0 10px rgba(198,146,20,0); }
}
@media (prefers-reduced-motion: reduce) { .music-orb { animation: none; } }
.music-orb-label {
  color: #fff; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em;
  background: rgba(0,0,0,0.25); padding: 8px 14px; border-radius: 999px;
}

.ambient-player { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* position: sticky (nicht fixed) auf dem letzten Kind von <main> – dadurch stoppt der FAB
   automatisch am unteren Rand von <main>, statt in den Footer/Datenschutz-Link zu ragen. */
/* Der Player schwebt über dem Inhalt und verdeckte auf schmalen Schirmen
   Fließtext (aufgefallen im Ablauf-Abschnitt). Deshalb höher gesetzt und
   auf kleinen Schirmen kompakter, damit er weniger Fläche überlagert. */
.music-fab {
  position: sticky; bottom: 76px; z-index: 200;
  width: fit-content; margin-left: auto; margin-right: 16px;
  display: flex; align-items: center; gap: 8px;
  background: var(--color-ink); color: #fff; border-radius: 999px;
  padding: 9px 12px; box-shadow: var(--shadow-soft);
}
@media (min-width: 700px) {
  .music-fab { bottom: 32px; margin-right: 24px; padding: 10px 14px; }
}
/* Ohne diese Zeile gewinnt .music-fab { display:flex } gegen das hidden-Attribut,
   weil Autoren-CSS Browser-Standardstile immer schlägt – der Button war dadurch
   die ganze Zeit sichtbar, auch ohne aktiven Player. */
.music-fab[hidden] { display: none; }
.music-fab button {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; flex-shrink: 0;
  background: var(--color-gold); color: #241E14; display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
#musicNextFab { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); font-size: 0.8rem; }
#musicNextFab:hover { border-color: var(--color-gold); color: var(--color-gold); }
.music-fab-label { font-size: 0.85rem; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 700px) { .music-fab-label { max-width: 140px; } }

/* ---------- Contact form ---------- */
.contact-form { display: grid; gap: 16px; margin-top: 24px; }
.form-row { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
.form-row legend { font-size: 0.9rem; opacity: 0.85; padding: 0; margin-bottom: 4px; }
.form-row label { font-size: 0.9rem; opacity: 0.85; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; flex-direction: row; }
.form-row input, .form-row textarea {
  font: inherit; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--color-line);
  background: rgba(36,30,20,0.03); color: inherit;
}
.form-row input:focus, .form-row textarea:focus { border-color: var(--color-gold); }
.contact-form .btn { justify-self: start; }

/* Spamfalle: muss fuer Menschen unsichtbar sein, aber fuer Bots wie ein
   normales Feld aussehen. Deshalb aus dem Blickfeld geschoben statt
   display:none - manche Bots pruefen genau darauf. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 14px 0 0; font-size: 0.92rem; line-height: 1.5;
  padding: 12px 15px; border-radius: 8px; border-left: 3px solid;
}
.form-status.is-ok      { background: rgba(46, 125, 50, 0.10); border-color: #4c9a52; }
.form-status.is-fehler  { background: rgba(216, 35, 42, 0.09); border-color: #d8232a; }
.form-status.is-warte   { background: rgba(198, 146, 20, 0.10); border-color: var(--color-gold); }
.form-status a { color: var(--color-gold-dark); font-weight: 600; }

/* Ort-Block: PLZ schmal, Stadt breit. Unter 420px untereinander,
   damit auf kleinen Geraeten kein 60px-Feld uebrig bleibt. */
.form-ort legend { margin-bottom: 8px; }
.form-ort-felder { display: grid; gap: 12px; }
@media (min-width: 420px) {
  .form-ort-felder { grid-template-columns: 7rem 1fr; }
}
.form-feld { display: grid; gap: 6px; }
.form-feld label { font-size: 0.8rem; opacity: 0.6; }
/* min-width: 0 ist hier Pflicht, nicht Kosmetik: Ein <input> bringt eine
   Eigenbreite von rund 200px mit und schrumpft im Raster nicht darunter,
   solange min-width auf auto steht. Ohne diese Zeile ragt das PLZ-Feld
   knapp 100px in die Ortsspalte hinein. */
.form-feld input { width: 100%; min-width: 0; }
.form-row input::placeholder, .form-row textarea::placeholder {
  color: currentColor; opacity: 0.38;
}

/* ---------- Footer ---------- */
/* ---------- Song list (Repertoire-Unterseite) ---------- */
.song-list { list-style: none; margin: 24px 0 32px; padding: 0; columns: 1; column-gap: 32px; }
@media (min-width: 640px) { .song-list { columns: 2; } }
.song-list li { padding: 8px 0; border-bottom: 1px solid var(--color-line); break-inside: avoid; font-size: 0.95rem; }

.site-footer { background: var(--color-ink); color: var(--color-paper); padding-block: 40px 24px; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; }
.footer-inner .logo { color: #fff; }
.footer-inner nav { display: flex; gap: 20px; }
.footer-inner a { text-decoration: none; opacity: 0.85; }
.footer-inner a:hover { opacity: 1; }

/* ---------- Pakete Variante B: Einladungskarten-Reveal (Experiment) ---------- */
.invite-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; perspective: 1400px; }
@media (min-width: 640px) { .invite-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .invite-grid { grid-template-columns: repeat(3, 1fr); } }

.invite-card { aspect-ratio: 4/5; }
.invite-card-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform 0.6s ease;
}
.invite-card.is-flipped .invite-card-inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .invite-card:hover .invite-card-inner { transform: rotateY(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .invite-card-inner { transition: none; }
}

.invite-face {
  position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden;
  backface-visibility: hidden;
}
.invite-face-front { display: flex; flex-direction: column; justify-content: flex-end; }
.invite-face-front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.invite-face-front::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(20,14,6,0.85) 100%);
}
.invite-title { position: relative; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; padding: 20px 20px 8px; }
.invite-more {
  position: relative; margin: 0 20px 20px; align-self: flex-start;
  background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px; padding: 8px 16px; font-size: 0.82rem; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .invite-more { display: none; } }

.invite-face-back {
  transform: rotateY(180deg);
  background: var(--color-dark); color: #fff;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: 28px;
}
.invite-face-back p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.invite-face-back .btn { align-self: flex-start; }

/* Zurück-Pfeil auf der Kartenrückseite.
   Grund: Auf Touchgeräten gibt es kein Hover — einmal umgeschlagen blieb
   die Karte gedreht, ohne Weg zurück. Auf Zeigergeräten übernimmt weiter
   der Hover, dort ist der Pfeil überflüssig und bleibt ausgeblendet. */
.invite-back {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  background: rgba(252, 249, 242, 0.9);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.invite-back:hover { background: #fff; transform: translateX(-2px); }
@media (hover: hover) and (pointer: fine) { .invite-back { display: none; } }
/* Kein position:relative auf .invite-face-back!
   Die Fläche erbt position:absolute mit inset:0 von .invite-face und füllt
   damit die ganze Karte. Ein relative hier liess sie auf Inhaltshöhe
   zusammenschrumpfen (433px Karte, 181px Rückseite). Der Pfeil braucht es
   nicht: Ein absolut positioniertes Element ist selbst schon Bezugsrahmen
   für seine absoluten Kinder. */

/* ==========================================================
   WEG ZUM EVENT
   Zeitleiste statt Aufzählung: Die Linie links füllt sich beim
   Scrollen mit und macht den Fortschritt sichtbar. Fällt die
   Animation aus, steht die Linie einfach voll — kein Inhalt
   hängt davon ab.
   ========================================================== */
.road { list-style: none; margin: 36px 0 0; padding: 0 0 0 34px; position: relative; }
.road::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: var(--color-line); border-radius: 2px;
}
.road::after {
  content: ""; position: absolute; left: 7px; top: 8px; width: 2px;
  height: var(--road-fill, 100%);
  background: linear-gradient(var(--color-gold), var(--color-gold-dark));
  border-radius: 2px; transition: height 0.25s linear;
}
.road-step { position: relative; padding-bottom: 34px; }
.road-step:last-child { padding-bottom: 0; }
.road-dot {
  position: absolute; left: -34px; top: 4px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--color-paper);
  border: 2px solid var(--color-line); transition: border-color 0.3s ease, background-color 0.3s ease;
}
.road-step.is-reached .road-dot { border-color: var(--color-gold); background: var(--color-gold); }
.road-no {
  display: block; font-family: var(--font-body); font-size: 0.72rem;
  letter-spacing: 0.18em; color: var(--color-gold-dark); margin-bottom: 4px;
}
.road-step h3 { font-size: 1.15rem; margin: 0 0 0.35em; }
.road-step p { margin: 0; opacity: 0.78; font-size: 0.96rem; max-width: 54ch; }

@media (min-width: 860px) {
  .road { padding-left: 44px; }
  .road-dot { left: -44px; }
}

/* ==========================================================
   WUNSCHLIED (Repertoire)
   ========================================================== */
.wish {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  margin: 40px 0 32px; padding: 26px 24px;
  background: var(--color-paper-muted); border-radius: var(--radius);
  border: 1px solid var(--color-line);
}
.wish-mark {
  font-size: 1.6rem; line-height: 1; color: var(--color-gold-dark);
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-paper); border: 1px solid var(--color-line);
}
.wish-h { font-size: 1.15rem; margin: 0 0 0.5em; }
.wish p { margin: 0 0 0.7em; font-size: 0.97rem; opacity: 0.85; }
.wish-note { font-size: 0.88rem !important; opacity: 0.65 !important; margin: 0 !important; }

/* ==========================================================
   STIMMEN
   Karten mit kleinem Foto. Ohne JavaScript bleibt es ein
   seitlich schiebbarer Streifen — nichts verschwindet.
   ========================================================== */
.voices {
  list-style: none; margin: 32px 0 0; padding: 0 0 6px;
  display: flex; gap: 18px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.voices::-webkit-scrollbar { display: none; }
.voice {
  flex: 0 0 88%; scroll-snap-align: start;
  background: var(--color-paper-muted); border: 1px solid var(--color-line);
  border-radius: var(--radius); padding: 28px 26px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
}
@media (min-width: 700px) { .voice { flex-basis: calc(50% - 9px); } }
@media (min-width: 1020px) { .voice { flex-basis: calc(33.333% - 12px); } }

.voice-quote { position: relative; }
.voice-mark {
  font-family: var(--font-display); font-size: 3rem; line-height: 0.7;
  color: var(--color-gold); display: block; margin-bottom: 6px;
}
.voice-quote p { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.voice-by { display: flex; align-items: center; gap: 13px; }
/* Solange kein Foto vorliegt, stehen hier die Initialen. Kommt eines dazu,
   genügt style="background-image:url(...)" — der Text verschwindet dann
   hinter dem Bild, weil color transparent gesetzt wird. */
.voice-photo {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: var(--color-paper); border: 1px solid var(--color-line);
  background-size: cover; background-position: center;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 700;
  color: var(--color-gold); letter-spacing: 0.02em;
}
.voice-photo[style*="background-image"] { color: transparent; }
.voice-meta { display: grid; gap: 1px; }
.voice-meta strong { font-size: 0.95rem; }
.voice-meta span { font-size: 0.82rem; opacity: 0.65; }
.voice.is-placeholder { border-style: dashed; }
.voice.is-placeholder .voice-quote p { opacity: 0.6; font-style: italic; }

.voices-nav { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.voices-nav button {
  font: inherit; cursor: pointer; width: 42px; height: 42px; border-radius: 50%;
  background: transparent; color: inherit; border: 1px solid var(--color-line);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.voices-nav button:hover:not(:disabled) { border-color: var(--color-gold); color: var(--color-gold-dark); }
.voices-nav button:disabled { opacity: 0.32; cursor: default; }
.voices-dots { display: flex; gap: 7px; }
.voices-dots button { width: 26px; height: 3px; border-radius: 2px; padding: 0; border: 0; background: var(--color-line); }
.voices-dots button.on { background: var(--color-gold); }

/* ==========================================================
   TERMIN-KALENDER (Vorschau)
   ========================================================== */
.cal { margin-top: 30px; }
.cal-frame {
  background: rgba(252, 249, 242, 0.06); border: 1px solid rgba(252, 249, 242, 0.16);
  border-radius: var(--radius); padding: 22px 20px;
}
/* flex-wrap, damit "Stand ..." auf schmalen Geraeten unter den Monat
   rutscht statt mitten im Monatsnamen umzubrechen. */
.cal-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 4px 14px; margin-bottom: 16px;
}
.cal-month, .cal-hint { white-space: nowrap; }
.cal-month { font-family: var(--font-display); font-size: 1.1rem; }
.cal-hint { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell {
  aspect-ratio: 1; border-radius: 7px; display: grid; place-items: center;
  font-size: 0.82rem; font-variant-numeric: tabular-nums;
  background: rgba(252, 249, 242, 0.05); color: rgba(252, 249, 242, 0.5);
}
/* Samstag = gefragter Tag, KEINE Aussage ueber "frei". Die Belegung
   kommt aus dem Google-Kalender und faerbt Tage als .is-taken ein. */
.cal-cell.is-sat { background: rgba(198, 146, 20, 0.18); color: #fff; font-weight: 700; }
/* Belegt ist eine echte Aussage und muss auf einen Blick erkennbar sein.
   Ein roter Stempel liegt quer ueber der Zelle.

   Die Tageszahl rutscht dafuer in die obere linke Ecke und wird klein.
   Mittig uebereinander waren Zahl und Wort beide unleserlich - in einer
   60px-Zelle ist fuer zwei zentrierte Dinge kein Platz. */
.cal-cell.is-taken {
  position: relative;
  background: rgba(216, 35, 42, 0.10);
  color: rgba(252, 249, 242, 0.55);
  place-items: start;
  padding: 3px 0 0 5px;
  font-size: 0.68rem;
}
.cal-cell.is-taken::after {
  content: "";
  position: absolute;
  /* Ragt seitlich leicht ueber die Zelle hinaus - so wirkt der Stempel
     aufgedrueckt und nicht eingepasst. */
  left: -10%; right: -10%; top: 52%;
  height: 58%;
  transform: translateY(-50%) rotate(-9deg);
  background: url("/assets/optimized/belegt.svg") center / contain no-repeat;
  pointer-events: none;
}

.cal-cell.is-blank { background: transparent; }
.cal-nav-group { display: flex; align-items: center; gap: 4px; }
.cal-nav {
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: 2px 8px; border-radius: 6px;
  opacity: 0.7;
}
.cal-nav:hover:not(:disabled) { opacity: 1; background: rgba(252, 249, 242, 0.08); }
.cal-nav:disabled { opacity: 0.2; cursor: default; }
/* Vergangene Tage treten zurueck - ohne Durchstreichung, damit sie
   nicht mit "belegt" verwechselt werden. */
.cal-cell.is-past { opacity: 0.22; }

.cal-legend { display: flex; gap: 20px; margin-top: 16px; font-size: 0.8rem; opacity: 0.7; }
.cal-legend span { display: inline-flex; align-items: center; gap: 7px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-sat { background: var(--color-gold); }
.dot-taken { background: #d8232a; }
.cal-cta { margin-top: 20px; width: 100%; }
.cal-note { font-size: 0.86rem; opacity: 0.7; margin-top: 14px; }
.cal-note a { color: var(--color-gold); }

/* Hinweis unter dem Datumsfeld, wenn der Tag laut Kalender belegt ist.
   Deutlich sichtbar, aber keine Sperre — siehe Kommentar in script.js. */
.datum-hinweis {
  margin: 8px 0 0; font-size: 0.86rem; line-height: 1.45;
  padding: 10px 13px; border-radius: 8px;
  background: rgba(198, 146, 20, 0.12);
  border-left: 3px solid var(--color-gold);
}
.form-row input.ist-belegt { border-color: var(--color-gold); }

/* ==========================================================
   RECHTSTEXTE (Impressum, Datenschutz)
   Lange Fließtexte. Ziel ist Lesbarkeit, nicht Gestaltung.
   ========================================================== */
.legal h1 { margin-bottom: 0.8em; }
.legal h2 { font-size: clamp(1.2rem, 2.6vw, 1.55rem); margin-top: 2em; }
.legal h3 { font-size: 1.02rem; margin-top: 1.7em; }
.legal p { font-size: 0.95rem; line-height: 1.65; opacity: 0.88; }
.legal a { color: var(--color-gold-dark); word-break: break-word; }

.legal-adresse {
  border-left: 3px solid var(--color-gold); padding-left: 18px;
  font-size: 1rem !important; opacity: 1 !important;
}
/* "Kurz gesagt"-Absätze fasst der Generator selbst zusammen —
   die sind für Besucher das Nützlichste am ganzen Text. */
.legal-kurz {
  background: var(--color-paper-muted); border-radius: var(--radius);
  padding: 14px 18px; font-size: 0.92rem !important; opacity: 1 !important;
}
.legal-fakt { margin: 0 0 0.35em !important; font-size: 0.9rem !important; }
.legal-quelle { margin-top: 2.5em; font-size: 0.8rem !important; opacity: 0.55 !important; }
.legal-todo {
  border: 1px dashed var(--color-gold); border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.03); padding: 20px 22px; margin-block: 1.4em;
}
.legal-todo p { opacity: 1; }
.legal-todo p:last-child { margin-bottom: 0; }
.legal-back { margin-top: 2.5em; }