:root {
--navy: #01152B;
--gold: #EBB42C;
--rot: #E7240E;
--gruen: #2E9E4F;
--grau: #6b7280;
--kupfer: #B47049;
--hintergrund: #f4f5f7;
color-scheme: light dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { touch-action: manipulation; }
/* Rolle "Service" arbeitet spuerbar besser im Querformat (siehe manifest-service.json,
orientation:landscape - wirkt aber nur bei installierter PWA unter Android, iPhones
drehen sich nicht automatisch). Deshalb zusaetzlich dieser Hinweis-Screen, der bei
Hochformat auf Handy-Breite ueberblendet; ueber den Weiter-Button abschaltbar, damit
niemand ausgesperrt wird (z.B. bei aktiver Hochformat-Sperre im Handy-Betriebssystem). */
.quer-hinweis { display: none; }
.quer-hinweis-inhalt button.btn { background: var(--gold); color: #1a1a1a; margin-top: 16px; }
@media (max-width: 640px) and (orientation: portrait) {
.quer-hinweis:not(.ausgeblendet) {
display: flex; position: fixed; inset: 0; z-index: 9999;
background: var(--navy); color: #fff; align-items: center; justify-content: center;
text-align: center; padding: 24px; font-size: 1.2em; line-height: 1.5;
}
.quer-hinweis-inhalt { max-width: 320px; }
}
body {
font-family: "Segoe UI", Arial, sans-serif;
margin: 0;
background: var(--hintergrund);
color: #1a1a1a;
font-size: 17px;
}
/* Optionales Firmenlogo als Wasserzeichen (siehe /einstellungen/betrieb) - fest im Hintergrund,
so groß wie der Bildschirm es zulässt. Eigenes ::before-Element statt background-image direkt
auf body: die Deckkraft läuft über normales CSS "opacity" (Standard-Alphablending), nicht über
ein Bild mit fest eingebrannter Mini-Deckkraft - Letzteres führte in einer früheren Instanz zu
sichtbarem Dithering (Karomuster) beim Verrechnen sehr niedriger Alpha-Werte. */
body.hat-wasserzeichen::before {
content: "";
position: fixed;
inset: 0;
background-image: var(--wasserzeichen-url);
background-repeat: no-repeat;
background-position: center center;
background-size: min(90vw, 90vh);
opacity: .10;
pointer-events: none;
}
@media (prefers-color-scheme: dark) {
body { background: #14181f; color: #e8e8e8; }
.card, .plan-tisch, .tabelle, .artikel-kachel { background: #1f2530 !important; color: #e8e8e8 !important; }
.tabelle th { background: #262c38 !important; }
}
.topbar {
background: var(--navy);
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
flex-wrap: wrap;
gap: 8px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
/* Auf Handys mit wenig Höhe (typisch: Service-Rolle quer gehalten, damit Tischplan/Platz-
Anordnung richtig aussieht) frisst das feststehende Menüband zu viel vom knappen
Bildschirm - dort lieber wie gewohnt mitscrollen lassen. */
@media (max-height: 500px) {
.topbar { position: static; box-shadow: none; }
}
.topbar .brand { color: var(--gold); font-weight: bold; font-size: 1.25em; text-decoration: none; }
.brand-version { color: rgba(255,255,255,.55); font-size: .7em; margin-left: 4px; white-space: nowrap; }
/* Name des Mandanten/Betriebs - groß und mittig in der Titelzeile, damit bei mehreren
gleichzeitig geöffneten Instanzen (verschiedene Mandanten in verschiedenen Tabs) sofort
erkennbar ist, in welcher man gerade arbeitet (siehe Kassenbindung-Mehrfachlogin-Thema). */
.topbar-mandant {
flex: 1 1 auto;
text-align: center;
color: #fff;
font-size: 1.35em;
font-weight: bold;
letter-spacing: .02em;
min-width: 120px;
}
.topbar nav a {
color: #fff; margin-left: 6px; text-decoration: none;
padding: 10px 14px; border-radius: 6px; display: inline-block;
}
/*