/* ==========================================================================
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;
/* Cockpit (Bubby 10.11.2026): ± zum Vorjahr als Kapsel auf der schwarzen
Heldenkarte, in jeder Darstellung die Werte aus Dunkel. */
--paprika-zart-auf-dunkel: #3a1d15;
--kraeuter-auf-dunkel: #9dc684;
--kraeuter-zart-auf-dunkel: #1f2a18;
--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 */
/* Alle Stufen in rem aus der Grundschrift (unten bei html: 15 statt 16,
Bubby 29.10.2026). Die Zahlen nennen die Stufe bei Grundschrift 16. */
--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 */
/* Eingabefelder nie unter 16 px: darunter zoomt das iPhone beim Tippen
hinein. Mit grosser Schrift wachsen sie wie der Text. */
--grad-feld: max(1rem, 16px);
--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.
Eine Spur kleiner (Bubby 29.10.2026): Grundschrift 15 statt 16, alle
rem-Grade folgen. In Prozent, damit eine groessere Schrift im Browser
weiter mitwirkt. Abstaende, Tippflaechen und Leiste stehen in px und bleiben. */
html {
font-size: 93.75%;
-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; }
input, select, textarea { font-size: var(--grad-feld); }
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 { --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. */
.eyebrow,
.heute-more-title,
.notify-head {
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
color: var(--muted);
}
.eyebrow,
.heute-more-title,
.notify-head {
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);
}
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-feld);
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 leise; 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;
/* Mit dem nativen Aussehen stellt iPhone-Safari das Feld selbst auf
content-box um: 100 % Breite plus Innenabstand und Rand ragten ueber die
Karte (Zettel, Bubby 30.10.2026). fill-available fuellt die Zeile, egal
wie das Geraet rechnet; wo es fehlt, bleiben die 100 % von oben. */
width: -webkit-fill-available;
min-width: 0;
}
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); }
/* ==========================================================================
Zahlenfeld (Bubby 5.11.2026): Kästchen für die Ziffern, darunter ein großes
Tastenfeld 3 × 4 wie früher beim PIN (1–9, leer, 0, Löschen). Tasten mit
harter Kante, mindestens 56 px hoch; Kästchen vertieft wie ein Feld, die
gefüllten mit Punkt (nie die Ziffer). Falsch: einmal kurz schütteln.
========================================================================== */
.zahlenfeld { width: min(340px, 100%); margin-inline: auto; border-radius: var(--radius); outline: 0; touch-action: manipulation; --fokus-abstand: 6px; }
.zf-kaestchen { display: flex; justify-content: center; gap: 10px; }
.zf-k {
position: relative;
flex: 0 1 52px;
min-width: 0;
aspect-ratio: 6 / 7;
max-height: 60px;
border-radius: var(--radius-tight);
background: var(--field);
box-shadow: var(--mulde), inset 0 0 0 1px var(--input-line);
}
.zf-k.ist-dran { box-shadow: var(--mulde), inset 0 0 0 2px var(--ink); }
.zf-kaestchen.hat-fehler .zf-k { box-shadow: var(--mulde), inset 0 0 0 2px var(--danger); }
.zf-k.ist-voll::after {
content: "";
position: absolute;
inset: 50% auto auto 50%;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border-radius: 999px;
background: var(--ink);
}
.zf-kaestchen.ist-falsch { animation: zf-wackeln 0.2s ease-in-out; }
@keyframes zf-wackeln {
0%, 100% { transform: none; }
20% { transform: translateX(-8px); }
45% { transform: translateX(7px); }
70% { transform: translateX(-4px); }
90% { transform: translateX(2px); }
}
.zf-fehler { margin: 12px 0 0; text-align: center; color: var(--danger); font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); line-height: var(--lh-body); }
.zf-tasten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: var(--abstand-gross); }
.zf-taste {
height: 4rem;
min-height: 56px;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--radius);
background: var(--paper);
box-shadow: var(--kante);
color: var(--ink);
font-family: var(--head);
font-size: var(--grad-zahl);
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: background-color 0.15s ease;
}
.zf-taste .ico { width: 26px; height: 26px; }
@media (hover: hover) { .zf-taste:not(:disabled):hover { background: var(--row-hover); } }
.zf-taste:not(:disabled):active { background: var(--row-hover); transform: scale(0.98); }
.zf-taste:disabled { color: var(--disabled-ink); box-shadow: none; cursor: not-allowed; }
.zf-taste.zf-weg { background: transparent; box-shadow: none; }
.zf-taste.zf-weg:disabled { background: transparent; }
html.dark.black .zf-taste:not(.zf-weg):not(:disabled) { box-shadow: inset 0 0 0 1px var(--line), var(--kante); }
html.dark.black .zf-k { box-shadow: inset 0 0 0 1px var(--input-line); }
html.dark.black .zf-k.ist-dran { box-shadow: inset 0 0 0 2px var(--ink); }
html.dark.black .zf-kaestchen.hat-fehler .zf-k { box-shadow: inset 0 0 0 2px var(--danger); }
/* Wenig Höhe (Handy, iPhone mit Leiste): Tasten 56 px, knappere Abstände. */
@media (max-height: 900px) {
.zf-taste { height: 56px; }
.zf-tasten { gap: 8px; margin-top: var(--abstand); }
.zf-kaestchen { gap: 8px; }
.zf-k { max-height: 48px; }
.zf-fehler { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.zf-kaestchen.ist-falsch { animation: none; }
.zf-taste:active { transform: none; }
}
@media (forced-colors: active) {
.zf-taste, .zf-k { border: 1px solid CanvasText; }
.zf-k.ist-voll::after { background: CanvasText; }
}
@media (max-height: 640px) {
.zf-k { max-height: 36px; }
.zf-tasten { gap: 4px; margin-top: 10px; }
}
/* ==========================================================================
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); }
/* Die ungewählte Sprache braucht auf der dunklen Anmeldetafel helle Schrift.
Die allgemeine Segment-Regel setzt im Hellmodus Schwarz; die gewählte
Sprache behält ihre eigene Fläche und Schrift. */
.login-tafel .segment-btn:not(.active) { color: var(--auf-dunkel); }
.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);
}
.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); }
/* Anmeldung mit Code (Konrad 27.10.2026): beim ersten Mal das Adressfeld, danach
die gemerkte Person mit Foto oder Anfangsbuchstabe und „Nicht du?“. */
.login-name { margin: 0 0 14px; text-align: left; color: var(--muted); }
.login-name input[type="text"] { font-size: var(--grad-feld); margin: 6px 0 0; }
.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); }
/* Ein großer Knopf „Code schicken“, darunter in einer leisen Zeile, wie es
geht (Bubby 28.10.2026). */
.login-card .primary,
.login-card .ghost { width: 100%; }
.login-anmelden { min-height: 56px; font-size: var(--grad-karte); }
.login-weg-hinweis { margin: 8px 0 12px; color: var(--muted); font-size: var(--grad-beschreibung); }
.login-code-karte { text-align: left; }
.login-code-karte .login-heading { text-align: center; }
.login-code-text { margin: 0 0 14px; color: var(--ink); font-size: var(--grad-beschreibung); }
/* Die sechs Ziffern groß und mit Luft, gut zu lesen und zu prüfen. */
.login-code-karte input[name="code"] {
font-size: var(--grad-abschnitt);
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
letter-spacing: .3em;
text-align: center;
}
.login-code-wege { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 8px; }
#login-code-neu { font-variant-numeric: tabular-nums; }
#login-code-neu:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.login-code-karte .error { margin: 10px 0 0; text-align: center; }
/* Warten auf den Link aus der Mail (Bubby 28.10.2026): ein ruhiger Punkt. */
.login-warten {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 0 14px;
color: var(--muted);
font-size: var(--grad-beschreibung);
}
.login-warten-punkt {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold-klein);
animation: login-warten 1.6s ease-in-out infinite;
}
@keyframes login-warten { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .login-warten-punkt { animation: none; } }
.login-code-hilfe { margin: 14px 0 0; color: var(--muted); font-size: var(--grad-beschreibung); text-align: center; }
/* Bestätigungsseite des Links: Gerät und Uhrzeit der wartenden Anfrage. */
.login-link-karte { text-align: center; }
.login-link-titel { margin: 12px 0 10px; font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-stark); }
.login-link-daten { display: grid; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line-card); border-radius: 14px; background: var(--field); text-align: left; }
.login-link-daten > div { display: flex; justify-content: space-between; gap: 12px; }
.login-link-daten dt { color: var(--muted); font-size: var(--grad-beschreibung); }
.login-link-daten dd { margin: 0; font-weight: var(--schnitt-stark); text-align: right; overflow-wrap: anywhere; }
.login-link-karte .form-actions { display: grid; gap: 8px; }
.login-link-karte .error:empty { display: none; }
.login-link-ico { margin: 0 auto; }
/* Zahlenabgleich (Bubby 28.10.2026): die Zahl am wartenden Gerät, die Auswahl auf der Bestätigungsseite. */
.login-zahl { display: grid; justify-items: center; gap: 2px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line-card); border-radius: 14px; background: var(--field); }
.login-zahl span { color: var(--muted); font-size: var(--grad-beschreibung); }
.login-zahl strong { font-size: 2.6rem; font-weight: var(--schnitt-stark); font-variant-numeric: tabular-nums; letter-spacing: .06em; line-height: 1.15; }
.login-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.login-zahlen button { min-height: 64px; padding: 0; font-size: 1.6rem; font-weight: var(--schnitt-stark); font-variant-numeric: tabular-nums; }
.login-zahl-hinweis { color: var(--muted); }
/* Mein Bereich: Anmeldung, „Überall abmelden“. */
.me-abmelden .form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.me-abmelden .error { margin: 8px 0 0; }
.error { color: var(--danger); margin: 0 0 12px; }
.error:empty { display: none; }
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.me-abmelden-frage { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.me-abmelden-frage p { margin: 0 0 8px; }
/* Seite „App fürs Handy“ unter /app (Bubby 4.11.2026): ohne Anmeldung und
ohne Leiste. Je App eine Karte mit Symbol, Version und einem großen Knopf,
darunter drei Schritte; am iPhone stattdessen „Zum Home-Bildschirm“. */
.apk-seite .main { padding-bottom: calc(var(--abschnitt-abstand) + env(safe-area-inset-bottom)); }
.apk-seite .apk-inhalt { display: grid; gap: var(--abstand); max-width: var(--lesebreite); }
.apk-seite .panel { margin: 0; }
.apk-seite .panel-inner { display: grid; gap: 12px; padding: var(--karte-innen); }
.apk-seite .panel h2 { padding: 0; }
.apk-einleitung { margin: 0 0 4px; font-size: var(--grad-text); line-height: var(--lh-body); }
.apk-app { display: flex; align-items: center; gap: 14px; margin: 0; }
.apk-symbol { flex: none; width: 56px; height: 56px; border-radius: var(--radius-btn); background: var(--band); object-fit: cover; }
.apk-app-text { display: grid; gap: 2px; min-width: 0; }
.apk-app-name { font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-stark); line-height: var(--lh-tight); }
.apk-app-stand { color: var(--muted); font-size: var(--grad-beschreibung); font-variant-numeric: tabular-nums; }
.apk-seite .primary .ico { width: 20px; height: 20px; }
.apk-schritte { display: grid; gap: 10px; margin: 0; padding-left: 1.4em; font-size: var(--grad-text); line-height: var(--lh-body); }
.apk-schritte b { font-weight: var(--schnitt-stark); }
.apk-leise { margin: 0; color: var(--muted); font-size: var(--grad-beschreibung); line-height: var(--lh-body); }
.apk-oeffnen { display: flex; flex-wrap: wrap; gap: 8px; }
.apk-oeffnen .ghost { flex: 1 1 200px; }
.apk-pruef summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--muted); font-size: var(--grad-beschreibung); }
.apk-pruef p { margin: 0 0 8px; color: var(--muted); font-size: var(--grad-klein); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* ==========================================================================
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;
}
/* iPhone-App vom Home-Bildschirm ab iOS 26 (WebKit-Fehler 301108, Bubbys Bilder
vom 5.11.2026 18:37/18:38): mit durchsichtiger Statusleiste gibt das iPhone der
App unten genau die Höhe der Statusleiste (62 px) zu wenig, sobald die Seite
nicht höher ist als der Bildschirm (offener Chat, kurze Seiten, nach der
Tastatur). Darunter zeichnet es nichts, die Leiste schwebt zu hoch. Ist die
Seite um diesen Streifen höher, gibt es die volle Höhe zurück. Höchstens so hoch
wie der Bildschirm (100lvh), also rollt nichts mehr als vorher. Passt alles,
ändert die Regel nichts. Nur iPhone (-webkit-touch-callout), nur als App, nicht
bei offener Tastatur; Android, Browser und Querformat (Rand oben 0) unberührt.
Quelle: https://bugs.webkit.org/show_bug.cgi?id=301108 */
@media (display-mode: standalone) {
@supports (-webkit-touch-callout: none) {
html:not(.kb-open) { min-height: min(100lvh, calc(100% + env(safe-area-inset-top))); }
}
}
/* Kopf und Inhalt teilen sich je Ansicht eine passende Breite. Lange Listen
nutzen den Platz; Formulare bleiben bequem lesbar. */
/* Chat (28.10.2026): Titelzeile, Liste und offener Chat in einer mittigen
Spalte wie die Leiste; sonst stand rechts neben den Karten ein leerer
Streifen (Bubbys Falthandy aufgeklappt, rund 850 bis 940 breit). */
.app[data-page="chat"] { --inhalt: var(--lesebreite); }
.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)); }
/* Nur Bubby Chat behält sein App-Symbol neben dem Bon oder Logo im Kopf. */
.seitenkopf:has(.titel-symbol-knopf + .bon, .titel-symbol-knopf + .titel-logo) { --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 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));
/* iPhone ab iOS 26: haengt nach der Tastatur alles Feste zu hoch, rueckt
die Leiste um genau diesen Versatz wieder ganz nach unten (sichtVersatz in
86_Bedienung_Rendern.js); sonst ist er 0. */
bottom: calc(max(var(--dock-luft), env(safe-area-inset-bottom)) - var(--sicht-versatz, 0px));
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; }
/* Stand der App (4.11.2026): Kräuter heißt in Ordnung, Safran bitte bald ansehen; die Kennung leise darunter. */
.alle-geraet .app-stand.ist-aktuell { color: var(--kraeuter); }
.alle-geraet .app-stand.ist-neu { color: var(--safran); font-weight: 600; }
.alle-geraet .app-version { font-size: var(--grad-klein); }
.alle-geraet a.alle-apk { text-decoration: none; }
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); }
/* Jubilaeen 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 ist eine helle Karte. Erledigt heißt Kräuter,
ein fehlender Teil 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 {
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); }
/* Aufklappbarer Kopf (Frei-Anträge „Zuletzt entschieden“). */
.klapp-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;
}
.klapp-titel { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-titel); }
.klapp-stand { font-size: var(--grad-beschreibung); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.klapp-pfeil { display: inline-flex; color: var(--muted); transition: transform .2s; }
.klapp-pfeil .ico { width: 18px; height: 18px; }
.klapp-kopf[aria-expanded="true"] .klapp-pfeil { transform: rotate(90deg); }
.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; }
@media (prefers-reduced-motion: reduce) {
.klapp-pfeil { transition: none; }
}
/* 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; }
/* Erinnerung nach der Arbeitszeit (Bubby 3.11.2026): bleibt, bis „Erledigt“ getippt ist */
.mt-erinnerung .mt-eyebrow { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.mt-erinnerung .mt-zeit { font-family: var(--sans); font-weight: var(--schnitt-text); letter-spacing: 0; text-transform: none; }
.mt-erinnerung-text { margin: 8px 0 0; font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-titel); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.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 { min-width: 0; font-size: var(--grad-karte); line-height: var(--lh-body); overflow-wrap: anywhere; }
.mt-wichtig-text b { color: var(--gold); }
/* Links wie auf der eigenen schwarzen Blase im Chat: goldener Strich. */
.mt-wichtig-text .chat-link { text-decoration-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 „Für dich“ */
.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-fd-zeile:first-child { border-top: 0; }
.mt-fd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.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-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-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 { container-type: inline-size; 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); }
/* Schmale Karte (320 px): der Laden über den Bildern, damit die Namen Platz haben
und nur zwischen Wörtern umbrechen („Melind a“, Bubby 29.10.2026). */
@container (max-width: 17em) {
.mt-jetzt-laeden li { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
.mt-jetzt-laden { grid-column: 1 / -1; }
}
/* 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); }
/* Zeitstrahl „Letzte 24 Stunden“ (Bubby 29.10.2026): Zeit | Kreis auf der Achse | Text | Ziel. */
.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); }
.zs-karte { padding-bottom: 12px; }
.zs-abschnitt { margin: 14px 0 2px; }
.zs-chips + .zs-abschnitt { margin-top: 10px; }
/* Filter (nur Admin): eine Reihe, die am Handy waagrecht rollt. */
.chips.zs-chips { flex-wrap: nowrap; gap: 8px; margin: 4px calc(-1 * var(--karte-innen)) 0; padding: 4px var(--karte-innen); overflow-x: auto; scrollbar-width: none; }
.zs-chips::-webkit-scrollbar { display: none; }
.zs-chips .chip { flex: none; }
.zs-chip-zahl { color: var(--muted); font-size: var(--grad-klein); font-variant-numeric: tabular-nums; }
.zs-liste { position: relative; list-style: none; margin: 0; padding: 0; }
.zs-liste::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: calc(3.25em + 25px); width: 2px; border-radius: 999px; background: var(--line); }
.zs-zeile {
--fokus-abstand: -2px;
position: relative;
display: grid;
grid-template-columns: 3.25em 32px minmax(0, 1fr) auto;
align-items: start;
gap: 10px;
width: 100%;
min-height: 44px;
padding: 7px 0;
border: 0;
border-radius: var(--radius-tight);
background: none;
color: var(--ink);
font: inherit;
text-align: left;
}
button.zs-zeile, a.zs-zeile { cursor: pointer; touch-action: manipulation; }
a.zs-zeile { text-decoration: none; }
@media (hover: hover) { button.zs-zeile:hover .zs-titel b, a.zs-zeile:hover .zs-titel b { text-decoration: underline; } }
@media (prefers-reduced-motion: no-preference) { button.zs-zeile:active, a.zs-zeile:active { transform: scale(0.98); transition: transform .1s; } }
.zs-zeile .avatar { position: relative; box-shadow: 0 0 0 3px var(--card); }
.zs-zeile .avatar.ist-gruppe { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 3px var(--card); }
.zs-zeit { padding-top: 7px; color: var(--muted); font-size: var(--grad-klein); font-weight: var(--schnitt-titel); font-variant-numeric: tabular-nums; }
.zs-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 5px; }
.zs-titel { font-size: var(--grad-beschreibung); line-height: 1.4; overflow-wrap: break-word; hyphens: manual; }
.zs-titel b { font-weight: var(--schnitt-stark); }
.zs-leise { color: var(--muted); }
.zs-vorschau {
overflow: hidden;
color: var(--muted);
font-size: var(--grad-klein);
line-height: var(--lh-body);
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.zs-ziel { display: inline-flex; padding-top: 6px; color: var(--muted); }
.zs-ziel .ico { width: 20px; height: 20px; }
.zs-zahl { margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; }
/* Ungelesen: goldener Ring (auf hellem Grund im dunkleren Gold), goldene Zahl, Vorschau in voller Schrift. */
.zs-zeile.ist-neu .avatar { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--gold-schrift); }
html.dark .zs-zeile.ist-neu .avatar { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--gold); }
.zs-zeile.ist-neu .zs-vorschau { color: var(--ink); font-weight: var(--schnitt-titel); }
.zs-mehr { margin-top: 4px; }
.zs-leer { margin-top: 8px; }
/* Schmale Handys (bis 359 px) und großer Text: die Uhrzeit über den Text, damit lange Wörter ganz bleiben. */
@media (max-width: 22.4375em) {
.zs-liste::before { left: 15px; }
.zs-zeile { grid-template-columns: 32px minmax(0, 1fr) auto; row-gap: 0; }
.zs-zeile > .avatar { grid-column: 1; grid-row: 1 / span 2; }
.zs-zeit { grid-column: 2; grid-row: 1; padding-top: 0; }
.zs-text { grid-column: 2; padding-top: 0; }
.zs-zeile > :is(.zs-ziel, .zs-zahl) { grid-column: 3; grid-row: 1 / span 2; }
}
/* Rechnung aus dem Zeitstrahl: „PDF öffnen“ ganz oben im Blatt. */
.zs-pdf-oben { margin-bottom: 16px; }
.zs-pdf-oben .primary { width: 100%; }
/* 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-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-karte-kopf { flex-wrap: wrap; }
.mt-fd-text b, .mt-fd-text > span { 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./29.10.2026): Chat, Mitarbeiter, Mein Bereich, Alles */
.list-lead.ist-foto, .person-avatar.ist-foto, .konto-zeichen.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; } }
/* Meine Telefonnummer (27.10.2026). */
.me-telefon-jetzt { margin: 0 0 4px; font-size: var(--grad-text); }
.me-telefon .me-telefon-form { margin-top: 12px; padding: 0; }
.me-telefon .me-telefon-form :is(.settings-ok, .error) { margin: 8px 0 0; padding: 0; }
.me-telefon-regel { margin: 6px 0 0; font-size: var(--grad-klein); }
.me-telefon-form .form-actions { margin-top: 12px; }
/* ==========================================================================
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,
.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, .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, .feier, .wer-frei, .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,
html.dark.black .kpis-umriss .kpi,
html.dark.black .me-wege > .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); }
/* Karten und Felder zum Eintragen (zuerst für den Papierzettel, 30.10.2026; der alte
Zettel ist entfernt, Konrad 4.11.2026). Wird von Brot genutzt (brot-view.js, 63_Brot.css),
„zettel-hinweis“ auch von Getränke. Je Gruppe eine Karte mit harter Kante.
Raster aus der Kartenbreite (auch große Schrift): eine Spalte, ab 300 px Ware zu
zweit (Geld bleibt eine), ab 600 px alles zu dritt. */
.zettel-page {
max-width: var(--formularbreite);
margin-inline: auto;
display: flex;
flex-direction: column;
gap: var(--abstand);
}
.zettel-page > p, .zettel-page > button { margin: 0; }
.zettel-karte {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--kante);
padding: var(--karte-innen);
}
.zettel-page h2 { margin: 0 0 8px; padding: 0; font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-stark); }
.zettel-page h3 { margin: 0; font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-stark); }
.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-auswahl .chip { min-height: 48px; padding-inline: 22px; font-size: var(--grad-text); }
.zettel-formular { display: flex; flex-direction: column; gap: var(--abstand); margin: 0; }
.zettel-gruppe { container-type: inline-size; }
.zettel-gruppe-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 var(--abstand); padding-bottom: 12px; border-bottom: 1px solid var(--line-card); }
.zettel-gruppe-kopf p { margin: 0; color: var(--muted); font-size: var(--grad-beschreibung); }
.zettel-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 16px; }
@container (min-width: 300px) {
.zettel-raster:not(.zettel-raster-geld) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 600px) {
.zettel-raster, .zettel-raster-geld { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
}
/* Ein Feld: Name, graue Erklärung, großes Zahlenfeld. Alle Felder einer Reihe
stehen auf derselben Höhe, auch wenn eine Erklärung zwei Zeilen braucht. */
.zettel-feld { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; margin: 0; font-weight: var(--schnitt-text); }
.zettel-feld-name { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); color: var(--ink); overflow-wrap: anywhere; }
.zettel-feld-hilfe { margin: 2px 0 8px; color: var(--muted); font-size: var(--grad-beschreibung); line-height: var(--lh-tight); }
.zettel-eingabe { position: relative; display: block; }
.zettel-page .zettel-eingabe input {
min-height: 56px;
font-size: max(var(--grad-abschnitt), 16px);
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
}
.zettel-eingabe.ist-euro input { padding-right: 40px; }
.zettel-einheit {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--muted);
font-size: var(--grad-karte);
font-weight: var(--schnitt-titel);
pointer-events: none;
}
/* Hauptknopf: groß, Schwarz mit goldener Kante wie die OK-Taste; das einzige Gold im Formular. */
.zettel-page .zettel-speichern { min-height: 60px; font-size: var(--grad-karte); font-weight: var(--schnitt-stark); box-shadow: var(--kante-gold); margin-top: var(--abstand-klein); }
html.dark .zettel-page .zettel-speichern:not(:disabled) { background-color: var(--black); color: var(--auf-dunkel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), var(--kante-gold); }
html.dark .zettel-page .zettel-speichern:not(:disabled):hover { background-color: var(--dark-row); }
.zettel-page .zettel-speichern:disabled { box-shadow: none; }
.zettel-bisher h3 { margin: 0 0 6px; }
.zettel-bisher > p { margin: 0 0 12px; font-size: var(--grad-beschreibung); color: var(--muted); }
.zettel-bisher { container-type: inline-size; }
.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 dd { margin: 0; font-weight: var(--schnitt-stark); font-variant-numeric: tabular-nums; text-align: right; }
@container (min-width: 600px) {
.zettel-summen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
.zettel-bestaetigung { display: flex; gap: 12px; align-items: start; margin: 0; line-height: 1.6; font-weight: var(--schnitt-text); }
.zettel-bestaetigung input { flex: 0 0 auto; width: 22px; height: 22px; margin: 3px 0 0; }
@media (max-width: 767px) {
.zettel-auswahl { align-items: stretch; }
.zettel-auswahl .field-label { width: 100%; }
}
.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; }
/* Seite „Brot“ (Brot-Zählung, Bubby 1.11.2026): nutzt die Zettel-Karten und -Felder; dazu die Kopfkarte
„wer · welcher Teil“, feste Werte nach dem Speichern, leise Sätze und die Admin-Freigabe. */
.brot-rolle { display: flex; align-items: center; gap: 12px; }
.brot-kreis { flex: none; width: 44px; height: 44px; border-radius: 999px; background: var(--black); color: var(--gold); display: grid; place-items: center; }
.brot-rolle b { display: block; font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); }
.brot-rolle span { color: var(--muted); font-size: var(--grad-beschreibung); }
.brot-regel { margin-top: 12px; }
.brot-leise { margin: 0; color: var(--muted); font-size: var(--grad-beschreibung); line-height: var(--lh-body); }
.brot-satz { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--radius-btn); background: var(--band); font-size: var(--grad-beschreibung); line-height: var(--lh-body); }
.brot-satz .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.brot-zeit { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--kraeuter-zart); color: var(--kraeuter); font-size: var(--grad-klein); font-weight: var(--schnitt-stark); }
.brot-zeit .ico { width: 14px; height: 14px; }
.brot-fest { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-card); }
.brot-fest:last-of-type { border-bottom: 0; }
.brot-fest .name { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); }
.brot-fest .zahl { font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-stark); font-variant-numeric: tabular-nums; }
.brot-aendern { margin-top: 12px; }
.zettel-raster.brot-eins { grid-template-columns: minmax(0, 1fr); }
.brot-seite .zettel-eingabe input { width: 100%; }
.brot-liste { margin: 12px 0 0; padding-left: 1.2em; color: var(--muted); font-size: var(--grad-beschreibung); line-height: var(--lh-body); }
.brot-freigabe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.brot-freigabe select { width: 100%; }
/* Plus und Heute springen zu einem Teil (data-brot-ziel): etwas Luft über der Karte. */
.brot-seite [data-brot-ziel] { scroll-margin-top: 16px; }
/* Fehler beim Speichern (4.11.2026): das Feld bekommt einen kräftigen Rand, darunter der genaue Satz; über dem Knopf dieselbe Meldung im Rahmen. */
.brot-seite .zettel-feld.ist-fehler .zettel-eingabe input { border: 2px solid var(--ink); }
.brot-feld-fehler { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; color: var(--ink); font-size: var(--grad-beschreibung); font-weight: var(--schnitt-stark); line-height: var(--lh-tight); }
.brot-feld-fehler .ico, .brot-fehler .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.brot-seite .brot-fehler { display: flex; gap: 8px; align-items: flex-start; border-width: 2px; border-color: var(--ink); }
.brot-seite .zettel-feld.ist-fehler { scroll-margin: 96px 0; }
/* Teig-Vorhersage (Bubby 10.11.2026): je Laden eine Zeile, darunter der Teig für beide Läden. */
.brot-vorhersage { display: grid; gap: 12px; }
.brot-vorhersage h3 { margin: 0; }
.brot-vorhersage-laden { padding-bottom: 12px; border-bottom: 1px solid var(--line-card); }
.brot-vorhersage-laden b { display: block; font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); }
.brot-vorhersage-laden p { margin: 4px 0 0; line-height: var(--lh-body); }
.brot-vorhersage-laden strong { font-family: var(--head); font-weight: var(--schnitt-stark); font-variant-numeric: tabular-nums; }
.brot-vorhersage .brot-fest { padding-top: 0; }
/* Teig-Runden (Bubby 11.11.2026): unter „Teig zusammen“, je Runde eine Zeile, dann die Kisten. */
.brot-runden { display: grid; gap: 8px; }
.brot-runden .alle-klein { margin: 0; }
.brot-runden .brot-leise { margin: 0; }
.brot-runde { padding-bottom: 8px; border-bottom: 1px solid var(--line-card); }
.brot-runde b { display: block; font-family: var(--head); font-weight: var(--schnitt-stark); }
.brot-runde p { margin: 2px 0 0; line-height: var(--lh-body); font-variant-numeric: tabular-nums; }
.brot-runde strong { font-family: var(--head); font-weight: var(--schnitt-stark); }
/* Privat entnehmen (Bubby 12.11.2026, privat-view.js): Laden-Wahl über Betrag und Grund. */
.privat-seite .segment { margin: 0 0 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 {
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; }
/* 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-speicher-gross { margin: var(--abstand-klein) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.me-speicher-gross span { font-size: var(--grad-beschreibung); color: var(--muted); }
.me-speicher-gross strong { font-family: var(--head); font-size: var(--grad-zahl); font-weight: var(--schnitt-stark); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.me-speicher-teile { margin: 4px 0 0; font-size: var(--grad-beschreibung); }
.me-speicher .me-daten { padding: var(--abstand) 0 0; }
.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; }
/* Code-Mails je Person (Konrad 28.10.2026): eine kleine Zeile, die Grenze in Paprika. */
.code-mails { flex-basis: 100%; margin: 0; font-size: var(--grad-beschreibung); }
.code-mails-grenze { display: block; margin-top: 2px; color: var(--paprika); font-weight: var(--schnitt-stark); }
.haupt-admin-anmeldung h2 { margin-bottom: 4px; }
.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, seit 1.11. als Link in Drive. Der
Lohnzettel aus der Chat-Nachricht steht mit goldener Kante da. */
.lohnzettel-zeile { width: 100%; border: 0; text-align: left; font: inherit; text-decoration: none; }
.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-hinweis { margin: 0 var(--karte-innen) 8px; overflow-wrap: anywhere; }
/* Chat-Gäste (Bubby, 30.10.2026): Alles → Team → Gäste. Die Häkchen wie bei
den Rechten, ohne eigene Trennlinie; der Satz darunter sagt es in Worten. */
.gast-intro p { margin: 0; }
.gast-intro p + p { margin-top: 6px; }
.gast-kopf-knopf { margin: 4px 0 16px; }
.gast-karte .field-label { margin: 14px 0 0; }
.gast-darf { margin-top: 6px; padding-top: 0; border-top: 0; }
.gast-satz { margin: 8px 0 0; font-size: var(--grad-beschreibung); }
.gast-sprache .field-label select { width: auto; min-width: 10rem; }
.gast-neu .gast-darf { margin-bottom: 4px; }
/* Ohne Foto (Prüfer 4.11.2026): der Anfangsbuchstabe im schwarzen Kreis wie in den Listen; Mein Bereich hat seinen eigenen Kreis. */
.person-avatar:where(:not(.ist-foto)) {
flex: none;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 999px;
background: var(--black);
color: var(--auf-dunkel);
font-size: var(--grad-abschnitt);
}
html.dark .person-avatar:where(:not(.ist-foto)) { background: var(--auf-dunkel); color: var(--black); }
/* Schmale Handys (320 px): die Knöpfe einer Karte rücken in die nächste Zeile statt abgeschnitten zu werden. */
.person-actions { flex-wrap: wrap; }
.person-actions .ghost { flex: 1 1 auto; min-width: 0; }
/* „Mein Monat“ in Mein Bereich (Bubby 5.11.2026): ein Panel wie „Meine Lohnzettel“. Oben die Werte als
Zeilen (kpis-umriss), dann der Monatskopf des Arbeitsplans und je Schicht eine Zeile wie „Meine Woche“:
links Kurztag und Zahl, heute mit Ring, rechts Laden mit seinem Muster, Bereich, Zeit und Stunden.
Urlaub leise. Eigene Klassen, damit die Schreibtisch-Regeln von „Meine Woche“ (sieben Spalten) nicht greifen. */
.me-monat-platz { display: contents; }
.mein-monat .mm-werte { padding: 0 0 4px; }
.mm-kopf { margin: 4px 0 4px; }
.mm-summe {
margin: 0 0 4px;
text-align: center;
font-size: var(--grad-beschreibung);
font-variant-numeric: tabular-nums;
color: var(--muted);
}
.mm-tage { list-style: none; margin: 4px 0 0; padding: 0; }
.mm-tag {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
align-items: center;
gap: 12px;
min-height: 52px;
padding: 6px 4px;
border-bottom: 1px solid var(--line);
}
.mm-tag:last-child { border-bottom: 0; }
.mm-datum {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 4px 0;
border-radius: var(--radius-tight);
}
.mm-kurztag {
font-family: var(--head);
font-size: var(--grad-klein);
font-weight: var(--schnitt-titel);
line-height: 1;
color: var(--muted);
}
.mm-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;
}
.mm-tag.ist-heute .mm-datum { box-shadow: inset 0 0 0 2px var(--ink); }
.mm-tag.ist-heute .mm-kurztag { color: var(--ink); }
.mm-tag.ist-heute .mm-zahl {
width: 1.6em;
height: 1.35em;
border-radius: 999px;
background: var(--ink);
color: var(--card);
}
.mm-was {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 2px 12px;
min-width: 0;
}
.mm-wo { font-weight: var(--schnitt-titel); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.mm-zeit {
font-size: var(--grad-beschreibung);
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--muted);
}
.mm-tag.ist-urlaub .mm-wo { font-weight: var(--schnitt-text); color: var(--muted); }
.mm-tag.ist-urlaub .mm-zahl { color: var(--muted); }
.mm-tag.ist-urlaub.ist-heute .mm-zahl { color: var(--card); }
.mm-block { margin: 16px 0 0; }
.mm-block .alle-klein { margin: 0 0 6px; }
.mm-text { margin: 0; font-size: var(--grad-beschreibung); line-height: var(--lh-body); font-variant-numeric: tabular-nums; }
.mm-ein { white-space: nowrap; }
.mm-urlaub { list-style: none; margin: 0; padding: 0; }
.mm-urlaub li {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 2px 12px;
padding: 6px 0;
border-bottom: 1px solid var(--line);
font-size: var(--grad-beschreibung);
font-variant-numeric: tabular-nums;
}
.mm-urlaub li:last-child { border-bottom: 0; }
.mm-leise { color: var(--muted); white-space: nowrap; }
@media (min-width: 992px) {
.me-layout .mein-monat { grid-column: 1 / -1; }
}
/* ==========================================================================
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; }
/* Blatt nach unten wegwischen (1.11.2026): der Hintergrund wird mit dem
Blatt heller (--wisch 0 bis 1); beim Loslassen gleitet er mit. */
.sheet-scrim.ist-gewischt { background: rgba(29, 28, 28, calc(0.5 - var(--wisch, 0) * 0.5)); }
.arbeitsplan-detail-scrim.ist-gewischt { opacity: calc(1 - var(--wisch, 0)); }
.ist-gewischt.ist-gleitet { transition: background-color 180ms ease-out, opacity 180ms ease-out; }
.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); }
}
/* Ein Blatt fährt nur beim Öffnen einmal herein (3.11.2026). Steht es schon da,
trägt es „ist-da“ (blaetterStehenLassen): ein Neuzeichnen oder der Neuaufbau
nach der Tastatur (sichtHeilen) startet die Animation sonst neu, das Blatt
sprang 2–3 Mal nach unten und wieder hoch (Bubby, iPhone, Heute). */
.sheet.ist-da { animation: none; }
@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%; }
/* „Bubby Chat“ am iPhone (Bubby, 2.11.2026): das Symbol der Chat-App, der Weg dorthin
und darunter „Trotzdem hier öffnen“ (der Chat in Denis Kebap). */
.bubby-blatt-inhalt { display: flex; align-items: center; gap: 14px; }
.bubby-blatt-inhalt .chat-symbol { flex: none; width: 56px; height: 56px; }
.bubby-blatt-inhalt p { margin: 0; font-size: var(--grad-text); line-height: 1.4; }
.bubby-blatt .modal-actions { margin-top: 18px; }
.bubby-blatt .modal-actions .ghost { width: 100%; }
/* ==========================================================================
Cockpit (Bubby 5.11.2026, nur Admins, mit Cockpit-PIN): großzügige Übersicht
beider Läden, seit Bubby 10.11.2026 das Blatt „Dashboard“ 1:1: Privatentnahme,
Zeitraum-Wahl, Kacheln je Zeile, Teig, Monate; zugeklappt die Tage
(früher „Tageskassa“). ± in Kräuter (mehr als im Vorjahr) und Paprika (weniger),
negatives Trinkgeld in Paprika: Ausnahmen der Farbregel (Konrad 28.10. und
5.11.2026). Neusiedl Schwarz, Bruck Gold wie überall.
========================================================================== */
.ck-seite { display: grid; gap: var(--abstand-gross); padding-bottom: var(--abstand-gross); }
.ck-seite > .panel { margin: 0; }
.ck-leise { display: block; margin: 2px 0 0; font-size: var(--grad-klein); font-weight: var(--schnitt-text); line-height: var(--lh-body); color: var(--muted); }
.ck-fehler { margin: 12px 0 0; color: var(--danger); font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); line-height: var(--lh-body); }
.ck-meldung { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-btn); background: var(--band); font-size: var(--grad-beschreibung); line-height: var(--lh-body); }
/* ── Gesperrt ────────────────────────────────────────────────────────── */
.ck-seite > .ck-schloss { width: 100%; max-width: 560px; margin-inline: auto; }
.ck-schloss .panel-inner { padding: calc(var(--karte-innen) + 8px) var(--karte-innen) var(--karte-innen); }
.ck-schloss-ico {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 999px;
background: var(--band);
color: var(--ink);
}
.ck-schloss h2 { margin: 14px 0 0; padding: 0; font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-stark); }
.ck-satz { margin: 6px 0 0; font-size: var(--grad-text); line-height: var(--lh-body); }
.ck-schloss #ck-herkunft { margin-top: var(--abstand); }
.ck-neu { margin-top: var(--abstand); }
.primary.ck-neu { width: 100%; }
/* Zahlenfeld mittig unter dem Satz; Abbrechen und „PIN vergessen?“ in voller Breite darunter. */
.ck-schloss .zahlenfeld { margin-top: var(--abstand-gross); }
.ck-abbrechen { width: 100%; margin-top: var(--abstand); }
.ck-pin-aendern { display: flex; justify-content: center; }
.ck-pin-aendern .zweitknopf { margin: 0; }
/* Handy: Sinnbild weg, Abstände knapper, damit Satz, Kästchen und Tastenfeld über der Leiste auf einen Bildschirm passen (auch 320 × 568). */
@media (max-width: 991px) {
.ck-schloss .panel-inner { padding: var(--karte-innen) var(--rand) var(--rand); }
.ck-schloss-ico { display: none; }
.ck-schloss h2 { margin-top: 0; }
.ck-schloss .zahlenfeld { margin-top: var(--abstand); }
.ck-satz { font-size: var(--grad-beschreibung); }
}
/* ── Offen: Leiste oben, Stand ───────────────────────────────────────── */
.ck-offen-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ck-offen-leiste p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--grad-beschreibung); color: var(--muted); }
.ck-offen-ico { display: inline-flex; color: var(--muted); }
.ck-offen-ico .ico { width: 18px; height: 18px; }
.ck-offen-leiste .ghost { flex: 0 0 auto; min-height: 44px; }
.ck-stand { margin: calc(var(--abstand-klein) * -1) 0 0; font-size: var(--grad-klein); line-height: var(--lh-body); color: var(--muted); }
.ck-alt { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--ink); font-weight: var(--schnitt-titel); }
.ck-alt .ico { width: 14px; height: 14px; }
.ck-wartet { min-height: 240px; }
/* ± zum Vorjahr */
.ck-pm { font-family: var(--head); font-weight: var(--schnitt-stark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-pm.ist-mehr { color: var(--kraeuter); }
.ck-pm.ist-weniger { color: var(--paprika); }
.ck-pm.ist-leer { color: var(--muted); font-weight: var(--schnitt-text); }
.ck-kapsel { padding: 3px 10px; border-radius: 999px; background: var(--band); color: var(--ink); font-size: var(--grad-klein); }
.ck-kapsel.ist-mehr { background: var(--kraeuter-zart); color: var(--kraeuter); }
.ck-kapsel.ist-weniger { background: var(--paprika-zart); color: var(--paprika); }
/* ── Überblick: das Blatt „Dashboard“ 1:1 (Bubby 10.11.2026) ─────────────
Oben „Für Privatentnahme verfügbar“ als schwarze Heldenkarte, dann die Zeitraum-Wahl und je Zeile des Blocks
eine Kachel (Handy 2, ab 700 px 4 Spalten), die Teig-Zeilen und die Monate. */
/* Heldenkarte: Schwarz mit goldener Kante und goldenem Schein, wie die Heldenkachel auf „Heute“. */
.ck-held {
container-type: inline-size;
margin: 0;
padding: 18px 18px 20px;
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 .ck-held { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), var(--kante-gold); }
.ck-held-titel {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gold);
}
.ck-held-titel span { margin-top: 4px; font-size: var(--grad-klein); font-weight: var(--schnitt-titel); letter-spacing: 0; text-transform: none; color: var(--auf-dunkel-leise); }
.ck-held-was { margin: 18px 0 0; font-size: var(--grad-beschreibung); color: var(--auf-dunkel-leise); }
.ck-held-wert {
margin: 2px 0 0;
font-family: var(--head);
font-size: min(var(--grad-held), calc(100cqi / 7));
font-weight: var(--schnitt-stark);
line-height: var(--lh-tight);
letter-spacing: -.03em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ck-held-vj { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0; font-size: var(--grad-beschreibung); color: var(--auf-dunkel-leise); font-variant-numeric: tabular-nums; }
.ck-held-laeden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--dark-row); }
.ck-held-laden { min-width: 0; }
.ck-held-laden-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--grad-klein); font-weight: var(--schnitt-titel); color: var(--auf-dunkel-leise); }
.ck-held-laden-wert { margin: 6px 0 0; font-family: var(--head); font-size: min(var(--grad-karte), calc(100cqi / 13)); font-weight: var(--schnitt-stark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-held-laden-vj { margin: 6px 0 0; font-size: var(--grad-klein); color: var(--auf-dunkel-leise); font-variant-numeric: tabular-nums; }
/* Auf Schwarz ist Neusiedl Beige (wie in Dunkel), Bruck Gold. */
.ck-held .ck-punkt.ist-neusiedl { background: var(--auf-dunkel); }
.ck-balken { display: block; height: 6px; margin-top: 8px; border-radius: 999px; background: var(--dark-row); overflow: hidden; }
.ck-balken > span { display: block; width: var(--anteil); height: 100%; border-radius: 999px; background: var(--auf-dunkel); }
.ck-held-laden.ist-bruck .ck-balken > span { background: var(--gold); }
/* ± auf Schwarz: dieselben Kapseln wie auf Dunkel. */
.ck-held .ck-kapsel { background: var(--dark-row); color: var(--auf-dunkel); }
.ck-held .ck-kapsel.ist-mehr { background: var(--kraeuter-zart-auf-dunkel); color: var(--kraeuter-auf-dunkel); }
.ck-held .ck-kapsel.ist-weniger { background: var(--paprika-zart-auf-dunkel); color: var(--paprika-auf-dunkel); }
.ck-held-wert.tk-minus, .ck-held-laden-wert.tk-minus { color: var(--paprika-auf-dunkel); }
.ck-zeitwahl .chip { min-height: 44px; }
.ck-zeitraum { margin: calc(var(--abstand) * -1) 0 0; font-size: var(--grad-klein); line-height: var(--lh-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.ck-sechs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-klein); }
@media (min-width: 700px) {
.ck-sechs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abstand); }
}
.ck-wert {
container-type: inline-size;
display: flex;
flex-direction: column;
min-width: 0;
margin: 0;
padding: 14px;
border-radius: var(--radius);
background: var(--card);
color: var(--ink);
box-shadow: var(--kante);
}
@media (min-width: 700px) { .ck-wert { padding: var(--karte-innen); } }
html.dark.black .ck-wert { box-shadow: inset 0 0 0 1px var(--line), var(--kante); }
.ck-seite .ck-wert-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin: 0; padding: 0; font: inherit; }
.ck-wert-name { min-width: 0; font-family: var(--head); font-size: var(--grad-beschreibung); font-weight: var(--schnitt-stark); line-height: var(--lh-tight); }
.ck-wert-zahl {
margin: auto 0 0;
padding-top: 12px;
font-family: var(--head);
font-size: min(var(--grad-zahl), calc(100cqi / 7));
font-weight: var(--schnitt-stark);
line-height: var(--lh-tight);
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ck-wert-vj { margin: 2px 0 0; font-size: min(var(--grad-klein), calc(100cqi / 11)); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Anteil beider Läden: Neusiedl Schwarz (in Dunkel Beige), Bruck Gold. */
.ck-anteil { display: flex; gap: 2px; height: 6px; margin-top: 10px; border-radius: 999px; overflow: hidden; }
.ck-anteil > .ist-neusiedl { flex: 0 0 auto; width: var(--anteil); background: var(--black); }
.ck-anteil > .ist-bruck { flex: 1 1 auto; background: var(--gold); }
html.dark .ck-anteil > .ist-neusiedl { background: var(--auf-dunkel); }
.ck-wert-laeden { display: grid; gap: 2px; margin: 8px 0 0; }
.ck-wl { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: min(var(--grad-klein), calc(100cqi / 11)); font-variant-numeric: tabular-nums; }
.ck-wl .ck-punkt { width: 8px; height: 8px; }
.ck-wl-zahl { font-weight: var(--schnitt-titel); white-space: nowrap; }
.ck-wl-pm { margin-left: auto; font-size: inherit; }
@container (max-width: 139px) { .ck-wl-pm { display: none; } }
html.dark .ck-wl .ck-punkt.ist-neusiedl { background: var(--auf-dunkel); }
/* Teig-Zeilen des Blocks (ohne Vorjahr) */
.ck-rest-liste { display: grid; gap: 0; margin: 4px 0 0; }
.ck-rest-liste > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line-card); }
.ck-rest-liste > div:last-child { border-bottom: 0; }
.ck-rest-liste dt { font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); }
.ck-rest-liste dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; font-variant-numeric: tabular-nums; }
.ck-rest-z { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); }
.ck-rest-liste .ck-wl { font-size: var(--grad-klein); color: var(--muted); }
@media (forced-colors: active) {
.ck-wert { border: 1px solid CanvasText; }
}
/* ── Abschnitte ──────────────────────────────────────────────────────── */
.ck-abschnitt .panel-inner { padding: var(--karte-innen); }
/* .ck-seite davor: sonst gewinnt der Innenabstand von „.panel h2“ (Titel rückte ein). */
.ck-seite .ck-abschnitt-kopf { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0 0 8px; padding: 0; font-family: var(--head); font-size: var(--grad-abschnitt); }
.ck-abschnitt-kopf strong { display: block; font-weight: var(--schnitt-stark); line-height: var(--lh-tight); }
.ck-abschnitt-ico {
display: inline-grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
border-radius: 999px;
background: var(--band);
color: var(--ink);
}
.ck-abschnitt-ico .ico { width: 20px; height: 20px; }
/* Aufklappen (Tage, alle Monate) */
.ck-klapp > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 44px;
padding: var(--karte-innen);
list-style: none;
cursor: pointer;
border-radius: var(--radius);
}
.ck-klapp > summary::-webkit-details-marker { display: none; }
.ck-klapp > summary .ck-abschnitt-kopf { margin: 0; }
.ck-klapp > summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }
.ck-klapp-pfeil { display: inline-flex; color: var(--muted); transition: transform .2s ease; }
.ck-klapp[open] .ck-klapp-pfeil { transform: rotate(90deg); }
.ck-klapp > .panel-inner { padding: 0 var(--karte-innen) var(--karte-innen); }
@media (prefers-reduced-motion: reduce) { .ck-klapp-pfeil { transition: none; } }
/* Zeilen am Handy (Bubby 10.11.2026): oben Name mit Vorjahr und ±, darunter Neusiedl · Bruck · Zusammen
in drei gleichen Spalten unter dem Spaltenkopf; ab 640 px Kastenbreite als Tabelle. */
.ck-tabelle { container-type: inline-size; }
.ck-spaltenkopf {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 10px;
padding: 0 0 8px;
border-bottom: 1px solid var(--line-card);
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gold-klein);
}
.ck-spaltenkopf > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ck-spaltenkopf > span:last-child { justify-content: flex-end; }
.ck-zeile {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-areas: "label label pm" "n b z";
gap: 6px 10px;
padding: 12px 0;
border-bottom: 1px solid var(--line-card);
font-variant-numeric: tabular-nums;
}
.ck-zeile:last-child { border-bottom: 0; }
/* Die Kopfzeile steht nur in der Tabelle (breit); am Handy steht der Spaltenkopf einmal oben. */
.ck-zeile.ck-kopfzeile { display: none; }
.ck-zelle { min-width: 0; }
.ck-zelle.ist-label { grid-area: label; font-weight: var(--schnitt-titel); font-size: var(--grad-beschreibung); line-height: var(--lh-tight); }
.ck-vj-klein { margin-top: 3px; font-weight: var(--schnitt-text); }
.ck-zelle.ist-pm { grid-area: pm; text-align: right; align-self: start; }
.ck-zelle.ist-n { grid-area: n; }
.ck-zelle.ist-b { grid-area: b; }
.ck-zelle.ist-z { grid-area: z; text-align: right; font-weight: var(--schnitt-stark); }
.ck-zelle.ist-vj { display: none; }
/* Die Zahl bricht nie; wird es eng (320 px), wird sie kleiner. */
.ck-zelle:is(.ist-n, .ist-b, .ist-z) { font-family: var(--head); font-size: min(var(--grad-beschreibung), calc(100cqi / 19)); }
.ck-zelle:is(.ist-n, .ist-b) { font-weight: var(--schnitt-titel); }
.ck-zahl { white-space: nowrap; }
.ck-was { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@container (min-width: 640px) {
.ck-spaltenkopf, .ck-vj-klein { display: none; }
.ck-zelle.ist-vj { display: block; }
.ck-kopfzeile,
.ck-zeile {
grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)) 64px;
grid-template-areas: none;
align-items: baseline;
padding: 12px 0;
}
.ck-zeile.ck-kopfzeile {
display: grid;
padding: 0 0 8px;
border-bottom: 1px solid var(--line-card);
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gold-klein);
}
.ck-kopfzeile .ck-zelle:not(.ist-label) { text-align: right; }
.ck-zelle { grid-area: auto !important; text-align: right; font-size: var(--grad-beschreibung); }
.ck-zelle.ist-label { text-align: left; }
.ck-zelle.ist-z { font-size: var(--grad-karte); }
.ck-zelle:is(.ist-vj, .ist-n, .ist-b) { font-size: var(--grad-beschreibung); }
.ck-zelle.ist-vj { color: var(--muted); }
.ck-was { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* ── Monate (Säulen aus dem Block „MONATE“) ─────────────────────────── */
.ck-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--grad-klein); color: var(--muted); }
.ck-legende li { display: inline-flex; align-items: center; gap: 6px; }
.ck-punkt { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 999px; background: var(--black); }
.ck-punkt.ist-bruck { background: var(--gold); }
.ck-punkt.ist-vj { width: 16px; height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--ink); }
html.dark .ck-punkt.ist-neusiedl { background: var(--auf-dunkel); }
.ck-flaeche { position: relative; height: 280px; margin-top: var(--abstand); container-type: inline-size; }
@media (min-width: 992px) { .ck-flaeche { height: 360px; } }
.ck-gitter { position: absolute; inset: 8px 6px 34px 46px; pointer-events: none; }
.ck-gitter span { position: absolute; left: 0; right: 0; bottom: var(--hoehe); border-top: 1px solid var(--line); }
.ck-gitter b {
position: absolute;
right: calc(100% + 6px);
top: 0;
transform: translateY(-50%);
font-size: var(--grad-marke);
font-weight: var(--schnitt-titel);
color: var(--muted);
white-space: nowrap;
}
.ck-saeulen { position: absolute; inset: 8px 6px 0 46px; display: flex; }
.ck-saeule {
display: grid;
grid-template-rows: minmax(0, 1fr) 34px;
flex: 1 1 0;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--radius-tight);
background: none;
color: inherit;
font: inherit;
cursor: pointer;
touch-action: manipulation;
}
.ck-saeule:focus-visible { outline: 3px solid var(--fokus); outline-offset: 0; }
.ck-stapel { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-height: 0; }
.ck-teil { flex: 0 0 auto; width: min(64%, 30px); height: var(--hoehe); background: var(--black); }
.ck-teil.ist-bruck { background: var(--gold); border-radius: var(--radius-tight) var(--radius-tight) 0 0; }
html.dark .ck-teil.ist-neusiedl { background: var(--auf-dunkel); }
/* Vorjahr: ein Strich über der Säule, mit Kartengrund darunter, damit er auf Schwarz und Gold steht. */
.ck-vj {
position: absolute;
left: 50%;
bottom: var(--hoehe);
width: min(84%, 40px);
height: 0;
transform: translateX(-50%);
border-top: 2px dashed var(--ink);
box-shadow: 0 -2px 0 0 var(--card), 0 2px 0 0 var(--card);
}
.ck-saeule-name {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 6px;
font-size: var(--grad-marke);
font-weight: var(--schnitt-titel);
line-height: 1.15;
color: var(--muted);
}
.ck-saeule-name span { font-weight: var(--schnitt-text); }
.ck-saeule.ist-gewaehlt .ck-saeule-name { color: var(--ink); font-weight: var(--schnitt-stark); }
.ck-saeule.ist-gewaehlt .ck-stapel::after {
content: "";
position: absolute;
left: 50%;
bottom: -4px;
width: min(64%, 30px);
height: 3px;
transform: translateX(-50%);
border-radius: 999px;
background: var(--ink);
}
@media (hover: hover) {
.ck-saeule:hover .ck-saeule-name { color: var(--ink); }
}
/* Sehr schmal (320 px): nur jeder zweite Monatsname; den gewählten zeigt die Zeile unter dem Diagramm. */
@container (max-width: 340px) {
.ck-saeule:nth-child(even) .ck-saeule-name { visibility: hidden; }
}
.ck-auswahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: var(--abstand-gross) 0 0; padding-top: var(--abstand); border-top: 1px solid var(--line-card); }
@media (min-width: 700px) { .ck-auswahl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ck-auswahl-monat { grid-column: 1 / -1; }
.ck-auswahl dt { display: flex; align-items: center; gap: 6px; font-size: var(--grad-klein); color: var(--muted); }
.ck-auswahl dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 3px 0 0; font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ── Tage (früher Seite „Tageskassa“) ───────────────────────────────── */
.tk-wahl { margin-bottom: var(--abstand); }
.tk-tabelle {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.tk-tabelle thead th {
padding: 0 0 8px;
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gold-klein);
text-align: right;
border-bottom: 1px solid var(--line-card);
}
.tk-tabelle thead th:first-child,
.tk-tabelle tbody th { text-align: left; }
.tk-tabelle tbody th,
.tk-tabelle td {
padding: 10px 0;
border-bottom: 1px solid var(--line-card);
font-size: var(--grad-karte);
vertical-align: middle;
}
.tk-tabelle tbody tr:last-child th,
.tk-tabelle tbody tr:last-child td { border-bottom: 0; }
.tk-tabelle td {
text-align: right;
font-family: var(--head);
font-weight: var(--schnitt-titel);
white-space: nowrap;
padding-left: 12px;
}
.tk-tabelle td:nth-child(2) { width: 38%; }
.tk-tabelle td:nth-child(3) { width: 24%; }
.tk-tabelle tbody th { font-weight: var(--schnitt-titel); }
.tk-tag { font-family: var(--head); white-space: nowrap; }
.tk-wort {
display: inline-block;
margin-left: 8px;
font-size: var(--grad-klein);
font-weight: var(--schnitt-text);
color: var(--muted);
}
.tk-tabelle tr.ist-leer .tk-tag { color: var(--muted); }
.tk-tabelle tr.ist-frisch th,
.tk-tabelle tr.ist-frisch td { background: var(--band); }
.tk-tabelle tr.ist-frisch th { border-radius: var(--radius-tight) 0 0 var(--radius-tight); padding-left: 10px; }
.tk-tabelle tr.ist-frisch td:last-child { border-radius: 0 var(--radius-tight) var(--radius-tight) 0; padding-right: 10px; }
.tk-tabelle tr.ist-frisch .tk-wort {
padding: 2px 8px;
border-radius: 999px;
background: var(--gold);
color: var(--black);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
text-transform: uppercase;
letter-spacing: .06em;
}
.tk-leer { color: var(--muted); font-weight: var(--schnitt-text); }
/* Brot-Zählung: ein Teil des Tages fehlt noch, kein Trinkgeld (1.11.2026). */
.tk-offen { color: var(--muted); font-size: var(--grad-klein); font-weight: var(--schnitt-titel); }
.tk-minus { color: var(--paprika); }
/* Summen: drei Felder auf dem Band, am Handy untereinander, breit nebeneinander. */
.tk-summen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--abstand-klein); margin-top: var(--abstand); }
.tk-summe { padding: 14px 16px; border-radius: var(--radius-btn); background: var(--band); container-type: inline-size; }
.tk-summe h3 {
margin: 0;
font-family: var(--head);
font-size: var(--grad-karte);
font-weight: var(--schnitt-stark);
}
.tk-leise { margin: 2px 0 0; font-size: var(--grad-klein); color: var(--muted); }
.tk-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 124px), 1fr)); gap: 8px 16px; margin: 12px 0 8px; }
.tk-werte dt { font-size: var(--grad-klein); color: var(--muted); }
.tk-werte dd {
margin: 2px 0 0;
font-family: var(--head);
font-size: min(var(--grad-zahl), calc(100cqi / 9));
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
white-space: nowrap;
}
.tk-werte dd .tk-leer { font-weight: var(--schnitt-stark); }
.tk-hinweis { margin: var(--abstand) 0 0; font-size: var(--grad-klein); line-height: var(--lh-body); color: var(--muted); }
.tk-probleme { padding-left: 18px; }
/* ── Gemini-Kosten (geschätzt, 6.11.2026) ────────────────────────────────
Oben drei Summen (dieser Monat seit dem 1. schwarz wie die Heldenkachel),
darunter je Bereich Heute, Monat, Vormonat; am Handy die drei Zahlen unter
dem Namen, ab 560 px Kastenbreite als Tabelle. */
.gk-summen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--abstand-klein); margin-top: var(--abstand); }
.gk-summe { padding: 14px 16px; border-radius: var(--radius-btn); background: var(--band); container-type: inline-size; }
.gk-summe.ist-held {
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 .gk-summe.ist-held { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), var(--kante-gold); }
.gk-summe h3 { display: flex; flex-direction: column; margin: 0; font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); line-height: var(--lh-tight); }
.gk-summe h3 span { margin-top: 3px; font-size: var(--grad-klein); font-weight: var(--schnitt-titel); color: var(--muted); }
.gk-summe.ist-held h3 { color: var(--gold); }
.gk-summe.ist-held h3 span, .gk-summe.ist-held .gk-anzahl { color: var(--auf-dunkel-leise); }
.gk-wert {
margin: 12px 0 0;
font-family: var(--head);
font-size: min(var(--grad-zahl), calc(100cqi / 7));
font-weight: var(--schnitt-stark);
line-height: var(--lh-tight);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.gk-anzahl { display: block; margin: 2px 0 0; font-size: var(--grad-klein); color: var(--muted); font-variant-numeric: tabular-nums; }
.gk-tabelle { margin-top: var(--abstand); container-type: inline-size; }
.gk-zeile {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px 12px;
padding: 14px 0;
border-bottom: 1px solid var(--line-card);
font-variant-numeric: tabular-nums;
}
.gk-zeile:last-child { border-bottom: 0; }
.gk-zeile.gk-kopfzeile { display: none; }
.gk-name { grid-column: 1 / -1; font-weight: var(--schnitt-titel); font-size: var(--grad-beschreibung); }
.gk-name span { margin-left: 8px; font-size: var(--grad-klein); font-weight: var(--schnitt-text); color: var(--muted); }
.gk-zelle { min-width: 0; }
.gk-zelle.ist-leer { grid-column: 1 / -1; font-size: var(--grad-klein); color: var(--muted); }
.gk-was { display: block; font-size: var(--grad-klein); color: var(--muted); }
.gk-euro { display: block; font-family: var(--head); font-weight: var(--schnitt-stark); white-space: normal; }
.gk-euro.ist-null { font-weight: var(--schnitt-text); color: var(--muted); }
@container (min-width: 560px) {
.gk-zeile { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); align-items: baseline; padding: 12px 0; }
.gk-zeile.gk-kopfzeile {
display: grid;
padding: 0 0 8px;
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gold-klein);
}
.gk-name { grid-column: auto; }
.gk-kopfzeile .gk-name { font-size: inherit; font-weight: inherit; }
.gk-zelle { text-align: right; }
.gk-zelle.ist-leer { grid-column: 2 / -1; }
.gk-was { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* Sehr wenig Höhe (320 × 568): beim Eingeben stehen nur Kästchen und Tastenfeld da, „Gesperrt“ und der Satz
nur für Vorleseprogramme; Kästchen und Tasten sagen es schon, und das Plus der Leiste deckt die 0 nicht zu. */
@media (max-width: 991px) and (max-height: 640px) {
.ck-schloss .panel-inner { padding-top: var(--rand); padding-bottom: 12px; }
.ck-schloss.ist-eingabe h2, .ck-schloss.ist-eingabe .ck-satz { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.ck-schloss.ist-eingabe .zahlenfeld { margin-top: 0; }
/* Woher der PIN kommt, steht auch in „Bubby · Hilfe“. */
.ck-schloss.ist-eingabe #ck-herkunft { display: none; }
}
/* ==========================================================================
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
========================================================================== */
/* Dieselben Bausteine wie Kassa; hier drei eigenständige Zahlen statt Geldfluss-Pfeilen. */
@media (min-width: 992px) {
.steuer-hero .kassa-hero-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.steuer-hero .steuer-monat-nav { margin-top: var(--abstand); font-size: var(--grad-klein); }
.steuer-monat-nav .icon-btn {
width: 44px;
height: 44px;
color: var(--auf-dunkel);
background: transparent;
border-color: var(--auf-dunkel-leise);
}
.steuer-monat-nav .icon-btn:not(:disabled):hover { background: var(--dark-row); border-color: var(--auf-dunkel); }
.steuer-monat-nav .icon-btn:disabled { color: var(--disabled-ink); border-color: var(--dark-row); }
/* Auch lange Jahreszeilen behalten am kleinen Handy Name und genau einen Betrag
nebeneinander. Der Schriftgrad folgt der verfügbaren Zeile, wie bei Kassa-Summen. */
.steuer-karten .kassa-line, .steuer-karten .kassa-total { container-type: inline-size; }
.steuer-karten .kassa-line > span, .steuer-karten .kassa-total > span {
font-size: min(var(--grad-text), calc((100cqi - 12px) / 20));
white-space: nowrap;
}
.kassa-grid.steuer-karten .kassa-line > span, .kassa-grid.steuer-karten .kassa-total > span {
font-size: min(var(--grad-text), calc((100cqi - 12px) / 16));
}
/* 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; }
/* 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 und weniger gezaehlt, Safran mehr gezaehlt
(jedes Minus rot, jedes Plus gelb, Bubby 15.11.2026).
========================================================================== */
.getraenke-seite {
--getraenke-kontrast: var(--black);
--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-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);
/* „5 fajta hiányzik, 1 fajtából több van“ passt bei 320 px nicht in eine Zeile. */
max-width: 100%;
text-wrap: balance;
}
.getraenke-ampel .ico { width: 16px; height: 16px; }
.getraenke-ampel.ist-ok { background: var(--kraeuter-zart); color: var(--kraeuter); }
.getraenke-ampel.ist-fehlt { background: var(--paprika); color: var(--auf-paprika); }
.getraenke-ampel.ist-mehr { background: var(--safran-flaeche); color: var(--auf-safran); }
.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); }
/* Wer heute gezählt hat (Bubby 15.11.2026): ruhige Zeile mit Haken in Kräuter. */
.getraenke-kopf-status { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); line-height: var(--lh-body); color: var(--auf-dunkel); }
.getraenke-kopf-status .mark { flex: none; width: 20px; height: 20px; color: var(--auf-dunkel-leise); }
.getraenke-kopf-status .mark svg { width: 100%; height: 100%; }
.getraenke-kopf-status.ist-gezaehlt .mark { color: var(--kraeuter-auf-dunkel); }
.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-fehlt { background: var(--paprika); color: var(--auf-paprika); }
.getraenke-marke.ist-mehr { background: var(--safran-flaeche); color: var(--auf-safran); }
.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-feld); 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);
}
/* Speichern (Bubby 15.11.2026): bestätigt grün in Kräuter mit Uhrzeit, Fehler rot in Paprika. */
.getraenke-meldung:is(.ist-gespeichert, .ist-fehler) { border-width: 2px; }
.getraenke-meldung.ist-gespeichert { display: flex; align-items: flex-start; gap: 10px; border-color: var(--kraeuter); background: var(--kraeuter-zart); font-size: var(--grad-text); }
.getraenke-meldung.ist-gespeichert b { display: block; font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); color: var(--kraeuter); }
.getraenke-meldung.ist-fehler { border-color: var(--paprika); background: var(--paprika-zart); }
.getraenke-meldung.ist-fehler > p { display: flex; align-items: flex-start; gap: 10px; }
.getraenke-meldung:is(.ist-gespeichert, .ist-fehler) .mark { flex: none; width: 24px; height: 24px; color: var(--kraeuter); }
.getraenke-meldung.ist-fehler .mark { color: var(--paprika); }
.getraenke-meldung .mark svg { width: 100%; height: 100%; }
.getraenke-meldung.ist-fehler .ghost { width: 100%; margin-top: 4px; }
.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; }
/* Danach folgen Monate und Wochen: gleicher Abstand wie zwischen Karten. */
.fleisch-lieferungen { margin-bottom: var(--abstand); }
/* 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-feld);
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; }
}
/* ==========================================================================
Gezielt tauschen (Bubby, 30.10.2026): das Blatt unter Plus (Schicht, Person,
Art, Gegen-Schicht, Satz), die zweite Hälfte der Chat-Karte beim Tausch und
die Karte „Schicht-Tausch“ oben auf Heute (Admins). Nur vorhandene
Bausteine: Zeilen wie im Plus-Blatt, Pillen, Knöpfe, Felder.
========================================================================== */
.tausch-blatt .sheet-body { display: grid; gap: 12px; }
.tausch-frage { margin: 4px 0 0; }
.tausch-hinweis,
.tausch-leise { margin: 0; font-size: var(--grad-beschreibung); line-height: var(--lh-body); }
.tausch-liste { display: flex; flex-direction: column; }
.tausch-option {
--fokus-abstand: -4px;
display: grid;
grid-template-columns: 56px 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;
cursor: pointer;
}
.tausch-liste > .tausch-option:first-child { border-top: 0; }
@media (hover: hover) {
.tausch-option:hover:not(:disabled) { background: var(--row-hover); }
}
.tausch-option:disabled { cursor: not-allowed; color: var(--muted); }
.tausch-option .neu-ico,
.tausch-option .tausch-bild { justify-self: center; }
.tausch-option:disabled .neu-ico { background: var(--disabled-face); color: var(--disabled-ink); }
.tausch-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tausch-text strong { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.tausch-text span { color: var(--muted); font-size: var(--grad-klein); font-variant-numeric: tabular-nums; }
.tausch-pfeil { display: inline-flex; color: var(--muted); }
.tausch-pfeil .ico { width: 20px; height: 20px; }
/* Der Tag als kleiner Kasten: Wochentag über dem Datum. */
.tausch-datum {
display: grid;
justify-items: center;
align-content: center;
width: 56px;
min-height: 48px;
border-radius: var(--radius-tight);
background: var(--band);
font-variant-numeric: tabular-nums;
line-height: var(--lh-tight);
}
.tausch-datum small { font-size: var(--grad-marke); font-weight: var(--schnitt-stark); text-transform: uppercase; color: var(--muted); }
.tausch-datum b { font-family: var(--head); font-size: var(--grad-beschreibung); font-weight: var(--schnitt-stark); }
.tausch-option:disabled .tausch-datum { color: var(--muted); }
/* Was schon gewählt ist: Wort, Wert, „Ändern“. */
.tausch-gewaehlt { margin: 0; display: grid; gap: 0; border-radius: var(--radius-btn); background: var(--band); padding: 4px 12px; }
.tausch-gewaehlt > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.tausch-gewaehlt > div:first-child { border-top: 0; }
.tausch-gewaehlt dt { grid-column: 1; font-size: var(--grad-marke); font-weight: var(--schnitt-stark); text-transform: uppercase; color: var(--muted); }
.tausch-gewaehlt dd { grid-column: 1; margin: 0; font-weight: var(--schnitt-titel); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tausch-gewaehlt .text-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-height: 44px; }
.tausch-satz { display: grid; gap: 6px; font-weight: var(--schnitt-titel); }
.tausch-satz textarea { width: 100%; }
.tausch-fertig { display: grid; gap: 8px; }
.tausch-fertig p { margin: 0; }
.tausch-fertig-satz { display: flex; align-items: center; gap: 8px; font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); }
.tausch-fertig-satz .ico { width: 22px; height: 22px; flex: none; color: var(--kraeuter); }
/* Chat-Karte beim Tausch: zwei Hälften, je wer übernimmt. */
.chat-tausch-teil { margin-top: 6px; }
.chat-tausch-teil + .chat-tausch-teil { padding-top: 6px; border-top: 1px solid var(--line); }
.chat-blase.ist-eigen .chat-tausch-teil + .chat-tausch-teil { border-top-color: var(--dark-row); }
.chat-tausch-wer { font-size: var(--grad-klein) !important; font-weight: var(--schnitt-stark); }
/* Heute (Admins): wer übernimmt was. */
.tausch-zeilen { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.tausch-zeilen li { display: grid; gap: 2px; }
.tausch-wer { font-size: var(--grad-klein); font-weight: var(--schnitt-stark); color: var(--muted); }
.tausch-was { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Wer was will (Bubby 10.11.2026): wer fragt Safran (wartet), wer Ja gesagt hat Kräuter. */
.tausch-rolle { display: inline-block; justify-self: start; padding: 0 8px; border-radius: 999px; font-weight: var(--schnitt-stark); }
.tausch-rolle.ist-fragt { background: var(--safran-zart); color: var(--safran); }
.tausch-rolle.ist-ja { background: var(--kraeuter-zart); color: var(--kraeuter); }
.tausch-rollen { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px !important; font-size: var(--grad-klein); color: var(--muted); }
.tausch-sonst { font-size: var(--grad-beschreibung); color: var(--muted); overflow-wrap: anywhere; }
.tausch-sonst-bereich { white-space: nowrap; }
/* Der Satz von A auf Deutsch, unter dem Original nach feiner Linie (wie die Übersetzung im Chat). */
.tausch-satz-de { margin-top: 6px !important; padding-top: 6px; border-top: 1px solid var(--line); font-size: var(--grad-beschreibung); overflow-wrap: anywhere; }
.tausch-satz-marke { display: block; font-size: var(--grad-marke); font-weight: var(--schnitt-stark); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-klein); }
.tausch-admin-eintrag .pill .ico { width: 14px; height: 14px; }
.tausch-admin-eintrag .pinnwand-knoepfe { margin-top: 10px; }
/* „Zuletzt entschieden“ (Bubby 4.11.2026): Meldung und Fehler mit etwas Luft über dem Satz davor. */
.frei-zeile.tausch-admin-eintrag .frei-meldung,
.frei-zeile.tausch-admin-eintrag .error { margin-top: 8px; }
/* ==========================================================================
Offene Schichten (Bubby/Konrad 3.11.2026): das Blatt unter Plus (Plätze
mit „?“ im Plan, Übernehmen, Zurückziehen) und die Karte „Offene
Schichten“ oben auf Heute (Admins). Nur vorhandene Bausteine: der
Datumskasten vom Tausch, Pillen, Knöpfe, Hinweisfeld.
========================================================================== */
.offen-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.offen-zeile {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 12px 2px;
border-top: 1px solid var(--line);
}
.offen-liste > .offen-zeile:first-child { border-top: 0; }
.offen-inhalt { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.offen-inhalt p { margin: 0; }
.offen-was { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.offen-was strong { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-stark); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.offen-was span { color: var(--muted); font-size: var(--grad-klein); font-variant-numeric: tabular-nums; }
.offen-inhalt .compact-btn .ico { width: 18px; height: 18px; }
.offen-zurueck { min-height: 44px; }
.offen-klein { font-size: var(--grad-klein); }
.offen-leer { margin: 0; font-weight: var(--schnitt-titel); }
/* Heute (Admins): je gemeldete Person eine Zeile mit Ablehnen und Genehmigen. */
.offen-schicht { margin-top: 4px !important; }
.offen-admin-eintrag .frei-woche { margin-top: 10px; }
.offen-personen { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
.offen-personen li {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
align-items: center;
column-gap: 12px;
row-gap: 8px;
padding: 10px 0;
border-top: 1px solid var(--line);
}
.offen-personen li:first-child { border-top: 0; }
.offen-person { font-weight: var(--schnitt-titel); overflow-wrap: anywhere; }
.offen-knoepfe { grid-column: 1 / -1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.offen-knoepfe .ico { width: 18px; height: 18px; }
.offen-admin-eintrag .pill .ico { width: 14px; height: 14px; }
.offen-admin-eintrag .pinnwand-knoepfe { margin-top: 10px; }
/* „Zuletzt entschieden“ (Bubby 4.11.2026): Meldung und Fehler mit etwas Luft über dem Satz davor. */
.frei-zeile.offen-admin-eintrag .frei-meldung,
.frei-zeile.offen-admin-eintrag .error { margin-top: 8px; }
@media (min-width: 560px) {
.offen-personen li { grid-template-columns: 40px minmax(0, 1fr) auto; }
.offen-knoepfe { grid-column: auto; }
}
/* Ganz schmal (320 px): die Kapsel darf umbrechen statt abzuschneiden. */
.offen-stand { max-width: 100%; }
.offen-stand .pill { white-space: normal; max-width: 100%; line-height: var(--lh-tight); }
.offen-stand .pill .ico { width: 14px; height: 14px; flex: none; }
@media (max-width: 559px) {
.offen-knoepfe > button { flex: 1 1 auto; justify-content: center; }
}
.offen-person small { display: block; color: var(--muted); font-size: var(--grad-klein); font-weight: var(--schnitt-text); font-variant-numeric: tabular-nums; }
/* ==========================================================================
Plan vorschlagen (Bubby 2.11.2026, nur Admin): das breite Blatt mit dem
Wochenvorschlag, nur Anzeige. Ein Tag ist eine Karte, darin beide Läden mit
ihren drei Plätzen. Wo der Vorschlag vom Plan abweicht, ist er gold
hinterlegt (wie die Kapsel „neu“, schwarze Schrift),
„von Hand“ liegt auf dem Band. Safran bleibt „bald fällig“ und kommt hier
nicht vor. Nur vorhandene Schalter.
========================================================================== */
.plan-vorschlag-blatt .sheet-body { display: grid; gap: 12px; align-content: start; }
.plan-vorschlag-knopf { align-self: flex-start; }
.pv-kopf {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 40px;
align-items: center;
gap: 8px;
}
.pv-pfeil:not(:disabled) { border-color: var(--input-line); }
.pv-pfeil.ist-zurueck .ico { transform: rotate(180deg); }
.pv-woche {
margin: 0;
text-align: center;
font-family: var(--head);
font-size: var(--grad-karte);
font-variant-numeric: tabular-nums;
}
.pv-woche b { font-weight: var(--schnitt-stark); }
.pv-woche span { color: var(--muted); font-weight: var(--schnitt-titel); }
.pv-schalter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 48px;
font-size: var(--grad-beschreibung);
}
.pv-summe,
.pv-nur,
.pv-fehler,
.pv-legende,
.pv-frei { margin: 0; line-height: var(--lh-body); }
.pv-summe { font-size: var(--grad-text); }
.pv-fehler { color: var(--paprika); font-weight: var(--schnitt-titel); }
.pv-nur { padding: 10px 14px; border-radius: var(--radius-tight); background: var(--band); font-weight: var(--schnitt-titel); }
.pv-legende { color: var(--muted); font-size: var(--grad-klein); }
.pv-muster {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 2px;
border-radius: 3px;
vertical-align: -1px;
}
.pv-muster.ist-neu { background: var(--gold); }
.pv-muster.ist-hand { background: var(--band); border: 1px solid var(--input-line); }
.pv-tage { display: grid; gap: 10px; }
.pv-tag {
padding: 12px 14px 14px;
border-radius: var(--radius-btn);
background: var(--card);
box-shadow: var(--kante);
}
.pv-tag h3 {
margin: 0 0 6px;
font-family: var(--head);
font-size: var(--grad-karte);
font-weight: var(--schnitt-stark);
}
.pv-tag h3 span { color: var(--muted); font-weight: var(--schnitt-titel); font-variant-numeric: tabular-nums; }
.pv-tag.ist-zu { background: var(--band); box-shadow: none; }
.pv-frei { color: var(--muted); font-size: var(--grad-klein); margin-bottom: 8px; }
.pv-tag.ist-zu .pv-frei { margin-bottom: 0; }
.pv-laeden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pv-laden h4 {
margin: 0 0 6px;
padding-left: 8px;
border-left: 4px solid var(--black);
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .1em;
text-transform: uppercase;
}
.pv-laden.ist-bruck h4 { border-left-color: var(--gold); }
.pv-laden ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pv-platz {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
align-items: center;
gap: 6px;
min-height: 40px;
padding: 4px 8px;
border-radius: var(--radius-tight);
}
.pv-bereich { color: var(--muted); font-size: var(--grad-klein); }
.pv-name { display: flex; flex-direction: column; min-width: 0; line-height: var(--lh-tight); }
.pv-name b { font-weight: var(--schnitt-titel); font-size: var(--grad-beschreibung); overflow-wrap: anywhere; }
.pv-name small { font-size: var(--grad-klein); }
.pv-platz.ist-neu { background: var(--gold); color: var(--black); }
.pv-platz.ist-neu .pv-bereich,
.pv-platz.ist-neu small { color: var(--black); }
.pv-platz.ist-neu b { font-weight: var(--schnitt-stark); }
.pv-platz.ist-hand { background: var(--band); }
.pv-platz.ist-hand small { color: var(--muted); }
.pv-platz.ist-offen { border: 1px dashed var(--input-line); color: var(--muted); }
.pv-block { display: grid; gap: 4px; }
.pv-block .alle-klein { margin: 4px 0 0; }
.pv-liste { margin: 0; padding-left: 18px; font-size: var(--grad-beschreibung); line-height: var(--lh-body); }
.pv-liste span { color: var(--muted); }
@media (max-width: 420px) {
.pv-laeden { grid-template-columns: 1fr; gap: 8px; }
}
/* 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); }
}
/* Kaplan (Bubby 5.11.2026): Lieferschein des Ladens, Positionen als große Chips. */
.reklamation-form > .reklamation-hinweis { margin: 0 0 14px !important; }
.reklamation-unter-feld { margin: -6px 0 14px; }
/* Alle Positionen sichtbar: hier bricht die Reihe um, statt waagrecht zu rollen. */
.chips.reklamation-posten { flex-wrap: wrap; overflow-x: visible; }
.reklamation-posten .chip {
min-height: var(--feld-hoehe);
padding: 8px 16px;
font-size: var(--grad-text);
text-align: left;
overflow-wrap: anywhere;
}
.reklamation-unsicher .ico { width: 20px; height: 20px; }
.reklamation-papier { display: inline-block; margin-top: 2px; color: var(--ink); font-weight: var(--schnitt-titel); text-decoration: underline; text-underline-offset: 3px; }
/* ==========================================================================
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-teilen,
.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-leise { margin: 0; color: var(--muted); font-size: var(--grad-beschreibung); line-height: var(--lh-body); }
.chat-push .primary .ico { width: 18px; height: 18px; }
/* Übersicht (Bubby 6.11.2026, Gruppe „Ideen“): eine Liste aller Chats, neueste
oben, nur „Hinweise“ fest oben. Zeile wie bei WhatsApp: Bild 48, Name 17,
letzte Nachricht 15 in einer Zeile, rechts Uhrzeit und Zahl. Darüber Filter
und bei Bedarf die Suche (Lupe im Kopf, Herunterziehen); unten rechts der
runde Knopf „Neu“ über der Leiste. */
.chat-start { max-width: var(--lesebreite); }
.chat-liste .liste { padding-block: 4px; }
.chat-liste .chat-zeile { min-height: 68px; gap: 12px; padding-block: 8px; }
.chat-liste .chat-zeile + .chat-zeile::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: calc(var(--karte-innen) + 60px);
border-top: 1px solid var(--line);
}
.chat-liste .chat-zeile .list-lead { width: 48px; height: 48px; }
.chat-liste .chat-zeile .list-lead .ico { width: 24px; height: 24px; }
.chat-liste .zeile-haupt { gap: 3px; }
.chat-liste .zeile-oben,
.chat-liste .zeile-unten { gap: 8px; }
.chat-liste .chat-zeile .zeile-titel { font-size: var(--grad-karte); line-height: var(--lh-tight); }
.chat-liste .chat-zeile .chat-vorschau { font-size: var(--grad-beschreibung); }
.chat-vorschau-wer { color: var(--ink); font-weight: var(--schnitt-titel); }
.chat-zeile.ist-neu .chat-wann { color: var(--ink); font-weight: var(--schnitt-stark); }
.chat-nadel { flex: none; display: inline-flex; color: var(--muted); }
.chat-nadel .ico { width: 18px; height: 18px; }
.chat-liste .chat-abschnitt { padding-top: 14px; }
.chat-person-zeile .row-chev { flex: none; display: inline-flex; color: var(--muted); }
.chat-person-zeile .row-chev .ico { width: 20px; height: 20px; }
/* Das gesuchte Stück im Namen: unterstrichen und kräftig, ohne eigene Farbe. */
mark.chat-treffer {
background: transparent;
color: inherit;
font-weight: var(--schnitt-stark);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* Filter: eine Reihe, die waagrecht rollt; gewählt Schwarz (Dunkel: Beige). */
.chat-filter {
display: flex;
flex-wrap: nowrap;
gap: 8px;
margin: 0 0 12px;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.chat-filter::-webkit-scrollbar { display: none; }
.chat-filter .chip { flex: none; min-height: 44px; }
.chat-filter .chip b { font-weight: var(--schnitt-stark); font-variant-numeric: tabular-nums; }
.chat-filter .chip[aria-pressed="true"] { background: var(--black); color: var(--auf-dunkel); border-color: var(--black); }
html.dark .chat-filter .chip[aria-pressed="true"] { background: var(--auf-dunkel); color: var(--black); border-color: var(--auf-dunkel); }
/* Die Suche: klebt beim Scrollen oben, solange sie offen ist. */
.chat-suche-feld {
position: sticky;
top: env(safe-area-inset-top);
z-index: 5;
display: block;
margin: -8px 0 4px;
padding: 8px 0;
background: var(--paper);
}
.chat-suche-feld .search-wrap { margin: 0; }
.chat-suche-feld input { padding-right: 52px; }
/* Nur unser x schließt; das eigene x des Browsers fällt weg. */
.chat-suche-feld input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.chat-suche-zu {
position: absolute;
top: 50%;
right: 4px;
width: 44px;
height: 44px;
transform: translateY(-50%);
display: grid;
place-items: center;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--muted);
cursor: pointer;
}
.chat-suche-zu .ico { width: 20px; height: 20px; }
/* Die Lupe im Kopf: ein heller Kreis wie eine Filterpille; offen schwarz mit Gold. */
.chat-lupe {
flex: none;
width: 44px;
height: 44px;
margin-top: 2px;
padding: 0;
display: grid;
place-items: center;
border: 1px solid var(--pill-line);
border-radius: 999px;
background: transparent;
color: var(--ink);
cursor: pointer;
}
.chat-lupe .ico { width: 22px; height: 22px; }
.chat-lupe[aria-expanded="true"] { background: var(--black); color: var(--gold); border-color: var(--black); }
html.dark .chat-lupe[aria-expanded="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }
/* Zwei Dinge rechts (Lupe und Logo bzw. App-Symbol): der Titel rechnet mit 108 px.
„CHAT“ ist kurz; Titel und Unterzeile rechnen deshalb mit ihrer eigenen Breite
und brechen auch bei 320 px und großer Schrift nicht um. */
.seitenkopf:has(.chat-lupe) { --kopf-rechts: 108px; }
.seitenkopf:has(.chat-lupe) .seitentitel { font-size: min(var(--grad-seitentitel), calc((100cqi - var(--kopf-rechts)) / 3.4)); }
.seitenkopf:has(.chat-lupe) .seitentitel .heading-subtitle { font-size: min(var(--grad-unterzeile), calc((100cqi - var(--kopf-rechts)) / 4.6)); white-space: nowrap; }
/* Ungarisch (15.11.2026): „CSEVEGÉS“ ist 5,5 em breit und zerriss bei 320 px; Titel und Unterzeile rechnen dafür mit mehr Platz. */
html[lang="hu"] .seitenkopf:has(.chat-lupe) .seitentitel { font-size: min(var(--grad-seitentitel), calc((100cqi - var(--kopf-rechts)) / 5.9)); }
html[lang="hu"] .seitenkopf:has(.chat-lupe) .seitentitel .heading-subtitle { font-size: min(var(--grad-unterzeile), calc((100cqi - var(--kopf-rechts)) / 5)); }
/* Leere Liste (Filter oder Suche ohne Treffer): Tüte, ein Satz, höchstens ein Knopf. */
.chat-leer-karte .leer { padding: 36px var(--rand); }
.chat-text-knopf {
min-height: 44px;
padding: 0 8px;
border: 0;
background: transparent;
color: var(--ink);
font-family: var(--head);
font-weight: var(--schnitt-titel);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
/* Chat-Zugang der Haupt-App und „Neu“ im Chat teilen Form und festen Platz.
Beide liegen unter Blättern/Vollbildern/Anrufen und weichen beim Tippen mit
der Leiste. Der Zugang bleibt sonst auf jeder Seite außerhalb des Chats. */
.chat-neu-knopf,
.chat-zugang-knopf {
position: fixed;
z-index: 31;
right: max(calc(max(var(--dock-luft), env(safe-area-inset-right)) + 4px), calc((100vw - 560px) / 2 + 4px));
bottom: calc(max(var(--dock-luft), env(safe-area-inset-bottom)) - var(--sicht-versatz, 0px) + var(--dock-hoehe) + 16px);
width: 56px;
height: 56px;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 999px;
background: var(--black);
color: var(--gold);
box-shadow: var(--kante-gold);
cursor: pointer;
--fokus: var(--gold);
--fokus-abstand: -5px;
transition: transform 0.15s ease;
}
.chat-neu-knopf .ico, .chat-zugang-knopf .ico { width: 26px; height: 26px; }
.chat-neu-knopf:active, .chat-zugang-knopf:active { transform: scale(0.96); }
html.dark .chat-neu-knopf, html.dark .chat-zugang-knopf { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), var(--kante-gold); }
html.kb-open .chat-neu-knopf, html.kb-open .chat-zugang-knopf { display: none; }
@media (prefers-reduced-motion: reduce) { .chat-neu-knopf, .chat-zugang-knopf { transition: none; } }
.main:has(.chat-neu-knopf),
.app:has(> .chat-zugang-knopf) > .main { padding-bottom: calc(var(--fuss-abstand) + env(safe-area-inset-bottom) + 16px + 56px + 16px); }
/* Das Menü am Knopf (nur Admins): Neue Nachricht, Neue Gruppe. */
.chat-neu-scrim { position: fixed; inset: 0; z-index: 46; background: rgba(29, 28, 28, 0.5); }
.main:has(.chat-neu-scrim) .chat-neu-knopf { z-index: 47; }
.chat-neu-menue {
position: fixed;
z-index: 48;
right: max(calc(max(var(--dock-luft), env(safe-area-inset-right)) + 4px), calc((100vw - 560px) / 2 + 4px));
bottom: calc(max(var(--dock-luft), env(safe-area-inset-bottom)) - var(--sicht-versatz, 0px) + var(--dock-hoehe) + 16px + 56px + 12px);
width: min(320px, calc(100vw - 2 * var(--rand)));
padding: 6px 16px;
border-radius: var(--radius-gross);
background: var(--bar);
box-shadow: var(--kante);
}
html.dark.black .chat-neu-menue { box-shadow: inset 0 0 0 1px var(--line), var(--kante); }
.chat-neu-menue .neu-aktion:first-child { border-top: 0; }
/* „Neue Nachricht / an wen?“ als Blatt. */
.chat-wahl-blatt .search-wrap { margin: 4px 0 8px; }
.chat-waehlen .chat-privat-satz { padding: 0 0 6px; font-size: var(--grad-klein); }
.chat-waehlen .liste { margin-inline: calc(-1 * var(--karte-innen)); }
.chat-waehlen .chat-leer { padding: 8px 0; }
.chat-waehlen .chat-zeile { min-height: 60px; }
/* Benachrichtigungen: eine helle Karte mit Knopf und „Später“, 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-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; 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); }
/* iPhone ohne Home-Bildschirm: drei Schritte (30.10.2026); Fehler beim Tipp in Tinte, gut lesbar. */
.push-schritte { display: grid; gap: 6px; margin: 0; padding-left: 1.4em; font-size: var(--grad-beschreibung); line-height: var(--lh-body); }
.push-meldung { margin: 0; color: var(--ink); font-size: var(--grad-beschreibung); line-height: var(--lh-body); }
.me-push-platz { display: contents; }
.me-push .panel-inner { display: grid; gap: 10px; justify-items: start; }
.me-push .panel-inner p { margin: 0; }
.me-push h2 .ico,
.me-push .primary .ico { width: 18px; height: 18px; }
/* Töne auf diesem Gerät (Bubby 3.11.2026): je Art eine Wahl, am Handy drei je Reihe. */
.me-toene-platz { display: contents; }
.me-toene .panel-inner { display: grid; gap: 14px; }
.me-toene .panel-inner p { margin: 0; }
.me-toene h2 .ico,
.me-toene .ghost .ico { width: 18px; height: 18px; }
.ton-reihe { display: grid; gap: 8px; }
.ton-art { margin: 0; font-family: var(--head); font-weight: var(--schnitt-titel); font-size: var(--grad-text); }
.segment.ton-wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 32rem; }
@media (min-width: 600px) { .segment.ton-wahl { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 359px) { .segment.ton-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ton-satz { font-size: var(--grad-beschreibung); line-height: var(--lh-body); }
/* Ein offener Chat. */
.chat-kopf { display: flex; align-items: center; gap: 12px; margin: -4px 0 12px; }
.chat-zurueck,
.chat-anrufen,
.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-anrufen .ico,
.chat-foto-knopf .ico,
.chat-foto-weg .ico { width: 22px; height: 22px; }
.chat-kopf-titel { min-width: 0; }
/* Anrufen im Einzel-Chat (27.10.2026): rechts im Kopf, wie Zurück gebaut. */
.chat-anrufen { margin-left: auto; text-decoration: none; }
.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); }
/* Wird gesendet (Uhr) oder nicht angekommen (2.11.2026): dieselbe Blase, nur der Fuß ist anders. */
.chat-uhr .ico { width: 16px; height: 16px; }
.chat-nicht-gesendet { margin-top: 4px !important; font-size: var(--grad-klein); color: var(--auf-dunkel); font-weight: var(--schnitt-titel); }
.chat-nicht-gesendet .text-btn { color: var(--gold); padding: 10px 2px; margin-block: -10px; }
.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; }
/* Die Namen nur offen zeigen; die Kurzzeile weicht dann dem Schließen. */
.chat-gelesen p { display: none; gap: 2px; margin: 0 0 4px; }
.chat-gelesen[open] p { display: grid; }
.chat-gelesen-schliessen,
.chat-gelesen[open] .chat-gelesen-kurz { display: none; }
.chat-gelesen[open] .chat-gelesen-schliessen { display: inline; }
/* Ein offener Chat füllt wie bei WhatsApp genau den sichtbaren Bildschirm
(Bubby, 24.10.2026): oben der Kopf des Chats direkt unter der Statusleiste
(seit 27.10.2026 ohne Seitentitel und Sprechblase), 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. Ohne Tastatur gilt 100dvh; mit
Tastatur setzt sichtMessen (86_Bedienung_Rendern.js) --sicht-hoehe und
--sicht-oben aus dem sichtbaren Ausschnitt, ohne Tastatur nur, solange das
iPhone alles Feste zu hoch hängt (sichtVersatz, 2.11.2026). Das Feld rechnet
unten mit demselben Abstand wie die Leiste (.dock). */
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-top: calc(8px + env(safe-area-inset-top));
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; margin: 0 0 8px; }
/* Breite Bildschirme (Falthandy aufgeklappt, Tablet; 28.10.2026): der Verlauf
rollt über die ganze Breite, so sitzt sein Rollbalken am Rand statt mitten
im Bild. Kopf, Angeheftetes, Nachrichten und Feld bleiben eine mittige
Spalte von höchstens --lesebreite. Am Handy ist die Spalte schmaler als
--lesebreite: dort ändert sich nichts. */
.main:has(.chat-offen) { padding-inline: var(--rand); }
.main > .chat-offen { max-width: none; }
.chat-offen > .chat-kopf,
.chat-offen > .chat-angeheftet,
.chat-offen > .chat-eingabe { width: 100%; max-width: var(--lesebreite); margin-inline: auto; }
.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; }
/* Schnellantworten (Bubby 10.11.2026) direkt über dem Feld: eine Reihe Kapseln,
seitlich zu wischen, bis an den Rand (wie früher im Antwort-Fenster auf Heute). */
.chat-schnell { display: flex; gap: 8px; margin: 0 calc(-1 * var(--rand)) 8px; padding: 0 var(--rand); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.chat-schnell::-webkit-scrollbar { display: none; }
.chat-schnell .chip { flex: none; }
.chat-schnell .ico { width: 20px; height: 20px; }
.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;
}
/* Leeres Feld (5.11.2026): der Hinweis „Nachricht an …“ steht in einer Zeile und
endet bei langen Namen mit „…“; das Feld bleibt einzeilig hoch, bis man mehr
als eine Zeile tippt (sonst brach er um und das Feld wurde doppelt hoch). */
.chat-eingabe textarea:placeholder-shown { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-eingabe textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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-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-foto-knopf:disabled { color: var(--disabled-ink); cursor: wait; }
/* Mehrere Fotos (Bubby, 1.11.2026): die Leiste über dem Feld rollt waagrecht,
jedes Bild mit Kreuz oben rechts (Tippfläche 44), dahinter das Plus für
weitere. Was gerade rausgeht, ist blasser; was nicht ging, hat einen Rahmen. */
.chat-fotos-entwurf { margin: 0 0 8px; }
.chat-fotos-leiste {
display: flex;
gap: 10px;
margin: 0;
padding: 8px 8px 2px 0;
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.chat-fotos-leiste::-webkit-scrollbar { display: none; }
.chat-fotos-teil { position: relative; flex: none; width: 72px; height: 72px; }
.chat-fotos-teil img,
.chat-fotos-teil .chat-foto-laedt {
display: flex;
width: 72px;
height: 72px;
object-fit: cover;
border-radius: var(--radius-tight);
border: 1px solid var(--line);
}
.chat-fotos-teil.ist-sendet img { opacity: 0.55; }
.chat-fotos-teil.ist-fehler img { outline: 2px solid var(--danger); outline-offset: 1px; }
.chat-fotos-weg {
position: absolute;
top: -6px;
right: -6px;
width: 28px;
height: 28px;
min-width: 0;
min-height: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 999px;
background: var(--black);
color: var(--auf-dunkel);
cursor: pointer;
}
.chat-fotos-weg::after { content: ""; position: absolute; inset: -8px; }
.chat-fotos-weg .ico { width: 16px; height: 16px; }
.chat-fotos-weg:disabled { background: var(--disabled-face); color: var(--disabled-ink); cursor: wait; }
html.dark .chat-fotos-weg:not(:disabled) { background: var(--ink); color: var(--black); }
.chat-fotos-mehr {
width: 72px;
height: 72px;
min-height: 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--input-line);
border-radius: var(--radius-tight);
background: var(--card);
color: var(--ink);
cursor: pointer;
}
.chat-fotos-mehr .ico { width: 24px; height: 24px; }
.chat-fotos-entwurf > .chat-leise { margin: 4px 0 0; }
.chat-fotos-fehler { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-top: 4px; }
.chat-fotos-fehler .error { flex: 1 1 12rem; margin: 0; }
.chat-fotos-fehler .text-btn { min-height: 44px; }
@media (hover: hover) {
.chat-fotos-mehr:hover { border-color: var(--ink); }
}
/* Hineinziehen am Schreibtisch (1.11.2026): ein Rahmen um den Verlauf, über dem Feld ein Satz. */
.ist-ziehen .chat-verlauf { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: var(--radius-btn); }
.ist-ziehen .chat-eingabe::before {
content: var(--chat-ablegen, "Loslassen, dann steht es hier zum Senden bereit.");
display: block;
margin: 0 0 6px;
font-weight: var(--schnitt-titel);
}
/* Das Blatt „Anhang“ (Bubby, 1.11.2026): wie das Plus-Blatt, über allem. */
.chat-anhang-ebene { position: fixed; inset: 0; z-index: 96; }
.chat-anhang-blatt .sheet-head h2 { font-size: var(--grad-seitentitel); }
.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-mehr, .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;
/* Eine Zelle, die nie größer als der freie Platz wird: nur so begrenzt
max-height: 100 % das Bild (1.11.2026; vorher wuchs die Zeile mit dem Bild,
ein Hochformat lief unten hinaus). Ränder nur so groß wie die sicheren
Ränder des iPhones (Dynamic Island, Home-Leiste), mindestens 8 px. */
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
place-items: center;
padding: max(env(safe-area-inset-top), 8px) max(env(safe-area-inset-right), 8px) max(env(safe-area-inset-bottom), 8px) max(env(safe-area-inset-left), 8px);
/* Wischen nach unten (--wisch 0…1) lässt den Hintergrund durchscheinen. */
background: color-mix(in srgb, var(--black) calc(100% - var(--wisch, 0) * 70%), transparent);
touch-action: pinch-zoom;
overscroll-behavior: contain;
--fokus: var(--gold);
}
.chat-vollbild:focus { outline: none; }
/* Herangezoomt darf der Finger das Bild verschieben (Wischen schließt dann nicht). */
.chat-vollbild.ist-gezoomt { touch-action: pan-x pan-y pinch-zoom; }
.chat-vollbild > img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Profilfoto groß (30.10.2026): quadratisch wie bei WhatsApp, nie über das Doppelte der Bildgröße. */
.vollbild-profil {
width: min(100%, var(--bild-max, 512px), calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 190px));
margin: 0;
display: grid;
gap: 14px;
justify-items: center;
text-align: center;
}
.vollbild-profil-foto {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--radius-tight);
background: var(--black);
}
.vollbild-profil figcaption { display: grid; gap: 6px; color: var(--auf-dunkel); }
.vollbild-profil strong { font-size: 1.2rem; font-weight: 700; }
.vollbild-hinweis { color: var(--auf-dunkel-leise); font-size: .9rem; }
.vollbild-hinweis[hidden] { display: none; }
.chat-vollbild > img, .vollbild-profil { transition: transform .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .chat-vollbild > img, .vollbild-profil { transition: none; } }
img.ist-foto[data-zeichen]:not(.chat-waehlen *, [data-teilen-an] *, [data-chat-erwaehnen] *, [data-tausch-person] *) { cursor: zoom-in; }
.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; }
/* Mit Maus bleibt rundum Platz für das X, es deckt das Bild nie zu. */
@media (hover: hover) and (pointer: fine) {
.chat-vollbild { padding: calc(env(safe-area-inset-top) + 68px) 68px calc(env(safe-area-inset-bottom) + 68px); }
}
/* Am Handy schließt Wischen oder ein Tipp daneben (Bubby 1.11.2026): das X ist
unsichtbar, bleibt aber für Vorlesen und Tastatur da und zeigt sich bei Tastatur-Fokus. */
@media (hover: none) and (pointer: coarse) {
.chat-vollbild-zu:not(:focus-visible) {
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
border: 0;
}
}
.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-anrufen: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. Seit 1.11.2026 ein Link, der
die PDF direkt in Google Drive öffnet. */
.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);
text-decoration: none;
}
.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-mehr, .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 dem Finger (4.11.2026): nach rechts erscheint links
das Zeichen „antworten“, nach links rechts „…“ für das Menü. Mit Maus oder
Tabulatortaste stehen „antworten“ und „…“ als Knöpfe 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: max(8px, calc((100% - var(--lesebreite)) / 2 + 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,
.chat-mehr {
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-mehr .ico,
.chat-wisch .ico { width: 20px; height: 20px; }
.chat-blase.ist-fremd :is(.chat-antworten, .chat-mehr) { left: calc(100% + 6px); }
.chat-blase.ist-eigen :is(.chat-antworten, .chat-mehr) { right: calc(100% + 6px); }
/* „…“ neben „antworten“. */
.chat-blase.ist-fremd .chat-antworten ~ .chat-mehr { left: calc(100% + 54px); }
.chat-blase.ist-eigen .chat-antworten ~ .chat-mehr { right: calc(100% + 54px); }
.chat-antworten:focus-visible,
.chat-mehr:focus-visible { opacity: 1; }
@media (hover: hover) {
.chat-blase:hover :is(.chat-antworten, .chat-mehr) { opacity: 1; }
:is(.chat-antworten, .chat-mehr):hover { border-color: var(--ink); }
}
/* Am Handy ohne Maus: die Knöpfe nur für Vorleseprogramme und die Tastatur. */
@media (hover: none) {
:is(.chat-antworten, .chat-mehr):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-wisch.chat-wisch-mehr { right: auto; left: calc(100% + 10px); }
.chat-blase.wischt-antworten .chat-wisch:not(.chat-wisch-mehr),
.chat-blase.wischt-menue .chat-wisch-mehr { display: inline-flex; }
.chat-blase.wisch-genug .chat-wisch { background: var(--black); box-shadow: none; color: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
.chat-blase.wisch-genug .chat-wisch { animation: chat-wisch-da 140ms ease-out; }
}
@keyframes chat-wisch-da { 50% { scale: 1.15; } }
/* Ü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;
}
/* Links im Text (28.10.2026): unterstrichen in der Schriftfarbe, auf der
eigenen schwarzen Blase mit goldenem Strich. Ein Web-Link steht in einer
Zeile (kein Umbruch am Bindestrich), ein zu langer endet mit „…“; der ganze
Text bleibt zum Markieren drin. Mail und Telefon brechen wie Text um. */
.chat-link {
color: inherit;
font-weight: var(--schnitt-titel);
text-decoration: underline;
text-underline-offset: 3px;
overflow-wrap: anywhere;
}
.chat-blase.ist-eigen .chat-link { text-decoration-color: var(--gold); }
.chat-link.ist-web {
display: inline-block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
}
.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 { 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; }
/* Wichtig fett (Bubby 10.11.2026): Text der Blase, angeheftet oben und die Karte auf Heute. */
.chat-blase.ist-wichtig .chat-text,
.chat-angeheftet-text,
.mt-wichtig-text p { font-weight: var(--schnitt-stark); }
.chat-blase .error { margin-top: 6px; }
/* Oben im Chat angeheftet, bis man den Chat gelesen hat: 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): „Wichtige Nachricht“ im Blatt „Anhang“ (Bubby 5.11.2026). Eingeschaltet Safran wie die Kapsel. */
.chat-anhang-blatt .neu-aktion[aria-pressed="true"] .neu-ico { background: var(--safran-flaeche); color: var(--auf-safran); }
@media (hover: hover) {
.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); }
/* 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 (Bubby, 30.10.2026): die Blase zeigt die Übersetzung gleich,
links in der Zeile mit der Uhrzeit nur klein und leise „übersetzt“ (Tipp:
Original und zurück). Tippfläche 44 hoch, ohne die Blase höher zu machen. */
.chat-meta:has(.chat-ue-marke) { justify-content: space-between; flex-wrap: wrap; column-gap: 12px; }
.chat-ue-marke {
display: inline-flex;
align-items: center;
min-height: 44px;
margin: -12px auto -10px -6px;
padding: 0 6px;
border: 0;
background: none;
color: inherit;
font: inherit;
cursor: pointer;
--fokus-abstand: -2px;
}
span.chat-ue-marke { cursor: default; }
@media (hover: hover) {
button.chat-ue-marke:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.chat-blase .chat-ue-meldung { margin-top: 4px; font-size: var(--grad-klein); line-height: var(--lh-tight); }
.chat-blase.ist-eigen .muted.chat-ue-meldung { color: var(--auf-dunkel-leise); }
.chat-ue-pause { align-self: center; max-width: 30rem; margin: 4px 0 !important; text-align: center; font-size: var(--grad-klein); }
/* Menü beim langen Drücken (30.10.2026): eine kleine helle Karte an der Blase,
über allem; eine durchsichtige Ebene fängt den Tipp daneben. Die Lage
(--menue-x, --menue-y) misst die App. Am Handy markiert langes Drücken
keinen Text mehr, „Kopieren“ steht dafür im Menü. */
.chat-menue-ebene { position: fixed; inset: 0; z-index: 95; }
.chat-menue {
position: fixed;
left: var(--menue-x, 12px);
top: var(--menue-y, 12px);
min-width: 13rem;
padding: 6px;
border-radius: var(--radius-btn);
background: var(--bar);
box-shadow: var(--kante);
}
html.dark .chat-menue { box-shadow: inset 0 0 0 1px var(--line), var(--kante); }
.chat-menue-eintrag {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 0;
border-radius: var(--radius-tight);
background: none;
color: var(--ink);
font: inherit;
font-size: var(--grad-text);
font-weight: var(--schnitt-titel);
text-align: left;
cursor: pointer;
}
.chat-menue-eintrag + .chat-menue-eintrag { border-top: 1px solid var(--line); border-radius: 0; }
.chat-menue-eintrag .ico { width: 20px; height: 20px; flex: none; }
.chat-menue-eintrag:active { background: var(--row-hover); }
@media (hover: hover) {
.chat-menue-eintrag:hover { background: var(--row-hover); }
}
.chat-blase.ist-markiert { outline: 2px solid var(--input-line); outline-offset: 2px; }
/* Am Handy markiert langes Drücken nichts und öffnet kein „Kopieren/Bild sichern“ (Bubby 4.11.2026):
kopiert wird über das Menü (nach links wischen). Links, Fotos, Videos und Sprachnachrichten bleiben antippbar.
Der System-Chat hat kein Menü: dort bleibt Text markierbar wie bisher. */
@media (hover: none), (pointer: coarse) {
.chat-offen:not(.ist-system) .chat-verlauf { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
@media (prefers-reduced-motion: no-preference) {
.chat-menue { animation: chat-menue-auf 120ms ease-out; }
}
@keyframes chat-menue-auf { from { opacity: 0; transform: scale(0.97); } }
/* Sprache im Chat: Mein Bereich (zwei Knöpfe) und je Person bei den Mitarbeitern. */
.segment.segment-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 20rem; }
.me-sprache h2 .ico { width: 22px; height: 22px; }
.me-sprache-satz { margin: 10px 0 0; font-size: var(--grad-beschreibung); }
.person-sprache { display: flex; flex: 1 1 100%; align-items: center; gap: 12px; font-size: var(--grad-klein); color: var(--muted); white-space: nowrap; }
.person-sprache select { width: auto; min-width: 10rem; }
/* Symbol der Chat-App „Bubby Chat“ (Bubby, 30.10.2026): hell oder dunkel, als
App-Symbol mit runden Ecken (Anmeldung, Kopf, Wahl in Mein Bereich). Das helle
hat den Sand des Seitenbodens, das dunkle das Schwarz der Cockpit-Flächen. */
.chat-symbol { border-radius: var(--radius-btn); object-fit: cover; }
.titel-logo.chat-symbol { border-radius: var(--radius-btn); }
/* In Bubby Chat ist das Symbol oben rechts der Knopf zum Chat (Bubby, 30.10.2026):
44 × 44 wie vorher die Sprechblase, die goldene Zahl sitzt an seiner Ecke. */
.titel-symbol-knopf {
position: relative;
flex: none;
width: 44px;
height: 44px;
margin-top: 2px;
padding: 0;
border: 0;
border-radius: var(--radius-btn);
background: none;
}
.titel-symbol-knopf .chat-symbol { display: block; width: 44px; height: 44px; }
.me-symbol h2 .ico { width: 22px; height: 22px; }
.symbol-wahl-knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
border-radius: var(--radius-btn);
}
.symbol-wahl-knopf .chat-symbol { flex: none; width: 32px; height: 32px; border-radius: var(--radius-tight); }
.me-symbol-satz { margin: 10px 0 0; font-size: var(--grad-beschreibung); }
/* 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); }
}
/* Fleisch-Automatik (5.11.2026): Lieferschein und Lagerwarnung als Karte in der
Blase. Grund wie die Schicht-Karte (Band), die Läden mit ihrem Streifen
(Neusiedl schwarz, in Dunkel beige; Bruck gold). Kräuter = stimmt, Safran =
bitte bald ansehen (weicht ab, neue Größe, wenig Spieße). */
.chat-blase.hat-fleisch-karte { width: min(22rem, 88%); }
.fk {
display: grid;
gap: 6px;
margin: 2px 0 4px;
padding: 10px 12px 12px;
border-radius: var(--radius-btn);
background: var(--band);
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.fk p { margin: 0; }
.fk-gross { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; line-height: var(--lh-tight); }
.fk-gross b { font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-stark); }
.fk-gross span { font-size: var(--grad-beschreibung); color: var(--muted); }
.fk-laden {
display: grid;
gap: 2px;
padding: 6px 0 6px 10px;
border-left: 4px solid var(--black);
}
.fk-laden.ist-bruck { border-left-color: var(--gold); }
html.dark .fk-laden.ist-neusiedl { border-left-color: var(--auf-dunkel); }
.fk-laden-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--grad-karte); line-height: var(--lh-tight); }
.fk-laden-kopf b { font-weight: var(--schnitt-stark); }
.fk-laden-kopf span { font-weight: var(--schnitt-stark); white-space: nowrap; }
.fk-spiesse { font-size: var(--grad-beschreibung); line-height: var(--lh-tight); }
.fk-extras { font-size: var(--grad-beschreibung); color: var(--muted); line-height: var(--lh-tight); }
.fk-klein {
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);
}
.fk-abgleich { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); container-type: inline-size; }
/* Lager-Abgleich je Laden (Bubby 12.11.2026): Block mit Laden-Streifen, Status,
„Tabelle: N Stück“ und der Tabelle kg | Lieferschein | Tabelle. Zeilen einzeln:
Kräuter = stimmt, Safran = weicht ab (bitte zählen), neutral = kein Stand erkannt. */
.fk-ab {
display: grid;
gap: 6px;
padding: 8px 10px 10px;
border-left: 4px solid var(--black);
border-radius: var(--radius-tight);
background: var(--card);
}
.fk-ab.ist-bruck { border-left-color: var(--gold); }
html.dark .fk-ab.ist-neusiedl { border-left-color: var(--auf-dunkel); }
.fk-ab-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--grad-karte); line-height: var(--lh-tight); }
.fk-ab-kopf b { font-weight: var(--schnitt-stark); }
.fk-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px 2px 6px;
border-radius: 999px;
font-size: var(--grad-klein);
font-weight: var(--schnitt-stark);
white-space: nowrap;
color: var(--muted);
box-shadow: inset 0 0 0 1px var(--line);
}
.fk-status .ico { width: 14px; height: 14px; flex: none; }
.fk-ab.ist-ok .fk-status { background: var(--kraeuter-zart); color: var(--kraeuter); box-shadow: none; }
.fk-ab.ist-ab .fk-status { background: var(--safran-zart); color: var(--safran); box-shadow: none; }
/* Schmal: die Summe in eigener Zeile; breit rechts daneben wie im Vorbild. */
.fk-ab-summe { flex-basis: 100%; font-size: var(--grad-klein); color: var(--muted); white-space: nowrap; }
@container (min-width: 21rem) {
.fk-ab-summe { flex-basis: auto; margin-left: auto; }
}
.fk-tab { width: 100%; border-collapse: separate; border-spacing: 0 2px; table-layout: fixed; font-size: var(--grad-beschreibung); line-height: var(--lh-tight); }
.fk-tab th, .fk-tab td { padding: 5px 6px; text-align: center; }
.fk-tab th:first-child { width: 28%; padding-left: 8px; text-align: left; white-space: nowrap; }
.fk-tab thead th { padding-block: 0 2px; font-size: var(--grad-klein); font-weight: var(--schnitt-titel); color: var(--muted); }
.fk-tab tbody th { font-weight: var(--schnitt-stark); }
.fk-tab tbody > tr > :first-child { border-radius: var(--radius-tight) 0 0 var(--radius-tight); }
.fk-tab tbody > tr > :last-child { border-radius: 0 var(--radius-tight) var(--radius-tight) 0; }
.fk-tab tbody tr.ist-ok > * { background: var(--kraeuter-zart); }
.fk-tab tbody tr.ist-ab > * { background: var(--safran-zart); color: var(--safran); font-weight: var(--schnitt-stark); }
.fk-ab-satz { font-size: var(--grad-klein); color: var(--muted); line-height: var(--lh-tight); }
.fk-ab.ist-ab .fk-ab-satz { color: var(--safran); font-weight: var(--schnitt-stark); }
.fk-hinweis { display: flex; align-items: flex-start; gap: 6px; padding: 6px 8px; border-radius: var(--radius-tight); background: var(--safran-zart); color: var(--safran); font-size: var(--grad-beschreibung); line-height: var(--lh-tight); }
.fk-hinweis .ico { width: 18px; height: 18px; flex: none; }
.fk-knopf { margin-top: 4px; text-decoration: none; }
.fk-von { font-size: var(--grad-klein); color: var(--muted); }
.fk-lager { background: var(--safran-zart); }
.fk-lager .fk-warn { color: var(--safran); }
.fk-satz { font-size: var(--grad-beschreibung); line-height: var(--lh-tight); }
.fk-nb { white-space: nowrap; }
/* Schmales Handy: die Karte nimmt die ganze Breite, sonst bricht jede Zeile um. */
@media (max-width: 25em) {
.chat-blase.hat-fleisch-karte { width: 100%; max-width: 100%; }
}
@media (max-width: 19.9375em) {
.fk { padding-inline: 8px; }
.fk-knopf { font-size: var(--grad-beschreibung); }
}
/* 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);
}
/* Systemmeldungen sind Karten, keine Sprechblasen: sie nehmen die ganze
Spalte, am Handy wie auf breiten Bildschirmen (28.10.2026). */
.chat-blase.hat-system { width: 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); }
/* Nichts darf die Karte breiter machen als die Spalte (Bubby 29.10.2026: lange
Dateinamen und Drive-Kennungen liefen rechts hinaus, „Quelle“ stand
senkrecht). Jedes Raster hat darum eine Spalte, die schrumpfen darf. */
.sys-karte { display: grid; grid-template-columns: minmax(0, 1fr); 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; grid-template-columns: minmax(0, 1fr); 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; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.sys-zeile {
display: grid;
/* Name links behält mindestens 7 Zeichen Platz (nie Buchstabe für
Buchstabe), der Wert rechts nimmt, was er braucht, und bricht erst um,
wenn er nicht mehr in die Zeile passt. Kurze Werte bleiben eine Kapsel. */
grid-template-columns: minmax(min(7.5em, 45%), 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 { min-width: 0; font-size: var(--grad-text); font-weight: var(--schnitt-titel); }
.sys-zeile-wert {
min-width: 0;
padding: 2px 10px;
/* Eine Zeile: rund wie bisher; umgebrochen: Rechteck mit runden Ecken
(ältere Geräte ohne „lh“ behalten die Kapsel). */
border-radius: 999px;
border-radius: calc(.5lh + 2px);
background: var(--band);
font-family: var(--head);
font-size: var(--grad-beschreibung);
font-weight: var(--schnitt-stark);
font-variant-numeric: tabular-nums;
}
.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; }
}
/* Kopf und Zahl bleiben zusammen; nur was allein zu lang ist, bricht. */
.sys-paar { display: inline-block; max-width: 100%; }
/* Teilen an „Denis Kebap“ (29.10.2026): oben, was geteilt wurde (Fotos klein,
PDF als Karte, Text im Band), darunter die Chats zum Wählen. Im offenen Chat
sagt eine Zeile über dem Feld, wie viele geteilte Dateien noch warten. */
.chat-teilen { padding-bottom: 8px; }
.chat-teilen-kopf { display: grid; gap: 12px; }
.chat-teilen-kopf:not(:last-child) { padding-bottom: 4px; }
.chat-teilen-kopf .primary { justify-self: start; }
.chat-teilen-vorschau { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-teilen-vorschau img {
flex: none;
width: 64px;
height: 64px;
object-fit: cover;
border-radius: var(--radius-tight);
border: 1px solid var(--line);
}
.chat-teilen-vorschau .chat-pdf-entwurf { flex: 1 1 100%; margin: 0; padding-right: 8px; }
.chat-teilen-text {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
padding: 10px 12px;
border-radius: var(--radius-btn);
background: var(--band);
color: var(--ink);
font-size: var(--grad-beschreibung);
line-height: var(--lh-body);
white-space: pre-line;
overflow-wrap: anywhere;
}
.chat-teilen .chat-zeile .zeile-unter { white-space: normal; }
.chat-teilen .chat-leer { padding: 4px var(--karte-innen) 8px; }
.chat-teilen > .panel-inner:last-child { padding-top: 8px; }
.chat-geteilt-rest { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; }
.chat-geteilt-rest .chat-leise { flex: 1 1 12rem; min-width: 0; font-size: var(--grad-klein); }
/* Chat-Gäste (Bubby, 30.10.2026): leiser Hinweis „Gast“ neben dem Namen. */
.chat-gast-marke {
display: inline-block;
margin-left: 6px;
padding: 1px 8px;
border-radius: 999px;
background: var(--band);
color: var(--muted);
font-family: var(--head);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .06em;
line-height: 1.5;
text-transform: uppercase;
vertical-align: 1px;
white-space: nowrap;
}
/* Eigene Gruppen (Bubby, 1.11.2026). Ein Hinweis der Gruppe („Vulnet hat die
Gruppe erstellt“) steht leise in der Mitte wie die Tageszeile, nur ohne
Kapsel. Die Seite „Neue Gruppe“ / „Gruppe verwalten“ hat oben den Kopf wie
ein offener Chat (ohne Seitentitel), darunter Karten: Name, Personen zum
Anhaken (ganze Zeile tippbar, Haken rechts), beim Verwalten „Auflösen“. */
.chat-hinweis {
align-self: center;
max-width: min(90%, 34rem);
margin: 4px 0;
color: var(--muted);
font-size: var(--grad-klein);
line-height: var(--lh-body);
text-align: center;
overflow-wrap: anywhere;
}
.main:has(.chat-gruppe-seite) { padding-top: calc(8px + env(safe-area-inset-top)); }
.chat-gruppe-seite { max-width: var(--lesebreite); }
.chat-gruppe-seite .chat-kopf { margin: 0 0 12px; }
.chat-gruppe-form { padding-bottom: 4px; }
.chat-gruppe-form > .panel-inner:first-child { padding-top: var(--karte-innen); }
.chat-gruppe-satz { padding: 0 var(--karte-innen) 8px; font-size: var(--grad-klein); }
.chat-wahl-zeile { cursor: pointer; }
.chat-wahl-zeile .zeile-haupt { flex: 1 1 auto; min-width: 0; }
.chat-wahl-zeile input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 0; }
@media (hover: hover) { .liste > .chat-wahl-zeile:hover { background: var(--row-hover); } }
.chat-gruppe-weg-karte .panel-inner { padding-block: 12px; }
.chat-gruppe-weg .ico,
.chat-verwalten .ico { width: 22px; height: 22px; }
.chat-gruppe-frage { margin-top: 0; border-top: 0; }
/* Symbol der Gruppe (4.11.2026): acht runde Knöpfe, das gewählte mit goldenem Ring. */
.chat-symbol-wahl { margin: 0; border: 0; min-width: 0; }
.chat-symbol-wahl legend { padding: 0; margin-bottom: 8px; }
.chat-symbol-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 4px; }
.chat-symbol-knopf { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; cursor: pointer; }
.chat-symbol-knopf input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chat-symbol-kreis {
display: inline-grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 999px;
background: var(--square);
color: var(--black);
box-shadow: 0 0 0 1px var(--line);
}
html.dark .chat-symbol-kreis { color: var(--auf-dunkel); }
.chat-symbol-kreis .ico { width: 24px; height: 24px; }
.chat-symbol-wort { max-width: 100%; font-size: var(--grad-klein); line-height: var(--lh-tight); color: var(--muted); text-align: center; hyphens: manual; }
.chat-symbol-knopf input:checked + .chat-symbol-kreis { background: var(--black); color: var(--gold); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--gold-schrift); }
html.dark .chat-symbol-knopf input:checked + .chat-symbol-kreis { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--gold); }
.chat-symbol-knopf input:checked ~ .chat-symbol-wort { color: var(--ink); font-weight: var(--schnitt-titel); }
.chat-symbol-knopf input:focus-visible + .chat-symbol-kreis { outline: 2px solid var(--gold-schrift); outline-offset: 4px; }
.chat-symbol-wahl:disabled .chat-symbol-knopf { cursor: default; opacity: .6; }
/* Weiterleiten (Bubby, 1.11.2026): in der Blase oben klein „Weitergeleitet“
mit dem Pfeil, leise wie die Uhrzeit. Die Seite „Weiterleiten an …“ ist
die Auswahl der Gruppen-Seite; „Senden (2)“ klebt unten über der Leiste,
damit sie auch bei einer langen Liste erreichbar bleibt. */
.chat-weiter-marke {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 2px !important;
font-size: var(--grad-klein);
line-height: var(--lh-tight);
color: var(--muted);
}
.chat-weiter-marke .ico { width: 16px; height: 16px; flex: none; }
.chat-blase.ist-eigen .chat-weiter-marke { color: var(--auf-dunkel-leise); }
.chat-blase.hat-foto > .chat-weiter-marke,
.chat-blase.hat-pdf > .chat-weiter-marke { padding-inline: 6px; }
.chat-meldung { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: var(--grad-klein); }
.chat-meldung .ico { width: 18px; height: 18px; flex: none; color: var(--kraeuter); }
.chat-weiter-kopf { display: grid; gap: 8px; padding-top: var(--karte-innen); }
.chat-weiter-kopf .chat-zitat { margin: 0; }
.chat-weiter-kopf .chat-leise { margin: 0; font-size: var(--grad-klein); }
.chat-weiter-suche .search-wrap { margin: 0; }
.chat-weiter-fuss {
position: sticky;
bottom: calc(max(var(--dock-luft), env(safe-area-inset-bottom)) + var(--dock-hoehe) + 8px);
z-index: 2;
border-top: 1px solid var(--line);
border-radius: 0 0 var(--radius) var(--radius);
background: var(--card);
}
.chat-weiter-fuss .form-actions { padding-top: 12px; }
.chat-weiter-fuss .primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.chat-weiter-fuss .primary .ico { width: 20px; height: 20px; flex: none; }
html.kb-open .chat-weiter-fuss { bottom: 0; }
[data-weiter-name][hidden],
[data-weiter-keiner][hidden],
.chat-weiter-abschnitt[hidden] { display: none; }
/* Für alle löschen und bearbeiten (Bubby, 1.11.2026): eine gelöschte
Nachricht ist bei allen nur noch ein leiser, schräger Satz mit dem
Sinnbild, Absender und Uhrzeit bleiben. „bearbeitet“ steht klein vor der
Uhrzeit. Beim Bearbeiten steht über dem Feld „Bearbeiten“ mit dem alten
Text und X, die Blase ist markiert. Die Rückfrage ist eine kleine Karte in
der Mitte über allem (wie das Menü außerhalb von `app`). Keine Farbe mit
Bedeutung: Löschen ist Schwarz wie „Gruppe auflösen“. */
.chat-geloescht { display: flex; align-items: center; gap: 6px; font-style: italic; color: var(--muted); }
.chat-blase.ist-eigen .chat-geloescht { color: var(--auf-dunkel-leise); }
.chat-geloescht .ico { width: 18px; height: 18px; flex: none; }
.chat-bearbeitet { margin-right: 2px; font-style: italic; }
.chat-bearbeiten-entwurf .chat-zitat-wer { display: inline-flex; align-items: center; gap: 4px; }
.chat-bearbeiten-entwurf .chat-zitat-wer .ico { width: 16px; height: 16px; flex: none; }
.chat-frage-ebene {
display: grid;
place-items: center;
padding: 16px;
background: rgba(29, 28, 28, 0.5);
}
.chat-frage {
width: min(100%, 22rem);
padding: var(--karte-innen);
border-radius: var(--radius-btn);
background: var(--bar);
color: var(--ink);
box-shadow: var(--kante);
}
html.dark .chat-frage { box-shadow: inset 0 0 0 1px var(--line), var(--kante); }
.chat-frage-titel { font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-stark); }
.chat-frage-text { margin-top: 6px !important; font-size: var(--grad-text); line-height: var(--lh-body); color: var(--muted); }
.chat-frage .error { margin-top: 8px !important; }
.chat-frage-knoepfe { display: grid; gap: 8px; margin-top: 16px; }
.chat-frage-knoepfe button { width: 100%; min-height: 44px; }
.chat-frage-ja { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.chat-frage-ja .ico { width: 18px; height: 18px; flex: none; }
@media (prefers-reduced-motion: no-preference) {
.chat-frage { animation: chat-menue-auf 120ms ease-out; }
}
/* Reaktionen (Bubby, 2.11.2026): wie bei WhatsApp eine kleine Pille, die
unten über den Rand der Blase ragt, gleiche Emoji mit Zahl. Flach wie jede
Pille, auf der Karte mit Linie, damit sie auf Schwarz und Hell gleich
steht. Im Menü oben eine Reihe Emoji mit Plus; das eigene ist mit einem
Ring in Schrift-Farbe markiert (Gold nie als Rand auf heller Fläche). */
.chat-blase.hat-reaktion { margin-bottom: 16px; }
.chat-reaktionen {
position: absolute;
bottom: -18px;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
max-width: calc(100% - 12px);
padding: 0 8px;
border: 0;
border-radius: 999px;
background: var(--card);
color: var(--ink);
box-shadow: inset 0 0 0 1px var(--line);
font: inherit;
font-size: var(--grad-klein);
font-variant-numeric: tabular-nums;
line-height: 1;
cursor: pointer;
overflow: hidden;
}
/* Die Tippfläche ist größer als die Pille. */
.chat-reaktionen::after { content: ""; position: absolute; inset: -8px -4px; }
.chat-blase.ist-fremd .chat-reaktionen { left: 10px; }
.chat-blase.ist-eigen .chat-reaktionen { right: 10px; }
.chat-reaktion { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.chat-reaktion-e { font-size: var(--grad-text); }
.chat-reaktion-zahl { font-weight: var(--schnitt-titel); color: var(--muted); }
@media (hover: hover) {
.chat-reaktionen:hover { box-shadow: inset 0 0 0 1px var(--ink); }
}
.chat-menue.mit-reaktionen { width: min(21rem, calc(100vw - 24px)); }
.chat-menue-reaktionen {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 2px;
padding-bottom: 6px;
}
.chat-menue-reaktionen + .chat-menue-eintrag { border-top: 1px solid var(--line); border-radius: 0; }
.chat-reaktion-knopf {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 44px;
padding: 0;
border: 0;
border-radius: 999px;
background: none;
color: var(--ink);
font: inherit;
font-size: var(--grad-abschnitt);
line-height: 1;
cursor: pointer;
}
.chat-reaktion-knopf .ico { width: 22px; height: 22px; }
.chat-reaktion-knopf:is([aria-checked="true"], [aria-pressed="true"], .ist-eigen) { background: var(--row-hover); box-shadow: inset 0 0 0 2px var(--ink); }
.chat-reaktion-knopf:active { background: var(--row-hover); }
@media (hover: hover) {
.chat-reaktion-knopf:hover { background: var(--row-hover); }
}
/* Die größere Auswahl hinter dem Plus: ein Raster, so breit das Blatt ist. */
.chat-reaktion-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; padding: 4px 0 8px; }
.chat-reaktion-raster .chat-reaktion-knopf { min-height: 48px; font-size: var(--grad-zahl); border-radius: var(--radius-tight); }
/* Das Blatt „Reaktionen“: oben die Summen, darunter je Person eine Zeile. */
.chat-reaktionen-summe { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 8px !important; font-size: var(--grad-beschreibung); }
.chat-reaktionen-summe .chat-reaktion-e { font-size: var(--grad-abschnitt); }
.chat-reaktion-zeile { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
button.chat-reaktion-zeile { cursor: pointer; }
.chat-reaktion-gross { margin-left: auto; font-size: var(--grad-abschnitt); line-height: 1; }
.chat-reaktionen-blatt > .error { margin: 8px 0 0 !important; }
/* Sprachnachrichten und Videos (Bubby, 2.11.2026). Ohne Text im Feld steht
statt „Senden“ das Mikrofon (beide gleich gebaut, Gold wie das Plus).
Während der Aufnahme ersetzt eine Leiste das Feld: Verwerfen, ein
pulsierender Punkt in Schriftfarbe (keine Signalfarbe, die Ampel bleibt
frei), die Zeit, Senden. */
.chat-eingabe-zeile .chat-mikro { display: none; }
.chat-eingabe-zeile.ist-leer .chat-mikro { display: inline-flex; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.chat-eingabe-zeile.ist-leer [data-chat-senden] { display: none; }
.chat-eingabe-zeile.ist-aufnahme { align-items: center; }
.chat-aufnahme {
flex: 1 1 auto;
min-width: 0;
min-height: var(--feld-hoehe);
display: flex;
align-items: center;
gap: 10px;
padding: 0 14px;
border: 1px solid var(--input-line);
border-radius: var(--radius-btn);
background: var(--field);
color: var(--ink);
}
.chat-aufnahme-punkt { flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--ink); }
.chat-aufnahme-zeit { flex: none; font-family: var(--head); font-weight: var(--schnitt-stark); font-variant-numeric: tabular-nums; }
.chat-aufnahme-satz { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--grad-klein); color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
.chat-aufnahme.laeuft .chat-aufnahme-punkt { animation: chat-aufnahme-puls 1.2s ease-in-out infinite; }
}
@keyframes chat-aufnahme-puls { 50% { opacity: 0.25; } }
/* Sprache in der Blase: runder Knopf, Schieber, Zeit; so breit wie ein Foto. */
.chat-blase.hat-audio { width: min(17rem, 85%); }
.chat-audio { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.chat-audio-knopf {
flex: none;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 999px;
background: var(--ink);
color: var(--card);
cursor: pointer;
}
.chat-blase.ist-eigen .chat-audio-knopf { background: var(--gold); color: var(--black); }
.chat-audio-knopf .ico { width: 20px; height: 20px; }
.chat-audio-knopf[aria-busy="true"] { opacity: 0.6; }
.chat-audio-zeit { flex: none; min-width: 2.6em; font-size: var(--grad-klein); font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.chat-blase.ist-eigen .chat-audio-zeit { color: var(--auf-dunkel-leise); }
.chat-audio-stelle {
flex: 1 1 auto;
min-width: 0;
height: 44px;
margin: 0;
background: transparent;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
--spur: var(--line);
--voll: var(--ink);
}
.chat-blase.ist-eigen .chat-audio-stelle { --spur: var(--auf-dunkel-leise); --voll: var(--gold); }
.chat-audio-stelle::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--voll) var(--anteil, 0%), var(--spur) var(--anteil, 0%)); }
.chat-audio-stelle::-moz-range-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--voll) var(--anteil, 0%), var(--spur) var(--anteil, 0%)); }
.chat-audio-stelle::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 999px; background: var(--voll); }
.chat-audio-stelle::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 999px; background: var(--voll); }
.chat-audio-fehler { margin: 2px 0 0 !important; font-size: var(--grad-klein); }
/* Video in der Blase: das Vorschaubild wie ein Foto, darauf Abspielen und Dauer. */
.chat-blase.hat-foto > .chat-video { padding-inline: 0; }
.chat-video {
position: relative;
display: block;
width: 100%;
min-height: 0;
padding: 0;
border: 0;
border-radius: var(--radius-tight);
background: var(--black);
overflow: hidden;
cursor: pointer;
--fokus-abstand: 2px;
}
.chat-video img { display: block; width: 100%; height: auto; max-height: 20rem; object-fit: cover; }
.chat-video-leer { display: block; width: 100%; min-height: 9rem; max-height: 20rem; background: var(--dark-row); }
/* Ohne Vorschaubild: das Video selbst (erstes Bild) über der grauen Fläche; lädt es nicht, bleibt die Fläche. */
.chat-video-vorschau { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: transparent; }
.chat-video-play {
position: absolute;
inset: 50% auto auto 50%;
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--black);
box-shadow: inset 0 0 0 1px var(--gold);
color: var(--gold);
transform: translate(-50%, -50%);
}
.chat-video-play .ico { width: 26px; height: 26px; }
.chat-video-dauer {
position: absolute;
left: 8px;
bottom: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
background: var(--black);
color: var(--auf-dunkel);
font-size: var(--grad-klein);
font-variant-numeric: tabular-nums;
}
.chat-video-dauer .ico { width: 16px; height: 16px; }
.chat-video-entwurf .chat-video-mini {
flex: none;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-tight);
background: var(--black);
color: var(--gold);
overflow: hidden;
}
.chat-video-mini img { width: 100%; height: 100%; object-fit: cover; }
.chat-video-mini .ico { width: 22px; height: 22px; }
/* Video groß: wie das Foto über allem, mit den Knöpfen des Geräts; das Kreuz bleibt immer sichtbar. */
.chat-video-gross > video { max-width: 100%; max-height: 100%; width: auto; height: auto; background: var(--black); }
.chat-video-gross .chat-vollbild-zu { width: 44px !important; height: 44px !important; margin: 0 !important; overflow: visible !important; clip-path: none !important; border: 1px solid var(--auf-dunkel-leise) !important; }
.chat-video-fehler { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 24px); margin: 0; color: var(--auf-dunkel); text-align: center; }
/* Karte „Mitteilungen“ (Bubby 2.11.2026, seit 3.11. je Gerät): Apps mit Geräten, dieses Gerät, Schalter „Chat-Mitteilungen hier“, Test. */
.me-push-apps { display: grid; gap: 4px; margin: 0; width: 100%; }
.me-push-apps div { display: flex; justify-content: space-between; gap: 12px; }
.me-push-apps dt { font-weight: var(--schnitt-titel); }
.me-push-apps dd { margin: 0; color: var(--muted); }
.me-push-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 100%; }
/* „Mitteilungen auf diesem Handy erlauben“ ist lang: auf schmalen Handys bricht der Text im Knopf um. */
.me-push-zeile .compact-btn { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: start; }
.me-push-hinweis { padding: 8px 10px; border-radius: var(--radius-tight); background: var(--safran-zart); color: var(--ink); font-size: var(--grad-beschreibung); }
/* Die Schalter je Art (Bubby 4.11.2026): eine Liste mit Linie zwischen den Zeilen, oben und unten. */
.me-push-schalter { display: grid; width: 100%; border-top: 1px solid var(--line-card); border-bottom: 1px solid var(--line-card); }
.me-push-hier { width: 100%; padding: 10px 0; }
/* Streifen oben (Bubby 3.11.2026, wie bei WhatsApp): bei offener App statt der Mitteilung, für eine
Nachricht aus einem anderen Chat. Schwarze Cockpit-Fläche mit goldener Kante, Bild, Name, eine
Zeile Text; Tipp öffnet den Chat, Wischen nach oben oder zur Seite schließt. Liegt außerhalb von #app. */
.chat-streifen-ebene {
position: fixed;
top: calc(8px + env(safe-area-inset-top));
left: 0;
right: 0;
z-index: 60;
display: flex;
justify-content: center;
padding-inline: var(--rand);
pointer-events: none;
transform: translate(var(--streifen-x, 0px), calc(-100% - 24px - env(safe-area-inset-top)));
opacity: 0;
transition: transform .22s ease-out, opacity .22s ease-out;
}
.chat-streifen-ebene.ist-da {
transform: translate(var(--streifen-x, 0px), var(--streifen-y, 0px));
opacity: 1;
}
.chat-streifen-ebene:empty { display: none; }
/* Hängt das iPhone alles Feste zu hoch (86_Bedienung_Rendern.js), rückt der Streifen wie die Leiste nach. */
html.sicht-versetzt .chat-streifen-ebene.ist-da { transform: translate(var(--streifen-x, 0px), calc(var(--streifen-y, 0px) + var(--sicht-versatz, 0px))); }
.chat-streifen {
pointer-events: auto;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: var(--lesebreite);
min-height: 64px;
padding: 10px 16px 10px 12px;
border: 0;
border-radius: var(--radius);
background: var(--black);
color: var(--auf-dunkel);
box-shadow: var(--kante-gold);
text-align: left;
cursor: pointer;
touch-action: none;
-webkit-tap-highlight-color: transparent;
}
.chat-streifen:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.streifen-bild {
flex: none;
width: 40px;
height: 40px;
border-radius: 999px;
display: inline-grid;
place-items: center;
background: var(--auf-dunkel);
color: var(--black);
font-family: var(--head);
font-size: var(--grad-karte);
font-weight: var(--schnitt-stark);
}
.streifen-bild.ist-foto { padding: 0; border: 0; object-fit: cover; background: var(--dark-row); }
.streifen-gruppe { background: var(--dark-row); color: var(--gold); }
.streifen-gruppe .ico { width: 22px; height: 22px; }
.streifen-text { min-width: 0; flex: 1; display: grid; gap: 2px; }
.streifen-titel,
.streifen-vorschau { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.streifen-titel { font-size: var(--grad-karte); font-weight: var(--schnitt-stark); line-height: var(--lh-tight); }
.streifen-vorschau { font-size: var(--grad-beschreibung); color: var(--auf-dunkel-leise); line-height: var(--lh-tight); }
.streifen-mehr {
margin-left: 8px;
padding: 1px 7px;
border-radius: 999px;
background: var(--gold);
color: var(--black);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
vertical-align: 2px;
}
html.dark.black .chat-streifen { background: var(--black); }
@media (prefers-reduced-motion: reduce) {
.chat-streifen-ebene { transition: opacity .15s linear; }
}
/* Korrigieren (Bubby, 4.11.2026): sehr dezent. Ein kleines graues Symbol
ohne Rahmen und Fläche zwischen Feld und Senden, erst ab drei Wörtern
(`kann-korrigieren`) oder solange es etwas zeigt (lädt, Häkchen, Pfeil
zurück). Beim Laden pulsiert es still. */
.chat-korrigieren {
flex: none;
display: none;
align-items: center;
justify-content: center;
width: 32px;
height: var(--feld-hoehe);
min-height: 0;
margin: 0 -4px;
padding: 0;
border: 0;
border-radius: 999px;
background: none;
color: var(--muted);
-webkit-tap-highlight-color: transparent;
}
.chat-korrigieren .ico { width: 19px; height: 19px; }
.chat-eingabe-zeile.kann-korrigieren .chat-korrigieren,
.chat-korrigieren[data-zustand] { display: inline-flex; }
.chat-korrigieren[data-zustand="laeuft"] { cursor: progress; }
.chat-korrigieren[data-zustand="laeuft"] .ico { opacity: .45; }
.chat-korrigieren:disabled { color: var(--disabled-ink); cursor: wait; }
.chat-korrigieren:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
@media (hover: hover) { .chat-korrigieren:hover:not(:disabled) { color: var(--ink); } }
@media (prefers-reduced-motion: no-preference) {
.chat-korrigieren[data-zustand="laeuft"] .ico { animation: chat-korr-puls 1.1s ease-in-out infinite; }
}
@keyframes chat-korr-puls { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }
.chat-korr-fehler { margin: 0 0 6px; font-size: var(--grad-klein); }
/* Konrad (Bubby 5.11.2026), der KI-Assistent: schwarzer Kreis mit goldenem Funken wie die Leiste,
„Assistent“ als leise Marke neben dem Namen, Antwort-Knöpfe als Pillen unter seiner letzten
Nachricht, „Konrad schreibt …“ als kleine Blase mit drei Punkten. */
.chat-konrad-bild {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
background: var(--black);
color: var(--gold);
}
html.dark .chat-konrad-bild { color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }
.chat-kopf .chat-konrad-bild { width: 44px; height: 44px; flex: 0 0 auto; }
.chat-konrad-bild .ico { width: 24px; height: 24px; }
.chat-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: min(92%, 34rem); margin: 2px 0 6px; }
.chat-knopf-antwort { min-height: 44px; background: var(--card); text-align: left; }
html.dark .chat-knopf-antwort { background: var(--card); }
.chat-knopf-antwort:disabled { opacity: .55; }
@media (hover: hover) { .chat-knopf-antwort:not(:disabled):hover { background: var(--row-hover); } }
.chat-tippt { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--muted); font-size: var(--grad-klein); }
.chat-tippt-punkte { display: inline-flex; gap: 4px; }
.chat-tippt-punkte span { width: 6px; height: 6px; border-radius: 999px; background: currentColor; animation: chat-tippt 1.2s infinite ease-in-out; }
.chat-tippt-punkte span:nth-child(2) { animation-delay: .2s; }
.chat-tippt-punkte span:nth-child(3) { animation-delay: .4s; }
@keyframes chat-tippt { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-tippt-punkte span { animation: none; opacity: .7; } }
.person-konrad { flex: 1 1 100%; }
/* Auch als Personenbild auf Heute (Zeitstrahl): in Dunkel bleibt der Kreis schwarz mit Gold, nie beige. */
.avatar.chat-konrad-bild,
html.dark .avatar.chat-konrad-bild { background: var(--black); color: var(--gold); }
.avatar-s.chat-konrad-bild .ico { width: 18px; height: 18px; }
/* Ideen-Gruppe (6.11.2026): Konrad und Otto als kleiner Kreis neben dem Namen über ihrer Nachricht, auch in Dunkel schwarz mit Gold. */
.chat-wer-bild.chat-konrad-bild,
html.dark .chat-wer-bild.chat-konrad-bild { background: var(--black); color: var(--gold); }
.chat-wer-bild.chat-konrad-bild .ico { width: 14px; height: 14px; }
/* Chat „KI“: bis „Verstanden“ steht die einmalige Erklärung statt des Eingabefeldes. */
.chat-ki-erst { display: flex; flex-direction: column; }
.chat-ki-karte { display: grid; gap: 10px; margin: 0; padding: 16px; }
.chat-ki-karte h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--grad-karte); }
.chat-ki-karte h3 .ico { width: 22px; height: 22px; color: var(--gold-schrift); }
.chat-ki-karte p { margin: 0; }
.chat-ki-karte .primary { justify-self: stretch; min-height: 48px; }
.chat-ki-wichtig { padding: 10px 12px; border-radius: var(--radius-btn); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.chat-ki-rest { margin: 0 0 6px; font-size: var(--grad-klein); }
/* Welche KI etwas schrieb (Bubby 12.11.2026): nur „Ember“ oder „Gemini“, ganz klein und grau, ohne Zusatz. */
.ki-name { flex: none; font-size: var(--grad-marke); font-weight: 400; line-height: 1; letter-spacing: 0.01em; color: var(--muted); white-space: nowrap; }
.chat-blase.ist-eigen .ki-name { color: var(--auf-dunkel-leise); }
.chat-schnell .chat-schnell-ki { align-self: center; padding-right: 4px; }
.chat-korr-ki { margin: -4px 60px 4px 0; line-height: 1; text-align: right; }
/* Sprachanruf zu zweit (Bubby 2.11.2026): der Anruf-Bildschirm über allem,
auf dem Seitenboden (Hell Sand, Dunkel, Schwarz). Oben leise „App-Anruf ·
Ende-zu-Ende“ in kleinen Versalien, in der Mitte das Bild, der Name als
Titel mit dem Zustand als goldener Unterzeile, die Dauer; unten runde
Knöpfe: Annehmen Kräuter, Ablehnen und Auflegen Paprika, Stumm und
Lautsprecher wie der Hörer im Chat-Kopf. Liegt außerhalb von #app. */
.anruf-ebene {
position: fixed;
inset: 0;
z-index: 100;
background: var(--paper);
color: var(--ink);
container-type: inline-size;
}
/* Hängt das iPhone alles Feste zu hoch (86_Bedienung_Rendern.js), rückt der Anruf wie die Leiste nach. */
html.sicht-versetzt .anruf-ebene { transform: translateY(var(--sicht-versatz, 0px)); }
html.anruf-offen body { overflow: hidden; }
.anruf-ton-element { display: none; }
.anruf-flaeche {
box-sizing: border-box;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--abstand);
padding: calc(var(--kopf-abstand) + env(safe-area-inset-top)) var(--rand) calc(var(--abstand-gross) + env(safe-area-inset-bottom));
max-width: var(--personenbreite);
margin-inline: auto;
}
.anruf-flaeche:focus { outline: none; }
.anruf-marke {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
color: var(--gold-klein);
font-size: var(--grad-marke);
font-weight: var(--schnitt-stark);
letter-spacing: .08em;
text-transform: uppercase;
}
.anruf-marke .ico { width: 14px; height: 14px; }
.anruf-mitte {
flex: 1;
min-height: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--abstand);
text-align: center;
}
.anruf-bild {
width: min(128px, 36cqi);
height: min(128px, 36cqi);
font-size: var(--grad-vorstellung);
}
/* Klingelt es, trägt das Bild einen goldenen Ring (wie Ungelesenes im Zeitstrahl). */
.anruf-bild.ist-klingeln { box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--gold-schrift); }
.anruf-titel {
flex: none;
font-size: min(var(--grad-seitentitel), calc(100cqi / 8.5));
line-height: var(--lh-tight);
overflow-wrap: anywhere;
}
.anruf-titel .heading-subtitle { font-size: min(var(--grad-unterzeile), calc(100cqi / 9)); }
.anruf-zeit {
margin: 0;
min-height: 1.2em;
font-family: var(--head);
font-size: var(--grad-zahl);
font-weight: var(--schnitt-titel);
font-variant-numeric: tabular-nums;
}
.anruf-zeit.ist-leer { visibility: hidden; }
.anruf-meldung {
margin: 0;
max-width: 28rem;
color: var(--muted);
font-size: var(--grad-beschreibung);
line-height: var(--lh-body);
}
.anruf-ton { display: inline-flex; align-items: center; gap: 8px; }
.anruf-ton .ico { width: 20px; height: 20px; }
.anruf-knoepfe {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
gap: clamp(16px, 9cqi, 40px);
}
.anruf-knoepfe.ist-eingehend { justify-content: space-around; }
.anruf-knopf-feld {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 72px;
}
.anruf-knopf {
width: 72px;
height: 72px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
cursor: pointer;
touch-action: manipulation;
}
.anruf-knopf .ico { width: 30px; height: 30px; }
.anruf-knopf.ist-annehmen { background: var(--kraeuter); color: var(--auf-paprika); }
.anruf-knopf.ist-ablehnen,
.anruf-knopf.ist-auflegen { background: var(--paprika); color: var(--auf-paprika); }
.anruf-knopf.ist-stumm,
.anruf-knopf.ist-laut {
width: 60px;
height: 60px;
margin-block: 6px;
border: 1px solid var(--line);
background: var(--card);
color: var(--ink);
}
.anruf-knopf.ist-stumm .ico,
.anruf-knopf.ist-laut .ico { width: 26px; height: 26px; }
.anruf-knopf[aria-pressed="true"] { border-color: var(--black); background: var(--black); color: var(--auf-dunkel); }
html.dark .anruf-knopf[aria-pressed="true"] { border-color: var(--auf-dunkel); background: var(--auf-dunkel); color: var(--black); }
.anruf-knopf:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.anruf-knopf:active { transform: scale(0.96); }
.anruf-knopf-wort { color: var(--muted); font-size: var(--grad-klein); font-weight: var(--schnitt-titel); }
.anruf-zu { min-width: 10rem; }
@media (prefers-reduced-motion: reduce) {
.anruf-knopf:active { transform: none; }
}
@media (forced-colors: active) {
.anruf-knopf { border: 1px solid CanvasText; }
}
/* Die Zeile nach einem Anruf im Verlauf: Hörer davor, der verpasste in Schriftfarbe und kräftig. */
.chat-hinweis.ist-anruf > span { display: inline-flex; align-items: center; gap: 6px; }
.chat-hinweis.ist-anruf .ico { flex: none; width: 16px; height: 16px; }
.chat-hinweis.ist-verpasst { color: var(--ink); font-weight: var(--schnitt-titel); }
/* ==========================================================================
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;
}
/* fill-available wie in den Feld-Stilen: iPhone-Safari rechnet Datumsfelder content-box. */
.dates input { min-width: 0; margin-left: 0; width: 100%; width: -webkit-fill-available; 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); }
/* 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.
Android-Chrome/TWA und Safari geben die Systemschrift ohne
nicht an die Seite weiter (nur Chromes eigener
Seitenzoom wirkt). Das Meta-Tag nie ohne Begrenzung setzen: mit grosser
Systemschrift wuerde die ganze App groesser. Pruefen mit dem Profil
`default_font_size` nur mit `channel: 'chromium'` (die Headless-Shell
uebergeht es; CDP setFontSizes faellt beim Ganzseitenbild zurueck).
========================================================================== */
@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. */
.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; }
.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)); }
}