/* Karten-Tokens für Ticketing-Oberflächen (E2E-Extremtest 09/2026: F36/F48/F60).
 *
 * Problem: Year-, General- und Portal-Theme setzen Textfarben global — u. a.
 * `.general-theme .text-gray-900 { color: var(--general-text-primary) !important }`
 * und `.portal-shell .portal-main h1 { color: #fff !important; text-shadow … }`.
 * Auf einer hellen Karte (Gast-Checkout, Gast-Bestellseite, Ticketseite, Scan-PWA)
 * wurde daraus weiß auf weiß. Die Karten bekommen deshalb eigene, vom Theme
 * unabhängige Tokens. Alle Paarungen liegen über AA (≥ 4,5:1) auf `--card-bg`:
 *   --card-ink   #111827 → 17,4:1     --card-muted  #4b5563 → 7,6:1
 *   --card-faint #6b7280 → 4,8:1      --card-link   #1d4ed8 → 6,3:1
 * Die Werte sind bewusst NICHT an das Farbschema des Betriebssystems gekoppelt —
 * eine Ticketkarte ist wie ein gedrucktes Ticket immer hell.
 */
:root {
  --card-bg: #ffffff;
  --card-bg-alt: #f9fafb;
  --card-ink: #111827;
  --card-muted: #4b5563;
  --card-faint: #6b7280;
  --card-border: #e5e7eb;
  --card-link: #1d4ed8;
  --card-primary-bg: #111827;
  --card-primary-ink: #ffffff;
}

.mp-card {
  background: var(--card-bg);
  color: var(--card-ink);
  border: 1px solid var(--card-border);
}

.mp-card--alt {
  background: var(--card-bg-alt);
}

/* Spezifität (0,2,1)+ schlägt `.general-theme .text-gray-900` (0,2,0) und die
   Utility-Klassen; `!important` ist nötig, weil die Theme-Regeln es auch nutzen. */
body .mp-card,
body .mp-card h1,
body .mp-card h2,
body .mp-card h3,
body .mp-card h4,
body .mp-card legend,
body .mp-card label,
body .mp-card summary,
body .mp-card p,
body .mp-card li,
body .mp-card dt,
body .mp-card dd,
body .mp-card span,
body .mp-card div,
body .mp-card .text-gray-900,
body .mp-card .text-gray-800,
body .mp-card .text-gray-700 {
  color: var(--card-ink) !important;
}

body .mp-card .text-gray-600,
body .mp-card .text-gray-500,
body .mp-card .mp-muted {
  color: var(--card-muted) !important;
}

body .mp-card .text-gray-400,
body .mp-card .mp-faint {
  color: var(--card-faint) !important;
}

body .mp-card a:not(.mp-btn):not(.mp-btn-primary):not([class*="bg-"]) {
  color: var(--card-link) !important;
}

/* Farbige Status-/Hinweisflächen innerhalb der Karte behalten ihre eigene Farbe
   (explizit, weil die Karten-Tinte oben auch span/div erfasst). */
body .mp-card .text-green-700, body .mp-card .text-green-800 { color: #15803d !important; }
body .mp-card .text-red-600, body .mp-card .text-red-700 { color: #b91c1c !important; }
body .mp-card .text-amber-700, body .mp-card .text-amber-800, body .mp-card .text-amber-900 { color: #92400e !important; }
body .mp-card .text-orange-600 { color: #c2410c !important; }
body .mp-card .text-emerald-800 { color: #065f46 !important; }
body .mp-card .text-sky-900 { color: #0c4a6e !important; }

/* Weiße Schrift auf dunklen Buttons/Chips bleibt weiß. */
body .mp-card .text-white,
body .mp-card .bg-black,
body .mp-card .bg-blue-600,
body .mp-card .bg-red-600,
body .mp-card .bg-gray-900,
body .mp-card .bg-gray-900 span,
body .mp-card .mp-btn-primary {
  color: var(--card-primary-ink) !important;
}

body .mp-card input:not([type="checkbox"]):not([type="radio"]),
body .mp-card select,
body .mp-card textarea {
  background: var(--card-bg);
  color: var(--card-ink) !important;
  border-color: #d1d5db;
}

body .mp-card input::placeholder,
body .mp-card textarea::placeholder {
  color: var(--card-faint);
  opacity: 1;
}

.mp-btn-primary {
  background: var(--card-primary-bg);
  color: var(--card-primary-ink);
}

/* Ticketseite im Portal (F48): die Portal-H1 ist weiß mit Schatten und einer
   Vorhang-Animation — auf der hellen Ticketkarte unsichtbar. Innerhalb einer
   Karte gilt die Karten-Tinte, ohne Schatten, ohne Riesen-Schrift. */
.portal-shell .portal-main .mp-card h1,
.portal-shell .portal-main .mp-card h2 {
  color: var(--card-ink) !important;
  text-shadow: none !important;
  animation: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transform: none !important;
  opacity: 1 !important;
  letter-spacing: normal !important;
}

.portal-shell .portal-main .mp-card h1 {
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

/* Scan-PWA (F60): feste Bedienleiste am unteren Rand (Fehler melden / Cookies)
   darf „Erfassen" nicht überdecken — Platz am Seitenende freihalten. */
.mp-scan-page {
  padding-bottom: 5.5rem;
}

/* Ergebniskarte der Scan-PWA: scan.js schaltet bg-green-50 / bg-red-50 um —
   diese Tönung muss die Karten-Grundfarbe übersteuern. */
.mp-card.bg-green-50 { background: #f0fdf4; border-color: #bbf7d0; }
.mp-card.bg-red-50 { background: #fef2f2; border-color: #fecaca; }
.mp-card.bg-amber-50 { background: #fffbeb; border-color: #fcd34d; }
.mp-card.bg-emerald-50 { background: #ecfdf5; border-color: #6ee7b7; }
body .mp-card .mp-result-rejected { color: #b91c1c !important; }