:root {
  --ground:#000; --surface:#111; --raised:#2a2a2a; --rule:#1c1c1c; --control:#444;
  --text:#fff; --muted:#b4b4b4; --faint:#949494; --accent:#c6f24e;
  --positive:#c6f24e; --negative:#e5484d; --warning:#e5a93b;
  --radius-card:20px; --gap:14px; --pad:22px; --control-height:36px;
  --sidebar:224px; --topbar:64px; --tabbar:56px;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
/* Systemschrift: keine Anfrage an fremde Schrift-Server, das ist auch für die DSGVO einfacher. */
body { background:var(--ground); color:var(--text); font:400 14px/20px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-variant-numeric:tabular-nums; }
button,input,select { font:inherit; color:inherit; }
a { color:inherit; }
h1 { font-size:20px; line-height:28px; font-weight:600; margin:0; }
h1:focus { outline:none; }
h2 { font-size:16px; line-height:24px; font-weight:500; margin:0; }
p { margin:0 0 12px; }
:focus-visible { outline:2px solid #fff; outline-offset:2px; }

.boot { min-height:100vh; display:grid; place-items:center; color:var(--muted); }
#blazor-error-ui { display:none; position:fixed; left:0; right:0; bottom:0; background:var(--negative); color:#000; padding:12px 16px; z-index:30; font-weight:500; }
#blazor-error-ui .reload { margin-left:12px; color:#000; }

/* Shell: Sidebar 224 + Inhalt mit 29px Rand links und rechts */
.app { display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); grid-template-rows:var(--topbar) minmax(0,1fr); min-height:100vh; }
.side { grid-row:1 / 3; border-right:1px solid var(--rule); padding:0 12px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.brand { height:var(--topbar); display:flex; align-items:center; gap:10px; padding:0 8px; font-size:16px; font-weight:600; }
.nav { display:flex; flex-direction:column; gap:2px; margin-top:12px; }
.nav a { display:flex; align-items:center; gap:10px; height:34px; padding:0 8px; color:#bbb; text-decoration:none; border-radius:8px; }
.nav a:hover { color:#fff; }
.nav a[aria-current=page] { color:#fff; font-weight:500; }
.side-foot { margin-top:auto; padding:0 8px; color:var(--faint); font-size:12px; line-height:18px; overflow-wrap:anywhere; }
.side-foot b { display:block; color:var(--text); font-size:14px; font-weight:500; line-height:20px; }
.top { border-bottom:1px solid var(--rule); display:flex; align-items:center; padding:0 29px; gap:16px; position:sticky; top:0; background:var(--ground); z-index:5; }
.top .event b { font-weight:500; }
.top .status { margin-left:auto; color:var(--muted); font-size:12px; white-space:nowrap; }
.mark-sm { display:none; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--positive); margin-right:6px; vertical-align:1px; }
.dot.warn { background:var(--warning); }
main { padding:22px 29px 29px; min-width:0; }
.title-row { display:flex; align-items:center; margin-bottom:16px; min-height:36px; }

/* Bedienelemente */
.btn { height:var(--control-height); padding:0 16px; border-radius:999px; border:1px solid var(--control); background:transparent; cursor:pointer; white-space:nowrap; font-weight:500; transition:background .12s, transform .08s; }
.btn:hover { background:#1c1c1c; }
.btn:active { transform:scale(.98); }
.btn:disabled { color:var(--muted); cursor:default; }
.btn.primary { background:#fff; color:#000; border-color:#fff; }
.btn.primary:hover { background:#e6e6e6; }
.btn.small { height:30px; padding:0 12px; font-size:12px; }
.btn.wide { width:100%; }
.link-btn { display:flex; align-items:center; justify-content:center; text-decoration:none; }
.input { height:var(--control-height); border-radius:999px; border:1px solid var(--control); background:#000; padding:0 16px; width:100%; }
.input::placeholder { color:var(--faint); }
label.field { display:block; font-weight:500; margin-bottom:14px; }
label.field .input { margin-top:8px; font-weight:400; }

.card { background:var(--surface); border-radius:var(--radius-card); padding:var(--pad); }
.card > h2 { margin-bottom:8px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.muted { color:var(--muted); }
.notice { background:#2b2414; color:var(--warning); border-radius:12px; padding:10px 14px; margin-bottom:14px; }
.pill { display:inline-flex; align-items:center; flex:none; height:22px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap; background:#222; color:#fff; }
.avatar { flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:600; color:#000; }

/* Einlass: 1fr + 384 + Abstand 14 ergibt die volle Inhaltsbreite */
.door { display:grid; grid-template-columns:minmax(0,1fr) 384px; gap:var(--gap); align-items:stretch; min-height:calc(100vh - var(--topbar) - 103px); }
.door-main,.door-rail { display:flex; flex-direction:column; gap:var(--gap); min-width:0; }
.grow-card { flex:1; }
.strip { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; background:var(--surface); border-radius:var(--radius-card); padding:16px 0; }
.strip > div { padding:0 var(--pad); border-left:1px solid #222; min-width:0; }
.strip > div:first-child { border-left:0; }
.strip .label { color:var(--muted); font-size:12px; line-height:16px; }
.strip .val { font-size:24px; line-height:32px; font-weight:500; }
.strip .val small { font-size:14px; color:var(--faint); font-weight:400; }
.bar { height:6px; border-radius:3px; background:var(--raised); overflow:hidden; margin-top:4px; }
.bar i { display:block; height:100%; background:var(--accent); }

.result { flex:1; min-height:360px; border-radius:var(--radius-card); background:var(--surface); padding:32px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:32px; align-items:center; transition:background .12s; }
.result.grant { background:var(--positive); color:#000; }
.result.warn { background:var(--warning); color:#000; }
.result.deny { background:var(--negative); color:#000; }
.ring { width:176px; height:176px; flex:none; display:block; }
.result .word { font-size:20px; line-height:28px; font-weight:600; }
.result .who { font-size:44px; line-height:50px; font-weight:600; letter-spacing:-.02em; margin:2px 0 6px; overflow-wrap:anywhere; }
.result .why { font-size:16px; line-height:24px; }
.result.idle .who { font-size:32px; line-height:40px; }
.result.idle .why { color:var(--muted); }
.perks { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0; list-style:none; }
.perks li { height:28px; line-height:28px; padding:0 12px; border-radius:999px; background:#000; color:#fff; font-weight:500; }
.result-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.result-actions:empty { display:none; }
.result:not(.idle) .btn { border-color:#000; background:transparent; color:#000; }
.result:not(.idle) .btn:hover { background:rgba(0,0,0,.12); }
.result:not(.idle) .btn.primary { background:#000; color:#fff; }
.result-meta { margin-top:14px; font-size:12px; line-height:16px; }
.sim { background:var(--surface); border-radius:var(--radius-card); padding:14px var(--pad); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sim-label { color:var(--muted); font-size:12px; flex-basis:100%; }

.hits { margin-top:6px; }
.person { display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 0; border-top:1px solid var(--rule); }
.person:first-of-type { border-top:0; }
.grow { flex:1; min-width:0; }
.person .name { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.person .sub { color:var(--faint); font-size:12px; line-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.person .time { color:var(--muted); }
.search-empty { color:var(--muted); padding:12px 0 2px; }

/* Verwaltung: 1fr + 384 + Abstand 14 ergibt wie am Einlass die volle Inhaltsbreite */
.title-row .lede { color:var(--muted); margin:2px 0 0; }
.title-actions { display:flex; align-items:center; gap:8px; flex:none; margin-left:16px; }
.work { display:grid; grid-template-columns:minmax(0,1fr) 384px; gap:var(--gap); align-items:start; }
.work-main,.work-rail { display:flex; flex-direction:column; gap:var(--gap); min-width:0; }
.phone-only { display:none; }
.person.row { width:100%; background:none; border:0; border-top:1px solid var(--rule); border-radius:0; color:inherit; font:inherit; text-align:left; cursor:pointer; padding:6px 8px; margin:0 -8px; width:calc(100% + 16px); }
.person.row:first-of-type { border-top:0; }
.person.row:hover { background:#1c1c1c; }
.person.row.selected { background:var(--raised); border-radius:10px; border-top-color:transparent; }
.person.row .name,.person.row .sub { display:block; }
.pill.bad { background:#3a1517; color:#ff9a9d; }
.pill.warn { background:#2b2414; color:var(--warning); }
.done { background:#1d2710; color:var(--positive); border-radius:12px; padding:10px 14px; margin-bottom:14px; }
.assign { display:flex; align-items:center; gap:12px; background:var(--raised); border-radius:12px; padding:10px 14px; margin-bottom:14px; }
.uid { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; }
.hint { color:var(--muted); font-size:12px; line-height:16px; margin:0 0 12px; }
.problems { margin:0 0 12px; padding:0 0 0 18px; color:var(--warning); }
.problems:empty { display:none; }
select.input { appearance:none; padding-right:36px; background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b4b4b4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.event-select { width:auto; max-width:300px; }
.field-pair { display:grid; grid-template-columns:minmax(0,1fr) 112px; gap:10px; }
.check { display:flex; gap:10px; align-items:flex-start; margin-bottom:16px; cursor:pointer; }
.check input { width:18px; height:18px; flex:none; margin:1px 0 0; accent-color:#fff; }
.form-actions { display:flex; flex-wrap:wrap; gap:8px; }
.chip-row { display:flex; align-items:center; gap:8px; min-height:52px; padding:6px 0; border-top:1px solid var(--rule); }
.chip-row .uid,.chip-row .sub { display:block; }
.chip-row .sub { color:var(--faint); font-size:12px; line-height:16px; }
.chip-add { margin-top:14px; }
.btn.danger { color:#ff9a9d; border-color:#6b2a2d; }
.btn.danger:hover { background:#3a1517; }
.link-btn.inline { display:inline-flex; }
.file-btn { display:inline-flex; align-items:center; position:relative; }
.file-btn.small { height:30px; padding:0 12px; font-size:12px; }
.file-btn:focus-within { outline:2px solid #fff; outline-offset:2px; }
.file-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.tabbar { display:none; }
.field-label { font-weight:500; margin-bottom:6px; }
.person .sub.wraps { white-space:normal; }
.benefit { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 10px; align-items:center; padding:10px 0; border-top:1px solid var(--rule); }
.benefit .input { grid-column:1 / -1; }
.benefit .check { margin:0; align-items:center; }
.add-benefit { margin:4px 0 14px; }
.secret { font-size:18px; line-height:26px; margin:0 0 10px; user-select:all; }
.narrow-card { max-width:480px; }

/* Anmeldung und Chip-Link */
.center-page { min-height:100vh; display:grid; place-items:center; padding:16px; }
.center-card { width:min(400px,100%); }
.center-card h1 { margin-bottom:16px; }
.brand-row { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:600; margin-bottom:24px; }
.quiet-link { color:var(--muted); font-size:12px; }

@media (max-width:1100px) {
  .app { grid-template-columns:minmax(0,1fr); grid-template-rows:56px minmax(0,1fr); }
  .side { display:none; }
  .mark-sm { display:block; line-height:0; }
  .top { padding:0 16px; gap:10px; }
  main { padding:16px; }
  /* Die Gast-Suche bleibt neben dem Ergebnis, solange der Platz reicht */
  .door { grid-template-columns:minmax(0,1fr) 320px; min-height:calc(100vh - 56px - 96px); }
  .work { grid-template-columns:minmax(0,1fr) 340px; }
  /* Unten, damit der Daumen die Bereiche auf dem Handy erreicht. */
  .tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:6; height:calc(var(--tabbar) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:var(--ground); border-top:1px solid var(--rule); }
  .tabbar a { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px; color:#bbb; text-decoration:none; font-size:12px; }
  .tabbar a[aria-current=page] { color:#fff; font-weight:500; }
  .has-tabs main { padding-bottom:calc(var(--tabbar) + 16px + env(safe-area-inset-bottom)); }
}
@media (max-width:860px) {
  .door { grid-template-columns:minmax(0,1fr); min-height:0; }
  .work { grid-template-columns:minmax(0,1fr); }
  /* Auf dem Handy öffnet das Formular über der Liste statt unter vielen Zeilen. */
  .work-rail { order:-1; }
  .work:not(.rail-open) .work-rail { display:none; }
  /* Gästeliste: das Eintragen oben, dann die Liste. Selteneres wie Import und Abend danach. */
  .work.list-first { display:flex; flex-direction:column; align-items:stretch; }
  .work.list-first .work-rail { display:contents; }
  .work.list-first .work-main { order:0; }
  .work.list-first .work-rail > .card { order:1; }
  .work.list-first .work-rail > .card.phone-first { order:-1; }
  .phone-only { display:inline-flex; align-items:center; }
  .title-row { flex-wrap:wrap; gap:10px; }
  .title-row .grow { flex-basis:100%; }
  .title-actions { margin-left:0; width:100%; }
  .event-select { flex:1 1 0; min-width:0; max-width:none; }
  .assign { flex-wrap:wrap; }
}
@media (max-width:640px) {
  .strip { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:12px; }
  .strip > div { padding:0 14px; }
  .strip > div:first-child { grid-column:1 / -1; }
  .strip > div:nth-child(2) { border-left:0; }
  .result { grid-template-columns:minmax(0,1fr); padding:22px; gap:16px; min-height:300px; align-content:center; }
  .ring { width:88px; height:88px; }
  .result .who { font-size:32px; line-height:38px; }
  .result.idle .who { font-size:24px; line-height:30px; }
  .btn { height:44px; }
  .btn.small { height:36px; }
  .input { height:44px; }
  .card { padding:16px; }
  .sim { padding:14px 16px; }
  /* Fünf Bereiche passen auf dem Handy nur mit dem Text unter dem Symbol. */
  .tabbar a { flex-direction:column; gap:2px; font-size:11px; }
  .top .event { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }