/* Selbst gehostete Schriften, kein Google-Fonts-CDN, damit beim Seitenaufruf
   keine Besucher-IP an Dritte übertragen wird. Unbounded fürs grosse,
   plakative Display-Lettering, Instrument Sans für Fliesstext, Formulare
   und UI. Die verspielte Logo-Schrift lebt nur noch als Bilddatei
   (public/images/logo-dark.png), keine Live-Textnutzung mehr. */
@font-face {
  font-family: 'Unbounded';
  src: url('/fonts/unbounded-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('/fonts/unbounded-700-latin-ext.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+2113;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans-variable-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans-variable-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+2113;
}

:root {
  /* Satter Beinahe-Schwarz statt Navy: ein winziger Hauch Wärme
     verhindert einen toten Bildschirm-Schwarzwert und laesst Grain und
     Gradient-Mesh noch sichtbar wirken. Creme bleibt aus dem Logo. */
  --bg: #0a0a0b;
  --surface: #141416;
  --surface-2: #1c1c1f;
  --text: #eae6db;
  --text-muted: #938f86;
  --border: rgba(234, 230, 219, 0.12);
  --accent: #e7b65c;
  --accent-strong: #f2c877;
  --accent-soft: rgba(231, 182, 92, 0.12);
  --gold-shine: linear-gradient(135deg, #c98f3c 0%, #f2c877 28%, #fff3d1 50%, #e7b65c 72%, #c98f3c 100%);
  --whatsapp: #25d366;
  --whatsapp-strong: #2fe077;
  --ok: #6fbf8b;
  --ok-bg: rgba(111, 191, 139, 0.14);
  --danger: #e2745f;
  --danger-bg: rgba(226, 116, 95, 0.14);
  --warn: #e7b65c;
  --warn-bg: rgba(231, 182, 92, 0.14);
  --muted-badge: #938f86;
  --muted-badge-bg: rgba(147, 143, 134, 0.14);
  --chart-1: #e7b65c;
  --chart-2: #e2789b;
  --chart-3: #6fc7c1;
  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --content-width: 720px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Feines, dezent driftendes Filmkorn ueber der gesamten Seite, macht den
   Beinahe-Schwarz-Hintergrund lebendig statt flach-digital. Reines CSS,
   keine Bilddatei. */
body::before {
  content: '';
  position: fixed;
  inset: -80px;
  z-index: 500;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 9s steps(8) infinite;
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-2%, -4%); }
  24% { transform: translate(-6%, 2%); }
  36% { transform: translate(4%, -2%); }
  48% { transform: translate(-2%, 6%); }
  60% { transform: translate(-6%, 4%); }
  72% { transform: translate(6%, 0); }
  84% { transform: translate(0, 4%); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--bg);
  padding: 0.75em 1.25em;
  border-radius: var(--radius-sm);
  z-index: 10000;
}
.skip-link:focus { left: 1em; top: 1em; }

::selection { background: var(--accent); color: var(--bg); }

/* Custom Cursor (nur Desktop mit Maus, siehe cursor.js). Auf Touch-Geraeten
   bleibt der native Cursor unangetastet. */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9998;
  border-radius: 50%;
  will-change: transform;
}
.cursor-dot { width: 6px; height: 6px; background: var(--accent); }
.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(234, 230, 219, 0.4);
  transition: width 0.25s var(--ease), height 0.25s var(--ease), border-color 0.25s ease, background 0.25s ease;
}
.cursor-ring.is-hovering {
  width: 56px;
  height: 56px;
  border-color: var(--accent);
  background: rgba(231, 182, 92, 0.08);
}
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button, body.has-custom-cursor input, body.has-custom-cursor select {
  cursor: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 1em 2em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary { background: var(--gold-shine); color: var(--bg); }
.btn-primary:hover { box-shadow: 0 12px 28px rgba(231, 182, 92, 0.3); }
.btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-whatsapp { background: var(--gold-shine); color: var(--bg); }
.btn-whatsapp:hover { box-shadow: 0 12px 28px rgba(231, 182, 92, 0.3); }
.btn-block { display: block; width: 100%; }

/* ---------- Preloader ---------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
#preloader .preloader-logo { width: min(50vw, 220px); opacity: 0; }
#preloader.is-done { pointer-events: none; }

/* ---------- Reveal-Grundzustand (Fallback fuer Seiten ohne GSAP,
   z.B. Danke-Seite, leerer Zustand) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Marquee-Ticker ---------- */
.marquee {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 26s linear infinite;
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.9rem, 2vw, 1.15rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.9em 1.5em;
  white-space: nowrap;
}
.marquee-item strong { color: var(--accent); }
.marquee-dot { color: var(--accent); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- Hero ---------- */
/* .hero ist der Scroll-Distanz-Geber (per JS auf 200vh gesetzt, sobald der
   GSAP-Pin aktiv ist, siehe hero.js). .hero-visual ist der eigentlich
   sichtbare, wahrend des Scrollens fixierte Bildschirm-Ausschnitt. Ohne
   JS/bei reduzierter Bewegung bleibt .hero einfach so hoch wie .hero-visual,
   ein normaler Einzel-Bildschirm-Hero. */
.hero { position: relative; }
.hero-visual {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 2rem 1.5rem;
}
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 45% at 22% 15%, rgba(231, 182, 92, 0.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 80% 85%, rgba(111, 199, 193, 0.10), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(226, 120, 155, 0.08), transparent 65%),
    var(--bg);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Vom unteren Rand des Videos ausgehend zuschneiden: der noetige
     Beschnitt beim Einpassen in den Ausschnitt kommt so von oben, nicht
     von unten, die Koerper der Personen bleiben dadurch sichtbar statt
     nur die Koepfe. */
  object-position: center bottom;
  z-index: 0;
  opacity: 0;
  /* Leichte Unschärfe und reduzierte Sättigung, zusätzlich zur dunklen
     Scrim-Schicht: haelt Details/Gesichter zurueckhaltend und kaschiert
     KI-Generierungs-Artefakte, ohne dass es wie ein Weichzeichner wirkt. */
  filter: blur(3px) saturate(0.7) contrast(0.92);
  transition: opacity 0.8s ease;
}
.hero-video.is-active { opacity: 1; }
.hero-video-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Bewusst kräftig abgedunkelt (65 bis 82 Prozent Schwarz): das Video
     bleibt nur noch als stimmungsvolle, unscharfe Bewegung im Hintergrund
     erkennbar, ohne dass Gesichter oder KI-Generierungs-Artefakte auffallen. */
  background: linear-gradient(180deg, rgba(6, 6, 7, 0.78) 0%, rgba(6, 6, 7, 0.72) 45%, rgba(6, 6, 7, 1) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hero-video-scrim.is-active { opacity: 1; }
.hero-inner { position: relative; z-index: 2; max-width: 640px; }
.hero-logo { width: min(60vw, 280px); margin: 0 auto 1.75rem; }
.hero-eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.75rem;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.hero-title {
  font-size: clamp(2.1rem, 7vw, 3.8rem);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.hero-title .split-word { display: inline-block; white-space: nowrap; }
.hero-title .split-char { display: inline-block; will-change: transform; }
.section-title .split-word { display: inline-block; white-space: nowrap; }
.section-title .split-char { display: inline-block; }
.hero-meta { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.hero-genre {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  padding: 0.5em 1.15em;
  border-radius: 999px;
  margin-top: 0.75rem;
}
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.hero-scroll-cue span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
  animation: scroll-cue 1.8s ease-in-out infinite;
}
@keyframes scroll-cue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(16px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue span { animation: none; }
}

/* ---------- Sections (allgemein) ---------- */
.section-intro, .section-story, .section-usp, .section-lineup, .section-countdown, .section-cta, .section-form {
  position: relative;
  padding: clamp(5.5rem, 13vw, 9rem) 1.5rem;
}
.section-inner { max-width: var(--content-width); margin: 0 auto; text-align: center; }
.section-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.section-intro-text { font-size: 1.15rem; color: var(--text-muted); max-width: 560px; margin: 0 auto; }

/* ---------- Warum-Sektion (Hintergrundgeschichte) ---------- */
.section-story-text {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto;
}
.section-story-text strong { color: var(--text); font-weight: 600; }

/* ---------- USP-Sektion ---------- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
}
.usp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
}
.usp-index {
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.usp-card-title { font-size: 1.15rem; margin-bottom: 0.6rem; }
.usp-card-text { color: var(--text-muted); font-size: 0.95rem; margin: 0; }
.section-title {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin-bottom: 2.75rem;
  overflow: hidden;
}

/* ---------- DJ Line-up ---------- */
.dj-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 720px;
  margin: 0 auto;
}
.dj-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  transform-style: preserve-3d;
  will-change: transform;
}
.dj-card-photo-wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
}
.dj-card-photo { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.dj-card:hover .dj-card-photo { transform: scale(1.06); }
.dj-card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem 1rem 1rem;
  text-align: left;
  background: linear-gradient(0deg, rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0.55) 60%, transparent 100%);
}
.dj-card-name { font-size: 1.05rem; font-family: var(--font-display); }
.dj-card-slot { color: var(--accent); font-size: 0.82rem; margin: 0.3rem 0 0; letter-spacing: 0.02em; }

/* Lückenfüller-Karte: springt ein, wenn eine ungerade Anzahl DJs im
   2er-Raster sonst eine leere Lücke hinterlassen würde. */
.dj-card-filler {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, rgba(231, 182, 92, 0.1), transparent 65%),
    var(--surface);
}
.dj-card-filler-logo { width: 65%; opacity: 0.85; }

/* ---------- Countdown ---------- */
.countdown { display: flex; justify-content: center; gap: 0.9rem; flex-wrap: wrap; }
.countdown-unit {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1rem;
  min-width: 88px;
  position: relative;
}
.countdown-digits {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 6vw, 3rem);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  height: 1.15em;
}
.countdown-digits span { display: block; will-change: transform; }
.countdown-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-top: 0.4rem;
}
.countdown-live-text {
  font-family: var(--font-display);
  font-size: 1.8rem;
}

/* Gold-Verlauf-Effekt fuer grosse Zahlen-Schwerpunkte: wirkt wie ein
   leichtes Glaenzen auf dem Gold statt einer flachen Volltonfarbe.
   Wichtig: bei .countdown-digits liegt der eigentliche Text im
   verschachtelten span[data-unit], background wird nicht vererbt, der
   Verlauf muss deshalb direkt auf diesem inneren span gesetzt werden. */
.countdown-digits span,
.countdown-live-text,
.spots-banner-headline .spots-number {
  background: var(--gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- CTA ---------- */
.cta-heading { font-size: clamp(1.6rem, 4.5vw, 2.1rem); margin-bottom: 0.75rem; }
.cta-text { color: var(--text-muted); font-size: 1.1rem; }

/* ---------- Formular ---------- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  text-align: left;
  box-shadow: var(--shadow);
}
.form-title { font-size: 1.6rem; margin-bottom: 0.5rem; text-align: center; }
.form-subtitle { color: var(--text-muted); text-align: center; margin-bottom: 1.75rem; font-size: 0.95rem; }

.whatsapp-cta {
  margin-top: 1.75rem;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.whatsapp-cta-text { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1rem; }
.whatsapp-cta-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  background: var(--gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 0.15em;
}
.whatsapp-cta-link:hover { border-color: var(--accent-strong); }

/* Plätze-Widget: gleiche Optik wie der Countdown, damit die
   Verknappung visuell an dieselbe "Uhr tickt"-Sprache anknüpft. */
.spots-banner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.25rem) 2rem;
  text-align: center;
  margin-bottom: 1.75rem;
}
.spots-banner-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  color: var(--text);
  margin: 0 0 0.5rem;
}
.spots-banner-sub {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text);
  opacity: 0.85;
  margin: 0;
}
.spots-banner-note {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.9rem;
  max-width: 480px;
  margin: 1.1rem auto 0;
}
.spots-banner.is-sold-out { border-color: rgba(226, 116, 95, 0.35); }
.spots-banner.is-sold-out .spots-banner-headline { color: var(--accent); }
.form-row { margin-bottom: 1.4rem; }
/* Reservierungsformular als Flex-Spalte mit einheitlichem Abstand: so ist
   die Luecke zwischen zwei Feldern immer exakt gleich gross, egal ob es
   sich um ein einzelnes .field oder eine .form-row (Feld plus Fehlertext,
   z.B. Geburtsdatum) handelt. Der eigene margin-bottom von .form-row wird
   dafuer hier neutralisiert, sonst würde sich der Abstand verdoppeln. */
.reservation-form { display: flex; flex-direction: column; gap: 1.4rem; }
.reservation-form .form-row { margin-bottom: 0; }
.form-row-split { display: flex; gap: 1rem; }
.form-row-split > div { flex: 1; }
.form-row-checkbox { display: flex; align-items: center; gap: 0.5rem; }
.form-row-checkbox label { font-weight: 400; }

/* Floating Labels: Label liegt ueber dem Feld, wandert beim Fokussieren
   bzw. sobald Inhalt vorhanden ist, nach oben. Reines CSS ueber die
   :placeholder-shown-Pseudoklasse, kein JS noetig. */
.field { position: relative; }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.5em 1em 0.6em;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field select {
  padding: 1.5em 2.6em 0.6em 1em;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23938f86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
}
.field textarea { padding-top: 1.5em; }
.field label {
  position: absolute;
  left: 1em;
  right: 1em;
  top: 1.05em;
  max-width: calc(100% - 2em);
  /* Zu lange Labels (z.B. die Stadt- oder Quellen-Frage) auf bis zu zwei
     Zeilen umbrechen lassen statt den Text abzuschneiden, nur ein
     dritter, ueberzaehliger Umbruch wird noch mit "…" gekappt. Auf dem
     Handy war das vorher via nowrap+ellipsis oft nach wenigen Worten weg. */
  white-space: normal;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-muted);
  pointer-events: none;
  transition: top 0.2s var(--ease), font-size 0.2s var(--ease), color 0.2s ease;
}
/* input[type=date] zeigt in jedem Browser einen eigenen, nicht
   unterdrueckbaren Platzhalter ("tt.mm.jjjj") direkt im Feld an, egal was
   im placeholder-Attribut steht. Das Label muss deshalb hier immer schon
   in der kompakten Position stehen, sonst ueberlappen sich beide Texte. */
.field input[type="date"] ~ label {
  top: 0.55em;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* iOS Safari ignoriert bei input[type=date] jede eigene Hoehen-/Innenabstand-
   Vorgabe fast vollstaendig und rendert sein natives Steuerelement immer mit
   eigener, deutlich groesserer Mindesthoehe, egal was hier gesetzt wird
   (bestaetigter Bug, kein CSS-Wert loest das). Deshalb bleibt das native
   Feld nur noch fuer Wert/Fokus/den nativen Datepicker zustaendig, aber
   komplett unsichtbar und liegt als Overlay ueber dem sichtbaren Feld,
   .date-display darunter ist eine rein optische Kopie mit exakt derselben
   Optik wie die anderen Felder, ihr Text wird per JS synchron gehalten
   (siehe floating-fields.js). Tippen/Tap oeffnet weiterhin ganz normal den
   nativen Picker, nur die kaputte Eigen-Groesse ist nicht mehr sichtbar. */
.field-date input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.date-display {
  padding: 1.5em 1em 0.6em;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.date-display.has-value { color: var(--text); }
.field-date input[type="date"]:focus ~ .date-display {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input:focus ~ label,
.field input:not([type="date"]):not(:placeholder-shown) ~ label,
.field input[type="date"].has-value ~ label,
.field input[type="date"]:focus ~ label,
.field select:focus ~ label,
.field select.has-value ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label {
  top: 0.55em;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Felder mit besonders langen Labels (Stadt-Frage, Quellen-Frage)
   brauchen im Leerzustand mehr Platz oben, damit die zwei Zeilen des
   Labels nicht ueber den Feldrand hinausragen. Sobald ein Wert drinsteht
   bzw. fokussiert wird, schrumpft das Label auf die kompakte Zeile,
   dann ruecken Innenabstand wieder auf das normale Mass zusammen, sonst
   stuende der eingetragene Wert unnoetig tief im Feld. */
.field-tall input,
.field-tall select {
  padding-top: 3.3em;
  transition: padding-top 0.2s var(--ease), border-color 0.2s ease, box-shadow 0.2s ease;
}
.field-tall input:focus,
.field-tall input:not(:placeholder-shown),
.field-tall select:focus,
.field-tall select.has-value {
  padding-top: 1.5em;
}
.form-hint { font-size: 0.85rem; color: var(--danger); margin: 0.4rem 0 0; }

.flash {
  padding: 0.85em 1em;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}
.flash-error { background: var(--danger-bg); color: var(--danger); }
.flash-success { background: var(--ok-bg); color: var(--ok); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 2.5rem 1.5rem; }
.site-footer-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.site-footer-brand { font-family: var(--font-display); font-weight: 700; text-decoration: none; font-size: 0.95rem; }
.site-footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; }
.site-footer-links a:hover { color: var(--text); }
.site-footer-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 960px;
  margin: 1.75rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8rem;
}
.site-footer-credit:hover { color: var(--text); }
.site-footer-credit-mark { width: 18px; height: 18px; object-fit: contain; }

/* ---------- Legal-Seiten ---------- */
.legal-topbar { padding: 2rem 1.5rem 0; max-width: var(--content-width); margin: 0 auto; }
.legal-main { max-width: var(--content-width); margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.page-title { font-size: 2rem; margin-bottom: 2rem; }
.legal-intro { color: var(--text-muted); margin-top: -1.25rem; margin-bottom: 2rem; }
.legal-section { margin-bottom: 2rem; }
.legal-section h2 { font-size: 1.1rem; margin-bottom: 0.75rem; font-family: var(--font-display); }
.legal-section p { color: var(--text-muted); }
.legal-section a { color: var(--accent); }

/* ---------- Login ---------- */
.login-body {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
}
.login-card .brand-mark-img { width: 180px; margin: 0 auto 1rem; }
.login-subtitle { color: var(--text-muted); margin-bottom: 1.5rem; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; }
.login-form { text-align: left; display: flex; flex-direction: column; gap: 1.1rem; }
.login-back { margin-top: 1.5rem; font-size: 0.9rem; }
.login-back a { color: var(--accent); text-decoration: none; }

/* ---------- Leerer Zustand / Danke-Seite ---------- */
.empty-state-body, .danke-body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}
.empty-state { max-width: 480px; }
.empty-state .brand-mark-img { width: 240px; margin: 0 auto 1.5rem; }
.empty-state-text { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 2rem; }

.danke-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  max-width: 480px;
  box-shadow: var(--shadow);
}
.danke-check-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ok-bg);
  margin-bottom: 1.5rem;
}
.danke-check-svg { width: 30px; height: 30px; }
.danke-check-svg path {
  fill: none;
  stroke: var(--ok);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: draw-check 0.6s 0.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .danke-check-svg path { animation: none; stroke-dashoffset: 0; }
}
.danke-title { font-size: 1.7rem; margin-bottom: 1rem; }
.danke-text { color: var(--text-muted); margin-bottom: 1.5rem; }
.danke-details { margin-bottom: 1.75rem; }
.danke-details p { margin: 0 0 0.25rem; }
.danke-whatsapp-intro { color: var(--text-muted); font-size: 0.95rem; }
.danke-back { display: block; margin-top: 1.5rem; color: var(--text-muted); font-size: 0.9rem; text-decoration: none; }
.danke-back:hover { color: var(--text); }

/* ---------- Admin ---------- */
.admin-body { background: var(--bg); }
.admin-topbar {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.admin-topbar-brand { font-family: var(--font-display); font-weight: 700; text-decoration: none; margin-right: auto; font-size: 0.95rem; }
.admin-topbar-nav { display: flex; gap: 1.25rem; }
.admin-topbar-nav a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; }
.admin-topbar-nav a.is-active, .admin-topbar-nav a:hover { color: var(--accent); }
.admin-topbar-logout button {
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: var(--radius-sm); padding: 0.5em 1em; cursor: pointer; font-family: var(--font-body);
}
.admin-topbar-logout button:hover { color: var(--text); }

.admin-main { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.admin-main-narrow { max-width: 720px; }
.admin-main-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.admin-main-header-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.admin-page-title { font-size: 1.5rem; }
.admin-page-subtitle { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.4rem; }

.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; white-space: nowrap; font-family: var(--font-body); }
.admin-table th, .admin-table td { padding: 0.75em 1em; text-align: left; border-bottom: 1px solid var(--border); }
.admin-table th { color: var(--text-muted); font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-table tbody tr:hover { background: var(--surface); }
.admin-table-link { color: var(--accent); text-decoration: none; }
.admin-table-actions { display: flex; gap: 0.5rem; }
.btn-icon {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 0.4em 0.75em; font-size: 0.78rem; cursor: pointer; font-family: var(--font-body);
}
.btn-icon:hover { border-color: var(--accent); }
.btn-icon-muted { opacity: 0.7; }
.btn-icon-danger { color: var(--danger); border-color: rgba(226, 116, 95, 0.35); }
.btn-icon-danger:hover { border-color: var(--danger); background: var(--danger-bg); }
.btn-icon-pill {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 0.4em 1.1em;
  font-size: 0.8rem;
  font-family: var(--font-body);
  text-decoration: none;
}
.btn-icon-pill:hover { border-color: var(--accent); color: var(--accent); }

.party-hub-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.party-hub-action {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.party-hub-action:hover { border-color: var(--accent); background: var(--surface-2); }
.party-hub-action-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--text); margin-bottom: 0.5rem; }
.party-hub-action-text { display: block; color: var(--text-muted); font-size: 0.9rem; }

.badge { display: inline-block; padding: 0.25em 0.75em; border-radius: 999px; font-size: 0.72rem; font-family: var(--font-display); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-muted { background: var(--muted-badge-bg); color: var(--muted-badge); }

.admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-top: 2.5rem;
}
.admin-card-title { font-size: 1.15rem; margin-bottom: 0.4rem; }
.admin-card-subtitle { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; }

.admin-form { display: flex; flex-direction: column; gap: 1.1rem; }
.admin-form label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.admin-form input, .admin-form select, .admin-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75em 0.9em;
  width: 100%;
}
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.admin-form-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; align-items: end; }
.admin-form-inline .form-row-checkbox, .admin-form-inline button { grid-column: 1 / -1; }

.admin-fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin: 0; }
.admin-fieldset legend { font-family: var(--font-display); padding: 0 0.5rem; color: var(--accent); font-size: 0.9rem; }

.dj-rows { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.dj-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 1rem;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
}
.dj-row-preview { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.dj-row-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; }
.dj-row-file { padding: 0.4em; }
.dj-row-remove {
  background: transparent; border: 1px solid var(--border); color: var(--danger);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; line-height: 1;
}

/* ---------- Kunden (Dashboard) ---------- */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
/* Alle drei Karten sind per Grid gleich hoch (an der hoechsten Karte
   ausgerichtet). Titel bleibt oben, der Inhalt darunter bekommt den
   restlichen Platz und wird darin vertikal (und horizontal) zentriert,
   statt direkt unter dem Titel zu haengen und darunter Leerraum zu lassen. */
.dashboard-total-card, .dashboard-donut-card, .dashboard-age-card {
  display: flex;
  flex-direction: column;
}
.dashboard-card-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dashboard-total-value { font-family: var(--font-display); font-size: 3rem; color: var(--accent); }
.dashboard-total-hint { color: var(--text-muted); font-size: 0.8rem; margin: 0.4rem 0 0; }

.donut-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.donut {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.donut::after {
  content: '';
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: var(--surface);
}
.donut-legend { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; text-align: left; }
.donut-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.5rem; }

.age-bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; width: 100%; max-width: 340px; }
.age-bar-list li { display: grid; grid-template-columns: 128px 1fr 28px; gap: 0.75rem; align-items: center; font-size: 0.85rem; }
.age-bar-label { text-align: left; }
.age-bar-track { background: var(--bg); border-radius: 999px; overflow: hidden; height: 10px; }
.age-bar-fill { display: block; height: 100%; background: var(--chart-1); border-radius: 999px; }
.age-bar-count { text-align: right; color: var(--text-muted); }

.admin-search-input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7em 1em;
  width: 100%;
  margin-bottom: 1.25rem;
}
.admin-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

@media (max-width: 640px) {
  .site-footer-inner { flex-direction: column; align-items: flex-start; }
  .admin-main-header { flex-direction: column; }
  .dj-row { grid-template-columns: 48px 1fr; }
  .dj-row-remove { grid-column: 1 / -1; justify-self: end; }
  .form-row-split { flex-direction: column; }
  .usp-grid { grid-template-columns: 1fr; }
  .dj-grid { grid-template-columns: 1fr; }
  .countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
  .countdown-unit { min-width: 0; width: auto; padding: 1rem 0.35rem; }
  .countdown-digits { font-size: clamp(1.3rem, 7vw, 2.2rem); }
  .countdown-label { font-size: 0.58rem; letter-spacing: 0.04em; }
}

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- Gästeliste drucken ---------- */
/* Bewusst hell statt im dunklen Admin-Theme: eine gedruckte Gästeliste soll
   sparsam mit Tinte umgehen und am Einlass gut lesbar sein, nicht zum
   restlichen dunklen Look passen. */
.print-list-body { background: #fff; color: #111; font-family: var(--font-body); padding: 2rem; }
.print-list-toolbar { display: flex; justify-content: flex-end; gap: 0.75rem; margin-bottom: 1.5rem; }
.print-list-main { max-width: 800px; margin: 0 auto; }
.print-list-main h1 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 0.5rem; color: #111; }
.print-list-meta, .print-list-count { color: #444; font-size: 0.9rem; margin: 0 0 0.3rem; }
.print-list-count { margin-bottom: 1.5rem; font-weight: 700; }
.print-list-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.print-list-table th, .print-list-table td { padding: 0.5em 0.75em; text-align: left; border-bottom: 1px solid #ddd; }
.print-list-table th { font-family: var(--font-display); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #666; }
.print-list-checkbox { width: 90px; }
.print-list-checkbox::after { content: ''; display: inline-block; width: 18px; height: 18px; border: 1.5px solid #999; border-radius: 4px; }
@media print {
  .print-list-toolbar { display: none; }
  .print-list-body { padding: 0; }
}