/* Neutrale Vorgaben (P0-7). Die Gastseite ueberschreibt --brand und --accent aus dem Betriebsdatensatz (_Branding.cshtml). */
:root { --accent: #9DB7D5; --ink: #F2EDE4; --black: #0B0D10; --brand: #1B2430; }
* { box-sizing: border-box; }
html { background: var(--black); color-scheme: dark; }
body {
margin: 0; padding: 0 16px calc(24px + env(safe-area-inset-bottom));
background: linear-gradient(180deg, var(--black), var(--brand));
background-attachment: fixed; color: var(--ink);
font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.head { text-align: center; padding: 20px 0 12px; border-bottom: 1px solid var(--accent); }
.head p { margin: 0; }
.wordmark { margin: 0; text-transform: uppercase; color: var(--accent); font-size: 1.5rem; letter-spacing: .25em; font-weight: 600; }
.logo { display: block; max-height: 64px; max-width: 80%; margin: 0 auto 8px; }
.operation { margin-top: 4px; font-size: .9rem; opacity: .85; }
.foot { text-align: center; margin: 32px 0 0; font-size: .75rem; opacity: .6; }
.foot a { color: inherit; }
.age { font-size: .85rem; opacity: .85; margin-top: 4px; }
.empty { text-align: center; margin: 40px 0; opacity: .85; }
.table { margin-top: 8px; font-weight: 600; }
main { max-width: 640px; margin: 0 auto; }
h2 { color: var(--accent); font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; margin: 28px 0 8px; }
.items { list-style: none; margin: 0; padding: 0; }
.items li {
display: grid; grid-template-columns: 1fr auto; column-gap: 12px;
padding: 10px 0; border-bottom: 1px solid rgba(242, 237, 228, .12);
}
.price { color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.desc, .notice, .tag { grid-column: 1 / -1; font-size: .85rem; opacity: .75; }
.soldout .name, .soldout .price { opacity: .45; text-decoration: line-through; }
.offline { margin: 8px 0 0; padding: 6px 10px; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); font-size: .9rem; }
/* ---- Bausteine: Karte, Feld, Schaltflaeche (02.10.2026) --------------------------------------
Diese Regeln standen bis heute NUR in admin.css. Das Gast-Layout (_Layout) bindet admin.css aber
nicht ein - deshalb waren die Gast-Kontoseiten (Register, Pending, Confirm, Resend) ohne jede
Gestaltung: Beschriftung und Eingabefeld in einer Zeile, keine Abstaende, auf der ersten Seite,
die ein Gast nach dem QR-Code sieht. Sie gehoeren hierher, weil Gast UND Verwaltung sie brauchen;
admin.css laedt site.css ohnehin immer mit.
Keine festen Farben: alles leitet sich aus --ink, --black, --brand und --accent ab, die der
Betrieb ueber /branding.css setzt (P0-7). Nur "falsch" und "in Ordnung" sind eigene Variablen mit
neutraler Vorgabe - ein Betrieb mit roter Marke soll seine Fehlermeldung trotzdem lesen koennen. */
:root { --bad: #ff9b8a; --good: #9ed9a0; --line: color-mix(in srgb, var(--ink) 15%, transparent); }
.card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 10px 0;
background: color-mix(in srgb, var(--black) 70%, transparent); }
.card h3 { margin: 0 0 8px; font-size: 1rem; }
/* Vom Telefon aus gedacht: ein Feld ist eine Zeile, Beschriftung ueber der Eingabe, Eingabe ueber
die volle Breite. 48px Mindesthoehe ist die Tippflaeche am Tisch, 1rem Schriftgroesse verhindert
das Hineinzoomen von iOS, und box-sizing (oben) haelt die Breite in der Spalte - also keine
waagerechte Rollleiste. */
.field { display: block; margin: 10px 0; }
.field > span { display: block; font-size: .85rem; opacity: .8; margin-bottom: 4px; }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field select, .field textarea {
width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 1rem; color: var(--ink);
background: color-mix(in srgb, var(--brand) 55%, var(--black));
border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 8px;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.check input:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.check input { flex: 0 0 auto; width: 24px; height: 24px; }
.btn { min-height: 48px; padding: 10px 18px; font: inherit; font-weight: 600; color: var(--black);
background: var(--accent); border: 0; border-radius: 8px; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--ink);
border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); }
.btn.danger { background: color-mix(in srgb, var(--bad) 55%, var(--black)); color: var(--ink); }
/* Link im Schaltflaechen-Look; eigene Klasse statt style-Attribut, weil die Richtlinie
style-src 'self' (P0-8) Inline-Stile sperrt. */
.btn-link { text-decoration: none; display: inline-block; }
.error, .field-validation-error, .validation-summary-errors { color: var(--bad); display: block; margin: 4px 0; }
.notice-ok { color: var(--good); margin: 8px 0; }
.muted { opacity: .7; font-size: .85rem; }
.hint { opacity: .8; font-size: .9rem; margin: 8px 0; }
.closed { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 8px; }
/* Der leere Aufzaehlungspunkt oben auf der Registrierung: asp-validation-summary schreibt die Liste
IMMER mit und versteckt ihr Platzhalter- per style-Attribut - genau das verwirft die
Richtlinie style-src 'self' (P0-8). Also wird hier versteckt, was nichts sagt: die ganze Liste im
gueltigen Zustand, das leere auch im Fehlerzustand. Gilt fuer alle Formulare, nicht nur fuer
die Registrierung (Login, Invite, Artikel, Kategorien, Betrieb anlegen, Betrieb). */
.validation-summary-valid, .field-validation-valid { display: none; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
.validation-summary-errors li:empty { display: none; }
/* Hinweisleiste des Testzugangs (P-4): ein Etikett, nicht ein Absatz. */
.trialnotice { display: inline-block; margin: 8px 0 0; padding: 2px 10px; border: 1px solid var(--accent);
border-radius: 999px; color: var(--accent); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
/* Zeilenteile des Gastes: Menge, Summe, Vorname, Nummer, Zustand. Bewusst NUR unter .guest, obwohl
das Board dieselben Namen benutzt: "die Board-Regeln sind spezifischer" stimmt nur fuer
Eigenschaften, die sie selbst setzen. .board .tile .state setzt keine Deckkraft - eine freie
Regel .state { opacity: .75 } haette das Zustandswort auf der roten und der goldenen Kachel
gedimmt, und fett fuer "bestaetigt" haette es von "neu" nicht mehr zu unterscheiden gemacht
(B1-3). Das Board bleibt deshalb bei seinen Regeln in admin.css. */
.guest .qty { font-variant-numeric: tabular-nums; opacity: .85; }
.guest .sum { margin: 10px 0 0; font-weight: 600; font-size: 1.05rem; }
.guest .guestname { font-weight: 600; }
.guest .ordernumber { font-weight: 700; font-variant-numeric: tabular-nums; }
.guest .state { font-size: .85rem; opacity: .75; }
.guest .line.new .name, .guest .line.confirmed .name { font-weight: 600; }
.guest .line.delivered { opacity: .6; }
.guest .line.cancelled { opacity: .5; text-decoration: line-through; }
/* ---- Gast: Deckel und Bestellen (Karte) ------------------------------------------------------
Nur unter .guest: dieselben Namen (tab, lines, cart) bedeuten auf dem Board an der Wand etwas
anderes, und davon darf die Wand nichts mitbekommen. Die Klasse setzen _Layout und die Karte. */
.guest .tab, .guest .cart { margin: 16px 0; padding: 12px; border: 1px solid var(--line);
border-radius: 10px; background: color-mix(in srgb, var(--black) 70%, transparent); }
.guest .tab h2, .guest .cart h2 { margin: 0 0 8px; }
.guest .lines { list-style: none; margin: 0; padding: 0; }
.guest .line { display: grid; grid-template-columns: auto 1fr auto; column-gap: 8px;
align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.guest .line .state, .guest .line .strike-reason { grid-column: 1 / -1; }
.guest .cart label { display: block; font-size: .85rem; opacity: .8; margin-bottom: 4px; }
.guest .cart input[type=text] { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit;
font-size: 1rem; color: var(--ink); background: color-mix(in srgb, var(--brand) 55%, var(--black));
border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 8px; }
/* Die beiden Knoepfe der Karte: "Bestellen" ueber die ganze Breite, "+" eine quadratische
Tippflaeche rechts in der Artikelzeile. */
.guest .send { width: 100%; min-height: 52px; margin-top: 10px; font: inherit; font-weight: 600;
color: var(--black); background: var(--accent); border: 0; border-radius: 8px; cursor: pointer; }
.guest .plus { grid-column: 2; justify-self: end; width: 48px; height: 48px; font: inherit;
font-size: 1.5rem; line-height: 1; color: var(--accent); background: transparent;
border: 1px solid var(--accent); border-radius: 8px; cursor: pointer; }
.guest .withdraw { color: var(--accent); display: inline-block; padding: 8px 0; min-height: 44px; }