/*
 * ONLANG Live – panel/gemeinsam.css
 * Etappe 1: gemeinsame Farben und Grundformen für Anmeldung, Kamera-,
 * Spielstand- und Zuschauer-Seite (das Regiepanel nutzt panel.css).
 */

:root {
  --blau-dunkel: #0e1a2f;
  --blau: #16263f;
  --blau-hell: #1f3557;
  --orange: #ff7a1a;
  --weiss: #f5f7fa;
  --grau: #93a1b5;
  --gruen: #2ecc71;
  --rot: #e74c3c;
  --heim: #2f6fdd;
  --gast: #c0392b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* "hidden" gilt immer, auch wenn eine Klasse display setzt. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  background: var(--blau-dunkel);
  color: var(--weiss);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.marke { font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }

.btn {
  font: inherit;
  font-weight: 600;
  color: var(--weiss);
  background: var(--blau-hell);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn--orange { background: var(--orange); border-color: var(--orange); color: #111; }
.btn--gruen { background: var(--gruen); border-color: var(--gruen); color: #111; }
.btn--rot { background: var(--rot); border-color: var(--rot); }
.btn--heim { background: var(--heim); border-color: var(--heim); }
.btn--gast { background: var(--gast); border-color: var(--gast); }

.fehlertext { color: #ffb4a8; min-height: 1.3em; font-size: .9rem; }

/* Anmeldung */
.anmeldung { display: flex; align-items: center; justify-content: center; padding: 20px; }
.anmeldekarte {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px;
  background: var(--blau); border: 1px solid var(--blau-hell); border-radius: 14px; padding: 24px;
}
.anmeldekarte .marke { font-size: 1.5rem; margin-bottom: 8px; }
.anmeldekarte input {
  font: inherit; font-size: 1.1rem; padding: 12px; border-radius: 10px;
  border: 1px solid var(--blau-hell); background: var(--blau-dunkel); color: var(--weiss);
}
.anmeldekarte .btn { font-size: 1.1rem; padding: 12px; }
.anmeldekarte label { font-size: .9rem; color: #c7d2e0; }
.anmeldekarte #personFelder, .anmeldekarte #notfallFelder { display: flex; flex-direction: column; gap: 6px; }
.anmeldekarte [hidden] { display: none !important; }
.anmeldekarte .anmeldekarte__klein {
  background: none; border: 0; color: #93a1b5; font: inherit; font-size: .85rem;
  text-decoration: underline; cursor: pointer; align-self: center; padding: 4px;
}