/* Event-Pop-up (components/EventPopup.jsx) — eigene Datei, damit es sich ohne die Haupt-App
   ein- und ausbauen laesst. Eingebunden in index.html. */
.ep { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--bg-1); color: var(--ink);
  padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.ep::backdrop { background: rgba(8, 12, 32, .7); backdrop-filter: blur(4px); }
.ep-inhalt { padding: 18px 24px 22px; position: relative; text-align: center; }
/* Kopf in Pepinas Farben (Himmelblau/Gelb); Pepina steht unten auf der Kante. */
.ep-kopf { position: relative; height: 300px; overflow: hidden; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #e8f9ff 0%, #9fe3fb 55%, #3fb8ea 100%); border-bottom: 4px solid #ffe14d; }
.ep h2 { margin: 0; }
.ep-schrift { position: relative; z-index: 2; display: block; width: 64%; height: auto; margin: 12px auto 0; filter: drop-shadow(0 3px 0 rgba(13, 27, 61, .25)); }
.ep-foto { position: absolute; z-index: 1; left: 50%; bottom: -2px; transform: translateX(-50%); height: 185px; width: auto; }
.ep-x { position: absolute; z-index: 3; top: 8px; right: 10px; width: 40px; height: 40px; border-radius: 50%; background: rgba(13, 27, 61, .55); border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.ep-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-3); margin: 0 0 6px; }
.ep-wann { color: var(--ink-2); margin: 0 0 14px; }
.ep-rest, .ep-klein { color: var(--ink-3); font-size: 13px; margin: 8px 0; }
.ep-zeile { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); text-align: left; }
.ep-zeile small { display: block; color: var(--ink-3); }
.ep-zaehler { display: flex; align-items: center; gap: 12px; }
.ep-zaehler button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font-size: 20px; cursor: pointer; }
.ep-zaehler button:disabled { opacity: .35; cursor: default; }
.ep-zaehler span { min-width: 1.5em; font-size: 18px; font-weight: 700; }
.ep-feld { display: block; text-align: left; font-size: 13px; color: var(--ink-2); margin-top: 10px; }
.ep-feld input { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; }
.ep-hake { display: flex; gap: 8px; text-align: left; font-size: 13px; color: var(--ink-2); margin: 14px 0 4px; }
.ep-hake a { color: var(--accent-2); }
.ep-summe { display: flex; justify-content: space-between; font-size: 18px; padding: 12px 0; border-top: 1px solid var(--line); margin-top: 10px; }
.ep-los { width: 100%; justify-content: center; }
.ep-los:disabled { opacity: .5; cursor: default; }
.ep-fehler { color: var(--danger); font-size: 14px; }
.ep-stand { margin: 16px 0 0; }
.ep-code { font-family: var(--mono); font-size: 22px; color: var(--accent-3); letter-spacing: .05em; }
.ep-hake input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent-3); }
/* Bezahlschritt: Stripe braucht Platz — Fenster breiter, Kopf flacher, Foto weg. */
.ep.ep-breit { width: min(640px, calc(100vw - 16px)); }
.ep-breit .ep-kopf { height: 112px; }
.ep-breit .ep-foto { display: none; }
.ep-stripe { margin: 8px -8px 0; min-height: 360px; border-radius: var(--r-md); overflow: hidden; background: #fff; }
.ep-stripe:empty::before { content: "Zahlung wird geladen …"; display: block; padding: 24px; color: #6b7280; font-size: 14px; }
.ep-zurueck { width: 100%; justify-content: center; margin-top: 12px; }
.ep-breit .ep-schrift { width: 44%; margin-top: 10px; }
/* Einlass-Farbe nach dem Bezahlen: gross, damit man sie am Eingang zeigen kann. */
.ep-farbe { margin: 14px auto 10px; padding: 14px 18px; border-radius: var(--r-md); color: #fff; max-width: 320px; }
.ep-farbe.hell { color: #0d1b3d; border: 2px solid var(--line-2); }
.ep-farbe small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.ep-farbe strong { display: block; font-size: 28px; font-family: var(--display); }
/* Wiederoeffner fuer das Event-Pop-up: rechter Rand, mittig, ueber der Seite. */
.ep-wieder { position: fixed; z-index: 70; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px;
  padding: 5px 16px 5px 5px; border: 3px solid #ffe14d; border-radius: 999px; cursor: pointer; color: #0d1b3d; text-align: left;
  background: linear-gradient(135deg, #e8f9ff, #5bd8ff); box-shadow: 0 8px 26px rgba(0,0,0,.45); font: 800 15px/1.1 var(--display); }
.ep-wieder img { width: 56px; height: 56px; border-radius: 50%; display: block; }
.ep-wieder span { display: block; font-weight: 600; font-size: 13px; line-height: 1.15; }
.ep-wieder b { display: block; font-weight: 800; font-size: 16px; }
.ep-wieder small { font-weight: 600; font-size: 12px; }
.ep-wieder:hover { transform: translateY(-50%) scale(1.04); }
@media (max-width: 640px) { .ep-wieder { padding: 3px 12px 3px 3px; right: 6px; gap: 7px; } .ep-wieder b { font-size: 14px; } .ep-wieder span { font-size: 12px; } .ep-wieder small { display: none; } .ep-wieder img { width: 44px; height: 44px; } }
.ep-feld small { font-weight: 400; color: var(--ink-3); }
.ep-feld input[aria-invalid="true"] { border-color: var(--danger); }
.ep-link { background: none; border: 0; padding: 0; color: var(--accent-2); font: inherit; text-decoration: underline; cursor: pointer; }
.ep-inhalt > .ep-fehler, .ep-inhalt > .ep-klein { text-align: left; margin: 4px 0 0; }