/* ============================================================
   Staff-Design (design_handoff_saalplan_2a, Branding gemappt:
   #1B8FD4->#0079c4, Poppins->Factoria-Bold, Mulish->noway,
   Violett-Dark-Akzent->#0080c9). Nur im Staff-Layout geladen.

   Die .seatmap*-Regeln selbst liegen in seatmap.css — die teilt
   sich der Staff-Tischplan mit der Gast-Tischsuche. Hier bleibt
   nur, was am Staff-Layout haengt.
   ============================================================ */

/* ---- Seite in Viewport-Hoehe: Seatmap fuellt den Restplatz ----
   Kette body > .wrapper > .content > .seatmap muss durchgehend
   flexen, sonst greift flex:1 am Viewport nicht. */
body.seatpage .wrapper {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}
body.seatpage .content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 16px;
}
body.seatpage .seatmap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}


/* ============================================================
   Staff-weite Design-Tokens (WP2/WP3): Panel-Content, Pill-
   Buttons/-Inputs, Theme-Toggle in der Staff-Bar. Gast-Bereich
   ist nicht betroffen (Datei laedt nur bei staff_*-Routen).
   ============================================================ */

/* Theme-Toggle (Staff-Bar) */
.theme-toggle {
    display: flex; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px;
    overflow: hidden; margin-left: auto; margin-right: 16px;
}
.theme-seg {
    height: 30px; padding: 0 14px; border: none; cursor: pointer;
    font-family: 'Factoria-Bold', sans-serif; font-size: 12px;
    background: transparent; color: rgba(255, 255, 255, 0.75);
}
.theme-seg.is-active { background: #ffffff; color: #0079c4; }

/* Content als Panel (Design 2a); Saalplan-Seite bringt ihr eigenes Panel mit */
body.staff .content {
    background: #ffffff;
    border: 1px solid #E6E1D7;
    border-radius: 24px;
    box-shadow: 0 18px 44px rgba(27, 63, 94, 0.10);
    padding: 24px 32px 32px;
    margin: 24px auto;
    width: calc(100% - 48px);
    max-width: 1200px;
    box-sizing: border-box;
}
body.staff.seatpage .content {
    background: none; border: 0; box-shadow: none;
    max-width: none; padding: 0 24px;
}

/* Pill-Buttons und -Inputs (Tresen-Karten bringen eigene Button-Styles mit).
   .userform__danger ist HIER ausgenommen: die Danger-Regel weiter unten hat
   weniger Spezifitaet als diese :not()-Kette und verlor sonst — der
   "endgueltig loeschen"-Button war dadurch blau statt rot. Dasselbe gilt fuer
   .extratime__step (-/+ am Zusatzzeit-Feld) und .extratime__revoke (Ghost-Pill). */
body.staff form button:not(.linklike):not(.seatmap__roundbtn):not(.orders__viewbtn):not(.counterselect__card):not(.userform__danger):not(.extratime__step):not(.extratime__revoke),
body.staff a.button {
    border-radius: 999px;
    background: linear-gradient(180deg, #0079c4, #00629e);
    box-shadow: 0 6px 16px rgba(0, 121, 196, 0.35);
    transition: transform 0.12s ease-out;
}
body.staff form button:not(.linklike):not(.orders__viewbtn):not(.counterselect__card):not(.userform__danger):not(.extratime__step):not(.extratime__revoke):hover,
body.staff a.button:hover { background: linear-gradient(180deg, #00629e, #005587); }
body.staff form button:not(.linklike):active { transform: scale(0.98); }
body.staff form.login input {
    border-radius: 999px;
    background: #F4F1EB;
    text-align: left;
    padding: 0 22px;
    transition: border-color 0.22s ease-out, box-shadow 0.22s ease-out;
}
body.staff form.login input:focus,
body.staff form .tippfield input:focus {
    border-color: #0079c4;
    box-shadow: 0 0 0 3px rgba(0, 121, 196, 0.22);
}
body.staff form .tippfield input { border-radius: 12px; }
body.staff .counterbox {
    border-radius: 16px;
    background: linear-gradient(180deg, #0079c4, #00629e);
    box-shadow: 0 6px 16px rgba(0, 121, 196, 0.35);
    transition: transform 0.12s ease-out;
}
body.staff .counterbox:hover { transform: translateY(-2px); }

/* ============================================================
   Darkmode Staff-weit — body.staff-dark
   ============================================================ */
body.staff.staff-dark {
    background: linear-gradient(180deg, #10161D, #0B1016) fixed;
    color: #E8EEF5;
}
body.staff-dark .staff-bar {
    background: #0B1016;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
body.staff-dark .theme-toggle { border-color: rgba(255, 255, 255, 0.16); }
body.staff-dark .staff-bar .logout-form button,
body.staff-dark .staff-bar .staff-user a.area-switch {
    border-color: rgba(255, 255, 255, 0.16);
    color: #E8EEF5;
}
body.staff-dark .staff-bar .logout-form button:hover,
body.staff-dark .staff-bar .staff-user a.area-switch:hover { background: rgba(0, 128, 201, 0.18); }
body.staff-dark .staff-bar .logout-form button:focus-visible,
body.staff-dark .staff-bar .staff-user a.area-switch:focus-visible { outline-color: #33A9E0; }
body.staff-dark .theme-seg { color: #8FA5BA; }
body.staff-dark .theme-seg.is-active { background: #0080c9; color: #ffffff; }
body.staff-dark .content {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 44px rgba(10, 16, 24, 0.35);
}
body.staff-dark.seatpage .content { background: none; border: 0; box-shadow: none; }
body.staff-dark h1, body.staff-dark h2 { color: #33A9E0; }
body.staff-dark .staff-footer { color: #8FA5BA; border-top-color: rgba(255, 255, 255, 0.10); }
body.staff-dark a, body.staff-dark button.linklike { color: #33A9E0; }
body.staff-dark p.error, body.staff-dark .flash-error { color: #FF7B72; }
body.staff-dark p.small { color: #8FA5BA; }
body.staff-dark form.login input,
body.staff-dark form .tippfield input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: #E8EEF5;
}
body.staff-dark form.login input:focus,
body.staff-dark form .tippfield input:focus {
    border-color: #0080c9;
    box-shadow: 0 0 0 3px rgba(0, 128, 201, 0.35);
}
body.staff-dark form .tippfield .team { color: #33A9E0; }
body.staff-dark .winner-card { border-bottom-color: rgba(255, 255, 255, 0.14); }
body.staff-dark .winner-area, body.staff-dark .winner-phone { color: #8FA5BA; }
body.staff-dark .confirm-result { color: #33A9E0; }

/* ============================================================
   Tresen / Bestell-Queue (design_handoff_saalplan_2a, Variante 3a,
   Branding gemappt wie oben). Panel bringt eigenen Rahmen mit —
   .content-Panel wird wie beim Saalplan zurueckgesetzt.
   ============================================================ */
body.tresenpage .content {
    background: none; border: 0; box-shadow: none;
    max-width: none; padding: 0 24px;
}
body.staff-dark.tresenpage .content { background: none; border: 0; box-shadow: none; }

.orders {
    background: #ffffff;
    border: 1px solid #E6E1D7;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(27, 63, 94, 0.10);
    font-family: 'noway-regular-webfont', sans-serif;
}

/* ---- Toolbar ---- */
.orders__toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid #E6E1D7;
}
.orders__title-block { display: flex; flex-direction: column; gap: 2px; }
.orders__eyebrow {
    font-family: 'Factoria-Bold', sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: #0079c4;
}
.orders__title-row { display: flex; align-items: center; gap: 10px; }
.orders__title {
    font-family: 'Factoria-Bold', sans-serif;
    font-size: 21px; color: #333333;
}
.orders__count {
    font-family: 'Factoria-Bold', sans-serif;
    font-size: 13px;
    color: #ffffff; background: #0079c4;
    border-radius: 999px; padding: 3px 10px;
    min-width: 14px; text-align: center;
}
.orders__controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.orders__viewbtn {
    height: 38px; margin: 0; padding: 0 16px; cursor: pointer;
    border: 1px solid #E6E1D7; border-radius: 999px;
    background: #ffffff; color: #333333;
    font-family: 'Factoria-Bold', sans-serif; font-size: 13px;
    box-shadow: none;
    transition: background 0.22s ease-out;
}
.orders__viewbtn:hover { background: #EFF6FB; }
.orders__switchbtn {
    height: 38px; margin: 0; padding: 0 16px; cursor: pointer;
    border: none; border-radius: 999px;
    background: linear-gradient(180deg, #0079c4, #00629e);
    color: #ffffff;
    font-family: 'Factoria-Bold', sans-serif; font-size: 13px;
    box-shadow: 0 6px 16px rgba(0, 121, 196, 0.35);
    transition: background 0.22s ease-out, transform 0.12s ease-out;
}
.orders__switchbtn:hover { background: linear-gradient(180deg, #00629e, #005587); }
.orders__switchbtn:active { transform: scale(0.98); }

/* ---- Body / Grid ---- */
.orders__body { padding: 24px; min-height: 340px; }
/* Auto-Fill statt fixer 3 Spalten: mehr Karten nebeneinander bei
   voller Breite, Karten bleiben 280-420px schmal statt sich zu dehnen. */
.orders__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 420px));
    gap: 16px;
    align-items: start;
}
@media (max-width: 720px) { .orders__grid { grid-template-columns: 1fr; } }

/* ---- Karte ---- */
.orders__card {
    display: flex; flex-direction: column;
    border-radius: 18px;
    background: #F4F1EB;
    border: 1px solid #E6E1D7;
    overflow: hidden;
}
.orders__card-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
}
.orders__tableno {
    font-family: 'Factoria-Bold', sans-serif;
    font-size: 17px;
    color: #ffffff; background: #0079c4;
    border-radius: 12px; padding: 8px 13px;
}
.orders__card-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.orders__sponsor {
    font-family: 'noway-medium-webfont', sans-serif;
    font-size: 14.5px; color: #333333;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orders__itemcount { font-size: 12.5px; color: #666666; }
.orders__items {
    list-style: none; margin: 0; padding: 0 16px 14px;
    display: flex; flex-direction: column; gap: 6px;
}
.orders__item { display: flex; align-items: center; gap: 10px; }
.orders__qty {
    font-family: 'Factoria-Bold', sans-serif;
    font-size: 13px; color: #333333;
    background: #ffffff; border: 1px solid #E6E1D7;
    border-radius: 8px; padding: 3px 8px;
    min-width: 26px; text-align: center;
}
.orders__itemname { font-size: 14.5px; color: #333333; }
.orders__card form { display: contents; }
.orders__printbtn {
    margin: 0 16px 16px; padding: 0 20px; height: 42px;
    border: none; border-radius: 999px;
    background: linear-gradient(180deg, #0079c4, #00629e);
    color: #ffffff;
    font-family: 'Factoria-Bold', sans-serif; font-size: 14px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 121, 196, 0.35);
    transition: background 0.22s ease-out, transform 0.12s ease-out;
}
.orders__printbtn:hover { background: linear-gradient(180deg, #00629e, #005587); }
.orders__printbtn:active { transform: scale(0.98); }

/* ---- Empty State ---- */
.orders__empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 80px 0;
}
.orders__empty-check { font-size: 44px; line-height: 1; color: #0079c4; }
.orders__empty-title {
    font-family: 'Factoria-Bold', sans-serif;
    font-size: 18px; color: #333333;
}
.orders__empty-text { font-size: 14px; color: #666666; }

/* ---- Hinweiszeile ---- */
.orders__hints {
    display: flex; align-items: center; gap: 18px;
    padding: 10px 24px;
    border-top: 1px solid #E6E1D7;
    font-size: 13px; color: #666666;
}

/* ============================================================
   Darkmode Tresen — body.staff-dark (globaler Staff-Umschalter)
   Akzent Blau, kein Violett (Kundenvorgabe im Handoff-README).
   ============================================================ */
body.staff-dark .orders {
    background: linear-gradient(180deg, #10161D, #0B1016);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 44px rgba(10, 16, 24, 0.35);
}
body.staff-dark .orders__toolbar,
body.staff-dark .orders__hints { border-color: rgba(255, 255, 255, 0.10); }
body.staff-dark .orders__eyebrow { color: #33A9E0; }
body.staff-dark .orders__title { color: #E8EEF5; }
body.staff-dark .orders__viewbtn {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(20, 27, 36, 0.85);
    color: #E8EEF5;
}
body.staff-dark .orders__viewbtn:hover { background: rgba(0, 128, 201, 0.3); }
body.staff-dark .orders__switchbtn {
    background: linear-gradient(180deg, #0080c9, #00629e);
    box-shadow: 0 6px 16px rgba(0, 128, 201, 0.45);
}
body.staff-dark .orders__switchbtn:hover { background: linear-gradient(180deg, #00629e, #005587); }
body.staff-dark .orders__card {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.12);
}
body.staff-dark .orders__sponsor,
body.staff-dark .orders__itemname { color: #E8EEF5; }
body.staff-dark .orders__itemcount { color: #8FA5BA; }
body.staff-dark .orders__qty {
    color: #E8EEF5;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}
body.staff-dark .orders__empty-title { color: #E8EEF5; }
body.staff-dark .orders__empty-text { color: #8FA5BA; }
body.staff-dark .orders__hints { color: #8FA5BA; }

/* ============================================================
   Tresenauswahl — gleiche Panel-Anatomie wie die Bestellliste,
   Tresen als Karten mit Icon statt grosser Pills.
   ============================================================ */
.counterselect .orders__body { min-height: 0; }
.counterselect__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 300px));
    gap: 16px;
}
.counterselect__card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    width: 100%; margin: 0; padding: 20px;
    border-radius: 18px;
    background: #F4F1EB;
    border: 1px solid #E6E1D7;
    box-shadow: none;
    cursor: pointer; text-align: left;
    font-family: inherit; text-transform: none; text-decoration: none;
    box-sizing: border-box;
    transition: transform 0.12s ease-out, border-color 0.22s ease-out, box-shadow 0.22s ease-out;
}
.counterselect__card:hover {
    transform: translateY(-2px);
    border-color: #0079c4;
    box-shadow: 0 10px 24px rgba(0, 121, 196, 0.18);
}
.counterselect__card:active { transform: scale(0.98); }
.counterselect__card:focus-visible { outline: 3px solid rgba(0, 121, 196, 0.4); outline-offset: 2px; }
.counterselect__icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-bottom: 8px;
    border-radius: 12px;
    background: #0079c4; color: #ffffff;
}
.counterselect__icon svg { width: 22px; height: 22px; }
.counterselect__name {
    font-family: 'Factoria-Bold', sans-serif;
    font-size: 17px; color: #333333;
}
.counterselect__hint { font-size: 12.5px; color: #666666; }
.orders__hints a { color: #0079c4; text-decoration: none; }
.orders__hints .linklike { margin: 0; padding: 0; font-size: 13px; }

/* Darkmode */
body.staff-dark .counterselect__card {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.12);
}
body.staff-dark .counterselect__card:hover {
    border-color: #0080c9;
    box-shadow: 0 10px 24px rgba(0, 128, 201, 0.3);
}
body.staff-dark .counterselect__icon { background: #0080c9; }
body.staff-dark .counterselect__name { color: #E8EEF5; }
body.staff-dark .counterselect__hint { color: #8FA5BA; }

/* ============================================================
   Verwaltung — Einstellungsliste (Zeile: Text links, Zustand + Aktion rechts)
   ============================================================ */
.settings .orders__body { min-height: 0; }
.settings__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.settings__row {
    display: flex; align-items: center; gap: 20px;
    padding: 18px 20px;
    border-radius: 18px;
    background: #F4F1EB;
    border: 1px solid #E6E1D7;
}
.settings__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.settings__name {
    font-family: 'Factoria-Bold', sans-serif;
    font-size: 17px; color: #333333;
}
.settings__hint { font-size: 12.5px; color: #666666; }
.settings__meta { font-size: 12px; color: #8a8a8a; }
.settings__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.settings__state {
    font-family: 'Factoria-Bold', sans-serif;
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
    color: #8a8a8a; background: #ffffff;
    border: 1px solid #E6E1D7; border-radius: 999px;
    padding: 5px 12px;
}
.settings__state.is-on { color: #ffffff; background: #0079c4; border-color: #0079c4; }
.settings__btn { height: 38px; margin: 0; padding: 0 18px; cursor: pointer; font-size: 13px; }
@media (max-width: 640px) {
    .settings__row { flex-direction: column; align-items: flex-start; gap: 14px; }
    .settings__actions { margin-left: 0; }
}

/* Darkmode */
body.staff-dark .settings__row {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.12);
}
body.staff-dark .settings__name { color: #E8EEF5; }
body.staff-dark .settings__hint { color: #8FA5BA; }
body.staff-dark .settings__meta { color: #708499; }
body.staff-dark .settings__state {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: #8FA5BA;
}
body.staff-dark .settings__state.is-on { background: #0080c9; border-color: #0080c9; color: #ffffff; }

/* ============================================================
   Verwaltung — Unternavigation, Benutzerliste, Formulare, Protokoll
   ============================================================ */
.adminnav {
    display: flex; gap: 4px; margin-bottom: 20px;
    border: 1px solid #E6E1D7; border-radius: 999px;
    padding: 4px; width: fit-content;
}
.adminnav__tab {
    padding: 8px 18px; border-radius: 999px;
    font-family: 'Factoria-Bold', sans-serif; font-size: 13px;
    color: #666666; text-decoration: none;
    transition: background 0.22s ease-out, color 0.22s ease-out;
}
.adminnav__tab:hover { background: #EFF6FB; color: #0079c4; }
.adminnav__tab.is-active { background: #0079c4; color: #ffffff; }

/* Link-Buttons: .orders__viewbtn war fuer <button> gedacht — als <a> greift die
   Hoehe nicht (inline) und der Browser unterstreicht. */
body.staff a.orders__viewbtn {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; text-decoration: none;
    text-transform: none; line-height: 1;
}
/* a.button erbt aus app.css `margin: 35px auto 50px; font-size: 20px` — in einer
   Toolbar sprengt das die Zeile. */
body.staff .orders__controls a.button {
    display: inline-flex; align-items: center; justify-content: center;
    height: 38px; margin: 0; padding: 0 18px;
    font-size: 13px; line-height: 1;
    box-sizing: border-box;
}

/* ---- Suche und Blättern ---- */
.userlist__search { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.userlist__search input {
    height: 38px; margin: 0; padding: 0 16px; width: 260px; max-width: 100%;
    border: 1px solid #E6E1D7; border-radius: 999px;
    background: #ffffff; color: #333333;
    font-family: inherit; font-size: 14px;
}
.userlist__search input:focus { border-color: #0079c4; box-shadow: 0 0 0 3px rgba(0, 121, 196, 0.22); outline: none; }
.userlist__reset { font-size: 13px; color: #0079c4; text-decoration: none; }
.pager {
    display: flex; align-items: center; gap: 14px;
    margin-top: 18px; font-size: 13px;
}
.pager a { color: #0079c4; text-decoration: none; }
.pager__off { color: #b3b3b3; }
.pager__pos { color: #666666; }

/* ---- Formulare (Anlegen/Bearbeiten) ---- */
.userform {
    display: flex; flex-direction: column; gap: 16px;
    padding: 20px; margin-bottom: 16px;
    border: 1px solid #E6E1D7; border-radius: 18px;
    background: #F4F1EB;
}
.userform__sectiontitle {
    font-family: 'Factoria-Bold', sans-serif; font-size: 15px; color: #333333;
}
.userform__field { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.userform__field label {
    font-family: 'Factoria-Bold', sans-serif; font-size: 13px; color: #333333;
}
.userform__field input {
    height: 42px; margin: 0; padding: 0 16px;
    border: 1px solid #E6E1D7; border-radius: 12px;
    background: #ffffff; color: #333333;
    font-family: inherit; font-size: 15px;
}
.userform__field input:focus { border-color: #0079c4; box-shadow: 0 0 0 3px rgba(0, 121, 196, 0.22); outline: none; }
.userform__hint, .userform__rolehint { font-size: 12.5px; color: #666666; }
.userform__roles { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; }
.userform__roles legend {
    font-family: 'Factoria-Bold', sans-serif; font-size: 13px; color: #333333;
    padding: 0; margin-bottom: 4px;
}
.userform__role {
    display: grid; grid-template-columns: 26px 1fr; gap: 2px 12px;
    align-items: center; cursor: pointer;
    padding: 10px 14px; border-radius: 12px;
    border: 1px solid transparent;
    transition: background 0.16s ease-out, border-color 0.16s ease-out;
}
/* app.css setzt global `input { appearance: none }` -> ohne das hier ist die
   Checkbox unsichtbar und die Rolle sieht aus wie reiner Text. */
.userform__role input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: auto;
    grid-row: span 2;
    width: 20px; height: 20px; margin: 0;
    accent-color: #0079c4;
    cursor: pointer;
}
/* Gesetzte Rolle hervorheben. :has() ist Zusatz — ohne Unterstuetzung bleibt die
   Checkbox selbst die Anzeige. */
.userform__role:hover { background: rgba(0, 121, 196, 0.06); }
.userform__role:has(input:checked) { background: #EFF6FB; border-color: #cfe4f3; }
.userform__rolename { font-family: 'Factoria-Bold', sans-serif; font-size: 14px; color: #333333; }
.userform__actions { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
.userform__actions form { margin: 0; }
/* app.css: `form button { margin: 35px auto 50px; font-size: 20px }` — ohne Reset
   rutscht der Button per margin:auto nach rechts und wird riesig. */
body.staff .userform button,
body.staff .userform__actions button {
    margin: 0; height: 42px; padding: 0 22px; font-size: 14px;
}
/* text-align: center kommt von .content (Gast-Layout) und wuerde Labels mittig setzen */
.userform, .userform__self, .userform__confirm { text-align: left; }
.userform__cancel { font-size: 13px; color: #0079c4; text-decoration: none; }
.userform__self, .userform__confirm {
    padding: 14px 18px; margin-bottom: 16px;
    border-radius: 14px; background: #FFF6E5; border: 1px solid #F0DFBF;
    font-size: 14px; color: #6b5320;
}
.userform__danger-zone { border-color: #F2C7C3; background: #FDF3F2; }
/* Reset-Seite: der Danger-Button darf nicht an der Tischliste kleben */
.reset__actions { margin-top: 18px; }

/* ---- Bestellfenster: Zusatzzeit ----
   Eigene Klassen statt .userform__actions: dort ist alles eine Zeile, hier braucht die
   Rechenhilfe eine eigene Zeile unter dem Feld. Das nackte type=number sah davor aus wie
   ein vergessenes Debug-Feld — app.css nimmt Inputs per `appearance: none` alles weg. */
.extratime {
    display: flex; flex-direction: column; gap: 14px;
    padding: 18px 20px; margin-bottom: 16px;
    border: 1px solid #E6E1D7; border-radius: 18px;
    background: #F4F1EB;
    text-align: left;
}
.extratime__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.extratime__title {
    font-family: 'Factoria-Bold', sans-serif; font-size: 15px; color: #333333;
}
.extratime__meta {
    font-family: 'noway-regular-webfont', sans-serif; font-size: 12.5px; color: #666666;
}
.extratime__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.extratime__form, .extratime__revokeform {
    display: flex; align-items: center; gap: 12px; margin: 0;
}
.extratime__label {
    font-family: 'Factoria-Bold', sans-serif; font-size: 13px; color: #333333;
}

/* Stepper: eine Pille, in der -/Zahl/+ zusammen sitzen. Am Tresen wird getippt, nicht
   getastet — die winzigen Browser-Spinner sind global ohnehin abgeschaltet. */
.extratime__stepper {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 4px; flex: 0 0 auto;
    border: 1px solid #E6E1D7; border-radius: 999px;
    background: #ffffff;
    transition: border-color 0.16s ease-out, box-shadow 0.16s ease-out;
}
.extratime__stepper:focus-within {
    border-color: #0079c4; box-shadow: 0 0 0 3px rgba(0, 121, 196, 0.22);
}
/* app.css: `form button { margin: 35px auto 50px; padding: 12px 20px; font-size: 20px }` */
body.staff .extratime__step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin: 0; padding: 0; flex: 0 0 auto;
    border: 0; border-radius: 999px; box-shadow: none; cursor: pointer;
    background: #EFF6FB; color: #0079c4;
    font-family: 'Factoria-Bold', sans-serif; font-size: 20px; line-height: 1;
    text-transform: none;
}
body.staff .extratime__step:hover { background: #DCEBF7; }
body.staff .extratime__step[disabled] {
    background: #F4F1EB; color: #c2bbaf; box-shadow: none; cursor: default;
}
.extratime__input {
    width: 54px; height: 34px; margin: 0; padding: 0;
    border: 0; background: transparent; box-shadow: none; outline: none;
    text-align: center; font-variant-numeric: tabular-nums;
    font-family: 'Factoria-Bold', sans-serif; font-size: 17px; color: #333333;
}
body.staff .extratime__submit { margin: 0; height: 42px; padding: 0 24px; font-size: 14px; }
/* Zuruecknehmen ist die seltene Korrektur — Ghost-Pill, damit sie nicht mit dem
   Hauptknopf um Aufmerksamkeit streitet. */
body.staff .extratime__revoke {
    margin: 0; height: 42px; padding: 0 20px; box-shadow: none; cursor: pointer;
    border: 1px solid #cfe4f3; border-radius: 999px;
    background: transparent; color: #0079c4;
    font-family: 'Factoria-Bold', sans-serif; font-size: 13px;
}
body.staff .extratime__revoke:hover { background: #EFF6FB; }

/* Rechenhilfe: neutral eine Zeile, bei Aerger eine farbige Box. */
.extratime__feedback { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.extratime__hint {
    margin: 0; max-width: 68ch;
    font-size: 13px; line-height: 1.5; color: #666666;
}
.extratime__hint:empty { display: none; }
.extratime__hint.is-warn, .extratime__hint.is-blocked {
    padding: 10px 14px; border-radius: 12px; border: 1px solid #F0DFBF;
    background: #FFF6E5; color: #6b5320;
}
.extratime__hint.is-blocked { border-color: #F2C7C3; background: #FDF3F2; color: #8c3a31; }
/* button.linklike setzt `font-size: inherit` — braucht dieselbe Spezifitaet. */
body.staff button.extratime__fix { font-size: 12.5px; }
@media (max-width: 640px) {
    .extratime__row { flex-direction: column; align-items: stretch; }
    .extratime__form, .extratime__revokeform { flex-wrap: wrap; }
    body.staff .extratime__submit, body.staff .extratime__revoke { flex: 1 1 auto; }
}

/* Darkmode */
body.staff-dark .extratime {
    background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.12);
}
body.staff-dark .extratime__title { color: #E8EEF5; }
body.staff-dark .extratime__label { color: #E8EEF5; }
body.staff-dark .extratime__meta,
body.staff-dark .extratime__hint { color: #8FA5BA; }
body.staff-dark .extratime__stepper {
    background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16);
}
body.staff-dark .extratime__stepper:focus-within { border-color: #0080c9; }
body.staff-dark .extratime__input { color: #E8EEF5; }
body.staff-dark .extratime__step { background: rgba(0, 128, 201, 0.20); color: #33A9E0; }
body.staff-dark .extratime__step:hover { background: rgba(0, 128, 201, 0.34); }
body.staff-dark .extratime__step[disabled] {
    background: rgba(255, 255, 255, 0.05); color: #5c6b7a;
}
body.staff-dark .extratime__revoke { border-color: rgba(0, 128, 201, 0.45); color: #33A9E0; }
body.staff-dark .extratime__revoke:hover { background: rgba(0, 128, 201, 0.18); }
body.staff-dark .extratime__hint.is-warn {
    background: rgba(240, 223, 191, 0.10); border-color: rgba(240, 223, 191, 0.28); color: #E8D9B5;
}
body.staff-dark .extratime__hint.is-blocked {
    background: rgba(192, 57, 43, 0.12); border-color: rgba(192, 57, 43, 0.38); color: #FFB3AC;
}
/* Die hellen [disabled]-Farben stehen weiter unten in der Datei — hier braucht es
   eine Klasse mehr, sonst gewinnt die spaetere Regel. */
body.staff.staff-dark form button[disabled] { background: rgba(255, 255, 255, 0.10); color: #708499; }

/* ---- Saalplan-Links ---- */
/* app.css: `form button { margin: 35px auto 50px; font-size: 20px }` — Buttons
   in Listenzeilen brauchen denselben Reset wie .settings__btn, sonst bläht der
   Widerrufen-Knopf die Zeile auf. */
body.staff .settings__actions form button {
    height: 38px; margin: 0; padding: 0 18px; font-size: 13px; cursor: pointer;
}
.links__url { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 2px; }
.links__input {
    flex: 1 1 320px; min-width: 0; max-width: 520px;
    height: 34px; padding: 0 12px; margin: 0;
    border: 1px solid #E6E1D7; border-radius: 999px; background: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: #333333;
}
/* Kein form-Vorfahr -> die Pill-Regel greift hier nicht, Form kommt von hier. */
.links__copy {
    height: 34px; margin: 0; padding: 0 16px; flex: 0 0 auto;
    border: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(180deg, #0079c4, #00629e); color: #ffffff;
    font-family: 'Factoria-Bold', sans-serif; font-size: 12.5px;
}
.links__copy:hover { background: linear-gradient(180deg, #00629e, #005587); }
.settings__row.is-revoked { opacity: 0.62; }
body.staff-dark .links__input {
    background: #0E1621; border-color: rgba(255, 255, 255, 0.16); color: #E8EEF5;
}
/* Die generische Pill-Regel nimmt .userform__danger per :not() aus (Spezifitaet),
   deshalb bringt die Danger-Regel Form UND Farbe selbst mit. */
body.staff form button.userform__danger,
body.staff form button.userform__danger:hover {
    border-radius: 999px;
    background: linear-gradient(180deg, #c0392b, #a03024);
    box-shadow: 0 6px 16px rgba(192, 57, 43, 0.32);
    transition: transform 0.12s ease-out;
}
body.staff form button.userform__danger:hover { background: linear-gradient(180deg, #a03024, #86271d); }
body.staff form button[disabled] {
    background: #d8d3ca; box-shadow: none; cursor: not-allowed; color: #ffffff;
}

/* ---- Protokoll ---- */
.audit__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.audit__row {
    display: grid;
    grid-template-columns: 130px 170px 150px 1fr 120px;
    gap: 12px; align-items: baseline;
    padding: 12px 16px;
    border: 1px solid #E6E1D7; border-radius: 14px;
    background: #F4F1EB;
    font-size: 13px;
}
.audit__time { color: #666666; font-variant-numeric: tabular-nums; }
.audit__action { font-family: 'Factoria-Bold', sans-serif; color: #333333; }
.audit__target { color: #0079c4; }
.audit__details { display: flex; flex-direction: column; gap: 2px; color: #666666; }
.audit__actor { color: #8a8a8a; text-align: right; }
@media (max-width: 900px) {
    .audit__row { grid-template-columns: 1fr; gap: 4px; }
    .audit__actor { text-align: left; }
}

/* ---- Tippspiel-Verlauf ---- */
.history__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.history__row {
    display: grid;
    grid-template-columns: 120px 80px 100px 90px 1fr;
    gap: 12px; align-items: baseline;
    padding: 12px 16px;
    border: 1px solid #E6E1D7; border-radius: 14px;
    background: #F4F1EB;
    font-size: 13px;
}
.history__row--head {
    background: transparent; border-color: transparent; padding-bottom: 0;
    font-family: 'Factoria-Bold', sans-serif; color: #8a8a8a; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.history__date { font-family: 'Factoria-Bold', sans-serif; color: #333333; }
.history__tips, .history__winners, .history__result { font-variant-numeric: tabular-nums; }
.history__result { color: #0079c4; }
.history__draw { color: #8a8a8a; }
@media (max-width: 900px) {
    /* Kopfzeile taugt ohne Spalten nichts — die Werte tragen dann ihre eigene Beschriftung. */
    .history__row--head { display: none; }
    .history__row { grid-template-columns: 1fr; gap: 4px; }
    .history__tips::before { content: 'Tipps: '; }
    .history__result::before { content: 'Ergebnis: '; }
    .history__winners::before { content: 'Gewinner: '; }
}

/* Darkmode */
body.staff-dark .history__row {
    background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.12);
}
body.staff-dark .history__row--head { background: transparent; border-color: transparent; color: #708499; }
body.staff-dark .history__date { color: #E8EEF5; }
body.staff-dark .history__result { color: #33A9E0; }
body.staff-dark .history__draw { color: #8FA5BA; }
body.staff-dark .adminnav { border-color: rgba(255, 255, 255, 0.16); }
body.staff-dark .adminnav__tab { color: #8FA5BA; }
body.staff-dark .adminnav__tab:hover { background: rgba(0, 128, 201, 0.18); color: #33A9E0; }
body.staff-dark .adminnav__tab.is-active { background: #0080c9; color: #ffffff; }
body.staff-dark .userlist__search input,
body.staff-dark .userform__field input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: #E8EEF5;
}
body.staff-dark .pager__pos { color: #8FA5BA; }
body.staff-dark .pager__off { color: #5c6b7a; }
body.staff-dark .userform,
body.staff-dark .audit__row {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.12);
}
body.staff-dark .userform__sectiontitle,
body.staff-dark .userform__field label,
body.staff-dark .userform__roles legend,
body.staff-dark .userform__rolename,
body.staff-dark .audit__action { color: #E8EEF5; }
body.staff-dark .userform__hint,
body.staff-dark .userform__rolehint,
body.staff-dark .audit__time,
body.staff-dark .audit__details { color: #8FA5BA; }
body.staff-dark .userform__role:hover { background: rgba(0, 128, 201, 0.12); }
body.staff-dark .userform__role:has(input:checked) {
    background: rgba(0, 128, 201, 0.16); border-color: rgba(0, 128, 201, 0.45);
}
body.staff-dark .userform__self,
body.staff-dark .userform__confirm {
    background: rgba(240, 223, 191, 0.10); border-color: rgba(240, 223, 191, 0.28); color: #E8D9B5;
}
body.staff-dark .userform__danger-zone {
    background: rgba(192, 57, 43, 0.10); border-color: rgba(192, 57, 43, 0.35);
}
body.staff-dark .audit__target { color: #33A9E0; }
body.staff-dark .audit__actor { color: #708499; }