/*
 * Birthday Adventure - Design-Tokens (Dokument 18, OPEN_DESIGN_DECISION_001-006).
 * Wird von allen 3 Frontend-Apps eingebunden (Buyer/Player, Admin, Marketing).
 *
 * Stand 2026-07-30: Farbpalette, Typografie, Formensprache und Animationen wurden auf
 * Nutzerwunsch an einen als Referenz vorgelegten Klick-Prototyp angeglichen (warmes,
 * naechtliches "Event-Ticket"-Design statt des bisherigen hellen Creme/Orange-Looks) -
 * ueberschreibt damit bewusst OPEN_DESIGN_DECISION_001/002/004/005. Uebernommen wurde
 * ausschliesslich das visuelle Design-System (Farben/Typografie/Ticket-Motiv/Buttons/
 * Animationen) - die im selben Referenzdokument beschriebene Produktmechanik (feste
 * 8-Stationen-Struktur, 1000-Punkte-System, "Erinnerungsschluessel") gehoert zu einem
 * anderen Projekt-Tech-Stack (React/Next.js/NestJS/Supabase) und wurde NICHT uebernommen -
 * sie widerspraeche den geschuetzten Invarianten Mission Engine/Punktevergabe (Dokument 35,
 * Abschnitt 9). Siehe OFFENE_ENTSCHEIDUNGEN.md fuer die vollstaendige Begruendung.
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  /* Farbpalette (OPEN_DESIGN_DECISION_001, 2026-07-30 aktualisiert) */
  --ink: #171130;             /* Haupt-Hintergrund, sehr dunkles Nachtblau-Violett */
  --ink2: #1e1740;            /* sekundaerer dunkler Hintergrund (Karten, Badges) */
  --dusk: #2c2259;            /* Ticket-Karten-Verlauf, Start */
  --dusk2: #392c72;           /* Ticket-Karten-Verlauf, Ende */
  --gold: #e3ac55;            /* Primaerakzent - Buttons, Icons, aktive Zustaende */
  --gold-soft: #f0cf9a;       /* helleres Gold - Verlaeufe, sekundaerer Text auf Dunkel */
  --rose: #d8748c;            /* Sekundaerakzent - emotionale Momente */
  --paper-dim: #ddd0ac;       /* gedaempfter Text auf Video-/Film-Karten */
  --text: #f4ecdb;            /* Haupttext auf dunklem Grund (warmes Off-White) */
  --text-muted: rgba(244, 236, 219, 0.6); /* gedaempfter Fliesstext */

  /* Semantische Statusfarben (unveraendert - bereits ausreichend Kontrast auf --ink) */
  --color-success: #4CAF6D;
  --color-warning: #E8A23A;
  --color-error: #E86A52;

  /* Rueckwaertskompatible Aliase - viele bestehende Komponenten nutzen diese Namen */
  --color-primary: var(--gold);
  --color-primary-hover: #d1994a;
  --color-secondary: var(--rose);
  --color-background: var(--ink);
  --color-text-primary: var(--text);
  --color-text-secondary: var(--text-muted);
  --border-soft: rgba(227, 172, 85, 0.18);

  /* Typografie (OPEN_DESIGN_DECISION_002, 2026-07-30 aktualisiert) */
  --font-display: 'Fraunces', Georgia, serif;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Formensprache (OPEN_DESIGN_DECISION_004) */
  --radius-small: 8px;
  --radius-standard: 12px;
  --radius-large: 20px;

  /* Abstaende (8-Punkt-Grid, strukturell fix) */
  --spacing-grid: 8px;

  /* Animationen (OPEN_DESIGN_DECISION_005) */
  --duration-micro: 150ms;
  --duration-standard: 250ms;
  --duration-celebration: 500ms;
  --easing-standard: ease-in-out;
  --easing-celebration: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Touch-Ziele */
  --touch-target-min: 44px;
}

* {
  box-sizing: border-box;
}

/* Qualitaets-Politur (2026-08-06, Betreiberauftrag "hochwertiges Erlebnismoment", ohne
   Aenderung an Funktion/Daten): sichtbarer Tastatur-Fokus fehlte bisher komplett - kein einziges
   :focus/:focus-visible im gesamten Design-System. Betrifft Barrierefreiheit (WCAG 2.4.7) und
   wirkt sich auf ALLE 3 Apps gleichzeitig aus, da design-tokens.css ueberall eingebunden ist.
   :focus-visible statt :focus, damit Maus-/Touch-Klicks weiterhin keinen Ring zeigen (nur
   tatsaechliche Tastaturnavigation). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}

/* Native Checkboxen/Radios (Consent-Gate, Zahlungsanbieter-Auswahl u.a.) uebernehmen ohne
   eigene Komponente die Systemfarbe des Browsers - accent-color faerbt sie ins bestehende
   Gold-Farbschema ein, rein visuell, keine Aenderung an Verhalten/Wert. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--gold);
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  background-color: var(--ink);
  background-image:
    radial-gradient(1.5px 1.5px at 20% 15%, rgba(244, 236, 219, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 65% 8%, rgba(244, 236, 219, 0.25), transparent),
    radial-gradient(2px 2px at 85% 22%, rgba(244, 236, 219, 0.3), transparent),
    radial-gradient(1px 1px at 40% 35%, rgba(244, 236, 219, 0.2), transparent),
    radial-gradient(1.5px 1.5px at 10% 55%, rgba(244, 236, 219, 0.25), transparent),
    radial-gradient(1.5px 1.5px at 75% 65%, rgba(244, 236, 219, 0.2), transparent),
    radial-gradient(1px 1px at 55% 80%, rgba(244, 236, 219, 0.18), transparent),
    radial-gradient(1.5px 1.5px at 92% 88%, rgba(244, 236, 219, 0.22), transparent),
    linear-gradient(160deg, #100c22 0%, #1a1338 55%, #241a46 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}

button, input, textarea, select {
  font-family: inherit;
}

/* Eyebrow-Label: kleine, umbrechende Ueberschrift ueber Bildschirmtiteln (Abschnitt 1.7) */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 4px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: 0 24px;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: transform var(--duration-micro) var(--easing-standard), box-shadow var(--duration-standard) var(--easing-standard);
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: #241a0a;
  box-shadow: 0 6px 20px rgba(227, 172, 85, 0.25);
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 8px 24px rgba(227, 172, 85, 0.35); }
.btn-primary:disabled { background: #4a4468; color: rgba(244, 236, 219, 0.4); box-shadow: none; }

/* "rose"-Button: emotional aufgeladene Momente (Dokument 18, Abschnitt 1.5) - additiv, wird
   gezielt dort eingesetzt, wo ein Screen bewusst besonders emotional markiert werden soll. */
.btn-rose {
  background: linear-gradient(135deg, #e69aac, var(--rose));
  color: #2a0f16;
  box-shadow: 0 6px 20px rgba(216, 116, 140, 0.25);
}
.btn-rose:disabled { background: #4a4468; color: rgba(244, 236, 219, 0.4); box-shadow: none; }

/* "ghost": sekundaere Aktionen - ersetzt die bisherige .btn-secondary-Optik 1:1 (gleiche
   Klasse, damit bestehende Templates unveraendert bleiben). */
.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(244, 236, 219, 0.35);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--gold-soft); color: var(--gold-soft); }

.card {
  background: var(--ink2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-standard);
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  color: var(--text);
}

/* Ticket-Karte (Abschnitt 1.4): zentrales wiederkehrendes Motiv fuer besonders markierte
   Momente (Missionszusammenfassung, Einstieg) - additiv zu .card, kein Ersatz dafuer. */
.ticket {
  position: relative;
  background: linear-gradient(160deg, var(--dusk), var(--dusk2));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-large);
  padding: 28px 24px;
  color: var(--text);
  overflow: visible;
}
.ticket-notch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
}
.ticket-notch.left { left: -11px; }
.ticket-notch.right { right: -11px; }
.ticket-divider {
  border: none;
  border-top: 2px dashed rgba(246, 238, 221, 0.22);
  margin: 16px 0;
}

.input {
  min-height: var(--touch-target-min);
  padding: 0 16px;
  border-radius: var(--radius-small);
  border: 1px solid rgba(244, 236, 219, 0.25);
  background: rgba(23, 17, 48, 0.4);
  color: var(--text);
  font-size: 16px;
  width: 100%;
}
.input::placeholder { color: var(--text-muted); }

.text-secondary {
  color: var(--text-muted);
}

.link {
  color: var(--gold-soft);
  text-decoration: none;
  /* Bugfix (Nutzer-Meldung: Link ragt ueber den Rahmen hinaus) - lange, leerzeichenfreie
     Zeichenketten (z. B. Zugangslinks) haben ohne diese Regel keinen natuerlichen Umbruchpunkt
     und ragen sonst ueber ihren Container hinaus, statt innerhalb der Karte umzubrechen. */
  overflow-wrap: anywhere;
}
.link:hover { text-decoration: underline; }

/* TopBadge (Abschnitt 1.7): kleine pillenfoermige Meta-Anzeige (z. B. Punktestand) */
.top-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  background: var(--ink2);
  border: 1px solid var(--border-soft);
  color: var(--gold-soft);
  padding: 4px 12px;
  border-radius: 999px;
}

/* ---- Animationen (rein CSS, Abschnitt 1.8) ---- */
@keyframes fadein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim-fadein { animation: fadein 0.35s var(--easing-standard); }

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(227, 172, 85, 0.5); }
  100% { box-shadow: 0 0 0 24px rgba(227, 172, 85, 0); }
}
.anim-pulse-ring { animation: pulse-ring 1.4s var(--easing-standard) infinite; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.anim-shake { animation: shake 0.4s var(--easing-standard); }

@keyframes pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.anim-pop { animation: pop var(--duration-celebration) var(--easing-celebration); }

@keyframes spin {
  to { transform: rotate(360deg); }
}
.anim-spin { animation: spin 6s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .anim-fadein, .anim-pulse-ring, .anim-shake, .anim-pop, .anim-spin {
    animation: none;
  }
}