/* Nuvio Admin – Farben und Schrift wie im Entwurf „Nuvio Admin – Entwurf“ */
@font-face { font-family: 'Plex'; src: url(schrift/plex-sans-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex'; src: url(schrift/plex-sans-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Plex'; src: url(schrift/plex-sans-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plex'; src: url(schrift/plex-sans-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'PlexMono'; src: url(schrift/plex-mono-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --navy: #0A2744;
  --navy-hell: #16395F;
  --navy-linie: #1F4670;
  --blau: #2680F7;
  --blau-dunkel: #1A5FBF;
  --blau-flaeche: #E8F2FF;
  --text: #0B1930;
  --text-leise: #56657A;
  --text-nav: #C9D6E5;
  --grund: #F5F7FA;
  --karte: #FFFFFF;
  --linie: #E6EBF1;
  --gruen: #12663A;
  --gruen-flaeche: #E3F6EC;
  --rot: #B3202F;
  --rot-linie: #F0B8BF;
  --rot-flaeche: #FDECEE;
  --gelb: #8A5A00;
  --gelb-flaeche: #FFF1DB;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Plex', system-ui, sans-serif; color: var(--text); background: var(--grund); font-size: 15px; line-height: 1.45; }
a { color: var(--blau); }
a:hover { color: var(--navy); }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 600; }
p { margin: 0; }
.mono { font-family: 'PlexMono', ui-monospace, monospace; }
.leise { color: var(--text-leise); }
.klein { font-size: 13px; }
.noscript { padding: 24px; }
[hidden] { display: none !important; }

/* ---------- Knöpfe und Felder ---------- */
button, .knopf {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; border-radius: 10px; padding: 11px 18px; min-height: 44px;
  border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
button:disabled { opacity: .55; cursor: default; }
.k-haupt { background: var(--navy); color: #fff; }
.k-haupt:hover:not(:disabled) { background: var(--navy-hell); }
.k-zweit { background: #fff; color: var(--navy); border-color: #C9D3DF; }
.k-zweit:hover:not(:disabled) { border-color: var(--navy); }
.k-gefahr { background: #fff; color: var(--rot); border-color: var(--rot-linie); }
.k-gefahr:hover:not(:disabled) { background: var(--rot-flaeche); }
.k-text { background: none; color: var(--blau); padding: 8px 6px; min-height: 0; border: 0; }
.k-text:hover { color: var(--navy); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }

.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label { font-weight: 600; font-size: 14px; }
.feld .hilfe { font-size: 13px; color: var(--text-leise); }
input, select {
  font: inherit; font-size: 16px; color: var(--text); background: #fff; border: 1px solid #C9D3DF; border-radius: 10px;
  padding: 10px 12px; min-height: 44px; width: 100%;
}
input:focus, select:focus { border-color: var(--blau); outline: none; box-shadow: 0 0 0 3px rgba(38,128,247,.18); }
input[aria-invalid="true"] { border-color: var(--rot); }
.fehler { color: var(--rot); background: var(--rot-flaeche); border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.erfolg { color: var(--gruen); background: var(--gruen-flaeche); border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.formular { display: flex; flex-direction: column; gap: 16px; }
.reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Anmeldeseiten ---------- */
.anmelden { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--navy); }
.anmelden-karte { width: 100%; max-width: 440px; background: #fff; border-radius: 18px; padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; }
.marke { display: flex; align-items: center; gap: 12px; }
.marke-n { width: 40px; height: 40px; border-radius: 10px; background: #3F8CFF; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; flex: none; }
.marke-text { display: flex; flex-direction: column; }
.marke-text b { font-size: 18px; }
.qr { display: flex; justify-content: center; padding: 12px; border: 1px solid var(--linie); border-radius: 12px; background: #fff; }
.qr svg { width: 200px; height: 200px; }
.geheimnis { font-family: 'PlexMono', monospace; font-size: 14px; word-break: break-all; background: var(--grund); padding: 10px 12px; border-radius: 8px; }
.code-eingabe { font-family: 'PlexMono', monospace; font-size: 24px; letter-spacing: 6px; text-align: center; }

/* ---------- Hauptbereich ---------- */
.rahmen { min-height: 100vh; display: flex; flex-wrap: wrap; }
.nav { flex: 1 1 240px; max-width: 100%; background: var(--navy); color: #fff; padding: 24px 18px; display: flex; flex-direction: column; gap: 24px; }
.nav .marke-text span { font-size: 13px; color: #A9BBD1; }
.nav-liste { display: flex; flex-direction: column; gap: 4px; }
.nav-liste button { justify-content: flex-start; background: none; color: var(--text-nav); font-weight: 500; padding: 11px 14px; border-radius: 8px; width: 100%; text-align: left; }
.nav-liste button:hover { background: var(--navy-hell); color: #fff; }
.nav-liste button[aria-current="page"] { background: var(--navy-hell); color: #fff; font-weight: 600; }
.nav-unten { margin-top: auto; border-top: 1px solid var(--navy-linie); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.nav-person { font-size: 14px; }
.nav-person span { display: block; color: #A9BBD1; font-size: 13px; }
.nav-unten .k-abmelden { background: none; color: var(--text-nav); border-color: var(--navy-linie); width: 100%; }
.nav-unten .k-abmelden:hover { color: #fff; border-color: #fff; }
.inhalt { flex: 999 1 560px; min-width: 0; padding: 32px 40px 56px; display: flex; flex-direction: column; gap: 24px; }
.kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.kopf-text { display: flex; flex-direction: column; gap: 4px; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.kachel { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.kachel .zahl { font-family: 'PlexMono', monospace; font-size: 34px; font-weight: 500; }
.zwei-spalten { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.zwei-spalten > * { flex: 1 1 380px; }

.tabelle-box { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--text-leise); font-weight: 500; padding: 10px 8px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
td { padding: 12px 8px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.klickbar { cursor: pointer; }
tr.klickbar:hover td { background: #F8FAFD; }
td .name-knopf { background: none; border: 0; padding: 0; min-height: 0; font-weight: 600; color: var(--text); text-align: left; }
td .name-knopf:hover { color: var(--blau); text-decoration: underline; }

.marker { display: inline-block; padding: 4px 9px; border-radius: 999px; font-weight: 600; font-size: 12px; white-space: nowrap; }
.m-gruen { background: var(--gruen-flaeche); color: var(--gruen); }
.m-blau { background: var(--blau-flaeche); color: var(--blau-dunkel); }
.m-gelb { background: var(--gelb-flaeche); color: var(--gelb); }
.m-rot { background: var(--rot-flaeche); color: var(--rot); }
.m-grau { background: #EEF1F5; color: var(--text-leise); }

.suche { max-width: 320px; }
.leer { color: var(--text-leise); padding: 20px 0; text-align: center; }

/* ---------- Detail ---------- */
.zurueck { align-self: flex-start; }
.person-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.person-name { display: flex; align-items: center; gap: 14px; }
.avatar { width: 48px; height: 48px; border-radius: 999px; background: var(--blau-flaeche); color: var(--navy); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
dl.daten { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 10px 16px; margin: 0; font-size: 14px; }
dl.daten dt { color: var(--text-leise); }
dl.daten dd { margin: 0; overflow-wrap: anywhere; }
.rollen-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.rolle { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--linie); border-radius: 10px; padding: 14px; cursor: pointer; }
.rolle:has(input:checked:not(:disabled)) { border-color: var(--blau); background: var(--blau-flaeche); }
.rolle input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: none; }
.rolle .rolle-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rolle .rolle-text b { font-weight: 600; }
.rolle select { margin-top: 8px; font-size: 14px; min-height: 40px; padding: 6px 10px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 600; font-size: 15px; margin-bottom: 10px; padding: 0; }

/* ---------- Dialog ---------- */
dialog { border: 0; border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); color: var(--text); }
dialog::backdrop { background: rgba(10, 39, 68, .55); }
.dialog-innen { padding: 26px 24px; display: flex; flex-direction: column; gap: 18px; }
.code-gross { font-family: 'PlexMono', monospace; font-size: 30px; letter-spacing: 2px; text-align: center; background: var(--grund); border: 2px dashed #C9D3DF; border-radius: 12px; padding: 18px 10px; user-select: all; }
.warnung { display: flex; gap: 12px; align-items: flex-start; background: var(--gelb-flaeche); color: #5C3C00; border-radius: 12px; padding: 14px 16px; font-size: 14px; }

.hinweis { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 14px; max-width: calc(100vw - 32px); z-index: 10; }

@media (max-width: 720px) {
  .inhalt { padding: 24px 16px 48px; }
  .nav { padding: 18px 16px; gap: 16px; }
  .nav-liste { flex-direction: row; flex-wrap: wrap; }
  .nav-liste button { width: auto; }
  .nav-unten { margin-top: 0; }
  dl.daten { grid-template-columns: 1fr; gap: 2px 0; }
  dl.daten dd { margin-bottom: 10px; }
  h1 { font-size: 24px; }
}

@media print {
  .nav, .aktionen, .zurueck { display: none !important; }
  body { background: #fff; }
}