/* ==========================================================================
Buchhaltung — Denis Kebap
Neubau "Cockpit mit Denis-Kebap-Seele" (27.09.2026, von Bubby in drei
Bildrunden freigegeben, D-050). Der Aufbau ist neu: Kacheln mit grossen
Zahlen, keine Kopfleiste, unten eine schwarze Leiste mit goldenem Plus,
die Seite "Alles" statt einer Schublade, Belege als Karten.
Die Seele bleibt: Sand als Tisch (#e5e0d3), helle Karten (#f6f5f0) mit
harter Kante nach rechts unten, Schwarz #1D1C1C, Gold #a89069, Montserrat
400/500/700 mit goldener Kaushan-Script-Unterzeile, das runde Logo mit
Ring und der Stempel "So muss Döner" (Originaldateien). Neusiedl schwarz,
Bruck gold.
Neu und mit Bedeutung: Paprika #a33b25 heisst ueberfaellig, Kraeuter
#426a33 heisst bezahlt (bewusste Ausnahme von "kein Rot"); beide eine
Stufe tiefer als im Entwurf, damit kleine Schrift 4,5 : 1 schafft.
Vier Radien: 20 fuer Kacheln und Karten, 26 fuer grosse Flaechen, 14 fuer
Knoepfe und Felder, 8 fuer das Kleine; voll gerundet fuer Kapseln. Kein
weicher Schatten. Hell, Dunkel und Schwarz (OLED) bleiben.
Beide Schriften liegen als Datei im Projekt (public/fonts), SIL OFL 1.1;
nichts wird von fremden Servern nachgeladen. PT Sans liegt noch dort,
wird aber nicht mehr geladen.
========================================================================== */
/* Kaushan Script 400 */
@font-face {
font-family: 'Kaushan Script';
font-style: normal;
font-weight: 400;
font-display: fallback;
src: url(fonts/kaushan-script-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Kaushan Script';
font-style: normal;
font-weight: 400;
font-display: fallback;
src: url(fonts/kaushan-script-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat 400 */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: fallback;
src: url(fonts/montserrat-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: fallback;
src: url(fonts/montserrat-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat 500: fester Schnitt aus der vorhandenen variablen Datei.
So verwendet auch WebKit 500 statt deren frueherem Grundschnitt 100. */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-display: fallback;
src: url(fonts/montserrat-500-latin-ext.woff2?v=2026-09-20-statisch) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-display: fallback;
src: url(fonts/montserrat-500-latin.woff2?v=2026-09-20-statisch) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat 700: ebenfalls als fester, lokal vorhandener Schnitt. */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: fallback;
src: url(fonts/montserrat-700-latin-ext.woff2?v=2026-09-20-statisch) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: fallback;
src: url(fonts/montserrat-700-latin.woff2?v=2026-09-20-statisch) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
Token. Die Flaechen stammen aus der Farbtabelle des Skills; der Neubau
bringt zwei Farben mit fester Bedeutung dazu (Paprika, Kraeuter).
========================================================================== */
:root {
/* Marke: Gold ist der Akzent. */
--gold: #a89069;
/* Das Schwarz der Ansicht ist #1D1C1C, nicht #000000. */
--black: #1d1c1c;
/* Neubau: zwei Farben mit Bedeutung (Bubby: "neue Farben, wenn sie einen
Sinn machen"). Paprika heisst ueberfaellig (und warnt beim Abmelden),
Kraeuter heisst bezahlt oder in Ordnung. Beide stehen so tief, dass
kleine Schrift darin auf ihrer zarten Flaeche, der Karte und dem Grund
4,5 : 1 schafft (tests/KontrastTest.php).
Gold als Schrift auf hellem Grund steht eine Stufe tiefer, damit die
grosse goldene Unterzeile auf dem Sand 3 : 1 schafft; kleine goldene
Versalien stehen noch eine Stufe tiefer und schaffen 4,5 : 1. */
--paprika: #a33b25;
--paprika-zart: #f2dcd2;
--auf-paprika: #f1efe7;
/* Safran heisst bald faellig, bitte bald ansehen (Bubby, 15.10.2026): Rechnung
in den naechsten 7 Tagen, offene Frei-Anfrage, Zahl an der Leiste. Die
Schrift steht tief (4,5 : 1 auf Karte und zarter Flaeche); die gefuellte
Kapsel traegt Schwarz. Rangfolge: ueberfaellig vor bald vor offen. */
--safran: #8f5507;
--safran-flaeche: #e3a54a;
--safran-zart: #f7e3bd;
--auf-safran: #1d1c1c;
--kraeuter: #426a33;
--kraeuter-zart: #e1e8d5;
/* Paprika auf Schwarz in jeder Darstellung (Wert aus Dunkel): der Strich
"Schnitt der letzten 12 Monate" auf der schwarzen Heldenkachel. */
--paprika-auf-dunkel: #e0785c;
--gold-schrift: #8c7550;
--gold-klein: #715d3d;
/* Die harte goldene Kante: Heldenkachel, Leiste, Bon, gewaehlter Filter. */
--kante-gold: 3px 3px 0 0 var(--gold);
/* A: Sand als Seitenboden, Papier und Leisten bleiben die helle
Markenflaeche. Das Markenbeige ist weiterhin die gemeinsame Quelle
der hellen Karten; seine ausgeschriebene Farbe dient als Rueckfall. */
--farbe-grund: #f1efe7;
--paper: var(--band);
--card: #f6f5f0;
--card: color-mix(in srgb, var(--farbe-grund) 62%, #fff);
--paper-2: #f6f5f0;
--paper-2: color-mix(in srgb, var(--farbe-grund) 62%, #fff);
--band: #e5e0d3;
--line: #dcdbc9;
/* Licht von links oben, geschlossene Seitenwand nach rechts unten.
Die 1-px-Schritte schliessen auch die Rundungen; kein Weichzeichner.
Der dunklere Ton entsteht aus den vorhandenen Markenfarben (mindestens
2 : 1 auf dem Sand). Im Cockpit ist die Wand drei statt fuenf Stufen
tief: die Kacheln stehen dichter und bleiben trotzdem sichtbar erhaben. */
--kante-farbe: color-mix(in srgb, var(--line) 68%, var(--black));
--kante-licht: color-mix(in srgb, var(--card) 30%, #fff);
--kante: inset 1px 1px 0 0 var(--kante-licht),
1px 1px 0 0 var(--line),
2px 2px 0 0 var(--kante-farbe),
3px 3px 0 0 var(--kante-farbe);
/* Trennlinie, Pille und Zeitachse sind dieselbe Farbe. */
--line-card: var(--line);
/* Eingabefelder liegen vertieft (Bubby, 26.09.2026: Felder verschwanden in
der gleich hellen Karte). Nach dem Merksatz des Skills liegt, was
hineingedrueckt ist, tiefer als der Grund: die Flaeche traegt den Bandton,
innen links oben sitzt eine harte Stufe als Gegenstueck zur erhabenen
Kartenkante, und der Rand schafft auf Karte, Grund und Feld 3 : 1 —
gerechnet aus Linie und Schwarz. Die Zustaende (Fokus, gesperrt, nur
lesen) schalten genau diese vier Schalter am Feld um. */
--input-line: color-mix(in srgb, var(--line) 50%, var(--black));
--field: var(--band);
--mulde: inset 2px 2px 0 0 var(--kante-farbe);
--feld-schrift: var(--ink);
--row-hover: color-mix(in srgb, var(--band) 60%, var(--card));
--pill-line: var(--line);
--achse: var(--line);
--dark-row: #363533;
--square: #f6f5f0;
--square: color-mix(in srgb, var(--farbe-grund) 62%, #fff);
/* Schrift */
--ink: #141414;
--muted: #655c5c;
--disabled-face: #9a9998;
--disabled-ink: #bebdbc;
--switch-off: #665d5e;
/* Blatt von unten und Dialog: seit dem warmen Grund keine weissen
Flaechen mehr, sondern die eine Stufe hellere Flaeche darauf. In Dunkel
und Schwarz traegt dieser Schalter die dunkle Flaeche. */
--bar: #f6f5f0;
--bar: color-mix(in srgb, var(--farbe-grund) 62%, #fff);
/* Schrift und kleine Flaechen auf dunklem Grund tragen das Beige der Marke,
nicht Weiss. Gemessen 14,8 : 1 auf #1D1C1C, 16,0 : 1 im Dunkel-Modus und
18,2 : 1 auf Reinschwarz — weit ueber den geforderten 4,5. Weiss bleibt
nur der eingebackene Logo-Ring und der QR-Code. */
--auf-dunkel: #f1efe7;
/* Die leise Zeile auf dunklem Grund: dasselbe Beige, nur zurueckgenommen.
Aus dem Schalter gerechnet, damit kein zweiter Grauton entsteht. */
--auf-dunkel-leise: color-mix(in srgb, var(--auf-dunkel) 84%, var(--black));
/* Rollen: alles laeuft auf Schwarz, Gold oder Grau hinaus. */
--accent: #a89069;
--accent-soft: rgba(168, 144, 105, 0.14);
--accent-wash: rgba(168, 144, 105, 0.07);
--signal: var(--ink);
--danger: var(--ink);
--moss: var(--ink);
/* Tiefe nur ueber die harte Kartenkante, kein weicher Schlagschatten. */
--shadow: none;
--shadow-lift: none;
--bar-shadow: none;
--focus-ring: none;
/* Ein Schalter je Rolle. Zwei Familien (Montserrat und Kaushan Script),
drei Schnitte, elf Grade — und ausserhalb dieses Blocks steht keine
Schriftart, kein Schnitt und kein Grad mehr. Das Cockpit braucht zwei
Grade mehr als der Skill: die grosse Zahl der Heldenkachel und die Zahl
einer Kachel (Neubau 27.09.2026). */
--schrift-titel: 'Montserrat'; /* Ueberschriften, Knoepfe, Preise, Zahlen */
--schrift-text: 'Montserrat'; /* Fliesstext, Beschreibungen, Formulare — gleiche Familie wie Titel */
--schrift-gold: 'Kaushan Script'; /* nur die goldene Unterzeile */
--sans: var(--schrift-text);
--head: var(--schrift-titel);
--script: var(--schrift-gold);
--schnitt-titel: 500; /* Titel, Knoepfe, Preise, Zahlen */
--schnitt-text: 400; /* Fliesstext; auch Kaushan */
--schnitt-stark: 700; /* Titel in Versalien, grosse Zahlen, Leiste, Hervorhebung */
/* Grundschrift 16, alle Stufen daraus. */
--grad-held: 3.25rem; /* 52 — die grosse Zahl der Heldenkachel */
--grad-vorstellung: 2.5rem; /* 40 — Seitentitel am Schreibtisch, Anmeldung */
--grad-seitentitel: 2.25rem; /* 36 — Seitentitel am Handy */
--grad-unterzeile: 1.75rem; /* 28 — goldene Unterzeile */
--grad-zahl: 1.625rem; /* 26 — Zahl einer Kachel */
--grad-abschnitt: 1.25rem; /* 20 — Abschnitts- und Kartentitel */
--grad-karte: 1.0625rem; /* 17 — Kartenueberschrift, Listentitel */
--grad-text: 1rem; /* 16 — Fliesstext */
--grad-beschreibung: 0.9375rem; /* 15 — Beschreibung, Kategorien */
--grad-klein: 0.8125rem; /* 13 — Leiste, Versalien */
--grad-marke: 0.6875rem; /* 11 — Zahl an der Leiste, Kachelbeschriftung */
--lh-tight: 1.2;
--lh-body: 1.5;
--lh-prose: 1.6;
/* Vier Radien, mehr nicht: Kachel und Karte, grosse Flaeche, Knopf, Kleines. */
--radius: 20px;
--radius-gross: 26px;
--radius-btn: 14px;
--radius-tight: 8px;
--abstand-klein: 8px;
--abstand: 16px;
--abstand-gross: 24px;
--abschnitt-abstand: 32px;
--rand: 16px;
--karte-innen: 20px;
--feld-hoehe: 48px;
/* Keine Kopfleiste mehr: oben reicht ein Rand. Unten schwebt die Leiste
(72 hoch, 14 ueber dem Rand), darueber bleibt Luft. */
--kopf-abstand: 16px;
--dock-hoehe: 72px;
--dock-luft: 14px;
--fuss-abstand: calc(var(--dock-hoehe) + var(--dock-luft) + 18px);
--lesebreite: 760px;
--personenbreite: 420px;
--formularbreite: 960px;
/* Breite des Inhalts: die Ansicht und die Leiste rechnen aus diesem Wert. */
--bedienbreite: 1120px;
--inhalt: var(--bedienbreite);
color-scheme: light;
}
/* Dunkel ist eine Zugabe von BuchWeb (D-033), im Skill nicht vorgesehen:
dieselbe Formensprache, nur die Flaechen kehren sich um. */
html.dark {
--paper: #121111;
--card: #292827;
--paper-2: #292827;
--band: #1f1f1f;
/* A: waermere, klar getrennte Stufen; Linien bleiben sichtbar,
die Seitenwand liegt unter der Karte. */
--line: #3d3b39;
--kante-farbe: #050505;
--kante-licht: #4a4845;
/* Feld unter Seite und Karte, mit harter innerer Stufe. Der Rand
behaelt mindestens 3 : 1 auf jeder Unterlage. */
--field: #0a0a0a;
--input-line: color-mix(in srgb, var(--auf-dunkel) 42%, var(--black));
--mulde: inset 2px 2px 0 0 var(--kante-farbe);
--row-hover: #33312f;
--square: #33312f;
--ink: var(--auf-dunkel);
--muted: var(--auf-dunkel-leise);
--disabled-face: #454545;
--disabled-ink: #8a8a8a;
--bar: var(--black);
--accent-soft: rgba(168, 144, 105, 0.22);
--accent-wash: rgba(168, 144, 105, 0.12);
/* Auf dunklem Grund traegt Gold jede Groesse (5,6 : 1). */
--signal: #a89069;
--danger: #a89069;
--moss: #a89069;
--gold-schrift: var(--gold);
--gold-klein: var(--gold);
/* Paprika und Kraeuter hell auf dunklem Grund, ihre zarten Flaechen tief. */
--paprika: #e0785c;
--paprika-zart: #3a1d15;
--auf-paprika: #1d1c1c;
--safran: #e3a54a;
--safran-zart: #3a2a12;
--kraeuter: #9dc684;
--kraeuter-zart: #1f2a18;
color-scheme: dark;
}
/* Reines Schwarz (D-033), OLED: genau fuenf Schalter stehen auf #000000
(PURE-BLACK-ACCEPTANCE.md). Das Band bleibt #1f1f1f wie in Dunkel; ein
Feld traegt hier allein seinen Rand und die innere Stufe. */
html.dark.black {
--paper: #000000;
--paper-2: #000000;
--card: #000000;
--field: #000000;
--bar: #000000;
--kante-farbe: #2a2928;
--kante-licht: #5c5a57;
--square: #1f1f1f;
--paprika-zart: #2a140e;
--safran-zart: #2a1d0b;
--kraeuter-zart: #141d10;
}
/* Grosse Schrift am Handy (Bubby, 24.10.2026): alle Grade stehen in rem und
wachsen mit der Schrift, die am Geraet eingestellt ist. Das iPhone blaest
im Querformat nichts zusaetzlich auf. */
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
scroll-padding-top: calc(var(--kopf-abstand) + env(safe-area-inset-top));
scroll-padding-bottom: calc(var(--fuss-abstand) + env(safe-area-inset-bottom) + 16px);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
font-family: var(--sans);
font-size: var(--grad-text);
font-weight: var(--schnitt-text);
line-height: var(--lh-body);
/* Ein Wort, das allein laenger ist als seine Zeile (E-Mail, IBAN, langer
Name), bricht um, statt aus der Karte zu ragen. Sonst bleibt alles. */
overflow-wrap: break-word;
background: var(--paper);
color: var(--ink);
}
html.dark body { background: var(--paper); }
/* Als App auf dem iPhone (black-translucent, viewport-fit=cover) liegt die
Statusleiste ueber der Seite. Seit es keine Kopfleiste mehr gibt, deckt ein
Streifen im Seitengrund diesen Bereich ab, damit beim Rollen nichts unter
Uhr und Akku liegt. Im Browser ist der Bereich 0 hoch. */
body::before {
content: "";
position: fixed;
inset: 0 0 auto;
height: env(safe-area-inset-top);
background: var(--paper);
z-index: 35;
pointer-events: none;
}
button, input, select { font: inherit; }
textarea { font: inherit; }
button { cursor: pointer; }
button, .ghost, .primary { min-height: 44px; }
:focus-visible {
/* Tastaturfokus muss auch ueber aktiven, ausgewaehlten und leeren
Bauteilen sichtbar bleiben. Deren Zustandsrand darf ihn nie ersetzen.
Auf schwarzen Flaechen (Leiste, Heldenkachel, Tafel) ist er gold. */
outline: 2px solid var(--fokus, var(--ink)) !important;
outline-offset: var(--fokus-abstand, 3px) !important;
}
/* Ganze Zeilen liegen am beschnittenen Kartenrand: Fokus nach innen
versetzen, mit Abstand zur vorhandenen Auswahlumrandung. */
.listenzeile, .settings-list-row, .settings-nav-row, .pin-change-toggle { --fokus-abstand: -4px; }
/* Schwarze Flaechen: was darin liegt, bekommt den goldenen Ring. Eine
schwarze Kachel, die selbst ein Knopf ist, zieht ihn nach innen — aussen
laege Gold auf dem Sand (2,3 : 1). */
.dock, .kassa-hero, .login-tafel, .me-hero { --fokus: var(--gold); }
.kpi.kpi-hero, .konto-kachel { --fokus: var(--gold); --fokus-abstand: -6px; }
html.dark .kpi.kpi-hero, html.dark .konto-kachel { --fokus: var(--gold); }
.money {
font-family: var(--head);
font-weight: var(--schnitt-titel);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
/* Ein Betrag bricht nie mitten in der Zahl oder nach dem Vorzeichen. */
white-space: nowrap;
}
/* ==========================================================================
Sinnbilder: duenne Strichzeichnung in der Schriftfarbe.
========================================================================== */
.ico {
display: block;
width: 24px;
height: 24px;
flex: none;
}
.mark {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
line-height: 1;
flex: none;
}
.mark .ico { width: 1.15em; height: 1.15em; }
/* Kein Platz fuer fremde Zeichen: die Oberflaeche kennt nur ihre eigenen
Strichsinnbilder, ein unbekanntes Zeichen bekommt das neutrale. Deshalb
gibt es hier keine Emoji-Schriftfamilie mehr. */
.mark-text { filter: grayscale(1); }
/* ==========================================================================
Ueberschriften
========================================================================== */
h1 {
font-family: var(--head);
font-weight: var(--schnitt-titel);
font-size: var(--grad-seitentitel);
line-height: var(--lh-tight);
margin: 0;
}
/* Erkennungszeichen der Marke: Versalien, darunter die goldene
Schreibschrift als zweite Zeile ("HEUTE / im Laden"). Beide zusammen
ergeben einen Satz. Die Unterzeile steht in der tieferen Goldstufe
(3,3 : 1 auf dem Sand), auf dunklem Grund im Markengold. */
.heading {
margin: 0;
font-family: var(--head);
font-weight: var(--schnitt-stark);
line-height: 1;
text-transform: uppercase;
}
.heading > span { display: block; }
.heading-subtitle {
display: block;
margin-top: .08em;
font-family: var(--script);
font-size: var(--grad-unterzeile);
font-style: normal;
font-weight: var(--schnitt-text);
line-height: 1.15;
text-transform: none;
color: var(--gold-schrift);
}
/* Abschnittsueberschrift in Versalien: klein, grau, weiter Buchstabenabstand.
Im Zettel ordnet sie die Feldgruppen (Haben, Eigenverbrauch, Schuss) ueber
den Feldnamen, statt mit ihnen um die Groesse zu konkurrieren. */
.eyebrow,
.heute-more-title,
.notify-head,
.zeit-kategorien,
.zettel-mengenpaar legend {
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
color: var(--muted);
}
.eyebrow,
.heute-more-title,
.notify-head,
.zettel-mengenpaar legend {
text-transform: uppercase;
letter-spacing: .08em;
}
.sub { color: var(--muted); font-size: var(--grad-beschreibung); margin: 0 0 20px; line-height: var(--lh-body); }
label { display: block; font-size: var(--grad-text); font-weight: var(--schnitt-titel); margin-bottom: 8px; }
.muted { color: var(--muted); font-size: var(--grad-beschreibung); }
.empty { padding: 12px var(--karte-innen); color: var(--muted); }
/* Abstaende gehoeren ins Stilblatt, nicht in den Seitentext. Diese vier
Klassen tragen die wenigen Sonderfaelle, die frueher als style="…" am
Element klebten. */
.empty-anschluss { padding-top: 0; }
.muted-abgesetzt { margin-top: 8px; }
.liste-abgesetzt { margin-top: 12px; }
/* Keine dritte Schriftfamilie: gleich breite Ziffern reichen fuer IBAN,
Nummer und Betrag. Die Marke kennt nur Montserrat und Kaushan Script. */
.mono {
font-family: var(--sans);
font-size: var(--grad-beschreibung);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
letter-spacing: .01em;
}
.sub, .filter-note, .hint, .qr-note, .tool-hint { line-height: var(--lh-prose); }
/* ==========================================================================
Knoepfe: 48 hoch, Radius 14 (--radius-btn). Hauptknopf volle schwarze Flaeche ohne Rahmen,
Zweitknopf wie die Seite mit 1 px Linie, gesperrt #9a9998 auf #bebdbc.
========================================================================== */
.primary {
width: 100%;
background-color: var(--black);
color: var(--auf-dunkel);
border: 0;
min-height: 48px;
border-radius: var(--radius-btn);
font-family: var(--head);
font-size: var(--grad-text);
font-weight: var(--schnitt-titel);
padding: 10px 20px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background-color 0.15s ease;
}
/* Ueberfahren hellt den Hauptknopf auf wie eine Zeile auf Schwarz; im
Dunkeln tritt das Beige zurueck. Vorher wechselte er nur von #1d1c1c auf
#141414 — das sah niemand. */
.primary:hover:not(:disabled),
.primary:focus-visible:not(:disabled) { background-color: var(--dark-row); }
html.dark .primary { background-color: var(--auf-dunkel); color: var(--black); }
html.dark .primary:hover:not(:disabled),
html.dark .primary:focus-visible:not(:disabled) { background-color: var(--auf-dunkel-leise); }
.primary:disabled {
background-color: var(--disabled-face);
color: var(--disabled-ink);
cursor: wait;
}
/* Genauso genau wie die Dunkel-Regel oben, sonst sieht der gesperrte Knopf
in Dunkel und Schwarz aus wie ein freigegebener (bis 26.09.2026). */
html.dark .primary:disabled {
background-color: var(--disabled-face);
color: var(--disabled-ink);
}
.ghost {
background-color: var(--paper);
color: var(--black);
border: 1px solid var(--line);
border-radius: var(--radius-btn);
min-height: 48px;
padding: 10px 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--head);
font-size: var(--grad-text);
font-weight: var(--schnitt-titel);
text-decoration: none;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ghost:hover:not(:disabled) { border-color: var(--black); }
.ghost:disabled {
background-color: var(--disabled-face);
color: var(--disabled-ink);
border-color: var(--disabled-face);
cursor: not-allowed;
}
html.dark .ghost { background-color: transparent; color: var(--auf-dunkel); border-color: var(--line); }
html.dark .ghost:hover:not(:disabled) { border-color: var(--auf-dunkel); }
html.dark .ghost:disabled {
background-color: var(--disabled-face);
color: var(--disabled-ink);
border-color: var(--disabled-face);
}
.compact-btn {
min-height: 48px;
min-width: auto;
padding: 10px 18px;
font-size: var(--grad-text);
flex: none;
width: auto;
}
/* Der helle Zweitknopf der Zeitachse: 32 hoch, Radius 8 (--radius-tight), 1 px Linie. */
.zweitknopf {
min-height: 32px;
padding: 4px 14px;
border: 1px solid var(--achse);
border-radius: var(--radius-tight);
background: var(--paper);
color: var(--black);
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color 0.15s ease;
}
.zweitknopf:hover { border-color: var(--black); }
html.dark .zweitknopf { background: transparent; color: var(--auf-dunkel); }
html.dark .zweitknopf:hover { border-color: var(--auf-dunkel); }
.icon-btn {
background: var(--paper);
border: 1px solid var(--line);
color: var(--black);
text-decoration: none;
width: 40px;
min-width: 40px;
min-height: 40px;
height: 40px;
padding: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.icon-btn .ico { width: 20px; height: 20px; }
html.dark .icon-btn { background: transparent; color: var(--auf-dunkel); }
.icon-btn:not(:disabled):hover { background: var(--row-hover); border-color: var(--black); }
html.dark .icon-btn:not(:disabled):hover { border-color: var(--auf-dunkel); }
.icon-btn:disabled { color: var(--disabled-ink); cursor: not-allowed; }
html.dark .icon-btn:disabled { color: var(--disabled-ink); }
.text-btn {
background: none;
border: 0;
color: var(--black);
font-weight: var(--schnitt-titel);
padding: 0;
min-height: 0;
text-decoration: underline;
text-underline-offset: 3px;
}
html.dark .text-btn { color: var(--gold); }
/* Abzeichen: voll gerundet, schwarz mit weisser Schrift oder beige. */
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--card);
color: var(--black);
border: 0;
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
padding: 6px 12px;
border-radius: 999px;
min-height: 32px;
}
html.dark .badge { background: var(--square); color: var(--auf-dunkel); }
/* Schwarzes Abzeichen: hervorstechen ohne Farbe, in der Hinweis-Karte. An
einer ueberfaelligen Listenzeile traegt es Paprika (darunter). */
.abzeichen {
display: inline-flex;
align-items: center;
margin: 0;
padding: 4px 10px;
border-radius: 999px;
background: var(--black);
color: var(--auf-dunkel);
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
line-height: 1.2;
}
html.dark .abzeichen { background: var(--auf-dunkel); color: var(--black); }
/* Ueberfaellig: Paprika, in jeder Darstellung. */
.abzeichen.ist-ueberfaellig,
html.dark .abzeichen.ist-ueberfaellig {
background: var(--paprika);
color: var(--auf-paprika);
text-transform: uppercase;
letter-spacing: .06em;
font-weight: var(--schnitt-stark);
}
.zeit-karte .abzeichen { margin: 0 0 8px; }
td.status .abzeichen { margin-left: 6px; }
/* ==========================================================================
Filterpillen und Reiter
========================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-abgesetzt { margin-bottom: 12px; }
/* Ruhend 1 px Linie, gewaehlt 2 px schwarz mit beiger Fuellung. */
.chip {
background: transparent;
color: var(--black);
border: 1px solid var(--pill-line);
border-radius: 999px;
padding: 6px 16px;
font-family: var(--head);
font-weight: var(--schnitt-titel);
font-size: var(--grad-beschreibung);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 40px;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.chip.active {
background: var(--card);
outline: 2px solid var(--black);
outline-offset: -2px;
border-color: transparent;
}
html.dark .chip { color: var(--auf-dunkel); }
html.dark .chip.active { outline-color: var(--auf-dunkel); }
/* Filterkacheln (Belege): Zahl gross, Wort in Versalien darunter. Gewaehlt
ist die Kachel schwarz mit goldener Zahl und goldener Kante; eine Zahl
Ueberfaelliges steht in Paprika. */
.chip.filterkachel {
flex: none;
min-width: 96px;
min-height: 68px;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 6px;
padding: 10px 14px 10px 12px;
border: 0;
border-radius: var(--radius);
background: var(--card);
box-shadow: var(--kante);
text-align: left;
}
.chip.filterkachel b {
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-stark);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.chip.filterkachel span {
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
.chip.filterkachel.ist-paprika b { color: var(--paprika); }
.chip.filterkachel.ist-safran b { color: var(--safran); }
.chip.filterkachel.active,
html.dark .chip.filterkachel.active {
outline: 0;
background: var(--black);
color: var(--auf-dunkel);
box-shadow: var(--kante-gold);
}
.chip.filterkachel.active b { color: var(--gold); }
.chip.filterkachel.active span { color: var(--auf-dunkel-leise); }
html.dark .chip.filterkachel { background: var(--card); }
.chip.filterkachel.geld-summe { cursor: default; }
/* Reiter: reiner Text, aktiv mit 3er Unterstrich, ruhend #655c5c. */
.tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
}
.tab {
background: transparent;
border: 0;
color: var(--muted);
font: inherit;
font-size: var(--grad-text);
font-weight: var(--schnitt-text);
padding: 8px 12px;
min-height: 44px;
cursor: pointer;
white-space: nowrap;
}
.tab.active {
font-family: var(--head);
font-weight: var(--schnitt-titel);
color: var(--black);
box-shadow: inset 0 -2px 0 var(--black);
}
html.dark .tab.active { color: var(--auf-dunkel); box-shadow: inset 0 -2px 0 var(--auf-dunkel); }
.segment {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
max-width: 28rem;
}
/* Sehr schmale Handys (bis 359 px): vier Worte wie "Schwarz" passen nicht
nebeneinander, die Wahl steht dann zu zweit. */
@media (max-width: 359px) {
.segment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.segment-btn {
border: 1px solid var(--pill-line);
background: transparent;
color: var(--black);
font-family: var(--head);
font-weight: var(--schnitt-titel);
font-size: var(--grad-beschreibung);
min-height: 40px;
border-radius: 999px;
cursor: pointer;
}
.segment-btn.active {
background: var(--card);
outline: 2px solid var(--black);
outline-offset: -2px;
border-color: transparent;
}
html.dark .segment-btn { color: var(--auf-dunkel); }
html.dark .segment-btn.active { outline-color: var(--auf-dunkel); }
/* Status: offen umrandet, erledigt schwarz gefuellt, Guthaben in Gold. */
.pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
background: var(--card);
color: var(--black);
white-space: nowrap;
}
.pill-open { background: transparent; color: var(--black); box-shadow: inset 0 0 0 1.5px var(--black); }
/* Bezahlt, zugeordnet, aktiv: Kraeuter. */
.pill-ok { background: var(--kraeuter-zart); color: var(--kraeuter); }
.pill-bald { background: var(--safran-zart); color: var(--safran); }
/* Guthaben: beige, nicht Gold — Gold traegt auf hellem Grund nur die Unterzeile. */
.pill-credit { background: var(--card); color: var(--black); box-shadow: inset 0 0 0 1px var(--pill-line); }
html.dark .pill { background: var(--square); color: var(--auf-dunkel); }
html.dark .pill-open { background: transparent; color: var(--auf-dunkel); box-shadow: inset 0 0 0 1px var(--auf-dunkel); }
html.dark .pill-ok { background: var(--kraeuter-zart); color: var(--kraeuter); }
html.dark .pill-bald { background: var(--safran-zart); color: var(--safran); }
html.dark .pill-credit { background: var(--gold); color: var(--black); }
/* ==========================================================================
Eingabefelder
========================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
.field-label input,
.settings-form input:not([type="checkbox"]),
select,
textarea,
.kurzname-input {
width: 100%;
min-height: 48px;
padding: 10px 14px;
border: 1px solid var(--input-line);
border-radius: var(--radius-btn);
background: var(--field);
box-shadow: var(--mulde);
color: var(--feld-schrift);
font: inherit;
font-size: var(--grad-text);
font-weight: var(--schnitt-text);
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
}
select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 20px 20px;
padding-right: 40px;
}
/* Der Pfeil ist ein Sinnbild: auf dunklem Grund traegt er das Beige. */
html.dark select {
background-image: url("data:image/svg+xml;utf8,");
}
textarea { min-height: 120px; resize: vertical; }
/* Zustaende schalten nur die Schalter des Felds um, am Feld selbst. So
greifen sie auch dort, wo ein genauerer Selektor das Feld zeichnet.
Beim Tippen bleibt die Mulde sichtbar; der kraeftige Schriftrand
zeigt das aktive Feld. Gesperrt und nur lesbar liegt es flach, im
Rahmen des Sperr-Graus: zu sehen, aber leiser als ein freies Feld. */
input:focus, select:focus, textarea:focus {
--input-line: var(--ink);
}
input:disabled, select:disabled, textarea:disabled {
--field: transparent;
--input-line: var(--disabled-face);
--feld-schrift: var(--muted);
--mulde: none;
cursor: not-allowed;
}
input[readonly], textarea[readonly] {
--field: transparent;
--input-line: var(--disabled-face);
--mulde: none;
}
/* iPhone-Safari blendet gesperrte Felder selbst ab und faerbt ihre Schrift;
die flache Form sagt "gesperrt" schon, der Wert bleibt lesbar. :where
haelt die Regel leiser als input.pin-hidden, das unsichtbar bleiben muss;
Haken und Auswahlknoepfe behalten die Sperre des Geraets. */
input:where(:disabled:not([type="checkbox"], [type="radio"])),
select:disabled,
textarea:disabled {
opacity: 1;
-webkit-text-fill-color: currentColor;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"],
input[type="radio"],
input[type="range"] { accent-color: var(--black); }
html.dark input[type="checkbox"],
html.dark input[type="radio"],
html.dark input[type="range"] { accent-color: var(--gold); }
.field-label {
display: block;
/* Im Raster nie breiter als die Karte, auch wenn eine Auswahl lange
Eintraege hat ("Google Chat, E-Mail als Reserve" bei grosser Schrift). */
min-width: 0;
margin: 0 0 14px;
color: var(--ink);
font-size: var(--grad-text);
}
.field-label input,
.field-label select,
.field-label textarea { display: block; margin-top: 6px; }
/* iOS Safari: appearance:none laesst das Datumsfeld leer und oeffnet keinen
Waehler. Der native Waehler bleibt, die innere Zeile behaelt eine Hoehe. */
input[type="date"] {
-webkit-appearance: auto;
appearance: auto;
}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-date-and-time-value {
display: inline-flex;
align-items: center;
min-height: 1.2em;
text-align: left;
}
/* Schalter: ein schwarz mit beigem Knopf rechts, aus wie die Seite mit
1 px Linie und Knopf #665d5e links. */
.switch {
appearance: none;
-webkit-appearance: none;
position: relative;
width: 48px;
height: 28px;
min-height: 28px;
margin: 0;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--paper);
flex: none;
cursor: pointer;
padding: 0;
accent-color: unset;
transition: background-color 0.2s ease;
}
.switch.on,
.switch:checked { background: var(--black); border-color: var(--black); }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }
.switch span,
.switch::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--switch-off);
transition: transform 0.2s, background-color 0.2s;
pointer-events: none;
}
button.switch::after { content: none; display: none; }
.switch.on span,
.switch:checked::after {
transform: translateX(20px);
background: var(--auf-dunkel);
}
html.dark .switch { background: transparent; }
html.dark .switch.on,
html.dark .switch:checked { background: var(--gold); border-color: var(--gold); }
/* ==========================================================================
Anmeldung
========================================================================== */
/* touch-action: manipulation nimmt auf der ganzen Anmeldung den
Doppeltipp-Zoom von iPhone-Safari raus, damit schnelles Tippen nicht
plötzlich die Seite heranzieht. Aufziehen mit zwei Fingern bleibt erlaubt —
dafuer gibt es bewusst kein user-scalable=no in der index.html. */
.login-shell {
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
padding: max(24px, env(safe-area-inset-top)) var(--rand) max(24px, env(safe-area-inset-bottom));
background: var(--paper);
touch-action: manipulation;
}
/* Die schwarze Tafel: Logo und Stempel klein und dezent (Bubby, 27.09.2026),
darunter "BUCHHALTUNG / Denis Kebap". Nur hier stehen beide Zeichen. */
.login-tafel {
container-type: inline-size;
width: min(420px, 100%);
padding: 22px 22px 20px;
border-radius: var(--radius-gross);
background-color: var(--black);
background-image: radial-gradient(110% 120% at 100% 0%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 60%);
color: var(--auf-dunkel);
box-shadow: var(--kante-gold);
text-align: center;
}
html.dark .login-tafel { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), var(--kante-gold); }
.login-marke {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 14px;
}
.login-logo {
width: 52px;
height: 52px;
object-fit: contain;
display: block;
touch-action: manipulation;
}
.login-stempel { display: block; width: auto; height: 50px; }
/* "BUCHHALTUNG" ist gemessen 7,85 em breit; auf der Tafel eines 320er
Handys wird es kleiner, statt ueber den Rand zu laufen. */
.login-titel { font-size: min(var(--grad-seitentitel), calc(100cqi / 8.4)); color: var(--auf-dunkel); }
.login-titel .heading-subtitle { color: var(--gold); }
.login-card {
width: min(420px, 100%);
background: transparent;
border: 0;
padding: 0;
text-align: center;
touch-action: manipulation;
}
.login-heading {
margin: 0 0 10px;
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-stark);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
}
.pin-dots {
display: flex;
width: 100%;
padding: 0;
border: 0;
background: transparent;
color: inherit;
justify-content: center;
align-items: center;
gap: 8px;
min-height: 3rem;
margin-bottom: 8px;
}
.pin-entry { position: relative; min-width: 0; }
.pin-entry-error { font-size: var(--grad-beschreibung); }
.pin-change-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
max-width: 510px;
}
.pin-rule { margin: 0 0 10px; font-size: var(--grad-beschreibung); }
.pin-entry-compact .pin-label {
display: block;
min-height: 3em;
margin: 0;
color: var(--muted);
font-size: var(--grad-beschreibung);
line-height: 1.4;
}
.pin-entry-compact .pin-dots { min-height: 28px; gap: 2px; flex-wrap: wrap; margin: 0 0 4px; }
.pin-entry-compact .pin-dot { width: 5px; height: 5px; }
.pin-entry-compact .pin-placeholder { font-size: var(--grad-beschreibung); }
.pin-entry-compact .pin-pad { gap: 4px; margin: 0; }
.pin-entry-compact .pin-key { height: 30px; min-height: 30px; padding: 0; font-size: var(--grad-beschreibung); }
.pin-entry-compact .pin-key .ico { width: 14px; height: 14px; }
/* Die Hinweiszeile bleibt beim Tippen leer, also haelt sie auch keinen Platz
mehr frei — sonst stuende unter jeder der drei kleinen Tastaturen ein
knapp dreizeiliges Loch. */
.pin-entry-compact .pin-entry-error { margin: 4px 0 0; font-size: var(--grad-klein); }
.pin-placeholder { color: var(--muted); font-size: var(--grad-beschreibung); }
/* Die Punkte sind die einzige Rueckmeldung, wie viele Ziffern schon getippt
sind: dunkel auf hellem Grund (Gold schaffte auf Sand nur 2,3 : 1). */
.pin-dot {
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--ink);
}
.pin-pad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
max-width: 340px;
margin: 0 auto 8px;
touch-action: manipulation;
}
/* Tasten als helle Karten mit der harten Kante. */
.pin-key {
height: 3.75rem;
min-height: 3.75rem;
border: 0;
border-radius: var(--radius);
background: var(--card);
box-shadow: var(--kante);
color: var(--black);
font-family: var(--head);
font-size: var(--grad-zahl);
font-weight: var(--schnitt-stark);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease;
touch-action: manipulation;
}
.pin-key .ico { width: 24px; height: 24px; }
html.dark .pin-key { background: var(--card); color: var(--auf-dunkel); }
.pin-key:hover { background: var(--row-hover); }
/* Bis zum 18.09.2026 schrumpfte die gedrueckte Taste hier um 4 %. Beim
schnellen Tippen wanderte der zweite Tipp dadurch auf eine Taste, die
gerade kleiner wurde — iPhone-Safari las das als Doppeltipp und zog die
Seite heran. Die Rueckmeldung gibt jetzt der kurze Tick, nicht die Groesse. */
.pin-key.pin-ok {
background-color: var(--black);
color: var(--gold);
box-shadow: var(--kante-gold);
font-size: var(--grad-text);
letter-spacing: .1em;
}
html.dark .pin-key.pin-ok { background-color: var(--black); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), var(--kante-gold); }
/* Muss nach der Dunkel-Regel stehen und ebenso genau sein, sonst sieht der
gesperrte Knopf im Dunkeln aus wie ein freigegebener. */
html.dark .pin-key.pin-ok:disabled {
background-color: var(--disabled-face);
box-shadow: none;
color: var(--disabled-ink);
}
.pin-key.pin-ok:disabled {
background-color: var(--disabled-face);
box-shadow: none;
color: var(--disabled-ink);
cursor: not-allowed;
}
.login-forgot { text-align: center; margin-top: 12px; }
.login-forgot .text-btn { color: var(--gold-klein); }
.login-forgot .text-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 12px;
font-size: var(--grad-text);
}
/* Neue Adresse (27.10.2026): einmal je Gerät über dem Namensfeld. */
.login-umzug {
margin: 0 0 14px;
padding: 10px 12px;
border-radius: var(--radius-btn);
background: var(--card);
color: var(--ink);
text-align: left;
font-size: var(--grad-beschreibung);
}
.login-umzug strong { display: block; margin-bottom: 2px; font-size: var(--grad-text); font-weight: var(--schnitt-titel); }
.login-pin-notice {
text-align: center;
margin: 0 0 10px;
color: var(--moss);
font-size: var(--grad-text);
font-weight: var(--schnitt-titel);
}
/* Name + PIN (Konrad 27.10.2026): beim ersten Mal das Namensfeld, danach die
gemerkte Person mit Foto oder Anfangsbuchstabe und „Nicht du?“. */
.login-name { margin: 0 0 4px; text-align: left; color: var(--muted); }
.login-name input[type="text"] { font-size: var(--grad-text); margin: 6px 0 0; }
.login-name-hinweis { margin: 0 0 16px; text-align: left; color: var(--muted); font-size: var(--grad-beschreibung); }
.login-person { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 8px; }
.login-person .avatar { margin-bottom: 4px; }
.login-hallo {
margin: 0;
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-stark);
line-height: var(--lh-tight);
color: var(--ink);
overflow-wrap: anywhere;
}
.login-nicht-du { min-height: 44px; padding: 10px 12px; font-size: var(--grad-beschreibung); }
.login-pin-request { text-align: left; }
.login-pin-request .muted { text-align: left; margin: 0 0 12px; }
.login-pin-request .field-label { color: var(--muted); }
/* 16 in den Feldern (--grad-text = 1rem), sonst zoomt iOS beim Tippen heran. */
.login-pin-request input[type="email"],
.login-pin-request input[type="text"],
.login-pin-request input[type="password"] {
font-size: var(--grad-text);
margin: 6px 0 0;
}
.login-pin-request .primary { width: 100%; margin-top: 8px; }
.login-pin-request .ghost { width: 100%; margin-top: 8px; }
.error { color: var(--danger); margin: 0 0 12px; }
.error:empty { display: none; }
input.pin-hidden {
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 1px;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
opacity: 0;
pointer-events: none;
}
.pin-hidden {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* ==========================================================================
Geruest
========================================================================== */
/* Eine Bedienung auf jeder Breite: oben die Titelzeile im Inhalt, unten die
schwebende Leiste. Eine Kopfleiste gibt es seit dem Neubau nicht mehr
(Bubby, 27.09.2026). */
.app {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
align-content: start;
min-height: 100dvh;
/* Nie breiter als der Bildschirm: sonst zoomt das iPhone die Seite heraus,
und rechts bleibt ein leerer Streifen (Bubbys Bild vom 12.09.2026). */
overflow-x: clip;
}
/* Kopf und Inhalt teilen sich je Ansicht eine passende Breite. Lange Listen
nutzen den Platz; Formulare und Zeitachse bleiben bequem lesbar. */
.app[data-page="hinweise"] { --inhalt: var(--lesebreite); }
.app[data-page="zettel"],
.app[data-page="einstellungen"] { --inhalt: var(--formularbreite); }
.brand {
font-family: var(--head);
font-size: var(--grad-karte);
font-weight: var(--schnitt-titel);
padding: 1.25rem 0.75rem 1.1rem;
line-height: var(--lh-tight);
display: flex;
align-items: center;
gap: 12px;
border: 0;
border-bottom: 1px solid var(--line);
margin-bottom: 8px;
width: 100%;
background: transparent;
color: inherit;
text-align: left;
min-height: 44px;
appearance: none;
/* Kein Radius: die Marke im Kopf sitzt an einer Linie, nicht in einer
Flaeche. Das ist kein fuenfter Radius, sondern der Ruecksetzer gegen
die Voreinstellung des Browsers. */
border-radius: 0;
}
.brand:hover { background: var(--row-hover); }
.brand-logo {
width: 66px;
height: 66px;
object-fit: contain;
flex: none;
}
/* Das runde Logo wird nie eingefaerbt, verzerrt oder angeschnitten; seine
weisse Umrandung steckt in der Datei. */
.brand-logo,
.login-logo {
object-fit: contain;
background: transparent;
}
.brand-name {
display: block;
font-family: var(--head);
font-weight: var(--schnitt-titel);
}
/* Firmenkarte: beige, Radius 20 (--radius), ohne Rand. Logo und Firma oben,
darunter wer angemeldet ist; ein Tipp auf die Firma fragt nach dem
Abmelden. Sie stand bis zum 14.09.2026 in der Seitenspalte und steht seitdem
am Kopf von "Mein Bereich"; seit dem Neubau (27.09.2026) fuehrt die
schwarze Kontokarte auf "Alles" dorthin. */
.konto-karte {
background: var(--card);
border: 0;
border-radius: var(--radius);
margin: 0 0 var(--abstand);
padding: var(--karte-innen);
}
.konto-karte .brand {
border-bottom: 0;
margin-bottom: 0;
padding: 12px 8px 6px;
border-radius: var(--radius-btn);
}
.konto-user {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 12px;
}
.konto-user strong {
font-family: var(--head);
font-size: var(--grad-karte);
font-weight: var(--schnitt-titel);
}
.konto-user .badge { align-self: flex-start; margin-top: 6px; }
/* Die Ansicht rechnet ihren Seitenrand aus der Inhaltsbreite: bis 1180 der
Seitenrand 16, darueber waechst er und haelt den Inhalt mittig. Unten
bleibt Platz fuer die schwebende Leiste. */
.main {
padding: calc(var(--kopf-abstand) + env(safe-area-inset-top)) var(--rand) calc(var(--fuss-abstand) + env(safe-area-inset-bottom) + 16px);
padding-inline: max(var(--rand), calc((100% - var(--inhalt)) / 2));
min-width: 0;
}
/* Titelzeile: grosser Titel in Versalien, darunter die goldene Unterzeile.
Rechts klein: auf "Heute" das Datum als Bon, sonst dezent das Logo.
Der Titel wird auf schmalen Handys kleiner, statt mitten im Wort
umzubrechen: die laengsten ("MITARBEITER", "ARBEITSPLAN") sind gemessen
7,15 em breit, dazu Luft; rechts stehen Logo oder Bon mit Abstand (56). */
.seitenkopf {
container-type: inline-size;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 12px;
margin: 4px 0 18px;
}
.seitentitel {
flex: 1 1 0;
min-width: 0;
font-size: min(var(--grad-seitentitel), calc((100cqi - var(--kopf-rechts, 56px)) / 7.6));
overflow-wrap: anywhere;
}
/* Die Unterzeile rechnet genauso, damit grosse Schrift ihr laengstes Wort
("Einstellungen", gemessen 6,3 em) nicht zerreisst. Bei normaler Schrift
bleibt sie 28. */
.seitentitel .heading-subtitle { font-size: min(var(--grad-unterzeile), calc((100cqi - var(--kopf-rechts, 56px)) / 6.6)); }
/* Rechts stehen seit 24.10.2026 zwei Dinge: Sprechblase und Bon oder Logo
(44 + 8 + 44, dazu Luft). */
.seitenkopf:has(.titel-chat) { --kopf-rechts: 108px; }
.titel-rechts { flex: none; display: flex; align-items: flex-start; gap: 8px; }
.bon {
flex: none;
margin: 2px 0 0;
/* 60 breit; bei grosser Schrift waechst der Bon mit, statt "24" zu trennen. */
min-width: 60px;
padding: 7px 6px 8px;
border-radius: var(--radius-btn);
background: var(--black);
color: var(--auf-dunkel);
box-shadow: var(--kante-gold);
text-align: center;
line-height: 1;
}
html.dark .bon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), var(--kante-gold); }
.bon-zeilen { display: block; }
.bon small {
display: block;
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .14em;
color: var(--gold);
}
.bon b {
display: block;
margin: 4px 0 3px;
font-family: var(--head);
font-size: var(--grad-zahl);
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
}
.titel-logo {
flex: none;
width: 44px;
height: 44px;
margin-top: 2px;
border-radius: 999px;
object-fit: contain;
}
/* Die Sprechblase zum Team-Chat (Bubby, 24.10.2026): ein flacher schwarzer
Kreis wie das Logo daneben. Neues zaehlt die goldene Kapsel wie in der
Chat-Liste; ein Ring im Seitenboden trennt sie vom Kreis. */
.titel-chat {
position: relative;
flex: none;
width: 44px;
height: 44px;
margin-top: 2px;
padding: 0;
border: 0;
border-radius: 999px;
background: var(--black);
color: var(--auf-dunkel);
display: inline-flex;
align-items: center;
justify-content: center;
}
.titel-chat .ico { width: 22px; height: 22px; }
html.dark .titel-chat { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }
/* Die Kapsel rueckt mit grosser Schrift weiter nach aussen, damit sie die
Blase nicht zudeckt; nach rechts nur so weit, wie Luft zum Logo ist. */
.titel-zahl {
position: absolute;
top: -.55em;
right: -.4em;
min-width: max(19px, 1.7em);
height: max(19px, 1.7em);
padding: 0 5px;
border-radius: 999px;
background: var(--gold);
color: var(--black);
box-shadow: 0 0 0 2px var(--paper);
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.seitenkopf > .freshbar { flex: 1 0 100%; }
/* Die Leiste unten: schwebend, schwarz, goldene Kante. Hoechstens drei Wege,
in der Mitte das goldene Plus, rechts "Alle". Der Weg, auf dem man steht,
leuchtet gold und traegt einen goldenen Strich. */
.dock {
position: fixed;
left: max(var(--dock-luft), env(safe-area-inset-left));
right: max(var(--dock-luft), env(safe-area-inset-right));
bottom: max(var(--dock-luft), env(safe-area-inset-bottom));
z-index: 30;
max-width: 560px;
margin-inline: auto;
height: var(--dock-hoehe);
display: grid;
grid-template-columns: repeat(var(--dock-faecher, 5), minmax(0, 1fr));
align-items: center;
padding: 0 6px;
border-radius: var(--radius-gross);
background: var(--black);
box-shadow: var(--kante-gold);
}
html.dark .dock { box-shadow: inset 0 0 0 1px var(--line), var(--kante-gold); }
html.kb-open .dock { display: none; }
.dock-item {
container-type: inline-size;
position: relative;
min-width: 0;
height: 100%;
min-height: 56px;
border: 0;
border-radius: var(--radius-btn);
background: transparent;
color: var(--auf-dunkel-leise);
font: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 0 2px;
cursor: pointer;
}
.dock-ico { display: flex; }
.dock-ico .ico { width: 23px; height: 23px; }
/* Das Wort passt in sein Fach: acht Versalien ("GETRÄNKE") sind mit dem
Buchstabenabstand gemessen 5,9 em breit; auf schmalen Handys wird die
Beschriftung deshalb etwas kleiner, statt abgeschnitten zu werden. */
.dock-label {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--head);
font-size: min(var(--grad-marke), calc(100cqi / 6));
font-weight: var(--schnitt-stark);
letter-spacing: .02em;
text-transform: uppercase;
}
.dock-item.active { color: var(--gold); }
.dock-item.active::after {
content: "";
position: absolute;
bottom: 7px;
width: 18px;
height: 3px;
border-radius: 999px;
background: var(--gold);
}
.dock-zahl {
position: absolute;
top: 6px;
left: calc(50% + 6px);
/* 19 hoch; bei grosser Schrift waechst die Kapsel mit ihrer Zahl. */
min-width: max(19px, 1.7em);
height: max(19px, 1.7em);
padding: 0 5px;
border-radius: 999px;
background: var(--safran-flaeche);
color: var(--auf-safran);
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* Das Plus steht erhaben ueber der Leiste: ein Ring in der Farbe des Grunds
trennt es. Offen dreht sich das Plus zum Kreuz. */
.dock-plus {
justify-self: center;
width: 60px;
height: 60px;
min-height: 60px;
margin-top: -30px;
border: 0;
border-radius: var(--radius);
background: var(--gold);
color: var(--black);
display: grid;
place-items: center;
box-shadow: 0 0 0 6px var(--paper);
cursor: pointer;
transition: transform 0.15s ease;
}
.dock-plus .ico { width: 30px; height: 30px; transition: transform 0.2s ease; }
/* Fokus in der Leiste: aussen laege der goldene Ring auf dem Sand (2,3 : 1).
Die Wege tragen ihn deshalb innen auf dem Schwarz, das Plus schwarz innen
auf seinem Gold. */
.dock-item { --fokus-abstand: -3px; }
.dock-plus { --fokus: var(--black); --fokus-abstand: -5px; }
.dock-plus.is-open .ico { transform: rotate(45deg); }
.dock-plus:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
.dock-plus,
.dock-plus .ico { transition: none; }
}
/* ==========================================================================
"Alles auf einen Blick": die Seite hinter "Alle" statt der Schublade.
Oben die schwarze Kontokarte, dann Kacheln fuer jeden Bereich, Darstellung,
Abmelden und ganz unten leise der Stempel.
========================================================================== */
.konto-kachel {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
margin: 0 0 14px;
padding: 16px;
border: 0;
border-radius: var(--radius);
background-color: var(--black);
background-image: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--gold) 24%, transparent), transparent 60%);
color: var(--auf-dunkel);
box-shadow: var(--kante-gold);
font: inherit;
text-align: left;
cursor: pointer;
}
html.dark .konto-kachel { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), var(--kante-gold); }
.konto-zeichen {
flex: none;
width: 54px;
height: 54px;
border-radius: 999px;
display: grid;
place-items: center;
background: var(--gold);
color: var(--black);
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-stark);
}
.konto-kachel-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.konto-kachel-text strong { font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-stark); }
.konto-kachel-text > span { color: var(--auf-dunkel-leise); font-size: var(--grad-beschreibung); }
.konto-kachel-text .badge { align-self: flex-start; margin-top: 4px; }
.konto-kachel-pfeil { display: inline-flex; color: var(--gold); }
.konto-kachel-pfeil .ico { width: 22px; height: 22px; }
.alle-wand {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.bereich-kachel {
container-type: inline-size;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
min-height: 112px;
padding: 13px 14px;
border: 0;
border-radius: var(--radius);
background: var(--card);
box-shadow: var(--kante);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.bereich-kachel:hover { background: var(--row-hover); }
.bereich-ico {
width: 40px;
height: 40px;
border-radius: 999px;
display: grid;
place-items: center;
background: var(--band);
color: var(--ink);
}
.bereich-ico .ico { width: 21px; height: 21px; }
.bereich-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Sinnbild und Hinweis teilen sich die obere Reihe; ist die Kachel zu schmal
(320 px), rutscht der Hinweis darunter, statt abgeschnitten zu werden. */
.bereich-kopf {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
/* Der Titel wird in einer schmalen Kachel kleiner: "Einstellungen" braucht
rund 7,6 em. Laengeres ("Reklamationen" auf 320) trennt nach Silben. */
.bereich-text strong { font-family: var(--head); font-size: min(var(--grad-karte), calc(100cqi / 7.6)); font-weight: var(--schnitt-stark); -webkit-hyphens: auto; hyphens: auto; }
.bereich-text span { color: var(--muted); font-size: var(--grad-klein); }
.kachel-hinweis {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 4px 9px;
border-radius: 999px;
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .06em;
text-transform: uppercase;
}
.kachel-hinweis.ist-gold { background: var(--gold); color: var(--black); }
.kachel-hinweis.ist-paprika { background: var(--paprika); color: var(--auf-paprika); }
.kachel-hinweis.ist-safran { background: var(--safran-flaeche); color: var(--auf-safran); }
.kachel-hinweis.ist-leise { background: var(--band); color: var(--muted); }
.alle-darstellung { margin: 18px 0 12px; }
.alle-klein {
margin: 0 4px 8px;
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold-klein);
}
.alle-darstellung .segment { max-width: none; }
.abmelden-knopf {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 54px;
border: 1.5px solid var(--line);
border-radius: var(--radius-btn);
background: transparent;
color: var(--paprika);
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-stark);
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
}
.abmelden-knopf:hover { border-color: var(--paprika); }
.abspann {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 28px 0 4px;
color: var(--muted);
font-size: var(--grad-klein);
line-height: 1.45;
}
.abspann p { margin: 0; }
.abspann-stempel { display: block; width: auto; height: 44px; }
/* Bereiche nach Themen; darunter "Dieses Gerät" als eine Karte mit Zeilen. */
.alle-gruppe { margin: 0 0 18px; }
.alle-geraet { margin-top: 12px; padding: 2px var(--karte-innen); border-radius: var(--radius); background: var(--card); box-shadow: var(--kante); }
.alle-geraet .flag-row { width: 100%; color: inherit; font: inherit; text-align: left; }
.alle-neu-laden { border: 0; background: transparent; cursor: pointer; }
html.dark.black .alle-geraet { box-shadow: inset 0 0 0 1px var(--line); }
/* ==========================================================================
Das Blatt hinter dem Plus: "NEU / was möchtest du tun?". Jede Aktion eine
Zeile mit schwarzem Kreis und goldenem Sinnbild.
========================================================================== */
.neu-blatt .sheet-head h2 { font-size: var(--grad-seitentitel); }
.blatt-titel {
display: block;
font-family: var(--head);
font-weight: var(--schnitt-stark);
line-height: 1;
text-transform: uppercase;
}
.neu-liste { display: flex; flex-direction: column; }
.neu-aktion {
--fokus-abstand: -4px;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
width: 100%;
min-height: 64px;
padding: 10px 2px;
border: 0;
border-top: 1px solid var(--line);
background: transparent;
color: inherit;
font: inherit;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.neu-aktion:hover:not(:disabled) { background: var(--row-hover); }
.neu-aktion:disabled { cursor: not-allowed; color: var(--muted); }
.neu-ico {
width: 44px;
height: 44px;
border-radius: 999px;
display: grid;
place-items: center;
background: var(--black);
color: var(--gold);
}
.neu-ico .ico { width: 21px; height: 21px; }
html.dark .neu-ico { background: var(--band); }
.neu-aktion:disabled .neu-ico { background: var(--disabled-face); color: var(--disabled-ink); }
.neu-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.neu-text strong { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); }
.neu-text span { color: var(--muted); font-size: var(--grad-klein); }
.neu-pfeil { display: inline-flex; color: var(--muted); }
.neu-pfeil .ico { width: 20px; height: 20px; }
.search-wrap {
display: block;
position: relative;
width: 100%;
margin: 0 0 12px;
}
.search-ico {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--muted);
display: inline-flex;
}
.search-ico .ico { width: 20px; height: 20px; }
.search-wrap input { padding-left: 44px; }
.page-head { margin-bottom: 16px; }
.filters {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 0;
}
.filters .tabs { margin-bottom: 0; border-bottom: 0; }
.page-head .filters { margin-bottom: 12px; }
.page-head .filter-note { margin-bottom: 0; }
.filter-note {
color: var(--ink);
margin: 0 0 var(--abstand);
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--radius-btn);
background: var(--band);
font-size: var(--grad-beschreibung);
font-weight: var(--schnitt-text);
line-height: var(--lh-body);
}
.dates {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
color: var(--muted);
font-size: var(--grad-beschreibung);
font-weight: var(--schnitt-titel);
}
.dates label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.dates input { width: auto; min-height: var(--feld-hoehe); padding: 10px 14px; }
/* Belege: derselbe Monatsschritt wie auf der Steuer. Der Name steht mittig
zwischen den Pfeilen, auch wenn die Filterkacheln daneben waagrecht rollen. */
.chips.monat-nav {
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 8px;
width: 100%;
overflow: visible;
max-width: none;
margin-inline: 0;
padding: 0;
}
.monat-nav .badge { justify-content: center; min-height: 40px; padding-inline: 14px; }
.chips.monat-suche {
display: grid;
grid-template-columns: var(--feld-hoehe) minmax(0, 1fr) var(--feld-hoehe);
gap: var(--abstand-klein);
}
.monat-suche .search-wrap { min-width: 0; margin: 0; }
.monat-suche .icon-btn { width: var(--feld-hoehe); height: var(--feld-hoehe); }
@media (max-width: 359px) {
.chips.monat-suche {
grid-template-columns: calc(var(--feld-hoehe) - var(--abstand-klein) / 2) minmax(0, 1fr) calc(var(--feld-hoehe) - var(--abstand-klein) / 2);
gap: calc(var(--abstand-klein) / 2);
}
.monat-suche .icon-btn { width: 100%; }
.monat-suche .search-ico { left: var(--abstand-klein); }
.monat-suche input { padding-inline: calc(var(--abstand-klein) * 4) var(--abstand-klein); }
}
.filters > select { width: auto; min-width: 200px; min-height: var(--feld-hoehe); }
.pager {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--abstand-klein);
padding: 0;
margin-top: var(--abstand);
border-top: 0;
color: var(--muted);
font-size: var(--grad-beschreibung);
}
.pager p { margin: 0; }
.pager-actions { display: flex; gap: var(--abstand-klein); }
.pager .ghost { width: auto; }
/* Plus in zwei Gruppen: oben neu anlegen, darunter die Werkzeuge. */
.neu-gruppe { margin: 4px 2px 6px; }
.neu-liste + .neu-gruppe { margin-top: 20px; }
/* ==========================================================================
Kennzahlkacheln: beige, Radius 20 (--radius), ohne Linie, zwei je Zeile, 16 Abstand,
Zahl gross und Beschriftung klein darunter, beides mittig.
========================================================================== */
.kpis {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-bottom: 16px;
}
.kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis.kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) {
.kpis.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.kpi {
background: var(--card);
border: 0;
border-radius: var(--radius);
padding: var(--karte-innen);
min-height: 7rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
position: relative;
color: inherit;
font: inherit;
text-align: center;
}
.kpi-head {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 0;
order: 2;
}
.kpi-head .mark { color: var(--muted); flex: none; }
.kpi-head .mark .ico { width: 16px; height: 16px; }
.kpi .label {
color: var(--ink);
font-family: var(--head);
font-size: var(--grad-klein);
text-transform: uppercase;
letter-spacing: .06em;
font-weight: var(--schnitt-titel);
line-height: var(--lh-tight);
min-width: 0;
}
.kpi .value {
order: 1;
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-titel);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
line-height: var(--lh-tight);
overflow-wrap: anywhere;
}
.kpi-text .value { font-size: var(--grad-karte); }
.kpi .hint {
order: 3;
color: var(--ink);
font-size: var(--grad-beschreibung);
line-height: var(--lh-body);
}
.kpi.clickable { cursor: pointer; }
/* Ausgewaehlt heisst 2 rundum in Schwarz, ueberfahren 2 in der Linienfarbe.
Die harte Kante bleibt. */
.kpi.selected,
.kpi.picked {
outline: 2px solid var(--black);
outline-offset: -2px;
}
html.dark .kpi.selected,
html.dark .kpi.picked { outline-color: var(--auf-dunkel); }
/* Kennzahlen ueber einer Liste: eine Karte, darin Zeilen wie in der Kassa.
Beschriftung links, Zahl rechts. Liegt die Gruppe schon in einem Abschnitt,
bekommt sie keine zweite Kante. */
.kpis.kpis-umriss {
display: flex;
flex-direction: column;
gap: 0;
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--kante);
margin-bottom: 16px;
padding: 4px 0;
}
.panel .kpis.kpis-umriss {
background: transparent;
border-radius: 0;
box-shadow: none;
margin: 0;
padding: 0;
}
.kpis-umriss .kpi {
background: transparent;
box-shadow: none;
border: 0;
border-radius: 0;
align-items: baseline;
justify-content: space-between;
text-align: left;
flex-direction: row;
flex-wrap: wrap;
min-height: 0;
padding: 8px var(--karte-innen);
gap: 2px 12px;
}
.kpis-umriss .kpi-head { order: 1; justify-content: flex-start; }
.kpis-umriss .kpi .value { order: 2; margin-left: auto; text-align: right; }
.kpis-umriss .kpi .hint { order: 3; flex: 1 0 100%; }
.kpis-umriss .kpi.selected,
.kpis-umriss .kpi.picked { background: transparent; border-color: transparent; }
/* ==========================================================================
Heute als Kachelraster (Cockpit): oben die Mannschaft von heute (dieselbe
dunkle Karte wie im Arbeitsplan), darunter zwei Spalten am Handy, vier am
Schreibtisch. Jede Box ist eine eigene helle Kachel. Wie breit jede wird,
rechnet die App aus (kachelSpannen in lib/cockpit.js) und setzt es als
Klasse: so bleibt keine Reihe halb leer.
========================================================================== */
.heute-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.heute-grid > .kpi {
container-type: inline-size;
width: 100%;
margin: 0;
min-height: 118px;
padding: 14px 15px;
align-items: stretch;
justify-content: flex-start;
gap: 6px;
text-align: left;
color: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
.heute-grid > .kpi:active { transform: scale(0.98); }
.heute-grid > .kpi .kpi-head { order: 0; justify-content: flex-start; gap: 7px; }
.kpi-ico { display: inline-flex; color: var(--muted); }
.kpi-ico .ico { width: 18px; height: 18px; }
.heute-grid > .kpi .label {
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .08em;
color: var(--muted);
hyphens: auto;
overflow-wrap: break-word;
}
/* Die Zahl passt sich der Kachel an: nie groesser als ihr Grad, nie breiter
als die Kachel. 7 em ist die Breite von "€ 123.456,00" — sechsstellig passt. */
.heute-grid > .kpi .value {
order: 1;
margin-top: auto;
font-size: min(var(--grad-zahl), calc(100cqi / 7));
font-weight: var(--schnitt-stark);
line-height: 1;
overflow-wrap: normal;
white-space: nowrap;
}
.heute-grid > .kpi .hint { order: 2; color: var(--muted); font-size: var(--grad-klein); line-height: 1.35; }
.heute-grid > .kpi.kpi-text .value { font-size: var(--grad-karte); white-space: normal; line-height: 1.3; }
.eur { font-size: .7em; font-weight: var(--schnitt-titel); }
.heute-grid > .kpi.kpi-breit { min-height: 0; }
/* Ueberfaellig in Paprika, bezahlt mit Kraeuter-Haken. */
.heute-grid > .kpi-ueberfaellig:not(.is-empty) { background: var(--paprika-zart); }
.heute-grid > .kpi-ueberfaellig:not(.is-empty) :is(.label, .value, .hint, .kpi-ico) { color: var(--paprika); }
.heute-grid > .kpi-bald:not(.is-empty) { background: var(--safran-zart); }
.heute-grid > .kpi-bald:not(.is-empty) :is(.label, .value, .hint, .kpi-ico) { color: var(--safran); }
.heute-grid > .kpi-heute-bezahlt .kpi-ico { color: var(--kraeuter); }
/* Die zwei Laeden tragen ihren Streifen: Neusiedl schwarz, Bruck gold. */
.heute-grid > .kpi-neusiedl,
.heute-grid > .kpi-bruck { padding-left: 23px; overflow: hidden; }
.heute-grid > .kpi-neusiedl::before,
.heute-grid > .kpi-bruck::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 8px;
background: var(--black);
}
.heute-grid > .kpi-bruck::before { background: var(--gold); }
html.dark .heute-grid > .kpi-neusiedl::before { background: var(--auf-dunkel); }
/* Teile als Balken und Zeilen: Kassa gold, Bank schwarz, SumUp Sand;
Bar gold, Karte schwarz. */
.kpi-balken { order: 2; display: flex; gap: 3px; height: 11px; margin: 8px 0 10px; }
.kpi-balken i { flex: 1 1 0; min-width: 3px; border-radius: 999px; background: var(--kante-farbe); }
.kpi-zeilen { order: 3; display: grid; gap: 8px; margin: 0; }
.kpi-zeilen > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kpi-zeilen dt { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: var(--grad-beschreibung); }
.kpi-zeilen dd { margin: 0; font-size: var(--grad-abschnitt); font-weight: var(--schnitt-stark); white-space: nowrap; }
.kpi-punkt { width: 10px; height: 10px; border-radius: 999px; background: var(--kante-farbe); }
:is(.kpi-balken i, .kpi-punkt).ist-kassa,
:is(.kpi-balken i, .kpi-punkt).ist-bar { background: var(--gold); }
:is(.kpi-balken i, .kpi-punkt).ist-bank,
:is(.kpi-balken i, .kpi-punkt).ist-karte { background: var(--black); }
html.dark :is(.kpi-balken i, .kpi-punkt):is(.ist-bank, .ist-karte) { background: var(--auf-dunkel); }
:is(.kpi-balken i, .kpi-punkt).ist-sumup { background: var(--kante-farbe); }
html.dark :is(.kpi-balken i, .kpi-punkt).ist-sumup { background: var(--kante-licht); }
.kpi-summe { margin: 6px 0 0; }
/* Umsatz Monat mit Schnitt (Bubby 16.10.2026): der Balken misst am groesseren
Wert, der Paprika-Strich zeigt den Schnitt der letzten 12 Monate bis zum
gleichen Tag; ein Ring in der Kachelfarbe trennt ihn von Gold und Schwarz. */
.kpi-balken.mit-schnitt { position: relative; display: block; }
.kpi-balken-ist { display: flex; gap: 3px; width: calc(var(--anteil) * 100%); height: 100%; }
.kpi-schnitt-strich {
position: absolute;
top: -5px;
bottom: -5px;
left: calc(var(--anteil) * (100% - 4px));
width: 4px;
border-radius: 999px;
background: var(--paprika);
box-shadow: 0 0 0 2px var(--card);
}
.kpi-strich-zeichen { flex: none; width: 4px; height: 14px; border-radius: 999px; background: var(--paprika); }
.kpi-vergleich { order: 2; display: grid; gap: 2px; margin: 8px 0 0; color: var(--muted); font-size: var(--grad-klein); line-height: var(--lh-tight); }
.kpi-vergleich-satz { display: flex; align-items: center; gap: 8px; font-size: var(--grad-beschreibung); }
.kpi-vergleich-satz b { color: var(--ink); font-weight: var(--schnitt-stark); white-space: nowrap; }
.kpi-vergleich-betrag { padding-left: 12px; font-variant-numeric: tabular-nums; }
/* Die Heldenkachel: die wichtigste Zahl gross, schwarz mit goldener Kante,
ein goldener Schein oben rechts. Der Selektor nennt das Gitter mit, sonst
gewinnt `.heute-grid > .kpi` und die Zahl bliebe dunkel. */
.heute-grid > .kpi.kpi-hero,
.kpi.kpi-hero {
min-height: 188px;
padding: 18px 18px 16px;
border-radius: var(--radius-gross);
background-color: var(--black);
background-image: radial-gradient(100% 120% at 100% 0%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 60%);
color: var(--auf-dunkel);
box-shadow: var(--kante-gold);
}
html.dark .heute-grid > .kpi.kpi-hero,
html.dark .kpi.kpi-hero { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), var(--kante-gold); }
.kpi.kpi-hero .kpi-head { padding-right: 132px; }
.kpi.kpi-hero .kpi-ico,
.kpi.kpi-hero .label { color: var(--gold); }
.kpi.kpi-hero .value { margin-top: 18px; font-size: min(var(--grad-held), calc(100cqi / 7)); letter-spacing: -.03em; color: var(--auf-dunkel); }
.kpi.kpi-hero .value.is-leer { font-size: var(--grad-abschnitt); letter-spacing: 0; }
.kpi.kpi-hero .hint { color: var(--auf-dunkel-leise); }
.held-chip {
position: absolute;
top: 16px;
right: 16px;
max-width: 45%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 5px 11px;
border-radius: 999px;
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--auf-dunkel) 40%, transparent);
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .08em;
text-transform: uppercase;
}
.held-fuss { order: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
/* Teile auf der schwarzen Heldenkachel (Geld, Umsatz Monat): leise Namen,
helle Betraege; was sonst schwarz ist (Bank, Karte), steht hier hell. */
.kpi.kpi-hero .kpi-zeilen dt { color: var(--auf-dunkel-leise); }
.kpi.kpi-hero .kpi-zeilen dd { color: var(--auf-dunkel); }
.kpi.kpi-hero :is(.kpi-balken i, .kpi-punkt):is(.ist-bank, .ist-karte) { background: var(--auf-dunkel); }
.kpi.kpi-hero .kpi-vergleich { color: var(--auf-dunkel-leise); }
.kpi.kpi-hero .kpi-vergleich-satz b { color: var(--auf-dunkel); }
.kpi.kpi-hero :is(.kpi-schnitt-strich, .kpi-strich-zeichen) { background: var(--paprika-auf-dunkel); }
.kpi.kpi-hero .kpi-schnitt-strich { box-shadow: 0 0 0 2px var(--black); }
html.dark.black .kpi.kpi-hero .kpi-schnitt-strich { box-shadow: 0 0 0 2px var(--paper); }
.chip-paprika {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
padding: 5px 11px;
border-radius: 999px;
background: var(--paprika);
color: var(--auf-paprika);
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .06em;
text-transform: uppercase;
}
.chip-paprika .ico { width: 15px; height: 15px; flex: none; }
.chip-paprika > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.held-pfeil {
flex: none;
width: 48px;
height: 48px;
margin-left: auto;
border-radius: 999px;
display: grid;
place-items: center;
background: var(--gold);
color: var(--black);
}
.held-pfeil .ico { width: 22px; height: 22px; }
/* Ein Anlass heute traegt dieselbe schwarze Karte, behaelt aber Groesse und
Platz seiner Kachel im Raster. */
.heute-grid > .kpi.kpi-hero.kpi-schmal,
.kpi.kpi-hero.kpi-schmal {
min-height: 118px;
padding: 14px 15px;
border-radius: var(--radius);
}
.kpi.kpi-hero.kpi-schmal .kpi-head { padding-right: 0; }
.kpi.kpi-hero.kpi-schmal .value { margin-top: auto; font-size: var(--grad-karte); letter-spacing: 0; }
/* Leere Kacheln liegen als Band eine Stufe unter den gefuellten. */
.heute-grid > .kpi.is-empty:not(.kpi-hero) {
background: var(--band);
box-shadow: inset 0 0 0 1px var(--line);
}
/* Schwarz (OLED): auch die schwarzen Flaechen des Cockpits stehen auf dem
Seitengrund #000000; ihre goldene Kante und die Linie tragen die Form. */
html.dark.black :is(.kpi.kpi-hero, .me-hero, .dock, .bon, .konto-kachel, .login-tafel) { background-color: var(--paper); }
/* "Heute wichtig": ein Satz, ein Tipp — fuehrt direkt dorthin. */
.heute-wichtig {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 52px;
margin: 0 0 14px;
padding: 11px 14px;
border: 0;
border-radius: var(--radius-btn);
background: var(--card);
box-shadow: var(--kante);
color: var(--ink);
font: inherit;
font-size: var(--grad-beschreibung);
text-align: left;
cursor: pointer;
}
.heute-wichtig b { font-weight: var(--schnitt-stark); }
/* Paprika nur, wenn es wirklich um Ueberfaelliges geht. */
.heute-wichtig.ist-ueberfaellig b { color: var(--paprika); }
.heute-wichtig.ist-bald b { color: var(--safran); }
/* Nichts faellig: ein ruhiger Satz mit Kraeuter-Haken, nicht antippbar. */
.heute-wichtig.ist-ruhig { cursor: default; }
.heute-wichtig.ist-ruhig .heute-wichtig-ico { color: var(--kraeuter); }
.heute-wichtig-ico { display: inline-flex; color: var(--gold-schrift); }
.heute-wichtig-ico .ico { width: 20px; height: 20px; }
.heute-wichtig-satz { flex: 1; min-width: 0; }
.heute-wichtig-pfeil { display: inline-flex; color: var(--muted); }
.heute-wichtig-pfeil .ico { width: 20px; height: 20px; }
/* Jubilaeen und Geburtstage von heute: eine ruhige Karte, Sinnbild in Gold. */
.feier {
display: grid;
gap: 8px;
margin: 0 0 14px;
padding: 11px 14px;
list-style: none;
border-radius: var(--radius-btn);
background: var(--card);
box-shadow: var(--kante);
color: var(--ink);
font-size: var(--grad-beschreibung);
}
.feier-zeile { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.feier-ico { display: inline-flex; color: var(--gold-schrift); }
.feier-ico .ico { width: 20px; height: 20px; }
.heute-fuss { justify-content: center; margin: 4px 0 0; }
.heute-fuss .ghost .ico { width: 18px; height: 18px; }
/* Die Spannen aus kachelSpannen: am Handy nimmt eine Kachel mit zwei Spalten
die ganze Reihe; am Schreibtisch nimmt sie zwei, drei oder vier Spalten,
die Heldenkachel meist auch zwei Reihen. */
.heute-grid > .kpi.kpi-handy-2 { grid-column: 1 / -1; }
@media (min-width: 992px) {
.heute-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.heute-grid > .kpi { min-height: 136px; }
.heute-grid > .kpi.kpi-hero:not(.kpi-schmal) { min-height: 0; }
.heute-grid > .kpi.kpi-handy-2 { grid-column: auto; }
.heute-grid > .kpi.kpi-tisch-2 { grid-column: span 2; }
.heute-grid > .kpi.kpi-tisch-3 { grid-column: span 3; }
.heute-grid > .kpi.kpi-tisch-4 { grid-column: 1 / -1; }
.heute-grid > .kpi.kpi-tisch-hoch { grid-row: span 2; }
}
.heute-grid.customizing > .kpi:active { transform: none; }
.heute-grid.customizing {
touch-action: none;
user-select: none;
-webkit-touch-callout: none;
}
.heute-grid.customizing > .kpi { padding-top: 30px; }
.kpi.is-empty .value:empty { min-height: 1.2em; }
.kpi.placeholder { opacity: 0.35; outline: 2px dashed var(--black); background: transparent; }
.kpi.ghost {
position: fixed;
left: 0;
top: 0;
z-index: 80;
margin: 0;
pointer-events: none;
opacity: 0.95;
background: var(--card);
border-radius: var(--radius);
padding: var(--karte-innen);
min-height: 7rem;
}
.kpi-grip {
position: absolute;
top: 8px;
right: 8px;
color: var(--muted);
line-height: 0;
}
.kpi-grip .ico { width: 18px; height: 18px; }
.kpi-remove,
.kpi-add {
position: absolute;
top: 8px;
left: 8px;
width: 28px;
height: 28px;
min-height: 28px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--paper);
color: var(--black);
font-size: var(--grad-text);
font-weight: var(--schnitt-stark);
line-height: 1;
display: grid;
place-items: center;
z-index: 1;
padding: 0;
}
html.dark .kpi-remove,
html.dark .kpi-add { background: var(--card); color: var(--auf-dunkel); }
.kpi-add { position: static; margin-bottom: 6px; }
.kpi-add .ico { width: 16px; height: 16px; }
.kpi-more { opacity: 0.72; width: 100%; position: relative; min-height: 0; }
.page-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.page-actions > .ghost { flex-shrink: 0; }
.heute-customize-head { margin-bottom: 16px; }
.heute-customize-head .heute-set-chips { margin-bottom: 8px; }
.heute-count { margin: 0 0 4px; font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); }
.heute-count-hint,
.heute-customize-hint { margin: 0 0 8px; font-size: var(--grad-beschreibung); }
.heute-customize-actions { display: flex; gap: 8px; }
.heute-customize-actions > * { flex: 1; width: auto; }
.heute-more { margin-top: 16px; }
.heute-more-title { margin: 0 0 8px; }
.heute-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Startseite (Bubby, 12.10.2026). Neues aus dem Team-Chat ist eine schwarze
Cockpit-Fläche mit goldener Kante (seit 24.10.2026, vorher die Nachricht
vom Chef). Heute im Laden und die Checkliste sind helle Karten. Erledigt
heißt Kräuter, ein fehlender Zettel Paprika. */
.nachricht {
--fokus: var(--gold);
margin: 0 0 14px;
padding: var(--karte-innen);
border-radius: var(--radius);
background: var(--black);
color: var(--auf-dunkel);
box-shadow: var(--kante-gold);
}
html.dark .nachricht { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), var(--kante-gold); }
html.dark.black .nachricht { background: var(--paper); }
.nachricht p { margin: 0; }
.nachricht-kopf {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--gold);
}
.nachricht-ico { display: inline-flex; }
.nachricht-ico .ico { width: 20px; height: 20px; }
.nachricht-text {
margin-top: 10px;
font-size: var(--grad-karte);
line-height: var(--lh-body);
white-space: pre-line;
overflow-wrap: anywhere;
}
.nachricht .nachricht-fuss { display: flex; justify-content: flex-end; margin-top: 14px; }
.nachricht .primary { background: var(--gold); color: var(--black); }
.nachricht .primary:hover:not(:disabled),
.nachricht .primary:focus-visible:not(:disabled) { background: var(--gold); color: var(--black); }
.nachricht .primary .ico { width: 18px; height: 18px; }
.laden-heute,
.checkliste {
margin: 0 0 14px;
padding: var(--karte-innen);
border-radius: var(--radius);
background: var(--card);
color: var(--ink);
}
.laden-heute h2 {
margin: 0;
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-titel);
line-height: var(--lh-tight);
}
.laden-heute-rolle { margin: 4px 0 0; color: var(--muted); font-size: var(--grad-beschreibung); }
.laden-heute-liste { list-style: none; margin: 12px 0 0; padding: 0; }
.laden-heute-liste li {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
align-items: baseline;
gap: 12px;
padding: 8px 0;
border-top: 1px solid var(--line);
line-height: var(--lh-body);
}
.laden-heute-was {
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
color: var(--muted);
}
.laden-heute-liste .pill,
.laden-heute-liste .abzeichen { justify-self: start; }
.laden-heute-link { margin-left: 4px; min-height: 44px; }
.laden-heute-quelle { margin: 8px 0 0; font-size: var(--grad-klein); color: var(--muted); }
.checkliste { padding: 0; }
.checkliste-kopf {
--fokus-abstand: -3px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto 18px;
align-items: center;
gap: 12px;
width: 100%;
min-height: 56px;
padding: 12px var(--karte-innen);
border: 0;
border-radius: var(--radius);
background: transparent;
color: var(--ink);
font: inherit;
text-align: left;
}
.checkliste-titel { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-titel); }
.checkliste-stand { font-size: var(--grad-beschreibung); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkliste-stand.pill-ok { color: var(--kraeuter); }
.checkliste-pfeil { display: inline-flex; color: var(--muted); transition: transform .2s; }
.checkliste-pfeil .ico { width: 18px; height: 18px; }
.checkliste-kopf[aria-expanded="true"] .checkliste-pfeil { transform: rotate(90deg); }
.check-gruppe { padding: 0 var(--karte-innen) 12px; }
.check-gruppe h3 {
margin: 4px 0 4px;
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gold-klein);
}
.check-gruppe ul { list-style: none; margin: 0; padding: 0; }
.check-punkt {
--fokus-abstand: -2px;
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
align-items: start;
gap: 12px;
width: 100%;
min-height: 48px;
padding: 10px 4px;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
background: transparent;
color: var(--ink);
font: inherit;
text-align: left;
line-height: var(--lh-body);
}
.check-gruppe li:last-child .check-punkt,
.check-gruppe li.check-punkt:last-child { border-bottom: 0; }
@media (hover: hover) {
button.check-punkt:hover { background: var(--row-hover); }
}
.check-kreis {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-top: 1px;
border-radius: 999px;
box-shadow: inset 0 0 0 1.5px var(--input-line);
}
.check-kreis .ico { width: 16px; height: 16px; }
.check-punkt.ist-erledigt .check-kreis { background: var(--kraeuter); color: var(--kraeuter-zart); box-shadow: none; }
.check-punkt.ist-erledigt .check-text { color: var(--muted); }
.check-wer { display: block; font-size: var(--grad-klein); color: var(--muted); }
.checkliste-admin .panel-inner { display: grid; gap: 12px; }
.pinnwand-leise { margin: 4px 0 0; font-size: var(--grad-beschreibung); color: var(--muted); }
.pinnwand-form { display: grid; gap: 12px; }
.pinnwand-form label { display: grid; gap: 6px; font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); }
.pinnwand-knoepfe { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.checkliste-admin .compact-btn .ico { width: 18px; height: 18px; }
.checkliste-admin > .panel-inner > .compact-btn { justify-self: start; }
.checkliste-tag {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px;
align-items: center;
gap: 8px;
text-align: center;
font-weight: var(--schnitt-titel);
}
.checkliste-tag-pfeil { min-height: 44px; width: 44px; }
.checkliste-tag-pfeil.ist-zurueck .ico { transform: rotate(180deg); }
.checkliste-admin-laden { border-top: 1px solid var(--line); }
.checkliste-admin-laden .checkliste-kopf { padding-inline: 4px; border-radius: var(--radius-tight); }
.checkliste-admin-laden .check-gruppe { padding-inline: 4px; }
@media (prefers-reduced-motion: reduce) {
.checkliste-pfeil { transition: none; }
}
@media (min-width: 992px) {
.checkliste .check-gruppe ul { columns: 2; column-gap: 24px; }
.checkliste .check-gruppe li { break-inside: avoid; }
}
/* Abschnitte auf Heute ("Zahlen", "Fürs Team"): dieselbe kleine Versalienzeile wie auf Alles. */
.heute-abschnitt { margin: 26px 4px 10px; }
/* Frei beantragen (Bubby, 12.10.2026): Karte der Mitarbeiter und „Anträge“
für den Admin. Nur vorhandene Bausteine: Panel, Pillen, Knöpfe, Felder. */
.frei-antrag .panel-inner,
.frei-admin .panel-inner { display: grid; gap: 12px; }
.frei-antrag .compact-btn .ico,
.frei-admin .compact-btn .ico,
.frei-admin .pinnwand-knoepfe .ico { width: 18px; height: 18px; }
.frei-antrag > .panel-inner > .compact-btn { justify-self: start; }
.frei-admin h2 .pill { font-family: var(--sans); }
.frei-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.frei-zeile,
.frei-antrag-admin { padding: 12px 0 0; border-top: 1px solid var(--line); }
.frei-liste > li:first-child { padding-top: 0; border-top: 0; }
.frei-zeile p,
.frei-antrag-admin p { margin: 0; }
.frei-zeile .zweitknopf { margin-top: 10px; }
.frei-zeile-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.frei-was,
.frei-wer {
font-family: var(--head);
font-size: var(--grad-karte);
font-weight: var(--schnitt-titel);
line-height: var(--lh-tight);
}
.frei-wer b { font-weight: var(--schnitt-stark); }
.frei-wann { margin-top: 4px !important; font-variant-numeric: tabular-nums; }
.frei-leise { margin-top: 4px !important; font-size: var(--grad-beschreibung); color: var(--muted); overflow-wrap: anywhere; }
.frei-antwort { margin-top: 6px !important; font-size: var(--grad-beschreibung); overflow-wrap: anywhere; }
.frei-rest { margin-top: 8px !important; font-family: var(--head); font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); }
.frei-meldung { margin: 0; font-weight: var(--schnitt-titel); }
/* Woche schon belegt (Bubby, 13.10.2026): ein Hinweisfeld, keine Warnfarbe. */
.frei-woche {
margin: 0;
padding: 10px 12px;
border-radius: var(--radius-btn);
background: var(--band);
font-size: var(--grad-beschreibung);
line-height: var(--lh-body);
overflow-wrap: anywhere;
}
.frei-woche[hidden] { display: none; }
/* Was gesendet wird (Bubby, 15.10.2026): Zeitraum und Urlaubstage, ganze Woche bis Samstag. */
.frei-umfang {
display: grid;
justify-items: start;
padding: 10px 12px 0;
border: 1px solid var(--line);
border-radius: var(--radius-btn);
font-family: var(--head);
font-size: var(--grad-beschreibung);
font-weight: var(--schnitt-titel);
line-height: var(--lh-body);
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.frei-umfang[hidden],
[data-frei-samstag-hinweis][hidden],
.frei-form [hidden] { display: none; }
/* „frei“ nur ein Tag (Bubby, 25.10.2026): ohne „Bis“ steht „Von“ allein in voller Breite. */
.frei-daten:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
.frei-umfang > span { padding-bottom: 10px; }
.frei-umfang .text-btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: -10px; font-size: var(--grad-beschreibung); }
.frei-wann .pill { margin-left: 4px; vertical-align: 1px; }
.frei-antrag-admin .frei-woche { margin-top: 10px; }
.frei-woche p + p { margin-top: 4px !important; }
.frei-woche b { font-weight: var(--schnitt-stark); }
.frei-tage { list-style: none; margin: 10px 0 0; padding: 0; }
.frei-tage li {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
align-items: baseline;
gap: 12px;
padding: 6px 0;
border-top: 1px solid var(--line);
font-size: var(--grad-beschreibung);
line-height: var(--lh-body);
}
.frei-tage li.ist-eng { font-weight: var(--schnitt-titel); }
.frei-tag {
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.frei-antrag-admin .pinnwand-knoepfe,
.frei-antrag-admin .pinnwand-form,
.frei-warten { margin-top: 12px; }
.frei-warten { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-weight: var(--schnitt-titel); }
.frei-warten .ico { width: 18px; height: 18px; }
.frei-arten { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.frei-arten legend { margin-bottom: 6px; padding: 0; font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); }
.frei-art { display: flex !important; align-items: center; gap: 10px; min-height: 44px; font-size: var(--grad-text) !important; font-weight: var(--schnitt-text) !important; }
.frei-art input { width: 20px; height: 20px; margin: 0; }
.frei-daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.frei-entschieden-kopf { padding-inline: 0; border-top: 1px solid var(--line); border-radius: 0; }
/* Auf „Urlaub“ (Bubby, 16.10.2026): die Zeile allein in einer ruhigen Karte, ohne Linie oben. */
.frei-entschieden-panel .frei-entschieden-kopf:first-child { border-top: 0; }
@media (max-width: 359px) {
.frei-daten { grid-template-columns: minmax(0, 1fr); }
}
/* Die Tage der Entscheidungshilfe zugeklappt; die Zeile sagt, wie viele knapp werden. */
.frei-tage-auf { margin: 10px 0 0; }
.frei-tage-auf > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-family: var(--head); font-weight: var(--schnitt-titel); list-style: none; }
.frei-tage-auf > summary::-webkit-details-marker { display: none; }
.frei-auf-pfeil { display: inline-flex; margin-left: auto; color: var(--muted); transform: rotate(90deg); transition: transform 0.15s ease; }
.frei-auf-pfeil .ico { width: 20px; height: 20px; }
.frei-tage-auf[open] .frei-auf-pfeil { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .frei-auf-pfeil { transition: none; } }
.frei-tage-auf .frei-tage { margin-top: 2px; }
/* „Mein Tag“ auf Heute (Bubby, 25.10.2026). Nur Schalter, Radien 20/26/14/8/999, die elf Grade. */
.mein-tag { --ring-farbe: var(--card); display: flex; flex-direction: column; gap: 14px; }
/* Namen nie trennen („Neu-siedl“), auch nicht bei großer Schrift. */
.mein-tag :is(b, h3, .mt-jetzt-laden, .mt-person) { hyphens: manual; }
.mein-tag > * { margin: 0; }
:where(.mein-tag) p { margin: 0; }
/* Personenbild: Foto oder Anfangsbuchstabe, Kreis wie in der Chat-Liste. */
.avatar {
flex: none;
display: inline-grid;
place-items: center;
border-radius: 999px;
background: var(--black);
color: var(--auf-dunkel);
font-family: var(--head);
font-weight: var(--schnitt-stark);
line-height: 1;
object-fit: cover;
}
html.dark .avatar { background: var(--auf-dunkel); color: var(--black); }
.avatar-s { width: 32px; height: 32px; font-size: var(--grad-klein); }
.avatar-m { width: 40px; height: 40px; font-size: var(--grad-text); }
.avatar-l { width: 56px; height: 56px; font-size: var(--grad-abschnitt); }
.avatar .ico { width: 18px; height: 18px; }
.avatar.mit-ring { box-shadow: 0 0 0 2px var(--ring-farbe); }
.avatar.ist-offen { background: transparent; color: var(--muted); border: 1.5px dashed var(--input-line); }
.avatar.ist-sinnbild { background: var(--band); color: var(--ink); }
.avatar.ist-logo { background: transparent; }
.avatar.ist-gruppe { background: var(--square); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.avatar.ist-gruppe.ist-bruck { background: var(--gold); color: var(--black); box-shadow: none; }
.avatar.ist-gruppe.ist-neusiedl { background: var(--black); color: var(--auf-dunkel); box-shadow: none; }
.avatar.ist-mehr { background: var(--dark-row); color: var(--auf-dunkel); font-size: var(--grad-marke); }
.avatar-stapel { display: inline-flex; align-items: center; }
.avatar-stapel > * + * { margin-left: -8px; }
/* Karten und kleine Teile */
.mt-karte { padding: var(--karte-innen); border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: var(--kante); }
html.dark.black .mt-karte, html.dark.black .mt-woche-kopf { box-shadow: var(--kante), inset 0 0 0 1px var(--line); }
.mt-karte-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mt-karte-kopf h3 { margin: 0; font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-titel); line-height: var(--lh-tight); }
.mt-eyebrow { font-family: var(--head); font-size: var(--grad-marke); font-weight: var(--schnitt-stark); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-klein); }
.mt-leise { margin-top: 4px; color: var(--muted); font-size: var(--grad-klein); }
.mt-zeit { margin-left: auto; color: var(--muted); font-size: var(--grad-klein); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.mein-tag .heute-abschnitt { margin: 6px 4px -4px; }
/* Begrüßung (Tagesblatt) */
.mt-gruss { display: flex; align-items: center; gap: 14px; padding: 2px 4px 0; }
.mt-gruss-bild { flex: none; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.mt-gruss-satz { font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-stark); line-height: var(--lh-tight); }
.mt-gruss-unter { margin-top: 3px; color: var(--muted); font-size: var(--grad-beschreibung); }
/* Wichtig: dieselbe schwarze Karte wie bisher, mit Bild der Absenderin. */
.mt-wichtig .nachricht-kopf { flex-wrap: wrap; }
.mt-wichtig .mt-zeit { color: var(--auf-dunkel-leise); letter-spacing: 0; }
.mt-kapsel-wichtig { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--safran-flaeche); color: var(--auf-safran); font-size: var(--grad-marke); font-weight: var(--schnitt-stark); letter-spacing: .08em; }
.mt-kapsel-wichtig .ico { width: 14px; height: 14px; }
.mt-wichtig-text { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; }
.mt-wichtig-text p { font-size: var(--grad-karte); line-height: var(--lh-body); overflow-wrap: anywhere; }
.mt-wichtig-text b { color: var(--gold); }
.mt-wichtig .avatar, .mt-schicht .avatar, .mt-jetzt .avatar { background: var(--auf-dunkel); color: var(--black); }
.mt-schicht .avatar.ist-offen, .mt-jetzt .avatar.ist-offen { background: transparent; color: var(--auf-dunkel-leise); border-color: var(--auf-dunkel-leise); }
.mt-jetzt .avatar.ist-mehr { background: var(--dark-row); color: var(--auf-dunkel); }
/* Zeilen: Chats und „Für dich“ */
.mt-chat-zeile, .mt-fd-zeile {
--fokus-abstand: -2px;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 56px;
padding: 10px 0;
border: 0;
border-top: 1px solid var(--line);
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.mt-chat-zeile:first-child, .mt-fd-zeile:first-child { border-top: 0; }
.mt-chat-mitte, .mt-fd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-chat-oben, .mt-chat-unten { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mt-chat-oben b, .mt-fd-text b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--grad-text); font-weight: var(--schnitt-stark); }
.mt-chat-text, .mt-fd-text > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--grad-beschreibung); }
.mt-fd-pfeil { display: inline-flex; color: var(--muted); }
.mt-fd-pfeil .ico { width: 20px; height: 20px; }
.mt-fuer-dich { padding-block: 6px; }
@media (hover: hover) { .mt-chat-zeile:hover .mt-chat-oben b, .mt-fd-zeile:hover .mt-fd-text b { text-decoration: underline; } }
/* Schwarze Karten: Deine Schicht (Tagesblatt) und Jetzt (Live) */
.mt-schicht, .mt-jetzt {
--fokus: var(--gold);
--ring-farbe: var(--black);
padding: var(--karte-innen);
border-radius: var(--radius-gross);
background-color: var(--black);
color: var(--auf-dunkel);
box-shadow: var(--kante-gold);
}
.mt-jetzt { background-image: radial-gradient(100% 120% at 100% 0%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 60%); }
html.dark .mt-schicht, html.dark .mt-jetzt { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), var(--kante-gold); }
html.dark.black .mt-schicht, html.dark.black .mt-jetzt { --ring-farbe: var(--paper); background-color: var(--paper); }
.mt-schicht .mt-eyebrow, .mt-jetzt .mt-eyebrow { color: var(--gold); }
.mt-schicht-wo, .mt-jetzt-wo { margin-top: 6px; font-family: var(--head); font-size: var(--grad-zahl); font-weight: var(--schnitt-stark); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.mt-schicht-sub { margin-top: 6px; color: var(--auf-dunkel-leise); }
.mt-balken { margin-top: 14px; height: 8px; border-radius: 999px; background: var(--dark-row); overflow: hidden; }
.mt-balken > span { display: block; width: calc(var(--anteil) * 100%); height: 100%; border-radius: 999px; background: var(--gold); }
.mt-balken-text { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--auf-dunkel-leise); font-size: var(--grad-klein); font-variant-numeric: tabular-nums; }
.mt-balken-text span:nth-child(2) { color: var(--auf-dunkel); font-weight: var(--schnitt-titel); text-align: center; }
.mt-mit { margin-top: 18px; }
.mt-mit-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mt-mit-liste li { display: flex; align-items: center; gap: 10px; font-size: var(--grad-beschreibung); }
.mt-mit-liste b { font-weight: var(--schnitt-stark); }
.mt-jetzt-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mt-jetzt-gruss { font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-stark); line-height: var(--lh-tight); }
.mt-jetzt-wetter { margin-top: 3px; color: var(--auf-dunkel-leise); font-size: var(--grad-beschreibung); }
.mt-jetzt-titel { margin-top: 20px; }
.mt-jetzt-laeden { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mt-jetzt-laeden li { display: grid; grid-template-columns: 6.25em auto minmax(0, 1fr); align-items: center; gap: 10px; }
.mt-jetzt-laden { display: inline-flex; align-items: center; gap: 4px; font-size: var(--grad-beschreibung); font-weight: var(--schnitt-stark); }
.mt-jetzt-namen { min-width: 0; color: var(--auf-dunkel-leise); font-size: var(--grad-klein); }
.mt-jetzt-offen { color: var(--safran-flaeche); font-weight: var(--schnitt-stark); }
/* Schicht zu übernehmen */
.mt-angebot-zeile { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; }
.mt-angebot-tag { font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-stark); }
/* Heute im Laden */
.mt-laden + .mt-laden { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.mt-laden h3 { display: flex; align-items: center; gap: 4px; margin: 0 0 10px; font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); }
.mt-laden-zeit { margin-left: auto; color: var(--muted); font-size: var(--grad-klein); font-weight: var(--schnitt-text); font-variant-numeric: tabular-nums; }
.mt-leute { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mt-leute li { display: flex; align-items: center; gap: 10px; }
.mt-person { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mt-person b { font-size: var(--grad-text); font-weight: var(--schnitt-stark); }
.mt-person span, .mt-person-zeit { color: var(--muted); font-size: var(--grad-klein); }
.mt-person-zeit { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt-leute li.ist-da .mt-person-zeit { color: var(--ink); font-weight: var(--schnitt-titel); }
/* Heute passiert: Zeitleiste */
.mt-live { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--grad-klein); white-space: nowrap; }
.mt-live i { width: 8px; height: 8px; border-radius: 999px; background: var(--gold); }
.mt-gleich-titel { margin: 6px 0 2px; }
.mt-ereignisse { position: relative; list-style: none; margin: 0; padding: 0; }
.mt-ereignisse::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: calc(3.25em + 25px); width: 2px; border-radius: 999px; background: var(--line); }
.mt-ereignisse.ist-gleich + .mt-gleich-titel { margin-top: 12px; }
.mt-ereignis { display: grid; grid-template-columns: 3.25em 32px minmax(0, 1fr); align-items: start; gap: 10px; padding: 6px 0; }
.mt-ereignis .avatar { position: relative; box-shadow: 0 0 0 3px var(--card); }
.mt-ereignis-zeit { padding-top: 7px; color: var(--muted); font-size: var(--grad-klein); font-weight: var(--schnitt-titel); font-variant-numeric: tabular-nums; }
.mt-ereignis-text { padding-top: 5px; font-size: var(--grad-beschreibung); line-height: 1.4; overflow-wrap: anywhere; }
.mt-ereignis-text b { font-weight: var(--schnitt-stark); }
.mt-ereignis.ist-wichtig .mt-ereignis-text b { color: var(--safran); }
.ist-gleich .mt-ereignis-text { color: var(--muted); }
.ist-gleich .avatar:not(.ist-sinnbild) { background: var(--band); color: var(--muted); }
.mt-mehr { margin-top: 4px; }
/* Diese Woche: eine Zeile, aufklappbar */
.mt-woche { display: flex; flex-direction: column; gap: 14px; }
.mt-woche > .meine-woche, .mt-woche > .wer-frei { margin: 0; }
.mt-woche-kopf { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px var(--karte-innen); border: 0; border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: var(--kante); font: inherit; text-align: left; cursor: pointer; }
.mt-woche-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-woche-text b { font-weight: var(--schnitt-stark); }
.mt-woche-text span { color: var(--muted); font-size: var(--grad-klein); }
.mt-woche-pfeil { display: inline-flex; color: var(--muted); }
.mt-woche-pfeil .ico { width: 20px; height: 20px; transform: rotate(90deg); }
.mt-woche.ist-offen .mt-woche-pfeil .ico { transform: rotate(-90deg); }
/* Zahlen des Tages (nur mit Büchern) */
.mt-zahlen-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr)); gap: 10px; }
.mt-zahl { container-type: inline-size; display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 12px; border: 0; border-radius: var(--radius-btn); background: var(--band); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mt-zahl-label { font-family: var(--head); font-size: var(--grad-marke); font-weight: var(--schnitt-stark); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mt-zahl-wert { font-family: var(--head); font-size: min(var(--grad-zahl), calc(100cqi / 6)); font-weight: var(--schnitt-stark); line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt-zahl-hint { color: var(--muted); font-size: var(--grad-klein); }
.mt-zahl.ist-paprika { background: var(--paprika-zart); }
.mt-zahl.ist-paprika :is(.mt-zahl-label, .mt-zahl-wert, .mt-zahl-hint) { color: var(--paprika); }
.mt-aufgaben .laden-heute-liste { margin-top: 0; }
/* Enger Modus (große Schrift, schmal): Zeit über dem Text, Läden untereinander. */
@media (max-width: 19.9375em) {
.mt-ereignisse::before { left: 15px; }
.mt-ereignis { grid-template-columns: 32px minmax(0, 1fr); row-gap: 0; }
.mt-ereignis > .avatar { grid-column: 1; grid-row: 1 / span 2; }
.mt-ereignis-zeit { grid-column: 2; grid-row: 1; padding-top: 0; }
.mt-ereignis-text { grid-column: 2; padding-top: 0; }
.mt-jetzt-laeden li { grid-template-columns: auto minmax(0, 1fr); }
.mt-jetzt-laden { grid-column: 1 / -1; }
.mt-gruss, .mt-jetzt-kopf { flex-wrap: wrap; }
.mt-chat-oben, .mt-karte-kopf { flex-wrap: wrap; }
.mt-chat-oben b, .mt-fd-text b, .mt-fd-text > span, .mt-chat-text { white-space: normal; overflow-wrap: anywhere; }
.mt-fd-zeile .avatar-stapel { display: none; }
.mt-laden h3, .mt-leute li { flex-wrap: wrap; }
.mt-laden-zeit { flex-basis: 100%; margin-left: 0; }
.mt-person-zeit { flex-basis: 100%; padding-left: 42px; }
.mt-balken-text { flex-wrap: wrap; }
.mt-balken-text span:nth-child(2) { order: 3; flex-basis: 100%; text-align: left; }
}
/* Profilfotos überall (25.10.2026): Chat, Mitarbeiterliste, Mein Bereich */
.list-lead.ist-foto, .person-avatar.ist-foto { padding: 0; border: 0; border-radius: 999px; background: var(--band); object-fit: cover; }
.chat-wer { display: flex; align-items: center; gap: 6px; }
.chat-wer-bild { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--black); color: var(--auf-dunkel); font-size: var(--grad-marke); object-fit: cover; }
html.dark .chat-wer-bild { background: var(--auf-dunkel); color: var(--black); }
.chat-kopf .list-lead { flex: none; width: 44px; height: 44px; }
.me-foto-inner { display: flex; align-items: flex-start; gap: 16px; }
.me-foto-text :is(.settings-ok, .error) { margin: 10px 0 0; padding: 0; }
.me-foto-text { flex: 1; min-width: 0; }
.me-foto-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.me-foto-wahl { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.me-foto-wahl:focus-within { outline: 2px solid var(--fokus, var(--ink)); outline-offset: 3px; }
.me-foto-wahl.is-disabled { pointer-events: none; background: var(--disabled-face); color: var(--disabled-ink); }
@media (max-width: 19.9375em) { .me-foto-inner { flex-wrap: wrap; } }
/* ==========================================================================
Karten und Listen. Die Kassa ist die Vorlage: eine helle Karte traegt die
harte Kante, die Zeilen darin stehen nur mit Abstand. Nur Belege und
Zahlungen stehen im Cockpit als eigene Karte je Zeile. Dunkle Kopfkarten,
Knoepfe und Pillen bleiben flach; die schwarzen Flaechen des Cockpits
(Heldenkachel, Leiste, Bon, Kontokarte, Anmeldetafel) stehen auf der
goldenen Kante.
========================================================================== */
.panel,
.kpi:not(.kpi-hero),
.arbeitsplan-kalender,
.meine-woche,
.laden-heute,
.checkliste,
.konto-karte,
.boot-card,
.person,
.settings-list,
.link-card,
.zettel-bisher {
box-shadow: var(--kante);
}
/* Schwarz gewinnt Tiefe allein durch die Kante, nicht durch graue Karten.
Der Innenrand veraendert weder Auswahlumriss noch Tastaturfokus. */
html.dark.black :is(.panel, .kpi:not(.kpi-hero), .arbeitsplan-kalender, .meine-woche, .laden-heute, .checkliste, .konto-karte,
.boot-card, .person, .settings-list, .link-card,
.zettel-bisher) {
box-shadow: inset 0 0 0 1px var(--line), var(--kante);
}
/* Die hellen Flaechen des Cockpits bekommen in Schwarz dieselbe Innenlinie
(eigene Regel, damit die Liste oben ihren Vorrang behaelt). */
html.dark.black :is(.bereich-kachel, .heute-wichtig, .feier, .wer-frei, .pin-key:not(.pin-ok), .chip.filterkachel:not(.active)) {
box-shadow: inset 0 0 0 1px var(--line), var(--kante);
}
/* Zeilen in einer Karte tragen die Kante nicht noch einmal. */
.kpis-umriss .kpi,
.me-wege > .link-card,
.pin-change-card > .link-card,
html.dark.black .kpis-umriss .kpi,
html.dark.black .me-wege > .link-card,
html.dark.black .pin-change-card > .link-card {
box-shadow: none;
}
html.dark.black .kpis.kpis-umriss {
box-shadow: inset 0 0 0 1px var(--line), var(--kante);
}
html.dark.black .panel .kpis.kpis-umriss { box-shadow: none; }
.kassa-hero,
.me-hero {
box-shadow: none;
}
.panel {
background: var(--card);
border: 0;
border-radius: var(--radius);
margin-bottom: var(--abstand);
overflow: visible;
}
.panel h2 {
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-titel);
margin: 0;
padding: var(--karte-innen) var(--karte-innen) var(--abstand-klein);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.panel h2 .mark { color: var(--muted); }
.panel h2 .mark .ico { width: 20px; height: 20px; }
.panel-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.panel-head-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.panel-inner { padding: 0 var(--karte-innen) var(--karte-innen); }
.panel > .panel-inner:first-child { padding-top: var(--karte-innen); }
/* Papierzettel: ein Laden und Zähltag, danach dieselben Mengen wie am Papier. */
.zettel-page {
max-width: var(--formularbreite);
margin-inline: auto;
padding: var(--karte-innen);
}
.zettel-page h2 { padding: 0; margin: 24px 0 8px; font-size: var(--grad-abschnitt); }
.zettel-page h3 {
font-family: var(--schrift-titel);
font-size: var(--grad-karte);
font-weight: var(--schnitt-titel);
}
.zettel-auswahl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: end; }
.zettel-auswahl .field-label { margin: 0; }
.zettel-auswahl .chips { margin: 0; }
.zettel-anleitung { color: var(--ink); font-size: var(--grad-text); line-height: var(--lh-prose); }
.zettel-ausgabe p,
.zettel-pdf-hinweis { color: var(--muted); font-size: var(--grad-beschreibung); line-height: var(--lh-prose); }
.zettel-mengen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
/* Ab 22.10.2026 mit TellerOhneBrot: vier Gruppen, am Computer zwei mal zwei. */
.zettel-mengen-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zettel-mengen-einzel { align-self: end; }
.zettel-mengenpaar { border: 0; padding: 0; margin: 0; min-width: 0; }
.zettel-mengenpaar legend { padding: 0; margin-bottom: 12px; }
.zettel-mengenpaar > div,
.zettel-direkt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.zettel-direkt { margin-top: 12px; }
.zettel-page .field-label { min-width: 0; }
.zettel-page input { font-size: var(--grad-text); }
.zettel-ausgabe { margin: 16px 0 24px; padding-top: 20px; border-top: 1px solid var(--line-card); }
.zettel-ausgabe .field-label { max-width: 320px; margin-bottom: 4px; }
.zettel-ausgabe p { margin: 0; }
.zettel-page [data-zettel-save],
.zettel-page [data-zettel-retry],
.zettel-page [data-zettel-correct] { width: 100%; min-height: 48px; }
.zettel-bisher { margin-top: var(--abstand-gross); padding: var(--karte-innen); border-radius: var(--radius); background: var(--card); }
.zettel-bisher h3 { margin: 0 0 6px; }
.zettel-bisher > p { margin: 0 0 16px; font-size: var(--grad-beschreibung); color: var(--muted); }
.zettel-summen { margin: 0; }
.zettel-summen > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-card); }
.zettel-summen > div:last-child { border-bottom: 0; }
.zettel-summen dd { margin: 0; font-weight: var(--schnitt-titel); white-space: nowrap; }
.zettel-bestaetigung { display: flex; gap: 12px; align-items: start; margin: 20px 0; line-height: 1.6; }
.zettel-bestaetigung input { flex: 0 0 auto; width: 22px; height: 22px; margin: 3px 0 0; }
.zettel-pdf-hinweis { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line-card); }
@media (max-width: 767px) {
.zettel-mengen { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.zettel-auswahl { align-items: stretch; }
.zettel-auswahl .field-label { width: 100%; }
.zettel-bisher { padding: var(--karte-innen); }
}
.panel > .empty { padding-top: 0; }
.panel > .muted { padding: 0 var(--karte-innen) 12px; margin: 0; }
.panel > .modal-dl { margin: 0; padding: 0 var(--karte-innen) 8px; }
.panel > .text-btn { margin: 4px var(--karte-innen) 16px; }
/* ==========================================================================
Listenzeilen (Kassa ist die Vorlage): die Zeilen stehen in der gemeinsamen
Karte. Kein Wechselstreifen, kein Abstand zwischen Karten, keine eigene
Kante. Sinnbild links, Titel in Montserrat 500, Beschreibung darunter,
Betrag und Status rechts.
========================================================================== */
.liste {
display: flex;
flex-direction: column;
gap: 0;
}
/* Belege und Zahlungen im Cockpit: jede Zeile eine eigene helle Karte mit
harter Kante, nach Monat gruppiert. Ueberfaelliges liegt auf Paprika, sein
Anfangsbuchstabe auf Gold. */
.liste.karten { gap: 10px; }
.liste.karten > .listenzeile {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--kante);
padding: 12px 14px 12px 12px;
}
html.dark.black .liste.karten > .listenzeile { box-shadow: inset 0 0 0 1px var(--line), var(--kante); }
.liste.karten > .listenzeile.row-overdue,
.liste.karten > .listenzeile.row-overdue.row-open:not(.is-selected):hover { background: var(--paprika-zart); }
.liste.karten .zeile-titel,
.liste.karten .zeile-betrag { font-weight: var(--schnitt-stark); }
.liste.karten .row-chev { display: none; }
.liste-gruppe {
margin: 18px 4px 2px;
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold-klein);
}
.liste-gruppe:first-child { margin-top: 4px; }
.list-lead.ist-initial {
border: 0;
border-radius: 999px;
background: var(--black);
color: var(--auf-dunkel);
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-stark);
}
html.dark .list-lead.ist-initial { background: var(--auf-dunkel); color: var(--black); }
/* Der Anfangsbuchstabe traegt die Ampel: ueberfaellig Paprika, bald Safran. */
.row-overdue .list-lead.ist-initial,
html.dark .row-overdue .list-lead.ist-initial { background: var(--paprika); color: var(--auf-paprika); }
.row-due-soon .list-lead.ist-initial,
html.dark .row-due-soon .list-lead.ist-initial { background: var(--safran-flaeche); color: var(--auf-safran); }
.statement-panel.ist-karten { background: transparent; }
.statement-panel.ist-karten > .pager { padding: 0 4px; }
.panel > .liste + .pager {
margin-top: 8px;
padding: 4px var(--karte-innen) var(--karte-innen);
}
.listenzeile {
position: relative;
display: flex;
align-items: center;
gap: 16px;
width: 100%;
text-align: left;
background: transparent;
padding: 8px var(--karte-innen);
border: 0;
border-radius: 0;
}
/* Die drei Zustaende unterscheiden sich durch Flaeche und Rand, nie durch
Farbe oder Fettdruck. Auswahl und Tastaturfokus behalten die Kartenkante. */
.listenzeile.row-open { cursor: pointer; }
.liste > .listenzeile.row-open:not(.is-selected):hover,
.liste > .listenzeile.clickable-row:not(.is-selected):hover { background: var(--row-hover); }
.liste > .listenzeile.row-open:not(.is-selected):active { background: var(--row-hover); }
.liste > .listenzeile.is-selected {
background: var(--card);
outline: 2px solid var(--black);
outline-offset: -2px;
}
html.dark .listenzeile.is-selected { outline-color: var(--auf-dunkel); }
.zeile-sinnbild { display: inline-flex; flex: 0 0 auto; }
.zeile-haupt {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1 1 auto;
min-width: 0;
}
/* Obere Zeile: Titel links, Betrag rechts. Der Betrag gibt nie nach, der
Titel kuerzt sich. */
.zeile-oben,
.zeile-unten {
display: flex;
align-items: baseline;
gap: 12px;
min-width: 0;
}
.zeile-unten { align-items: center; }
.zeile-titel {
font-family: var(--head);
font-weight: var(--schnitt-titel);
font-size: var(--grad-karte);
color: var(--black);
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
html.dark .zeile-titel { color: var(--auf-dunkel); }
.zeile-betrag {
font-family: var(--head);
font-weight: var(--schnitt-titel);
font-size: var(--grad-karte);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
white-space: nowrap;
text-align: right;
flex: 0 0 auto;
margin-left: auto;
}
/* Untere Zeile: Beschreibung links, Abzeichen und Pfeil rechts. */
.zeile-unter {
flex: 1 1 auto;
min-width: 0;
color: var(--muted);
font-size: var(--grad-beschreibung);
overflow-wrap: anywhere;
}
/* Die Nebenfelder laufen als ein Satz, durch Punkte getrennt. */
.zeile-feld + .zeile-feld::before {
content: "·";
margin: 0 .4em;
color: var(--muted);
}
.zeile-status {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 4px 6px;
flex: 0 1 auto;
min-width: 0;
margin-left: auto;
}
.zeile-status .pill { white-space: nowrap; }
.zeile-status .abzeichen { margin-left: 0; }
.zeile-aktionen {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
.zeile-aktionen .row-actions { flex-wrap: nowrap; }
/* Fuehrt die ganze Zeile weiter, braucht sie keine Knopfreihe. */
.listenzeile.row-open .row-actions .icon-btn { display: none; }
.zeile-haupt .qr-box,
.zeile-haupt .qr-note { margin-top: 8px; }
/* Sinnbild im hellen, abgerundeten Quadrat. */
.list-lead,
.settings-list-icon,
.link-ico,
.person-avatar {
width: 48px;
height: 48px;
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--square);
color: var(--black);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
html.dark .list-lead,
html.dark .settings-list-icon,
html.dark .link-ico,
html.dark .person-avatar { color: var(--auf-dunkel); }
/* Personen sind Kreise, Dinge bleiben Quadrate. */
.person-avatar { border-radius: 999px; border: 0; }
.list-lead .ico,
.settings-list-icon .ico,
.link-ico .ico { width: 22px; height: 22px; }
.soon {
background: var(--paper);
border: 1px dashed var(--line);
border-radius: var(--radius);
padding: 28px;
color: var(--muted);
}
/* Einstellungen: eine Gruppenkarte. Die Wege darin stoßen aneinander und
trennt nur der Abstand, wie die Zeilen in der Kassa. */
.settings-list {
display: flex;
flex-direction: column;
background: var(--card);
border: 0;
border-radius: var(--radius);
overflow: visible;
}
.settings-list-row,
.settings-nav-row {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
min-height: 72px;
padding: 14px var(--karte-innen);
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-decoration: none;
cursor: pointer;
text-align: left;
position: relative;
}
.settings-list-row:hover,
.settings-nav-row:hover { background: var(--row-hover); }
.settings-list-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-list-copy strong {
font-family: var(--head);
font-size: var(--grad-karte);
font-weight: var(--schnitt-titel);
/* "Benachrichtigungen" passt bei 320 px nicht in eine Zeile. */
hyphens: auto;
overflow-wrap: break-word;
}
.chev { color: var(--muted); flex: 0 0 auto; display: inline-flex; }
.chev .ico { width: 20px; height: 20px; }
.settings-back { margin-bottom: 16px; }
.settings-subhead {
margin: 0 0 16px;
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-titel);
display: flex;
align-items: center;
gap: 8px;
}
.settings-tabs { margin-bottom: 16px; column-gap: var(--abstand-gross); row-gap: 0; }
.settings-tabs .tab { flex: 0 0 auto; }
.settings-device-block { padding: 4px var(--karte-innen) 12px; }
.settings-device-actions { padding: 4px var(--karte-innen) 8px; }
.settings-version { padding: 0 var(--karte-innen) 16px; margin: 0; }
.link-card {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
background: var(--card);
border: 0;
border-radius: var(--radius);
padding: 14px var(--karte-innen);
min-height: 72px;
text-decoration: none;
color: inherit;
margin-bottom: var(--abstand);
}
.link-card:hover { background: var(--row-hover); }
.me-wege > .link-card,
.pin-change-card > .link-card {
background: transparent;
border-radius: 0;
margin-bottom: 0;
min-height: 0;
padding: 8px var(--karte-innen);
}
.link-card > div:not(.link-ico) { flex: 1; min-width: 0; }
.link-card strong { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-titel); }
.link-card p { margin: 2px 0 0; }
.link-chev { color: var(--muted); display: inline-flex; flex: none; }
.link-chev .ico { width: 20px; height: 20px; }
.pin-change-toggle { width: 100%; border: 0; margin: 0; text-align: left; }
.pin-change-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.pin-change-copy { flex: 1; min-width: 0; }
.pin-change-copy > span { display: block; margin: 2px 0 0; }
.pin-change-copy > .settings-ok:empty { display: none; }
.pin-change-toggle[aria-expanded="true"] .link-chev { transform: rotate(90deg); }
/* Mein Bereich: zusammengehoerende Karten stehen am Desktop nebeneinander.
Dieselbe Reihenfolge bleibt am Handy erhalten. Alle Daten haben ihr Label. */
.me-layout { display: grid; gap: var(--abstand); }
.me-layout > * { min-width: 0; margin-bottom: 0; }
.me-daten {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--abstand);
margin: 0;
padding: var(--abstand-klein) var(--karte-innen) var(--karte-innen);
}
.me-daten > div:first-child { grid-column: 1 / -1; }
.me-daten dt { font-size: var(--grad-klein); color: var(--muted); }
.me-daten dd { margin: 4px 0 0; font-size: var(--grad-text); overflow-wrap: anywhere; }
.me-uploads > .kpis { margin: var(--abstand-klein) var(--karte-innen) var(--abstand); }
@media (min-width: 992px) {
.me-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.me-layout > .konto-karte, .me-layout > .me-hero { align-self: stretch; }
.me-layout > .me-hero { margin: 0; }
.me-layout > .link-card { align-self: stretch; }
.me-uploads { grid-column: 1 / -1; }
.me-profile { grid-row: span 2; }
.me-layout:has(.me-profile) > .me-uploads { grid-column: 2; }
.me-uploads .kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.me-uploads .kpis-3 > :last-child { grid-column: 1 / -1; }
}
/* Grusskarte in Mein Bereich: dunkle Karte, runder Avatar, die zweiteilige
Ueberschrift der Marke — HALLO und darunter der Vorname in Gold. */
.me-hero {
background: var(--black);
color: var(--auf-dunkel);
border: 0;
border-radius: var(--radius);
padding: var(--karte-innen);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 16px;
}
.me-hero-copy { min-width: 0; }
.me-hero-title { font-size: var(--grad-abschnitt); padding-bottom: .95em; }
.me-hero p { margin: 0; color: var(--auf-dunkel-leise); }
/* Auf der schwarzen Karte ist der Kreis die aufgehellte Flaeche des Skills. */
.me-hero .person-avatar { width: 56px; height: 56px; font-size: var(--grad-abschnitt); background: var(--dark-row); color: var(--auf-dunkel); }
html.dark .me-hero .person-avatar { background: var(--dark-row); color: var(--auf-dunkel); }
.people {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--personenbreite)), 1fr));
gap: 16px;
}
.person {
background: var(--card);
border: 0;
border-radius: var(--radius);
padding: var(--karte-innen);
}
.person-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 4px; }
.person-avatar {
font-family: var(--head);
font-weight: var(--schnitt-titel);
text-transform: uppercase;
}
.person h3 {
margin: 0 0 4px;
font-family: var(--head);
font-size: var(--grad-karte);
font-weight: var(--schnitt-titel);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.person-top p { margin: 0; overflow-wrap: anywhere; }
.person-top > div:last-child { min-width: 0; }
/* Die vier gerechneten Zahlen aus dem ArbeitszeitPlan sitzen direkt unter dem
Kopf. Bis 18.09.2026 waren das vier Kennzahlkacheln: auf dem Telefon
standen sie untereinander, 331 hoch und fast leer, und ein langer Wert
brach mitten in der Zahl um — aus "10,4333…" wurde "10,". Jetzt ist es eine
schlanke Liste auf der hellen Flaeche des Skills (Radius 20, ohne Linie):
Beschriftung links, Wert rechts, dazwischen die feine Trennlinie einer
Karte. Kein Kachelgitter, keine Mindesthoehe, keine leere Flaeche. */
.person .person-azp {
display: block;
margin: 12px 0 0;
padding: 0;
background: transparent;
border-radius: 0;
}
/* Beschriftung und Wert stehen nebeneinander. Wird es eng, faellt der Wert in
eine eigene Zeile darunter und behaelt dort die ganze Breite — er soll
ausweichen duerfen, nicht brechen. */
.person .azp-zeile {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 12px;
padding: 8px 0;
line-height: var(--lh-tight);
}
/* Die Beschriftung darf umbrechen, der Wert nicht. Sie geht mit ihrer vollen
Breite in die Zeile — nur so entscheidet der Browser richtig, ob beides
nebeneinander passt. Zwaenge man sie auf Breite 0, schoebe sich ihr Text
unter den Wert. */
.person .azp-label { min-width: 0; }
/* Der Wert steht immer am Stueck: nie ein Umbruch mitten in einer Zahl, nie
drei Puenktchen, nie ein abgeschnittenes Ende. Deshalb steht hier
ausdruecklich kein overflow-wrap, kein word-break und kein text-overflow. */
.person .azp-wert {
margin: 0 0 0 auto;
font-family: var(--head);
font-weight: var(--schnitt-titel);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
white-space: nowrap;
text-align: right;
}
.person dl { margin: 10px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.person dt { color: var(--muted); font-size: var(--grad-klein); text-transform: uppercase; letter-spacing: .06em; }
.person dd { margin: 2px 0 0; font-size: var(--grad-text); }
.person-actions { display: flex; gap: 8px; margin-top: 16px; }
.person-actions .ghost { flex: 1; }
.perm-row {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--line-card);
}
.perm-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--grad-beschreibung);
color: var(--ink);
margin: 0;
font-weight: var(--schnitt-text);
}
.perm-chip input { width: 16px; height: 16px; }
.lohn-box { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-card); }
.lohn-row { display: grid; gap: 6px; padding: 8px 0; }
.lohn-row > div { display: flex; justify-content: space-between; gap: 8px; }
/* Meine Lohnzettel (24.10.2026): Zeilen wie die Wege oben, als Knopf. Der
Lohnzettel aus der Chat-Nachricht steht mit goldener Kante da. */
.lohnzettel-zeile { width: 100%; border: 0; text-align: left; font: inherit; }
.lohnzettel-copy { flex: 1; min-width: 0; }
.lohnzettel-copy > span { display: block; margin: 2px 0 0; }
.lohnzettel-zeile.ist-markiert { box-shadow: inset 4px 0 0 var(--gold) !important; }
.me-lohnzettel { padding-bottom: 8px; }
.me-lohnzettel > .error { margin: 0 var(--karte-innen) 8px; }
/* ==========================================================================
Formulare
========================================================================== */
.settings-form {
padding: 4px var(--karte-innen) 8px;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
.tool-row, .flag-row {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid var(--line-card);
margin: 0;
font-size: var(--grad-text);
font-weight: var(--schnitt-text);
}
.tool-row:last-child, .flag-row:last-child { border-bottom: 0; }
.tool-row p, .flag-row p { margin: 4px 0 0; color: var(--muted); font-size: var(--grad-beschreibung); }
.flag-row > div:first-child { flex: 1; min-width: 0; }
/* Lange Ereignisse ("Verarbeitungsfehler" auf 320) trennen nach Silben. */
.flag-row strong { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-titel); -webkit-hyphens: auto; hyphens: auto; }
.flag-block { padding: 4px var(--karte-innen) 8px; }
.settings-form .flag-block { padding-left: 0; padding-right: 0; }
.flag-row input[type="checkbox"]:not(.switch) {
width: 22px;
height: 22px;
flex: none;
margin-top: 2px;
}
.flag-row .state {
font-weight: var(--schnitt-titel);
font-size: var(--grad-beschreibung);
display: inline-flex;
align-items: center;
gap: 6px;
}
.notify-hint { padding: 4px 0 8px; margin: 0; }
.panel > .notify-hint { padding: 0 var(--karte-innen) 12px; }
.notify-event { align-items: center; gap: 16px; }
.notify-head { padding-bottom: 4px; }
.notify-pair { display: flex; gap: 14px; flex: none; align-items: center; }
.notify-head .notify-pair { gap: 14px; min-width: 112px; justify-content: space-between; }
.notify-sw {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
/* 48 breit; bei grosser Schrift waechst die Spalte mit "verfügbar" mit. */
min-width: max(48px, 3.6em);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
color: var(--muted);
cursor: pointer;
margin: 0;
}
.notify-sw .state { min-height: 28px; }
.notify-sw.notify-none { width: max(48px, 3.6em); cursor: default; text-align: center; }
.notify-sw.notify-none .state { display: flex; align-items: center; min-height: 28px; }
.form-actions {
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px 0;
align-items: stretch;
}
/* Schliesst ohne eigenen Vorabstand an den Text darueber an. */
.form-actions-anschluss { padding-top: 0; }
.form-actions .primary,
.form-actions .ghost { width: 100%; }
.panel > .form-actions { padding: 8px var(--karte-innen) var(--karte-innen); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-row .field-label { min-width: 0; }
.settings-ok { margin: 0 var(--karte-innen) 12px; color: var(--moss); font-weight: var(--schnitt-titel); }
.panel > .error { margin: 0 var(--karte-innen) 12px; }
.auto-status {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 0 var(--karte-innen) 12px;
padding: 12px;
border-radius: var(--radius);
background: var(--card);
font-size: var(--grad-beschreibung);
font-weight: var(--schnitt-titel);
}
.auto-status-dot {
width: 10px;
height: 10px;
border-radius: 999px;
flex-shrink: 0;
background: var(--muted);
}
.auto-status-paused .auto-status-dot { background: var(--muted); }
.auto-status-bad { outline: 2px solid var(--black); outline-offset: -2px; }
.auto-status-bad .auto-status-dot { background: var(--black); }
.auto-status-meta { color: var(--muted); font-weight: var(--schnitt-titel); }
html.dark .auto-status-bad { outline-color: var(--auf-dunkel); }
html.dark .auto-status-bad .auto-status-dot { background: var(--auf-dunkel); }
.ingest-notice { margin: 0 0 12px; }
.tool-hint {
margin: 0 var(--karte-innen) var(--abstand);
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--radius-btn);
background: var(--band);
color: var(--ink);
font-size: var(--grad-beschreibung);
line-height: var(--lh-body);
}
.tool-hint-blocked {
color: var(--ink);
background: var(--card);
border-radius: var(--radius);
}
.jobs-notice { margin: 0 var(--karte-innen) 12px; font-weight: var(--schnitt-titel); font-size: var(--grad-text); }
.jobs-notice-ok { color: var(--moss); }
.jobs-notice-error { color: var(--danger); }
.jobs-notice-warn { color: var(--black); }
html.dark .jobs-notice-warn { color: var(--auf-dunkel); }
.jobs-notice-running { color: var(--muted); }
.main > .jobs-notice.ingest-notice { margin: 0 0 12px; }
.kurznamen-liste { padding: 0 var(--karte-innen) 16px; }
.kurzname-input { min-width: 120px; }
/* ==========================================================================
Blaetter und Dialoge. Blatt von unten und Fussleiste waren bis zum
14.09.2026 die zwei grossen Flaechen, die weiss sein durften. Seit dem
warmen Grund tragen beide die daraus gerechnete Flaeche.
========================================================================== */
.sheet-scrim,
.modal-scrim {
position: fixed;
inset: 0;
background: rgba(29, 28, 28, 0.5);
z-index: 40;
display: grid;
place-items: center;
padding: var(--rand);
touch-action: none;
}
.sheet-scrim { z-index: 45; }
.sheet,
.modal {
background: var(--bar);
border: 0;
box-shadow: var(--kante);
border-radius: var(--radius-gross);
width: min(460px, 100%);
max-height: 90vh;
overflow: auto;
padding: var(--karte-innen);
touch-action: pan-y;
}
html.dark.black :is(.sheet, .modal) {
box-shadow: inset 0 0 0 1px var(--line), var(--kante);
}
.sheet {
display: flex;
flex-direction: column;
overflow: hidden;
max-height: min(90vh, 860px);
}
.sheet.sheet-wide { width: min(720px, 100%); height: min(92vh, 860px); }
.sheet-handle { display: none; flex: none; }
.sheet-head { flex: none; }
.sheet-body {
flex: 1;
min-height: 0;
margin: -6px;
padding: 6px;
overflow: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.sheet-close { flex: 0 0 auto; }
/* Offen liegt das Plus-Blatt ueber der Seite; die Leiste bleibt darueber
bedienbar, ihr Kreuz schliesst es wieder. Das Blatt steht zwischen oberem
Rand und Leiste und ist hoechstens so hoch wie dieser Platz - nicht 92 %
der Hoehe und dazu noch der Abstand zur Leiste, sonst ragt es auf kurzen
Handys und quer oben aus dem Bild. Was nicht passt, rollt im Blatt; Titel
und Schliessen bleiben oben stehen. */
.dock.ist-offen { z-index: 46; }
.sheet-scrim:has(.neu-blatt) {
--neu-oben: max(var(--rand), env(safe-area-inset-top));
--neu-unten: calc(var(--dock-hoehe) + var(--dock-luft) + 16px + env(safe-area-inset-bottom));
padding-top: var(--neu-oben);
padding-bottom: var(--neu-unten);
}
.sheet.neu-blatt {
max-height: min(860px, calc(100vh - var(--neu-oben) - var(--neu-unten)));
max-height: min(860px, calc(100dvh - var(--neu-oben) - var(--neu-unten)));
}
body.sheet-lock {
position: fixed;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
}
@keyframes sheet-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.sheet { animation: none !important; }
.icon-btn { transition: none; }
}
.modal-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
}
.modal-head h2 { margin: 4px 0 0; font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-titel); }
.modal-head .eyebrow { margin: 4px 0 0; }
.modal-amounts {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 16px;
}
.modal-amounts > div {
background: transparent;
border: 0;
border-radius: 0;
padding: 8px 0;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.modal-amounts p { margin: 0; }
.modal-amounts .money { font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-titel); margin: 0; }
.modal-dl { margin: 0 0 16px; }
/* Passen Begriff und Betrag nicht nebeneinander ("Betriebseinnahmen" und
ein sechsstelliger Betrag bei 320 px), rutscht der Betrag rechtsbuendig in
die naechste Zeile. */
.modal-dl > div {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 4px 12px;
padding: 10px 0;
border-bottom: 1px solid var(--line-card);
}
.modal-dl > div:last-child { border-bottom: 0; }
.modal-dl dt { color: var(--muted); min-width: 0; hyphens: auto; }
.modal-dl dd { margin: 0 0 0 auto; text-align: right; }
.modal-dl > div:has(.invoice-artikel) { display: block; }
.modal-dl dd.invoice-artikel {
text-align: left;
margin-top: 6px;
white-space: normal;
overflow-wrap: anywhere;
}
.modal .primary,
.sheet .primary { margin-top: 4px; }
.modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.modal-actions .primary { width: 100%; margin-top: 0; }
.logout-modal { text-align: center; }
.logout-modal h2 {
margin: 4px 0 16px;
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-titel);
}
.logout-modal .modal-actions .ghost { width: 100%; }
/* ==========================================================================
Benachrichtigungen an einer senkrechten Zeitachse, das Neueste zuerst.
Punkt auf der Achse, Datum und Kategorien darueber, darunter eine beige
Karte ohne Linie mit hoechstens einem hellen Zweitknopf.
========================================================================== */
.zeitachse {
list-style: none;
margin: 0;
padding: 0;
}
.zeit-eintrag {
position: relative;
padding-left: 55px;
padding-bottom: 52px;
}
.zeit-eintrag::before {
content: "";
position: absolute;
left: 27px;
top: 8px;
bottom: 0;
width: 2px;
background: var(--achse);
}
.zeit-eintrag:last-child { padding-bottom: 8px; }
.zeit-eintrag:last-child::before { display: none; }
.zeit-punkt {
position: absolute;
left: 20px;
top: 2px;
width: 16px;
height: 16px;
border-radius: 999px;
background: var(--black);
}
html.dark .zeit-punkt { background: var(--auf-dunkel); }
.zeit-kopf { margin-bottom: 10px; }
.zeit-datum {
margin: 0;
font-family: var(--head);
font-size: var(--grad-karte);
font-weight: var(--schnitt-titel);
color: var(--black);
line-height: var(--lh-tight);
}
html.dark .zeit-datum { color: var(--auf-dunkel); }
.zeit-kategorien { margin: 4px 0 0; font-size: var(--grad-beschreibung); }
.zeit-tag .zeit-karte {
background: transparent;
border-radius: 0;
padding: 8px var(--karte-innen);
}
.zeit-tag .zeit-titel { padding: 0; display: block; }
/* Auf dem Telefon fuellt die Tageskarte die Breite. Am Schreibtisch bleibt
sie lesbar breit. */
@media (min-width: 992px) {
.zeit-tag { max-width: 560px; }
}
.zeit-filter { margin: 0 0 20px; }
.zeit-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.zeit-titel {
margin: 0 0 6px;
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-titel);
line-height: var(--lh-tight);
}
.zeit-text {
margin: 0 0 16px;
font-size: var(--grad-text);
color: var(--ink);
line-height: var(--lh-body);
}
/* ==========================================================================
Kassa: dunkle Karte mit weisser Schrift.
========================================================================== */
.kassa-hero {
background: var(--black);
color: var(--auf-dunkel);
border: 0;
border-radius: var(--radius);
padding: var(--karte-innen);
margin-bottom: 16px;
}
html.dark.black .kassa-hero { background: var(--paper); }
.kassa-hero h2 {
color: var(--gold);
margin: 0;
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-titel);
display: flex;
align-items: center;
gap: 8px;
}
.kassa-hero-top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.kassa-hero .tabs { margin: 0; border-bottom: 0; }
.kassa-hero .tab { color: var(--auf-dunkel-leise); min-height: 44px; padding: 8px 12px; }
.kassa-hero .tab.active { color: var(--auf-dunkel); box-shadow: inset 0 -2px 0 var(--auf-dunkel); }
.kassa-hero-meta {
container-type: inline-size;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: end;
gap: 12px;
font-size: var(--grad-klein);
margin-bottom: 6px;
}
.kassa-hero-meta > span:last-child { text-align: right; }
.kassa-hero-meta .mark .ico { width: 16px; height: 16px; }
.kassa-hero-total {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
min-width: 0;
}
/* Die Summe passt sich der Kopfkarte an: "€ 123.456,78" braucht rund 7 em. */
.kassa-hero-total .money {
font-size: min(var(--grad-seitentitel), calc(100cqi / 7.2));
font-weight: var(--schnitt-titel);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
line-height: var(--lh-tight);
}
.kassa-hero-amounts {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: var(--grad-klein);
margin-top: 6px;
}
/* Geldfluss: Bar und SumUp fuehren zur Bank in der Mitte.
Auf schmalen Seiten stehen die Werte untereinander, die Pfeile drehen mit. */
.kassa-hero-flow {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.kassa-flow-node {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px 12px;
min-width: 0;
margin: 0;
}
.kassa-flow-node dt { display: flex; align-items: center; gap: 8px; font-size: var(--grad-text); }
.kassa-flow-node small { display: block; color: var(--auf-dunkel-leise); font-size: var(--grad-klein); }
.kassa-flow-node .money {
margin: 0;
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-titel);
white-space: nowrap;
}
.kassa-flow-link {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 32px;
color: var(--auf-dunkel-leise);
font-size: var(--grad-klein);
}
.kassa-flow-arrow { display: flex; transform: rotate(90deg); }
.kassa-flow-arrow .ico { width: 28px; height: 28px; }
.kassa-hero .kassa-flow-period { margin-top: 16px; color: var(--auf-dunkel-leise); line-height: var(--lh-body); }
@media (min-width: 992px) {
.kassa-hero-flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.kassa-flow-node { flex-direction: column; gap: 8px; }
.kassa-flow-link { flex-direction: column-reverse; }
.kassa-flow-arrow { transform: none; }
}
/* Umsaetze: dieselbe dunkle Kopfkarte, darin die drei Summen. Beschriftung
ueber dem Betrag, sonst bricht "Neusiedl € 150,00" auf 390 mitten um. */
.umsatz-hero .kassa-hero-meta > span { display: flex; flex-direction: column; gap: 2px; }
.umsatz-hero .kassa-hero-ort { display: inline-flex; align-items: center; gap: 4px; }
/* Die zwei Laeden teilen sich am Handy die Breite; sechsstellig passt es
nur, wenn die Zahl in ihrer halben Breite bleibt. */
.umsatz-hero .kassa-hero-meta strong { font-size: min(var(--grad-karte), calc(50cqi / 7.8)); font-weight: var(--schnitt-titel); white-space: nowrap; }
.umsatz-hero .kassa-hero-meta > span:last-child { align-items: flex-end; }
.umsatz-hero .kassa-hero-total { align-items: center; }
.umsatz-hero .kassa-hero-amounts { color: var(--auf-dunkel-leise); }
.ratio-bar {
height: 8px;
background: var(--dark-row);
border-radius: 999px;
margin: 10px 0 0;
overflow: hidden;
display: flex;
}
/* Der Anteil ist ein Messwert und kommt als Schalter aus der Ansicht,
nicht als Gestaltungswert im Seitentext. */
.ratio-bar > span { display: block; height: 100%; width: var(--anteil, 0%); background: var(--gold); }
.ratio-bar > em { display: block; height: 100%; flex: 1; background: var(--auf-dunkel); font-style: normal; }
.kassa-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--abstand);
margin-bottom: var(--abstand);
}
.kassa-grid + .muted {
border: 1px solid var(--line);
border-radius: var(--radius-btn);
background: var(--band);
padding: 14px 16px;
margin: 0 0 var(--abstand);
}
@media (min-width: 992px) {
.kassa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kassa-line, .kassa-total {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 6px var(--karte-innen);
font-size: var(--grad-text);
}
.kassa-total {
border-top: 1px solid var(--line-card);
margin-top: 8px;
padding-top: 12px;
padding-bottom: 16px;
font-weight: var(--schnitt-titel);
}
.kassa-total .money { font-weight: var(--schnitt-titel); }
.kassa-line > .money, .kassa-total > .money { margin-left: auto; }
.kassa-col { padding-bottom: 0; }
.kassa-col h2 { padding-bottom: var(--abstand-klein); }
.money-in { color: var(--moss); }
.money-out { color: var(--danger); }
/* ==========================================================================
Preise (nur Admin): Kacheln, die wichtigsten Einkäufe als Karten mit
kleiner Kurve, Balken für teurer und billiger, das Produkt im Blatt.
Teurer Paprika, billiger Kräuter (Konrad, 23.10.2026), immer mit Pfeil und
Zahl; Kurven und Achsen in Tinte.
========================================================================== */
.preise-kacheln { margin-bottom: 0; }
.preise-kacheln > .kpi.kpi-hero .hint { margin-top: 10px; }
.preise-ico-teurer { color: var(--paprika); }
.preise-ico-billiger { color: var(--kraeuter); }
/* Pfeil und Prozent */
.preise-aenderung {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
white-space: nowrap;
}
.preise-aenderung.ist-teurer { color: var(--paprika); }
.preise-aenderung.ist-billiger { color: var(--kraeuter); }
.preise-aenderung.ist-gleich { color: var(--muted); font-weight: var(--schnitt-titel); }
.preise-aenderung-text { font-weight: var(--schnitt-titel); }
.preise-pfeil { display: inline-flex; }
.preise-pfeil .ico { width: 16px; height: 16px; }
/* Kurven: Stufen in Tinte, der letzte Kauf als Punkt. */
.preise-kurve { display: block; color: var(--ink); }
.preise-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.preise-linie { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.preise-punkt { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; }
/* Die wichtigsten Einkäufe: 2 Spalten am Handy, 4 am Schreibtisch. */
.preise-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.preise-karte {
container-type: inline-size;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
padding: 13px 14px;
border: 0;
border-radius: var(--radius);
background: var(--card);
box-shadow: var(--kante);
color: inherit;
font: inherit;
text-align: left;
-webkit-tap-highlight-color: transparent;
}
.preise-karte:active { transform: scale(0.98); }
@media (hover: hover) { .preise-karte:hover { background: var(--row-hover); } }
html.dark.black .preise-karte { box-shadow: inset 0 0 0 1px var(--line), var(--kante); }
.preise-lieferant {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
}
.preise-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(2em * var(--lh-tight));
font-family: var(--head);
font-size: min(var(--grad-beschreibung), calc(100cqi / 9));
font-weight: var(--schnitt-titel);
line-height: var(--lh-tight);
overflow-wrap: break-word;
}
.preise-karte .preise-kurve { height: 40px; margin: 4px 0; }
.preise-karte-fuss { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
.preise-preis {
font-family: var(--head);
font-size: min(var(--grad-karte), calc(100cqi / 7));
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
min-width: 0;
}
.preise-preis small { white-space: nowrap; }
.preise-preis small, .preise-detail-preis small, .preise-fakten small {
font-family: var(--sans);
font-size: var(--grad-klein);
font-weight: var(--schnitt-text);
color: var(--muted);
}
.preise-leise { font-size: var(--grad-klein); line-height: 1.35; color: var(--muted); }
/* Teurer und billiger: Balken nach dem Betrag im Monat. */
.preise-raster { margin-top: var(--abschnitt-abstand); }
.preise-balken-liste { list-style: none; margin: 0; padding: 0 0 8px; }
.preise-balken-zeile {
display: grid;
gap: 6px;
width: 100%;
padding: 10px var(--karte-innen);
border: 0;
border-top: 1px solid var(--line-card);
background: transparent;
color: inherit;
font: inherit;
text-align: left;
--fokus-abstand: -4px;
}
.preise-balken-liste > li:first-child .preise-balken-zeile { border-top: 0; }
@media (hover: hover) { .preise-balken-zeile:hover { background: var(--row-hover); } }
.preise-balken-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.preise-balken-name { display: flex; flex-direction: column; min-width: 0; }
.preise-balken-name strong {
font-family: var(--head);
font-size: var(--grad-beschreibung);
font-weight: var(--schnitt-titel);
line-height: var(--lh-tight);
overflow-wrap: anywhere;
}
.preise-balken-name span { font-size: var(--grad-klein); color: var(--muted); }
.preise-balken-spur { display: block; height: 10px; }
.preise-balken { display: block; height: 10px; width: calc(var(--anteil, 0) * 100%); min-width: 4px; border-radius: 999px; }
.preise-balken.ist-teurer { background: var(--paprika); }
.preise-balken.ist-billiger { background: var(--kraeuter); }
.preise-balken-wert { font-size: var(--grad-klein); color: var(--muted); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.preise-hinweis { margin: 10px 4px 0; font-size: var(--grad-klein); line-height: var(--lh-body); color: var(--muted); }
/* Das Produkt im Blatt */
.preise-detail-preis {
margin: 0;
font-family: var(--head);
font-size: var(--grad-zahl);
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.preise-detail-satz { margin: 2px 0 0; }
.preise-detail-satz .preise-aenderung { font-size: var(--grad-beschreibung); }
.preise-gross { margin: var(--abstand) 0 0; touch-action: pan-y; }
.preise-ablesen {
margin: 0 0 6px;
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
color: var(--muted);
}
.preise-flaeche { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 6px 8px; height: 200px; }
.preise-kurve-gross { height: 100%; }
.preise-achse-y {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0;
margin: -0.55em 0;
text-align: right;
}
.preise-achse-y, .preise-achse-x {
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
color: var(--muted);
}
.preise-achse-x { grid-column: 2; position: relative; display: block; height: 1.4em; }
.preise-achse-x > span { position: absolute; left: calc(var(--anteil, 0) * 100%); }
.preise-fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: var(--abstand-gross) 0 0; }
.preise-fakten dt { font-size: var(--grad-klein); color: var(--muted); }
.preise-fakten dd {
margin: 2px 0 0;
font-family: var(--head);
font-size: var(--grad-beschreibung);
font-weight: var(--schnitt-titel);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.preise-wechsel-titel { margin: var(--abstand-gross) 0 6px; }
.preise-wechsel { list-style: none; margin: 0; padding: 0; }
.preise-wechsel > li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto 76px;
align-items: baseline;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid var(--line-card);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.preise-wechsel > li:last-child { border-bottom: 0; }
.preise-wechsel .money { font-family: var(--head); font-weight: var(--schnitt-titel); }
.preise-wechsel .preise-aenderung { justify-self: end; }
.preise-blatt .preise-hinweis { margin: var(--abstand) 0 0; }
@media (min-width: 992px) {
.preise-karten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.preise-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand); align-items: start; }
.preise-raster > .panel { margin-bottom: 0; }
.preise-flaeche { height: 240px; }
}
/* ==========================================================================
Steuer
========================================================================== */
.tax-cards {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 16px;
}
@media (min-width: 992px) {
.tax-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Zahlenliste: dieselbe Listenzeile, nur mit zwei Betraegen rechts. Die
Kopfzeile darueber sagt, welcher Zeitraum welche Spalte ist — eine
Versalien-Abschnittsueberschrift, keine Tabellenkopfzeile. */
.zeilen-kopf {
background: transparent;
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 10px var(--karte-innen);
}
.zeilen-kopf-feld {
width: 6.5rem;
text-align: right;
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
color: var(--muted);
text-transform: uppercase;
letter-spacing: .08em;
}
.liste-zahlen .listenzeile { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
/* In der schmalen Zahlenkarte darf die Bezeichnung umbrechen statt zu
Stummeln zu werden - die Zeile waechst mit dem Text, das ist erlaubt. */
.liste-zahlen .zeile-titel {
font-size: var(--grad-karte);
white-space: normal;
overflow: visible;
line-height: var(--lh-tight);
}
/* Zwei Zahlen je Zeile, beide in derselben Spaltenbreite wie die Kopfzeile
darueber - sonst laesst sich Monat nicht gegen Jahr lesen. */
.liste-zahlen .zeile-oben { gap: 8px; }
.liste-zahlen .zeile-betrag {
width: 6.5rem;
flex: 0 0 auto;
margin-left: 0;
}
.liste-zahlen .zeile-betrag:first-of-type { margin-left: auto; }
/* In den schmalen Steuerkarten bekommt die Bezeichnung eine eigene Zeile.
Monat und Jahr behalten ihre zwei Spalten und denselben Schriftgrad. */
.tax-cards .zeilen-kopf,
.tax-cards .liste-zahlen .zeile-oben {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tax-cards .zeile-titel { grid-column: 1 / -1; overflow-wrap: anywhere; }
.tax-cards .zeilen-kopf-feld,
.tax-cards .liste-zahlen .zeile-betrag { width: auto; }
/* Monat und Jahr teilen sich die Zeile; ein sechsstelliger Betrag passt am
320er Handy nur, wenn er in seiner halben Zeile bleibt ("€ 123.456,00"
braucht rund 7,1 em). */
.tax-cards .liste-zahlen .listenzeile { container-type: inline-size; }
.tax-cards .liste-zahlen .zeile-betrag { font-size: min(var(--grad-karte), calc(50cqi / 7.6)); }
/* Drei Spalten statt zwei: Soll, Haben und Unterschied sind Stueckzahlen,
keine Betraege - sie brauchen viel weniger Platz als eine Geldspalte. */
.zeilen-kopf-drei .zeilen-kopf-feld,
.liste-zahlen.liste-drei .zeile-betrag { width: 4.6rem; }
/* Umsaetze: die zwei Ladenspalten stehen auf jeder Breite, Neusiedl und
Bruck nebeneinander. Ohne Eurozeichen passen beide auch am Telefon in eine
Zeile. Was darunter liegt - Bar, Karte, die zwei Steuersaetze - kommt beim
Antippen und steht am Telefon untereinander. */
.umsatz-detail {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px 16px;
margin: 6px 0 0;
}
.umsatz-detail > div {
display: flex;
justify-content: space-between;
gap: 8px;
min-width: 0;
}
.umsatz-detail dt {
color: var(--muted);
font-size: var(--grad-beschreibung);
}
.umsatz-detail dd {
margin: 0;
font-family: var(--head);
font-weight: var(--schnitt-titel);
font-size: var(--grad-beschreibung);
white-space: nowrap;
}
/* ==========================================================================
An Steuerberater senden: Blatt unter Plus → Werkzeuge (nur Admin). Monat,
was rausgeht, ob der Monat bereit ist, Knöpfe, Stand des Versands.
========================================================================== */
.stb-blatt .modal-head > div { flex: 1; min-width: 0; container-type: inline-size; }
.stb-blatt .sheet-head h2 { font-size: min(var(--grad-seitentitel), calc(100cqi / 8.6)); }
.stb-monat { margin: 0 0 var(--abstand-klein); }
.stb-monat .icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.stb-klein { margin: var(--abstand-gross) 0 2px; }
.stb-liste { margin-bottom: 0; }
.stb-liste dd {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
min-width: 0;
overflow-wrap: anywhere;
}
.stb-liste dd strong { font-weight: var(--schnitt-stark); }
.stb-klein-text { color: var(--muted); font-size: var(--grad-klein); }
.stb-pillen.stb-pillen { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.stb-satz {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 6px 0 0;
font-size: var(--grad-beschreibung);
line-height: var(--lh-body);
}
.stb-satz .ico { flex: none; width: 20px; height: 20px; color: var(--safran); }
.stb-satz.ist-bereit .ico { color: var(--kraeuter); }
/* Schon gesendet: schwarze Fläche mit goldenem Zeichen, flach wie eine Kopfkarte. */
.stb-schon {
display: flex;
align-items: flex-start;
gap: 12px;
margin: var(--abstand) 0 0;
padding: 14px 16px;
border-radius: var(--radius-btn);
background: var(--black);
color: var(--auf-dunkel);
font-size: var(--grad-beschreibung);
line-height: var(--lh-body);
}
.stb-schon p { margin: 0; }
.stb-schon-ico { display: inline-flex; color: var(--gold); }
.stb-schon-ico .ico { width: 22px; height: 22px; }
html.dark .stb-schon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }
/* Stand des Versands: läuft, gesendet (Kräuter) oder nicht gesendet. */
.stb-lauf {
display: flex;
align-items: flex-start;
gap: 12px;
margin: var(--abstand) 0 0;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--radius-btn);
background: var(--band);
color: var(--ink);
font-size: var(--grad-beschreibung);
line-height: var(--lh-body);
}
.stb-lauf p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.stb-lauf > .ico { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.stb-lauf.is-busy > .ico { animation: spin 0.8s linear infinite; }
.stb-lauf.ist-gesendet { border-color: transparent; background: var(--kraeuter-zart); }
.stb-lauf.ist-gesendet > .ico { color: var(--kraeuter); }
.stb-lauf.ist-fehler { border-color: var(--ink); }
.stb-fehlend { display: block; margin-top: 4px; font-size: var(--grad-klein); }
/* Hinweise nur für Bubby: Sperre Paprika, Warnung Safran, Info ruhig ohne Ampelfarbe. */
.stb-hinweise { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: var(--abstand-klein); }
.stb-hinweis-zeile {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-btn);
background: var(--band);
color: var(--ink);
font-size: var(--grad-beschreibung);
line-height: var(--lh-body);
}
.stb-hinweis-zeile p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.stb-hinweis-zeile strong { display: block; font-weight: var(--schnitt-stark); }
.stb-hinweis-zeile > .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.stb-hinweis-zeile.ist-info { background: transparent; color: var(--muted); }
.stb-hinweis-zeile.ist-info strong { color: var(--ink); font-weight: var(--schnitt-titel); }
.stb-hinweis-zeile.ist-sperre { border-color: var(--paprika); background: var(--paprika-zart); }
.stb-hinweis-zeile.ist-sperre > .ico,
.stb-hinweis-zeile.ist-sperre strong { color: var(--paprika); }
.stb-hinweis-zeile.ist-warnung { border-color: var(--safran); background: var(--safran-zart); }
.stb-hinweis-zeile.ist-warnung > .ico,
.stb-hinweis-zeile.ist-warnung strong { color: var(--safran); }
.stb-nach-satz {
display: flex;
align-items: flex-start;
gap: 8px;
margin: var(--abstand-klein) 0 0;
color: var(--muted);
font-size: var(--grad-klein);
line-height: var(--lh-body);
}
.stb-nach-satz .ico { flex: none; width: 18px; height: 18px; color: var(--paprika); }
.stb-nach-satz.ist-mailfehler { color: var(--ink); }
.stb-nach-satz.ist-mailfehler strong { color: var(--paprika); }
/* „Trotzdem senden“: eigener, deutlicher Knopf in Paprika; in der Rückfrage gefüllt. */
.stb-trotzdem {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 48px;
padding: 10px 18px;
border: 1.5px solid var(--paprika);
border-radius: var(--radius-btn);
background: transparent;
color: var(--paprika);
font-family: var(--head);
font-size: var(--grad-text);
font-weight: var(--schnitt-stark);
cursor: pointer;
transition: background-color 0.15s ease;
}
.stb-trotzdem .ico { width: 20px; height: 20px; }
@media (hover: hover) {
.stb-trotzdem:hover:not(:disabled) { background: var(--paprika-zart); }
}
.stb-trotzdem:disabled {
border-color: var(--disabled-face);
background: var(--disabled-face);
color: var(--disabled-ink);
cursor: not-allowed;
}
.stb-frage .stb-trotzdem:not(:disabled) { background: var(--paprika); color: var(--auf-paprika); }
.stb-hinweis.ist-sperre { color: var(--paprika); }
.stb-frage-trotzdem {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 var(--abstand);
padding: 12px 14px;
border: 1px solid var(--paprika);
border-radius: var(--radius-btn);
background: var(--paprika-zart);
font-size: var(--grad-beschreibung);
line-height: var(--lh-body);
}
.stb-frage-trotzdem > .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--paprika); }
.stb-frage-trotzdem p { margin: 0; overflow-wrap: anywhere; }
.stb-frage-trotzdem p + p { margin-top: 4px; }
.stb-frage-trotzdem strong { color: var(--paprika); }
.stb-knoepfe { margin-top: var(--abstand-gross); }
.stb-knoepfe .ghost { width: 100%; }
.stb-knoepfe .primary .ico { width: 20px; height: 20px; }
.stb-hinweis { margin: 0; font-size: var(--grad-klein); text-align: center; line-height: var(--lh-body); }
.stb-laedt {
display: flex;
align-items: center;
gap: 8px;
margin: var(--abstand) 0;
color: var(--muted);
}
.stb-laedt .ico { width: 18px; height: 18px; animation: spin 0.8s linear infinite; }
.stb-laedt.is-klein { margin: 0; font-size: var(--grad-klein); justify-content: center; }
.stb-laedt.is-klein .ico { width: 14px; height: 14px; }
.stb-frage-schon { margin: 0 0 var(--abstand-klein); line-height: var(--lh-body); }
@media (prefers-reduced-motion: reduce) {
.stb-lauf.is-busy > .ico,
.stb-laedt .ico { animation: none; }
}
/* Steuer: nur der Weg zum Blatt, keine zweite Funktion. */
.stb-weg { margin: 0 0 var(--abstand); }
/* ==========================================================================
Getraenke auf einen Blick (Bubby, 25.10.2026: „zu viel Schrift, zu wenig
Uebersicht“). Oben die Aufgaben als Knoepfe, je Laden eine schwarze
Kopfkarte mit Ampel, letzter und naechster Zaehlung; darunter die Sorten
als Kacheln mit Sinnbild, Bestand, Abweichung und Verkauf je Tag, dann
„Seit der Zaehlung“. Zaehlen als Liste wie der Zettel: Sinnbild, Name,
grosses Feld, neun Striche als Fortschritt. Erklaerungen nur aufgeklappt.
Farben mit Bedeutung: Kraeuter stimmt, Safran heute zaehlen und knapp
(Vorrat unter einer Woche, Bubby 25.10.2026),
Paprika Zaehlung ueberfaellig; die Abweichung traegt Tinte, keine Farbe.
========================================================================== */
.getraenke-seite {
--getraenke-kontrast: var(--black);
--getraenke-invers: var(--auf-dunkel);
--focus-ring: none;
display: flex;
flex-direction: column;
gap: var(--abstand);
}
.getraenke-seite > * { margin: 0; }
.getraenke-seite :is(input, button, select, textarea) {
scroll-margin-top: calc(var(--kopf-abstand) + env(safe-area-inset-top));
scroll-margin-bottom: calc(var(--fuss-abstand) + env(safe-area-inset-bottom) + 16px);
}
html.dark .getraenke-seite {
--getraenke-kontrast: var(--auf-dunkel);
--getraenke-invers: var(--black);
}
.getraenke-seite :is(button, a, input, summary):focus-visible { outline: 2px solid var(--getraenke-kontrast); outline-offset: 3px; box-shadow: none; }
.getraenke-seite .kassa-hero :is(button, a, summary):focus-visible { outline-color: var(--gold); }
.getraenke-leise { color: var(--muted); font-size: var(--grad-klein); font-weight: var(--schnitt-text); }
.kassa-hero .getraenke-leise { color: var(--auf-dunkel-leise); }
/* Kleine Versalienzeile wie „ZAHLEN“ auf Heute. */
.getraenke-abschnitt {
margin: 0 0 12px;
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold-klein);
}
.getraenke-bild {
flex: none;
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: var(--radius-btn);
background: var(--band);
color: var(--ink);
}
.getraenke-bild .ico { width: 24px; height: 24px; }
/* Aufgaben: vier gleich breite Knoepfe, Sinnbild ueber Wort wie die Leiste. */
.getraenke-aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 10px; }
.getraenke-aktion {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 72px;
padding: 10px 6px;
border: 0;
border-radius: var(--radius);
background: var(--card);
box-shadow: var(--kante);
color: var(--ink);
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
}
.getraenke-aktion .ico { width: 24px; height: 24px; }
.getraenke-aktion.active, html.dark .getraenke-aktion.active { background: var(--black); color: var(--gold); box-shadow: var(--kante-gold); }
@media (hover: hover) { .getraenke-aktion:not(.active):hover { background: var(--row-hover); } }
.getraenke-aktion:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) { .getraenke-aktion:active { transform: none; } }
/* Kopfkarte je Laden: Name und Ampel, darunter drei Felder. */
.getraenke-laeden { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abschnitt-abstand); }
.getraenke-laden { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.getraenke-laden > * { margin: 0; }
.getraenke-kopf { margin: 0; box-shadow: var(--kante-gold); }
.getraenke-kopf-oben { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
.getraenke-kopf h2 { margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.getraenke-ampel {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-stark);
white-space: nowrap;
}
.getraenke-ampel .ico { width: 16px; height: 16px; }
.getraenke-ampel.ist-ok { background: var(--kraeuter-zart); color: var(--kraeuter); }
.getraenke-ampel.ist-ab { background: var(--auf-dunkel); color: var(--black); }
.getraenke-ampel.ist-offen { box-shadow: inset 0 0 0 1px var(--auf-dunkel-leise); color: var(--auf-dunkel); }
.getraenke-kopf-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: 14px 16px; margin: 0; }
.getraenke-kopf-felder > div { min-width: 0; }
.getraenke-kopf-felder dt {
margin-bottom: 6px;
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--auf-dunkel-leise);
}
.getraenke-kopf-felder dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.getraenke-kopf-felder b { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); color: var(--auf-dunkel); font-variant-numeric: tabular-nums; white-space: nowrap; }
.getraenke-kopf .avatar { background: var(--auf-dunkel); color: var(--black); }
.getraenke-kopf-hinweis { margin: 12px 0 0; font-size: var(--grad-klein); color: var(--auf-dunkel-leise); }
.getraenke-kapsel { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: var(--grad-klein); font-weight: var(--schnitt-stark); white-space: nowrap; }
.getraenke-kapsel.ist-bald { background: var(--safran-flaeche); color: var(--auf-safran); }
.getraenke-kapsel.ist-ueberfaellig { background: var(--paprika); color: var(--auf-paprika); }
html.dark .getraenke-kapsel.ist-ueberfaellig { background: var(--paprika); color: var(--auf-paprika); }
/* Sorten: Kacheln mit Sinnbild, Marke, Zahl und Saeulen. */
.getraenke-sorten-karte { margin: 0; }
.getraenke-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 92px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.getraenke-kachel {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
padding: 10px;
border-radius: var(--radius-btn);
background: var(--band);
container-type: inline-size;
}
.getraenke-kachel .getraenke-bild { width: 32px; height: 32px; border-radius: var(--radius-tight); background: var(--card); }
.getraenke-kachel-oben { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; margin-bottom: 2px; }
.getraenke-kachel-name { font-size: var(--grad-klein); color: var(--muted); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.getraenke-kachel-zahl { font-family: var(--head); font-size: min(var(--grad-zahl), calc(100cqi / 3.2)); font-weight: var(--schnitt-stark); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.getraenke-saeulen { display: block; width: 100%; height: 22px; margin-top: 2px; }
.getraenke-saeulen rect { fill: var(--input-line); }
.getraenke-saeulen rect.ist-letzter { fill: var(--ink); }
.getraenke-reicht { font-size: var(--grad-klein); color: var(--muted); line-height: var(--lh-tight); }
.getraenke-reicht.ist-knapp { color: var(--safran); font-weight: var(--schnitt-stark); }
/* Marke rechts oben: Haken (stimmt), Tinte (weicht ab), Rand (klein), offen. */
.getraenke-marke {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 24px;
padding: 0 8px;
border-radius: 999px;
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.getraenke-marke .ico { width: 16px; height: 16px; }
.getraenke-marke.ist-ok { padding: 0; min-width: 24px; background: var(--kraeuter-zart); color: var(--kraeuter); }
.getraenke-marke.ist-ab { background: var(--getraenke-kontrast); color: var(--getraenke-invers); }
.getraenke-marke.ist-klein { box-shadow: inset 0 0 0 1.5px var(--getraenke-kontrast); color: var(--ink); }
.getraenke-marke.ist-offen { color: var(--muted); font-weight: var(--schnitt-titel); }
/* Seit der Zaehlung: drei Summen, Zeitleiste. */
.getraenke-seit { margin: 0; }
.getraenke-summen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.getraenke-summen > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-btn); background: var(--band); min-width: 0; container-type: inline-size; }
.getraenke-summen b { font-family: var(--head); font-size: min(var(--grad-abschnitt), calc(100cqi / 3.6)); font-weight: var(--schnitt-stark); font-variant-numeric: tabular-nums; }
.getraenke-summen span { font-size: var(--grad-klein); color: var(--muted); white-space: nowrap; }
.getraenke-zeitleiste { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.getraenke-zeitleiste li { display: grid; grid-template-columns: 4.5rem 32px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line-card); }
.getraenke-zeitleiste time { padding-top: 6px; font-size: var(--grad-klein); font-weight: var(--schnitt-titel); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.getraenke-zeitleiste b { display: block; padding-top: 4px; font-family: var(--head); font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); }
.getraenke-kapseln { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.getraenke-menge-kapsel { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 6px; border-radius: 999px; background: var(--band); font-size: var(--grad-klein); font-weight: var(--schnitt-titel); font-variant-numeric: tabular-nums; white-space: nowrap; }
.getraenke-menge-kapsel .ico { width: 16px; height: 16px; }
/* Einklappbares: Erklaerung und (ohne Admin) Bestand je Sorte. */
.getraenke-erklaerung { margin-top: 14px; font-size: var(--grad-beschreibung); line-height: var(--lh-body); color: var(--muted); }
.getraenke-erklaerung summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-family: var(--head); font-weight: var(--schnitt-titel); color: var(--ink); }
.getraenke-erklaerung p { margin: 0 0 8px; }
.getraenke-mehr > summary {
display: flex;
align-items: center;
gap: 10px;
min-height: 52px;
padding: 0 var(--karte-innen);
border-radius: var(--radius);
background: var(--card);
box-shadow: var(--kante);
cursor: pointer;
font-family: var(--head);
font-size: var(--grad-karte);
font-weight: var(--schnitt-titel);
}
.getraenke-mehr[open] > summary { margin-bottom: 10px; }
/* Zaehlen: Laden und Tag in einer Reihe, dann die neun Felder. */
.getraenke-inventur { margin: 0; }
.getraenke-wo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: var(--abstand); }
.getraenke-ladenwahl { min-width: 0; margin: 0; padding: 0; border: 0; }
.getraenke-mengen { min-width: 0; margin: 0; padding: 0; border: 0; }
.getraenke-ort-knopfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 480px; }
.getraenke-ort-knopfe .chip { width: 100%; min-height: var(--feld-hoehe); font-size: var(--grad-text); }
.getraenke-ort-knopfe .chip .mark .ico { width: 20px; height: 20px; }
.getraenke-datum { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--head); font-weight: var(--schnitt-titel); }
.getraenke-datum input { flex: 1 1 auto; width: auto; min-width: 0; max-width: 100%; }
/* Zaehlen als Liste in der Reihenfolge des Zettels: Sinnbild, Name, grosses Feld. */
.getraenke-zaehlraster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.getraenke-zaehlfeld {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 6.5rem;
align-items: center;
gap: 8px 12px;
margin: 0;
padding: 8px 8px 8px 12px;
border-radius: var(--radius-btn);
background: var(--band);
}
.getraenke-zaehlfeld .getraenke-bild { background: var(--card); }
.getraenke-zaehlfeld-name { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-titel); line-height: var(--lh-tight); overflow-wrap: break-word; min-width: 0; }
.getraenke-zaehlfeld input {
width: 100%;
min-height: var(--feld-hoehe);
text-align: center;
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
background: var(--field);
}
.getraenke-inventur .getraenke-meldung.ist-info { font-size: var(--grad-klein); padding: 10px 12px; }
.getraenke-inventur-abschluss { margin-top: var(--abstand-gross); }
.getraenke-striche { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; }
.getraenke-striche span { height: 6px; border-radius: 999px; background: var(--band); box-shadow: inset 0 0 0 1px var(--line); }
.getraenke-striche span.ist-voll { background: var(--ink); box-shadow: none; }
.getraenke-fortschritt { margin: 0; font-family: var(--head); font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); }
.getraenke-inventur-abschluss > :is(.primary, .ghost) { width: 100%; margin-top: 12px; }
/* Umbuchen: Felder als Liste. */
.getraenke-mengenraster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
.getraenke-menge {
display: grid;
grid-template-columns: minmax(0, 1fr) 104px;
align-items: center;
gap: 12px;
margin: 0;
padding: 8px 0;
border-bottom: 1px solid var(--line-card);
font-size: var(--grad-text);
}
.getraenke-menge input { width: 100%; min-height: var(--feld-hoehe); text-align: right; font-size: var(--grad-text); font-weight: var(--schnitt-text); font-variant-numeric: tabular-nums; }
/* Meldungen: ein Problem steht im Rahmen, eine Bestaetigung mit Haken. */
.getraenke-meldung,
.arbeitsplan-meldung,
.zettel-hinweis {
border: 1px solid var(--line);
border-radius: var(--radius-btn);
background: var(--band);
padding: 14px 16px;
margin: var(--abstand) 0;
font-size: var(--grad-beschreibung);
line-height: var(--lh-body);
color: var(--ink);
overflow-wrap: anywhere;
}
.getraenke-meldung[role="alert"],
.arbeitsplan-meldung {
border-width: 2px;
border-color: var(--ink);
}
.getraenke-meldung.ist-info { border-color: var(--line); border-width: 1px; }
.getraenke-meldung.ist-erfolg {
display: flex;
align-items: center;
gap: 8px;
padding: 0;
border: 0;
background: transparent;
font-family: var(--head);
font-size: var(--grad-text);
font-weight: var(--schnitt-titel);
line-height: var(--lh-body);
}
.getraenke-meldung p { margin: 0 0 10px; }
.getraenke-meldung p:last-child { margin-bottom: 0; }
.getraenke-bestaetigung { display: flex; align-items: flex-start; gap: 12px; }
.getraenke-bestaetigung input { flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px; accent-color: var(--getraenke-kontrast); }
.getraenke-hinweis { display: block; margin: 8px 0 0; color: var(--muted); font-size: var(--grad-klein); line-height: 1.6; }
/* Box-Einkauf und Umbuchen: gleiche Karte, gleiche Pillen, eigener Knopf. */
.getraenke-box .empty { padding: 0; margin: 0 0 var(--abstand); }
.getraenke-box .getraenke-ort-knopfe { margin-bottom: var(--abstand); }
.getraenke-box .primary { margin-top: 4px; }
@media (min-width: 992px) {
.getraenke-laeden { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--abstand); }
.getraenke-wo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.getraenke-mengenraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.getraenke-zaehlraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Enger Modus (grosse Schrift, schmal): Aufgaben zu zweit, Feld unter dem Namen. */
@media (max-width: 19.9375em) {
.getraenke-aktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.getraenke-summen { grid-template-columns: minmax(0, 1fr); }
.getraenke-ort-knopfe { grid-template-columns: minmax(0, 1fr); }
.getraenke-datum { flex-direction: column; align-items: stretch; gap: 6px; }
.getraenke-zaehlfeld { grid-template-columns: 40px minmax(0, 1fr); }
.getraenke-zaehlfeld input { grid-column: 1 / -1; }
.getraenke-zeitleiste li { grid-template-columns: 32px minmax(0, 1fr); }
.getraenke-zeitleiste time { grid-column: 1 / -1; padding: 0; }
}
/* ==========================================================================
Fleisch (nur Admin): Ladenwahl, dunkle Bestandskarte, Wochenbalken,
Monate mit Kosten und die Lieferscheine als Karten.
========================================================================== */
.fleisch-wahl { margin-bottom: var(--abstand); }
/* Bestand: je Laden ein Block auf der dunklen Karte. */
.fleisch-stand > h2 { margin-bottom: var(--abstand); }
.fleisch-stand-laeden { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--abstand) var(--abschnitt-abstand); }
.fleisch-stand-laden { min-width: 0; container-type: inline-size; }
.fleisch-stand h3 { margin: 0; font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-titel); color: var(--auf-dunkel); }
.fleisch-stand-zahl {
margin: 4px 0 0;
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-titel);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
color: var(--auf-dunkel);
}
.fleisch-stand-zahl strong { font-size: min(var(--grad-zahl), calc(100cqi / 6)); font-weight: var(--schnitt-stark); color: var(--gold); }
.fleisch-stand-leise { margin: 6px 0 0; font-size: var(--grad-klein); line-height: var(--lh-body); color: var(--auf-dunkel-leise); }
.fleisch-stand-fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 14px 0 0; }
.fleisch-stand-fakten dt { font-size: var(--grad-klein); color: var(--auf-dunkel-leise); }
.fleisch-stand-fakten dd {
margin: 2px 0 0;
font-family: var(--head);
font-size: var(--grad-beschreibung);
font-weight: var(--schnitt-titel);
color: var(--auf-dunkel);
overflow-wrap: anywhere;
}
/* Pro Woche: geliefert voll, verbraucht als Umriss - zwei Formen, keine
zweite Farbe. Die Breite ist der Anteil an der groessten Woche. */
.fleisch-legende { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; font-size: var(--grad-klein); color: var(--muted); }
.fleisch-legende span { display: inline-flex; align-items: center; gap: 6px; }
.fleisch-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 999px; }
.fleisch-wochen-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fleisch-wochen-liste > li {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
align-items: center;
gap: 12px;
padding: 6px 0;
border-bottom: 1px solid var(--line-card);
}
.fleisch-wochen-liste > li:last-child { border-bottom: 0; }
.fleisch-woche {
display: flex;
flex-direction: column;
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.fleisch-woche small { font-size: var(--grad-marke); font-weight: var(--schnitt-text); color: var(--muted); }
.fleisch-balken-paar { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fleisch-balken-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: 8px; }
.fleisch-balken { display: block; height: 10px; width: calc(var(--anteil, 0) * 100%); min-width: 2px; border-radius: 999px; box-sizing: border-box; }
.fleisch-balken.ist-null { visibility: hidden; }
.fleisch-balken.ist-geliefert,
.fleisch-punkt.ist-geliefert { background: var(--black); }
.fleisch-balken.ist-verbraucht,
.fleisch-punkt.ist-verbraucht { background: transparent; border: 2px solid var(--black); }
html.dark .fleisch-balken.ist-geliefert,
html.dark .fleisch-punkt.ist-geliefert { background: var(--auf-dunkel); }
html.dark .fleisch-balken.ist-verbraucht,
html.dark .fleisch-punkt.ist-verbraucht { border-color: var(--auf-dunkel); }
.fleisch-balken-wert {
font-size: var(--grad-klein);
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.fleisch-hinweis { margin: 10px 0 0; font-size: var(--grad-klein); line-height: var(--lh-body); color: var(--muted); }
.fleisch-hinweis-oben { margin: 0; padding: 0 var(--karte-innen) 8px; }
.fleisch-monate { padding-bottom: 8px; }
.fleisch-monat .zeile-titel { display: inline-flex; align-items: center; gap: 8px; }
/* Lieferscheine: der Laden als Streifen links, Neusiedl schwarz, Bruck gold. */
.fleisch-abschnitt {
display: flex;
align-items: center;
gap: 8px;
margin: var(--abschnitt-abstand) 4px 0;
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-titel);
}
.fleisch-abschnitt .mark { color: var(--muted); }
.liste.karten > .fleisch-lieferung { padding-left: 22px; overflow: hidden; }
.liste.karten > .fleisch-lieferung::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 8px;
background: var(--black);
}
.liste.karten > .fleisch-lieferung.ist-bruck::before { background: var(--gold); }
html.dark .liste.karten > .fleisch-lieferung.ist-neusiedl::before { background: var(--auf-dunkel); }
a.fleisch-lieferung { color: inherit; text-decoration: none; }
.fleisch-mehr { display: block; margin: var(--abstand) auto 0; }
/* Am Schreibtisch stehen Wochen und Monate nebeneinander. */
@media (min-width: 992px) {
.fleisch-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand); align-items: start; }
.fleisch-raster > .panel { margin-bottom: 0; }
}
/* Spieße eintragen: grosse Knoepfe fuer Anzahl und Groesse, dann ein Knopf. */
.fleisch-eintrag .panel-inner { display: grid; gap: 12px; }
.fleisch-hinweis-start { margin: 0; }
.fleisch-eintrag-wahl { margin: 0; }
.fleisch-eintrag-laden { margin: 0; font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-titel); }
.fleisch-schritt { margin: 0; padding: 0; border: 0; min-width: 0; }
.fleisch-schritt legend {
margin-bottom: 8px;
padding: 0;
font-family: var(--head);
font-size: var(--grad-beschreibung);
font-weight: var(--schnitt-titel);
}
.fleisch-knoepfe { display: grid; gap: 8px; }
.fleisch-knoepfe-anzahl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fleisch-knoepfe-groesse { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.chip.fleisch-knopf {
min-height: 56px;
padding: 8px;
border-radius: var(--radius-btn);
font-size: var(--grad-karte);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.fleisch-mehr-feld { display: grid; gap: 6px; margin-top: 10px; font-size: var(--grad-beschreibung); }
.fleisch-mehr-feld input { max-width: 120px; }
.fleisch-eintragen { width: 100%; min-height: 56px; }
.fleisch-eintrag-stand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.fleisch-eintrag-stand dt { font-size: var(--grad-klein); color: var(--muted); }
.fleisch-eintrag-stand dd { margin: 2px 0 0; font-family: var(--head); font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); overflow-wrap: anywhere; }
.fleisch-eintraege { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fleisch-eintraege li {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
padding: 8px 0;
border-bottom: 1px solid var(--line-card);
font-size: var(--grad-beschreibung);
}
.fleisch-eintraege li:last-child { border-bottom: 0; }
.fleisch-eintraege li.ist-zurueck { color: var(--muted); }
.fleisch-eintrag-zeit { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--muted); }
.fleisch-eintrag .compact-btn { justify-self: start; }
.fleisch-eintrag .fleisch-hinweis { margin: 0; }
/* Arbeitsplan (Bubby, 26.09.2026): oben die dunkle Karte von heute, eigene
Schicht und das Team beider Laeden, darunter der Monat. In der Zelle nur
die Tageszahl und, am eigenen Arbeitstag, BL oder ND. Die Zahl steht im
Abschnittsgrad und fett, das Kuerzel im kleinen Grad und fett, mit Luft
dazwischen, damit beides auf dem Gold lesbar bleibt. An einem Tag in
beiden Laeden stehen BL und ND untereinander, nicht als schmale Zeile.
Bruck ist volles Gold mit dunkler Schrift, Neusiedl dieselbe Goldfarbe
deutlich heller und gold umrandet. Heute traegt einen Ring und die Zahl
in einer Scheibe (Bubby, 12.10.2026). Am Telefon oeffnet ein Tipp ein
Blatt von unten, am Schreibtisch eine Karte daneben. */
.arbeitsplan-ich {
--fokus: var(--gold);
background: var(--black);
color: var(--auf-dunkel);
border-radius: var(--radius);
padding: var(--karte-innen);
margin-bottom: var(--abstand);
}
html.dark .arbeitsplan-ich { outline: none; }
html.dark.black .arbeitsplan-ich { background: var(--paper); }
.arbeitsplan-ich p { margin: 0; }
.arbeitsplan-ich-eyebrow { font-family: var(--head); font-size: var(--grad-klein); font-weight: var(--schnitt-titel); text-transform: uppercase; letter-spacing: .08em; color: var(--auf-dunkel-leise); }
.arbeitsplan-ich .arbeitsplan-ich-wann { margin-top: 6px; font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-titel); line-height: var(--lh-tight); color: var(--gold); }
.arbeitsplan-ich .arbeitsplan-ich-wo { margin-top: 6px; font-size: var(--grad-text); line-height: var(--lh-body); color: var(--auf-dunkel); }
.arbeitsplan-ich .arbeitsplan-team-titel {
margin-top: 18px;
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gold);
}
.arbeitsplan-ich .arbeitsplan-team-laden { margin-top: 14px; }
.arbeitsplan-ich .arbeitsplan-team-laden h3 {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin: 0;
font-family: var(--head);
font-size: var(--grad-text);
font-weight: var(--schnitt-titel);
line-height: var(--lh-tight);
color: var(--auf-dunkel);
}
.arbeitsplan-ich .arbeitsplan-team-zeit {
color: var(--gold);
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
line-height: var(--lh-tight);
white-space: nowrap;
}
.arbeitsplan-ich .arbeitsplan-team-laden ul { list-style: none; margin: 4px 0 0; padding: 0; }
.arbeitsplan-ich .arbeitsplan-team-laden li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
font-size: var(--grad-text);
line-height: var(--lh-body);
}
.arbeitsplan-ich .arbeitsplan-team-laden li:last-child { border-bottom: 0; padding-bottom: 0; }
.arbeitsplan-ich .arbeitsplan-team-bereich {
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
color: var(--auf-dunkel-leise);
}
.arbeitsplan-ich .arbeitsplan-team-name { text-align: right; }
/* Wer früher beginnt, hat unter dem Namen die eigene Zeit, leise. */
.arbeitsplan-ich .arbeitsplan-team-frueher {
display: block;
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
font-variant-numeric: tabular-nums;
color: var(--auf-dunkel-leise);
}
.arbeitsplan-ich .ist-ich { color: var(--gold); font-weight: var(--schnitt-titel); }
/* Auf Heute ist dieselbe Karte die Heldenkachel: volle Breite, Radius 26,
goldene Kante und der Schein oben rechts. Am Schreibtisch stehen die
beiden Läden nebeneinander. */
.arbeitsplan-ich.heute-team {
width: 100%;
margin: 0 0 14px;
border-radius: var(--radius-gross);
background-color: var(--black);
background-image: radial-gradient(100% 120% at 100% 0%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 60%);
box-shadow: var(--kante-gold);
}
html.dark .arbeitsplan-ich.heute-team {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), var(--kante-gold);
}
html.dark.black .arbeitsplan-ich.heute-team {
background-color: var(--paper);
background-image: radial-gradient(100% 120% at 100% 0%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 60%);
}
/* Die Karte blättert tageweise, auf Heute und im Arbeitsplan. Waagrecht
wischt der Finger, senkrecht scrollt die Seite. „Zurück zu heute“ steht
unter dem Datum, die Pfeile bleiben dabei an ihrem Platz. */
[data-heute-team-wisch] { touch-action: pan-y pinch-zoom; }
.heute-team-datum {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px;
align-items: center;
gap: var(--abstand-klein);
margin-top: var(--abstand-klein);
}
.arbeitsplan-ich .heute-team-datum time {
text-align: center;
font-size: var(--grad-karte);
font-weight: var(--schnitt-titel);
color: var(--gold);
}
.heute-team-pfeil {
min-height: 44px;
width: 44px;
color: var(--auf-dunkel);
border-color: var(--gold);
background: transparent;
}
.heute-team-pfeil.ist-zurueck .ico { transform: rotate(180deg); }
.arbeitsplan-ich .heute-team-heute {
grid-column: 2;
justify-self: center;
min-height: 44px;
padding: 0 12px;
font-family: var(--head);
font-size: var(--grad-klein);
color: var(--gold);
}
.arbeitsplan-ich .heute-team-pfeil:not(:disabled):hover {
background: var(--dark-row);
border-color: var(--gold);
}
@media (min-width: 992px) {
.heute-team .arbeitsplan-team {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 24px;
align-items: start;
}
.heute-team .arbeitsplan-team-titel { grid-column: 1 / -1; }
}
.arbeitsplan-person {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0 0 var(--abstand);
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
}
.arbeitsplan-person select {
text-transform: none;
letter-spacing: 0;
color: var(--feld-schrift);
font-size: var(--grad-text);
font-weight: var(--schnitt-text);
}
.arbeitsplan-monat-kopf {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 40px;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.arbeitsplan-kalender {
background: var(--card);
border: 0;
border-radius: var(--radius);
padding: var(--karte-innen);
margin-bottom: var(--abstand);
}
.arbeitsplan-monat { margin: 0; text-align: center; font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-titel); }
/* Nutzbare Monatspfeile bleiben auch auf dem Sandboden klar umrandet. */
.arbeitsplan-monat-pfeil:not(:disabled) { border-color: var(--input-line); }
.arbeitsplan-monat-pfeil.ist-zurueck .ico { transform: rotate(180deg); }
.arbeitsplan-wochekopf,
.arbeitsplan-gitter {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px;
}
.arbeitsplan-wochekopf { margin-bottom: 4px; }
.arbeitsplan-wochekopf span {
text-align: center;
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
color: var(--muted);
}
.arbeitsplan-gitter { touch-action: pan-y; }
.arbeitsplan-gitter.ist-weiter { animation: arbeitsplan-weiter 180ms ease; }
.arbeitsplan-gitter.ist-zurueck { animation: arbeitsplan-zurueck 180ms ease; }
@keyframes arbeitsplan-weiter { from { transform: translateX(24px); } to { transform: none; } }
@keyframes arbeitsplan-zurueck { from { transform: translateX(-24px); } to { transform: none; } }
.arbeitsplan-tag {
--fokus-abstand: 1px;
container-type: inline-size;
width: 100%;
min-height: 48px;
padding: 5px 2px 6px;
border: 0;
border-radius: var(--radius-tight);
background: var(--card);
color: var(--ink);
box-shadow: inset 0 0 0 1px var(--line);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
touch-action: pan-y;
}
.arbeitsplan-tag-zahl {
display: flex;
flex-direction: column;
align-items: center;
font-family: var(--head);
font-size: var(--grad-abschnitt);
/* Zwei fette Ziffern sind 1,4 em breit: so passt die Zahl auch bei grosser Schrift in ihr Feld. */
font-size: min(var(--grad-abschnitt), calc(100cqi / 1.45));
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.arbeitsplan-tag-ort {
max-width: 100%;
font-family: var(--head);
font-size: var(--grad-klein);
font-size: min(var(--grad-klein), calc(100cqi / 1.7));
font-weight: var(--schnitt-stark);
letter-spacing: .04em;
line-height: 1;
white-space: nowrap;
}
.arbeitsplan-tag.ist-beide .arbeitsplan-tag-ort {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
}
/* Nur eingeplante freie Tage tragen das Band, mit klarer Kante zum Sand.
Zu, ohne Einteilung und Nachbarmonate bleiben wie seit #47 abgeblendet. */
.arbeitsplan-tag.ist-frei {
background: var(--band);
color: var(--muted);
box-shadow: inset 0 0 0 1px var(--input-line);
}
/* Arbeitstag ohne Laden-Schicht (Bubby, 17.10.2026): Karte mit Feldrand,
statt BL oder ND die eigene Startzeit, schmal genug für 320 px. */
.arbeitsplan-tag.ist-eigen { box-shadow: inset 0 0 0 1px var(--input-line); }
.arbeitsplan-tag.ist-eigen .arbeitsplan-tag-ort {
font-size: min(var(--grad-klein), calc(100cqi / 3.1));
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
.arbeitsplan-tag.ist-rand,
.arbeitsplan-tag.ist-zu,
.arbeitsplan-tag.ist-ohne { color: var(--muted); opacity: .45; }
.arbeitsplan-tag.ist-bruck {
background: var(--gold);
color: var(--black);
box-shadow: none;
opacity: 1;
}
.arbeitsplan-tag.ist-neusiedl {
background: color-mix(in srgb, var(--gold) 38%, var(--auf-dunkel));
color: var(--black);
box-shadow: inset 0 0 0 1.5px var(--gold);
opacity: 1;
}
.arbeitsplan-tag.ist-bruck.ist-neusiedl { background: var(--gold); }
/* Heute liegt über den Laden-Farben: Füllung und Goldrand von BL und ND
bleiben sichtbar, nur Ring und Scheibe kommen dazu. Auf Kartengrund ist
beides Tinte (hell schwarz, in Dunkel und Schwarz beige), auf dem Gold
von BL und ND in jedem Modus schwarz. */
.arbeitsplan-tag.ist-heute:not(.ist-rand) {
--heute-tinte: var(--ink);
--heute-zahl: var(--card);
opacity: 1;
box-shadow: inset 0 0 0 2px var(--heute-tinte);
}
.arbeitsplan-tag.ist-heute.ist-bruck,
.arbeitsplan-tag.ist-heute.ist-neusiedl {
--heute-tinte: var(--black);
--heute-zahl: var(--auf-dunkel);
}
.arbeitsplan-tag.ist-heute.ist-neusiedl:not(.ist-rand):not(.ist-bruck) {
box-shadow: inset 0 0 0 2px var(--heute-tinte), inset 0 0 0 3.5px var(--gold);
}
.arbeitsplan-tag.ist-heute:not(.ist-rand) .arbeitsplan-tag-zahl {
justify-content: center;
width: min(1.6em, 100cqi);
height: 1.35em;
border-radius: 999px;
background: var(--heute-tinte);
color: var(--heute-zahl);
}
.arbeitsplan-legende,
.arbeitsplan-summe { margin: 12px 0 0; font-size: var(--grad-beschreibung); line-height: var(--lh-body); color: var(--ink); }
.arbeitsplan-summe { font-family: var(--head); font-weight: var(--schnitt-titel); }
.arbeitsplan-muster {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 4px;
border-radius: var(--radius-tight);
vertical-align: -1px;
}
.arbeitsplan-muster.ist-bruck { background: var(--gold); }
.arbeitsplan-muster.ist-eigen { background: var(--card); box-shadow: inset 0 0 0 1px var(--input-line); }
.arbeitsplan-muster.ist-neusiedl {
background: color-mix(in srgb, var(--gold) 38%, var(--auf-dunkel));
box-shadow: inset 0 0 0 1.5px var(--gold);
}
.arbeitsplan-detail-scrim {
position: fixed;
inset: 0;
z-index: 50;
background: rgba(29, 28, 28, 0.32);
}
.arbeitsplan-detail {
position: fixed;
z-index: 51;
left: var(--rand);
right: var(--rand);
bottom: calc(var(--rand) + env(safe-area-inset-bottom));
max-height: min(82vh, 680px);
overflow: auto;
background: var(--bar);
color: var(--ink);
border: 0;
border-radius: var(--radius);
padding: var(--karte-innen);
box-shadow: var(--kante);
animation: arbeitsplan-blatt 180ms ease;
}
@keyframes arbeitsplan-blatt { from { transform: translateY(16px); } to { transform: none; } }
.arbeitsplan-detail-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.arbeitsplan-detail-datum { margin: 0; font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-titel); }
.arbeitsplan-detail-schicht { margin: 8px 0 0; font-weight: var(--schnitt-titel); }
.arbeitsplan-detail-stand { margin: 12px 0 0; font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-titel); }
.arbeitsplan-detail-laden h3 { margin: 14px 0 0; font-family: var(--head); font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); }
.arbeitsplan-detail-laden ul { list-style: none; margin: 4px 0 0; padding: 0; }
.arbeitsplan-detail-laden li {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
border-bottom: 1px solid var(--line);
}
.arbeitsplan-detail-bereich { color: var(--muted); }
.arbeitsplan-detail-name { text-align: right; }
.arbeitsplan-detail-frueher { display: block; font-size: var(--grad-beschreibung); font-variant-numeric: tabular-nums; color: var(--muted); }
.arbeitsplan-detail-laden.ist-mein .arbeitsplan-detail-frueher { color: inherit; }
.arbeitsplan-detail .ist-ich { font-weight: var(--schnitt-titel); text-decoration: underline; text-underline-offset: 3px; }
/* Der eigene Laden trägt seine Farbe. Hell als Fläche mit dunkler Schrift,
dunkel als Schrift: Gold auf dem hellen Blatt wäre nicht lesbar. */
.arbeitsplan-detail-laden.ist-mein {
margin-top: 12px;
padding: 4px 10px 8px;
border-radius: var(--radius-tight);
color: var(--black);
}
.arbeitsplan-detail-laden.ist-mein.ist-bruck { background: var(--gold); }
.arbeitsplan-detail-laden.ist-mein.ist-neusiedl {
background: color-mix(in srgb, var(--gold) 38%, var(--auf-dunkel));
box-shadow: inset 0 0 0 1.5px var(--gold);
}
.arbeitsplan-detail-laden.ist-mein h3 { margin-top: 8px; }
.arbeitsplan-detail-laden.ist-mein .arbeitsplan-detail-schicht { margin-top: 8px; }
.arbeitsplan-detail-laden.ist-mein .arbeitsplan-detail-bereich { color: var(--black); }
.arbeitsplan-detail-laden.ist-mein li { border-bottom-color: color-mix(in srgb, var(--black) 16%, transparent); }
html.dark .arbeitsplan-detail-laden.ist-mein {
margin-top: 0;
padding: 0;
background: transparent;
box-shadow: none;
}
html.dark .arbeitsplan-detail-laden.ist-mein li { border-bottom-color: var(--line); }
html.dark .arbeitsplan-detail-laden.ist-mein.ist-bruck,
html.dark .arbeitsplan-detail-laden.ist-mein.ist-bruck .arbeitsplan-detail-bereich { color: var(--gold); }
html.dark .arbeitsplan-detail-laden.ist-mein.ist-neusiedl,
html.dark .arbeitsplan-detail-laden.ist-mein.ist-neusiedl .arbeitsplan-detail-bereich {
color: color-mix(in srgb, var(--gold) 70%, var(--auf-dunkel));
}
@media (prefers-reduced-motion: reduce) {
.arbeitsplan-gitter.ist-weiter,
.arbeitsplan-gitter.ist-zurueck,
.arbeitsplan-detail { animation: none; }
}
@media (min-width: 992px) {
.arbeitsplan-kalender:has(.arbeitsplan-detail) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
column-gap: var(--abstand-gross);
align-items: start;
}
.arbeitsplan-kalender:has(.arbeitsplan-detail) > :not(.arbeitsplan-detail):not(.arbeitsplan-detail-scrim) { grid-column: 1; }
.arbeitsplan-detail-scrim { display: none; }
.arbeitsplan-detail {
position: sticky;
top: 12px;
left: auto;
right: auto;
bottom: auto;
grid-column: 2;
grid-row: 1 / span 6;
max-height: none;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--card);
box-shadow: var(--kante);
animation: none;
}
}
/* „Meine Woche“ auf der Startseite (Bubby, 12.10.2026): eine helle Karte,
je Tag eine Zeile wie in einer Liste. Heute trägt dieselbe Sprache wie
der Kalender: Ring um das Datum, die Zahl in einer Scheibe. Der Laden hat
sein Kalendermuster. Am Schreibtisch stehen die sieben Tage nebeneinander. */
.meine-woche {
background: var(--card);
color: var(--ink);
border-radius: var(--radius);
padding: var(--karte-innen);
margin: 0 0 14px;
}
.meine-woche-kopf {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 4px 12px;
}
.meine-woche h2 {
margin: 0;
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-titel);
line-height: var(--lh-tight);
}
.meine-woche-bereich {
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
font-variant-numeric: tabular-nums;
color: var(--muted);
}
.meine-woche-tage { list-style: none; margin: 8px 0 0; padding: 0; }
.woche-tag {
--fokus-abstand: -2px;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 20px;
align-items: center;
gap: 12px;
width: 100%;
min-height: 52px;
padding: 6px 4px;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
background: transparent;
color: var(--ink);
font: inherit;
text-align: left;
}
.meine-woche-tage li:last-child .woche-tag { border-bottom: 0; }
@media (hover: hover) {
button.woche-tag:hover { background: var(--row-hover); }
}
.woche-datum {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 4px 0;
border-radius: var(--radius-tight);
}
.woche-kurztag {
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
line-height: 1;
color: var(--muted);
}
.woche-zahl {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.woche-tag.ist-heute .woche-datum { box-shadow: inset 0 0 0 2px var(--ink); }
.woche-tag.ist-heute .woche-kurztag { color: var(--ink); }
.woche-tag.ist-heute .woche-zahl {
width: 1.6em;
height: 1.35em;
border-radius: 999px;
background: var(--ink);
color: var(--card);
}
.woche-was { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.woche-schicht {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 2px 12px;
}
.woche-wo { font-weight: var(--schnitt-titel); line-height: var(--lh-tight); }
.woche-zeit {
font-size: var(--grad-beschreibung);
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--muted);
}
.woche-tag.ist-leise .woche-stand { font-size: var(--grad-beschreibung); color: var(--muted); }
.woche-tag.ist-leise .woche-zahl { color: var(--muted); }
.woche-tag.ist-heute.ist-leise .woche-zahl { color: var(--card); }
.woche-pfeil { display: inline-flex; color: var(--muted); }
.woche-pfeil .ico { width: 18px; height: 18px; }
.meine-woche-summe {
margin: 12px 0 0;
font-family: var(--head);
font-size: var(--grad-beschreibung);
font-weight: var(--schnitt-titel);
line-height: var(--lh-body);
}
/* „Wer hat frei“: eine leise Zeile wie die Glückwunsch-Karte, nur Namen. */
.wer-frei {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 14px;
padding: 11px 14px;
border-radius: var(--radius-btn);
background: var(--card);
box-shadow: var(--kante);
color: var(--ink);
font-size: var(--grad-beschreibung);
line-height: var(--lh-body);
}
.wer-frei-ico { display: inline-flex; padding-top: 1px; color: var(--muted); }
.wer-frei-ico .ico { width: 20px; height: 20px; }
@media (min-width: 992px) {
.meine-woche-tage {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
margin-top: 12px;
}
.woche-tag,
.meine-woche-tage li:last-child .woche-tag {
grid-template-columns: minmax(0, 1fr);
align-items: start;
align-content: start;
gap: 10px;
height: 100%;
min-height: 120px;
padding: 10px;
border: 0;
border-radius: var(--radius-tight);
box-shadow: inset 0 0 0 1px var(--line);
}
.woche-datum { align-items: flex-start; padding: 4px 6px; justify-self: start; }
.woche-schicht { flex-direction: column; align-items: flex-start; }
.woche-pfeil { display: none; }
}
.tax-bars {
display: flex;
align-items: flex-end;
gap: 4px;
height: 120px;
padding: 8px var(--karte-innen) 16px;
}
.tax-bar {
flex: 1;
min-width: 0;
min-height: 44px;
background: transparent;
border: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 4px;
color: var(--muted);
font-size: var(--grad-klein);
}
.tax-bar-fill {
width: 100%;
/* Die Hoehe ist der gemessene Monatswert, gereicht als Schalter. */
height: var(--hoehe, 0px);
min-height: 4px;
border-radius: var(--radius-tight) var(--radius-tight) 0 0;
background: var(--card);
}
/* Der gewaehlte Monat ist schwarz; Gold auf hellem Grund nur in der Unterzeile. */
.tax-bar.active .tax-bar-fill { background: var(--black); }
html.dark .tax-bar-fill { background: var(--square); }
html.dark .tax-bar.active .tax-bar-fill { background: var(--gold); }
.tax-bar.active { color: var(--black); font-weight: var(--schnitt-titel); }
html.dark .tax-bar.active { color: var(--auf-dunkel); }
/* Schicht tauschen (24.10.2026): unter den Läden im Tagesblatt. */
.arbeitsplan-abgeben { display: grid; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.arbeitsplan-abgeben-zeile { display: grid; gap: 8px; justify-items: start; }
.arbeitsplan-abgeben-zeile.ist-offen { justify-items: stretch; }
.arbeitsplan-abgeben-zeile p { margin: 0; }
.arbeitsplan-abgeben-satz { color: var(--muted); font-size: var(--grad-beschreibung); }
.arbeitsplan-abgeben-feld { display: grid; gap: 6px; font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); }
.arbeitsplan-abgeben-feld textarea { min-height: 72px; }
.arbeitsplan-abgeben-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.arbeitsplan-abgeben-meldung { font-weight: var(--schnitt-titel); }
.arbeitsplan-abgeben .pill { white-space: normal; line-height: var(--lh-tight); padding-block: 4px; }
@media (max-width: 19.9375em) {
.arbeitsplan-abgeben .compact-btn .ico { display: none; }
}
/* Urlaubskalender (Bubby, 13.10.2026). Karte, Monatskopf, Gitter und Tagesblatt
kommen vom Arbeitsplan; hier nur die Tage und was darunter steht. Gold heißt
„dein Urlaub“, gestrichelt „von dir beantragt“, Kräuter zart „Woche ohne
fremden Urlaub“ (in Ordnung), Schwarz „zu“. */
.urlaub-stand .panel-inner { display: grid; gap: 4px; }
.urlaub-stand-zeile {
margin: 0;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
font-family: var(--head);
font-size: var(--grad-karte);
font-weight: var(--schnitt-titel);
}
.urlaub-stand-zeile strong {
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.urlaub-leise { margin: 0; font-size: var(--grad-beschreibung); line-height: var(--lh-body); color: var(--muted); }
.urlaub-tag {
--fokus-abstand: 1px;
container-type: inline-size;
width: 100%;
min-height: 58px;
padding: 5px 2px 6px;
border: 0;
border-radius: var(--radius-tight);
background: var(--card);
color: var(--ink);
box-shadow: inset 0 0 0 1px var(--line);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 4px;
touch-action: pan-y;
}
.urlaub-tag-zahl {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--head);
font-size: var(--grad-karte);
font-size: min(var(--grad-karte), calc(100cqi / 1.6));
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.urlaub-tag-wer {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
max-width: 100%;
}
.urlaub-kurz {
display: inline-block;
min-width: 2.2em;
padding: 1px 3px;
border-radius: 999px;
background: var(--band);
color: var(--ink);
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
line-height: 1.25;
text-align: center;
white-space: nowrap;
}
.urlaub-tag .urlaub-kurz { font-size: min(var(--grad-marke), calc(100cqi / 2.6)); }
.urlaub-kurz.ist-mehr { background: transparent; box-shadow: inset 0 0 0 1px var(--input-line); }
.urlaub-kurz.ist-ich { background: var(--gold); color: var(--black); }
.urlaub-tag.ist-rand,
.urlaub-tag.ist-ohne { color: var(--muted); opacity: .45; }
.urlaub-tag.ist-sonntag { color: var(--muted); background: transparent; }
.urlaub-tag.ist-sonntag .urlaub-tag-zahl { font-weight: var(--schnitt-titel); }
.urlaub-tag.ist-frei-woche {
background: var(--kraeuter-zart);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kraeuter) 35%, transparent);
}
.urlaub-tag.ist-mein {
background: var(--gold);
color: var(--black);
box-shadow: none;
}
.urlaub-tag.ist-mein .urlaub-kurz { background: var(--card); color: var(--ink); }
.urlaub-tag.ist-beantragt {
border: 2px dashed var(--gold-schrift);
padding: 3px 0 4px;
}
.urlaub-tag.ist-feiertag {
background: var(--band);
color: var(--muted);
box-shadow: none;
}
.urlaub-feiertag { display: inline-flex; color: var(--gold-schrift); vertical-align: -3px; }
.urlaub-feiertag .ico { width: 16px; height: 16px; }
.urlaub-tag.ist-betrieb {
background: var(--black);
color: var(--auf-dunkel);
box-shadow: none;
}
.urlaub-zu {
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--gold);
}
html.dark .urlaub-tag.ist-betrieb { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }
/* Heute wie im Arbeitsplan: Ring und Zahl in einer Scheibe. */
.urlaub-tag.ist-heute:not(.ist-rand) {
--heute-tinte: var(--ink);
--heute-zahl: var(--card);
opacity: 1;
box-shadow: inset 0 0 0 2px var(--heute-tinte);
}
.urlaub-tag.ist-heute.ist-mein,
.urlaub-tag.ist-heute.ist-betrieb {
--heute-tinte: var(--black);
--heute-zahl: var(--auf-dunkel);
}
.urlaub-tag.ist-heute.ist-betrieb { --heute-tinte: var(--gold); --heute-zahl: var(--black); }
.urlaub-tag.ist-heute:not(.ist-rand) .urlaub-tag-zahl {
width: min(1.9em, 100cqi);
height: 1.45em;
border-radius: 999px;
background: var(--heute-tinte);
color: var(--heute-zahl);
}
.urlaub-unten { margin-top: 12px; display: grid; gap: 10px; }
.urlaub-legende {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
font-size: var(--grad-beschreibung);
}
.urlaub-legende li { display: inline-flex; align-items: center; gap: 6px; }
.urlaub-zeichen {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
font-size: var(--grad-beschreibung);
line-height: var(--lh-body);
}
.urlaub-trenner { color: var(--muted); }
.urlaub-muster {
display: inline-block;
width: 14px;
height: 14px;
border-radius: var(--radius-tight);
vertical-align: -2px;
}
.urlaub-muster.ist-mein { background: var(--gold); }
.urlaub-muster.ist-beantragt { border: 2px dashed var(--gold-schrift); }
.urlaub-muster.ist-frei-woche {
background: var(--kraeuter-zart);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kraeuter) 35%, transparent);
}
.urlaub-muster.ist-betrieb {
width: auto;
height: auto;
padding: 1px 4px;
background: var(--black);
color: var(--gold);
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
text-transform: uppercase;
line-height: 1.25;
}
.urlaub-frei { padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.urlaub-frei-titel {
margin: 0;
display: flex;
align-items: center;
gap: 8px;
font-family: var(--head);
font-size: var(--grad-beschreibung);
font-weight: var(--schnitt-titel);
}
.urlaub-wochen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.urlaub-woche-knopf { font-variant-numeric: tabular-nums; }
.urlaub-detail-titel { margin: 14px 0 0; font-family: var(--head); font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); }
.urlaub-namen { list-style: none; margin: 4px 0 0; padding: 0; }
.urlaub-namen li {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
border-bottom: 1px solid var(--line);
}
.urlaub-namen li.ist-ich { font-weight: var(--schnitt-titel); }
.urlaub-detail-satz { margin: 10px 0 0; font-size: var(--grad-beschreibung); line-height: var(--lh-body); }
.urlaub-detail-satz.ist-beantragt { font-weight: var(--schnitt-titel); }
.urlaub-detail-frei { margin-top: 12px; display: grid; gap: 10px; }
.urlaub-detail-frei .urlaub-detail-satz { margin: 0; }
/* ==========================================================================
Diagramme
========================================================================== */
/* Die Zeichenflaeche behaelt ihr Seitenverhaeltnis, damit die Achsenschrift
auf keiner Breite verzogen wird. */
.chart-wrap {
position: relative;
aspect-ratio: 64 / 28;
max-height: 280px;
margin: 16px var(--karte-innen);
}
.chart-panel h2 { padding: 18px var(--karte-innen) 0; margin: 0; }
/* Die Monatsbalken zeichnet die Seite selbst — kein fremder Baukasten, kein
fremder Server. Flaeche, Linie und Schrift kommen aus denselben Schaltern
wie der Rest der Ansicht. */
.chart-svg { display: block; width: 100%; height: 100%; }
.chart-gitter {
stroke: var(--line);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
/* Auf hellem Grund laufen die Balken schwarz: Gold traegt hier nichts.
Auf dunklem Grund tragen sie das Beige der Marke. */
.chart-balken { fill: var(--black); }
html.dark .chart-balken { fill: var(--auf-dunkel); }
.chart-achse {
fill: var(--muted);
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
}
.chart-achse-y { text-anchor: end; }
.chart-achse-x { text-anchor: middle; }
.chart-unavailable {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
margin: 0;
color: var(--muted);
font-size: var(--grad-beschreibung);
}
.birthday-panel { margin-bottom: 16px; }
.birthday-list { list-style: none; margin: 0; padding: 0 var(--karte-innen) 16px; }
.birthday-list li {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 0;
border-bottom: 1px solid var(--line-card);
}
.birthday-list li:last-child { border-bottom: 0; }
.birthday-today { background: var(--card); border-radius: var(--radius-btn); padding-left: 12px !important; margin-left: -12px; }
/* Lieferung reklamieren (Bubby, 21.10.2026): der Weg „Fehlt etwas?“ auf der
Getränke-Seite, das Formular im Blatt, die Karten für den Admin auf Heute
und auf der Seite „Reklamationen“. Nur vorhandene Bausteine: Panel, Felder,
Pillen, Knöpfe. Safran heißt offen, Kräuter erledigt, gemeldet bleibt ruhig. */
/* Getränke-Seite: kurzer Satz, ein Knopf. */
.reklamation-einstieg .panel-inner { display: grid; gap: 12px; }
.reklamation-einstieg h2 { padding: 0; font-size: var(--grad-abschnitt); }
.reklamation-einstieg-text p { margin: 4px 0 0; color: var(--muted); font-size: var(--grad-beschreibung); line-height: var(--lh-body); }
.reklamation-einstieg .ghost { width: 100%; }
.reklamation-einstieg .getraenke-meldung { margin: 0; }
.reklamation-einstieg .mark .ico,
.reklamation-form .primary .ico,
.reklamation-foto-knopf .ico,
.reklamation-karte :is(.primary, .ghost, .text-btn) .ico,
.reklamation-heute .compact-btn .ico { width: 20px; height: 20px; }
/* Formular im Blatt. */
.reklamation-form { display: grid; gap: 4px; }
.reklamation-form .field-label { margin-bottom: 12px; font-family: var(--head); font-weight: var(--schnitt-titel); }
.reklamation-form :is(input, select, textarea) { font-family: var(--sans); }
.reklamation-feld { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.reklamation-feld legend { margin: 0 0 8px; padding: 0; font-family: var(--head); font-size: var(--grad-text); font-weight: var(--schnitt-titel); }
.reklamation-frei { color: var(--muted); font-family: var(--sans); font-size: var(--grad-klein); font-weight: var(--schnitt-text); }
.reklamation-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.reklamation-menge { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.reklamation-menge input { margin-top: 0 !important; max-width: 9rem; font-variant-numeric: tabular-nums; }
.reklamation-einheit { color: var(--muted); font-family: var(--sans); font-weight: var(--schnitt-text); }
.reklamation-form textarea { min-height: 72px; }
.reklamation-foto { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.reklamation-foto-knopf { position: relative; width: 100%; cursor: pointer; }
.reklamation-foto-knopf:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.reklamation-foto-knopf.is-disabled { color: var(--disabled-ink); cursor: not-allowed; }
.reklamation-foto-bild { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-tight); border: 1px solid var(--line); }
.reklamation-form .getraenke-meldung { margin: 0 0 12px; }
.reklamation-form > .primary { margin-top: 4px; }
.reklamation-leise { margin: 4px 0 0; color: var(--muted); font-size: var(--grad-beschreibung); line-height: var(--lh-body); overflow-wrap: break-word; }
.reklamation-form > .reklamation-leise { text-align: center; }
/* Dank nach dem Senden. */
.reklamation-danke { display: grid; justify-items: center; gap: 6px; padding: 8px 0 4px; text-align: center; }
.reklamation-danke-haken { display: inline-flex; color: var(--kraeuter); }
.reklamation-danke-haken .ico { width: 48px; height: 48px; }
.reklamation-danke-titel { margin: 4px 0 0; font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-stark); }
.reklamation-danke-was { margin: 0; font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-titel); overflow-wrap: anywhere; }
.reklamation-danke .reklamation-knoepfe { width: 100%; margin-top: 12px; }
.reklamation-knoepfe { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px; }
.reklamation-danke .reklamation-knoepfe { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.reklamation-knoepfe > :is(.primary, .ghost) { width: 100%; }
.reklamation-frage { grid-column: 1 / -1; font-family: var(--head); font-weight: var(--schnitt-titel); }
/* Karten für den Admin. */
.reklamation-heute .panel-inner { display: grid; gap: 12px; }
.reklamation-heute h2 .pill { font-family: var(--sans); }
.reklamation-heute .compact-btn { justify-self: start; }
.reklamation-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.reklamation-heute .reklamation-karte { padding-top: 12px; border-top: 1px solid var(--line); }
.reklamation-heute .reklamation-karte:first-child { padding-top: 0; border-top: 0; }
.reklamation-karten .reklamation-karte {
padding: 14px 16px 16px;
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--kante);
}
.reklamation-karte { display: grid; gap: 4px; min-width: 0; }
.reklamation-karte p { margin: 0; }
.reklamation-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.reklamation-was {
min-width: 0;
font-family: var(--head);
font-size: var(--grad-karte);
font-weight: var(--schnitt-stark);
line-height: var(--lh-tight);
overflow-wrap: anywhere;
}
.reklamation-betrag { flex: none; font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reklamation-wo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-family: var(--head); font-weight: var(--schnitt-titel); }
.reklamation-karte .reklamation-leise { margin-top: 0; }
.reklamation-notiz { font-size: var(--grad-beschreibung); line-height: var(--lh-body); overflow-wrap: anywhere; }
.reklamation-foto-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px; }
.reklamation-hinweis {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 6px !important;
padding: 10px 12px;
border-radius: var(--radius-btn);
background: var(--band);
font-size: var(--grad-beschreibung);
line-height: var(--lh-body);
overflow-wrap: anywhere;
}
.reklamation-hinweis .mark { flex: none; display: inline-flex; margin-top: 1px; }
.reklamation-hinweis .ico { width: 20px; height: 20px; }
.reklamation-karte .reklamation-knoepfe,
.reklamation-karte .getraenke-meldung { margin: 8px 0 0; }
.reklamation-karte .error { margin: 4px 0 0; }
/* Seite „Reklamationen“. */
.reklamation-seite .filterkacheln { margin-bottom: var(--abstand); }
.reklamation-summe { margin: 0 4px 12px; color: var(--muted); font-size: var(--grad-beschreibung); }
.reklamation-summe b { color: var(--ink); font-family: var(--head); font-weight: var(--schnitt-stark); font-variant-numeric: tabular-nums; }
@media (min-width: 992px) {
.reklamation-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 359px) {
.reklamation-zwei { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
Zeilenaktionen, QR, Faelligkeit
========================================================================== */
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.row-actions .icon-btn { width: 36px; min-width: 36px; min-height: 36px; height: 36px; }
.row-actions .icon-btn .ico { width: 18px; height: 18px; }
/* Der Pfeil steht rechts, wenn die Zeile weiterfuehrt - auf jeder Breite
gleich, weil die Liste auf jeder Breite dieselbe ist. Karten (Belege,
Zahlungen) oeffnen als Ganzes und zeigen ihn nicht. */
.row-chev {
display: inline-flex;
align-items: center;
color: var(--muted);
}
.row-chev .ico { width: 20px; height: 20px; }
tr.row-open { cursor: pointer; }
.qr-box { margin-top: 8px; text-align: center; }
/* Der QR-Code bleibt weiss, damit ihn jede Banking-App liest. */
.qr-box img {
display: block;
margin: 0 auto 6px;
background: #fff;
border-radius: var(--radius-tight);
padding: 6px;
}
.qr-box p { margin: 0 0 4px; }
.qr-box-lg { margin-top: 16px; }
.qr-note { margin: 10px 0 0; color: var(--muted); font-size: var(--grad-beschreibung); }
.due-hint { font-size: var(--grad-beschreibung); color: var(--safran); margin-left: 6px; }
.due-hint.ist-ueberfaellig { color: var(--paprika); }
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: var(--row-hover); }
/* D-030: Alterszeichen — nur wenn Zahlen veraltet sind oder das Laden fehlschlug.
Klein neben der Ueberschrift, keine eigene Karte. */
.freshbar {
display: inline-flex;
align-items: center;
gap: 4px;
margin: 0 0 2px;
padding: 0;
background: none;
color: var(--muted);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
white-space: nowrap;
flex: 0 0 auto;
}
.freshbar .mark { line-height: 1; }
.freshbar .mark .ico { width: 14px; height: 14px; }
.freshbar.is-warn { color: var(--black); outline: none; }
html.dark .freshbar.is-warn { color: var(--auf-dunkel); outline: none; }
.boot-card {
background: var(--card);
border: 0;
border-radius: var(--radius);
padding: 2rem 2.25rem;
display: grid;
place-items: center;
gap: 16px;
}
.boot-spin {
width: 3.5rem;
height: 3.5rem;
border: 4px solid var(--ink);
border-top-color: transparent;
border-radius: 999px;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pill-line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* Team-Chat (Bubby, 24.10.2026). Liste wie die übrigen Listen in einer Karte,
Gruppen mit Laden-Farbe (Neusiedl schwarz, Bruck gold). Im offenen Chat
die eigenen Nachrichten rechts als schwarze Fläche, die der anderen links
auf der Karte; das Eingabefeld sitzt immer ganz unten. Ungelesen ist eine
goldene Kapsel mit schwarzer Zahl. Breite höchstens --lesebreite. */
.chat-liste,
.chat-push,
.chat-push-an,
.chat-waehlen,
.chat-offen { max-width: var(--lesebreite); }
.chat-liste { padding-bottom: 8px; }
.panel .chat-abschnitt { display: block; margin: 0; padding: var(--karte-innen) var(--karte-innen) 4px; font-size: var(--grad-marke); font-weight: var(--schnitt-stark); }
.chat-zeile { min-height: 68px; gap: 12px; }
.chat-zeile .zeile-oben,
.chat-zeile .zeile-unten { flex-wrap: nowrap; }
.chat-zeile .zeile-titel { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-zeile .zeile-unter { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Auswahl: wer noch keinen PIN hat, liest die Nachricht nach der ersten Anmeldung. */
.chat-zeile .chat-ohne-zugang { flex: none; white-space: normal; }
.chat-wann {
flex: none;
margin-left: auto;
font-size: var(--grad-klein);
color: var(--muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.chat-zeile.ist-neu .zeile-titel { font-weight: var(--schnitt-stark); }
.chat-zeile.ist-neu .chat-vorschau { color: var(--ink); }
.chat-zahl {
flex: none;
min-width: 24px;
height: 24px;
padding: 0 7px;
border-radius: 999px;
background: var(--gold);
color: var(--black);
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-stark);
line-height: 24px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.chat-gruppe.ist-neusiedl { border-color: transparent; background: var(--black); color: var(--auf-dunkel); }
.chat-gruppe.ist-bruck { border-color: transparent; background: var(--gold); color: var(--black); }
html.dark .chat-gruppe.ist-neusiedl { box-shadow: inset 0 0 0 1px var(--line); }
html.dark .chat-gruppe.ist-bruck { color: var(--black); }
.chat-leise { margin: 0; color: var(--muted); font-size: var(--grad-beschreibung); line-height: var(--lh-body); }
.chat-liste .chat-leer { padding: 4px var(--karte-innen) 8px; }
.chat-liste .panel-inner:empty { display: none; }
.chat-liste .panel-inner { padding-top: 8px; }
.chat-neu-knopf .ico,
.chat-push .primary .ico { width: 18px; height: 18px; }
.chat-privat-satz { padding: 0 var(--karte-innen) 8px; }
.chat-waehlen .panel-inner { padding-top: 8px; }
/* Benachrichtigungen: eine helle Karte mit einem Knopf, oder still eine Zeile. */
.chat-push .panel-inner { display: grid; gap: 10px; }
.chat-push-kopf { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--head); font-size: var(--grad-karte); }
.chat-push .primary { justify-self: start; }
.chat-push-an {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 8px;
margin: 0 4px 16px;
color: var(--muted);
font-size: var(--grad-beschreibung);
}
.chat-push-an .ico { width: 18px; height: 18px; }
.chat-push-an .text-btn { min-height: 44px; padding: 0 4px; font-size: var(--grad-beschreibung); }
/* Ein offener Chat. */
.chat-kopf { display: flex; align-items: center; gap: 12px; margin: -4px 0 12px; }
.chat-zurueck,
.chat-foto-knopf,
.chat-foto-weg {
flex: none;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--card);
color: var(--ink);
}
.chat-zurueck .ico,
.chat-foto-knopf .ico,
.chat-foto-weg .ico { width: 22px; height: 22px; }
.chat-kopf-titel { min-width: 0; }
.chat-kopf-titel h2 {
margin: 0;
font-family: var(--head);
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-stark);
line-height: var(--lh-tight);
overflow-wrap: anywhere;
}
.chat-kopf-titel p { margin: 2px 0 0; font-size: var(--grad-klein); color: var(--muted); }
.chat-verlauf { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.chat-verlauf > .chat-leer { padding: 24px 4px; text-align: center; }
.chat-verlauf > :first-child { margin-top: auto; }
.chat-verlauf > .chat-leer:last-child { margin-block: auto; }
.chat-aelter { align-self: center; margin: 0 0 8px; }
.chat-tag { align-self: center; margin: 10px 0 4px; }
.chat-tag span {
display: inline-block;
padding: 3px 12px;
border-radius: 999px;
background: var(--card);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--muted);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
}
.chat-blase {
max-width: min(85%, 34rem);
padding: 8px 12px 6px;
border-radius: var(--radius-btn);
overflow-wrap: anywhere;
}
.chat-blase p { margin: 0; }
.chat-blase.ist-fremd { align-self: flex-start; background: var(--card); color: var(--ink); box-shadow: var(--kante); }
.chat-blase.ist-eigen { align-self: flex-end; background: var(--black); color: var(--auf-dunkel); }
html.dark .chat-blase.ist-eigen { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }
html.dark.black .chat-blase.ist-fremd { box-shadow: inset 0 0 0 1px var(--line), var(--kante); }
.chat-wer { margin-bottom: 2px !important; font-family: var(--head); font-size: var(--grad-klein); font-weight: var(--schnitt-stark); }
.chat-text { font-size: var(--grad-text); line-height: var(--lh-body); white-space: pre-wrap; }
.chat-meta {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 4px;
margin-top: 2px !important;
font-size: var(--grad-klein);
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.chat-blase.ist-eigen .chat-meta { color: var(--auf-dunkel-leise); }
.chat-haken { display: inline-flex; }
.chat-haken .ico { width: 18px; height: 18px; }
.chat-haken.ist-gelesen { color: var(--gold); }
.chat-gelesen { align-self: flex-end; max-width: min(85%, 34rem); margin: -6px 2px 2px; font-size: var(--grad-klein); color: var(--muted); text-align: right; }
.chat-gelesen summary { display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; cursor: pointer; list-style: none; }
.chat-gelesen summary::-webkit-details-marker { display: none; }
.chat-gelesen p { display: grid; gap: 2px; margin: 0 0 4px; }
/* Ein offener Chat füllt wie bei WhatsApp genau den sichtbaren Bildschirm
(Bubby, 24.10.2026): oben Titel und Kopf, dazwischen die Nachrichten mit
eigenem Bildlauf (neueste unten, leerer Chat: Hinweis in der Mitte), unten
das Eingabefeld direkt über der Leiste. Tippt man, weicht die Leiste, und
das Feld steht direkt über der Tastatur. --sicht-hoehe und --sicht-oben
misst 81_Team_Chat.js am sichtbaren Ausschnitt (iPhone mit Tastatur). */
html:has(.chat-offen),
html:has(.chat-offen) body { overflow: hidden; overscroll-behavior: none; }
.main:has(.chat-offen) {
position: fixed;
inset: var(--sicht-oben, 0px) 0 auto;
height: var(--sicht-hoehe, 100dvh);
display: flex;
flex-direction: column;
padding-bottom: 0;
}
.main:has(.chat-offen) > * { flex: none; }
.main > .chat-offen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
.chat-offen .chat-kopf { flex: none; }
.chat-offen .chat-verlauf { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* Unten Platz für Leiste und Plus: das Plus ragt samt Ring 15 px über die
Leiste (60 hoch, -30 oben, 6 Ring), dazu 9 px Luft. */
.chat-eingabe {
flex: none;
container: chat-eingabe / inline-size;
padding: 8px 0 calc(max(var(--dock-luft), env(safe-area-inset-bottom)) + var(--dock-hoehe) + 24px);
}
html.kb-open .chat-eingabe { padding-bottom: 8px; }
.chat-eingabe .error { margin: 0 0 6px; }
.chat-eingabe-zeile { display: flex; align-items: flex-end; gap: 8px; }
.chat-eingabe textarea {
flex: 1 1 auto;
min-width: 0;
min-height: var(--feld-hoehe);
height: var(--hoehe, var(--feld-hoehe));
max-height: 160px;
padding: 11px 14px;
line-height: var(--lh-body);
resize: none;
}
.chat-senden {
flex: none;
width: var(--feld-hoehe);
height: var(--feld-hoehe);
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
background: var(--gold);
color: var(--black);
}
/* Fotos (24.10.2026): der Knopf neben dem Feld (Kamera oder Galerie), das
gewählte Foto klein über dem Feld, im Verlauf das Vorschaubild in der
Blase und ein Tipp darauf groß über allem. */
.chat-foto-knopf { width: var(--feld-hoehe); height: var(--feld-hoehe); cursor: pointer; }
.chat-foto-knopf:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.chat-foto-knopf.is-disabled { color: var(--disabled-ink); cursor: wait; }
.chat-foto-entwurf { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.chat-foto-entwurf img,
.chat-foto-laedt {
flex: none;
width: 64px;
height: 64px;
object-fit: cover;
border-radius: var(--radius-tight);
border: 1px solid var(--line);
}
.chat-foto-laedt { display: inline-flex; align-items: center; justify-content: center; background: var(--field); color: var(--muted); }
.chat-foto-laedt .ico { width: 24px; height: 24px; }
.chat-foto-entwurf .chat-leise { flex: 1 1 auto; min-width: 0; }
.chat-foto-weg:disabled { color: var(--disabled-ink); cursor: wait; }
.chat-blase.hat-foto { width: min(17rem, 85%); padding-top: 6px; padding-inline: 6px; }
.chat-blase.hat-foto > :not(.chat-foto, .chat-zitat, .chat-antworten, .chat-wisch) { padding-inline: 6px; }
.chat-blase.ist-eigen { --fokus: var(--gold); }
.chat-foto {
display: block;
width: 100%;
min-height: 0;
padding: 0;
border: 0;
border-radius: var(--radius-tight);
background: none;
overflow: hidden;
--fokus-abstand: 2px;
}
.chat-foto img { display: block; width: 100%; height: auto; max-height: 20rem; object-fit: cover; background: var(--field); }
.chat-blase.hat-foto .chat-text { margin-top: 6px; }
.chat-vollbild {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
place-items: center;
padding: calc(env(safe-area-inset-top) + 64px) 8px calc(env(safe-area-inset-bottom) + 16px);
background: var(--black);
--fokus: var(--gold);
}
.chat-vollbild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.chat-vollbild-zu {
position: absolute;
top: calc(env(safe-area-inset-top) + 12px);
right: 12px;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--auf-dunkel-leise);
border-radius: 999px;
background: var(--black);
color: var(--auf-dunkel);
}
.chat-vollbild-zu .ico { width: 22px; height: 22px; }
.chat-senden:disabled { background: var(--disabled-face); color: var(--disabled-ink); cursor: wait; }
.chat-senden .ico { width: 22px; height: 22px; }
@media (hover: hover) {
.chat-zurueck:hover,
.chat-foto-knopf:hover,
.chat-foto-weg:hover:not(:disabled) { border-color: var(--ink); }
}
/* Auf Heute: die neueste ungelesene Nachricht (schwarze Karte wie früher die Nachricht vom Chef). */
.chat-heute .nachricht-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
.chat-heute .nachricht-text b { color: var(--gold); font-weight: var(--schnitt-stark); }
.chat-heute .nachricht-fuss { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.chat-heute-zahl { color: var(--auf-dunkel-leise); font-size: var(--grad-beschreibung); }
/* Lohnzettel (24.10.2026): ein Knopf in der Blase, wie der Hauptknopf; auf der
schwarzen eigenen Blase und im Dunkeln in Beige. Er öffnet die PDF im Browser. */
.chat-lohnzettel {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 48px;
margin-top: 8px;
padding: 10px 16px;
border: 0;
border-radius: var(--radius-btn);
background: var(--black);
color: var(--auf-dunkel);
font-family: var(--head);
font-size: var(--grad-text);
font-weight: var(--schnitt-titel);
}
.chat-lohnzettel .ico { width: 20px; height: 20px; flex: none; }
.chat-blase.ist-eigen .chat-lohnzettel,
html.dark .chat-lohnzettel { background: var(--auf-dunkel); color: var(--black); }
.chat-lohnzettel:disabled { background: var(--disabled-face); color: var(--disabled-ink); cursor: wait; }
/* PDFs (24.10.2026): eine Karte mit Sinnbild, Name (höchstens zwei Zeilen) und
Größe; in der Blase öffnet ein Tipp die PDF, über dem Feld steht sie zum
Senden bereit (mit Entfernen). Auf der eigenen schwarzen Blase die Zeile auf
Schwarz, sonst das Band. */
.chat-blase.hat-pdf { width: min(18rem, 85%); padding-top: 6px; padding-inline: 6px; }
.chat-blase.hat-pdf > :not(.chat-pdf, .chat-zitat, .chat-antworten, .chat-wisch) { padding-inline: 6px; }
.chat-blase.hat-pdf .chat-text { margin-top: 6px; }
.chat-pdf,
.chat-pdf-entwurf {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-width: 0;
padding: 8px;
border-radius: var(--radius-tight);
background: var(--band);
color: var(--ink);
text-align: left;
}
.chat-pdf { min-height: 64px; border: 1px solid var(--line); --fokus-abstand: 2px; }
.chat-blase.ist-eigen .chat-pdf { border-color: transparent; background: var(--dark-row); color: var(--auf-dunkel); }
.chat-pdf-entwurf { margin: 0 0 8px; padding-right: 4px; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--card); }
.chat-pdf-ico {
flex: none;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
width: 44px;
height: 48px;
border-radius: var(--radius-tight);
background: var(--square);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink);
}
.chat-pdf-ico .ico { width: 22px; height: 22px; }
.chat-pdf-ico b { font-family: var(--head); font-size: var(--grad-marke); font-weight: var(--schnitt-stark); line-height: 1; }
.chat-blase.ist-eigen .chat-pdf-ico { background: var(--black); box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
.chat-pdf-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.chat-pdf-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
font-family: var(--head);
font-size: var(--grad-beschreibung);
font-weight: var(--schnitt-titel);
line-height: var(--lh-tight);
}
.chat-pdf-groesse { font-size: var(--grad-klein); color: var(--muted); font-variant-numeric: tabular-nums; }
.chat-blase.ist-eigen .chat-pdf-groesse { color: var(--auf-dunkel-leise); }
.chat-pdf-entwurf .chat-foto-weg { align-self: center; }
@media (hover: hover) {
.chat-blase.ist-fremd .chat-pdf:hover { border-color: var(--ink); }
.chat-blase.ist-eigen .chat-pdf:hover { box-shadow: inset 0 0 0 1px var(--auf-dunkel-leise); }
}
/* Antworten (24.10.2026): das Zitat oben in der Blase mit einem Strich links
(auf der Karte Tinte, auf der eigenen schwarzen Blase Gold), ein Tipp darauf
springt zum Original und hebt es kurz mit einem Ring hervor. Am Handy folgt
die Blase beim Wischen nach rechts dem Finger, links erscheint das Zeichen
„antworten“; mit Maus oder Tabulatortaste steht der Knopf neben der Blase. */
.chat-blase { position: relative; touch-action: pan-y; transition: transform 160ms ease-out; }
.chat-blase.wischt { transform: translateX(var(--wisch, 0px)); transition: none; }
/* Waagrecht nichts rollen (Wischen); der Rand lässt dem Ring Platz. */
.chat-offen .chat-verlauf { overflow-x: hidden; margin-inline: -8px; padding-inline: 8px; }
/* Ring außen auf dem Sand: immer Tinte, nie Gold (auch an der eigenen Blase). */
.chat-blase.ist-ziel { outline: 3px solid var(--ink); outline-offset: 3px; }
.chat-blase[tabindex] { --fokus: var(--ink); }
.chat-blase:focus:not(:focus-visible, .ist-ziel) { outline: none; }
.chat-zitat {
display: grid;
gap: 1px;
width: 100%;
min-width: 0;
min-height: 0;
margin: 2px 0 6px;
padding: 5px 10px 6px;
border: 0;
border-left: 3px solid var(--ink);
border-radius: var(--radius-tight);
background: var(--band);
color: var(--ink);
font: inherit;
text-align: left;
}
.chat-blase.ist-eigen .chat-zitat { border-left-color: var(--gold); background: var(--dark-row); color: var(--auf-dunkel); }
button.chat-zitat { cursor: pointer; --fokus-abstand: 2px; }
.chat-zitat-wer { font-family: var(--head); font-size: var(--grad-klein); font-weight: var(--schnitt-stark); line-height: var(--lh-tight); }
.chat-zitat-text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--grad-beschreibung);
line-height: var(--lh-tight);
color: var(--muted);
}
.chat-blase.ist-eigen .chat-zitat-text { color: var(--auf-dunkel-leise); }
.chat-zitat-art .ico { display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.chat-zitat.ist-weg { color: var(--muted); font-size: var(--grad-beschreibung); }
.chat-blase.ist-eigen .chat-zitat.ist-weg { color: var(--auf-dunkel-leise); }
.chat-antworten {
position: absolute;
top: 50%;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--card);
color: var(--ink);
translate: 0 -50%;
opacity: 0;
--fokus: var(--ink);
}
.chat-antworten .ico,
.chat-wisch .ico { width: 20px; height: 20px; }
.chat-blase.ist-fremd .chat-antworten { left: calc(100% + 6px); }
.chat-blase.ist-eigen .chat-antworten { right: calc(100% + 6px); }
.chat-antworten:focus-visible { opacity: 1; }
@media (hover: hover) {
.chat-blase:hover .chat-antworten { opacity: 1; }
.chat-antworten:hover { border-color: var(--ink); }
}
/* Am Handy ohne Maus: der Knopf nur für Vorleseprogramme und die Tastatur. */
@media (hover: none) {
.chat-antworten:not(:focus-visible) { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.chat-wisch {
position: absolute;
top: 50%;
right: calc(100% + 10px);
width: 36px;
height: 36px;
display: none;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--card);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--muted);
translate: 0 -50%;
}
.chat-blase.wischt .chat-wisch { display: inline-flex; }
.chat-blase.wisch-genug .chat-wisch { background: var(--black); box-shadow: none; color: var(--gold); }
/* Über dem Feld: worauf man antwortet, mit X zum Abbrechen. */
.chat-antwort-entwurf {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
padding: 6px 4px 6px 6px;
border: 1px solid var(--line);
border-radius: var(--radius-btn);
background: var(--card);
}
.chat-antwort-entwurf .chat-zitat { flex: 1 1 auto; margin: 0; }
.chat-antwort-entwurf .chat-zitat-text { -webkit-line-clamp: 1; }
/* Erwähnen (24.10.2026): „@Name“ im Text kräftig, auf der eigenen schwarzen
Blase in Gold; wer selbst gemeint ist, sieht seinen Namen als goldene
Kapsel mit schwarzer Schrift (wie „neu“: für dich). Die Auswahl beim Tippen
von „@“ steht als Karte über dem Feld. */
.chat-erwaehnt { font-weight: var(--schnitt-stark); }
.chat-blase.ist-eigen .chat-erwaehnt { color: var(--gold); }
.chat-erwaehnt.ist-ich {
padding: 1px 6px;
border-radius: 999px;
background: var(--gold);
color: var(--black);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.chat-erwaehnen {
max-height: min(15rem, 40dvh);
margin: 0 0 8px;
padding: 4px 0;
overflow-y: auto;
overscroll-behavior: contain;
list-style: none;
border: 1px solid var(--line);
border-radius: var(--radius-btn);
background: var(--card);
box-shadow: var(--kante);
}
.chat-erwaehnen-wahl {
display: flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 4px 12px;
cursor: pointer;
font-family: var(--head);
font-size: var(--grad-text);
font-weight: var(--schnitt-titel);
overflow-wrap: anywhere;
}
.chat-erwaehnen-wahl .list-lead { flex: none; width: 32px; height: 32px; font-size: var(--grad-klein); }
.chat-erwaehnen-wahl[aria-selected="true"] { background: var(--row-hover); }
@media (hover: hover) {
.chat-erwaehnen-wahl:hover { background: var(--row-hover); }
}
/* Wichtig mit Bestätigung (24.10.2026). Safran heißt hier „wartet auf dich“
wie eine offene Frei-Anfrage: die Kapsel „Wichtig“ als Safran-Fläche mit
schwarzer Schrift (hell wie auf Schwarz lesbar), die Blase mit Safran-Rand,
solange man noch bestätigen soll. Bestätigt heißt Kräuter. Der Knopf
„Gelesen“ ist der Hauptknopf wie „Lohnzettel öffnen“. Admins schalten
„wichtig“ mit dem runden Knopf neben der Büroklammer ein (eingeschaltet in
Safran), darüber steht dann, was es heißt, mit X. */
.chat-wichtig-marke {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 9px 2px 5px;
border-radius: 999px;
background: var(--safran-flaeche);
color: var(--auf-safran);
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .06em;
line-height: 1.4;
text-transform: uppercase;
white-space: nowrap;
}
.chat-wichtig-marke .ico { width: 16px; height: 16px; flex: none; }
.chat-wichtig-kopf { margin-bottom: 4px !important; }
.chat-blase.ist-wichtig { padding-top: 8px; }
.chat-blase.ist-wichtig.ist-fremd.wartet { box-shadow: inset 0 0 0 2px var(--safran), var(--kante); }
.chat-blase.ist-wichtig.ist-eigen { box-shadow: inset 0 0 0 2px var(--safran-flaeche); }
.chat-blase.hat-foto.ist-wichtig > .chat-wichtig-kopf,
.chat-blase.hat-pdf.ist-wichtig > .chat-wichtig-kopf { padding-inline: 6px; }
.chat-wichtig-ok {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 48px;
margin-top: 8px;
padding: 10px 16px;
border: 0;
border-radius: var(--radius-btn);
background: var(--black);
color: var(--auf-dunkel);
font-family: var(--head);
font-size: var(--grad-text);
font-weight: var(--schnitt-stark);
}
.chat-wichtig-ok .ico { width: 20px; height: 20px; flex: none; }
html.dark .chat-wichtig-ok { background: var(--auf-dunkel); color: var(--black); }
.chat-wichtig-ok:disabled { background: var(--disabled-face); color: var(--disabled-ink); cursor: wait; }
.chat-blase .error { margin-top: 6px; }
.chat-wichtig-am {
display: flex;
align-items: center;
gap: 4px;
margin-top: 6px !important;
color: var(--kraeuter);
font-size: var(--grad-klein);
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
}
.chat-wichtig-am .ico { width: 18px; height: 18px; flex: none; }
/* Unter der Nachricht für Absender und Admins: „5 von 12 bestätigt“, ein Tipp zeigt die Liste. */
.chat-wichtig-stand { max-width: min(85%, 34rem); margin: -2px 2px 4px; font-size: var(--grad-klein); color: var(--muted); }
.chat-wichtig-stand.ist-eigen { align-self: flex-end; text-align: right; }
.chat-wichtig-stand.ist-fremd { align-self: flex-start; }
.chat-wichtig-stand summary {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 44px;
margin-block: -6px;
cursor: pointer;
list-style: none;
font-weight: var(--schnitt-stark);
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.chat-wichtig-stand summary::-webkit-details-marker { display: none; }
.chat-wichtig-stand summary .ico { width: 18px; height: 18px; flex: none; }
.chat-wichtig-stand summary .ico:last-child { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .15s ease; }
.chat-wichtig-stand[open] summary .ico:last-child { transform: rotate(-90deg); }
.chat-wichtig-stand.ist-fertig summary { color: var(--kraeuter); }
.chat-wichtig-liste {
display: grid;
gap: 6px;
margin-top: 6px;
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--radius-btn);
background: var(--card);
color: var(--ink);
font-size: var(--grad-beschreibung);
text-align: left;
}
.chat-wichtig-liste .alle-klein { margin: 4px 0 0; }
.chat-wichtig-liste ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.chat-wichtig-liste li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; overflow-wrap: anywhere; }
.chat-wichtig-liste time { color: var(--muted); font-variant-numeric: tabular-nums; }
.chat-wichtig-erinnern { display: grid; gap: 6px; justify-items: start; margin-top: 6px; }
.chat-wichtig-erinnern .ico { width: 18px; height: 18px; }
/* Oben im Chat angeheftet, bis man bestätigt: ein Tipp springt zur Nachricht. */
.chat-angeheftet {
flex: none;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 48px;
margin: 0 0 8px;
padding: 8px 10px 8px 12px;
border: 0;
border-radius: var(--radius-btn);
background: var(--safran-zart);
box-shadow: inset 0 0 0 1px var(--safran);
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
}
.chat-angeheftet-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--grad-beschreibung); }
.chat-angeheftet-mehr { flex: none; font-size: var(--grad-klein); font-weight: var(--schnitt-stark); font-variant-numeric: tabular-nums; }
.chat-angeheftet > .ico { width: 18px; height: 18px; flex: none; }
/* Beim Schreiben (nur Admins in Gruppen). */
.chat-wichtig-knopf {
flex: none;
width: 44px;
height: var(--feld-hoehe);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--card);
color: var(--ink);
}
.chat-wichtig-knopf .ico { width: 22px; height: 22px; }
.chat-wichtig-knopf[aria-pressed="true"] { border-color: transparent; background: var(--safran-flaeche); color: var(--auf-safran); }
.chat-wichtig-knopf:disabled { color: var(--disabled-ink); cursor: wait; }
@media (hover: hover) {
.chat-wichtig-knopf:hover:not(:disabled) { border-color: var(--ink); }
.chat-angeheftet:hover { box-shadow: inset 0 0 0 2px var(--safran); }
}
.chat-wichtig-entwurf {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
padding: 6px 4px 6px 10px;
border: 1px solid var(--line);
border-radius: var(--radius-btn);
background: var(--card);
}
.chat-wichtig-entwurf .chat-leise { flex: 1 1 auto; min-width: 0; font-size: var(--grad-klein); }
/* Mit dem Wichtig-Knopf (nur Admins): bliebe dem Feld neben Büroklammer,
Wichtig und Senden (164 px) weniger als 180 px, steht es über den Knöpfen.
Bei großer Schrift ebenso über den engen Modus (99_Handy.css). */
@container chat-eingabe (max-width: 344px) {
.chat-eingabe-zeile:has(.chat-wichtig-knopf) { flex-wrap: wrap; }
.chat-eingabe-zeile:has(.chat-wichtig-knopf) textarea { order: -1; flex-basis: 100%; }
.chat-eingabe-zeile:has(.chat-wichtig-knopf) .chat-senden { margin-left: auto; }
}
/* Auf Heute: bis bestätigt ganz oben, ganz ausgeschrieben. */
.chat-heute-wichtig .nachricht-kopf { flex-wrap: wrap; }
.chat-heute-wichtig .nachricht-text { -webkit-line-clamp: 12; white-space: pre-line; }
.chat-heute-wichtig .nachricht-fuss { justify-content: flex-end; }
.nachricht.chat-heute-wichtig .ghost { background-color: transparent; color: var(--auf-dunkel); border-color: var(--auf-dunkel-leise); }
.nachricht.chat-heute-wichtig .ghost:hover:not(:disabled) { border-color: var(--auf-dunkel); }
.chat-heute-wichtig .ghost .ico,
.chat-heute-wichtig .primary .ico { width: 18px; height: 18px; }
.chat-heute-fehler { margin-top: 10px !important; color: var(--auf-dunkel); font-size: var(--grad-beschreibung); }
/* Übersetzen (24.10.2026): der Knopf links in der Zeile mit der Uhrzeit (leise,
Tippfläche 44 hoch, ohne die Blase höher zu machen), die Übersetzung unter
dem Original mit feiner Linie und kleiner Versalienzeile. */
.chat-meta:has(.chat-uebersetzen) { justify-content: space-between; flex-wrap: wrap; column-gap: 12px; }
.chat-uebersetzen {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 44px;
margin: -12px 0 -10px -6px;
padding: 0 6px;
border: 0;
background: none;
color: var(--ink);
font: inherit;
font-weight: var(--schnitt-titel);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
--fokus-abstand: -2px;
}
.chat-uebersetzen .ico { width: 16px; height: 16px; flex: none; }
.chat-uebersetzen:disabled { color: var(--disabled-ink); cursor: wait; }
.chat-uebersetzung { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.chat-uebersetzung .alle-klein { margin-bottom: 2px; }
.chat-blase .error.chat-uebersetzung { font-size: var(--grad-beschreibung); line-height: var(--lh-tight); }
/* Schicht tauschen (24.10.2026): die Karte eines Angebots in der Blase. Auf der
Karte das Band, auf der eigenen schwarzen Blase durchsichtig mit feiner Linie
(Gold trägt dort die Versalienzeile). Stand als Kapsel: Safran „wartet auf
Genehmigung“, Kräuter „getauscht“, sonst offen. */
.chat-blase.hat-schicht { width: min(20rem, 85%); }
.chat-schicht {
display: grid;
gap: 2px;
margin: 2px 0 4px;
padding: 10px 12px 12px;
border-radius: var(--radius-btn);
background: var(--band);
color: var(--ink);
}
.chat-blase.ist-eigen .chat-schicht { background: transparent; color: var(--auf-dunkel); box-shadow: inset 0 0 0 1px var(--dark-row); }
.chat-schicht-kopf {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gold-klein);
}
.chat-blase.ist-eigen .chat-schicht-kopf { color: var(--gold); }
.chat-schicht-kopf .ico { width: 16px; height: 16px; flex: none; }
.chat-schicht-tag { margin-top: 2px !important; font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-stark); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.chat-schicht-ort { font-size: var(--grad-beschreibung); font-variant-numeric: tabular-nums; }
.chat-schicht-stand { margin-top: 6px !important; }
.chat-schicht-stand .pill { white-space: normal; line-height: var(--lh-tight); padding-block: 4px; }
.chat-schicht-stand .pill .ico { width: 14px; height: 14px; flex: none; }
.chat-blase.ist-eigen .chat-schicht .pill-open { color: var(--auf-dunkel); box-shadow: inset 0 0 0 1px var(--auf-dunkel); }
.chat-schicht-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chat-schicht-knopf,
.chat-schicht-zweit {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 10px 14px;
border-radius: var(--radius-btn);
font-family: var(--head);
font-size: var(--grad-text);
}
.chat-schicht-knopf { border: 0; background: var(--black); color: var(--auf-dunkel); font-weight: var(--schnitt-stark); }
.chat-blase.ist-eigen .chat-schicht-knopf,
html.dark .chat-schicht-knopf { background: var(--auf-dunkel); color: var(--black); }
.chat-schicht-zweit { border: 1px solid currentColor; background: transparent; color: inherit; font-weight: var(--schnitt-titel); }
.chat-schicht-knopf .ico,
.chat-schicht-zweit .ico { width: 20px; height: 20px; flex: none; }
.chat-schicht-knopf:disabled,
.chat-schicht-zweit:disabled { background: var(--disabled-face); color: var(--disabled-ink); border-color: var(--disabled-face); cursor: wait; }
.chat-blase.ist-eigen .chat-schicht-knopf:focus-visible,
.chat-blase.ist-eigen .chat-schicht-zweit:focus-visible { --fokus: var(--gold); }
/* Enger Modus (große Schrift, schmales Handy): ganze Wörter statt Sinnbild. */
@media (max-width: 19.9375em) {
.chat-schicht { padding-inline: 8px; }
.chat-schicht-knopf .ico,
.chat-schicht-zweit .ico { display: none; }
.chat-schicht-knopf,
.chat-schicht-zweit { padding-inline: 8px; hyphens: manual; overflow-wrap: normal; font-size: var(--grad-beschreibung); }
.chat-blase.hat-schicht { width: 100%; max-width: 100%; }
.chat-schicht-stand .pill { border-radius: var(--radius-tight); }
}
/* System-Chat „Denis Kebap“ (Bubby, 25.10.2026): oben angeheftet mit dem
runden Logo, nur lesen. Jede Blase trägt die Zeile „Systemnachricht“ in
kleinen Versalien. Meldungen mit Inhalt (Getränke-Bericht, später alle
Pushes) als Karte: Ampel-Satz je Abschnitt in der zarten Fläche seiner
Farbe (Paprika Problem, Safran Warnung, Kräuter ok, Band Hinweis), Zeilen
mit Name links und Wert rechts als Kapsel, die Spalten dazwischen klein. */
.chat-system-logo { border: 0; border-radius: 999px; background: transparent; object-fit: contain; }
.chat-kopf .chat-system-logo { width: 44px; height: 44px; }
.chat-system-marke {
margin-bottom: 4px !important;
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold-klein);
}
.chat-blase.hat-system { width: min(26rem, 100%); max-width: 100%; padding: 10px 14px 6px; }
.chat-nur-lesen { text-align: center; }
.chat-nur-lesen .chat-leise { padding: 12px 0 4px; border-top: 1px solid var(--line); }
.sys-karte { display: grid; gap: 12px; }
.sys-titel { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); line-height: var(--lh-tight); }
.sys-text { color: var(--muted); font-size: var(--grad-beschreibung); line-height: var(--lh-body); white-space: pre-line; }
.sys-abschnitt { display: grid; gap: 8px; }
.sys-abschnitt + .sys-abschnitt { padding-top: 12px; border-top: 1px solid var(--line); }
.sys-satz {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 12px;
border-radius: var(--radius-btn);
background: var(--band);
color: var(--ink);
font-family: var(--head);
font-size: var(--grad-beschreibung);
font-weight: var(--schnitt-stark);
line-height: var(--lh-tight);
}
.sys-satz .ico { flex: none; width: 18px; height: 18px; }
.sys-satz.ist-problem { background: var(--paprika-zart); color: var(--paprika); }
.sys-satz.ist-warnung { background: var(--safran-zart); color: var(--safran); }
.sys-satz.ist-ok { background: var(--kraeuter-zart); color: var(--kraeuter); }
.sys-satz.ist-info { color: var(--muted); font-weight: var(--schnitt-titel); }
.sys-zeilen { display: grid; margin: 0; padding: 0; list-style: none; }
.sys-zeile {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 2px 12px;
padding: 8px 0;
border-bottom: 1px solid var(--line);
}
.sys-zeile:last-child { border-bottom: 0; }
.sys-zeile-name { font-size: var(--grad-text); font-weight: var(--schnitt-titel); }
.sys-zeile-wert {
padding: 2px 10px;
border-radius: 999px;
background: var(--band);
font-family: var(--head);
font-size: var(--grad-beschreibung);
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.sys-zeile.ist-problem .sys-zeile-wert { background: var(--paprika-zart); color: var(--paprika); }
.sys-zeile.ist-warnung .sys-zeile-wert { background: var(--safran-zart); color: var(--safran); }
.sys-zeile.ist-ok .sys-zeile-wert { background: var(--kraeuter-zart); color: var(--kraeuter); }
.sys-zeile-mitte,
.sys-zeile-hinweis { grid-column: 1 / -1; font-size: var(--grad-klein); line-height: var(--lh-body); color: var(--muted); }
.sys-zeile-mitte { font-variant-numeric: tabular-nums; }
.sys-zeile-hinweis { color: var(--ink); }
.sys-stimmt { display: flex; align-items: flex-start; gap: 8px; color: var(--kraeuter); font-size: var(--grad-beschreibung); line-height: var(--lh-body); }
.sys-stimmt .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.sys-stimmt b { font-weight: var(--schnitt-stark); }
.sys-hinweise { display: grid; gap: 4px; margin: 0; padding-left: 1.2em; color: var(--muted); font-size: var(--grad-klein); line-height: var(--lh-body); }
.sys-knopf { margin-top: 0; }
html.dark.black .sys-satz.ist-info,
html.dark.black .sys-zeile-wert { box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 19.9375em) {
.chat-blase.hat-system { padding-inline: 10px; }
.sys-satz { padding-inline: 8px; }
}
.sys-paar { white-space: nowrap; }
/* ==========================================================================
Leere Zustaende: eine Papiertuete, so wie der Kunde sie im Laden bekommt.
Weicher Beutel, zwei Henkelboegen, Strichzeichnung. Gold nur am Henkel.
========================================================================== */
.leer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 40px var(--rand);
margin: 0;
text-align: center;
color: var(--muted);
font-size: var(--grad-text);
}
.leer-tuete { display: block; width: 56px; height: 56px; flex: none; }
.leer-tuete .beutel {
fill: none;
stroke: var(--ink);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.leer-tuete .henkel {
fill: none;
stroke: var(--gold);
stroke-width: 1.6;
stroke-linecap: round;
}
.leer p { margin: 0; }
/* Nur auf Geraeten mit Maus: Fuellung und Linie, keine Bewegung. */
@media (hover: hover) {
.chip:hover { border-color: var(--black); }
.kpi.clickable:hover:not(.selected):not(.picked) { outline: 2px solid var(--line); outline-offset: -2px; }
.link-card:hover { outline: 2px solid var(--line); outline-offset: -2px; }
.tab:hover { color: var(--black); }
html.dark .tab:hover { color: var(--auf-dunkel); }
/* Ein freies Feld zeigt unter der Maus seinen Rand in Schriftfarbe. */
input:hover:not(:disabled):not(:focus):not([readonly]),
select:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus):not([readonly]) { --input-line: var(--ink); }
}
/* Hoher Kontrast (Windows): Flaechen und Schatten fallen weg. Was gewaehlt
ist, bleibt als Rahmen in der Systemfarbe sichtbar; schwarze Flaechen
bekommen eine Linie. */
@media (forced-colors: active) {
.chip.active,
.chip.filterkachel.active,
.segment-btn.active,
.dock-item.active { outline: 2px solid Highlight; outline-offset: -2px; }
.dock,
.dock-plus,
.bon,
.titel-chat,
.titel-zahl,
.kpi.kpi-hero,
.konto-kachel,
.login-tafel,
.liste.karten > .listenzeile { border: 1px solid CanvasText; }
}
/* ==========================================================================
Schreibtisch (ab 992 px): der Titel waechst, "Alles" zeigt vier Kacheln je
Reihe, Belege und Zahlungen stehen als Karten in zwei Spalten.
========================================================================== */
@media (min-width: 992px) {
.seitentitel { font-size: min(var(--grad-vorstellung), calc((100cqi - var(--kopf-rechts, 56px)) / 7.6)); }
.login-titel { font-size: min(var(--grad-vorstellung), calc(100cqi / 8.4)); }
.alle-wand { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.liste.karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.liste.karten > .liste-gruppe { grid-column: 1 / -1; }
}
/* ==========================================================================
Handy (bis 991 px): Titelzeile und Leiste stehen auf jeder Breite; hier
ruecken nur die Inhalte enger zusammen.
========================================================================== */
@media (max-width: 991px) {
.kpis.kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis.kpis-3 > :last-child { grid-column: 1 / -1; }
/* Schriftrollen bleiben auf jeder Breite gleich. Nur das Raster wechselt. */
.search-wrap { margin-bottom: 12px; }
.page-head { margin-bottom: 16px; }
/* Filter bleiben textbreit in einer Reihe. Passt die Reihe nicht,
rollt sie waagrecht, statt eine Pille allein in die nächste Zeile
zu werfen. */
.chips {
flex-wrap: nowrap;
overflow-x: auto;
/* Der aeussere Tastaturrahmen braucht 2 px Linie + 3 px Abstand.
Die Pille bleibt buendig zum Inhalt; nur ihr Fokus darf vorstehen. */
max-width: calc(100% + 10px);
margin-inline: -5px;
padding: 5px;
scroll-padding-inline: 5px;
}
.chips > * { flex: none; scroll-margin-inline: 5px; }
.tabs {
flex-wrap: wrap;
overflow-x: visible;
}
.tabs > * { flex: none; }
.filters { flex-direction: column; align-items: stretch; gap: 12px; }
.filters .tabs { width: 100%; }
.filters > select { width: 100%; }
.dates {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
width: 100%;
gap: 8px;
}
.dates input { min-width: 0; margin-left: 0; width: 100%; min-height: 48px; }
.dates label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.settings-tabs { display: none; }
.kassa-hero-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; }
.kassa-hero-total { grid-column: 1 / -1; order: -1; margin-bottom: 4px; }
/* Die Liste ist auf jeder Breite dieselbe. Auf dem Telefon fallen nur die
Nebenfelder weg, die erst am grossen Bildschirm Platz haben. */
.listenzeile { gap: 12px; }
.zeile-unter .zeile-feld-breit { display: none; }
.zeile-oben, .zeile-unten { gap: 8px; flex-wrap: wrap; }
.zeile-titel { flex-basis: 6rem; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.zeile-unter { flex: 1 0 100%; }
.zeile-status { margin-left: 0; }
.zeile-aktionen { margin-left: auto; }
.zeile-status .pill { font-size: var(--grad-klein); }
/* Unter dem Text steht der Status links buendig, nicht mittig (Konrad, 15.10.2026). */
.liste.karten .zeile-status { margin-left: 0; justify-content: flex-start; }
.zeilen-kopf:not(.zeilen-kopf-drei),
.liste-zahlen:not(.liste-drei) .zeile-oben {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.zeilen-kopf-feld,
.liste-zahlen .zeile-betrag { width: auto; }
.liste-zahlen:not(.liste-drei) .zeile-titel { grid-column: 1 / -1; }
/* Stueckzahlen brauchen keine Geldspalte: so bleibt neben Soll, Haben und
Unterschied genug Platz fuer den Sortennamen. */
.zeilen-kopf-drei .zeilen-kopf-feld,
.liste-zahlen.liste-drei .zeile-betrag { width: 3.4rem; }
/* Datum ueber Neusiedl und Bruck. Aufgeklappt stehen die weiteren
Einzelbetraege darunter. Keine Zahl wird kleiner gesetzt. */
.umsatz-detail { grid-template-columns: minmax(0, 1fr); }
.zeit-eintrag { padding-left: 55px; }
/* Blatt auf dem Handy: dieselbe Karte wie am Schreibtisch, von unten.
Radius rundum, harte Kante, keine Linie; unten bleibt der Abstand zum
Home-Balken des iPhones. */
.sheet-scrim {
align-items: end;
justify-items: stretch;
padding: var(--rand) max(var(--rand), env(safe-area-inset-right)) max(var(--rand), env(safe-area-inset-bottom)) max(var(--rand), env(safe-area-inset-left));
}
.sheet {
width: 100%;
max-width: none;
max-height: 92dvh;
border: 0;
border-radius: var(--radius-gross);
box-shadow: var(--kante);
padding: var(--karte-innen);
animation: sheet-up 200ms ease;
}
.sheet-handle {
display: block;
width: 36px;
height: 4px;
margin: 8px auto 0;
border-radius: 999px;
background: var(--pill-line);
}
.sheet-head { padding: 0 0 var(--abstand-klein); margin-bottom: 0; }
.sheet.sheet-wide { height: min(92dvh, 860px); max-height: 92dvh; }
.sheet.sheet-wide .sheet-head { padding: 0 0 var(--abstand-klein); margin-bottom: 0; flex: none; }
}
/* ==========================================================================
Grosse Schrift oder Anzeigezoom (Bubby, 24.10.2026): em zaehlt hier die
Schrift, die am Geraet eingestellt ist. Ist der Bildschirm schmaler als
20 Schriftbreiten (das iPhone SE mit normaler Schrift hat genau 20), wird
es eng: Kacheln und Paare stehen untereinander, Werte rutschen unter ihre
Beschriftung, lange Woerter trennen nach Silben. Bei normaler Schrift
aendert sich nichts.
========================================================================== */
@media (max-width: 19.9375em) {
body { -webkit-hyphens: auto; hyphens: auto; }
.heute-grid,
.kpis,
.kpis.kpis-3,
.kpis.kpis-4,
.form-row,
.heute-more-grid,
.person dl,
.me-daten { grid-template-columns: minmax(0, 1fr); }
.heute-grid > .kpi,
.kpis > * { grid-column: 1 / -1; }
.heute-grid > .kpi { min-height: 0; }
.preise-karten,
.alle-wand { grid-template-columns: minmax(0, 1fr); }
/* Die Kapsel der Heldenkachel steht ueber der Beschriftung statt daneben. */
.kpi.kpi-hero .kpi-head { padding-right: 0; }
.held-chip { position: static; align-self: flex-start; max-width: 100%; order: -1; }
/* Beschriftung links, Wert rechts: passt beides nicht nebeneinander,
rutscht der Wert rechtsbuendig in die naechste Zeile. */
.kpi-zeilen > div,
.kassa-line,
.kassa-total,
.lohn-row > div,
.arbeitsplan-ich .arbeitsplan-team-laden h3,
.arbeitsplan-ich .arbeitsplan-team-laden li,
.flag-row,
.chat-zeile .zeile-oben { flex-wrap: wrap; }
.kassa-line,
.kassa-total { column-gap: 12px; row-gap: 0; }
.kpi-zeilen > div > :last-child,
.lohn-row > div > :last-child,
.arbeitsplan-ich .arbeitsplan-team-laden h3 > :last-child,
.arbeitsplan-ich .arbeitsplan-team-laden li > :last-child,
.flag-row > :last-child { margin-left: auto; }
/* Mail und Push stehen unter dem Ereignis, wenn der Name Platz braucht. */
.notify-event > div:first-child { flex: 1 1 8em; }
.notify-sw.notify-none { width: auto; }
.notify-head .notify-pair { min-width: 0; }
/* Chat-Liste: der Name behaelt mindestens sechs Zeichen, die Uhrzeit
weicht in die naechste Zeile, statt ihn auf "Neu…" zu kuerzen. */
.chat-zeile .zeile-titel { flex-basis: 6em; }
/* PDF-Karte im Chat: nur das Sinnbild, „PDF“ steht schon bei der Größe. */
.chat-pdf-ico { height: 44px; }
.chat-pdf-ico b { display: none; }
/* Wichtig (24.10.2026): Kapsel und X oben, der Satz darunter; angeheftet
der Text in eigener Zeile. Mit dem Wichtig-Knopf (nur Admins) steht das
Feld über den Knöpfen, sonst bliebe ihm kaum ein Wort Platz (schmale
Handys bei normaler Schrift: Breitenregel in 94_Chat.css). */
.chat-wichtig-entwurf,
.chat-angeheftet { flex-wrap: wrap; }
.chat-wichtig-entwurf .chat-foto-weg { margin-left: auto; }
.chat-wichtig-entwurf .chat-leise { order: 3; flex-basis: 100%; padding-bottom: 4px; }
.chat-angeheftet > .ico { margin-left: auto; }
.chat-angeheftet-text { order: 3; flex-basis: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chat-eingabe-zeile:has(.chat-wichtig-knopf) { flex-wrap: wrap; }
.chat-eingabe-zeile:has(.chat-wichtig-knopf) textarea { order: -1; flex-basis: 100%; }
.chat-eingabe-zeile:has(.chat-wichtig-knopf) .chat-senden { margin-left: auto; }
.kassa-hero-amounts { flex-wrap: wrap; }
.compact-btn { max-width: 100%; }
.page-actions > .ghost { flex-shrink: 1; }
/* Tag waehlen auf Heute: das Datum steht ueber den Pfeilen. */
.heute-team-datum { grid-template-columns: 44px 44px; justify-content: space-between; }
.heute-team-datum time { grid-column: 1 / -1; grid-row: 1; }
.arbeitsplan-ich .heute-team-heute { grid-column: 1 / -1; }
/* Zwei Betraege je Zeile (Neusiedl, Bruck) bleiben in ihrer Spalte. */
.liste-zahlen .zeile-oben { container-type: inline-size; }
.liste-zahlen .zeile-betrag { font-size: min(var(--grad-karte), calc(50cqi / 5.8)); }
}