:root{
  --primary:#0a4ea2;
  /* Aus der CI-Farbe abgeleitet und im Layout gesetzt; hier nur Rueckfallwerte. */
  --on-primary:#ffffff;
  --primary-ink:#0a4ea2;
  --secondary:#7ab51d;
  --on-secondary:#1f2430;
  --secondary-ink:#588214;
  --bg:#f3f4f6;
  --card:#ffffff;
  --text:#1f2430;
  --muted:#6b7280;
  --border:#e4e7eb;
  --ok:#1f9d55;
  --warn:#d98c00;
  --err:#c0392b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.5;
  -webkit-text-size-adjust:100%;
}
/* Sticky App-Header: bleibt beim Scrollen oben, liegt über Inhalten. */
.app-header{background:var(--primary);color:var(--on-primary);position:sticky;top:0;z-index:200;transition:box-shadow .2s ease}
body.is-scrolled .app-header{box-shadow:0 2px 10px rgba(0,0,0,.18)}
.app-header__inner{max-width:880px;margin:0 auto;padding:12px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
/* Logo ohne weisse Hinterlegung/Rahmen – es steht direkt auf der Kopfzeilenfarbe. */
.app-logo{max-height:56px;width:auto;max-width:100%;height:auto}
/* Logo-Vorschau im Backend: nie breiter als die Karte, Seitenverhältnis bleibt erhalten. */
/* Vorschau im Backend: ohne weissen Rahmen, aber mit dezent grauem Grund – sonst waere
   ein weisses oder transparentes Logo auf der weissen Karte nicht zu sehen.
   Die Kopfzeile (.app-logo) zeigt das Logo dagegen voellig frei. */
.logo-preview{display:block;max-width:100%;height:auto;max-height:6rem;background:var(--bg);border-radius:6px}
.app-title{display:flex;flex-direction:column;line-height:1.2}
.app-date{font-size:.8rem;opacity:.85}
.app-main{max-width:880px;margin:0 auto;padding:16px}
/* Breite Ansicht fuer Listen: nahezu volle verfuegbare Breite (bis 1600px). */
.app-main--wide{max-width:min(1600px, calc(100vw - 48px))}
.app-main--wide .card{max-width:none;width:100%}
.app-main--wide .admin-nav{max-width:none}
.app-footer{max-width:880px;margin:24px auto;padding:0 16px;color:var(--muted);text-align:center}

.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin:0 auto 16px;max-width:680px}
.card--narrow{max-width:420px}
.card--center{text-align:center}
.card--scan{max-width:520px}
h1{font-size:1.4rem;margin:.2em 0 .4em}
h2{font-size:1.05rem;margin:1.4em 0 .5em}
.lead{color:var(--muted);margin-top:0}
.muted{color:var(--muted)}
.small{font-size:.85rem}

label{display:block;margin:0 0 14px;font-weight:600;font-size:.92rem}
input,select,textarea{
  width:100%;padding:11px 12px;margin-top:5px;border:1px solid var(--border);
  border-radius:8px;font-size:1rem;font-weight:400;background:#fff;color:var(--text)
}
input[type=color]{height:46px;padding:4px}
input[type=file]{padding:8px}
.field-error{display:block;color:var(--err);font-weight:400;font-size:.85rem;margin-top:4px}
/* Frueher Hinweis direkt unter einem Feld (z. B. bereits vorhandene Personalnummer).
   Bewusst dezent: informiert, blockiert aber nichts. */
.field-warn{display:block;color:#8a5a00;background:#fff4e0;border:1px solid #f0d9ac;border-radius:8px;
  font-weight:400;font-size:.85rem;line-height:1.35;margin-top:6px;padding:8px 10px}
/* display:block wuerde sonst das HTML-Attribut [hidden] aushebeln. */
.field-warn[hidden]{display:none}

.btn{display:inline-block;border:none;border-radius:8px;padding:12px 18px;font-size:1rem;
  font-weight:600;cursor:pointer;text-decoration:none;text-align:center}
.btn--primary{background:var(--primary);color:var(--on-primary);
  /* Feiner Rand: haelt den Button auch bei sehr heller CI-Farbe von der weissen Karte ab. */
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)}
.btn--secondary{background:var(--secondary);color:var(--on-secondary);box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)}
.btn--ghost{background:#eef1f5;color:var(--text)}
.btn--danger{color:var(--err)}
.btn--sm{padding:7px 12px;font-size:.85rem}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
/* Sticky Action-Bar: hält Speichern (und ggf. Abbrechen) in langen Formularen sichtbar.
   Liegt im Dokumentfluss (position:sticky) und verdeckt daher keine Inhalte dauerhaft. */
.form-actions{
  position:sticky;bottom:0;z-index:5;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;
  margin:18px -20px -20px;padding:12px 20px;
  background:rgba(255,255,255,.96);border-top:1px solid var(--border);
  border-radius:0 0 12px 12px;
}
@supports (backdrop-filter:blur(4px)){.form-actions{background:rgba(255,255,255,.85);backdrop-filter:blur(6px)}}
.inline{display:inline}
.row-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row-form input{width:auto;flex:1 1 160px;margin-top:0}

.alert{padding:12px 14px;border-radius:8px;margin:0 0 14px;font-size:.95rem}
.alert--info{background:#e8f1fb;color:#0a4ea2}
.alert--warn{background:#fff4e0;color:#8a5a00}
.alert--error{background:#fdecea;color:#a32519}

.review{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin:14px 0}
.review dt{color:var(--muted);font-size:.85rem}
.review dd{margin:0;font-weight:600}
.review__email{font-size:1.15rem;color:var(--primary-ink);background:#eef5ff;padding:6px 10px;border-radius:6px;grid-column:span 1}

.qr-box{margin:18px auto;display:inline-block;padding:12px;background:#fff;border:1px solid var(--border);border-radius:12px}
.qr-img{display:block;width:260px;height:260px;max-width:80vw;max-height:80vw}

/* Kennzahlen-Kacheln: ab Desktop alle fuenf Karten in EINER Zeile und exakt gleich
   breit (minmax(0,1fr) statt 1fr, damit kein langes Wort eine Spalte aufweitet).
   Darunter stufenweiser Umbruch. Karten sind immer gleich hoch, Zahl und Beschriftung
   vertikal zentriert. Farbschema und Card-Optik bleiben unveraendert. */
/* Kennzahlen des Dashboards. Standard: fuenf Karten (siehe Media-Queries unten).
   Mit .stats--two (Gaeste-Abfrage ausgeschaltet) bleiben nur zwei Karten uebrig – sie
   stehen dann auf jeder Breite nebeneinander und gleich breit. */
.stats{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:14px 0}
.stat{background:#f7f9fc;border:1px solid var(--border);border-radius:10px;padding:16px 10px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px}
.stat__num{display:block;font-size:2.3rem;line-height:1.05;font-weight:700;color:var(--primary-ink)}
.stat__lbl{display:block;color:var(--muted);font-size:.85rem;line-height:1.3;
  text-wrap:balance;overflow-wrap:break-word;max-width:100%}
/* Schmal: 2 Spalten – die fuenfte Karte fuellt die Zeile, damit sie nicht allein steht. */
@media(min-width:460px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats .stat:last-child{grid-column:1/-1}
  .stats--two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats--two .stat:last-child{grid-column:auto}
}
/* Mittel: 3 Spalten (3 + 2). */
@media(min-width:700px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats .stat:last-child{grid-column:auto}
  .stats--two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats--two .stat:last-child{grid-column:auto}
}
/* Ziel: alle fuenf nebeneinander, exakt gleich breit, keine zweite Zeile.
   1000px ist bewusst gewaehlt: ab hier bleibt auch die laengste Beschriftung
   ("Personen insgesamt angemeldet") innerhalb von zwei Zeilen. */
@media(min-width:1000px){
  .stats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .stats--two{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.linkbox{margin:10px 0}
.linkbox label{font-size:.8rem;color:var(--muted);font-weight:600}
.linkbox input{font-family:monospace;font-size:.85rem}

/* QR-Code zu einem Link inkl. Download-Button */
.qr-link{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:12px}
.qr-link__img{display:block;width:220px;max-width:100%;height:auto;background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px}

.table{width:100%;border-collapse:collapse;font-size:.92rem}
.table th,.table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.table th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.table tbody tr:hover{background:#f7f9fc}
/* Auf kleinen Displays horizontal scrollen, statt Inhalte zu quetschen. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll .table{min-width:820px}
.actions{white-space:nowrap;text-align:right}
.table td.actions .btn{margin-left:6px}

/* Listen-Werkzeugleiste: Suche links, CSV-Export rechts; auf Desktop eine Zeile. */
.list-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:0 0 14px}
.search-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1 1 340px}
.search-form input[type=search]{flex:1 1 240px;min-width:180px;margin-top:0}
.list-toolbar__actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:0 0 auto}
.list-toolbar__export{flex:0 0 auto}

/* Checkbox-Zeile (z. B. E-Mail abfragen, QR sofort senden) */
.check{display:flex;align-items:center;gap:8px;font-weight:600}
.check input[type=checkbox]{width:auto;margin:0;flex:0 0 auto}
/* Betriebsteile: Zwischenueberschrift je Bereich in der Tabelle. */
.group-row th{background:#eef1f5;font-size:.8rem;letter-spacing:.04em;padding-top:10px;padding-bottom:10px}
/* Kompaktes Zeilen-Formular in einer Tabellenzelle (Bereich zuordnen): das Eingabefeld
   soll die Spalte nicht aufziehen, deshalb feste Breite statt flex-Wachstum. */
.row-form--tight{gap:6px;flex-wrap:nowrap}
.row-form--tight input{flex:0 1 210px;min-width:0;padding:7px 10px;font-size:.9rem}

/* Auswahl nebeneinander (z. B. Schriftfarbe auf den CI-Farben). */
.label-plain{margin-bottom:4px}
.radio-row{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 6px}
.radio-row label{display:flex;align-items:center;gap:6px;margin:0;font-weight:400}
.radio-row input[type=radio]{width:auto;margin:0;flex:0 0 auto}
/* Manuelles Anlege-Formular nicht über die volle Breite ziehen. */
.form-narrow{max-width:520px}

/* Zähler-Badge in der Überschrift – grün wie der Status „erschienen“. */
.count-badge{display:inline-block;vertical-align:middle;background:#e3f4ea;color:var(--ok);
  border-radius:20px;padding:1px 11px;font-size:.82rem;font-weight:700;margin-left:4px}

/* Sortierbare Spaltenköpfe: normale Kopf-Optik, Sortierbarkeit nur dezent über Pfeile. */
.table--sortable th{padding:0}
.table--sortable th .sort-link{display:flex;align-items:center;gap:5px;color:inherit;
  text-decoration:none;cursor:pointer;padding:10px 12px;white-space:nowrap}
.table--sortable th.col-num .sort-link{justify-content:flex-end}
.table--sortable th .sort-link:hover{color:var(--text)}
.sort-arrow{font-size:.78em;opacity:.3;line-height:1;transition:opacity .15s}
.table--sortable th .sort-link:hover .sort-arrow{opacity:.6}
.sort-arrow.is-active{opacity:1;color:var(--primary-ink)}
.table td.col-num,.table th.col-num{text-align:right}
.list-empty{text-align:center;padding:22px 8px}

/* Pagination: ruhige Leiste unter der Tabelle. */
.pagination{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.pagination__info{color:var(--muted);font-size:.88rem}
.pagination__nav{display:flex;gap:8px;align-items:center}
.pagination__page{color:var(--muted);font-size:.88rem}
.pagination__current{display:inline-block;background:var(--primary);color:var(--on-primary);border-radius:6px;padding:1px 9px}
.pagination__per{flex:0 0 auto}
.pagination__per label{margin:0;font-size:.85rem;color:var(--muted);font-weight:600;display:inline-flex;gap:6px;align-items:center}
.pagination__per select{width:auto;min-width:0;margin-top:0;padding:6px 8px}
.btn.is-disabled{opacity:.45;cursor:default;pointer-events:none}

.badge{display:inline-block;background:#eef1f5;color:var(--muted);border-radius:20px;padding:2px 9px;font-size:.75rem;font-weight:600}
.badge--ok{background:#e3f4ea;color:var(--ok)}
.badge--warn{background:#fdecd6;color:var(--warn)}

/* Admin-Navigation: links die Seiten, "Abmelden" rechts; auf allen Seiten identisch.
   Sticky direkt unter dem Header (Offset = gemessene Header-Höhe). */
.admin-nav{display:flex;flex-wrap:wrap;gap:6px;max-width:none;margin:0 0 16px;align-items:center;
  position:sticky;top:var(--header-h,64px);z-index:150;background:var(--bg);
  padding:10px 0;transition:box-shadow .2s ease}
body.is-scrolled .admin-nav{box-shadow:0 6px 10px -6px rgba(0,0,0,.18)}
.admin-nav a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--text);background:#fff;border:1px solid var(--border);font-size:.9rem;font-weight:600}
.admin-nav a:hover{border-color:var(--primary-ink);color:var(--primary-ink)}
/* Aktive Seite negativ hervorheben. */
.admin-nav a.is-active,.admin-nav a.is-active:hover{background:var(--primary);color:var(--on-primary);
  border-color:var(--primary-ink)}
.admin-nav__logout{margin-left:auto}

/* Untergliederung breiter Seiten in Abschnitts-Karten. */
.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start;margin:14px 0}
.panel{background:#f9fafb;border:1px solid var(--border);border-radius:10px;padding:16px}
.panel > h2:first-child,.panel > h1:first-child{margin-top:0}
.panel h2{font-size:1rem;margin:0 0 12px}
.panel :last-child{margin-bottom:0}

/* Einstellungen: Die Karten liegen flach im Container und fliessen ueber mehrere
   Spalten. Der Browser gleicht die Spaltenhoehen selbst aus – anders als bei festen
   Spalten kann dadurch nicht eine Spalte endlos lang werden, waehrend die uebrigen
   leer bleiben. Reihenfolge bleibt spaltenweise lesbar (oben links nach unten rechts).
   Wichtig: break-inside verhindert, dass eine Karte auf zwei Spalten aufgeteilt wird. */
.settings-grid{column-count:3;column-gap:16px;margin:14px 0}
.settings-grid > .panel{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 16px;
}
@media(max-width:1200px){.settings-grid{column-count:2}}
@media(max-width:900px){.settings-grid{column-count:1}}

/* Zwei schmale Felder nebeneinander (z. B. die beiden Farbwaehler). */
.field-pair{display:flex;flex-wrap:wrap;gap:12px}
.field-pair > label{flex:1 1 120px;min-width:0}

/* Hinweis mit Verweis auf einen anderen Bereich: etwas abgesetzt vom Feld darueber. */
.field-help--link{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border)}

/* Scanner */
.scan-top{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;margin-bottom:8px}
.scan-result{padding:18px;border-radius:10px;text-align:center;font-size:1.4rem;font-weight:700;margin:12px 0}
.scan-result--idle{background:#eef1f5;color:var(--muted);font-size:1rem;font-weight:600}
.scan-result--ok{background:#e3f4ea;color:var(--ok)}
.scan-result--already{background:#fff4e0;color:var(--warn)}
.scan-result--invalid{background:#fdecea;color:var(--err)}
.scan-status{font-size:1.4rem;font-weight:700}
.scan-name{font-size:1.15rem;font-weight:700;margin-top:6px}
.scan-company{font-size:1rem;font-weight:400;opacity:.85}
.scan-guests{font-size:1.2rem;font-weight:700;margin-top:8px}

/* Gäste-Korrektur unter der Scan-Anzeige */
.guest-correct{margin:0 0 12px}
.guest-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.guest-form label{margin:0;font-weight:600}
.guest-form input[type=number]{width:90px;margin-top:0;text-align:center}
.guest-msg{font-size:.88rem;color:var(--muted);flex-basis:100%;text-align:center}
.guest-msg.is-ok{color:var(--ok)}
.guest-msg.is-err{color:var(--err)}

/* „Weiter scannen“-Schaltfläche (Scanner pausiert nach jedem Scan) */
.scan-continue{margin:0 0 12px;text-align:center}
.scan-continue .btn{width:100%}

/* Duplettenwarnung am Einlass (nur bei aktivierter Option). Nutzt die vorhandene
   Warnfarbe; es ist zu diesem Zeitpunkt noch NICHTS gespeichert. */
.scan-result--duplicate{background:#fff4e0;color:var(--warn)}
.dup-warn{margin:0 0 12px;padding:12px;background:#fff4e0;border:1px solid #f0d9ac;border-radius:10px}
.dup-warn__text{margin:0 0 8px;color:#8a5a00;font-size:.92rem}
.dup-warn__pnr{margin:0 0 8px;font-size:.92rem;color:#8a5a00}
.dup-warn__list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.dup-entry{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;
  background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:.9rem}
.dup-entry--current{border-color:var(--primary-ink)}
.dup-entry__name{font-weight:600}
.dup-entry__status{color:var(--muted)}
.dup-entry--attended .dup-entry__status{color:var(--warn);font-weight:600}
.dup-warn__actions{display:flex;flex-direction:column;gap:8px}
.dup-warn__actions .btn{width:100%}
.scan-video-wrap{position:relative;width:100%;aspect-ratio:1/1;background:#000;border-radius:12px;overflow:hidden}
#video{width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;inset:18%;border:3px solid rgba(255,255,255,.8);border-radius:14px;pointer-events:none}

hr{border:none;border-top:1px solid var(--border);margin:20px 0}

/* Dezente Erklär-/Hilfeboxen im Backend */
.help-box{background:#f7f9fc;border:1px solid var(--border);border-left:3px solid var(--primary-ink);
  border-radius:8px;padding:12px 14px;margin:0 0 16px;color:var(--text);font-size:.9rem}
.help-box h2{margin:0 0 8px;font-size:1rem}
.help-box p{margin:0 0 6px}
.help-box ol{margin:6px 0 0;padding-left:1.2em}
.help-box li{margin:0 0 4px}
.help-box :last-child{margin-bottom:0}
.help-note{color:var(--muted);font-size:.88rem;margin:0 0 14px}
.btn.is-copied{background:var(--ok);color:#fff;border-color:var(--ok)}

/* Seitentexte-Editor */
.text-field{margin:0 0 18px;padding:0 0 14px;border-bottom:1px dashed var(--border)}
.text-field label{margin-bottom:4px}
.text-field textarea{margin-top:5px;resize:vertical;min-height:64px;font-family:inherit;line-height:1.45}
.field-help{display:block;color:var(--muted);font-size:.82rem;margin-top:5px}
.below-form{margin-top:14px}
textarea{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:8px;font-size:1rem;background:#fff;color:var(--text)}