/* ==========================================================================
   Design der Festival-App – übernommen aus django-ticketsys.
   ==========================================================================

   Das Ticketsystem war in Tailwind gebaut, diese App in Bootstrap. Statt alle
   Vorlagen auf Tailwind-Klassen umzuschreiben, sind hier die Gestaltungsmittel
   von dort nachgebaut und auf Bootstraps Komponenten gelegt: derselbe
   hellgraue Grund, dieselbe dunkle Kopfzeile, dieselben stark gerundeten
   weissen Karten mit weichem Schatten, dieselben blauen Preise und
   Pillen-Badges. Die Vorlagen bleiben dadurch lesbar und die Tests grün.

   Bootstrap selbst liegt lokal unter static/vendor/ – am Festival darf die
   Oberfläche nicht davon abhängen, dass ein CDN erreichbar ist.
   ========================================================================== */

:root {
  /* Graustufen wie im Ticketsystem (Tailwind-Palette) */
  --grau-50:  #f9fafb;
  --grau-100: #f3f4f6;
  --grau-200: #e5e7eb;
  --grau-300: #d1d5db;
  --grau-400: #9ca3af;
  --grau-500: #6b7280;
  --grau-600: #4b5563;
  --grau-700: #374151;
  --grau-800: #1f2937;
  --grau-900: #111827;

  --blau-50:  #eff6ff;
  --blau-100: #dbeafe;
  --blau-200: #bfdbfe;
  --blau-400: #60a5fa;
  --blau-500: #3b82f6;
  --blau-600: #2563eb;
  --blau-700: #1d4ed8;

  --gelb-400: #facc15;
  --gelb-500: #eab308;
  --amber-50: #fffbeb;
  --amber-300:#fcd34d;
  --amber-700:#b45309;

  --gruen-50: #f0fdf4;
  --gruen-100:#dcfce7;
  --gruen-200:#bbf7d0;
  --gruen-500:#22c55e;
  --gruen-600:#16a34a;
  --gruen-800:#166534;

  --rot-50:  #fef2f2;
  --rot-100: #fee2e2;
  --rot-200: #fecaca;
  --rot-500: #ef4444;
  --rot-600: #dc2626;
  --rot-800: #991b1b;

  --lila-50: #faf5ff;
  --lila-100:#f3e8ff;
  --lila-600:#9333ea;
  --lila-700:#7e22ce;

  /* Radien: gross und weich, wie die rounded-2xl-Karten drüben */
  --radius-gross:  1rem;
  --radius-mittel: .75rem;
  --radius-klein:  .5rem;

  --schatten-s: 0 1px 2px rgba(0, 0, 0, .05);
  --schatten-m: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  --schatten-l: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);

  /* Bootstrap auf dieselben Werte ziehen */
  --bs-body-bg: var(--grau-50);
  --bs-body-color: var(--grau-800);
  --bs-secondary-color: var(--grau-500);
  --bs-border-color: var(--grau-200);
  --bs-border-radius: var(--radius-mittel);
  --bs-border-radius-sm: var(--radius-klein);
  --bs-border-radius-lg: var(--radius-gross);
  --bs-link-color: var(--blau-600);
  --bs-link-hover-color: var(--blau-700);
  --bs-primary: var(--blau-600);
  --bs-primary-rgb: 37, 99, 235;
}

body {
  background: var(--grau-50);
  color: var(--grau-800);
  -webkit-font-smoothing: antialiased;
}

/* Überschriften sind drüben schwer und eng gesetzt. */
h1, .h1, h2, .h2, h3, .h3 {
  color: var(--grau-900);
  font-weight: 800;
  letter-spacing: -.02em;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }


/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */

.kopfzeile {
  background: var(--grau-900);
  border-bottom: 1px solid var(--grau-800);
  box-shadow: var(--schatten-l);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.kopfzeile .navbar-brand { color: #fff; font-weight: 800; letter-spacing: -.02em; }
.kopfzeile .navbar-brand:hover { color: #fff; text-decoration: none; }

/* Das runde blaue Abzeichen neben dem Namen. */
.marke-abzeichen {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--blau-600);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25);
  flex-shrink: 0;
}
.marke-abzeichen svg { width: 1.25rem; height: 1.25rem; }

.kopfzeile .nav-link,
.kopfzeile .navbar-text {
  color: var(--grau-400);
  font-weight: 500;
}
.kopfzeile .nav-link:hover { color: #fff; text-decoration: none; }
.kopfzeile .nav-link.aktiv { color: var(--blau-400); }

/* Die Kopfzeile läuft im Dunkelmodus – das Aufklappmenü darunter aber nicht.
   Ohne diese Werte erbt es Bootstraps dunklen Grund, während die Schrift aus
   dem Theme dunkel bleibt: unlesbar. Deshalb hier alle Farben ausdrücklich. */
.kopfzeile .dropdown-menu {
  --bs-dropdown-bg: #fff;
  --bs-dropdown-color: var(--grau-700);
  --bs-dropdown-link-color: var(--grau-700);
  --bs-dropdown-link-hover-bg: var(--blau-50);
  --bs-dropdown-link-hover-color: var(--blau-700);
  --bs-dropdown-link-active-bg: var(--blau-50);
  --bs-dropdown-link-active-color: var(--blau-600);
  --bs-dropdown-border-color: var(--grau-100);
  background: #fff;
  color: var(--grau-700);
  border: 1px solid var(--grau-100);
  border-radius: var(--radius-mittel);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  padding: 0;
  overflow: hidden;
  min-width: 14rem;
}
.kopfzeile .dropdown-item {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--grau-100);
  font-weight: 500;
  color: var(--grau-700);
  background: #fff;
}
.kopfzeile .dropdown-item:last-child { border-bottom: 0; }
.kopfzeile .dropdown-item:hover,
.kopfzeile .dropdown-item:focus {
  background: var(--blau-50);
  color: var(--blau-700);
}
.kopfzeile .dropdown-item.active {
  background: var(--blau-50);
  color: var(--blau-600);
  font-weight: 700;
}

/* Das aktive Event steht als ruhige Marke in der Kopfzeile – einzeilig,
   damit ein langer Festivalname die Leiste nicht umbricht. */
.aktives-event {
  display: inline-block;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--grau-400);
  font-size: .8125rem;
  font-weight: 600;
  border-left: 1px solid var(--grau-700);
  padding-left: .75rem;
}

/* Der Warenkorb-Knopf ist drüben der einzige gelbe Akzent – und genau
   deshalb findet man ihn sofort. */
.knopf-warenkorb {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--grau-800);
  border: 1px solid var(--grau-700);
  color: var(--gelb-500);
  font-weight: 700;
  font-size: .875rem;
  padding: .5rem 1rem;
  border-radius: var(--radius-klein);
}
.knopf-warenkorb:hover { background: var(--grau-700); color: var(--gelb-400); text-decoration: none; }
.knopf-warenkorb svg { width: 1rem; height: 1rem; }
.knopf-warenkorb .anzahl {
  background: var(--gelb-500);
  color: var(--grau-900);
  border-radius: 999px;
  font-size: .7rem;
  padding: 0 .4rem;
  min-width: 1.2rem;
  text-align: center;
}


/* --------------------------------------------------------------------------
   Karten und Flächen
   -------------------------------------------------------------------------- */

.card {
  --bs-card-border-color: var(--grau-200);
  --bs-card-border-radius: var(--radius-gross);
  --bs-card-inner-border-radius: calc(var(--radius-gross) - 1px);
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
  box-shadow: var(--schatten-s);
}
.card.shadow-sm { box-shadow: var(--schatten-s) !important; }
.card.shadow { box-shadow: var(--schatten-m) !important; }

/* Dunkles Band als Kartenkopf – drüben über „Tickets auswählen“. */
.karten-kopf-dunkel {
  background: var(--grau-900);
  color: #fff;
  padding: 1.25rem 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

/* Ruhige Fläche innerhalb einer Karte (Datum/Ort, Hinweiskästen). */
.flaeche-ruhig {
  background: var(--grau-50);
  border: 1px solid var(--grau-100);
  border-radius: var(--radius-mittel);
  padding: 1.25rem;
}

/* Kleine Grossbuchstaben-Beschriftung über einem Wert. */
/* Zwei Angaben nebeneinander: am Handy durch eine Linie oben getrennt,
   ab Tablet durch eine senkrechte Linie dazwischen. Bootstrap hat dafür
   keine responsiven Rahmen-Hilfsklassen. */
.trennlinie-md { border-top: 1px solid var(--grau-200); padding-top: 1rem; }
@media (min-width: 768px) {
  .trennlinie-md {
    border-top: 0;
    border-left: 1px solid var(--grau-200);
    padding-top: 0;
    padding-left: 1.5rem;
  }
}

.beschriftung {
  font-size: .75rem;
  font-weight: 700;
  color: var(--grau-500);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.preis {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--blau-600);
  line-height: 1.1;
}


/* --------------------------------------------------------------------------
   Kennzahl-Kacheln
   -------------------------------------------------------------------------- */

.kachel {
  border: 1px solid var(--grau-200);
  border-left: .35rem solid var(--blau-600);
  border-radius: var(--radius-gross);
}
.kachel .wert {
  font-size: 2rem;
  font-weight: 800;
  color: var(--grau-900);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.kachel .zusatz { color: var(--grau-500); font-size: .875rem; }


/* --------------------------------------------------------------------------
   Auswahl-Kacheln (Ticketkategorien, Kassenartikel)
   -------------------------------------------------------------------------- */

.auswahl-kachel {
  background: var(--grau-50);
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  padding: 1.5rem;
  height: 100%;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.auswahl-kachel:hover {
  background: #fff;
  border-color: var(--blau-400);
  box-shadow: var(--schatten-l);
}
.auswahl-kachel .titel {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--grau-900);
  line-height: 1.2;
}
.auswahl-kachel.aus { opacity: .7; }


/* --------------------------------------------------------------------------
   Schaltflächen
   -------------------------------------------------------------------------- */

.btn {
  --bs-btn-border-radius: var(--radius-klein);
  font-weight: 700;
}
.btn-primary {
  --bs-btn-bg: var(--blau-600);
  --bs-btn-border-color: var(--blau-600);
  --bs-btn-hover-bg: var(--blau-700);
  --bs-btn-hover-border-color: var(--blau-700);
  --bs-btn-active-bg: var(--blau-700);
  --bs-btn-disabled-bg: var(--blau-600);
  --bs-btn-disabled-border-color: var(--blau-600);
}
.btn-outline-primary {
  --bs-btn-color: var(--blau-600);
  --bs-btn-border-color: var(--blau-200);
  --bs-btn-hover-bg: var(--blau-600);
  --bs-btn-hover-border-color: var(--blau-600);
}
.btn-success {
  --bs-btn-bg: var(--gruen-600);
  --bs-btn-border-color: var(--gruen-600);
  --bs-btn-hover-bg: #15803d;
  --bs-btn-hover-border-color: #15803d;
}
.btn-outline-secondary {
  --bs-btn-color: var(--grau-700);
  --bs-btn-border-color: var(--grau-300);
  --bs-btn-hover-bg: var(--grau-100);
  --bs-btn-hover-border-color: var(--grau-400);
  --bs-btn-hover-color: var(--grau-900);
}
.btn-link { font-weight: 600; }

/* Grosse Ziele für Touch – Kasse und Einlass werden im Stehen bedient. */
.touch-ziel { min-height: 3.25rem; font-size: 1.05rem; }


/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */

.form-control, .form-select {
  border-color: var(--grau-300);
  border-radius: var(--radius-klein);
  padding: .55rem .85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--blau-400);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .25);
}
.form-label { font-weight: 600; color: var(--grau-700); margin-bottom: .35rem; }
.form-text { color: var(--grau-500); }
.form-check-input:checked { background-color: var(--blau-600); border-color: var(--blau-600); }

/* iOS meldet für Datums- und Zeitfelder eine sehr grosse Mindestbreite und
   sprengt damit schmale Spalten. */
input[type="datetime-local"], input[type="date"], input[type="time"] {
  min-width: 0; max-width: 100%; box-sizing: border-box;
}
@media (max-width: 767px) {
  input[type="datetime-local"], input[type="date"], input[type="time"] {
    -webkit-appearance: none; appearance: none;
  }
}


/* --------------------------------------------------------------------------
   Tabellen
   -------------------------------------------------------------------------- */

.table {
  --bs-table-bg: #fff;
  --bs-table-color: var(--grau-800);
  border-color: var(--grau-200);
  margin-bottom: 0;
}
.table > thead th {
  font-size: .75rem;
  font-weight: 700;
  color: var(--grau-500);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--grau-50);
  border-bottom: 1px solid var(--grau-200);
  padding: .75rem 1rem;
}
.table > tbody td { padding: .85rem 1rem; border-color: var(--grau-100); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--blau-50); background: var(--blau-50); }

/* Tabellen sitzen drüben in einer Karte statt frei auf der Seite. */
.tabellen-karte {
  background: #fff;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-s);
  overflow: hidden;
}
.tabellen-karte .table { border-radius: 0; }


/* --------------------------------------------------------------------------
   Badges und Meldungen
   -------------------------------------------------------------------------- */

.badge {
  border-radius: 999px;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .02em;
  padding: .35em .7em;
}
.text-bg-success { background: var(--gruen-100) !important; color: var(--gruen-800) !important; }
.text-bg-danger  { background: var(--rot-100) !important;   color: var(--rot-800) !important; }
.text-bg-warning { background: var(--amber-50) !important;  color: var(--amber-700) !important;
                   border: 1px solid var(--amber-300); }
.text-bg-info    { background: var(--blau-50) !important;   color: var(--blau-700) !important; }
.text-bg-primary { background: var(--blau-100) !important;  color: var(--blau-700) !important; }
.text-bg-secondary { background: var(--grau-100) !important; color: var(--grau-600) !important; }
.text-bg-light   { background: var(--grau-100) !important;  color: var(--grau-600) !important; }
.text-bg-dark    { background: var(--grau-800) !important;  color: #fff !important; }

/* Meldungen: farbige Fläche mit Symbol im Kreis. */
.meldung {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-gross);
  border: 1px solid;
  font-weight: 600;
  box-shadow: var(--schatten-s);
}
.meldung .symbol {
  border-radius: 50%;
  padding: .5rem;
  display: inline-flex;
  flex-shrink: 0;
}
.meldung .symbol svg { width: 1.5rem; height: 1.5rem; }
.meldung .text { flex-grow: 1; font-size: 1rem; }

.meldung-success { background: var(--gruen-50); color: var(--gruen-800); border-color: var(--gruen-200); }
.meldung-success .symbol { background: var(--gruen-100); color: var(--gruen-600); }
.meldung-danger  { background: var(--rot-50);   color: var(--rot-800);   border-color: var(--rot-200); }
.meldung-danger .symbol  { background: var(--rot-100);   color: var(--rot-600); }
.meldung-warning { background: var(--amber-50); color: var(--amber-700); border-color: var(--amber-300); }
.meldung-warning .symbol { background: #fef3c7; color: var(--amber-700); }
.meldung-info    { background: var(--blau-50);  color: var(--blau-700);  border-color: var(--blau-200); }
.meldung-info .symbol    { background: var(--blau-100);  color: var(--blau-600); }

/* Bootstrap-Alerts in denselben ruhigen Ton bringen. */
.alert {
  border-radius: var(--radius-gross);
  border-width: 1px;
  font-weight: 500;
}
.alert-info      { background: var(--blau-50);  color: var(--blau-700);  border-color: var(--blau-200); }
.alert-success   { background: var(--gruen-50); color: var(--gruen-800); border-color: var(--gruen-200); }
.alert-warning   { background: var(--amber-50); color: var(--amber-700); border-color: var(--amber-300); }
.alert-danger    { background: var(--rot-50);   color: var(--rot-800);   border-color: var(--rot-200); }
.alert-secondary { background: var(--grau-100); color: var(--grau-600);  border-color: var(--grau-200); }


/* --------------------------------------------------------------------------
   Fusszeile
   -------------------------------------------------------------------------- */

.fusszeile {
  background: #fff;
  border-top: 1px solid var(--grau-200);
  color: var(--grau-500);
  font-size: .875rem;
}
.fusszeile a { color: var(--grau-500); font-weight: 500; }
.fusszeile a:hover { color: var(--grau-800); text-decoration: none; }


/* --------------------------------------------------------------------------
   Einlass: die einzige Ansicht, die nachts im Regen bedient wird.
   -------------------------------------------------------------------------- */

#ergebnis.gueltig { background: var(--gruen-600); color: #fff; }
#ergebnis.fehler  { background: var(--rot-600);   color: #fff; }
#ergebnis.akte    { background: var(--blau-500);  color: #fff; }
#ergebnis .meldung-gross { font-size: 2rem; font-weight: 800; line-height: 1.1; }

@media print {
  .kopfzeile, .fusszeile, .no-print { display: none !important; }
  body { background: #fff; }
}