/* NHR-Board · Mac-Oberfläche. Farben und Maße aus design/paket/README.md und „F8 Mac Stammdaten".
   Lime #E4FF00 = NHR-Gelb, immer mit schwarzer Schrift. Kein nowrap bei Sätzen (X3). */
@font-face { font-family: Archia; src: url("/schrift/archia-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Archia; src: url("/schrift/archia-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Archia; src: url("/schrift/archia-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Archia; src: url("/schrift/archia-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --tinte: #1A0F4A; --violett: #5B2FE4; --violett-dunkel: #3A1C9E; --zart: #EEE9FD; --lime: #E4FF00;
  --rand: #DCD5F5; --rand-hell: #ECE8F8; --linie: #F3F1F8; --flaeche: #FBFAFE; --grau: #4A4A55; --grau-hell: #9A99A8; --knopf-rand: #CFC3F7;
  --ok-bg: #E2F5EC; --ok: #14613F; --warn-bg: #FFF4C2; --warn: #6B5500; --err-bg: #FBE7E4; --err: #A1271D; --neu-bg: #EFEDF5; --neu: #4A4A55;
  --gruen: #1E9E62; --gelb: #D9A400; --rot: #C43B2E;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: Archia, system-ui, sans-serif; font-size: 14px; color: var(--tinte); background: var(--flaeche); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; color: inherit; font-size: inherit; }
a { color: var(--violett-dunkel); }
[hidden] { display: none !important; }
.umgebungsband { position: sticky; top: 0; z-index: 100; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0 12px; background: var(--lime); color: #000; font-weight: 700; }
body[data-umgebung="test"] aside.schublade { top: 32px; }

/* ---------- Anmeldung ---------- */
.login { max-width: 380px; margin: 12vh auto; display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #fff; border: 1px solid var(--rand-hell); border-radius: 16px; box-shadow: 0 30px 80px rgba(26,15,74,.12); }
.login h1 { margin: 0 0 4px; font-size: 22px; }
.login label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 13px; }
.login input { height: 44px; padding: 0 12px; border: 1.5px solid var(--rand); border-radius: 10px; }
.fehler:not(:where(.ipad-rahmen *)) { color: var(--err); font-weight: 700; margin: 0; }

/* ---------- Rahmen ---------- */
#app { display: flex; height: 100vh; }
body[data-umgebung="test"] #app { height: calc(100vh - 32px); }
nav.haupt { width: 236px; flex: none; display: flex; flex-direction: column; gap: 16px; padding: 20px 14px; background: #fff; border-right: 1px solid var(--rand-hell); overflow-y: auto; }
.marke { display: flex; align-items: center; gap: 10px; padding: 0 8px 4px; }
.marke img { height: 34px; width: auto; }
.marke b { display: block; font-size: 17px; }
.marke small { font-size: 12px; color: var(--grau); }
.navgruppe { display: flex; flex-direction: column; gap: 2px; }
.navgruppe > span { padding: 0 10px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.navpunkt { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; font-weight: 500; color: #2E2A3D; }
.navpunkt:hover { background: var(--flaeche); }
.navpunkt[aria-current="page"] { background: var(--zart); color: var(--violett-dunkel); font-weight: 700; }
.navpunkt:disabled { cursor: not-allowed; color: var(--grau-hell); }
.navpunkt .zahl { margin-left: auto; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--warn-bg); color: var(--warn); }
.navpunkt .spaeter { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--grau-hell); }
.navfuss { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 10px 0; border-top: 1px solid var(--rand-hell); font-size: 12.5px; color: var(--grau); }
.navfuss img { height: 18px; width: auto; vertical-align: middle; }
.punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); margin-right: 6px; }
.punkt.aus { background: var(--rot); }
.inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
header.kopf { height: 66px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--rand-hell); position: relative; }
header.kopf h1 { margin: 0; font-size: 21px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suche { position: relative; flex: 0 1 300px; min-width: 170px; margin-left: auto; }
.suche input { width: 100%; height: 42px; padding: 0 14px; border: 1.5px solid var(--rand); border-radius: 10px; background: #fff; }
.suche input:focus { border-color: var(--violett); outline: none; }
.treffer { position: absolute; top: 48px; left: 0; right: 0; z-index: 30; display: flex; flex-direction: column; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 14px 40px rgba(26,15,74,.22); border: 1px solid var(--rand-hell); }
.treffer button { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 4px 10px; border: 0; border-radius: 8px; background: #fff; text-align: left; cursor: pointer; }
.treffer button:hover, .treffer button:focus { background: #F6F4FD; outline: none; }
.uhr { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.live { font-size: 13px; font-weight: 700; color: var(--ok); }
.live.aus { color: var(--err); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--zart); color: var(--violett-dunkel); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border: 0; cursor: pointer; }
main.seite { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px 28px 22px; overflow: auto; }
.was { flex: none; padding: 10px 16px; border-radius: 12px; background: var(--zart); color: var(--violett-dunkel); font-size: 13.5px; font-weight: 600; }
.hinweisleiste { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--err-bg); color: var(--err); font-weight: 600; }

/* ---------- Bausteine ---------- */
.karte:not(:where(.ipad-rahmen *)) { background: #fff; border: 1px solid var(--rand-hell); border-radius: 14px; }
.pill:not(:where(.ipad-rahmen *)) { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pill.ok:not(:where(.ipad-rahmen *)) { background: var(--ok-bg); color: var(--ok); } .pill.warn:not(:where(.ipad-rahmen *)) { background: var(--warn-bg); color: var(--warn); }
.pill.err:not(:where(.ipad-rahmen *)) { background: var(--err-bg); color: var(--err); } .pill.neu:not(:where(.ipad-rahmen *)) { background: var(--neu-bg); color: var(--neu); }
.pill.ticket-basic:not(:where(.ipad-rahmen *)) { background: var(--zart); color: var(--violett-dunkel); } .pill.ticket-pro:not(:where(.ipad-rahmen *)) { background: var(--violett); color: #fff; }
.pill.ticket-team:not(:where(.ipad-rahmen *)), .pill.ticket-gast:not(:where(.ipad-rahmen *)) { background: var(--neu-bg); color: var(--neu); } .pill.zart:not(:where(.ipad-rahmen *)) { background: var(--zart); color: var(--violett-dunkel); }
.pill.lime:not(:where(.ipad-rahmen *)) { background: var(--lime); color: #000; }
.knopf { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--knopf-rand); background: #fff; color: var(--violett-dunkel); font-weight: 700; cursor: pointer; }
.knopf.haupt { border: 0; background: var(--violett); color: #fff; }
.knopf.gefahr { border: 0; background: var(--rot); color: #fff; }
.knopf.leise { border: 0; background: transparent; color: var(--err); }
.knopf.zart { border: 0; background: var(--zart); color: var(--violett-dunkel); min-height: 34px; font-size: 13px; }
.knopf:disabled { cursor: not-allowed; opacity: .55; }
.knopf.klein { min-height: 34px; font-size: 13px; padding: 0 12px; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rand); background: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--violett); background: var(--violett); color: #fff; }
.chip small { font-weight: 500; opacity: .75; font-size: 13px; }
.etikett { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.leer:not(:where(.ipad-rahmen *)) { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 24px; text-align: center; color: var(--grau); }
.leer:not(:where(.ipad-rahmen *)) b { font-size: 18px; color: var(--tinte); }
.feld:not(:where(.ipad-rahmen *)) { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 700; color: #2E2A3D; min-width: 0; }
.feld:not(:where(.ipad-rahmen *)) input, .feld:not(:where(.ipad-rahmen *)) select, .feld:not(:where(.ipad-rahmen *)) textarea, input.eingabe, select.eingabe { min-height: 42px; padding: 0 12px; border: 1.5px solid var(--rand); border-radius: 10px; font-size: 14px; font-weight: 500; background: #fff; min-width: 0; width: 100%; }
.feld:not(:where(.ipad-rahmen *)) textarea { padding: 10px 12px; min-height: 64px; resize: vertical; }
.feld:not(:where(.ipad-rahmen *)) input:focus, .feld:not(:where(.ipad-rahmen *)) select:focus, .feld:not(:where(.ipad-rahmen *)) textarea:focus { border-color: var(--violett); outline: none; }
.feld.fehlt:not(:where(.ipad-rahmen *)) input, .feld.fehlt:not(:where(.ipad-rahmen *)) select { border-color: var(--rot); }
.feld:not(:where(.ipad-rahmen *)) small { font-weight: 500; color: var(--grau); }
.wahl { display: flex; flex-direction: column; gap: 7px; }
.wahl > span { font-size: 12.5px; font-weight: 700; color: #2E2A3D; }
.wahl > div { display: flex; gap: 6px; flex-wrap: wrap; }
.wahl label { display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--rand); background: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl label:has(input:checked) { border-color: var(--violett); background: var(--violett); color: #fff; }
.wahl label:has(input:focus-visible) { outline: 2px solid var(--violett-dunkel); outline-offset: 2px; }
.raster2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.raster3 { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr) minmax(0,1fr); gap: 10px; }
.kasten { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--rand-hell); }
.kasten.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.kasten.ok { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.kasten.err { background: var(--err-bg); border-color: transparent; color: var(--err); }
.kasten.violett { background: #F6F4FD; border-color: var(--rand); }
.kasten b.gross { font-size: 15px; color: var(--tinte); }
.pruefung { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ok); }
.pruefung::before { content: "✓"; width: 20px; height: 20px; border-radius: 50%; background: var(--gruen); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.pruefung.warn { color: var(--warn); } .pruefung.warn::before { content: "!"; background: var(--gelb); }
.pruefung.err { color: var(--err); } .pruefung.err::before { content: "!"; background: var(--rot); }
.haken:not(:where(.ipad-rahmen *)) { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 14px; border-radius: 12px; border: 1.5px solid var(--rand); background: #fff; font-weight: 600; cursor: pointer; }
.haken:not(:where(.ipad-rahmen *)) input { width: 22px; height: 22px; accent-color: var(--violett); flex: none; }

/* ---------- Übersicht ---------- */
.ueb-oben { display: grid; grid-template-columns: minmax(0,1.3fr) repeat(3, minmax(0,1fr)); gap: 16px; }
.held { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 22px; border-radius: 14px; border: 0; background: var(--zart); text-align: left; cursor: pointer; min-height: 150px; }
.held .klein { font-size: 13px; font-weight: 700; color: var(--violett-dunkel); }
.held .riesig { font-size: 44px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.held img { position: absolute; right: -10px; bottom: -18px; height: 118px; width: auto; opacity: .9; pointer-events: none; }
.kennzahl { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--rand-hell); background: #fff; text-align: left; cursor: pointer; }
.kennzahl .gross { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kennzahl small { font-size: 13px; color: var(--grau); }
.ueb-unten { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.bedarf button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 6px 20px; border: 0; border-bottom: 1px solid var(--linie); background: #fff; text-align: left; cursor: pointer; }
.bedarf button:hover { background: var(--flaeche); }
.bedarf .ziel { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--violett-dunkel); }
.kartenkopf { padding: 16px 20px; font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--rand-hell); }
.balken:not(:where(.ipad-rahmen *)) { display: block; width: 100%; height: 8px; border-radius: 999px; background: var(--neu-bg); overflow: hidden; }
.balken:not(:where(.ipad-rahmen *)) i { display: block; height: 100%; border-radius: 999px; background: var(--violett); }
.stand-zeile { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; width: 100%; }

/* ---------- Personenliste ---------- */
.filterzeile { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trenner { width: 1px; height: 26px; background: var(--rand); margin: 0 4px; }
.werkzeuge { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.werkzeuge .eingabe { width: 280px; height: 40px; }
.auswahlleiste { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-radius: 12px; background: var(--tinte); color: #fff; }
.auswahlleiste .knopf { border: 0; background: rgba(255,255,255,.14); color: #fff; min-height: 36px; }
.auswahlleiste .knopf.lime { background: var(--lime); color: #000; }
.tabelle { flex: 1; min-height: 240px; display: flex; flex-direction: column; overflow: hidden; }
.tabelle .rollbar { flex: 1; min-height: 0; overflow: auto; }
.tabelle table { width: 100%; border-collapse: collapse; }
.tabelle thead th { position: sticky; top: 0; z-index: 2; background: #fff; border-bottom: 1px solid var(--rand-hell); height: 44px; padding: 0 8px; text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); white-space: nowrap; }
.tabelle thead th button { border: 0; background: transparent; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.tabelle thead th button i { font-style: normal; color: var(--violett); font-size: 10px; margin-left: 3px; }
.tabelle tbody tr { border-bottom: 1px solid var(--linie); cursor: pointer; }
.tabelle tbody tr:hover { background: var(--flaeche); }
.tabelle tbody tr.gewaehlt { background: #F6F2FF; }
.tabelle td { padding: 6px 8px; height: 54px; font-size: 13.5px; vertical-align: middle; }
.tabelle td.name b { display: block; font-size: 15px; }
.tabelle td.name small { color: var(--grau); font-size: 12.5px; }
.tabelle td.box, .tabelle th.box { width: 52px; text-align: center; }
.tabelle input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--violett); cursor: pointer; }
.tabellenfuss { flex: none; display: flex; gap: 14px; padding: 10px 18px; font-size: 12.5px; color: var(--grau); border-top: 1px solid var(--linie); }
.bandpunkt { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--grau-hell); vertical-align: middle; margin-right: 6px; }
.bandpunkt.gelb { background: var(--lime); } .bandpunkt.schwarz { background: #0A0A0A; } .bandpunkt.weiss { background: #fff; }
.symbol-hinweis { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: var(--warn-bg); color: var(--warn); align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-left: 6px; }
.rot:not(:where(.ipad-rahmen *)) { color: var(--err); }

/* ---------- Schublade und Dialog ---------- */
.dunkel:not(:where(.ipad-rahmen *)) { position: fixed; inset: 0; border: 0; background: rgba(26,15,74,.28); z-index: 40; cursor: pointer; }
aside.schublade { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100vw; z-index: 41; display: flex; flex-direction: column; background: #fff; box-shadow: -12px 0 40px rgba(26,15,74,.2); }
@media (min-width: 1800px) { aside.schublade { width: 640px; } }
.schublade-kopf { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 20px 24px 16px; border-bottom: 1px solid var(--rand-hell); }
.schublade-kopf .zeile { display: flex; align-items: flex-start; gap: 12px; }
.schublade-kopf .titel { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.schublade-kopf .titel b { font-size: 28px; line-height: 1.05; }
.schublade-kopf .titel span { font-size: 15px; color: var(--grau); }
.zu { width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid var(--rand-hell); background: #fff; cursor: pointer; font-size: 18px; font-weight: 700; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.schublade-inhalt { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 22px; padding: 20px 24px 28px; }
.schublade-fuss { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--rand-hell); flex-wrap: wrap; }
.schublade-fuss .knopf { min-height: 44px; }
section.abschnitt { display: flex; flex-direction: column; gap: 10px; }
section.abschnitt > .kopfzeile { display: flex; align-items: center; gap: 8px; }
section.abschnitt > .kopfzeile .etikett { flex: 1; letter-spacing: .08em; }
dl.daten { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 8px 12px; margin: 0; font-size: 13.5px; line-height: 1.35; }
dl.daten dt { color: var(--grau); }
dl.daten dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
dl.daten dd.leise { color: var(--grau-hell); } dl.daten dd.rot { color: var(--err); }
.dokumente { display: flex; flex-direction: column; padding: 6px 14px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--rand-hell); }
.dokumente div { display: flex; align-items: center; gap: 10px; min-height: 38px; font-size: 13.5px; }
.dokumente div span:first-child { flex: 1; font-weight: 600; }
.dokumente a.dok-pdf { display: inline-flex; align-items: center; text-decoration: none; }
.schritte { display: flex; flex-direction: column; gap: 10px; }
.schritt { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; }
.schritt > i { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--rand); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--grau-hell); }
.schritt.fertig > i { border-color: var(--violett); background: var(--violett); color: #fff; }
.schritt.jetzt > i { border-color: var(--violett); color: var(--violett); }
.schritt small { display: block; color: var(--grau); font-weight: 500; }
.notiz:not(:where(.ipad-rahmen *)) { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--rand-hell); font-size: 13.5px; line-height: 1.4; }
.notiz:not(:where(.ipad-rahmen *)) small { color: var(--grau); font-size: 12px; }
.notiz.intern:not(:where(.ipad-rahmen *)) { border-color: var(--rand); background: #F6F4FD; }
.verlauf { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 6px 12px; font-size: 13px; }
.verlauf span:nth-child(odd) { color: var(--grau); font-variant-numeric: tabular-nums; }
.zeilenvorschau { display: grid; grid-template-columns: 150px minmax(0,1fr); border-radius: 9px; background: #fff; border: 1px solid var(--rand-hell); overflow: hidden; font-size: 12.5px; color: var(--tinte); }
.zeilenvorschau span { padding: 4px 10px; border-bottom: 1px solid var(--linie); }
.zeilenvorschau span:nth-child(odd) { color: var(--grau); }
.zeilenvorschau span:nth-child(even) { font-weight: 600; overflow-wrap: anywhere; }
.zeilenvorschau .leerzelle { color: var(--grau-hell); font-weight: 500; font-style: italic; }
.stand:not(:where(.ipad-rahmen *)) { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--rand-hell); background: #fff; text-align: left; cursor: pointer; width: 100%; }
.stand[aria-pressed="true"]:not(:where(.ipad-rahmen *)) { border-color: var(--violett); background: #F6F4FD; }
.stand:not(:where(.ipad-rahmen *)) .alt { text-decoration: line-through; color: var(--err); }
.stand:not(:where(.ipad-rahmen *)) .neu { color: var(--ok); font-weight: 600; }
.dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 51; width: 640px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px rgba(26,15,74,.3); overflow: hidden; }
.dialog > header { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--rand-hell); font-size: 19px; font-weight: 700; }
.dialog > header span { flex: 1; }
.dialog > div { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.dialog > footer { display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--rand-hell); }
.spaltenwahl { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.spaltenwahl label { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--rand-hell); font-weight: 600; cursor: pointer; }
.spaltenwahl input { width: 18px; height: 18px; accent-color: var(--violett); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 10px 0 20px; border-radius: 14px; background: var(--tinte); color: #fff; box-shadow: 0 12px 30px rgba(26,15,74,.3); max-width: 760px; font-weight: 600; }
.toast button { min-height: 36px; padding: 0 12px; border-radius: 9px; border: 0; background: rgba(255,255,255,.14); color: #fff; font-weight: 700; cursor: pointer; }
.toast.fehler { background: var(--err); }

/* ---------- Klärliste ---------- */
.klaer { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 16px; }
.klaer > .karte { overflow: auto; }
.klaer .gruppe { padding: 14px 18px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.klaer .fall { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 18px; border: 0; border-top: 1px solid var(--linie); text-align: left; cursor: pointer; background: #fff; }
.klaer .fall[aria-current="true"] { background: var(--zart); }
.klaer .fall b { display: block; font-size: 14.5px; }
.klaer .fall small { font-size: 12.5px; color: var(--grau); }
.klaer .detail { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; }
.klaer .detail h2 { margin: 0; font-size: 20px; line-height: 1.2; }
.vergleich { display: grid; border-radius: 12px; border: 1px solid var(--rand-hell); overflow: hidden; font-size: 13.5px; }
.vergleich span { padding: 8px 10px; border-bottom: 1px solid var(--linie); }
.vergleich .kopf { background: var(--flaeche); font-size: 12px; font-weight: 700; color: var(--violett-dunkel); }
.vergleich .feldname { color: var(--grau); }
.vergleich .wert { font-weight: 600; }
.vergleich .anders { background: var(--warn-bg); color: var(--warn); }
.option { min-height: 48px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid var(--knopf-rand); background: #fff; color: var(--violett-dunkel); font-size: 14.5px; font-weight: 700; text-align: left; cursor: pointer; }
.option:disabled { color: var(--grau-hell); border-color: var(--rand-hell); cursor: not-allowed; }

/* ---------- Verwaltung ---------- */
.reiter { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 12px; background: #F3F1F8; align-self: flex-start; }
.reiter button { min-height: 38px; padding: 0 14px; border-radius: 9px; border: 0; background: transparent; color: var(--violett-dunkel); font-weight: 700; cursor: pointer; }
.reiter button[aria-pressed="true"] { background: var(--violett); color: #fff; }
.liste-einfach { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.liste-einfach th { text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); padding: 10px 12px; border-bottom: 1px solid var(--rand-hell); }
.liste-einfach td { padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.einstellung { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--linie); }
.einstellung.geaendert { background: var(--warn-bg); }
.einstellung code { font-size: 12px; color: var(--grau); }
.pin-anzeige { font-size: 34px; font-weight: 700; letter-spacing: .3em; font-variant-numeric: tabular-nums; }

/* ---------- Druck (B8): NHR-Gestaltung, Titel mit Filter, Datum, Seitenzahlen ---------- */
#druck { display: none; }
@page { size: A4 landscape; margin: 14mm 12mm 16mm; @bottom-right { content: counter(page) " / " counter(pages); font-family: Archia, sans-serif; font-size: 9pt; color: #4A4A55; } }
@media print {
  body { background: #fff; }
  body > *:not(#druck) { display: none !important; }
  #druck { display: block; font-size: 10pt; }
  #druck .druckkopf { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--tinte); margin-bottom: 8px; }
  #druck .druckkopf img { height: 28px; }
  #druck .druckkopf b { font-size: 14pt; display: block; }
  #druck .druckkopf small { font-size: 9pt; color: var(--grau); }
  #druck table { width: 100%; border-collapse: collapse; }
  #druck thead { display: table-header-group; }
  #druck th { text-align: left; font-size: 8pt; letter-spacing: .05em; text-transform: uppercase; color: var(--grau); border-bottom: 1px solid var(--rand); padding: 4px 6px; }
  #druck td { padding: 4px 6px; border-bottom: 1px solid var(--linie); }
  #druck tr { break-inside: avoid; }
  #druck .druckfuss { margin-top: 8px; font-size: 8pt; color: var(--grau); }
}

/* ---------- Mails (Prototyp „F8 Mac Mails“) ---------- */
.mails { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 16px; }
.mails .links { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: auto; }
.mails .vorlage { display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--linie); background: #fff; text-align: left; cursor: pointer; }
.mails .vorlage[aria-current="true"] { background: var(--zart); }
.mails .vorlage b { font-size: 14px; }
.mails .vorlage small { font-size: 12.5px; color: var(--grau); }
.mails .vorlage .pill { font-size: 11.5px; padding: 2px 8px; }
.mails .rechts { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mails .leiste { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--rand-hell); }
.mails .rumpf { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--rand-hell); }
.mails .editor { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.mails .editor textarea { min-height: 240px; font-family: inherit; font-size: 14px; line-height: 1.55; }
.mails .vorschau { display: flex; flex-direction: column; gap: 10px; min-height: 100%; padding: 16px 18px; background: #F5F3FC; box-sizing: border-box; }
.mails .vorschau iframe { align-self: center; width: 100%; max-width: 680px; height: 1100px; border: 0; border-radius: 12px; background: #F5F3FC; }
.mails .fuss { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--rand-hell); }
.mails .band { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--rand-hell); font-size: 14px; font-weight: 700; }
.mails .band.offen { background: var(--warn-bg); color: var(--warn); }
.mails .band.frei { background: var(--ok-bg); color: var(--ok); }
.mails .band.abgelehnt { background: var(--err-bg); color: var(--err); }
.mails .band.verfallen { background: #EFEDF5; color: var(--grau); }
.mails .platz { min-height: 30px; padding: 0 9px; border-radius: 999px; border: 0; background: var(--zart); color: var(--violett-dunkel); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.mails .fassung { display: flex; align-items: center; gap: 10px; min-height: 40px; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 13px; }
.mails .fassung:disabled { cursor: default; }
.mails .fassung .betreff { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2E2A3D; }
.empf { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 4px; border: 0; border-top: 1px solid var(--linie); background: #fff; text-align: left; cursor: pointer; }
.empf > span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.empf small { font-size: 12.5px; color: var(--grau); }
.freigabeband { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--warn-bg); color: var(--warn); font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.pm-vorschau { width: 100%; height: 760px; border: 0; border-radius: 12px; background: #F5F3FC; }
.mails .fuss > .knopf.haupt { margin-left: auto; }

/* ---------- Namensschilder (I5, I8, I9; Prototyp „F9 Mac Event") ---------- */
.schilder { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 16px; }
@media (min-width: 1800px) { .schilder { grid-template-columns: minmax(0,1fr) 400px; } }
.schilder .links { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.schilder .rechts { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; }
.karte.spalte:not(:where(.ipad-rahmen *)) { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; }
.knopf.gruen { border-color: var(--gruen); color: var(--ok); }
.zeile-ok { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--ok); }
.zeile-ok .knopf { margin-left: auto; }
.warnfarbe { color: var(--warn); }
/* Vorschau 100 × 120 mm in 300 × 360 px; Band-Gelb ist NHR-Gelb (I9), Team lavendel wie 2023 (I5) */
.schild-vorschau { align-self: center; width: 300px; height: 360px; flex: none; display: flex; flex-direction: column; background: #fff; box-shadow: 0 2px 12px rgba(26,15,74,.18); border-radius: 3px; overflow: hidden; color: #1A1A22; }
.schild-vorschau .name { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 15px; }
.schild-vorschau .ruf, .etikett-vorschau .ruf { font-weight: 700; line-height: 1; white-space: nowrap; }
.schild-vorschau .nach { font-size: 17px; font-weight: 500; }
.schild-vorschau .block { height: 150px; flex: none; position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; background: #1A1A22; color: #fff; }
.schild-vorschau .block.team, .schild-vorschau .block.trainer { background: #9497D6; color: #1A1A22; }
.schild-vorschau .block.assistant_trainer { background: var(--lime); color: #000; }
.schild-vorschau .block.gast { background: #EFEDF5; color: #1A1A22; }
.schild-vorschau .kat { font-size: 58px; font-weight: 700; line-height: 1; text-align: center; }
.schild-vorschau .block.assistant_trainer .kat, .schild-vorschau .block.trainer .kat { font-size: 34px; }
.schild-vorschau .kreise { position: absolute; top: -22px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.schild-vorschau .kreise span { width: 44px; height: 44px; border-radius: 50%; background: #1A1A22; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.etikett-vorschau { align-self: center; width: 300px; height: 186px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #fff; border: 1px dashed var(--knopf-rand); border-radius: 8px; color: #1A1A22; }
.etikett-vorschau .nach { font-size: 18px; font-weight: 500; }
@media print {
  #druck .druck-etikett { width: 100mm; height: 62mm; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2mm; break-after: page; overflow: hidden; color: #000; }
  #druck .druck-etikett:last-child { break-after: auto; }
  #druck .druck-etikett .ruf { font-weight: 700; line-height: 1; white-space: nowrap; }
  #druck .druck-etikett .nach { font-size: 6mm; font-weight: 500; }
}

/* ---------- Geräte (H3, H4, H12; Prototyp „F10 Mac Event") ---------- */
.geraete { display: flex; flex-direction: column; gap: 14px; }
.zeile:not(:where(.ipad-rahmen *)) { display: flex; align-items: center; gap: 10px; }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.kennzahl.statisch { cursor: default; }
.kennzahl .gross.rot { color: var(--err); } .kennzahl .gross.gruen { color: var(--ok); } .kennzahl .gross.gelb { color: var(--warn); }
.ge-zwei { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.kartenkopf.zeile { display: flex; }
.ge-zeile { display: grid; grid-template-columns: 60px minmax(0, 1.3fr) minmax(0, 1.2fr) 60px minmax(0, 1.2fr); gap: 10px; align-items: center; min-height: 48px; padding: 4px 18px; border-bottom: 1px solid var(--linie); font-size: 13.5px; }
.ge-zeile.vortag { background: var(--err-bg); }
.ge-zeile .nr, .ge-def button:first-child { border: 0; background: transparent; padding: 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--violett-dunkel); text-decoration: underline; cursor: pointer; }
.ge-zeile .person { border: 0; background: transparent; padding: 0; text-align: left; font-weight: 700; color: var(--violett-dunkel); cursor: pointer; }
.fett { font-weight: 700; }
.ge-alle { padding: 20px 18px; font-size: 14px; color: var(--ok); font-weight: 600; }
.ge-verlauf-form { display: flex; align-items: center; gap: 8px; margin: 10px 14px 14px; font-size: 13px; font-weight: 700; flex-wrap: wrap; }
.ge-verlauf-form input { width: 150px; min-height: 34px; }
.ge-verlauf-form small { font-weight: 500; color: var(--grau); }
.ge-verlauf { display: flex; flex-direction: column; gap: 6px; margin: 0 14px 14px; padding: 12px 14px; border-radius: 12px; background: #F6F4FD; border: 1px solid var(--rand); }
.ge-vz { display: grid; grid-template-columns: 110px 170px 60px 80px minmax(0, 1fr); gap: 8px; font-size: 13px; align-items: center; min-height: 30px; border-top: 1px solid var(--rand-hell); }
.ge-abgleich { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-width: 2px; }
.ge-abgleich.ok { border-color: var(--gruen); } .ge-abgleich.err { border-color: var(--rot); }
.ge-rech { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ge-rech > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--flaeche); }
.ge-rech > div.soll { background: var(--zart); }
.ge-rech small { font-size: 12.5px; font-weight: 700; color: var(--grau); }
.ge-rech b { font-size: 24px; font-variant-numeric: tabular-nums; }
.ge-nummern { display: flex; gap: 6px; flex-wrap: wrap; }
.ge-nummern button { min-width: 52px; min-height: 36px; padding: 0 8px; border-radius: 9px; border: 1.5px solid #F3CBC5; background: #fff; color: var(--err); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.ge-nummern button.gefunden { border-color: var(--gruen); background: var(--ok-bg); color: var(--ok); text-decoration: line-through; }
.ge-def { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--err-bg); color: var(--err); font-size: 13px; font-weight: 700; }
.ge-def button:first-child { font-size: 13px; color: var(--err); }
.ge-def .weg { width: 24px; height: 24px; border-radius: 50%; border: 0; background: #fff; color: var(--err); font-weight: 700; cursor: pointer; }

/* ---------- Check-in und Rückgabe (G26, G27, G29; Prototyp „F10 Mac Event") ---------- */
.checkin-mac { display: flex; flex-direction: column; gap: 14px; }
.ci-kopf { flex-wrap: wrap; gap: 12px; align-items: center; }
.ci-kopf small { flex: 1; min-width: 240px; font-size: 13px; color: var(--grau); }
.kpis.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ci-counter { padding: 0; overflow: hidden; gap: 0; }
.ci-counter .kartenkopf { padding: 14px 18px; border-bottom: 1px solid var(--rand-hell); }
.ci-counter .kartenkopf small { font-size: 13px; color: var(--grau); font-weight: 500; }
.ci-zeile { display: grid; grid-template-columns: 96px minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1.1fr) 120px; gap: 12px; padding: 6px 18px; min-height: 54px; align-items: center; border-bottom: 1px solid var(--linie); font-size: 13.5px; }
.ci-zeile.mit-tempo { grid-template-columns: 96px minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1.2fr) 120px; }
.ci-zeile a { font-size: 13px; font-weight: 700; color: var(--violett-dunkel); }
.ci-kopf a.knopf { display: inline-flex; align-items: center; text-decoration: none; }
.ci-zeile.kopf { min-height: 40px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.ci-zeile.schraffur { background: repeating-linear-gradient(135deg, #fff 0 8px, #FBE7E4 8px 16px); }
.ci-zeile .code, .ci-zeile .crew { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ci-zeile .code b { font-size: 16px; }
.ci-zeile small { font-size: 12px; color: var(--grau); font-weight: 500; }
.ci-zeile .status { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ci-zeile .ci-stand, .ci-zeile .tempo { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.ci-zeile .ci-balken { flex: 1; max-width: 110px; height: 8px; border-radius: 99px; background: var(--zart); overflow: hidden; }
.ci-zeile .ci-balken i { display: block; height: 100%; background: var(--violett); }
.checkin-mac i[class^="punkt-"] { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; }
.checkin-mac .punkt-ok { background: var(--gruen); } .checkin-mac .punkt-warn { background: var(--gelb); } .checkin-mac .punkt-err { background: var(--rot); } .checkin-mac .punkt-neu { background: var(--grau-hell); }
.checkin-mac .ton-ok { color: var(--ok); } .checkin-mac .ton-warn { color: var(--warn); } .checkin-mac .ton-err { color: var(--err); } .checkin-mac .ton-neu { color: var(--neu); }
.ci-fuss { display: block; padding: 10px 18px; font-size: 12.5px; color: var(--grau); }
.ci-hinweise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--zart); font-size: 13px; line-height: 1.45; }
.ci-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ci-box { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.ci-titel { display: flex; flex-direction: column; gap: 3px; }
.ci-titel b { font-size: 16px; }
.ci-titel small, .ci-box > small { font-size: 13px; color: var(--grau); }
.ci-schlange { display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--rand-hell); overflow: hidden; }
.ci-schlange button, .ci-treffer button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 12px; border: 0; border-bottom: 1px solid var(--linie); background: #fff; text-align: left; cursor: pointer; }
.ci-schlange button.gewaehlt { background: #F6F4FD; }
.ci-schlange button > span:first-child, .ci-treffer button > span:first-child { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ci-schlange small, .ci-treffer small { font-size: 12.5px; color: var(--grau); }
.ci-leer { padding: 12px; font-size: 13px; color: var(--ok); font-weight: 600; }
.ci-mehr { padding: 8px 12px; color: var(--grau); }
.ci-suche { position: relative; }
.ci-suche input { width: 100%; }
.ci-treffer { position: absolute; top: 46px; left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; border-radius: 12px; background: #fff; border: 1px solid var(--rand); box-shadow: 0 12px 30px rgba(26,15,74,.16); overflow: hidden; }
.ci-treffer .rot { padding: 12px 14px; font-size: 13px; font-weight: 600; }
.ci-karte { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; }
.ci-karte.ton-bg-ok { background: var(--ok-bg); } .ci-karte.ton-bg-err { background: var(--err-bg); } .ci-karte.ton-bg-neu { background: var(--zart); }
.ci-karte .name { flex: 1; font-size: 18px; }
.ci-karte .pill { background: #fff; }
.ci-schild { padding: 8px 10px; border-radius: 9px; background: #fff; font-size: 13px; font-weight: 600; color: var(--violett-dunkel); }
.ci-checks { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.ci-checks span { display: flex; align-items: center; gap: 8px; }
.ci-haken { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ci-haken button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 2px solid var(--rand); background: #fff; color: var(--tinte); font-weight: 700; cursor: pointer; }
.ci-haken button i { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--rand); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; }
.ci-haken button.an { border-color: var(--violett); } .ci-haken button.an i { background: var(--violett); border-color: var(--violett); color: #fff; }
.ci-haken input { width: 110px; }
.ci-gewaehlt { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 0 0 12px; border-radius: 10px; background: #F6F4FD; }
.ci-gewaehlt small { flex: 1; color: var(--grau); font-weight: 500; }
.reiter.voll { align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ci-pa-felder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ci-eintrag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 40px; padding: 4px 12px; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--rand-hell); font-size: 13px; }
.ci-eintrag > span:nth-of-type(2) { flex: 1; color: var(--grau); }
.ci-eintrag.weg { opacity: .55; text-decoration: line-through; }
.kasten.zeile { flex-direction: row; align-items: center; }

/* ---------- Check-in-Monitor (N1, N3–N6, N9; Prototyp „F10 Mac Event", Ansicht monitor) ---------- */
.monitor { display: flex; flex-direction: column; gap: 14px; --mo-code: 26px; --mo-st: 14px; --mo-sub: 12.5px; --mo-zahl: 44px; --mo-zahl2: 28px; --mo-lbl: 13px; --mo-zeile: 44px; }
body.grossbild .monitor { position: fixed; inset: 0; z-index: 60; padding: 22px 26px; background: #F5F3FC; overflow: auto;
  --mo-code: 34px; --mo-st: 17px; --mo-sub: 15px; --mo-zahl: 64px; --mo-zahl2: 38px; --mo-lbl: 15px; --mo-zeile: 54px; }
body.grossbild[data-umgebung="test"] .monitor { top: 32px; }
.mo-oben { gap: 12px; }
.mo-oben small { font-size: 13px; color: var(--grau); }
.mo-marke { height: 40px; width: auto; }
.mo-titel, .mo-uhr { font-size: 24px; }
.mo-uhr { color: var(--grau); font-variant-numeric: tabular-nums; }
.mo-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
body.grossbild .mo-raster { grid-template-columns: minmax(0, 1fr) clamp(400px, 25vw, 480px); }
.mo-links, .mo-rechts { display: flex; flex-direction: column; gap: 12px; }
.mo-legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--mo-sub); font-weight: 600; color: var(--grau); }
.mo-legende span { display: inline-flex; align-items: center; gap: 7px; }
.monitor .mo-punkt { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--grau-hell); }
.monitor .ton-ok .mo-punkt { background: var(--gruen); } .monitor .ton-warn .mo-punkt, .monitor .ton-karte .mo-punkt { background: var(--gelb); }
.monitor .ton-err .mo-punkt { background: var(--rot); } .monitor .ton-zu .mo-punkt { background: var(--grau-hell); }
.monitor svg.wlan { flex: none; color: var(--rot); }
.mo-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mo-kachel { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--rand-hell); background: #fff; }
body.grossbild .mo-kachel { padding: 16px 18px; }
.mo-kachel.ip { grid-column: 2; }
.mo-kachel.ton-err { border-color: #F3CBC5; } .mo-kachel.ton-warn { border-color: #F2DB7A; }
.mo-kachel.ton-karte { border-color: var(--gelb); background: var(--warn-bg); }
.mo-kachel.ton-zu { border-color: #E2DFEA; background: #F6F5FA; }
.mo-kachel.ton-wlan { border-color: #F3CBC5; background: repeating-linear-gradient(135deg, #fff 0 8px, #FBE7E4 8px 16px); }
.mo-kopf { display: flex; align-items: center; gap: 10px; }
.mo-kopf .code { font-size: var(--mo-code); line-height: 1; }
.mo-kopf .mo-punkt { width: 22px; height: 22px; }
.mo-st { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mo-st b { font-size: var(--mo-st); line-height: 1.25; }
.mo-st small { font-size: var(--mo-sub); font-weight: 600; color: #2E2A3D; line-height: 1.3; }
.mo-kachel.ton-ok .mo-st b { color: var(--ok); } .mo-kachel.ton-err .mo-st b, .mo-kachel.ton-wlan .mo-st b { color: var(--err); }
.mo-kachel.ton-warn .mo-st b, .mo-kachel.ton-karte .mo-st b { color: var(--warn); } .mo-kachel.ton-zu .mo-st b { color: var(--grau); }
.mo-stand { display: flex; align-items: center; gap: 10px; }
.mo-stand b { font-size: var(--mo-st); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mo-balken { flex: 1; height: 10px; border-radius: 99px; background: var(--zart); overflow: hidden; }
.mo-balken i { display: block; height: 100%; background: var(--violett); }
.mo-tempo { display: flex; align-items: center; gap: 8px; font-size: var(--mo-sub); font-variant-numeric: tabular-nums; color: #2E2A3D; }
.mo-tempo .pill { font-size: var(--mo-sub); }
.mo-hoch { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; background: var(--tinte); color: #fff; }
.mo-hoch small { font-size: var(--mo-lbl); }
.mo-hoch small:first-child { font-weight: 700; color: #CFC3F7; }
.mo-hoch b { font-size: var(--mo-zahl); line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--lime); }
.mo-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mo-kpi { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--rand-hell); }
.mo-kpi small { font-size: var(--mo-lbl); color: var(--grau); }
.mo-kpi small:first-child { font-weight: 700; }
.mo-kpi b { font-size: var(--mo-zahl2); line-height: 1.05; font-variant-numeric: tabular-nums; }
.mo-kpi b.ton-ok { color: var(--ok); } .mo-kpi b.ton-warn { color: var(--warn); }
.mo-faelle { display: flex; flex-direction: column; border-radius: 16px; background: #fff; border: 1px solid var(--rand-hell); overflow: hidden; }
.mo-faelle-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rand-hell); font-size: 15px; }
.mo-fall { display: flex; align-items: center; gap: 10px; min-height: var(--mo-zeile); padding: 4px 16px; border-bottom: 1px solid var(--linie); }
.mo-fall > span:first-child { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: var(--mo-st); }
.mo-fall small { font-size: var(--mo-sub); color: var(--grau); }
.mo-fall .zeit { font-size: var(--mo-sub); font-variant-numeric: tabular-nums; color: var(--grau); }
.mo-leer { padding: 12px 16px; color: var(--ok); font-weight: 600; }
.mo-crew { overflow: hidden; }
.mo-cz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 90px 120px 130px 120px; gap: 10px; padding: 0 16px; min-height: 40px; align-items: center; border-bottom: 1px solid var(--linie); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.mo-cz.kopf { min-height: 38px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.mo-cz b { color: var(--violett-dunkel); }
.mo-crew-fuss { padding: 10px 16px; }
.mo-crew-fuss small { font-size: 12.5px; color: var(--grau); }
.mo-crew-fuss a.knopf { display: inline-flex; align-items: center; text-decoration: none; }
.mo-hinweis { color: var(--grau); }

/* ---------- Zertifikate (J2, J7; Prototyp „F10 Mac Event", Ansicht zert) ---------- */
.zertifikate { display: flex; flex-direction: column; gap: 14px; }
.zertifikate .kennzahl { border-width: 2px; }
.zertifikate .kennzahl.aktiv { border-color: var(--violett); }
.zt-leiste { flex-wrap: wrap; font-size: 13.5px; color: #2E2A3D; }
.zt-leiste a.knopf { display: inline-flex; align-items: center; text-decoration: none; }
.zt-society { flex-wrap: wrap; padding: 8px 14px; border-radius: 10px; background: var(--zart); }
.zt-society.offen { background: var(--warn-bg); }
.zt-society small { font-size: 12.5px; color: #2E2A3D; }
.zt-society .knopf.warn { border-color: var(--warn); color: var(--warn); font-weight: 700; }
.zt-name .zt-neu { margin-top: 2px; font-size: 11.5px; }
.zt-tabelle { overflow: hidden; }
.zt-zeile { display: grid; grid-template-columns: minmax(0, 1.4fr) 110px minmax(0, 1.1fr) minmax(0, 1.8fr); gap: 12px; align-items: center; min-height: 52px; padding: 6px 18px; border-bottom: 1px solid var(--linie); font-size: 13.5px; }
.zt-zeile.kopf { min-height: 40px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.zt-name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.zt-name .link { border: 0; padding: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--tinte); cursor: pointer; text-align: left; }
.zt-name small { font-size: 12.5px; color: var(--grau); }
.zt-vl { border: 0; padding: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--violett-dunkel); cursor: pointer; }
.zt-knoepfe { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.zt-seg { align-self: auto; }
.zt-seg button { min-height: 32px; font-size: 12.5px; }
.zt-knoepfe .zt-ort { width: 190px; min-height: 34px; } .zt-knoepfe .zt-grund { width: 200px; min-height: 34px; border-color: #F3CBC5; }
.zt-verlaufliste { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; border-radius: 10px; background: var(--flaeche); font-size: 12.5px; color: var(--grau); }
.zt-leer { display: block; padding: 40px 18px; text-align: center; color: var(--grau); }

/* ---------- Infomonitor Foyer (S1; Prototyp „F10 Infomonitor Foyer") ---------- */
.infomonitor { display: flex; flex-direction: column; gap: 14px; }
.infomonitor > .zeile small { font-size: 13px; color: var(--grau); }
.fo-raster { display: grid; grid-template-columns: 270px minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.fo-h { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.fo-liste { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.fo-eintrag { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--rand-hell); background: #fff; text-align: left; cursor: pointer; }
.fo-eintrag.an { border-color: var(--violett); background: #F6F4FD; }
.fo-eintrag span:first-child { display: flex; flex-direction: column; gap: 2px; }
.fo-eintrag small, .fo-leer { font-size: 12px; color: var(--grau); }
.fo-neu { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.fo-editor { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; min-width: 0; }
.fo-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fo-zeile > b { font-size: 13px; }
.fo-hinweis { font-size: 12.5px; color: var(--grau); }
.fo-vorschau { display: flex; flex-direction: column; gap: 4px; }
.fo-vorschau .ff-rahmen { border-radius: 10px; box-shadow: 0 8px 24px rgba(26,15,74,.16); }
.fo-vorschau small { font-size: 12px; color: var(--grau); }
.fo-felder.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; }
.fo-spalte { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fo-platz { min-height: 63px; }
.feld.aus { opacity: .45; }
.fo-ablauf { display: flex; flex-direction: column; gap: 6px; container-type: inline-size; }
/* Zeiten schmal, Textspalten den Rest (Abw. 51); ist der Editor schmal (Mac 1440 px), zweizeilig: Zeiten oben, Texte darunter */
.fo-az { display: grid; grid-template-columns: 158px minmax(0, 1fr) minmax(0, 1fr) 36px; gap: 6px; align-items: center; }
.fo-az .fo-zeiten { display: grid; grid-template-columns: 76px 76px; gap: 6px; }
.fo-az.kopf { font-size: 11.5px; font-weight: 700; color: var(--grau); }
.fo-az input { width: 100%; }
.fo-az input.fehlt { border-color: var(--rot); background: var(--err-bg); }
@container (max-width: 640px) {
  .fo-az { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; grid-template-areas: "zeit zeit weg" "de en ."; }
  .fo-az:not(.kopf) { padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
  .fo-az > .fo-zeiten { grid-area: zeit; } .fo-az > :nth-child(2) { grid-area: de; } .fo-az > :nth-child(3) { grid-area: en; } .fo-az > :nth-child(4) { grid-area: weg; }
}
.fo-fehler { color: var(--err); font-weight: 700; }
.fo-bg, .fo-logo { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--rand-hell); background: #fff; font-weight: 700; cursor: pointer; }
.fo-bg.an, .fo-logo.an { border-color: var(--violett); background: #F6F4FD; }
.fo-bg i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 22px; border-radius: 6px; border: 1px solid var(--rand); font-style: normal; font-size: 11px; font-weight: 700; }
.fo-logo i { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--rand); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; }
.fo-logo.an i { background: var(--violett); border-color: var(--violett); color: #fff; }
.fo-fuss { border-top: 1px solid var(--linie); padding-top: 10px; }
.fo-rechts { display: flex; flex-direction: column; gap: 12px; }
.fo-schicken { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; background: var(--tinte); color: #fff; }
.fo-schicken > b { font-size: 15px; }
.fo-schicken small { font-size: 12px; color: #CFC3F7; }
.fo-ziel { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.2); background: transparent; color: #fff; text-align: left; cursor: pointer; }
.fo-ziel.an { border-color: var(--lime); background: rgba(228,255,0,.12); }
.fo-ziel i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); flex: none; }
.fo-ziel.an i { background: var(--lime); border-color: var(--lime); }
.fo-ziel span { display: flex; flex-direction: column; }
.fo-wann { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.08); }
.fo-wann button { min-height: 34px; border: 0; border-radius: 8px; background: transparent; color: #fff; font-weight: 700; cursor: pointer; }
.fo-wann button[aria-pressed="true"] { background: var(--lime); color: #1A1A22; }
.fo-push { min-height: 46px; border: 0; border-radius: 10px; background: var(--lime); color: #000; font-weight: 700; cursor: pointer; }
.fo-push:disabled { opacity: .5; cursor: not-allowed; }
.fo-live { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.fo-mon { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--linie); font-size: 13px; }
.fo-mon small { color: var(--grau); }
.fo-punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--grau-hell); }
.fo-punkt.ok { background: var(--gruen); } .fo-punkt.err { background: var(--rot); }
.fo-rot { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.fo-rot button { border: 0; background: none; color: var(--err); font-weight: 700; cursor: pointer; }
.fo-geplant { color: var(--warn) !important; }
.fo-setup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.fo-mkarte { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.fo-mkarte a.knopf { display: inline-flex; align-items: center; text-decoration: none; }
.fo-mini { max-width: 360px; }
.fo-mini .ff-rahmen.hoch { max-width: 200px; }
.fo-so { grid-column: 1 / -1; }

/* Land: Auswahl mit „anderes Land" und Freitext (Abw. 52) */
.landwahl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.landwahl input[hidden] { display: none; }

/* Zahlungen (Prototyp F11, Ansicht zahlungen; C1, C2, C12) */
.zahlungen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.zahlungen .tabelle td.zahl, .zahlungen .tabelle th.zahl, .za-summen .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.za-summen { padding: 4px 8px; }
.za-summen tr.summe td { font-weight: 700; border-bottom: 0; }
.za-abg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.za-abg i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.za-abg.gruen { color: var(--ok); } .za-abg.rot { color: var(--err); } .za-abg.grau { color: var(--grau); }
.za-liste { width: 100%; border-collapse: collapse; font-size: 13px; }
.za-liste td { padding: 6px 4px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.za-liste td.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Mollie-Zuordnung (automatisch / per Klärliste) mit Knopf zum Zurücknehmen */
.zuordnung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
/* Zahlungslink (C7): QR-Code mit weißem Rand, damit Handykameras ihn auch auf dunklem Grund lesen */
.kasten.zahllink .qr { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.kasten.zahllink .qr svg { background: #fff; border: 1px solid var(--linie); border-radius: 8px; max-width: 100%; height: auto; }