/* ---------------------------------------------------------------------------------------------
   Block 57: `hidden` muss ausblenden – auch gegen eine Klassenregel.
   Im Browser gefunden: Jedes per `element.hidden = true` eingeklappte Formular blieb SICHTBAR,
   sobald seine Klasse ein eigenes `display` setzt. Die Browser-Regel `[hidden] { display: none }`
   hat nur Element-Spezifität und verliert gegen jede Klassenregel. Betroffen waren das
   Austausch-Formular am Einlass (seit Block 11 dauerhaft aufgeklappt, der Knopf bewirkte
   optisch nichts) und das neue Formular zum Hinzufügen einer Person.
   Diese eine Zeile behebt die Ursache – nicht zwei Symptome – und verhindert die Wiederkehr.
   --------------------------------------------------------------------------------------------- */
[hidden] { display: none !important; }

:root {
  /* ---------------------------------------------------------------------------
     Marken-Design-System (Block 22). Zentrale Tokens – an EINER Stelle änderbar.
     Leitprinzip: Weiß/Neutral dominiert die Flächen. Navy trägt Text/Struktur und
     die gefüllten Primär-Buttons; Rot ist ein bewusst SEHR sparsamer Signatur-Akzent.
     Die Ampel-Statusfarben (Block 9) sind bewusst NICHT hier definiert und bleiben
     unangetastet (kommen inline aus server/utils/ampel.js) – kein Vermischen mit dem
     Marken-Rot.
     --------------------------------------------------------------------------- */
  --navy: var(--farbe-navy);         /* Marken-Navy (Block 94: Wert aus tokens.css) */
  --navy-700: var(--farbe-navy-hover);     /* Hover auf Navy */
  --navy-900: var(--farbe-navy-tief);     /* Press / tiefes Navy */
  --navy-100: #eceaf4;     /* helle Navy-Tönung (Fokusfläche, aktive Nav-Tönung) */
  --navy-050: #f6f5fb;     /* kaum sichtbare Navy-Tönung */
  --brand-red: var(--farbe-rot);    /* Marken-Rot (Block 94: Wert aus tokens.css) – nur Logo und Markierung, nie als Fläche für Text */
  --brand-red-hover: #b00610;
  --brand-red-050: #fdecec;

  /* Bestehende Token-Namen auf die Marke gemappt -> kaskadiert automatisch durch die App */
  --color-bg: #fbfbfc;         /* nahezu weiße, neutrale Arbeitsfläche */
  --color-surface: #ffffff;
  --color-primary: var(--farbe-navy);    /* = Navy (Buttons, Fokus, Überschriften-Akzent, Links) */
  --color-primary-dark: var(--farbe-navy-tief);
  --color-text: var(--farbe-tinte);       /* Tinte mit feinem Navy-Unterton */
  --color-muted: #616874;
  --color-error: #c0271f;      /* Fehler/Validierung – rot, aber klar vom Marken-Rot getrennt */
  --color-danger: var(--farbe-fehler);     /* Zerstörend (Löschen/Sperren) – Outline-Rot, eigene Signatur */
  --color-ok: var(--farbe-ok);
  --color-vip: var(--farbe-vip);      /* Block 47: von #a8710a nachgedunkelt -> 4,56:1 auf Weiß (AA) */
  /* Block 64: Vorempfang – Pflaume. Bewusst nicht VIP-Gold, nicht Marken-Rot, keine Ampelfarbe und
     nicht das Teal der Teilnehmer-Kachel. 9,6:1 auf Weiß. Die helle Fläche mit Rahmen ist der
     wichtigere Teil: Eine Flächenform unterscheidet sich auch dann, wenn der Farbton es nicht tut. */
  --color-vorempfang: #6a2c70;
  --color-vorempfang-flaeche: #f6eef7;
  --color-info: var(--farbe-navy);
  --color-warning: var(--farbe-warnung);  /* Block 47: von #b9770e nachgedunkelt -> 4,56:1 auf Weiß (AA) */
  --color-accent: #0f766e;

  /* Struktur-Tokens */
  --color-border: #e7e9ee;     /* Standard-Rahmen/Hairline */
  /* Block 47: Eigener, kräftigerer Rahmen NUR für Formularfelder (3,07:1 auf Weiß).
     Bewusst getrennt von --color-border: Tabellenlinien und Kartenränder sind Dekoration
     und dürfen fein bleiben; Eingabefelder sind Bedienelemente und müssen als solche
     erkennbar sein (WCAG 1.4.11 Nicht-Text-Kontrast). */
  --color-field-border: var(--farbe-feldrand);
  --color-hairline: #eef0f3;   /* noch feinere Trennlinie (Tabellenzeilen) */
  --border-radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(20, 18, 45, 0.05);
  --shadow-md: 0 4px 16px rgba(20, 18, 45, 0.06);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--schrift);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

.subtitle {
  color: var(--color-muted);
  text-align: center;
  margin-top: 0;
  margin-bottom: 24px;
}

.brand-title {
  text-align: center;
  font-size: 1.7rem;
  line-height: 1.25;
  color: var(--color-primary);
  margin: 12px 0 6px;
}

label {
  display: block;
  font-weight: 600;
  margin: 16px 0 6px;
  font-size: 0.9rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  border: 1px solid #d1d5db;
  border-radius: var(--border-radius);
  background: var(--color-surface);
}

input:focus,
select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

button {
  width: 100%;
  padding: 14px;
  margin-top: 24px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
}

button:active {
  background: var(--color-primary-dark);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

button.secondary-btn {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  width: auto;
  margin-top: 0;
  padding: 8px 16px;
}

fieldset {
  border: 1px solid #e2e4e9;
  border-radius: var(--border-radius);
  padding: 12px 16px 16px;
  margin: 20px 0;
}

legend {
  font-weight: 700;
  padding: 0 6px;
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  margin: 10px 0;
}

.radio-option input,
.checkbox-option input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.companion-block {
  border-top: 1px dashed #e2e4e9;
  padding-top: 12px;
  margin-top: 12px;
}

.companion-block:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.companion-block h3 {
  font-size: 1rem;
  margin: 0 0 4px;
  color: var(--color-primary);
}

.feedback {
  min-height: 1.2em;
  font-size: 0.9rem;
  margin: 10px 0 0;
}

.feedback-error {
  color: var(--color-error);
}

.feedback-ok {
  color: var(--color-ok);
}

.feedback-pending {
  color: var(--color-muted);
}

.closed-banner {
  margin: 4px 0 16px;
  padding: 14px 16px;
  border: 1px solid #f0c9c2;
  border-radius: var(--border-radius);
  background: #fdf4f2;
  color: var(--color-error);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
}

.button-link {
  display: block;
  text-align: center;
  padding: 14px;
  margin-top: 16px;
  border-radius: var(--border-radius);
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.button-link.secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.admin-container {
  max-width: 1040px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-header h1 {
  margin-bottom: 0;
}

.admin-brand {
  margin: 2px 0 0;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.admin-section {
  margin-top: 32px;
}

.admin-section h2 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.section-hint {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: 4px 0 0;
}

.invitations-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.invitation-card {
  background: var(--color-surface);
  border: 1px solid #e2e4e9;
  border-radius: var(--border-radius);
  padding: 14px 16px;
}

.invitation-card-vip {
  border: 1px solid #f0d9a8;
  background: #fffaf0;
  box-shadow: 0 0 0 1px #f0d9a8 inset;
}

.invitation-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.invitation-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vip-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-vip);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.invitation-code {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin-top: 2px;
}

.invitation-details {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--color-text);
}

.invitation-created {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--color-muted);
}

.status-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge.status-accepted {
  background: #e5f5ec;
  color: var(--color-ok);
}

.status-badge.status-declined {
  background: #fbeae7;
  color: var(--color-error);
}

.status-badge.status-pending {
  background: #eceef1;
  color: var(--color-muted);
}

.registration-status-display {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 4px;
}

.status-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
}

.status-pill-open {
  background: #e5f5ec;
  color: var(--color-ok);
}

.status-pill-closed {
  background: #fbeae7;
  color: var(--color-error);
}

.registration-deadline-text {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 16px 0 20px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 16px 10px;
  border-radius: var(--border-radius);
  background: var(--color-surface);
  border: 1px solid #e2e4e9;
  border-top: 4px solid transparent;
}

.stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-weight: 600;
}

.stat-card-invited {
  border-top-color: var(--color-info);
}
.stat-card-invited .stat-value {
  color: var(--color-info);
}

.stat-card-registered {
  border-top-color: var(--color-ok);
}
.stat-card-registered .stat-value {
  color: var(--color-ok);
}

.stat-card-pending {
  border-top-color: var(--color-warning);
}
.stat-card-pending .stat-value {
  color: var(--color-warning);
}

.stat-card-cancelled {
  border-top-color: var(--color-error);
}
.stat-card-cancelled .stat-value {
  color: var(--color-error);
}

.stat-card-attendees {
  border-top-color: var(--color-accent);
  background: #f0fdfb;
}
.stat-card-attendees .stat-value {
  color: var(--color-accent);
}

.companions-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #e2e4e9;
}

.companions-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.companion-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.companion-list li {
  font-size: 0.9rem;
}

.companion-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.invitation-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.danger-btn {
  background: var(--color-error);
}

.danger-btn:active {
  background: #96291d;
}

.small-btn {
  width: auto;
  margin-top: 0;
  padding: 8px 14px;
  font-size: 0.85rem;
}

.admin-section-danger {
  border: 1px solid #f0c9c2;
  border-radius: var(--border-radius);
  padding: 16px;
  background: #fdf4f2;
}

input[type="file"] {
  width: 100%;
  padding: 10px 0;
  font-size: 0.9rem;
}

.qr-preview {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e2e4e9;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.qr-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.qr-person-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  text-align: center;
  max-width: 160px;
}

.qr-image {
  width: 160px;
  height: 160px;
  border: 1px solid #e2e4e9;
  border-radius: 8px;
  background: #fff;
}

.import-preview {
  margin-top: 20px;
}

.import-summary {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 12px;
}

.import-bulk-action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.import-bulk-action label {
  margin: 0;
}

.import-bulk-action select {
  width: auto;
}

.import-bulk-action button {
  width: auto;
  margin-top: 0;
}

.table-wrapper {
  overflow-x: auto;
  margin-top: 12px;
  border: 1px solid #e2e4e9;
  border-radius: var(--border-radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

th,
td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e4e9;
  white-space: nowrap;
}

/* Detail-Spalte des Audit-Logs darf umbrechen und wird begrenzt, damit die Tabelle lesbar bleibt. */
td.audit-details {
  white-space: normal;
  max-width: 360px;
  color: #4a4f57;
  font-size: 0.8rem;
}

/* "Weitere anzeigen"-Button für blockweise gerenderte, große Listen. */
.load-more-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
}

/* Klickbare Platzhalter-Chips im Vorlagen-Editor (Klick kopiert in die Zwischenablage). */
.placeholder-chip {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  background: #eef2f4;
  color: #334;
  border: 1px solid #dbe1e6;
  border-radius: 5px;
  padding: 1px 6px;
  margin: 2px 4px 2px 0;
  cursor: pointer;
}
.placeholder-chip:hover { background: #e2e8ec; }
.placeholder-chip.copied { background: #e8f6ec; border-color: #bfe3c8; color: #15803d; }

/* Rollen-Hinweis in der Navigationsleiste (z. B. für Check-in-Mitarbeiter). */
.admin-nav-role {
  align-self: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: #b45309;
  background: #fdf3e3;
  border: 1px solid #f3d9a8;
  border-radius: 20px;
  padding: 2px 10px;
  margin-left: auto;
  margin-right: 8px;
}

/* Unveränderliche Gast-ID / Ursprungs-Code als monospace-Chip. */
.guest-uid-chip {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .5px;
  background: #eef2f4;
  color: #334;
  border: 1px solid #dbe1e6;
  border-radius: 5px;
  padding: 1px 6px;
  margin-right: 6px;
}

/* Gast-ID-Anzeige + Foto im Formularkopf. */
.guest-id-photo-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 8px;
}
.guest-id-box { flex: 1 1 240px; min-width: 240px; }
.guest-photo-box { flex: 0 0 auto; }
.guest-uid-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary, #0f766e);
  padding: 6px 0;
}
.guest-photo-preview {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #dbe1e6;
  margin-bottom: 6px;
}
.guest-detail-photo {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #dbe1e6;
  margin-bottom: 10px;
}

th {
  background: var(--color-bg);
}

.import-action-select {
  width: auto;
  padding: 6px 8px;
  font-size: 0.85rem;
}

.import-status-new {
  color: var(--color-ok);
}

.import-status-duplicate {
  color: #b8860b;
}

.import-status-error {
  color: var(--color-error);
}

.import-status-no_email {
  color: #b8860b;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Teilnehmerbegrenzung (Kapazitätsanzeige)
   --------------------------------------------------------------------------- */
.capacity-box {
  margin: 8px 0 4px;
  padding: 10px 12px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #f7f9fc;
}

.capacity-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.88rem;
  color: var(--color-muted);
}

.capacity-numbers strong {
  color: var(--color-primary);
}

.capacity-bar {
  margin-top: 8px;
  height: 8px;
  border-radius: 999px;
  background: #e3e8f0;
  overflow: hidden;
}

.capacity-bar-fill {
  height: 100%;
  background: var(--color-ok);
  transition: width 0.3s ease;
}

.capacity-bar-fill.capacity-bar-warn {
  background: #e0a800;
}

.capacity-bar-fill.capacity-bar-full {
  background: var(--color-error);
}

.capacity-warn {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #b8860b;
}

.capacity-warn-full {
  color: var(--color-error);
}

/* Kapazitäts-Infostreifen unter dem Aktives-Event-Banner im Dashboard */
.active-event-capacity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: -14px 0 22px;
  padding: 10px 16px;
  border: 1px solid #dbe3ef;
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: #f7f9fc;
  font-size: 0.88rem;
  color: var(--color-muted);
}

.active-event-capacity strong {
  color: var(--color-primary);
}

.import-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.import-actions button {
  margin-top: 0;
  flex: 1;
}

/* ---------------------------------------------------------------------------
   Check-in / Einlass
   --------------------------------------------------------------------------- */
.checkin-back-link {
  margin-top: 0;
  padding: 8px 16px;
  font-size: 0.9rem;
  white-space: nowrap;
}

.checkin-stats {
  margin-top: 4px;
}

.result-panel {
  margin: 20px 0;
  padding: 20px;
  border-radius: var(--border-radius);
  border: 2px solid #e2e4e9;
  text-align: center;
}

.result-panel.result-success {
  background: #e5f5ec;
  border-color: var(--color-ok);
}

.result-panel.result-warning {
  background: #fff6e5;
  border-color: var(--color-warning);
}

.result-panel.result-error {
  background: #fbeae7;
  border-color: var(--color-error);
}

.result-status {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.result-success .result-status {
  color: var(--color-ok);
}
.result-warning .result-status {
  color: var(--color-warning);
}
.result-error .result-status {
  color: var(--color-error);
}

.result-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
}

.result-details {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-top: 4px;
}

/* Block 64: Vorempfang-Zeile im Ergebnis – eigene, abgesetzte Fläche, gleiche Größe und Fettung wie
   der Name, aus einem Meter Entfernung lesbar. Ohne Farbe unterscheidbar durch Zeichen ◆ und Wortlaut. */
.result-vorempfang {
  margin: 10px auto 4px auto;
  padding: 10px 14px;
  border: 2px solid var(--color-vorempfang);
  border-radius: var(--border-radius);
  background: var(--color-vorempfang-flaeche);
  color: var(--color-vorempfang);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.result-vorempfang-zeile {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}
.result-vorempfang-zeit {
  font-size: 1rem;
  font-weight: 600;
}
.result-vorempfang-zeit:empty { display: none; }

/* Block 64: Badge „Vorempfang" – Verwaltung, Trefferliste, Warteliste, Event-Historie. */
.vorempfang-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-vorempfang);
  background: var(--color-vorempfang-flaeche);
  color: var(--color-vorempfang);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.event-history-name .vorempfang-badge { margin-left: 8px; }
.card-vorempfang { margin-top: 8px; }

.result-time {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 6px;
}

.camera-wrapper {
  margin-top: 12px;
  border-radius: var(--border-radius);
  overflow: hidden;
  background: #000;
  max-width: 360px;
}

#camera-video {
  width: 100%;
  display: block;
}

.lookup-result {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Block 60: Ohne dies gilt `align-items: stretch` – die Querachse einer
     Spalten-Flexbox ist die Breite, direkte Kinder wurden also auf volle Breite
     gezogen. Deshalb rendert „Als Walk-In anlegen" trotz `.small-btn { width:
     auto }` als 612 px breiter Balken. Er legt einen Datensatz in der Datenbank
     an und darf nicht das lauteste Element der Seite sein. */
  align-items: flex-start;
}
/* Die Trefferkarten sollen die Breite weiterhin ausnutzen. */
.lookup-result > .treffer-gruppe { align-self: stretch; }

.lookup-header {
  font-weight: 700;
  color: var(--color-primary);
}

.lookup-person {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e4e9;
  border-radius: var(--border-radius);
  background: var(--color-surface);
}

.lookup-person-meta {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 2px;
}

.lookup-person-action {
  flex-shrink: 0;
}

.lookup-person-action button {
  margin-top: 0;
}

/* Check-in-Badges (auch im Dashboard verwendet) */
.checkin-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.checkin-badge-in {
  background: #e5f5ec;
  color: var(--color-ok);
}

.checkin-badge-out {
  background: #eceef1;
  color: var(--color-muted);
}

/* Header-Aktionen (Dashboard): Check-in-Link + Abmelden nebeneinander */
.admin-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.header-link-btn {
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
}

/* Check-in-Statistikkacheln im Dashboard */
.stat-card-checkedin {
  border-top-color: var(--color-ok);
}
.stat-card-checkedin .stat-value {
  color: var(--color-ok);
}

.stat-card-notcheckedin {
  border-top-color: var(--color-muted);
}
.stat-card-notcheckedin .stat-value {
  color: var(--color-muted);
}

/* ---------------------------------------------------------------------------
   E-Mail-Kommunikation (Rundmail-Modul)
   --------------------------------------------------------------------------- */
textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid #d1d5db;
  border-radius: var(--border-radius);
  background: var(--color-surface);
  resize: vertical;
  line-height: 1.5;
}

textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.placeholder-help {
  margin-top: 14px;
}

.placeholder-help-label {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-weight: 600;
}

.placeholder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.placeholder-chip {
  width: auto;
  margin-top: 0;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  background: #eef2f8;
  border: 1px solid #d3ddec;
  border-radius: 999px;
  cursor: pointer;
}

.placeholder-chip:active {
  background: #dde6f3;
}

.preview-summary {
  background: var(--color-surface);
  border: 1px solid #e2e4e9;
  border-radius: var(--border-radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.92rem;
}

.preview-label {
  color: var(--color-muted);
  font-weight: 600;
}

.preview-mail {
  margin-top: 14px;
  border: 1px solid #e2e4e9;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.preview-mail-subject {
  padding: 12px 16px;
  background: #f5f6fa;
  border-bottom: 1px solid #e2e4e9;
  font-size: 0.95rem;
}

.preview-mail-body {
  padding: 16px;
  background: #fff;
}

.progress-bar-wrapper {
  width: 100%;
  height: 22px;
  background: #eceef1;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

.progress-text {
  margin-top: 10px;
  font-weight: 600;
}

.progress-failures {
  margin-top: 12px;
  font-size: 0.9rem;
}

.failures-title {
  font-weight: 700;
  color: var(--color-error);
  margin-bottom: 4px;
}

.progress-failures ul,
.history-failures ul {
  margin: 4px 0 0;
  padding-left: 20px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.history-card {
  background: var(--color-surface);
  border: 1px solid #e2e4e9;
  border-radius: var(--border-radius);
  padding: 14px 16px;
}

.history-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.history-time {
  font-size: 0.8rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.history-meta {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.history-failures {
  margin-top: 8px;
  font-size: 0.85rem;
}

.history-failures summary {
  cursor: pointer;
  color: var(--color-error);
}

.history-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

/* ---------------------------------------------------------------------------
   Zentrale Gästedatenbank
   --------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 16px;
}

.guest-card-archived {
  opacity: 0.7;
  background: #f7f8fa;
}

.detail-block {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid #e2e4e9;
  border-radius: var(--border-radius);
  background: var(--color-surface);
}

.detail-block h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--color-primary);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 16px;
  font-size: 0.9rem;
}

.detail-list {
  margin: 0;
  padding-left: 20px;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.origin-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f8;
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Schreibgeschützte Felder (z. B. Name im Event) klar als nicht-editierbar zeigen */
input[readonly] {
  background: #f0f1f4;
  color: var(--color-muted);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   Events / Multi-Event (Phase 2)
   --------------------------------------------------------------------------- */

/* Banner "Aktives Event" (Dashboard-Kopf + Events-Seite) */
.active-event-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 18px;
  border-radius: 10px;
  background: #eef2f8;
  border: 1px solid #dbe3ef;
}

.active-event-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.active-event-label {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.active-event-info strong {
  font-size: 1.05rem;
  color: var(--color-primary);
}

.active-event-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.active-event-switch-label {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 0;
}

.active-event-switch select {
  width: auto;
  min-width: 180px;
  margin: 0;
}

/* Raster für die Freischaltung optionaler Felder (Event-Formular) */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 16px;
}

/* Begleitung austauschen am Einlass (Block: Companion-Exchange) */
.lookup-companion{
  margin:2px 0 6px 22px;
  padding:6px 10px;
  border-left:2px solid var(--color-border,#dbe3ef);
  background:rgba(0,0,0,.015);
  border-radius:0 8px 8px 0;
}
.lookup-companion-line{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.lookup-companion-name{ font-size:.9rem; }
.companion-exchange-form{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px;
}
.companion-exchange-form input{ max-width:150px; }
.companion-exchange-feedback{ margin:0; font-size:.82rem; }

/* Ampelsystem (Block 9) */
.ampel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 9px 1px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: var(--ampel-color, #8a8f98);
  margin-right: 8px;
  white-space: nowrap;
}

.ampel-chip::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

/* Planungstools (Block 10) */
.planner-panel {
  border: 1px solid var(--color-border, #dbe3ef);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0;
  background: rgba(0, 0, 0, 0.015);
}

.planner-panel > summary {
  cursor: pointer;
  font-weight: 600;
}

.planner-panel h3 {
  margin: 14px 0 4px;
  font-size: 0.98rem;
}

.events-overview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border, #eef1f6);
}

.events-overview-meta {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.planner-tickboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px 16px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--color-border, #dbe3ef);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
}

/* Ampel-Kennzahlen im Event-Planungspanel (Block 10) */
.ampel-counts {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ampel-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  padding: 1px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--ampel-color, #8a8f98);
}

/* Anzeigenkunde-Markierung (Block 8) */
.ad-customer-badge {
  background: #6b4fbb;
  color: #fff;
}

/* Block 44: Zustand der E-Mail-Adresse. Rot bleibt der Sperre vorbehalten – ein bloß
   vorübergehendes Zustellproblem soll nicht wie ein Fehler wirken (gedämpft/neutral). */
.email-blocked-badge {
  background: #fdeaea;
  color: var(--color-danger);
  border: 1px solid #f3c9c6;
}
.email-soft-badge {
  background: #f4f1e6;
  color: #7a6a2f;
  border: 1px solid #e6dfc4;
}

.detail-ad-customer {
  margin-top: 12px;
  font-weight: 600;
}

/* Selbst-Löschung / DSGVO (Block 7) */
.deletion-section {
  margin-top: 24px;
}

.deletion-divider {
  border: none;
  border-top: 1px solid var(--color-border, #dbe3ef);
  margin: 16px 0;
}

.deletion-btn {
  width: 100%;
}

/* Gelöschte Gäste in der Admin-Liste deutlich ausgrauen (Daten bleiben lesbar). */
.guest-card-deleted {
  opacity: 0.6;
  filter: grayscale(0.7);
}

.deleted-detail-banner {
  border: 1px solid var(--color-danger, #d64545);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(214, 69, 69, 0.06);
}

/* Pflichtfeld-Markierung (Block 6) */
.required-star {
  color: var(--color-danger, #d64545);
  font-weight: 700;
}

.pair-hint {
  margin-top: -4px;
}

/* Zusatzfelder mit Pflicht-Schalter (Block 6) */
.field-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 4px 20px;
}

.field-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}

.field-config-row .checkbox-option {
  margin: 0;
}

.field-required-option {
  font-size: 0.85rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.field-required-option.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Paar-Modi (mind. 1 von 2) */
.pair-modes-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border, #dbe3ef);
}

.pair-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px 20px;
}

.pair-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pair-mode-row label {
  font-size: 0.9rem;
}

.pair-mode-select {
  min-width: 180px;
}

/* Gäste-Auswahl beim Einladen */
.invite-guest-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.invite-selected-count {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-left: auto;
}

.invite-guest-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-border, #dbe3ef);
  border-radius: 8px;
  padding: 6px 10px;
}

.invite-guest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid #eef1f5;
  cursor: pointer;
  font-size: 0.92rem;
}

.invite-guest-row:last-child {
  border-bottom: none;
}

.invite-guest-row input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

/* Status-Pill in der Event-Liste etwas kompakter */
.invitation-name-row .status-pill {
  padding: 3px 10px;
  font-size: 0.72rem;
}

/* ---------------------------------------------------------------------------
   Einheitliche Admin-Hauptnavigation (per nav.js injiziert)
   --------------------------------------------------------------------------- */
.admin-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 16px;
  margin-bottom: 26px;
  background: var(--color-primary);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(31, 58, 95, 0.18);
}

/* Block 94: Die Marke in der Leiste ist die Logo-Zeile `.marke.marke--verwaltung` (basis.css) – sie behält ihre Breite. */
.admin-nav .marke {
  flex: none;
}

.admin-nav-links {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  margin-left: 6px;
}

.admin-nav-link {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.admin-nav-link:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.admin-nav-link.active {
  background: #fff;
  color: var(--color-primary);
}

.admin-nav-logout {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
}

.admin-nav-logout:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Seitentitel unterhalb der Navigation */
.admin-pagetitle {
  margin-bottom: 22px;
}

.admin-pagetitle h1 {
  margin: 0 0 2px;
}

/* Gruppierungs-Überschrift in der Gästeliste (nach Datenursprung) */
.guest-group-heading {
  margin: 22px 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid #e3e8f0;
  color: var(--color-primary);
  font-size: 1.05rem;
}

.filter-group-toggle {
  margin-top: 26px;
}

@media (max-width: 640px) {
  .admin-nav {
    gap: 8px;
  }
  .admin-nav-links {
    order: 3;
    width: 100%;
    margin-left: 0;
  }
}

/* ==========================================================================
   Veranstaltungs-Vorstellung (Block: Event-Info auf der Anmeldeseite)
   ========================================================================== */

/* --- Admin: Logo-Upload + Rich-Text-Editor --- */
.logo-upload-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.event-logo-preview {
  max-width: 160px;
  max-height: 90px;
  object-fit: contain;
  border: 1px solid #d5dbe3;
  border-radius: 6px;
  padding: 4px;
  background: #fff;
}
.logo-upload-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.richtext-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.richtext-toolbar button {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 4px 12px;
  font-size: 0.85rem;
  background: #eef2f7;
  border: 1px solid #cfd7e0;
  border-radius: 5px;
  cursor: pointer;
  color: #263a52;
}
.richtext-toolbar button:hover { background: #e1e8f0; }
.richtext-editor {
  min-height: 120px;
  border: 1px solid #cfd7e0;
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff;
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-y: auto;
}
.richtext-editor:focus { outline: 2px solid #1c527f; outline-offset: 1px; }
.richtext-editor ul, .richtext-editor ol { margin: 6px 0; padding-left: 22px; }

/* --- Anmeldeseite: Vorstellung (Logo, Beschreibung, Fakten) --- */
.event-hero {
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e3e9f1;
}
.event-hero-logo {
  display: block;
  max-width: 220px;
  max-height: 120px;
  object-fit: contain;
  margin: 0 auto 16px;
}
.event-hero-title {
  margin: 0 0 10px;
  text-align: center;
  font-size: 1.35rem;
  color: #0f2a4a;
}
.event-hero-description {
  color: #33404f;
  line-height: 1.6;
  margin-bottom: 16px;
}
.event-hero-description p { margin: 0 0 8px; }
.event-hero-description ul, .event-hero-description ol { margin: 6px 0; padding-left: 22px; }
.event-facts {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  background: #f6f9fc;
  border: 1px solid #e3e9f1;
  border-radius: 8px;
  padding: 14px 16px;
}
.event-facts dt {
  font-weight: 600;
  color: #56657a;
}
.event-facts dd {
  margin: 0;
  color: #1f2733;
}
.event-facts a { color: #1c527f; }

@media (max-width: 480px) {
  .event-facts { grid-template-columns: 1fr; gap: 2px; }
  .event-facts dd { margin-bottom: 8px; }
}

/* ==========================================================================
   Rechtstexte / Einwilligungserklärungen (Admin + Modal auf der Anmeldeseite)
   ========================================================================== */
.consent-editor { min-height: 260px; }
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 12px 0 6px;
}
.consent-history {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
.consent-history li {
  padding: 6px 0;
  border-bottom: 1px solid #e3e9f1;
  font-size: 0.92rem;
}
.link-btn {
  width: auto;
  background: none;
  border: none;
  color: #1c527f;
  cursor: pointer;
  text-decoration: underline;
  padding: 0 2px;
  font-size: 0.92rem;
}

/* Modal / Overlay (Ansicht einer Fassung – Admin & Anmeldeseite) */
.consent-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.consent-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 42, 74, 0.55);
}
.consent-modal-box {
  position: relative;
  background: #fff;
  border-radius: 10px;
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px 26px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
/* Block 53: Hintergrund festhalten, solange ein Overlay offen ist. Einzige neue Regel des
   Blocks – sie friert die Seite an ihrer Position ein und verschiebt sie nicht. */
body.modal-open { overflow: hidden; }
.consent-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: auto;
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: #56657a;
  cursor: pointer;
  padding: 4px 8px;
}
.consent-view { color: #33404f; line-height: 1.6; }
.consent-view h2 { font-size: 1.15rem; color: #0f2a4a; margin: 16px 0 6px; }
.consent-view h3 { font-size: 1rem; color: #12457a; margin: 12px 0 4px; }
.consent-view p { margin: 0 0 8px; }
.consent-view ul, .consent-view ol { margin: 6px 0; padding-left: 22px; }

/* „Erklärung anzeigen"-Link neben den Checkboxen auf der Anmeldeseite */
.consent-link {
  width: auto;
  background: none;
  border: none;
  color: #1c527f;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: 0.9rem;
  margin-left: 4px;
}

/* ==========================================================================
   Namensschild-Status auf der Check-in-Seite (Block 16)
   ========================================================================== */
.nametag-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
  padding: 10px 14px;
  border-radius: var(--border-radius);
  border: 1px solid #cfe0f2;
  background: #f2f8fd;
  font-size: 0.92rem;
  color: #1c3a5e;
}
.nametag-status.nametag-ok {
  border-color: #a9dfbf;
  background: #eafaf1;
  color: #1e5a37;
}
.nametag-status.nametag-error {
  border-color: #f1c40f;
  background: #fef9e7;
  color: #7a5c00;
}
.nametag-status button { margin: 0; flex: 0 0 auto; }
/* Block 68: Zeichen vor dem Text – der Ausgang des Drucks ist nie nur an der Farbe zu erkennen. */
.nametag-status-zeile { flex: 1 1 240px; }
.nametag-status-zeichen { font-weight: 700; margin-right: 6px; }
.nametag-status-zeichen:empty { display: none; }

/* ==========================================================================
   Block 68: Druckerstatus im Kopfbereich der Check-in-Seite (TSC TE210 über WebUSB)

   Eine ruhige Zeile wie „Event:" darüber. Verbunden = schlichter Text. Nicht verbunden oder Fehler
   = Navy-Tönung mit Balken links – dieselbe Formensprache wie die Scanbereitschaft (Block 66),
   damit „hier ist etwas zu tun" auf der Seite überall gleich aussieht. Nur Tokens, keine festen
   Farbwerte; keine Ampelfarben (die gehören der Ergebnisfläche).
   ========================================================================== */
.drucker-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 6px 12px;
  border-left: 6px solid transparent;
  font-size: 0.92rem;
  color: var(--color-text);
}
.drucker-status[data-zustand="nicht_verbunden"],
.drucker-status[data-zustand="nicht_unterstuetzt"],
.drucker-status[data-zustand="fehler"] {
  background: var(--navy-100);
  border-left-color: var(--color-info);
  color: var(--color-info);
}
.drucker-status-zeile { flex: 1 1 240px; }
.drucker-zeichen { font-weight: 700; margin-right: 6px; }
.drucker-status button { margin: 0; flex: 0 0 auto; }

/* Block 56: Zeile mit dem Testdruck-Knopf – immer sichtbar, unabhängig vom Check-in. */
/* Block 60: `.nametag-testprint` ist entfallen. Der Testdruck stand als loser Knopf am Seitenende
   der Arbeitsfläche; er ist ein Einrichtungsschritt VOR der Veranstaltung und liegt jetzt mit
   eigener Überschrift im Modus „Sonderfälle" – als gewöhnliche `.einlass-karte`. Eine eigene
   Regel braucht er dort nicht mehr. */

/* ==========================================================================
   Block 59: Aufgeräumte Einlass-Ansicht
   ==========================================================================
   Der Scanner steht oben, alles Übrige klappt auf. Zahlen sind Information, keine
   Arbeitsfläche. Bedienelemente sind fingergroß (mindestens 44 px), damit die Seite auf
   Tablet und Telefon am Einlass bedienbar bleibt.
   ========================================================================== */

/* Nur für Bildschirmleser – der sichtbare Ort des Scan-Feldes ist das Feld selbst. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Zähler als EINE Zeile statt drei Kacheln. */
.checkin-zaehler {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--color-border, #d6dae1);
  border-radius: 8px;
  background: var(--color-surface, #fff);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-muted, #616874);
}
.checkin-zaehler strong {
  font-size: 1.25rem;
  color: var(--color-text, #20202b);
  margin-right: 2px;
}
.zaehler-trenner { color: var(--color-border, #d6dae1); }

/* Abschnittskopf mit unauffälligem Hilfe-Zeichen. */
.section-kopf {
  display: flex;
  align-items: center;
  /* Block 60: vorher `justify-content: space-between` über die volle Spalten-
     breite – der Hilfe-Knopf stand dadurch am Desktop rund 450 px rechts von
     seiner Überschrift und las sich als Seitendekoration statt als deren Hilfe.
     Jetzt steht er unmittelbar daneben; die vergrößerte Trefffläche über das
     Pseudoelement aus Block 59 bleibt unberührt. */
  gap: 8px;
}
.section-kopf h2 { margin: 0; }
.hilfe-btn {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  min-width: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border, #d6dae1);
  background: var(--color-surface, #fff);
  color: var(--color-muted, #616874);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.hilfe-btn:hover { background: var(--navy-050, #f6f5fb); color: var(--color-text, #20202b); }

/* ==========================================================================
   Block 60: Einlass in zwei Modi
   ==========================================================================

   KARTEN – und warum eine EIGENE Klasse statt einer Änderung an .admin-section:
   `.admin-section` besteht aus `margin-top: 32px` und sonst nichts. Es gab auf
   der Einlass-Seite also nie Karten, nur Abstände – und `.admin-section-scan`
   mit seiner Navy-Rahmenfarbe war wirkungslos, weil das Element gar keinen
   Rahmen hatte. Die naheliegende Reparatur wäre, `.admin-section` selbst eine
   Kartenfläche zu geben. Gemessen trägt die Klasse aber 44 Vorkommen auf 13
   Admin-Seiten – das hätte das gesamte Portal umgestaltet, was dieser Block
   ausdrücklich nicht tut. Deshalb `.einlass-karte`, nur für den Einlass.
   -------------------------------------------------------------------------- */
.einlass-karte {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--color-border, #d6dae1);
  border-radius: var(--radius-lg, 14px);
  background: var(--color-surface, #fff);
}
.einlass-karte > h3 { margin-top: 18px; }

/* Der Scanner ist optisch der Hauptweg – jetzt sichtbar, weil die Karte einen
   Rahmen hat, den die Farbe einfärben kann. */
.einlass-karte-scan { border-color: var(--color-primary); }

/* Block 67: Die Scan-Karte im Ruhezustand – nichts, was nach Eingabe aussieht.
   Das Formular ist nur noch Hülle (Enter-Absendung); die Bereitschaftszeile liegt darin. */
.scan-form { display: block; }

/* Block 66: Bereitschaftszeile – das größte Element der Karte, ohne Farbe unterscheidbar (eigenes
   Zeichen, eigener Wortlaut, und im eingeschränkten Zustand ein linker Balken als FORM-Unterschied,
   der auch trägt, wenn jemand ● und ○ nicht auseinanderhält). Der bereite Zustand bleibt still. */
.scan-bereitschaft {
  margin: 4px 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-left: 6px solid transparent;
  border-radius: var(--border-radius);
  background: var(--color-bg);
}
/* Block 67: Feld und Status teilen sich den Platz – als GRID-STAPEL, beide in derselben Zelle und
   beide im Fluss (keine absolute Positionierung). Die Zelle ist so hoch wie der höhere von beiden:
   Bricht „○ Eingeschränkt – bitte aktivieren" bei 375 px auf zwei Zeilen, wächst die Zelle mit und
   das Feld füllt sie – kein Abschneiden, keine Überlappung mit der Unterzeile, kein Sprung. */
.scan-bereitschaft-zeile {
  display: grid;
  align-items: center;
  min-height: 44px;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}
.scan-bereitschaft-zeile > * { grid-area: 1 / 1; }
/* Block 67: DAS FELD BLEIBT ein echtes, sichtbares, fokussierbares <input type="text"> (Block 61 –
   ein unsichtbares Feld nimmt nichts entgegen). Es hat keinen eigenen Kasten mehr: kein Rahmen, kein
   Hintergrund, keine abweichende Schriftfamilie, kein Platzhalter – es übernimmt die Typografie der
   Zeile und füllt die Zelle (mindestens 44 px, Block 47). Der Fokusring bleibt: :focus-visible aus
   Block 47, hier wird keine outline-Regel ergänzt und keine entfernt. */
#scan-input {
  width: 100%;
  min-height: 44px;
  align-self: stretch; /* füllt die Zelle auch dann, wenn der Status zwei Zeilen hoch ist – der Fokusring umschließt die ganze Zeile */
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--color-text);
  border-radius: 4px;
}
/* Block 67: Die Status-Ebene liegt über dem Feld; ein Klick geht durch ins Feld. Sie bleibt im
   Vorlesebaum (kein aria-hidden – innerhalb einer Live-Region kann das selbst eine Ansage auslösen,
   und genau die Wiederholungen vermeidet Block 66). */
.scan-bereitschaft-status { pointer-events: none; overflow-wrap: anywhere; }
.scan-bereitschaft-zeichen { display: inline-block; width: 1.2em; }
.scan-bereitschaft-unterzeile { margin: 6px 0 0; font-size: 0.95rem; line-height: 1.4; color: var(--color-muted); }
/* Block 67: Schreibmarke nur bei Inhalt. Im Ruhezustand „bereit" ist sie das letzte Eingabe-Signal
   und stünde vor „● Scanbereit". BEWUSST IN KAUF GENOMMEN: Wer mit der Maus ins Feld klickt, um von
   Hand einzufügen, bekommt vorher keine Rückmeldung – der Fokusring erscheint bei :focus-visible nur
   bei Tastaturfokus, und die Schreibmarke ist aus. Einfügen funktioniert trotzdem, und der Inhalt ist
   danach sofort sichtbar (dann erscheint auch die Schreibmarke wieder). Kein Versehen. */
.scan-bereitschaft[data-zustand="bereit"] #scan-input { caret-color: transparent; }
/* Block 67: Bei Inhalt schließen Status und Inhalt einander aus – die Status-Ebene wird visuell
   ausgeblendet, ihr Text wird NICHT neu geschrieben (aria-live bliebe sonst nach jedem Scan laut). */
.scan-bereitschaft[data-zustand="inhalt"] .scan-bereitschaft-status { opacity: 0; }
/* Farbe: ruhig und informierend, aus der Navy-Familie – KEINE Ampelfarbe. Amber ist 150 px tiefer
   auf der Ergebnisfläche („! Bereits eingecheckt") belegt, und der eingeschränkte Zustand ist keine
   Warnung, sondern ein Hinweis auf etwas Zuverlässigeres; Grün („✓ Check-in erfolgreich") ebenso
   belegt. Alle Werte sind Tokens aus :root (--color-info = Navy, „Information", wie der aktive
   Nav-Zustand; --navy-100 als Grund). Der Block-47-Test rechnet die Kontraste daraus. */
.scan-bereitschaft[data-zustand="bereit"] .scan-bereitschaft-zeichen { color: var(--color-info); }
.scan-bereitschaft[data-zustand="eingeschraenkt"] {
  border-left-color: var(--color-info);
  background: var(--navy-100);
}
.scan-bereitschaft[data-zustand="eingeschraenkt"] .scan-bereitschaft-zeichen { color: var(--color-info); }
/* Block 67: Knöpfe unter der Zeile – „Scanbereit machen" (Block 66) und „Check-in", der nur bei
   Inhalt erscheint. Sind beide versteckt, hat die Leiste keine Höhe. */
.scan-bereitschaft-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.scan-bereitschaft-aktionen > button { width: auto; margin-top: 8px; flex: 0 0 auto; }
/* Styleguide B: genau EIN Primär-Button je Ansicht. Im Modus „Einlass" ist das
   keiner – Scanner und Suche lösen selbst aus. Ein navygefüllter Vollbreiten-
   Balken wäre dominanter als jede Einlass-Funktion und würde in die Irre führen. */
.scan-form button { width: auto; margin-top: 8px; }
.suche-form button { width: auto; margin-top: 8px; }

/* Modus-Panels und Reiterleiste. Das Reiter-Muster selbst ist geteilt
   (.guests-subnav / .guests-tab) – hier steht nur, was der Einlass ergänzt. */
.einlass-subnav { margin-top: 4px; }
.einlass-panel { margin-top: 4px; }

/* Anzahl offener Konflikte am Reiter „Sonderfälle". Ohne sie blieben Konflikte
   in einem geschlossenen Modus unbemerkt. Die Zahl stammt aus derselben
   Konfliktliste wie das Panel – es wird nicht zweimal gezählt. */
.reiter-markierung {
  display: inline-block;
  min-width: 20px;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
}

/* Event-Kontext und Leerhinweis im Kopfbereich. */
.einlass-event { margin: 0 0 8px; font-size: 0.95rem; color: var(--color-text, #20202b); }
/* #222: Der Eventname steht gut sichtbar im Kopf der Einlass-Seite. */
#einlass-event-name { font-size: 1.25rem; }
/* #222: Ohne Einlass-Event keine Suche und keine Bereiche, dafür der Hinweis. Das Scan-Feld bleibt bewusst sichtbar
   (Block 61/66: nie verstecken); online meldet ein Scan dann „Kein Einlass-Event festgelegt“ (offline arbeitet ein Gerät
   mit vorhandenem Auszug wie bisher weiter). */
body.ohne-einlass-event #einlass-subnav,
body.ohne-einlass-event #suche-section,
body.ohne-einlass-event #walkin-section { display: none; }
.einlass-event-label { color: var(--color-muted, #616874); margin-right: 4px; }
/* #225: Bestätigung nach dem Speichern des Einlass-Events in der Eventverwaltung – als Kasten, nicht nur als Zeile. */
.einlass-event-bestaetigung {
  padding: 8px 12px;
  border: 1px solid var(--color-ok);
  border-left-width: 4px;
  border-radius: 4px;
  font-weight: 600;
}
.einlass-leerhinweis {
  margin: 0 0 14px;
  padding: 8px 12px;
  border-left: 3px solid var(--color-border, #d6dae1);
  color: var(--color-muted, #616874);
  font-size: 0.9rem;
}

/* Gesperrte Aktionen (Block 60, Teil 2).
   BEWUSST KEIN `disabled`: Ein disabled-Button ist nicht fokussierbar, wird von
   Screenreadern übersprungen, und sein `title` wird nicht vorgelesen. Die
   Begründung – der ganze Zweck dieser Anzeige – wäre für Tastatur- und
   Screenreader-Nutzung unsichtbar, was Block 47 zuwiderliefe. Stattdessen
   `aria-disabled` plus ein Klick-Handler, der wirkungslos zurückkehrt. Der Knopf
   bleibt per Tab erreichbar und behält seinen Fokus-Ring. */
.aktion-gesperrt {
  opacity: 0.55;
  cursor: not-allowed;
}
.aktion-gesperrt:hover { background: var(--color-surface, #fff); }

/* Eine Trefferkarte: Hauptperson, Begleitpersonen, darunter die Gruppen-Aktionen. */
.treffer-gruppe {
  border: 1px solid var(--color-border, #d6dae1);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.lookup-person-begleitung {
  padding-left: 22px;
  background: var(--color-bg, #fbfbfc);
}

/* Gruppen-Aktionen: bewusst kleiner und ruhiger als die Personen-Aktion daneben – je Zeile
   soll EIN Knopf ins Auge fallen, nicht drei. Erreichbar bleibt alles. */
.gruppen-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px 12px;
  border-top: 1px dashed var(--color-border, #d6dae1);
  background: var(--color-bg, #fbfbfc);
}
.gruppen-aktionen .einlass-aktion { margin: 0; }

/* Zu welcher Gruppe wird hinzugefügt? Steht über dem Formular. */
.gruppen-kontext {
  flex: 1 1 100%;
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary);
}

/* Fingergrößen am Einlass: Auf Tablet und Telefon sind 32 px zu klein zum Treffen. */
@media (max-width: 900px) {
  .admin-container button,
  .admin-container .small-btn,
  .admin-container .secondary-btn { min-height: 44px; }
  /* Der Hilfe-Knopf bleibt optisch klein und untergeordnet – er soll neben der Überschrift
     nicht mit den Arbeitsknöpfen konkurrieren. Für den Finger wird nur die TREFFFLÄCHE auf
     44 px erweitert, unsichtbar, über ein Pseudoelement. So bleibt das Bild ruhig und die
     Bedienung am Telefon trotzdem sicher. */
  .admin-container .hilfe-btn {
    min-height: 34px; height: 34px; width: 34px; min-width: 34px;
    position: relative;
  }
  .admin-container .hilfe-btn::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }
  .admin-container input,
  .admin-container select { min-height: 44px; }
  .einlass-person-felder input,
  .einlass-person-felder select { flex: 1 1 100%; }
  /* Der Zähler soll auch auf dem schmalsten Gerät EINE Zeile bleiben – dafür etwas kleiner
     und mit engeren Abständen, statt die Beschriftungen zu kürzen. */
  .checkin-zaehler { font-size: 0.82rem; gap: 5px; padding: 8px 10px; }
  .checkin-zaehler strong { font-size: 1.05rem; }
}

/* Sehr schmale Geräte (iPhone SE/mini, 375 px).
   GEMESSENE GRENZE: Auf EINE Zeile bekommt man „… eingecheckt · … noch nicht · … angemeldete
   Teilnehmer" hier nicht mehr. Bei 375 px stehen 317 px zur Verfügung, gebraucht werden bei
   lesbarer Schrift rund 340 px; erst ab etwa 11 px Schriftgröße ginge es auf – zu klein für
   eine Zeile, die aus einem Meter Entfernung erfassbar sein soll. Das Wort „Teilnehmer" ist
   nicht verhandelbar (Sprachregel aus Block 29), und weiteres Kürzen wäre Umformulieren.
   Deshalb bewusst: zwei Zeilen bei 375 px, aber weiterhin EIN kompakter Streifen statt der
   früheren drei großen Kacheln. Ab 401 px gilt wieder die Stufe darüber. */
@media (max-width: 400px) {
  .checkin-zaehler { font-size: 0.8rem; gap: 4px 14px; padding: 8px 10px; }
  .checkin-zaehler strong { font-size: 1rem; }
  /* Beim Umbruch bliebe sonst ein Trennpunkt ohne Folgetext am Zeilenende stehen. Die Trenner
     sind reine Dekoration (aria-hidden); den Abstand übernimmt hier die Lücke. */
  .zaehler-trenner { display: none; }
}

/* ==========================================================================
   Block 57: Personen am Einlass erfassen und stornieren
   ========================================================================== */

/* Kennzeichnung „Walk-In" bzw. „am Einlass erfasst". Bewusst dezent (Grauton, kein Rot):
   Es ist ein Hinweis auf die Herkunft, keine Warnung. */
.walkin-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--color-surface-alt, #eef0f4);
  color: var(--color-text-muted, #5b6472);
  border: 1px solid var(--color-border, #d6dae1);
  vertical-align: middle;
}

/* Gruppe größer als das Kontingent: hervorgehoben, aber nicht als Fehler. „2 von 1" ist ein
   gültiger Zustand – es soll auffallen, nicht alarmieren. */
.lookup-person-meta.ueber-kontingent {
  color: var(--color-accent-dark, #a8630b);
  font-weight: 600;
}

.einlass-aktion { margin-top: 6px; }
.einlass-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--color-border, #d6dae1);
  border-radius: 8px;
  background: var(--color-surface-alt, #f7f8fa);
}
.einlass-person-felder {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 100%;
}
.einlass-person-felder input,
.einlass-person-felder select {
  flex: 1 1 150px;
  min-width: 120px;
  margin: 0;
}
.einlass-form button { margin: 0; }

.storno-btn { margin-left: 8px; }

.walkin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 4px;
}
.walkin-actions button { margin: 0; }
.walkin-auswahl {
  margin: 4px 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-success-dark, #2e7d32);
}
.walkin-begleitungen { margin-top: 8px; }
.walkin-begleitung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--color-border, #d6dae1);
  border-radius: 6px;
  margin-bottom: 6px;
  background: var(--color-surface, #fff);
}
.walkin-begleitung button { margin: 0; }

/* Konfliktart als eigene Zeile über den Details (Block 57, Fund 4). */
.conflict-kind {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted, #5b6472);
  margin-top: 2px;
}

/* ==========================================================================
   Offline-Check-in: Verbindungsstatus + Konflikt-Übersicht (Block 20)
   ========================================================================== */
.connection-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.92rem;
  border: 1px solid transparent;
}
.connection-dot {
  width: 11px;
  height: 11px;
  min-width: 11px;
  border-radius: 50%;
  background: #999;
  display: inline-block;
}
.connection-queue { margin-left: auto; font-size: 0.82rem; opacity: 0.85; }
.connection-status.connection-online { background: #e9f7ef; border-color: #b7e0c6; color: #1e5c3f; }
.connection-status.connection-online .connection-dot { background: #2e7d32; }
.connection-status.connection-ready { background: #fff6e6; border-color: #f2d69a; color: #7a5310; }
.connection-status.connection-ready .connection-dot { background: #e07b00; }
.connection-status.connection-stale { background: #fdeaea; border-color: #f2b6b6; color: #93231f; }
.connection-status.connection-stale .connection-dot { background: #c62828; }

.conflict-panel {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #f2b6b6;
  border-radius: 8px;
  background: #fdeaea;
}
.conflict-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: #93231f; }
.conflict-count { font-size: 0.8rem; font-weight: 700; background: #c62828; color: #fff; border-radius: 20px; padding: 1px 9px; }
.conflict-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #f2c6c6;
}
.conflict-row strong { font-size: 0.95rem; }
.conflict-meta { font-size: 0.8rem; color: #7a3b38; margin-top: 2px; }
.conflict-row button { margin: 0 0 0 auto; flex: 0 0 auto; width: auto; }
/* Block 85: „Nicht übernommene Vorgänge“ (gleiche Optik wie die Konflikt-Übersicht). */
.abgleich-meldungen-titel { font-size: 1rem; margin: 0; color: inherit; }
.conflict-row .abgleich-knoepfe { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; }
.conflict-row .abgleich-knoepfe button { margin: 0; }

/* ==========================================================================
   Lookup: eingeladen, aber nicht angemeldet -> Info + Spontan-Check-in (Block 17)
   ========================================================================== */
.lookup-notice {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid #cfe0f2;
  border-radius: var(--border-radius);
  background: #f2f8fd;
  color: #1c3a5e;
}
.lookup-notice-text {
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 1rem;
}
.lookup-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.lookup-notice-actions button { margin: 0; }

/* ==========================================================================
   Block 18 – Ampel-Marker in der Einladungsplanung + geführte Filterleiste
   ========================================================================== */
.invite-guest-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.invite-guest-text { flex: 1 1 auto; }
.ampel-markers { display: inline-flex; gap: 4px; flex: 0 0 auto; margin-left: auto; }
.ampel-marker {
  display: inline-block;
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: var(--ampel-color, #999);
  cursor: pointer;
  vertical-align: middle;
}
.ampel-marker:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* Event-Historie-Modal (Teil B): Kennzahlen oben + Personenliste */
#event-history-counts { margin: 4px 0 14px; }
.event-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #e3e9f1;
  font-size: 0.93rem;
}
.event-history-name { font-weight: 600; }
.event-history-status { color: #56657a; }
.event-history-sub { color: #8a97a8; margin-left: auto; }
.ampel-popover {
  position: absolute;
  z-index: 1000;
  background: #1f2733;
  color: #fff;
  font-size: 0.82rem;
  padding: 5px 9px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  max-width: 260px;
}

/* Geführte Filterleiste (Teil C) */
.planner-filterbar {
  margin: 8px 0 12px;
  padding: 14px 16px;
  border: 1px solid #dbe4ef;
  border-radius: var(--border-radius);
  background: #fbfcfe;
}
.planner-filterbar h3 { margin: 0 0 8px; }
.planner-count {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.planner-hint {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: #4a5568;
  background: #eef4fb;
  border-left: 3px solid var(--color-primary);
  padding: 6px 10px;
  border-radius: 4px;
}
.planner-mode-fieldset {
  margin: 10px 0;
  border: 1px solid #d5dbe3;
  border-radius: 8px;
  padding: 8px 12px 10px;
}
.planner-mode-fieldset legend { font-size: 0.85rem; font-weight: 700; padding: 0 4px; }
.planner-mode-fieldset .radio-option { margin: 6px 0; font-size: 0.92rem; }
.planner-exclusion-hint {
  margin: 8px 0;
  font-size: 0.9rem;
  color: #7a5c00;
  background: #fef9e7;
  border: 1px solid #f1c40f;
  border-radius: 6px;
  padding: 7px 11px;
}

/* ==========================================================================
   Management-Dashboard / Auswertungen (Block 21)
   ========================================================================== */
.stats-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.stats-actions button { width: auto; flex: 0 0 auto; }
.stats-kpis { margin-bottom: 8px; }
.chart-section .chart-wrap { width: 100%; overflow-x: auto; }
.stats-chart { width: 100%; height: auto; display: block; }
.chart-axis-label { font-size: 11px; fill: #6b7684; }
.chart-x-label { font-size: 10px; fill: #6b7684; }
.chart-empty { font-size: 13px; fill: #8a97a8; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.stats-table th, .stats-table td { padding: 7px 9px; border-bottom: 1px solid #e3e9f1; text-align: left; }
.stats-table th { background: #f4f7fb; font-weight: 700; }
.stats-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { width: 100%; overflow-x: auto; }

/* Druck-Kopf nur beim Drucken/PDF sichtbar */
.print-only { display: none; }
.print-header h2 { margin: 0 0 4px; }
.print-filter-summary { font-weight: 600; color: #1f3a5f; }
.print-date { font-size: 0.85rem; color: #6b7684; margin-top: 2px; }

/* Druckansicht (PDF via Browser „Als PDF speichern"): Navigation + Bedienelemente ausblenden,
   nur Kennzahlen, Diagramme, Tabelle und der Druck-Kopf mit aktivem Filterzustand bleiben. */
@media print {
  .admin-nav, .no-print, .stats-controls, .admin-nav-logout { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; }
  .admin-container { max-width: 100%; }
  .admin-section, .stat-card { break-inside: avoid; box-shadow: none; }
  .chart-section { page-break-inside: avoid; }
  a[href]:after { content: ''; }
}

/* ==========================================================================
   BLOCK 22 · Marken-Redesign (Navy/Rot, Werte seit Block 94 in tokens.css)
   Rein visuell – keine Funktionsänderung. Leitprinzip: weiße/neutrale Flächen,
   Navy als Tinte + gefüllter Primär-Button, Rot nur als winziger Signatur-Akzent.
   Alles über die zentralen Tokens oben; hier die daraus abgeleiteten Feinheiten.
   ========================================================================== */

/* --- Typografie: hochwertiger Kontrast über Gewicht/Größe/Tracking ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { color: var(--navy); letter-spacing: -0.015em; }
h1 { line-height: 1.15; } /* Block 94: Gewichte setzt basis.css (h1 leicht, 300) */
h2 { font-weight: 700; }
.admin-pagetitle h1 { font-size: 1.65rem; }

/* --- Guest-Seiten (Anmeldeseite): luftig, weiß, eine kurze rote Keyline ------
   Gilt nur für die öffentlichen Seiten (kein data-page). Die Keyline ist der
   einzige feste Farbtupfer im Gast-Chrome – der Rest lebt von Weißraum + Typo. */
body:not([data-page]) .container { padding-top: 32px; }
body:not([data-page]) .container::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-red);
  margin: 0 0 18px;
}
.brand-title { color: var(--navy); font-weight: 800; letter-spacing: -0.02em; }
.subtitle { color: var(--color-muted); }

/* --- Buttons ---------------------------------------------------------------- */
button, .button-link { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
button { transition: background 0.15s ease, box-shadow 0.15s ease; }
button:hover:not(:disabled):not(.secondary-btn):not(.danger-btn) { background: var(--navy-700); }
button:active { background: var(--navy-900); }

/* Sekundär: ruhige, neutrale Outline statt kräftigem Navy-Rahmen */
button.secondary-btn, .button-link.secondary {
  background: var(--color-surface);
  color: var(--navy);
  border: 1.5px solid var(--color-border);
  box-shadow: none;
}
button.secondary-btn:hover { background: var(--navy-050); border-color: var(--navy-100); }

/* Danger/Löschen: rote OUTLINE – klar destruktiv, hebt sich von der (gefüllten)
   Navy-Primäraktion UND vom winzigen Marken-Rot-Akzent ab. */
button.danger-btn {
  background: transparent;
  color: var(--color-danger);
  border: 1.5px solid var(--color-danger);
  box-shadow: none;
}
button.danger-btn:hover { background: var(--brand-red-050); }
button.danger-btn:active { background: #f7d7d4; }

/* --- Formularfelder: sanfter Navy-Fokusring statt harter Outline ------------ */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="date"], input[type="time"], input[type="number"],
select, textarea {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-100);
}

/* --- Admin/Check-in-Navigation: weiße, ruhige Leiste (kein blauer Block) ----- */
.admin-nav {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 8px 16px;
}
.admin-nav-links { gap: 2px; }
.admin-nav-link {
  color: var(--color-muted);
  background: transparent;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
}
.admin-nav-link:hover { background: transparent; color: var(--navy); }
.admin-nav-link.active {
  background: transparent;
  color: var(--navy);
  border-bottom-color: var(--navy);
}
.admin-nav-logout {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--color-border);
  box-shadow: none;
}
.admin-nav-logout:hover { background: var(--navy-050); }
.admin-nav-role {
  background: var(--navy-100);
  color: var(--navy);
}

/* --- Cards / Sektionen / Trennlinien: weiche, neutrale Hairlines ------------- */
.invitation-card, .table-wrapper, .qr-image { border-color: var(--color-border); }
fieldset { border-color: var(--color-border); border-radius: var(--radius-lg); }
th, td { border-color: var(--color-hairline); }
.table-wrapper table th { background: #fafbfc; color: #3a3550; }

/* --- Guest-Hero (Veranstaltungs-Vorstellung, Block 14): Navy-Titel, ruhig ---- */
.event-hero-title { color: var(--navy); font-weight: 800; letter-spacing: -0.015em; }

/* --- Check-in: größere, touchfreundliche Bedienelemente am Einlass ----------- */
/* Block 66: #scan-form button steht hier nicht mehr – „Check-in" ist eine kleine Nebenaktion
   (secondary-btn small-btn); die Mindesthöhe von 44/48 px behält er über die Regeln der Karte. */
body[data-page="checkin"] #lookup-form button,
body[data-page="checkin"] #search-form button,
body[data-page="checkin"] #camera-toggle-btn {
  padding: 16px;
  font-size: 1.05rem;
}
body[data-page="checkin"] .stat-value { font-size: 2rem; }

/* Import-Doku (Gästedatenbank-Import): Spaltenreferenz + Zeilen-Hinweise */
.import-doc { margin: 0.25rem 0 1rem; border: 1px solid var(--color-border); border-radius: 8px; padding: 0.5rem 0.75rem; background: var(--color-bg); }
.import-doc > summary { cursor: pointer; font-weight: 600; }
.import-doc-table { font-size: 0.85rem; }
.import-doc-table td:nth-child(2) { text-align: center; white-space: nowrap; }
.import-hints { font-size: 0.85rem; color: var(--color-danger); }

/* Block 27/28: Unter-Navigation (Reiter) für Gästedatenbank UND Event-Verwaltung (geteiltes Muster) */
.guests-subnav, .events-subnav { display: flex; gap: 4px; flex-wrap: wrap; align-items: stretch;
  border-bottom: 1px solid var(--color-border); margin: 0 0 1.25rem; }
.guests-tab, .events-tab { appearance: none; background: transparent; border: none; border-bottom: 2px solid transparent;
  padding: 0.6rem 1.1rem; font: inherit; font-weight: 600; color: var(--navy-700, #4a4370);
  cursor: pointer; text-decoration: none; border-radius: 8px 8px 0 0; line-height: 1.6;
  /* Block 60: Diese Regel deklarierte weder `width` noch `margin`. Die als <button> gebauten
     Reiter erbten dadurch `width: 100%` und `margin-top: 24px` aus der globalen button-Regel und
     standen als Vollbreiten-Balken UNTEREINANDER – gemessen 612 px je Reiter, jeder auf einer
     eigenen Zeile (guests.html 4 Zeilen, events.html 5). Die Reiter-Absicht stand also nur im
     Quelltext (`display: flex`, `gap`, `border-bottom`) und wurde überfahren. Das ist ein Defekt,
     kein Entwurf. Für die <a>-Variante (guests.html, „Datenursprünge") sind beide Werte ohnehin
     die Vorgabe – die Reparatur stimmt daher für beide Elementarten. */
  width: auto; margin-top: 0; }
.guests-tab:hover, .events-tab:hover { background: var(--color-bg); color: var(--navy); }
.guests-tab.active, .events-tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.guests-subnav-admin { margin-left: auto; }
.guest-total-count { font-weight: 600; color: var(--navy); margin: 0 0 0.9rem; font-size: 1.05rem; }

/* Block 31: Event-Kontext (Übersicht ⇄ Verwaltung eines Events) */
.section-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-head-row h2 { margin: 0; }
.manage-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.manage-header .manage-title { margin: 0; }
.new-event-form { border: 1px solid var(--color-border); border-radius: var(--radius-lg, 12px);
  padding: 1rem 1.1rem; margin: 0.75rem 0 1.1rem; background: var(--navy-050, #f6f8fb); }
.cleanup-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ===========================================================================
   Block 47: Barrierefreiheit
   ===========================================================================
   Schwerpunkt Tastaturbedienung. Vorher gab es KEINEN einzigen Fokus-Stil für
   Buttons und Links, und der Ring an Eingabefeldern lag bei 1,19:1 gegen Weiß –
   also praktisch unsichtbar. Wer ohne Maus arbeitet, konnte nicht erkennen, wo
   er sich befindet.

   `:focus-visible` statt `:focus` ist Absicht: Der Ring erscheint nur bei
   Tastaturnutzung. Für Mausnutzer ändert sich die Optik dadurch überhaupt nicht.
   --------------------------------------------------------------------------- */

/* Ein Ring, der auf hellen UND dunklen Flächen trägt: außen Navy (15,3:1 auf
   Weiß), innen ein weißer Absatz, damit er sich auch von einem Navy-Button
   abhebt. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
  border-radius: 4px;
}

/* Auf Navy-Flächen (Primärbuttons, Navigation) wäre ein Navy-Ring unsichtbar –
   dort wird er weiß, mit dunklem Absatz. */
.admin-nav a:focus-visible,
button.primary-btn:focus-visible,
.hero button:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 2px var(--navy-900);
}

/* Der bisherige, zu schwache Ring an Eingabefeldern wird ersetzt. Die farbige
   Rahmenhervorhebung bleibt zusätzlich erhalten – zwei Signale sind besser als
   eins, besonders bei eingeschränktem Farbsehen. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--navy);
}

/* Formularfelder als Bedienelemente erkennbar (WCAG 1.4.11). */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="date"], input[type="time"],
input[type="number"], input[type="tel"], select, textarea {
  border-color: var(--color-field-border);
}

/* Sprungmarke: liegt außerhalb des Sichtfelds und wird erst beim Antabben
   sichtbar – so stört sie die Optik nicht, hilft aber Tastaturnutzern, die
   Navigation zu überspringen. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--border-radius) 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* Pflichtfeld-Sternchen: bisher nur farblich erkennbar. Der Zusatz sorgt dafür,
   dass Screenreader „Pflichtfeld" vorlesen statt „Stern". */
.required-star {
  color: var(--color-error);
  font-weight: 700;
}

/* Feld mit Validierungsfehler: nicht nur rot, sondern auch dicker umrandet –
   Farbe allein darf nie das einzige Unterscheidungsmerkmal sein. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  border-width: 2px;
}

/* Nutzer, die reduzierte Bewegung eingestellt haben, bekommen keine Animationen.
   Relevant u. a. bei vestibulären Beschwerden. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   Block 48: Gefahrenbereich im Systembereich.
   Bewusst KRÄFTIGER als der übrige Admin-Bereich – wer hier ist, soll es merken.
   Abgrenzung zum bestehenden .danger-btn (rote Outline, löscht EINEN Gast):
   der Auslöser hier ist flächig gefüllt und volle Breite, damit die beiden
   Aktionen mit völlig unterschiedlicher Reichweite nicht verwechselbar sind.
   ============================================================================ */
.danger-zone {
  border: 2px solid var(--color-danger);
  border-top: 6px solid var(--color-danger);
  background: #fffbfa;
}
.danger-zone h2 { color: var(--color-danger); }
.danger-zone h3 { margin-top: 24px; }
.danger-zone-lead { font-size: 1.02rem; line-height: 1.55; }

.danger-zone-box {
  border-left: 4px solid var(--color-danger);
  background: #fff;
  padding: 12px 16px;
  margin: 18px 0;
  border-radius: 4px;
}
.danger-zone-box p { margin: 8px 0; }

.danger-zone-off {
  background: #fff;
  border: 1px dashed var(--navy-100, #ccc);
  border-radius: 6px;
  padding: 16px;
  color: #555;
}

/* Kennzahl-Kacheln der Vorschau: Rot = wird gelöscht, neutral = bleibt. */
.wipe-stats, .wipe-keeps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 20px;
}
.wipe-stat {
  display: flex;
  flex-direction: column;
  min-width: 116px;
  padding: 10px 14px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--navy-100, #dfe3e8);
}
.wipe-stat-danger { border-color: var(--color-danger); background: #fff5f4; }
.wipe-stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.wipe-stat-danger .wipe-stat-value { color: var(--color-danger); }
.wipe-stat-label { font-size: 0.82rem; color: #566; margin-top: 2px; }

/* Der Auslöser selbst: gefüllt, breit, unverwechselbar. */
button.wipe-btn {
  background: var(--color-danger);
  color: #fff;
  border: none;
  width: 100%;
  padding: 16px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 16px;
}
button.wipe-btn:hover:not(:disabled) { background: #96291d; }
button.wipe-btn:disabled { background: #d9b6b1; color: #fff; cursor: not-allowed; }

.wipe-result-ok {
  border: 2px solid var(--color-success, #2e7d32);
  background: #fff;
  border-radius: 6px;
  padding: 16px 20px;
  margin-top: 20px;
}
.wipe-result-ok h3 { margin-top: 0; color: var(--color-success, #2e7d32); }
.wipe-result-ok ul { margin: 8px 0 16px 20px; }

.backup-card {
  border: 1px solid var(--navy-100, #dfe3e8);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: #fff;
}
.backup-card a { margin-top: 8px; display: inline-block; }

/* Block 50: Warnung in der Import-Vorschau, wenn die Datei keine E-Mail-Adressen enthält.
   Bewusst auffällig (gelber Hinweisbalken), aber KEINE Fehlermeldung – der Import bleibt
   möglich, Partnerlisten ohne Adressen sind der Normalfall. */
.import-email-warning {
  background: #fff8e1;
  border-left: 4px solid #f0a500;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 8px 0 12px;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Zeilenstatus in der Vorschau: bekannt = beruhigend, Verdacht = aufmerksam. */
.import-status-known { color: #1b5e20; }
.import-status-suspect { color: #8a6100; font-weight: 600; }

/* ==========================================================================
   Block 63: Begleitpersonen am Einlass
   ========================================================================== */

/* Ohne Treffer stehen Walk-In und Begleitperson nebeneinander, nicht gestapelt. */
.suche-angebote { display: flex; flex-wrap: wrap; gap: 8px; }
.suche-angebote button { margin: 0; }

/* Bei „Nicht eingeladen" zwei gleichrangige Wege in einer Zeile. */
.lookup-person-action .small-btn + .small-btn { margin-left: 6px; }

/* Walk-In: „Übernehmen" sitzt jetzt zwischen Feldern und Liste. */
#walkin-section .aktion-huelle { display: inline-block; margin-top: 8px; }
#walkin-section .aktion-huelle button { margin: 0; }
.walkin-begleitung-neu { margin-left: 6px; font-size: 0.8rem; color: var(--color-muted, #616874); }

/* Ausweg bei Namensgleichheit (E1 a) – bewusst unauffällig, aber gut erreichbar. */
.neu-anlegen-btn { margin: 6px 0 0; }

/* Auswahl aus dem Gästebestand im Formular „Person hinzufügen". */
.gast-auswahl { flex: 1 1 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.gast-auswahl > button { margin: 0; }
.gast-auswahl-status { margin: 0; font-size: 0.85rem; }
.gast-auswahl-status button { margin: 0 0 0 6px; }
.gast-auswahl-liste { align-self: stretch; display: flex; flex-direction: column; gap: 6px; }
.gast-auswahl-treffer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--color-border, #d6dae1); border-radius: 8px;
}
.gast-auswahl-treffer button { margin: 0; }

/* Dialog „Als Begleitperson hinzufügen". */
.begleitperson-person { margin: 0 0 12px; }
.begleitperson-suche { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.begleitperson-suche label { flex: 1 1 100%; }
.begleitperson-suche input { flex: 1 1 220px; margin: 0; }
.begleitperson-suche button { width: auto; margin: 0; }
.begleitperson-treffer { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.begleitperson-treffer-zeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--color-border, #d6dae1); border-radius: 8px;
}
.begleitperson-treffer-zeile button { width: auto; margin: 0; }
#begleitperson-modal .einlass-person-felder { margin-top: 6px; }

/* Offline-Einlass: Hinweis, dass die App als lokaler Einlass-Server läuft (nav.js).
   Bewusst in Navy-Tönung statt Rot – Farbe sparsam (Block 22). */
.lokal-hinweis {
  background: var(--navy-100);
  color: var(--navy);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.92rem;
}

/* Offline-Einlass (#18): Checkout-Code und Einrichtung – Navy-Tönung, Farbe sparsam (Block 22). */
.oe-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 12px 0; }
.oe-form label { width: 100%; margin: 0; }
.oe-form select { flex: 1 1 320px; }
.oe-code-box { background: var(--navy-050); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 16px; margin-top: 12px; }
.oe-code-label { margin: 0 0 6px; }
.oe-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 2rem; letter-spacing: 0.12em; color: var(--navy); margin: 0 0 6px; user-select: all; }
.oe-gesperrt-zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-hairline); }
.oe-einrichtung { max-width: 560px; }
.oe-einrichtung label { display: block; margin-top: 12px; }
.oe-einrichtung input { width: 100%; }
.oe-stand { background: var(--navy-050); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 12px 16px; margin: 12px 0; }
.oe-stand dt { font-weight: 600; }
.oe-stand dd { margin: 0 0 8px; }


/* Einlass-Leitstand (#52): Überblick für die Einlassleitung. Zustand über Form UND Farbe
   (Punkt + Text), Farbe sparsam (Block 22): Grün/Bernstein/Rot nur für den Zustand. */
.geraet-kennung { text-align: center; color: var(--color-muted); font-size: 0.85rem; margin: 8px 0 24px; font-variant-numeric: tabular-nums; }
.ls-stand { color: var(--color-muted); font-size: 0.88rem; margin: -6px 0 16px; }
.ls-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.ls-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 12px; font-size: 0.9rem; background: var(--color-surface); }
.ls-chip::before, .ls-punkt::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-muted); flex: none; }
.ls-ok::before { background: var(--color-ok); }
.ls-warn::before { background: var(--color-warning); }
.ls-fehler::before { background: var(--color-error); }
.ls-fehler { border-color: var(--color-error); color: var(--color-error); }
.ls-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 12px; }
.ls-zahl { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 12px 14px; min-width: 0; }
.ls-zahl-wert { font-size: 1.9rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ls-zahl-text { color: var(--color-muted); font-size: 0.88rem; }
.ls-balken { height: 10px; background: var(--navy-100); border-radius: 999px; overflow: hidden; margin: 4px 0 20px; }
.ls-balken > span { display: block; height: 100%; background: var(--navy); }
.ls-verlauf { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 110px; margin: 8px 0 4px; }
.ls-verlauf-saeule { background: var(--navy-100); border-radius: 4px 4px 0 0; position: relative; min-height: 2px; }
.ls-verlauf-saeule.ls-jetzt { background: var(--navy); }
.ls-verlauf-achse { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; font-size: 0.75rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.ls-tabelle-rahmen { overflow-x: auto; }
.ls-tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.ls-tabelle th, .ls-tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-hairline); vertical-align: middle; white-space: nowrap; }
.ls-tabelle th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); font-weight: 600; }
.ls-tabelle td.ls-zahl-zelle { font-variant-numeric: tabular-nums; text-align: right; }
.ls-punkt { display: inline-flex; align-items: center; gap: 6px; }
.ls-tabelle td.ls-name-zelle { min-width: 12em; }
.ls-tabelle .ls-name-eingabe { width: 100%; min-width: 11em; padding: 4px 8px; margin: 0; }
.ls-kennung { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Block 91 (#249): Rückfrage „Check-in zurücknehmen“ (Overlay-Muster wie „Als Begleitperson hinzufügen“). */
.zuruecknehmen-box { max-width: 460px; }
.dialog-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dialog-aktionen button { margin: 0; }

/* Block 91 (#249): Personenzeile in Handybreite. Kennzeichnung „Eingecheckt · hh:mm“ und Knopf waren rechts
   abgeschnitten (die Zeile hat nicht umbrochen). Jetzt steht die Aktion unter dem Namen, umbricht bei Bedarf und
   nichts läuft über. Am Desktop bleibt alles wie bisher. */
@media (max-width: 640px) {
  .lookup-person { flex-wrap: wrap; }
  .lookup-person > :first-child { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  .lookup-person-action { flex-shrink: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
  .lookup-person-action .small-btn + .small-btn { margin-left: 0; }
}

/* Block 99 (#255): Knopf „Check-in zurücknehmen“ im Ergebnisfeld (nach Scan, Kamera, Code-Eingabe). Der Knopf selbst
   trägt die Klassen der Personenzeile (secondary-btn small-btn, gesperrt: aktion-gesperrt – Block 60/91). */
.result-aktionen { margin-top: 14px; }
.result-aktionen:has(> button[hidden]) { margin-top: 0; }
.result-aktionen button { margin: 0; }