/* DIE Hauptschrift der App (24.10.2026) - siehe schrift.js. --f-text: Fliesstext, Knoepfe, Zahlen; --f-kopf: Ueberschriften
(heute dieselbe Schrift; steht hier getrennt, damit "Ueberschrift anders als Text" ein Wert ist und keine Umbauarbeit). */
:root {
--f-text: 'Rubik', 'Rubik Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--f-kopf: var(--f-text);
}
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/f/rubik-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;
size-adjust: 102%;
ascent-override: 102.94%;
descent-override: 34.31%;
line-gap-override: 9.8%;
}
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/f/rubik-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;
size-adjust: 102%;
ascent-override: 102.94%;
descent-override: 34.31%;
line-gap-override: 9.8%;
}
/* Ersatzschrift fuer die Zeit, bis die Datei da ist: Arial, auf die Textbreite und die senkrechten Masse der echten Schrift
gezogen (size-adjust & Co.) - dann springt beim Tausch nichts. Rechnung: tools/metrik.py, Haeufigkeit deutscher Buchstaben. */
@font-face {
font-family: 'Rubik Fallback';
src: local('Arial'), local('ArialMT');
size-adjust: 107.61%;
ascent-override: 97.58%;
descent-override: 32.53%;
line-gap-override: 9.29%;
}
@font-face {
font-family: 'Anton';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/f/anton-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;
}
@font-face {
font-family: 'Archivo Black';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/f/archivo-black-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;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/f/fraunces-500-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: 'Fraunces';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/f/fraunces-500-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;
}
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/f/source-serif-4-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;
}
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/f/source-serif-4-600-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;
}
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/f/source-serif-4-700-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;
}
:root {
/* Vintage-Retro nach Mathieus Vorlage (06.09.2026: "das ist fast zu 100%
wie ich will das die app aussieht"). Warmes Creme als Papier, gedecktes
Marine fuer die dunklen Bloecke, Tuerkis als Signalfarbe - dazu
Salbei, Waldgruen, Pfirsich und Senf als Kartenfarben.
Der wichtigste Wechsel: --accent war die Marken-Navy und ist jetzt
Tuerkis. Alles, was "hier klicken / das ist aktiv" heisst - Knoepfe,
der offene Tag im Streifen, der aktive Menuepunkt, die Haupt-Kachel -
wird damit tuerkis. Die dunklen Flaechen (Deckblock, Kennzahlen) haben
mit --deep eine eigene Farbe bekommen, weil sie eben KEINE Aktion sind:
vorher haben sich beide dieselbe Variable geteilt, und mit Orange als
Aktionsfarbe waere daraus eine ganze Seite in Orange geworden. */
--bg: #F5EEE1;
--surface: #FDF8EF;
--surface-2: #EFE4D2;
--surface-3: #E4D6BE;
--border: #E3D6C0;
--border-strong: #C8B698;
/* Rand der Eingabefelder (15.10.2026): vorher --hair-strong mit 1,38:1 -
ein leeres Feld war kaum zu sehen. #8A8F94 hat 3,08:1 gegen die Karte
(WCAG 1.4.11: Rand eines Bedienelements mindestens 3:1). */
--feldrand: #8A8F94;
/* Seit dem Dunkelmodus der Planung (25.10.2026) als Namen, was vorher fest in Regeln stand. --balken: die neutralen Balken der
Diagramme (Verlauf auf Heute) - vorher --border-strong mit 1,87:1 gegen die Karte, fuer eine Diagrammmarke gilt 3:1; jetzt 3,08:1. */
--balken: #8A8F94;
--strich-aus: #C4B69E;
--chip-flaeche: #FFFFFF;
--schleier-blatt: rgba(20, 24, 35, .42);
--schatten-leiste: 0 -8px 22px rgba(16, 24, 32, .1);
/* Diese vier setzt der Nachtmodus der Team-App NICHT um (und Welt 1 auch nicht): die Team-App sieht damit genau aus wie vorher, nur die
Planung im Dunkeln setzt eigene Werte (stil-dunkel.js). */
--feier-gruen: #42714A;
--fehler-ring: rgba(163, 49, 42, .18);
--deep-ink-leise: rgba(251, 245, 234, .72);
/* Die Zeichen der Bereiche im Hub (18.09./05.10.2026, gemessen in kontrast.test.js) und die Schrift auf dem News-Band - bewusst in
beiden Modi derselbe Wert, wie vorher fest in den Regeln. */
--abz-bar: #866AD2;
--abz-kueche: #238B72;
--abz-event: #C954A6;
--news-band-ink: #FFFFFF;
/* Trennlinien durchscheinend statt deckend: eine Haarlinie liest sich
deutlich leichter als eine volle Linie - das ist der auffaelligste
Unterschied zwischen "Formular" und "Liste". */
--hair: rgba(44, 58, 71, .11);
--hair-strong: rgba(44, 58, 71, .18);
--fill: rgba(44, 58, 71, .055);
--text: #2C3A47;
--text-soft: #2C3A47;
/* #6B7883 war zu hell: gemessen 3,92:1 auf --bg, 4,28 auf --surface, 3,60
auf --surface-2 und 3,16 auf --surface-3 - alle unter den 4,5:1, die
Text braucht. #525B64 ist dieselbe Farbfamilie, nur dunkler, und kommt
auf dem schlechtesten Grund auf 4,82:1. Der Nachtmodus war in Ordnung
(5,59 bis 7,53:1) und bleibt, wie er ist. */
/* Die vier Bereichstoene der Startseite (Mathieu, 15.09.2026: "lass uns die
startseite etwas farbenfroher machen mit schöne Pastel farben ... das die
verschiedenen bereiche besser getrennt sind", danach "Bau gerne A").
GRUNDSATZ: Pastell ist Papier, keine Aussage. Die gesaettigten Farben
dieser App bedeuten schon etwas - Orange "das geht dich jetzt an", Gruen
"ich mache das", Gold Kueche, Rot Allergie, und Blau ist tabu (Lab
Coffee). Kaemen fuenf kraeftige Toene dazu, hoerte keiner dieser Toene
mehr zu. Deshalb 5 bis 8 Prozent Saettigung: sie trennen die Bereiche
und reden nicht mit. Die Signalkarte bleibt das Lauteste auf der Seite -
daran sind die Toene gemessen, in beiden Modi.
Honig = dein Tag, Salbei = deine Woche, Flieder = Aufgaben,
Rosé = was los ist. */
/* SEIT DEM 05.10.2026 AUCH IN DER PLANUNG: kein Orange, kein Gold, zwei
Signalfarben (Mathieu: "Ja, mach das Backend auch so", nach der
Mitarbeiter-App: "nimm im hellen Modus auch das Orange raus. Ersetze
es" - gewaehlt "Nimm 2 Marine getoent"). Was unten ueber Signalorange,
Gold und die Bereichsfarben steht, ist die Geschichte dieser Werte; die
Werte selbst sind jetzt: Wahl = Marine getoent, knapp = Rot wie
kritisch, Gold = Grau ("wartet", "zu viel"), Bereiche = Grau. */
--p-tag: #E3EEDA; --p-tag-ink: #2F5E34;
--p-woche: #F1EDE6; --p-woche-ink: #525B64;
--p-hub: #F1EDE6; --p-hub-ink: #525B64;
--p-event: #F1EDE6; --p-event-ink: #525B64;
--muted: #525B64;
/* Die vierte Stufe der Tinte: „ausgeblendet". Nach Mathieus Vorbild-Blatt
(09.09.2026) ist Schrift EINE Tinte in Deckkraft-Stufen - 100 / 87 / 64 /
36 %. Beim Nachmessen stand heraus, dass die App die ersten drei schon
hat, nur ohne Namen: --text ist 100 %, --text-soft 87 %, --muted 64 %.
Die vierte fehlte, und ausgeblendete Zeilen behalfen sich mit
"opacity: .62" an der GANZEN Zeile - das nimmt auch den Raendern und
Knoepfen die Deckung mit. */
/* 18.10.2026 (Pruefung F13): #8A8F94 hatte auf Creme nur 3,08:1 - und er steht
an TEXT (ausgeblendete Personen "Adieu Bar", "noch nicht", leise Tabellenzeilen,
ca. 80 Stellen). #666D74 kommt auf der Karte auf 4,96:1, auf dem Papier auf
4,54:1 und bleibt sichtbar heller als --muted (#525B64): die vierte Stufe
"ausgeblendet" gibt es weiter. Der RAND der Eingabefelder bleibt --feldrand
(#8A8F94): fuer Umrisse reichen 3:1. */
--text-aus: #666D74;
/* Das "+" in der Woche und der gestrichelte Rand der Avatare bei "wartet"/"frei" (16.10.2026): vorher 1,86:1 bzw. 1,87:1, unter den 3:1 fuer Bedienelemente. */
/* 18.10.2026: das "+" ist ein Zeichen, also TEXT - #747A82 hatte 4,09:1, #6B7279 hat 4,61:1. */
--plus: #6B7279;
/* Gruppenfarben des Team Hubs (16.10.2026). Mathieu: "Finde die Richtung gut.
Maybe nicht ganz so viele Farben, sondern man fasst Bereiche wie Bestellung,
To-Dos etc. in Kategorien zusammen ... Soll nicht ganz so bunt sein, aber mehr
als nur Grau." Danach, nach vier Farben: "Ich finde, das sind immer noch zu
viele Farben." - und zu den Vorschlaegen: "Ich finde zwei Farben am besten."
Zwei gedaempfte Farben, der Name steht immer daneben:
Haselnuss (tun) To-Dos, Checklisten, Bestandsabgleich, Bestellung, Bestaende
Petrol (wissen) Nachschlagen, Hand Outs, Events (Torten seit 17.10.2026 bei Haselnuss, Mathieu: "Mach Torte auch in der selben Farbe wie To-Dos")
News bleibt Rosa-Rot (25.09.2026). Kein Gruen, kein Rot, kein Blau: gemessen
mindestens dE2000 18 zu Gruen, Rot, News und Marine, 32 untereinander
(gruppenfarben.test.js). Bar, Kueche und Office bleiben grau (05.10.2026). */
--g-tun-ink: #6F5242; --g-tun-tint: #F7ECE7; --g-wissen-ink: #006A70; --g-wissen-tint: #DCF3F4; --g-auf: #FFFFFF;
/* EINE TINTE (Mathieu, 08.09.2026: "dann bau deinen vorschlag so ein").
Die Handlungsfarbe ist das CI-Marine selbst - #283045, die echte
Markenfarbe von Adieu.
Warum keine fuenfte Farbe mehr: Terrakotta, Kobalt und Tuerkis sind
der Reihe nach durchgefallen. Beim Nachrechnen war klar, warum. Der
Farbkreis ist voll - Rot ist "fehlt" (32 Grad), Gold ist "wartet"
(84), Gruen ist "bestaetigt" (146), Marine ist Struktur (259), dazu
Kueche (64) und Office (347). Frei sind zwei schmale Zonen. Jede
fuenfte Farbe muss sich dazwischen durchquetschen und wirkt darum
beliebig. Bordeaux waere fuer eine Bar naheliegend gewesen und liegt
19 Grad vom "fehlt"-Rot: Weinrot und Fehler waeren dieselbe Farbe.
Und ein Fund beim Nachrechnen: die App hat das CI-Marine nie benutzt.
Sie hatte #2C3A47 - aehnlich, aber nicht dieselbe Farbe. Die
Markenfarbe kam im ganzen Produkt nicht vor.
Der Preis dieses Weges, offen benannt: im Hellen ist die Handlung vom
Text nicht zu unterscheiden - #283045 gegen #2C3A47 sind 1,13:1. Die
Handlung kann also NICHT ueber den Ton gesagt werden, nur ueber die
FORM. Daran haengt der ganze Entwurf, und er faellt, wenn die
Disziplin rutscht:
gefuellt = das eine Wichtige (Hauptknopf, heute)
umrandet = kannst du machen (Schicht nehmen, zweiter Rang)
unterstrichen = Link im Text
leise / Tinte = Struktur, keine Handlung
Das sind die drei Knopfraenge, die im Styleguide stehen und uns
gefehlt haben. Im Dunkeln traegt der Ton wieder: #A9B6CC gegen creme
#F0E9DA sind 1,69:1 und unterscheidbar.
Kontraste: als Schrift 12,4:1 auf der Karte, creme auf der Flaeche
ebenfalls 12,4:1, auf der Toenung 9,9:1. Naechste Statusfarbe 111
Grad entfernt - weiter weg als jede Farbe, die wir probiert haben. */
--accent: #283045;
--accent-hover: #1A2031;
/* Die Toenung ist der einzige Ort, an dem die Handlung im Hellen ohne
Form erkennbar ist - deshalb ein blaugrauer Papierton, nicht Creme.
(Vorher #F7DFCF - genau der Wert, der auch in der Toenung von
"kritisch" stand. "Hier tippen" und "kritisch" teilten sich also eine
Flaeche. Der Variablenname steht hier bewusst ohne Doppelpunkt
dahinter: der Palette-Test liest einen Variablennamen mit Doppelpunkt
als Deklaration, auch im Kommentar, und frisst dann alles bis zum
naechsten Semikolon - also die naechste echte Variable mit. Das ist
mir in dieser Sitzung viermal passiert, einmal sogar in dem Satz, der
davor warnen sollte.) */
--accent-soft: #DDE0E8;
--accent-ink: #FDF8EF;
/* --- WAS GERADE OFFEN IST (Mathieu, 09.09.2026) -------------------------
„bei Checklisten die Auswahl welche Liste man gerade angeklickt hat
nicht gut hervor" — gemessen war es schlimmer als eine Farbfrage: die
offene Liste war ÜBERHAUPT nicht markiert, ihre Zeile sah aus wie jede
andere. Und die Tönung, mit der die App sonst „das betrifft dich" sagt,
kommt im Dunkeln auf 1,42:1 gegen die Karte - eine Fläche kann das dort
nicht tragen.
Deshalb eine eigene Farbe, die NUR eines sagt: „das hier ist gerade
offen". Sie kommt als 4-px-Kante plus Tönung plus Name im Ton - die
Kante macht die Arbeit, die Fläche macht das Feld.
Das bricht „Eine Tinte" nicht: Handlung bleibt Marine und wird durch die
FORM gesagt. Dies ist ein ZUSTAND, kein Knopf, und er ist je Seite
genau einmal da.
SIGNALORANGE, von Mathieu gewählt (09.09.2026, aus neun Vorschlägen).
Er hat sich vorher Referenzen angesehen - satte, flächige Apps - und
danach entschieden.
Der bekannte Preis, offen benannt: 5 Grad von der Kuechen-Farbe (30°)
und 22 von Rot = "fehlt" (3°). Tragfaehig ist es, weil die Kueche ein
LEISES Braun ist (#C79A6E) und dieses Orange laut - und weil eine
Auswahl je Seite genau einmal vorkommt, ein Status aber ueberall.
Die anderen Vorschläge, alle nachgerechnet, falls es doch wandert:
Kobalt hell #1358B8 / #DCE7F8 dunkel #7FBBFF / #244463
Türkis hell #0E7A66 / #D6F0E9 dunkel #5CDCC2 / #1B4741
Kupfer hell #A0500C / #FBE3CE dunkel #FFB275 / #5F3D1E
Messing hell #8A6A12 / #F6E9C4 dunkel #F5D468 / #52411B
Kirsche hell #A8123C / #F9D3DE dunkel #FF7A99 / #4E2130
Senf hell #7A5809 / #F7E6B8 dunkel #EFC03A / #4A3A12
Limette hell #4E680B / #DCEFA8 dunkel #C6EE55 / #3A4A16
Pflaume hell #5B2C9E / #E6DCFA dunkel #C39BFF / #39285F
Die dunklen Töne sind eine Stufe heller als mein erster Entwurf: der
NAME steht im Wahlton auf der Tönung, und mit #5FA8FF auf #244463 waren
das 4,10:1 - unter den 4,5, die Schrift braucht. Der eigene Test hat das
gefunden, nicht das Auge. Heller machen statt die Tönung zurücknehmen:
die Tönung ist das Feld, das Mathieu sehen will. */
/* Ein Tag, an dem etwas laeuft: getoente Flaeche plus Punkt (Mathieu,
10.09.2026: "Getönte Kachel und Punkt finde ich für Events gut"). Steht
an der Wurzel und nicht am Kalender, weil zwei Stellen ihn brauchen -
der Monatskalender im Backend und der Wochenblock der Startseite. Er lag
bis zum 11.09.2026 in .plankalender; die Regel im Wochenblock griff
deshalb NICHT, ohne dass etwas kaputt aussah: eine unbekannte Variable
macht aus box-shadow ein stilles "none". Nur an der Messung zu sehen. */
--event-ton: rgba(40, 48, 69, .11);
--event-ton-stark: rgba(40, 48, 69, .17);
--wahl: #283045;
/* Die Toenung ist am 11.09.2026 von #FBDFC8 auf #FFDDC0 gerueckt. Grund
war eine Messung, nicht ein Eindruck: der einzige wirklich knappe Abstand
im ganzen Farbsystem lag hier, zwischen diesem blassen Pfirsich und der
blassen Rot-Toenung (#F3D8D4) - zwei Baender hintereinander in derselben
Liste, DeltaE2000 8,5. Jetzt sind es 10,1, und zum Gold-Band sind es
unveraendert 10,2.
Die Farbe SELBST bleibt Signalorange - Mathieu hat sie aus neun
Vorschlaegen gewaehlt, und daran aendert sich nichts. Verschoben ist nur
die Toenung, und zwar um 2,3: nebeneinander sichtbar, im Gebrauch
dieselbe Farbe.
Bewusst NICHT weiter: ein kraeftigeres Band trennt besser (bis 13,1
waeren drin), kostet aber den Namen im Wahlton darauf - er faellt dann
auf 4,52 und klebt an der 4,5-Grenze. So bleiben es 5,13, also dieselbe
Luft wie vorher. Im Dunkeln war nichts zu tun: dort stehen die
Toenungen schon 13,2 und 12,1 auseinander. */
--wahl-soft: #DDE0E8;
--wahl-ink: #FDF8EF;
/* Echtes, eigenstaendiges Rot NUR fuer die News-Karte (Mathieu, 25.09.2026:
"Rot NUR fuer News, bewusst als einzige Ausnahme von der einen
App-Signalfarbe. Ab jetzt bedeutet Rot 'News'"). Bewusst NICHT --crit
wiederverwendet, obwohl das die einzige andere rote Farbe im System ist:
--crit steht auf zwei Dutzend Fehler-/Kritisch-Stellen (Fehlerbanner,
"wenig Bestand", Notfall-Nummer) - eine News in derselben Farbe saehe aus
wie eine Fehlermeldung. Der Farbton ist deshalb 18 Grad von --crit weg
gedreht (Richtung Himbeere/Karmesin statt Feuerwehrrot) - derselbe
Abstand, den Mathieu am 09.09.2026 schon fuer "ein echtes Rot" gegenueber
dem alten Terrakotta fuer ausreichend befunden hat. Kontrast Schrift auf
Toenung nachgerechnet: 5,51:1 hell, 5,47:1 dunkel - beides ueber 4,5. */
--news: #A61E45;
--news-soft: #F7D9DE;
/* Rote FLAECHE mit weisser Schrift (News-Karte, 13.10.2026): hell das
News-Rot selbst (7,3:1), dunkel ein eigenes, weil Weiss auf dem
Rosa-Rot dort nur 2,7:1 haette - #C8325A hat 5,2:1. */
--news-band: #A61E45;
/* Die dunkle Flaeche: Deckblock, Kennzahlen-Kacheln, alles Ruhige. */
--deep: #2C3A47;
--deep-hover: #223038;
--deep-ink: #FBF5EA;
/* Nur fuer den "Schicht eintragen"-Knopf. Kontrast zur cremen Schrift
darauf: 5,4:1 - nachgerechnet, nicht geschaetzt. */
--gruen: #42714A;
--gruen-hover: #35603D;
--gruen-ink: #FFF8EE;
/* Gold bleibt unser weicheres Messing statt des satten Senfs aus der
Vorlage - es steckt in jedem Icon, und satter Senf war dort schon
eine Farbe zu viel. Salbei, Waldgruen und Pfirsich standen hier auch
mal als eigene Kartenfarben; sie sind wieder raus (siehe .tile), und
unbenutzte Variablen bleiben nicht stehen. */
--gold: #B8BEC6;
--gold-soft: #ECE9E3;
/* Bereichsfarben fuer Bar und Kueche (Mathieu, 07.09.2026: "trenne Kueche &
Bar farblich und praesenter").
Bewusst KEINE der Statusfarben: Gold heisst "wartet", Gruen "bestaetigt",
Tuerkis "hier klicken / heute", Rot "fehlt". Nimmt ein Bereich eine
davon, bedeutet dieselbe Farbe an zwei Stellen zwei verschiedene Dinge,
und die Ampel im Raster darunter ist nicht mehr lesbar.
Uebrig bleiben zwei dunkle, warme Toene aus derselben Familie: das
Marine der App fuer die Bar (der dunkle Tresen) und ein Lehmbraun fuer
die Kueche. Beide tragen creme Schrift, beide sind vom hellen
Tuerkis klar zu unterscheiden. */
--bar: #525B64;
--kueche: #525B64;
/* Office als dritter Bereich (Mathieu, 07.09.2026). Wieder KEINE
Statusfarbe: Gold heisst "wartet", Gruen "bestaetigt", Tuerkis "hier
klicken", Rot "fehlt". Uebrig bleibt ein dunkles, warmes Pflaume - aus
derselben Familie wie das Marine der Bar und das Lehmbraun der Kueche,
und von beiden klar zu unterscheiden. */
--office: #525B64;
/* Vier Farben fuer PERSONEN in der Kuechenplanung (Mathieu, 09.09.2026:
"dann bekommen die quasi in diese Tabelle jeweils eine eigene Farbe").
Hier ist Farbe ausnahmsweise Information und nicht Handlung.
Die Palette war eng: Tuerkis heisst "Menge" (das Bedarfsraster steht auf
derselben Seite), Lehmbraun IST die Kueche, Pflaume das Office, Gold
"wartet", Gruen "bestaetigt", Rot "fehlt", Marine "hier klicken", Blau
ist ganz draussen. Uebrig bleiben Beere, Kupfer, Moos und ein warmes
Anthrazit - vier verschiedene FARBTOENE, nachgerechnet gegen die
Zellflaeche (3,9-7,8:1) und mit cremer Schrift darauf (5,1-8,6:1).
Kupfer stand zuerst auf #B4602A und kam mit der Schrift nur auf 4,27:1 -
nachgerechnet, nicht geschaetzt, und dann nachgedunkelt.
WICHTIG: die Farbe ist nicht die einzige Unterscheidung. Jede Person hat
ihren festen PLATZ in der Zelle (erste Person oben, zweite darunter).
In der Helligkeit liegen die vier Toene nah beieinander - wer Farben
schlecht unterscheidet, liest die Ueberschneidung trotzdem, weil beide
Balken gefuellt sind. */
/* Die Mengenrampe des Bedarfsrasters als Tokens. Sie stand als feste
Hexwerte in den Regeln - und war damit im NACHTMODUS unlesbar: Stufe 2
hatte creme Schrift auf hellem Tuerkis, gemessen 1,09:1. Der Kommentar
daneben behauptete "jede Stufe 4,7:1 oder mehr"; das galt nur fuer hell.
Gefunden beim Umbau auf getippte Zellen (09.09.2026).
Stufen 1-4 tragen --text, 5-6 --accent-ink - in beiden Ansichten, weil
beide Tokens mitkippen. Der Rand einer Stufe ist die Farbe der naechsten,
damit die blasse Stufe 1 ueberhaupt eine Kante hat. */
--br1: #E8F1F0;
--br2: #CFE3E1;
--br3: #B5D6D3;
--br4: #96C4C1;
--br5: #2E7B77;
--br6: #283045;
--pf1: #7A2E4A;
--pf2: #A4551F;
--pf3: #4C6B2F;
--pf4: #4A4F55;
--pf-ink: #FDF8EF;
/* Die weichen Toene absichtlich DURCHSCHEINEND und nicht als eigene
Vollfarbe: so mischen sie sich mit dem Papier darunter und bleiben warm.
Als flaches #DDE3E8 war der Bar-Ton ein kaltes Blaugrau und fiel sofort
aus der Palette - am Bild gesehen, nicht am Wert. */
--bar-soft: rgba(44, 58, 71, .07);
--kueche-soft: rgba(44, 58, 71, .07);
--office-soft: rgba(44, 58, 71, .07);
--ok: #2F5E34;
--ok-soft: #C3D9B8;
--ok-ink: #FBF5EA;
/* Eine Nuance dunkler als frueher (#8A6A08, 12.09.2026). Grund ist eine
Messung, keine Laune: Gold-auf-Goldton kam auf 3,96:1, und in genau
dieser Paarung steht das Wort "offen" auf jeder Schichtkarte, im
Wochenkopf und in den Personaldaten - alles kleine, fette Schrift, fuer
die WCAG 1.4.3 4,5:1 verlangt. Jetzt 4,84:1 auf dem Goldton und 6,03:1
auf Papier. */
--warn: #A82B2B;
--warn-soft: #F6D0CA;
/* "Fehlt" war ein gebranntes Orange (#B4451C) - im Farbton nur DREI Grad
vom Terrakotta entfernt, das die Aktionsfarbe war. Solange beides da
war, hat das nicht gestoert: warm neben warm. Seit die Handlung tuerkis
ist (08.09.2026), ist Rot die einzige warme Farbe auf dem Bildschirm -
und jedes "0/4" im Kalender liest sich wie die Farbe, die wir grade
rausgenommen haben. Jetzt ein echtes Rot: 18 Grad weg vom alten
Terrakotta, 54 vom Gold ("wartet"), und als Schrift auf Creme 6,5:1
statt 5,2:1. */
--crit: #A82B2B;
--crit-ink: #FDF8EF;
--crit-soft: #F6D0CA;
/* Die vier Elevation-Stufen von Mathieus Blatt, mit negativer Streuung
(dort ausdruecklich als "0 2 4 -1" bis "0 4 4 -3" notiert): der
Schatten sitzt dicht an der Kante, statt als weite Wolke unter der Karte
zu liegen. Vorher waren es 26 und 44 px Weichzeichnung ohne Streuung -
weich und wolkig, das Gegenteil vom knappen Studio-Look. */
/* Die Schattenleiter aus Mathieus Styleguide. Sie stand hier, wurde aber
nur fuenfmal benutzt - daneben lagen neunzehn handgeschriebene Schatten,
dieselbe Absicht in anderen Zahlen (Mathieu, 16.09.2026: "denk immer
alle seiten durch in der app. das es einheitlich ist").
Jetzt gilt sie: -1 heisst "liegt auf" (Karte, Kachel, Knopf), -3 heisst
"schwebt" (Leiste, Schublade, Dialog). Und sie hat Nachtwerte, was die
handgeschriebenen nicht hatten. */
--schatten-1: 0 1px 2px -1px rgba(44,58,71,.10), 0 2px 4px -2px rgba(44,58,71,.08);
--schatten-2: 0 2px 4px -1px rgba(44,58,71,.11), 0 4px 8px -2px rgba(44,58,71,.08);
--schatten-3: 0 4px 8px -2px rgba(44,58,71,.12), 0 8px 16px -4px rgba(44,58,71,.09);
--schatten-4: 0 8px 16px -4px rgba(44,58,71,.14), 0 4px 4px -3px rgba(44,58,71,.10);
/* Die alten Namen bleiben und zeigen auf die Leiter - sonst muesste ich
achtzig Regeln anfassen, um zwei Werte zu aendern. */
--shadow: var(--schatten-2);
--shadow-lift: var(--schatten-3);
/* Ein feines Rauschen macht aus einer Farbflaeche Papier (Mathieu,
06.09.2026: "behalt die Papier optik bei"). Es ist ein winziges Bild,
das im Text der Seite selbst steht - keine zusaetzliche Datei, kein
Nachladen, und "img-src data:" steht ohnehin schon in der CSP. */
--korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
/* Die Sicherheitszone oben am iPhone, als Variable (Mathieu, 07.09.2026:
"ueber adieu team hub und jm muss das feld die gleiche hintergrund farbe
haben und soll nich transparent sein sonst scrollt man beim iphone da
ueber den hintergrund").
Als Variable und nicht direkt als env() in einer Regel: die Leiste hat
VIER Stellen, die ihre Polsterung setzen - die Grundregel, ".topbar.emp"
(spezifischer!) und zwei Kurzschreibweisen in Medienabfragen. Beim
ersten Versuch stand env() nur in der Grundregel, und ausgerechnet die
Mitarbeiterleiste - die mit "Adieu Team Hub und JM" - hat sie
ueberschrieben. Am Wert gemessen, nicht am Code gesehen: 8,8px statt der
erwarteten Polsterung. Vierter Fall derselben Sorte an diesem Tag.
Auf Geraeten ohne Sicherheitszone ist der Wert 0. */
/* Die Tinte des Wochenblocks auf der Startseite - als Variable, damit sie
im Nachtmodus umdrehen kann (dann ist sie creme, und der Block ist von
selbst der "Nachtblock" aus den Entwuerfen). */
--marine-ink: #2C3A47;
--safetop: env(safe-area-inset-top, 0px);
/* Die Radiusleiter aus Mathieus "Product UI Styleguide": 0 / 4 / 8 / 12 /
16. Vorher standen hier 18 / 13 / 10 - drei Werte, die auf keiner Leiter
lagen und einfach nach Gefuehl gesetzt waren. */
--radius: 16px;
--radius-sm: 12px;
--radius-xs: 8px;
--radius-klein: 4px;
/* Die fuenfte Stufe: die Pille. Sie stand 73-mal als "999px" und 7-mal als
"99px" im Stylesheet - derselbe Gedanke in zwei Schreibweisen.
(Mathieu, 16.09.2026: "denk immer alle seiten durch in der app. das es
einheitlich ist.") */
--radius-pille: 999px;
/* Der Seitenrand des Inhalts. Die Kopfzone zieht ihn negativ wieder ab, um
randlos zu sein - dafuer muss beides derselbe Wert sein. */
--pad: 1.1rem;
/* Nicht festgenagelt: die Nachtpalette setzt es auf dark, damit auch
Formularfelder und Scrollbalken mitgehen. */
color-scheme: light;
}
/* --- Nachtmodus ---------------------------------------------------------
Wieder angeschaltet (Mathieu, 07.09.2026: "schalte den night modus mal
wieder an"; abgeschaltet war er seit dem 06.09.: "lass es uns mal ohne
Night Modus machen ... Nightmodus kuemmern wir uns wann anders drum").
Die alte, auskommentierte Fassung liess sich NICHT einfach anschalten:
sie stammte aus der Zeit, als die Aktionsfarbe das Waldgruen war, und
setzte genau das als Akzent. Angeschaltet haette sie die halbe App im
Dunkeln gruen gemacht - jeden Knopf, jeden aktiven Reiter, jede Kachel.
Darum ist die Palette hier neu geschrieben, Ton fuer Ton gegen die helle.
(Der alte Wert steht bewusst nicht mehr im Stylesheet: er geht sonst an
jeden Browser mit raus, und ein Test sucht nach ihm.)
Zwei Bloecke, und beide braucht es:
- die Medienabfrage folgt der Systemeinstellung des Geraets. Das ist,
was "Nachtmodus an" im Alltag heisst.
- :root[data-theme="dark"] ist fuer eine spaetere Umschaltung von Hand.
Sie greift auch dann, wenn das System hell steht - und
:root:not([data-theme="light"]) in der Medienabfrage sorgt umgekehrt
dafuer, dass eine ausdrueckliche Wahl "hell" ein dunkles System
schlaegt.
Die PLANUNG nimmt an alledem nicht teil (Mathieu, 04.10.2026: "Die
Backend Seite sollte immer hell sein und nicht im Nachtmodus"): der Server
setzt dort data-theme="light" fest, und weil jede Dunkel-Regel mit
:root:not([data-theme="light"]) beginnt, bleibt sie hell - egal, was das
Telefon oder ein Cookie sagt. Der Nachtmodus gilt fuer die Mitarbeiter-App.
Bis zum 05.10.2026 war der Grundton ein warmes Marineschwarz mit
einer blaugrauen Handlungsfarbe (#A9B6CC). Seitdem gilt der Nachtmodus
"AC": Schwarz und Grau, Handlung weiss und an der Form erkennbar, nur
Gruen und Rot als Signal - Begruendung im Block selbst. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* Der Nachtmodus "AC" (Mathieu, 05.10.2026, nach fuenf gerenderten
Runden: "Bau A mit frischem Akzent, aber nimm das Orange raus").
Vorlage: Apple-modern - echtes Schwarz, Flaechen nur ueber die
Helligkeit gestaffelt, keine Raender, kein Korn - und genau EIN
frischer Gruen-Mint-Verlauf je Bildschirm (siehe DUNKEL_AC unten).
Vorher stand hier "Nacht-Marine" (#0A0E13, seit ca12011). Mathieu
dazu: "Finde das sieht so billig aus im Dunkelmodus" - gezaehlt lag
das an sieben Schriftgewichten, bis zu 13 Rahmenlinien je Bildschirm
und matschigen deckenden Toenungen, nicht am Farbton
(nachweise/dunkel-marine/runde4/).
ZWEI Signalfarben im Dunkeln (Mathieu, 05.10.2026: "maybe sind da zu
viele verschiedene Farben im Spiel - brauchen wir die alle?"):
Gruen = deins / nehmbar, Rot = es fehlt jemand.
Gold und Orange gibt es im Dunkeln nicht mehr:
- --warn (knapp) spricht Rot wie --crit. "1 fehlt" und "4 fehlen"
unterscheidet die Zahl, nicht die Farbe.
- --gold ist ein helles Grau: was gold war, hiess "wartet" oder
"Pause", und das ist kein Fehlen.
- --wahl ("gerade offen") ist Weiss: im Dunkeln sagt es die FORM
(ein kraeftiger heller Rahmen), nicht die Farbe.
Die Karte liegt 10,3 L* ueber dem Grund (Flaechen-Ordnung bleibt):
#1C1C1E auf #000000. Fliesstext 15,6:1 auf der Karte, Nebentext
#AAAAAF 7,4:1 auf der Karte und 4,9:1 noch auf der dritten Stufe. */
--bg: #000000;
--surface: #1C1C1E;
--surface-2: #2C2C2E;
--surface-3: #3A3A3C;
--border: #38383A;
--border-strong: #48484A;
--feldrand: #6E6E73;
--hair: rgba(255, 255, 255, .10);
--hair-strong: rgba(255, 255, 255, .16);
--fill: rgba(118, 118, 128, .24);
--text: #F5F5F7;
--text-soft: #D1D1D6;
--muted: #AAAAAF;
/* 36 % Schrift auf der Karte = 3,15:1. Bewusst UNTER 4,5: "ausgeblendet"
soll leise sein, und daneben steht immer das Wort. */
--text-aus: #6A6A6C;
--plus: #8E8E93;
--g-tun-ink: #D3AE9B; --g-tun-tint: #1C1410; --g-wissen-ink: #6BCFD6; --g-wissen-tint: #05191A; --g-auf: #0A0A0A;
/* Eine Tinte, auch im Dunkeln: Handlung ist hier Weiss, und was eine
Handlung ist, sagt die Form (gefuellt, getoent, unterstrichen). */
--accent: #F5F5F7;
--accent-hover: #FFFFFF;
--accent-soft: #2C2C2E;
--accent-ink: #000000;
--event-ton: rgba(255, 255, 255, .10);
--event-ton-stark: rgba(255, 255, 255, .16);
--wahl: #F5F5F7;
--wahl-soft: #3C3C3E;
--wahl-ink: #000000;
/* News bleibt Rosa-Rot - die eine Ausnahme, die Mathieu am 25.09.2026
ausdruecklich beschlossen hat ("Rot NUR fuer News"). */
--news: #FF6B8A;
--news-soft: #40292F;
--news-band: #C8325A;
--deep: #1C1C1E;
--deep-hover: #2C2C2E;
--deep-ink: #F5F5F7;
--gruen: #35CC68;
--gruen-hover: #48DE78;
--gruen-ink: #04140C;
--gold: #D1D1D6;
--gold-soft: #2E2E30;
--bar: #AAAAAF;
--kueche: #AAAAAF;
--office: #AAAAAF;
--br1: #1E3231;
--br2: #26433F;
--br3: #2E534E;
--br4: #38655F;
--br5: #7FBAB6;
--br6: #A9D6D2;
--pf1: #E39AB4;
--pf2: #E8A268;
--pf3: #A9C77E;
--pf4: #B0AAA1;
--pf-ink: #1A1814;
--bar-soft: rgba(255, 255, 255, .06);
--kueche-soft: rgba(255, 255, 255, .06);
--office-soft: rgba(255, 255, 255, .06);
--ok: #3AEE85;
--ok-soft: #1B4228;
--ok-ink: #04140C;
--warn: #FF5C4F;
--warn-soft: #402626;
--crit: #FF5C4F;
--crit-ink: #2A0705;
--crit-soft: #402626;
/* Keine Schatten auf Karten: auf Schwarz sieht man sie nicht, und
vorher mussten sie darum Rahmen tragen. Nur was schwebt (Leiste,
Menue, Fenster), behaelt einen. */
--schatten-1: none;
--schatten-2: none;
--schatten-3: 0 4px 8px -2px rgba(0,0,0,.6), 0 8px 16px -4px rgba(0,0,0,.5);
--schatten-4: 0 8px 16px -4px rgba(0,0,0,.7), 0 4px 4px -3px rgba(0,0,0,.6);
--shadow: var(--schatten-2);
--shadow-lift: var(--schatten-3);
--marine-ink: #F5F5F7;
--radius: 20px;
--radius-sm: 14px;
--nacht-kopf: #000000; --nacht-kante: rgba(255, 255, 255, .1); --nacht-leiste: #1C1C1E; --nacht-aktiv: rgba(255, 255, 255, .14); --nacht-punkt: #48484A; --nacht-punkt-ink: #FFFFFF; --nacht-menue-aktiv: rgba(255, 255, 255, .12); --nacht-menue-icon: rgba(255, 255, 255, .08); --nacht-heute: rgba(255, 255, 255, .06); --nacht-streifen: rgba(255, 255, 255, .05); --nacht-schleier: rgba(0, 0, 0, .6); --nacht-wahl: #505052; --nacht-gruen-ton: rgba(53, 204, 104, .18); --nacht-gruen-ton-hover: rgba(53, 204, 104, .26); --nacht-gruen-tinte: #4BE38A; --nacht-glanz: 0 8px 22px -10px rgba(62, 230, 176, .75); --nacht-glanz-leise: 0 10px 32px -14px rgba(62, 230, 176, .45); --nacht-gestrichelt: rgba(255, 255, 255, .45); --schatten-leiste: 0 -8px 22px rgba(0, 0, 0, .5); --balken: #6E6E73; --strich-aus: #48484A; --chip-flaeche: #2C2C2E; --schleier-blatt: rgba(0, 0, 0, .6); --feier-gruen: #42714A; --fehler-ring: rgba(163, 49, 42, .18); --deep-ink-leise: rgba(251, 245, 234, .72); --abz-bar: #866AD2; --abz-kueche: #238B72; --abz-event: #C954A6; --news-band-ink: #FFFFFF;
color-scheme: dark;
}
/* Bereiche haben im Dunkeln keinen eigenen Farbton mehr, nur eine Stufe
unter der Karte (#131315, 4,4 L* darunter - die Karte liegt obenauf,
Flaechen-Ordnung vom 16.09.2026). "Dein Tag" spricht Gruen (deins),
alles andere Grau. */
:root:not([data-theme="light"]) {
--p-tag: #091A10; --p-tag-ink: #3AEE85;
--p-woche: #131315; --p-woche-ink: #AAAAAF;
--p-hub: #131315; --p-hub-ink: #AAAAAF;
--p-event: #131315; --p-event-ink: #AAAAAF;
}
/* Kein Korn im Dunkeln: aufhellendes Korn auf Schwarz ist Rauschen. */
:root:not([data-theme="light"]) body::after,
:root:not([data-theme="light"]) .card::after,
:root:not([data-theme="light"]) .deckblock::after,
:root:not([data-theme="light"]) .planday::after,
:root:not([data-theme="light"]) .wblock::after,
:root:not([data-theme="light"]) .stkarte::after { opacity: 0; }
}
:root[data-theme="dark"] {
/* Siehe die Begruendung in der Medienabfrage oben. */
--p-tag: #091A10; --p-tag-ink: #3AEE85;
--p-woche: #131315; --p-woche-ink: #AAAAAF;
--p-hub: #131315; --p-hub-ink: #AAAAAF;
--p-event: #131315; --p-event-ink: #AAAAAF;
--bg: #000000; --surface: #1C1C1E; --surface-2: #2C2C2E; --surface-3: #3A3A3C;
--border: #38383A; --border-strong: #48484A; --feldrand: #6E6E73;
--hair: rgba(255, 255, 255, .10); --hair-strong: rgba(255, 255, 255, .16); --fill: rgba(118, 118, 128, .24);
--text: #F5F5F7; --text-soft: #D1D1D6; --muted: #AAAAAF; --text-aus: #6A6A6C; --plus: #8E8E93;
--g-tun-ink: #D3AE9B; --g-tun-tint: #1C1410; --g-wissen-ink: #6BCFD6; --g-wissen-tint: #05191A; --g-auf: #0A0A0A;
--accent: #F5F5F7; --accent-hover: #FFFFFF; --accent-soft: #2C2C2E; --accent-ink: #000000;
--event-ton: rgba(255, 255, 255, .10); --event-ton-stark: rgba(255, 255, 255, .16);
--wahl: #F5F5F7; --wahl-soft: #3C3C3E; --wahl-ink: #000000;
--news: #FF6B8A; --news-soft: #40292F; --news-band: #C8325A;
--deep: #1C1C1E; --deep-hover: #2C2C2E; --deep-ink: #F5F5F7;
--gruen: #35CC68; --gruen-hover: #48DE78; --gruen-ink: #04140C;
--gold: #D1D1D6; --gold-soft: #2E2E30;
--bar: #AAAAAF; --kueche: #AAAAAF; --office: #AAAAAF;
--br1: #1E3231; --br2: #26433F; --br3: #2E534E; --br4: #38655F; --br5: #7FBAB6; --br6: #A9D6D2;
--pf1: #E39AB4; --pf2: #E8A268; --pf3: #A9C77E; --pf4: #B0AAA1; --pf-ink: #1A1814;
--bar-soft: rgba(255, 255, 255, .06); --kueche-soft: rgba(255, 255, 255, .06); --office-soft: rgba(255, 255, 255, .06);
--ok: #3AEE85; --ok-soft: #1B4228; --ok-ink: #04140C;
--warn: #FF5C4F; --warn-soft: #402626;
--crit: #FF5C4F; --crit-ink: #2A0705; --crit-soft: #402626;
--schatten-1: none;
--schatten-2: none;
--schatten-3: 0 4px 8px -2px rgba(0,0,0,.6), 0 8px 16px -4px rgba(0,0,0,.5);
--schatten-4: 0 8px 16px -4px rgba(0,0,0,.7), 0 4px 4px -3px rgba(0,0,0,.6);
--shadow: var(--schatten-2); --shadow-lift: var(--schatten-3);
--marine-ink: #F5F5F7;
--radius: 20px; --radius-sm: 14px;
--nacht-kopf: #000000; --nacht-kante: rgba(255, 255, 255, .1); --nacht-leiste: #1C1C1E; --nacht-aktiv: rgba(255, 255, 255, .14); --nacht-punkt: #48484A; --nacht-punkt-ink: #FFFFFF; --nacht-menue-aktiv: rgba(255, 255, 255, .12); --nacht-menue-icon: rgba(255, 255, 255, .08); --nacht-heute: rgba(255, 255, 255, .06); --nacht-streifen: rgba(255, 255, 255, .05); --nacht-schleier: rgba(0, 0, 0, .6); --nacht-wahl: #505052; --nacht-gruen-ton: rgba(53, 204, 104, .18); --nacht-gruen-ton-hover: rgba(53, 204, 104, .26); --nacht-gruen-tinte: #4BE38A; --nacht-glanz: 0 8px 22px -10px rgba(62, 230, 176, .75); --nacht-glanz-leise: 0 10px 32px -14px rgba(62, 230, 176, .45); --nacht-gestrichelt: rgba(255, 255, 255, .45); --schatten-leiste: 0 -8px 22px rgba(0, 0, 0, .5); --balken: #6E6E73; --strich-aus: #48484A; --chip-flaeche: #2C2C2E; --schleier-blatt: rgba(0, 0, 0, .6); --feier-gruen: #42714A; --fehler-ring: rgba(163, 49, 42, .18); --deep-ink-leise: rgba(251, 245, 234, .72); --abz-bar: #866AD2; --abz-kueche: #238B72; --abz-event: #C954A6; --news-band-ink: #FFFFFF;
color-scheme: dark;
}
:root[data-theme="dark"] body::after,
:root[data-theme="dark"] .card::after,
:root[data-theme="dark"] .deckblock::after,
:root[data-theme="dark"] .planday::after,
:root[data-theme="dark"] .wblock::after,
:root[data-theme="dark"] .stkarte::after { opacity: 0; }
/* Die Haken und Radios der ganzen App. Bis zum 09.09.2026 stand hier
NICHTS - also malte jeder Browser jeden Haken in seinem eigenen Blau, und
Blau ist in diesem Haus tabu. Bei 43 Punkten auf einer Opening-Liste war
das die haeufigste Farbe der App, und sie war nicht von uns.
GRUEN, nicht die Wahlfarbe: ein gesetzter Haken heisst „erledigt", und
erledigt ist in dieser App gruen. Die Wahlfarbe sagt „das hier ist gerade
offen" - das ist etwas anderes. (Radios sind streng genommen eine Auswahl
und keine Bestaetigung; sie teilen sich die Eigenschaft mit den Haken, und
die Haken sind hundertmal haeufiger.) */
:root { accent-color: var(--gruen); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html { overscroll-behavior-y: none; }
body {
margin: 0;
overscroll-behavior-y: none;
background: var(--bg);
color: var(--text);
font-family: var(--f-text);
font-size: 1rem;
line-height: 1.47;
-webkit-font-smoothing: antialiased;
/* Alle Ziffern tabellarisch, im ganzen Dokument. In einem Dienstplan stehen
Zeiten und Stunden ueberall untereinander - mit proportionalen Ziffern
springen sie, und die Spalte sieht kaputt aus, ohne dass man sagen kann,
warum. */
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
/* Das Rauschen liegt zweimal auf der Seite: einmal ganz fein ueber allem,
und einmal etwas staerker auf jeder Karte, damit jede ihre eigene
Oberflaeche hat statt einer Folie darueber. "multiply" heisst: es dunkelt
nur ab, es hellt nie auf - deshalb sieht es nach Papier aus und nicht
nach Fernsehflimmern. Beide Schichten sind fuer Maus und Finger nicht da. */
/* Der Streifen unter Uhrzeit und Batterie, deckend und in der Farbe der
Kopfzeile. Zusaetzlich zur Polsterung der Leiste, nicht anstelle: die
Polsterung hilft nur, solange die Leiste wirklich oben klebt. In Safari
klappt die eigene Werkzeugleiste beim Scrollen weg, und in dem Moment
rutscht der Inhalt fuer einen Augenblick darueber - genau das zeigt
Mathieus Bild. Ein fest verankerter Streifen kann das nicht passieren.
Liegt ueber der Kopfzeile (20), unter Seitenleiste (30), Korn (39) und
Schublade (60). Hoehe 0 auf Geraeten ohne Sicherheitszone. */
body::before {
content: ""; position: fixed; top: 0; left: 0; right: 0;
height: var(--safetop); background: var(--surface);
z-index: 25; pointer-events: none;
}
/* Das Korn liegt UNTER der Leiste unten (40), nicht mehr ueber allem (90).
Mathieu, 15.10.2026: "die Menüzeile unten schwebt, wenn man scrollt, im
Raum - das ist ein Bug ... Das passiert immer mal wieder, wenn du was
umbaust". Es war diese Schicht, seit dem 06.09. (a16ba8f):
Safari ab iOS 26 zieht eine Leiste, die unten am Rand klebt, unter seiner
schwebenden Adressleiste bis an den Glasrand weiter - aber nur, wenn sie
die OBERSTE feste Schicht am unteren Rand ist. Das Korn ist eine feste
Schicht ueber dem ganzen Bildschirm; mit z-index 90 lag es ueber der
Leiste, Safari sah dort "keine Leiste", und die Leiste stand frei ueber der
Adressleiste, darunter scrollte die Seite durch. Im iPhone-Simulator
(iOS 27, Safari) Schicht fuer Schicht nachgestellt: Leiste allein - klebt;
Leiste + Korn darueber - schwebt; Korn darunter - klebt.
Deshalb haben die Fixes vom 16.09. (Streifen dahinter) und 05.10.
(bottom: 0, 61a3ab3) am iPhone nie gegriffen: sie haben an der Leiste
gedreht, das Korn lag weiter darueber. Am Rechner sieht man den Fehler
nicht - Chrome hat diese Adressleiste nicht.
Was das kostet: Schublade (60), Schleier (55), Blaetter (70) und
Rueckmeldung (45) liegen jetzt ueber dem Korn statt darunter - bei 9 %
Deckkraft auf deckenden Flaechen kaum zu sehen. unterleiste-fest.test.js
haelt die Reihenfolge fest. */
body::after {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 39;
background-image: var(--korn); opacity: .045; mix-blend-mode: multiply;
}
.card, .deckblock, .planday, .empmenu-icon {
position: relative; isolation: isolate;
}
.card::after, .deckblock::after, .planday::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
pointer-events: none; z-index: 0;
background-image: var(--korn); opacity: .1; mix-blend-mode: multiply;
}
/* Der Inhalt muss ueber dem Korn liegen, sonst legt es sich auf die Schrift
und die wird grieselig. */
.card > *, .deckblock > *, .planday > * { position: relative; z-index: 1; }
@media (prefers-reduced-transparency: reduce) {
body::after, .card::after, .deckblock::after, .planday::after { display: none; }
}
/* Schriftstufen nach dem Muster von Apples Textstilen: wenige, klar
getrennte Groessen, halbfett statt fett, und je groesser die Zeile, desto
enger der Buchstabenabstand. */
h1, h2, h3 { font-family: var(--f-kopf); font-weight: 600; margin: 0; }
h1 { font-size: 2rem; line-height: 1.18; letter-spacing: -.022em; }
h2 { font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.018em; }
h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.011em; }
p { margin: 0 0 .75rem; }
a { color: var(--accent); text-decoration: none; font-weight: 550; }
/* Ein Link im laufenden Text ist im Hellen NICHT am Ton zu erkennen - die
Handlungsfarbe und die Schriftfarbe sind 1,13:1 auseinander. Also traegt
ihn die Unterstreichung.
Die Regel greift ueber den ORT, nicht ueber "hat keine Klasse". Erster
Versuch war umgekehrt - alle nackten unterstrichen, alles mit Klasse
wieder aus - und hat sofort die Wortmarke oben links erwischt: "Adieu Team
Hub" ist ein im .brand, ohne eigene Klasse. So herum ist der Fehler in
die harmlose Richtung: ein vergessener Link im Text bleibt ohne
Unterstreichung, aber nichts in der Navigation bekommt eine. */
p a, li a, dd a, blockquote a, figcaption a, .hinweis a, .infoklapp a {
text-decoration: underline; text-underline-offset: .18em;
text-decoration-thickness: from-font;
}
a:hover { text-decoration: underline; }
small, .small { font-size: .875rem; line-height: 1.4; }
.duenn { font-weight: 300; }
.num, .mono, td .num { font-variant-numeric: tabular-nums; }
/* Grosse Zahlen brauchen weniger Abstand als Text, sonst fallen sie
auseinander. */
.bignum, .invstationstat .num, .invrhythm .cnt { letter-spacing: -.025em; }
/* Ein Wert am Zeilenende: rechtsbuendig, tabellarisch, bricht nie um. Das ist
die Stelle, an der die Zeiten im Dienstplan vorher umgebrochen sind. */
.value {
margin-left: auto; flex: none; text-align: right; white-space: nowrap;
font-variant-numeric: tabular-nums; color: var(--muted); font-size: 1rem;
}
.value strong { color: var(--text); font-weight: 600; }
/* "+1" heisst: die Schicht endet am naechsten Tag. In einer Bar ist das die
Regel, nicht die Ausnahme - also gehoert es an die Zahl. */
/* Gilt ueberall, wo eine Zeitspanne steht - nicht nur in .value. Sonst klebt
die "+1" auf der eigenen Schichtliste in voller Groesse an der Uhrzeit. */
.nextday {
font-size: .68em; font-weight: 700; vertical-align: .35em; margin-left: .12em;
color: var(--muted); letter-spacing: 0;
}
.topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
/* Der Streifen ueber der Leiste gehoert der Leiste (Mathieu, 07.09.2026:
"ueber adieu team hub und jm muss das feld die gleiche hintergrund farbe
haben und soll nich transparent sein sonst scrollt man beim iphone da
ueber den hintergrund").
Am iPhone reicht die Seite in die Sicherheitszone unter Uhrzeit und
Batterie. Dort stand nichts - also sah man den Seitenhintergrund in
einem anderen Creme als die Leiste, und beim Scrollen lief der Inhalt
dahinter durch. Die Leiste klebt an top: 0, also deckt ihre eigene
Flaeche den Streifen ab, sobald sie oben mitwaechst.
Auf Geraeten ohne Sicherheitszone ist der Wert 0 und es aendert sich
nichts. */
padding: calc(.75rem + var(--safetop)) 1rem .75rem;
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
position: sticky; top: 0; z-index: 20;
}
.topbar .brand { font-family: var(--f-kopf); font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; }
.topbar .brand span { color: var(--muted); font-weight: 500; }
.topbar nav { display: flex; flex-wrap: wrap; gap: .25rem; margin-left: auto; }
@media (max-width: 720px) {
/* Drei umgebrochene Reihen Navigation haben auf dem Handy mehr Platz
gebraucht als der Inhalt darunter. Jetzt: Titelzeile oben, darunter eine
Zeile Navigation, die man schiebt. */
.topbar { flex-wrap: wrap; gap: .25rem 0; padding: calc(.75rem + var(--safetop)) 0 .5rem; }
.topbar .brand { flex: 1 0 100%; padding: 0 1rem; font-size: 1rem; }
.topbar .brand span { display: none; }
.topbar nav {
flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0;
padding: .125rem 1rem .125rem .75rem;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 22px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 22px), transparent);
}
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a, .topbar nav .navform button { flex: none; white-space: nowrap; }
}
.topbar nav a, .topbar nav .navform button {
padding: .5rem .75rem; border-radius: var(--radius-pille); font-size: .875rem; font-weight: 550;
color: var(--text-soft);
}
.topbar nav a:hover { background: var(--fill); text-decoration: none; }
.topbar nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
/* Ein Punkt mit Zahl, nicht mit Farbe allein - Farbe uebertraegt sich nicht
in den Reiter-Text, den Screenreader vorlesen. */
.navbadge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 17px; height: 17px; margin-left: .25rem; padding: 0 .25rem;
border-radius: var(--radius-pille); background: var(--crit); color: var(--crit-ink);
font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
vertical-align: 1px;
}
.topbar nav a[aria-current="page"] .navbadge { background: var(--crit-ink); color: var(--crit); }
.topbar nav .navform { display: inline; margin: 0; }
.topbar nav .navform button {
border: 0; background: none; font-family: inherit; cursor: pointer; line-height: inherit;
}
.topbar nav .navform button:hover { background: var(--surface-2); }
/* Team-Menue: dieselbe Karte auf jeder Mitarbeiter-Seite, damit man nie
ohne Weg zurueck oder zu einer anderen Seite dasteht (Mathieu, 06.09.2026).
Zurueck-Pfeil links, das Menue geht ueber die Initialen rechts auf - reines
CSS (Checkbox-Trick), kein Skript noetig, die CSP bleibt unangetastet. */
/* Schlanker, seit der Menue-Knopf raus ist (08.09.2026: "Dann mach lieber
oben Schlanker"). Vorher bestimmte der 46 px hohe Avatar die Hoehe; jetzt
ist die Leiste das, was sie sein soll - Zurueck-Pfeil und Titel.
Gemessen: 65 px vorher, 53 px jetzt. Tiefer geht es NICHT, und das ist
Absicht: 44 px davon sind die Trefferflaeche des Titel-Links, und die ist
die Untergrenze aus Mathieus eigener Regelliste ("KEEP HIT AREA 44PX").
Was hier gespart wurde, ist genau das Polster - nicht die Bedienbarkeit. */
.topbar.emp {
gap: .5rem; flex-wrap: nowrap;
padding-top: calc(.25rem + var(--safetop)); padding-bottom: .25rem;
}
.topbar.emp .brand {
flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; padding: 0;
}
/* Der Weg zurueck auf die Startseite ist in der Mitarbeiter-App der
haeufigste Griff in dieser Leiste - er hatte aber nur 23 px Trefferhoehe
in einer 46 px hohen Leiste (gemessen, 08.09.2026). Jetzt fuellt er sie.
Der Elternteil behaelt Ellipsis und nowrap, darum inline-flex und nicht
block. */
.topbar.emp .brand a {
color: inherit; display: inline-flex; align-items: center; min-height: 44px;
}
.topbar.emp .brand a:hover { text-decoration: none; }
/* Hier stand der Avatar-Knopf, der das Schubfach oeffnete - mit den
Initialen und einem Menue-Abzeichen (Mathieu, 06.09.2026: "JM klarer als
Menuesymbol"). Er ist am 08.09.2026 weg: seit die Unterleiste einen
eigenen Menuepunkt hat, oeffneten zwei Knoepfe auf jedem Bildschirm
dasselbe Schubfach ("das ist etwas unnoetig oder? Dann mach lieber oben
Schlanker"). Die Initialen sind kein Verlust - der Kopf des Schubfachs
nennt den vollen Namen, und darum ging es dabei. */
/* Die Planung hat keine Initialen in der Kopfzeile (man ist der Betrieb,
nicht eine Person) - dort steht an derselben Stelle ein schlichtes
Menuesymbol. Der Punkt daran erscheint nur, wenn irgendwo etwas wartet. */
.burgerbtn {
position: relative; margin-left: auto; cursor: pointer; flex: none;
width: 46px; height: 46px; border-radius: var(--radius-pille);
background: var(--surface); border: 1.5px solid var(--accent); color: var(--accent);
display: flex; align-items: center; justify-content: center;
}
.burgerbtn svg { width: 18px; height: 14px; display: block; }
.burgerbadge {
position: absolute; right: 4px; top: 4px; width: 10px; height: 10px;
border-radius: var(--radius-pille); background: var(--crit); border: 2px solid var(--surface);
}
/* Deckblatt: Vollflaechen-Farbblock direkt unter der Kopfzeile (Mathieu,
06.09.2026, Waldgruen-Karten-Prototyp: "uebernehm einfach den prototyp
genau so"). Randlos wie .hero, aber als kraeftige Flaeche statt sanftem
Verlauf - eigene Klasse, damit die bestehende .hero (Startseite) davon
unberuehrt bleibt. */
/* Der Farbblock ist eine Karte, kein Balken (Mathieu, 06.09.2026: "doch nicht
so abrunden unten... oder du machst um Kalender und Hallo Mathieu so nen
ganzen Abstand zum Rand wie auf dem Bild"). Nur unten abzurunden hiess:
oben klebt er am Rand, unten schwebt er - das sah nach halber Sache aus.
Jetzt Abstand ringsum und ringsum rund.
Dieselbe Breite wie der Inhalt darunter (720 px, mittig), damit die Kanten
auf einer Linie liegen; ohne das waere der Block am Rechner breiter als
alles, was unter ihm steht. */
.deckblock {
background: var(--deep); color: var(--deep-ink);
/* Die Karten darunter stehen in .wrap.narrow: 720 px breit, davon links
und rechts je --pad Innenabstand. Ihre Aussenkante liegt also bei
720 minus zweimal --pad - genau darauf muss dieser Block, sonst steht er
am Rechner einen Daumen breiter da als alles unter ihm. */
/* width UND max-width: max-width allein hat auf dem Handy nichts bewirkt -
dort ist der Bildschirm schmaler als die Obergrenze, also lief der Block
wieder von Kante zu Kante. Die Breite nimmt den Abstand links und rechts
jetzt selbst heraus. */
width: calc(100% - 2 * var(--pad));
max-width: calc(720px - 2 * var(--pad));
margin: var(--pad) auto 0;
padding: 1.5rem 1.25rem 1.25rem;
border-radius: var(--radius);
}
.deckblock .deckkicker { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin-bottom: .25rem; }
/* Auf Unterseiten ist der Farbblock ein Titel, keine Begruessung: die
Startseite darf gross auftreten ("Hallo Aina"), eine Unterseite soll den
Platz dem Inhalt lassen. */
.deckblock { padding: 1rem 1rem 1rem; }
.deckblock h1 { font-size: 1.5rem; }
.deckblock .deckkicker { margin-bottom: .125rem; }
.deckblock .deckcaption { margin-top: .5rem; }
.deckblock h1 { color: var(--deep-ink); font-size: 1.75rem; letter-spacing: -.02em; margin: 0; }
/* Im Dunkeln traegt der Block keinen Lichtschein mehr (Nachtmodus AC,
05.10.2026): die Flaeche ist die Karte, siehe DUNKEL_AC am Ende. */
.deckblock .deckcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; font-size: .875rem; opacity: .85; flex-wrap: wrap; }
/* Das kleine "i" im Farbblock: fuehrt nach unten zur Hilfe. Bewusst leise -
es ist eine Nebentuer, kein Knopf, und der Kalender soll den Blick
bekommen. */
/* Eine Erklaerung hinter einem "i" (Mathieu, 08.09.2026). Das "i" sitzt in
der Ecke der Karte, die Erklaerung klappt darunter auf.
Das "i" ist ABSOLUT gesetzt und liegt damit ausserhalb des Textflusses.
Der erste Versuch hatte es als Feld in der Kartenueberschrift, und beim
Aufklappen sprang es in eine neue Zeile - am Bild gesehen. Jetzt bleibt es
an derselben Stelle, ob offen oder zu.
Die Trefferflaeche ist 34 px, nicht die Groesse des Zeichens: ein "i" ist
16 px breit, und das trifft am Handy niemand. */
/* --- "Etwas melden" auf dem Hub, eingeklappt ---------------------------
Mathieu, 08.09.2026. Das Formular hat offen sieben Felder und damit zwei
Drittel des Bildschirms gefuellt - waehrend "To-Dos" und "Kaufen", die
zwei Sachen, wegen denen man den Hub aufmacht, zwei graue Saetze darueber
waren. Melden ist das, was man am seltensten tut.
Der Aufklapper sieht aus wie der Kartenkopf, den er ersetzt: derselbe
Schriftgrad, dieselbe Zeile mit dem Hinweis rechts. Dazu ein Pfeil, damit
man sieht, dass da noch etwas ist - und 44 px Trefferflaeche, weil der
Kopf jetzt der Schalter ist. */
details.meldeklapp > summary {
display: flex; align-items: center; gap: .5rem;
cursor: pointer; list-style: none; padding: 0; min-height: 44px;
}
details.meldeklapp > summary::-webkit-details-marker { display: none; }
.mkltitel { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
details.meldeklapp > summary::after {
content: ""; margin-left: auto; flex: none;
width: .5rem; height: .5rem;
border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
transform: rotate(45deg); transition: transform .12s ease;
}
details.meldeklapp[open] > summary::after { transform: rotate(-135deg); }
details.meldeklapp > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-klein); }
details.meldeklapp[open] > summary { margin-bottom: .5rem; border-bottom: 1px solid var(--hair); padding-bottom: .5rem; }
/* position: static ist hier NOETIG und kein Versehen. ".card > *" gibt
jedem direkten Kind der Karte "position: relative" (damit der Text ueber
dem Papierkorn liegt) - damit wurde das selbst der Anker fuer
das absolut gesetzte "i", und das "i" hing an der Erklaerung statt an der
Karte. Gemessen: offsetParent war ".infoklapp", nicht ".card".
Siebter Fall derselben Fehlerfamilie in dieser Woche.
Die Schicht ueber dem Korn holen sich Zeichen und Text unten selbst. */
.infoklapp { position: static; margin: 0; }
/* Das "i" sitzt absolut in der rechten obenen Ecke der Karte - also muss die
Kopfzeile dort Platz lassen, sonst laeuft ihr rechter Teil darunter.
Gefunden im eigenen Screenshot der Nachweis-Seite: "Dienstag, 8. September"
lag unter dem Zeichen. Dieselbe Klasse Fehler wie beim Zurueckziehen-Knopf
am 08.09. - ein absolut positioniertes Element ueber Text, im Quelltext
nicht zu sehen.
Als :has()-Regel und nicht von Hand an dieser einen Karte: sonst faellt es
an der naechsten Karte mit "i" wieder auf. */
.card:has(> .infoklapp) > .card-head,
.card:has(> details.infoklapp) > .card-head { padding-right: 2.5rem; }
.infoklapp > summary {
position: absolute; top: .8rem; right: .85rem; z-index: 2;
list-style: none; cursor: pointer;
width: 34px; height: 34px;
display: grid; place-items: center;
color: var(--muted); font-size: 1rem; line-height: 1;
border-radius: var(--radius-pille);
}
.infoklapp > summary::-webkit-details-marker { display: none; }
/* Das Zeichen bleibt 34 px gross, die Tippflaeche waechst unsichtbar auf 44
(Team-Ansicht, 15.10.2026). */
.infoklapp > summary::before { content: ''; position: absolute; inset: -5px; }
.infoklapp > summary:hover { color: var(--text); background: var(--fill); }
.infoklapp > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.infoklapp[open] > summary { color: var(--accent); background: var(--accent-soft); }
.infoklapp > p {
/* Kein negativer Rand: er kollabierte durch das hindurch und
zog beim Aufklappen den ganzen Block um 6 px nach oben. Am gemessenen
Wert gesehen, nicht am Code. */
position: relative; z-index: 1;
margin: 0 0 .75rem; font-size: .875rem;
border-left: 3px solid var(--border); padding-left: .75rem;
}
/* Startseite: keine weisse Leiste darueber, der Farbblock traegt den Kopf
selbst. Wortmarke und Menue auf einer Zeile, darunter die Begruessung. */
/* Die Ziehharmonika der sieben Tage (Radio + Label, ohne Skript) ist am
12.09.2026 entfallen - mit ihr der Tagesstreifen davor, der schon vorher
abgeloest worden war. Was sie konnte, kann die Wippe unten besser: sie
zeigte alle sieben Tage, aber der heutige begann an einem Samstag bei
819 px, und der Bildschirm ist 812 hoch. */
/* --- Ein Tag statt sieben (12.09.2026) ---------------------------------
Die Woche war eine Ziehharmonika: sieben Balken, einer offen. An einem
Samstag begann der heutige Tag damit bei 819 px, und der Bildschirm ist 812
hoch. Jetzt steht EIN Tag da, gewechselt wird mit der Wippe oben - der
Griff, den Mathieu aus Gastromatic kannte. */
.tagwechsler { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; }
/* 44 px, weil das hier der am oeftesten gedrueckte Knopf der Seite wird. */
.twpfeil {
flex: none; width: 44px; height: 44px; border-radius: var(--radius-pille);
border: 1.5px solid var(--border); background: var(--surface);
display: flex; align-items: center; justify-content: center;
font-size: 1.3125rem; line-height: 1; color: var(--text); text-decoration: none;
}
.twpfeil:hover { border-color: var(--accent); text-decoration: none; }
.twpfeil:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Gibt es keine Nachbarwoche, bleibt der Platz - aber der Pfeil ist kein
Weg mehr. Ein Knopf, der nichts tut, ist schlimmer als eine Luecke. */
.twpfeil.aus { color: var(--text-aus); border-style: dashed; cursor: default; }
.twmitte { flex: 1; text-align: center; min-width: 0; }
.twtag {
display: block; font-family: var(--f-text); font-weight: 700;
font-size: 1.3125rem; letter-spacing: -.02em; line-height: 1.15;
}
.twdatum { display: block; font-size: .875rem; color: var(--muted); margin-top: .125rem; }
.twheute {
display: inline-block; margin-left: .5rem; padding: .125rem .5rem;
border-radius: var(--radius-pille); background: var(--accent); color: var(--accent-ink);
font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
vertical-align: middle;
}
/* --- Der Tageskopf im Team-Bereich (Mathieu, 16.09.2026: "Ja, bau 1-4") ---
Drei Bloecke haben auf "Schicht eintragen" denselben Tag ausgesucht:
Umschalter, Wippe, Streifen - gemessen 279 px ueber der ersten Schicht,
ein Drittel des Bildschirms bei 390x844. Jetzt zwei Zeilen: hier das
Datum mit dem Umschalter daneben, darunter der Streifen.
Die Wippe bleibt, wo sie gebraucht wird - in der Planung im Backend. */
.tagkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin: 0 0 .75rem; }
.tkwo { display: flex; flex-direction: column; min-width: 0; }
.tkrechts { flex: none; }
/* Der Wochentag ist die Marke, das DATUM ist die Ueberschrift - umgekehrt
zur Wippe. "Freitag" gibt es jede Woche, "18. September" nur einmal. */
.tagkopf .twtag {
display: block; font-size: .625rem; font-weight: 800; letter-spacing: .14em;
text-transform: uppercase; color: var(--muted); line-height: 1.2;
}
.tagkopf .tkdatum {
display: block; font-family: Anton, "Archivo Black", sans-serif; font-weight: 400;
font-size: 1.5rem; line-height: 1.05; letter-spacing: .01em; color: var(--text);
}
/* Nur, was KEINE Zahl ist ("du hast Urlaub"). Leer faellt die Zeile weg. */
.tagkopf .twdatum { display: block; font-size: .75rem; color: var(--muted); margin-top: .125rem; }
.tagkopf .twdatum:empty { display: none; }
.tagkopf .twheute {
margin-left: .25rem; padding: .125rem .25rem; font-size: .625rem;
background: var(--accent); color: var(--accent-ink);
}
/* Der Umschalter neben dem Datum: kleiner als in einer eigenen Zeile, weil
er dort die ganze Breite hatte und hier nur seine zwei Woerter braucht. */
.tagkopf .ansichtwahl2 { margin: 0; padding: 3px; }
/* Kleiner in der Schrift, aber NICHT im Tippziel: "min-height: 0" hat ihn
am 16.09.2026 auf 29 px gedrueckt - gemessen im Rundgang durch alle
Seiten, nicht bemerkt beim Bauen. Die Regel der App ist 44. */
.tagkopf .aw2 { font-size: .75rem; padding: .25rem .75rem; }
/* Die Winkel - die Pfeile der alten Wippe. Seit dem 05.10.2026 stehen sie
im Tageskopf neben dem Umschalter und sind ein volles Tippziel: 44 x 44.
An den Enden des Streifens waren sie 22 px breit, weil die sieben Tage die
Breite brauchten - sieben mal 44 plus zwei mal 44 passt in 358 px nicht. */
.wszwinkel {
flex: none; width: 44px; min-height: 44px; border-radius: var(--radius-pille);
display: flex; align-items: center; justify-content: center;
color: var(--muted); text-decoration: none; font-size: 1.125rem; line-height: 1;
}
.wszwinkel:hover { color: var(--text); text-decoration: none; background: var(--fill); }
.wszwinkel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Gibt es keinen Nachbartag, bleibt der Platz - aber der Winkel ist kein
Weg mehr. Dieselbe Regel wie bei den Pfeilen der Wippe. */
.wszwinkel.aus { color: var(--text-aus); cursor: default; }
/* Eingesprungen: die eigene Bilanz und das, was im Laden gerade passiert ist.
Gold, weil es dieselbe Farbe ist, mit der die App "hier fehlt jemand" sagt -
wer einspringt, macht genau daraus ein Gruen. */
.card.einspring { border-color: var(--gold); }
.espruch { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border-radius: var(--radius-sm); background: var(--gold-soft); }
.eszahl {
flex: none; width: 38px; height: 38px; border-radius: var(--radius-pille); display: grid; place-items: center;
background: var(--gold); color: var(--deep); font-size: .875rem; font-weight: 800;
font-variant-numeric: tabular-nums;
}
/* Die Liste der ANDEREN Einspringer ist am 15.09.2026 weggefallen (Mathieu:
"bei mir steht immer noch eingesprungen alexandra das sollte nur bei
Alexandra stehen") - und mit ihr ihre Regeln. Totes CSS faellt nicht auf,
bis jemand eine Klasse wiederverwendet und sich wundert. */
/* Mit wem du stehst: kleine Kreise unter der eigenen Schicht im Wochenblock
(Mathieu, 12.09.2026). Gold heisst "wartet noch auf Bestaetigung" -
dieselbe Bedeutung wie ueberall sonst. */
.wcrew { display: inline-flex; align-items: center; gap: .125rem; margin-left: .125rem; vertical-align: middle; }
.wcav {
width: 20px; height: 20px; border-radius: var(--radius-pille); display: inline-grid; place-items: center;
background: var(--fill); border: 1px solid var(--hair); color: var(--text-soft);
font-size: .625rem; font-weight: 800; letter-spacing: .01em;
}
.wcav.wartet { background: var(--gold); border-color: var(--gold); color: var(--deep); }
.wcmehr { font-size: .625rem; font-weight: 700; color: var(--muted); margin-left: .125rem; }
/* Deine Woche als Balken - das Ziel, auf das sich das Eintragen zubewegt
(Mathieu, 12.09.2026: "es soll eine art belohnungs gefuehl geben wenn ein
mitarbeiter sich z.b schichten eintraegt"). Belohnung braucht ein Ziel,
sonst ist sie Konfetti ohne Anlass. */
.wfort {
margin: 0 0 .75rem; padding: .5rem .75rem;
border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--surface);
}
.wfkopf { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.wftitel { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wfzahl { font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wfbahn {
display: block; height: 8px; border-radius: var(--radius-pille); background: var(--fill);
margin: .5rem 0 .25rem; overflow: hidden;
}
.wffuell {
display: block; height: 100%; border-radius: var(--radius-pille);
background: linear-gradient(90deg, var(--gold), var(--accent));
transition: width .35s ease;
}
.wfsatz { font-size: .75rem; color: var(--muted); }
/* Erreicht: der Balken wird gruen, die Zahl auch - und der Satz sagt es in
drei Woertern. Gefeiert wird nur der Moment, in dem es kippt. */
.wfort.voll { border-color: var(--gruen); }
.wfort.voll .wffuell { background: var(--gruen); }
.wfort.voll .wfzahl { color: var(--ok); }
.wfort.voll .wfsatz { color: var(--ok); font-weight: 650; }
@media (prefers-reduced-motion: reduce) {
.wffuell { transition: none; }
}
/* Der Wochenkopf: eine Zeile fuer das, wofuer vorher ein 107-px-Block oben
auf der Seite stand (Mathieu, 12.09.2026: "ist zwar informativ, aber nimmt
viel platz weg"). Und er traegt den Wochenwechsel, den die Tagesansicht
sonst gar nicht mehr hatte. */
.wochenkopf {
display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem;
}
.wkmitte {
flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
gap: .5rem; flex-wrap: wrap;
}
.wklabel {
font-size: .875rem; font-weight: 650; color: var(--text-soft);
font-variant-numeric: tabular-nums;
}
.wkfehlt {
font-size: .75rem; font-weight: 700; padding: .125rem .5rem; border-radius: var(--radius-pille);
background: var(--warn-soft); color: var(--warn); flex: none;
}
.wkfehlt.voll { background: var(--ok-soft); color: var(--ok); }
.wkpfeil {
flex: none; width: 34px; height: 34px; border-radius: var(--radius-pille);
display: flex; align-items: center; justify-content: center;
font-size: 1.125rem; line-height: 1; color: var(--text-soft);
background: var(--fill); text-decoration: none;
}
.wkpfeil:hover { text-decoration: none; }
.wkpfeil.aus { opacity: .28; }
.wkpfeil:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Die Woche als schmaler Streifen: sieben Felder mit der Zahl offener
Schichten. Er beantwortet "wo fehlt noch jemand" ohne einen Tipp - das
konnte die Ziehharmonika auch, nur brauchte sie 350 px dafuer. */
.wochestreifen { display: flex; gap: .25rem; margin: 0 0 1.25rem; }
.wsztag {
flex: 1; min-width: 0; min-height: 48px; border-radius: var(--radius-sm);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: .125rem; padding: .25rem .125rem;
background: var(--fill); color: var(--muted); text-decoration: none;
font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}
.wsztag:hover { text-decoration: none; }
.wsztag.ist-an { background: var(--accent); color: var(--accent-ink); }
/* Vorbei heisst blass, nicht weg: nachsehen will man manchmal doch. */
.wsztag.vorbei { opacity: .78; } /* 18.10.2026: .45 gab 1,9:1 - siehe Block "Grosse Schrift" unten */
.wsztag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Die Zahl sitzt in einer Pille und traegt die Farbe (Mathieu, 12.09.2026:
"dann sollte die zahl rot sein oder so ... bzw. orange" und "dann sollte
das irgendwie gruen sein oder nen haken"). Drei Zustaende, eine Sprache -
dieselbe, die auch die Schichtkarte spricht:
gold es fehlt jemand
rot es faengt binnen 72 Std an ODER es fehlen drei und mehr
gruen ✓ hier passt alles
Welcher Zustand wann gilt, steht in bedarf.js, nicht hier. */
/* Die Tagesnummer unter dem Wochentag. Erst noetig, seit der Streifen rollt:
"Mo" ist dann nicht mehr "der Montag dieser Woche", sondern irgendein
Montag - und welcher, sagt nur das Datum. */
.wszdatum { display: block; font-size: .625rem; font-weight: 600; color: var(--muted); line-height: 1.1;
font-variant-numeric: tabular-nums; }
.wsztag.ist-an .wszdatum { color: inherit; opacity: .85; }
.wszzahl {
/* inline-flex mit zentrierter Achse, nicht nur min-width: sonst klebt eine
einstellige Zahl am linken Rand, sobald die Pille breiter ist als ihr
Inhalt - und das ist sie bei jeder einzelnen Ziffer (Mathieu,
12.09.2026: "mach die zahlen immer mittig von der Pille"). Gilt fuer
beide Achsen: der Haken sitzt sonst auch einen Hauch zu tief. */
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px; padding: 0 .25rem; border-radius: var(--radius-pille);
font-size: .875rem; font-weight: 800; line-height: 1;
/* Ein Pixel nach unten. Gemessen, nicht geschaetzt: eine Ziffer in Poppins
800 hat bei 13,44 px eine Oberlaenge von 9,68 px und KEINE Unterlaenge -
mittig gesetzt sass sie damit 5,60 px unter der Oberkante und 6,72 px
ueber der Unterkante, also 1,1 px zu hoch. Die Zeilenbox war mittig, die
Glyphe darin nicht. */
padding-top: 1px;
font-variant-numeric: tabular-nums;
background: var(--gold); color: var(--deep);
}
/* Gefuellt statt zart getoent, und das ist nachgerechnet: die Zahl ist 13 px
fett und damit kleine Schrift - WCAG 1.4.3 fordert 4,5:1. Gold auf dem
zarten Goldton kam auf 3,96:1 hell. Die gefuellten Paare liegen bei
5,20 (Gold/Tinte), 6,52 (Rot) und 8,27 (Gruen) hell und noch hoeher
dunkel. Es sind dieselben Paare, mit denen die App sonst schon
"wartet" und "bestaetigt" sagt. */
.stufe-knapp > .wszzahl { background: var(--gold); color: var(--deep); }
.stufe-kritisch > .wszzahl { background: var(--crit); color: var(--crit-ink); }
.stufe-voll > .wszzahl { background: var(--ok); color: var(--ok-ink); }
/* Vergangene Tage rufen nach keiner Entscheidung mehr - die Zahl bleibt, die
Farbe geht. Sonst zieht ein rotes Feld den Blick auf etwas, an dem sich
nichts mehr aendern laesst. */
.stufe-vergangen > .wszzahl { background: transparent; color: var(--text-soft); }
/* Tag oder Monat. Der Monatskalender ist damit nicht weg - er liegt nur nicht
mehr ueber der Tagesarbeit (Mathieu, 12.09.2026: "der Monatsansicht finde
ich gut das man oben so wechseln kann"). */
.ansichtwahl2 {
display: flex; gap: .25rem; margin: 0 0 1rem;
background: var(--fill); border-radius: var(--radius-pille); padding: .25rem;
}
.aw2 {
flex: 1; text-align: center; padding: .5rem 0; border-radius: var(--radius-pille);
font-size: .875rem; font-weight: 650; color: var(--text-soft); text-decoration: none;
min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.aw2:hover { text-decoration: none; }
.aw2.ist-an { background: var(--surface); color: var(--text); box-shadow: var(--schatten-1); }
.aw2:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.monatssatz { font-size: .875rem; color: var(--text-soft); margin: 1rem 0 .5rem; }
.monatssatz strong { color: var(--text); }
/* Was der Monat noch frei hat - ein Weg, kein Satz: wer das liest, will
meistens gleich hin (Mathieu, 16.09.2026). Deshalb ein Link mit Winkel und
kein Absatz mit einer Zahl darin.
Die Wahlfarbe, weil es genau das heisst, wofuer sie da ist: "geht dich
jetzt an". */
.monatsfrei { margin: .125rem 0 .5rem; font-size: .875rem; }
.monatsfrei a {
display: inline-flex; align-items: center; gap: .25rem; min-height: 44px;
color: var(--text); text-decoration: none; font-weight: 600;
}
.monatsfrei a strong { color: var(--wahl); }
.monatsfrei a:hover { text-decoration: underline; }
/* Eine Schicht als Karte: oben Name und Zeit, darunter wer schon drin ist,
unten der Knopf. Die Stundenzahl steht AUF dem Knopf - vorher sagte sie nur
der Summenknopf unten, und den gibt es nicht mehr. */
/* Die Schicht als ZEILE (Mathieu, 13.09.2026: "wie koennen wir die eintragen
seite wochenansicht noch uebersichtlicher machen?").
Gemessen: eine Karte brauchte 176 px fuer fuenf Woerter, ein Freitag mit
sieben Schichten 1495 px. Jetzt passt derselbe Tag auf einen Bildschirm -
mit Kueche, Stundenleiste und Wochenbalken. */
.szliste {
background: var(--surface); border: 1.5px solid var(--border);
border-radius: var(--radius-sm); overflow: hidden;
}
.schichtkarte {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
padding: .5rem .75rem; border-top: 1px solid var(--hair);
background: var(--surface);
}
.schichtkarte:first-child { border-top: 0; }
/* Der Text links darf schrumpfen, der Knopf rechts nie. */
/* flex-basis 0, nicht auto: mit "auto" ist die Grundgroesse die BREITE DES
INHALTS ("12:00 - 20:30 · 8,5 Std" sind rund 230 px), und in einer
umbrechenden Zeile schiebt das den Knopf in die naechste Zeile, bevor
ueberhaupt geschrumpft wird. Mit 0 nimmt die Spalte, was uebrig bleibt -
und Pille und Knopf stehen in jeder Zeile an derselben Stelle. */
.szwas { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.skkopf { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
/* Der Name ist seit dem 16.09.2026 ein LINK auf die grosse Ansicht - er
klappt nichts mehr auf. Eine Zeile, abgeschnitten wenn noetig: nur so
stehen Pille und Knopf in jeder Zeile an derselben Stelle (Mathieu,
13.09.2026). */
.skname {
display: block; font-weight: 700;
font-size: 1rem; line-height: 1.25; color: inherit; text-decoration: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
/* Poppins, nicht mehr Fraunces (05.10.2026, Richtung A: eine Schrift im
Inhalt). Fraunces ist nur in 500 geladen, stand hier aber in 700 - der
Browser hat das Fett selbst gerechnet, und der Name sah aus wie aus einer
fremden App. Anton bleibt dem Datum im Kopf. */
font-family: var(--f-text);
}
.skname:hover { text-decoration: underline; }
/* Der Name ist 19 px hoch - als LINK auf die grosse Ansicht ist das zu
wenig (gemessen im Rundgang, 17.09.2026). Die Flaeche waechst nach oben
und unten auf 44, ohne dass die Zeile hoeher wird: eine unsichtbare
Erweiterung statt eines groesseren Buchstabens. Unter ihm liegt die
Uhrzeit derselben Schicht - wer die trifft, will ohnehin dorthin. */
.skkopf { position: relative; }
.skname::after {
content: ''; position: absolute; left: 0; right: 0; top: -12px; bottom: -13px;
}
.skzeit { font-size: .75rem; color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Der Stand rechts: eine Pille, keine Zeile. */
/* Feste Breiten fuer die zwei rechten Spalten: die Pille und der Knopf
stehen damit in JEDER Zeile untereinander, egal wie lang der Name ist.
Vorher wanderten sie mit dem Text - bei sieben Zeilen sieben Positionen. */
.skfehlt, .skvoll { flex: 0 0 3.6rem; text-align: center; }
.schichtkarte > .btn, .szform { flex: 0 0 6.3rem; }
/* Ohne nowrap: die Spalte ist breit genug fuer "Nehme ich", wenn der
Innenabstand kleiner ist als der von .btn.small (0,8 rem links und
rechts - das liess nur 75 px fuer 78 px Text, und der Knopf brach um).
Zwei Klassen im Selektor, sonst gewinnt .btn.small ueber die Reihenfolge.
Ein generelles nowrap am .btn waere falsch: lange Aufschriften anderswo
muessen umbrechen duerfen. */
.szliste .schichtkarte > .btn,
.szliste .szform .btn { width: 100%; padding-left: .5rem; padding-right: .5rem; }
.skfehlt {
font-size: .75rem; font-weight: 700;
padding: .125rem .25rem; border-radius: var(--radius-pille);
background: var(--warn-soft); color: var(--warn);
}
/* Dieselben drei Stufen wie im Wochenstreifen. .dringend bleibt als Name
bestehen, weil Tests und Kommentare daran haengen - stufe-kritisch ist
dasselbe aus der gemeinsamen Quelle. */
.skfehlt.dringend, .skfehlt.stufe-kritisch { background: var(--crit-soft); color: var(--crit); }
.skfehlt.stufe-voll { background: var(--ok-soft); color: var(--ok); }
.skvoll { font-size: .75rem; font-weight: 700; color: var(--ok); }
/* Wer schon drinsteht: eine umbrechende Zeile unter der Uhrzeit. Vorher eine
eigene Zeile je Person - bei drei Leuten waren das drei Zeilen fuer eine
Auskunft, die in eine passt. */
.skleute { display: flex; flex-wrap: wrap; gap: .25rem; margin: .25rem 0 0; }
/* Der Kreis ist jetzt die ganze Auskunft - also darf er auch gelesen werden
koennen: 24 px statt 21, und die Schrift gross genug fuer zwei bis drei
Buchstaben. Bei drei wird aus dem Kreis eine kurze Pille, statt dass der
dritte Buchstabe herausragt. */
.skkreis {
min-width: 24px; height: 24px; padding: 0 .25rem; border-radius: var(--radius-pille); flex: none;
background: var(--fill); border: 1px solid var(--hair);
display: flex; align-items: center; justify-content: center;
font-size: .625rem; font-weight: 800; color: var(--text); letter-spacing: .02em;
}
/* Gold heisst "wartet", dieselbe Farbe, mit der die Planung im Backend
dasselbe sagt (Mathieu, 07.09.2026). Das Woertchen "wartet" daneben ist
weg - es war der dritte Platz fuer eine Auskunft, die der Kreis traegt und
die rechts in der Zeile ohnehin steht ("Zurueckziehen" gibt es nur,
solange nichts bestaetigt ist). */
.skkreis.wartet { background: var(--gold); color: var(--deep); border-color: var(--gold); }
/* Der eigene Kreis gruen (Mathieu, 13.09.2026: "sollte mein eigener Name
immer grün geschrieben sein. Das man direkt sieht ah da arbeite ich").
Gruen ist in dieser App die Farbe fuer "passt, steht". Seit der Name weg
ist, traegt der Kreis beides - aber an zwei verschiedenen Stellen: die
Fuellung sagt "wartet", der Rand sagt "das bist du". */
.skkreis.ich {
border-color: var(--ok); color: var(--ok);
box-shadow: 0 0 0 2px var(--ok);
}
/* Gold gewinnt ueber Gruen, was die Flaeche angeht - "wartet noch" ist die
dringendere Auskunft. Der gruene Ring bleibt trotzdem stehen: beide
Aussagen passen an einen Kreis, weil die eine die Fuellung ist und die
andere der Rand. */
.skkreis.wartet.ich { color: var(--deep); }
.sksoll { flex: none; font-size: .75rem; color: var(--muted); white-space: nowrap; }
/* Eigene Zeiten - nur sichtbar, wenn jemand unten danach gefragt hat. */
/* Die Zeitfelder brauchen eine eigene Zeile: nebeneinander mit Name, Pille
und Knopf blieben dem Namen 60 px, und "11:00 - 19:30" stand dann
untereinander statt nebeneinander. Gemessen bei 375 px. */
.szfelder { flex: 1 0 100%; display: flex; gap: .25rem; align-items: center; font-size: .75rem; color: var(--muted); }
.szfelder label { display: flex; align-items: center; gap: .25rem; }
/* Unter 16 px zoomt iOS beim Antippen in das Feld hinein - das ist der
Grund fuer die Schriftgroesse, nicht der Geschmack. */
.szfelder input { min-height: 44px; padding: .25rem .5rem; min-width: 5.6rem; width: 5.6rem; font-size: 1rem; }
.szmehr {
display: block; text-align: center; padding: .5rem; font-size: .875rem;
color: var(--text-soft); border-top: 1px solid var(--hair); text-decoration: underline;
min-height: 44px; box-sizing: border-box;
}
/* Dieselbe Zeile in drei Zustaenden. Der wichtigste Unterschied ist, was NICHT
unterschiedlich ist: die Kreise mit den Leuten stehen ueberall (Mathieu,
12.09.2026: "man sieht jetzt nicht mehr wer noch arbietet ich dachte wir
loesen das mit diesen buttons JM AT etc"). */
/* Die Kante als inset-Schatten, nicht als border: seit die Zeile runde
Ecken hat, schnitte eine echte Kante sie gerade ab. Dieselbe Form wie
"heute" im Wochenblock der Startseite. */
.schichtkarte.meine { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
/* Gerade eingetragen: ein kurzer Ring, damit das Auge die Zeile findet, zu
der das Konfetti gehoert. Die Klasse steht nur in der Antwort auf den
Klick - beim naechsten Laden ist sie weg. */
/* Der Ring kommt zur Kante DAZU, sonst loescht er sie. */
.schichtkarte.meine.frisch { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 3px var(--ok-soft); }
.schichtkarte.meine .skname::before {
content: "✓"; margin-right: .25rem; color: var(--ok); font-weight: 700;
}
/* Geht fuer diese Person nicht: die Zeile bleibt stehen und zeigt die Leute,
nur der Knopf fehlt - und an seiner Stelle steht, warum. */
.schichtkarte.gesperrt { background: var(--fill); }
/* Der Grund ist ein ZUSTAND und sieht seit dem 17.09.2026 auch so aus
(Mathieu: "bau alle drei"). Vorher stand er als grauer Fliesstext
rechtsbuendig ueber zwei Zeilen - zwei Zentimeter daneben, in derselben
Karte, stand "bestaetigt" als gruenes Zeichen. Zweimal ein Zustand,
zweimal anders gesagt: einen musste man lesen, den anderen sah man.
Der WORTLAUT bleibt vollstaendig. "du hast an dem Tag Urlaub" auf "Urlaub"
zu kuerzen waere der zweite Fehler - die Seite soll den Grund sagen, nicht
andeuten (11.09.2026). Ein Grund, der zwei Zeilen braucht, bekommt sie. */
.skgrund {
flex: 0 1 auto; align-self: center; max-width: 10.5rem;
padding: .25rem .5rem; border-radius: var(--radius-pille);
background: var(--fill); color: var(--muted);
font-size: .75rem; font-weight: 700; line-height: 1.3; text-align: left;
}
/* "Bestaetigt" und "Besetzt" als Pille mit rundem Icon-Abzeichen (Mathieu,
17.09.2026: "mach den Besetzt und Bestaetigt Button wie im Screenshot") -
dieselbe Bauart wie die Statuspille im Hub (.statuspill/.ic2), nur unter
eigenem Namen: sie steht an einer Schicht, nicht an einer Aufgabe.
.ok bekommt das leise Gluehen der anderen Zustandspillen; .still (besetzt)
bewusst OHNE - das ist keine Auskunft, die auf sich aufmerksam machen soll,
nur die Feststellung, dass hier nichts zu tun ist. */
.skpille {
flex: none; display: inline-flex; align-items: center; gap: .35rem;
font-size: .75rem; font-weight: 700; padding: .3rem .65rem;
border-radius: var(--radius-pille); border: 1.5px solid; align-self: center;
}
.skic { width: 16px; height: 16px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center; }
.skic svg { width: 10px; height: 10px; }
/* "Bestätigt" ist seit Vorschlag 4 (15.10.2026) keine Pille mehr, sondern ein
Wort in der Kopfzeile der eigenen Schicht - wie "Wartet auf Bestätigung".
Es erbt Farbe und Versalien von .skdeine; umrandet waere es ein Knopf. */
.skbestaetigt { white-space: nowrap; }
.sdstand { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.skpille.still { color: var(--muted); border-color: var(--border); background: var(--fill); box-shadow: none; }
.skpille.still .skic { background: var(--muted); color: var(--bg); }
/* Der ruhige Hinweis in der Planung (Backend): leise, keine Farbe, keine Sperre. */
.stufenhinweis { margin: .25rem 0 0; font-size: .75rem; color: var(--muted); }
/* --- Zustaende sichtbar machen (Mathieu, 05.10.2026) ---------------------
Gemessen am Testbetrieb: "wartet auf Bestaetigung" stand nur fuer
Vorlesegeraete da, der Haken vor dem Namen sah bei einer wartenden Schicht
genauso aus wie bei einer bestaetigten, und die Rueckmeldung nach dem
Tippen lag ueber dem Bildschirmrand. */
/* Der Haken gehoert zu "Bestaetigt". Wer noch wartet, bekommt das Wort. */
.schichtkarte.meine.wartet .skname::before { content: none; }
/* Gold = "wartet" (dieselbe Farbe wie der Kreis und das Backend). Das Wort
traegt die Auskunft, die Farbe nur die Naehe - deshalb Schrift in Tinte. */
.skwartet {
align-self: flex-start; margin-top: .25rem;
padding: .125rem .5rem; border-radius: var(--radius-pille);
border: 1.5px solid var(--gold); background: var(--gold-soft); color: var(--text);
font-size: .75rem; font-weight: 700; line-height: 1.3;
}
/* Daumengroesse: 44 px statt 40 fuer die zwei Knoepfe in der Karte. */
.szliste .schichtkarte > .btn,
.szliste .szform .btn { min-height: 44px; }
/* "Geht fuer dich nicht" - EINE Zeile je Grund, aufklappbar. */
.sperrgruppe {
background: var(--fill); border-radius: var(--radius-sm);
border: 1px solid var(--hair);
}
.sperrkopf {
display: flex; align-items: center; gap: .75rem; cursor: pointer;
list-style: none; min-height: 56px; padding: .5rem .75rem;
}
.sperrkopf::-webkit-details-marker { display: none; }
.sperrwas { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.sperrwas strong { font-size: 1rem; line-height: 1.3; }
.sperrgrund { font-size: .875rem; color: var(--muted); line-height: 1.35; }
.sperrpfeil { flex: none; font-size: 1.3125rem; color: var(--muted); transition: transform .15s; }
.sperrgruppe[open] > .sperrkopf .sperrpfeil { transform: rotate(90deg); }
.sperrliste { display: flex; flex-direction: column; gap: .5rem; padding: 0 .5rem .5rem; }
.sperrliste .schichtkarte { background: var(--surface); }
/* Die Rueckmeldung: ein Streifen UNTEN ueber der Leiste. Fest, damit der
Sprung zur Karte (#s-...) sie nicht ueber den Rand schiebt. Blendet sich
nach 14 s selbst aus (reines CSS, kein Skript); das Kreuz schliesst sofort.
Die Kante links traegt die Art: gruen "geklappt", gold "wartet", rot
"hat nicht geklappt" - Form und Wort stehen daneben, die Farbe allein
sagt es nicht. */
.banner.rueckmeldung {
position: fixed; left: .6rem; right: .6rem; z-index: 45; margin: 0 auto;
bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
max-width: 38rem; align-items: center; flex-wrap: wrap; gap: .25rem .5rem;
padding: .5rem .5rem .5rem 1rem;
background: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--surface);
border: 1px solid var(--border-strong);
box-shadow: inset 4px 0 0 var(--ok), var(--schatten-3);
font-size: .875rem; line-height: 1.35;
animation: rmweg .01s linear 14s forwards;
}
.banner.rueckmeldung.wartet { box-shadow: inset 4px 0 0 var(--gold), var(--schatten-3); }
.banner.rueckmeldung.err {
background: linear-gradient(var(--crit-soft), var(--crit-soft)), var(--surface);
box-shadow: inset 4px 0 0 var(--crit), var(--schatten-3);
animation: none;
}
.rmzeichen { flex: none; font-weight: 700; }
.rmtext { flex: 1 1 0; min-width: 0; }
.rmzusatz { display: block; color: var(--muted); }
.rmform { order: 3; flex: 1 0 100%; padding-left: 1.5rem; }
.banner.rueckmeldung .rmform .btn { min-height: 44px; }
.rmzu {
flex: none; display: flex; align-items: center; justify-content: center;
min-width: 44px; min-height: 44px; color: var(--muted); text-decoration: none; font-size: 1rem;
}
@keyframes rmweg { to { visibility: hidden; opacity: 0; pointer-events: none; } }
/* --- Die Schicht als Karte (Mathieu, 16.09.2026: "Ja, bau 1-4") ----------
Bis heute war die Liste eine Tabelle: ein Rahmen aussen, Haarlinien
innen. Das liest sich nuechtern - und die Startseite besteht seit dem
Wochenblock aus Karten. Eine Sprache, nicht zwei.
Der Rahmen faellt weg, die Zeile bekommt Ecken und Abstand. */
.szliste { background: none; border: 0; border-radius: 0; overflow: visible;
display: flex; flex-direction: column; gap: .5rem; }
.szliste .schichtkarte { border-top: 0; border-radius: var(--radius-sm); }
.schichtkarte:first-child { border-top: 0; }
/* Die Zeitspur: 11 bis 3 Uhr, in JEDER Karte dieselbe Skala - dieselbe
Rechnung wie im Wochenblock (bahnFuer). Untereinander gelesen ist sie
das, wofuer bis heute ein eigener Block unter den Schichten stand: wer
wann da ist, und wo der Abend eine Luecke hat.
Ein abgeschnittenes Ende bleibt eckig - eine Schicht ab 09:00 faengt vor
der Skala an, und ein rundes Ende wuerde das Gegenteil behaupten. */
.skspur {
flex: 1 0 100%; position: relative; display: block; height: 5px; border-radius: var(--radius-pille);
margin: .5rem 0 1.25rem; background: color-mix(in srgb, var(--text) 12%, transparent);
}
/* Die Stundenlinien HINTER der Spur - 11, 15, 19, 23, 03, also alle vier
Stunden ein Strich. Sie stehen im Hintergrund der Spur selbst, damit sie
mit ihr wandern und nie danebenliegen koennen. */
.skspur {
background-image: repeating-linear-gradient(
to right,
color-mix(in srgb, var(--text) 22%, transparent) 0 1px,
transparent 1px 25%
);
}
.skbalken { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pille); background: var(--bar); z-index: 1; }
/* Anfang und Ende an den Enden des Balkens. Sie haengen an seiner Position,
wandern also mit - erst damit sagt der Balken eine Uhrzeit und nicht nur
"spaeter als der darueber" (Mathieu, 16.09.2026).
Die linke Marke haengt mit ihrem Anfang am Balkenanfang, die rechte mit
ihrem ENDE am Balkenende (translateX(-100%)) - sonst stuende sie bei einer
Schicht bis 01:00 halb ausserhalb der Spur. */
.skvon, .skbis {
position: absolute; top: 8px; font-style: normal;
font-size: .625rem; font-weight: 600; color: var(--muted);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.skbis { transform: translateX(-100%); }
/* Die beschriftete Achse unter der letzten Karte ist am 05.10.2026
entfallen: die Uhrzeit steht links in jeder Karte (Richtung A). */
.skbalken.vorher { border-top-left-radius: 1px; border-bottom-left-radius: 1px; }
.skbalken.nachher { border-top-right-radius: 1px; border-bottom-right-radius: 1px; }
/* EINE Farbe fuer alle Balken (Mathieu, 16.09.2026: "mach bei eingetragen
den balken in einer farbe"). Vorher sprachen sie dieselbe Sprache wie die
Karte drumherum - gruen meine, gold die Kueche, blass das Gesperrte - und
damit dreimal dasselbe auf derselben Zeile. Die Spur beantwortet genau
eine Frage: WANN. Wem die Schicht gehoert, steht daneben. */
.szmehr { border-top: 0; }
/* --- Schicht eintragen, Richtung A (Mathieu, 05.10.2026) -----------------
"Nimm A mit der Lückenzeile, Knopf grün." Aus dem Vergleich dreier
Richtungen (nachweise/design-ordio/schichten/). Gemessen auf dem ersten
Bildschirm vorher: drei Schriften, sechs Gewichte, elf farbig gefuellte
Flaechen, 13 von 18 Tippzielen unter 44 px. Die Regeln hier gelten nur in
der Schichtliste (.szliste) und im Streifen mit dem Rahmen "team" - die
grosse Ansicht einer Schicht und der Streifen im Backend bleiben, wie sie
sind. */
/* Der Kopf: Winkel und Umschalter rechts, darf umbrechen, statt zu
ueberlaufen ("30. September" ist das laengste Datum). */
.tagkopf { flex-wrap: wrap; }
.tagkopf .tkrechts { display: flex; align-items: center; gap: .25rem; }
/* Der Bereich als kleines Etikett mit Haarlinie (statt einer Zeile ohne
Linie) - die Haarlinie fuehrt das Auge zur Zahl rechts. */
.bkopf .blinie { flex: 1 1 1.5rem; align-self: center; height: 1px; background: var(--hair-strong); }
/* Die Lueckenzeile: WANN am Tag noch Leute fehlen. Rot ist "fehlt" - als
Schrift, nicht als Flaeche. */
.lueckenzeile {
display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .375rem;
margin: 0 .25rem .25rem; font-size: .875rem; line-height: 1.4; color: var(--text-soft);
}
.lzname { font-size: .625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: .125rem; }
.lzfenster { font-weight: 600; color: var(--crit); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lztrenn { color: var(--muted); }
/* Die Karte: Uhrzeit links, Name und Leute in der Mitte, rechts genau EIN
Ding - der Knopf, das Zurueckziehen oder der Zustand. */
.szliste .schichtkarte {
position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto;
align-items: center; column-gap: .875rem; row-gap: .375rem;
padding: .875rem .875rem 1.125rem 1rem;
background: var(--surface); border-radius: var(--radius); box-shadow: var(--schatten-1);
}
.szliste .schichtkarte > .skuhr { grid-column: 1; grid-row: 1; }
.szliste .schichtkarte > .szwas { grid-column: 2; grid-row: 1; }
.szliste .schichtkarte > .btn,
.szliste .schichtkarte > .szform,
.szliste .schichtkarte > .skpille,
.szliste .schichtkarte > .skgrund { grid-column: 3; grid-row: 1; position: relative; z-index: 1; }
.szliste .schichtkarte > .szfelder { grid-column: 1 / -1; position: relative; z-index: 1; }
.skuhr { display: flex; flex-direction: column; line-height: 1.25; font-variant-numeric: tabular-nums; }
.skuhr b { font-size: 1rem; font-weight: 600; color: var(--text); }
.skuhr span { font-size: .75rem; color: var(--muted); }
.skuhr.ohne span { font-size: .75rem; }
/* Die Zeit als Satz bleibt fuer Vorlesegeraete (die Spalte links ist
aria-hidden) - am Bildschirm stuende sie sonst zweimal da. */
.szliste .skzeit {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.szliste .skname { font-size: 1rem; font-weight: 600; line-height: 1.3; white-space: normal; overflow: visible; }
/* Die ganze Karte ist der Weg in die grosse Ansicht - Knopf, Formular und
Zeitfelder liegen darueber (z-index) und bleiben, was sie sind. */
.szliste .skkopf { position: static; }
.szliste .skname::after { top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--radius); }
.szliste .skleute { display: block; margin: .125rem 0 0; font-size: .875rem; line-height: 1.4; color: var(--text-soft); }
.skwer.ich { color: var(--ok); font-weight: 600; }
.skwer.wartet::before {
content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 4px; vertical-align: 1px;
border-radius: var(--radius-pille); box-shadow: inset 0 0 0 1.5px currentColor;
}
.skniemand { color: var(--muted); }
.sktrenn { color: var(--muted); }
/* Was noch fehlt: Schrift in der Farbe der Dringlichkeit, keine Pille. */
.szliste .skfehlt { padding: 0; background: none; font-size: inherit; font-weight: 600; color: var(--warn); flex: none; text-align: left; }
.szliste .skfehlt.dringend, .szliste .skfehlt.stufe-kritisch { background: none; color: var(--crit); }
.szliste .skfehlt.stufe-voll { background: none; color: var(--ok); }
.szliste .skvoll { flex: none; text-align: left; }
.szliste .skwartet { display: inline-block; align-self: auto; margin-top: .375rem; }
/* Wartet die eigene Schicht noch, rutscht "Zurückziehen" unter den Namen -
neben dem Knopf brach "Wartet auf Bestätigung" sonst in zwei Zeilen. */
.szliste .schichtkarte.meine.wartet > .szform { grid-column: 2 / -1; grid-row: 2; justify-self: start; }
.szliste .sksoll { display: block; margin-top: .25rem; }
/* "Nehme ich · 8,5 Std" - gruen gefuellt, zwei Zeilen, Daumengroesse. */
.szliste .schichtkarte > .btn.sknehmen {
width: auto; min-width: 6rem; min-height: 48px; padding: .3125rem .875rem;
display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
}
.skstd { display: block; font-size: .75rem; font-weight: 500; opacity: .9; }
.szliste .szform .btn { width: auto; }
/* Die Zeitspur: eine 2-px-Linie am unteren Rand der Karte. Die Uhrzeiten
an ihren Enden braucht sie nicht mehr - sie stehen links. */
.szliste .schichtkarte > .skspur {
position: absolute; left: 1rem; right: 1rem; bottom: 8px; height: 2px; margin: 0;
background: var(--hair); background-image: none; pointer-events: none;
}
.szliste .skspur .skvon, .szliste .skspur .skbis { display: none; }
.szliste .skspur .skbalken { opacity: .75; }
/* Meine Schicht: Karte mit Kante, wie "heute" im Wochenblock. */
.szliste .schichtkarte.meine { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent), var(--schatten-1); }
.szliste .schichtkarte.meine.frisch { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 3px var(--ok-soft); }
/* Voll und "geht nicht": leise, nur umrandet - hier ist nichts zu tun. */
.szliste .schichtkarte.gesperrt {
background: transparent; box-shadow: inset 0 0 0 1px var(--hair-strong);
padding-top: .75rem; padding-bottom: 1rem;
}
.szliste .schichtkarte.gesperrt .skname,
.szliste .schichtkarte.gesperrt .skuhr b { color: var(--text-soft); font-weight: 500; }
.sperrliste .schichtkarte.gesperrt { background: var(--surface); }
.szliste .skpille.still { padding: 0; border: 0; background: none; color: var(--muted); font-weight: 500; }
.szliste .skpille.still .skic { display: none; }
.skvollkopf { margin: .5rem .25rem 0; font-size: .75rem; font-weight: 500; color: var(--muted); }
/* "Andere Zeiten eintragen": ein Weg, also ein volles Tippziel. */
.szliste .szmehr { display: flex; align-items: center; justify-content: center; min-height: 44px; }
/* "Mit kuerzerer Zeit eintragen" unter dem Jugendschutz-Grund (Mathieu, 23.10.2026): unterstrichen = die leise Handlung, 44 px hoch. */
/* Eine gesperrte Jugendschutz-Karte: Name oben, der Grund in Zeile 2 (ueber die zwei breiten Spalten), der Weg zur kuerzeren Zeit darunter -
nicht in der schmalen dritten Spalte, in der er den Namen zerdrueckt (am eigenen Bild gesehen). */
.szliste .schichtkarte > .szjugendgrund { grid-column: 2 / -1; grid-row: 2; font-size: .875rem; line-height: 1.35; color: var(--muted); position: relative; z-index: 1; }
.szliste .schichtkarte > .szkurz { grid-column: 2 / -1; grid-row: 3; position: relative; z-index: 1; }
.szliste .schichtkarte.jugendkarte > .szfelder { grid-row: 3; }
.szliste .schichtkarte > .szkurzknopf { grid-column: 1 / -1; grid-row: 4; position: relative; z-index: 1; width: 100%; min-height: 48px; }
.szkurz { display: flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* --- Feinschliff (Mathieu, 05.10.2026: "Bau alles so und U1 bei Zeitleiste")
"die Schichten bisschen mehr vom Hintergrund abheben. Wenn man arbeitet
irgendwie deutlicher machen. Wenn ne Person fehlt deutlicher machen."
Rangfolge auf der Seite: eigene Schicht > es fehlt jemand > voll (leise).
Vorschlag mit Messwerten: nachweise/feinschliff/. */
/* 1a - jede Karte mit Rand und der zweiten Schattenstufe. */
.szliste .schichtkarte { box-shadow: 0 0 0 1px var(--border), var(--schatten-2); }
/* 2 - "Hier arbeite ich": gruen getoent, gruene Kante, Kicker. Wartet sie
noch, ist die Flaeche NICHT getoent und der Rahmen gestrichelt - erst die
Bestaetigung macht sie fest. Die Toenung (L* 93,8) liegt ueber dem
dunkleren Grund (91,6): Karte bleibt Karte. */
.szliste .schichtkarte.meine {
background: color-mix(in srgb, var(--surface) 72%, var(--ok-soft));
box-shadow: inset 5px 0 0 var(--ok), 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent), var(--schatten-2);
}
.szliste .schichtkarte.meine.wartet {
background: var(--surface);
box-shadow: inset 5px 0 0 var(--ok), var(--schatten-2);
outline: 1.5px dashed var(--ok); outline-offset: -1.5px;
}
.szliste .schichtkarte.meine.frisch { box-shadow: inset 5px 0 0 var(--ok), 0 0 0 3px var(--ok-soft), var(--schatten-2); }
/* Der Haken vor dem Namen ist doppelt, seit "Deine Schicht" darueber steht
und "Bestaetigt" daneben. */
.szliste .schichtkarte.meine .skname::before { content: none; }
.skdeine {
display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--ok);
}
.skdeine.wartet { color: var(--warn); }
.szliste .skdeine .skwartet {
display: inline; margin: 0; padding: 0; border: 0; background: none;
font: inherit; color: inherit; letter-spacing: inherit;
}
.szliste .meine .skuhr b { font-size: 1.125rem; }
/* 3 - "Es fehlt jemand": Kante in der Farbe der Luecke (gold, rot nur wenn
kritisch), die Zahl als Plakette (4,84:1 gold, 5,12:1 rot), die
Lueckenzeile als Band. */
.szliste .schichtkarte.offen { box-shadow: inset 4px 0 0 var(--warn), 0 0 0 1px var(--border), var(--schatten-2); }
.szliste .schichtkarte.offen.stufe-kritisch { box-shadow: inset 4px 0 0 var(--crit), 0 0 0 1px var(--border), var(--schatten-2); }
.szliste .skleute .skfehlt {
display: inline-block; padding: 0 .5rem; border-radius: var(--radius-pille);
background: var(--warn-soft); color: var(--warn); font-weight: 700;
}
.szliste .skleute .skfehlt.dringend, .szliste .skleute .skfehlt.stufe-kritisch { background: var(--crit-soft); color: var(--crit); }
.lueckenzeile { margin: 0 0 .625rem; padding: .5rem .75rem; border-radius: var(--radius-sm); background: var(--crit-soft); color: var(--crit); }
.lueckenzeile .lzname, .lueckenzeile .lztrenn { color: var(--crit); }
/* Voll am leisesten: ohne Spur, blasse Schrift, nur ein Rand. */
.szliste .schichtkarte.gesperrt { box-shadow: inset 0 0 0 1px var(--hair-strong); }
.szliste .schichtkarte.gesperrt .skspur { display: none; }
.szliste .schichtkarte.gesperrt .skname,
.szliste .schichtkarte.gesperrt .skuhr b,
.szliste .schichtkarte.gesperrt .skleute { color: var(--muted); }
/* 4a - der Leerzustand: ein Weg zur naechsten Luecke. */
.naechsteluecke {
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
min-height: 52px; margin: 0 0 1rem; padding: .625rem .875rem; border-radius: var(--radius-sm);
background: var(--surface); box-shadow: 0 0 0 1px var(--border), var(--schatten-1);
color: var(--text); text-decoration: none; font-size: .875rem; line-height: 1.4;
}
.naechsteluecke:hover { text-decoration: none; }
.naechsteluecke b { display: block; font-weight: 600; }
.nlpfeil { flex: none; font-size: 1.125rem; color: var(--muted); }
/* 4b - "geht fuer dich nicht" ist eine Auskunft, keine Schicht: kein Feld,
gestrichelter Rand, die Ueberschrift halbfett in der zweiten Tinte. Die
Schrift bleibt so gross wie bisher. */
.szliste .sperrgruppe { background: transparent; border: 1px dashed var(--border-strong); }
.szliste .sperrwas strong { font-weight: 600; color: var(--text-soft); }
.szliste .sperrkopf { min-height: 48px; }
/* 4c - "+1" an der Endzeit links. */
.skuhr .nextday { font-size: .625rem; }
/* 4d - Rhythmus: etwas mehr Luft zwischen Karten und Gruppen. */
.szliste { gap: .625rem; }
.bgruppe:has(.szliste) { margin-bottom: 1.5rem; }
.skvollkopf { margin-top: .875rem; }
.wszlegende { margin-bottom: .75rem; }
/* Die Zeitleiste: eine Karte, in Welt 1 je PERSON eine Zeile (Mathieu,
23.10.2026, E2 - die Regeln der Zeilen stehen in stil-w1-schichten.js). Hier
bleiben die Karte und die Luecken-Spur unten. Die Regeln der alten Bahnen
(.zlbahn, .zlbalken, .zlleute ...) und des alten Umschalters (.tagform,
.tfwahl) sind mit ihrem Markup gegangen. */
.zeitleiste {
position: relative; padding: .75rem .875rem .75rem 1rem; border-radius: var(--radius);
background: var(--surface); box-shadow: 0 0 0 1px var(--border), var(--schatten-2);
}
.zlluecken {
position: relative;
background-image: repeating-linear-gradient(to right, var(--hair) 0 1px, transparent 1px 12.5%);
}
.zlluecken { min-height: 46px; margin-top: 2px; border-top: 1px dashed var(--hair-strong); }
.zllname {
position: absolute; left: 0; top: 5px; font-size: .625rem; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.zlluecke {
position: absolute; top: 21px; height: 20px; border-radius: 5px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: var(--crit-soft); color: var(--crit); font-size: .75rem; font-weight: 700; white-space: nowrap;
}
/* Das Blatt unter der Zeitleiste: was die angetippte Schicht ist, und die
eine Handlung dazu - "Nehme ich" gruen wie in der Liste. */
.zlblatt {
display: flex; flex-direction: column; gap: .625rem; margin: .625rem 0 0; padding: .875rem 1rem;
border-radius: var(--radius); background: var(--surface);
box-shadow: inset 0 0 0 2px var(--wahl), var(--schatten-2);
}
.zlbkopf { display: flex; flex-direction: column; line-height: 1.35; }
.zlbkopf b { font-size: 1rem; font-weight: 600; }
.zlbzeit { font-size: .875rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.zlbkopf .skleute { display: block; margin-top: .125rem; font-size: .875rem; color: var(--text-soft); }
.zlbkopf .skfehlt { padding: 0 .5rem; border-radius: var(--radius-pille); background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.zlbkopf .skfehlt.stufe-kritisch { background: var(--crit-soft); color: var(--crit); }
.zlbaktion { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.zlbaktion .btn { min-height: 48px; }
.zlbmehr { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; font-size: .875rem; font-weight: 600; color: var(--accent); }
.zlblatt .szfelder { flex: none; }
.empmenu-cb { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.empmenu-backdrop { display: none; }
.empmenu {
position: fixed; top: 0; right: -320px; bottom: 0; width: 300px; max-width: 84vw;
background: var(--surface); z-index: 60; overflow-y: auto;
/* Die Schublade beginnt am Bildrand, also unter der Uhrzeit - ihr eigener
Kopf braucht denselben Abstand wie die Leiste. */
padding-top: var(--safetop);
box-shadow: -12px 0 32px rgba(0, 0, 0, .18);
transition: right .22s ease;
}
.empmenu-head {
display: flex; align-items: center; justify-content: space-between;
padding: 1rem 1rem 1rem; font-weight: 700; font-size: 1rem;
border-bottom: 1px solid var(--hair);
}
.empmenu-close {
/* 44x44 statt 30x30 (gemessen 08.09.2026). Ein Kreuz allein hat keinen
Text, an dem sich der Finger orientieren kann - da ist die Flaeche alles. */
cursor: pointer; width: 44px; height: 44px; border-radius: var(--radius-pille);
display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.empmenu-close:hover { background: var(--fill); }
.empmenu a {
display: flex; align-items: center; gap: .75rem;
padding: .75rem 1rem; border-bottom: 1px solid var(--hair);
color: var(--text); text-decoration: none;
}
.empmenu a:hover { background: var(--fill); text-decoration: none; }
/* Ein Wort je Zeile und ein Pfeil (Vorschlag 7, 15.10.2026) - wie "Mehr" in
der Planung. Mindestens 56 px hoch: die Zeilen sind jetzt ohne Unterzeile,
das Tippziel soll dadurch nicht kleiner werden. */
.empmenu.emp a { min-height: 56px; }
.empmenu-text { flex: 1 1 auto; }
/* "Tauschen" ist UMRANDET (Vorschlag 5, 15.10.2026): "kannst du machen",
zweiter Rang - wie "Annehmen" in der Planung. Vorher fuenf gefuellte
Knoepfe untereinander, und gefuellt heisst "das eine Wichtige" (Eine
Tinte). 44 px hoch, das Daumenmass. */
.btn.tauschknopf {
background: transparent; color: var(--accent); border: 1.5px solid currentColor;
min-height: 44px; padding: .5rem 1rem; font-size: .875rem;
}
.btn.tauschknopf:hover { background: var(--fill); }
/* Stempeluhr (Vorschlag 6): oben die Schicht, unten der Rechtstext zum
Aufklappen. Die Zusammenfassung ist ein 44-px-Tippziel. */
.stschicht { margin: 0; }
.stschichtzeit { font-weight: 500; white-space: nowrap; }
.erfasstklapp { margin: 1rem 0 0; color: var(--muted); font-size: .875rem; }
.erfasstklapp > summary {
min-height: 44px; display: flex; align-items: center; gap: .375rem;
font-weight: 600; color: var(--text-soft); cursor: pointer; list-style: none;
}
.erfasstklapp > summary::-webkit-details-marker { display: none; }
.erfasstklapp > p { margin: .25rem 0 .75rem; line-height: 1.5; }
.empmenu a[aria-current="page"] { background: var(--accent-soft); }
.empmenu-icon {
flex: none; width: 38px; height: 38px; border-radius: var(--radius-xs); background: var(--fill);
display: flex; align-items: center; justify-content: center;
}
/* Die gezeichneten Icons brauchen mehr Platz als die Emojis vorher: eine
Kontur mit Flaeche darin wird bei 20 px matschig. --ak ist die gefuellte
Flaeche, die Kontur nimmt die Farbe der Zeile (currentColor). */
.ic { --ak: var(--gold); --ak-auf: currentColor; width: 100%; height: 100%; display: block; }
/* Das Notfall-Dreieck ist rot (Mathieu, 11.09.2026: "notfall vielleicht das
dreieck rot?"). Die einzige Ausnahme von der goldenen Flaeche - und eine,
die sich rechtfertigt: Rot heisst in dieser App "fehlt, kritisch", und
genau das ist dieser Menuepunkt. Das Ausrufezeichen darin nimmt --crit-ink,
den Ton, der fuer Schrift AUF Rot gedacht ist: mit currentColor waere es
Tinte auf Rot, 1,69:1, und damit unsichtbar. Nachgerechnet: 6,52 hell,
7,62 dunkel. */
.ic-warnung { --ak: var(--crit); --ak-auf: var(--crit-ink); }
.empmenu-icon .ic { width: 24px; height: 24px; }
/* --- Nur das Mitarbeiter-Menue (.empmenu.emp), NICHT die Planung im
Backend -------------------------------------------------------------
Beide teilen sich .empmenu/.empmenu-icon (dieselbe Vorlage in layout()),
aber nur die Mitarbeiterseite bekommt die neue Optik (Mathieu,
17.09.2026: "mach jetzt auch das Menü so wie im Entwurf", nach einer
eigens gezeigten und freigegebenen Vorschau). Das Backend bleibt bei
Marine/Gold - der Entwurf war nie fuer die Planung gedacht. */
.empmenu.emp a[aria-current="page"] {
background: #F2660A; color: #200E02;
}
.empmenu.emp a[aria-current="page"] .empmenu-hint { color: inherit; opacity: .78; }
.empmenu.emp a[aria-current="page"] .empmenu-icon { background: rgba(32, 14, 2, .16); color: #200E02; }
.empmenu.emp a[aria-current="page"] .empmenu-icon .ic { --ak: #200E02; }
/* Rund statt eckig, mit oranger Toenung statt der stillen Flaeche. Die
Toenung ist eine feste Farbe mit Deckkraft statt eines Hell/Dunkel-Paars -
auf dem jeweiligen --surface darunter ergibt das in beiden Modi genug
Abstand, ohne zwei Werte pflegen zu muessen. */
.empmenu.emp .empmenu-icon {
border-radius: 999px; background: rgba(242, 102, 10, .14); color: #F2660A;
width: 42px; height: 42px;
}
.empmenu.emp .empmenu-icon .ic { --ak: #F2660A; }
.empmenu.emp .empmenu-icon:has(.ic-warnung) { background: var(--crit-soft); color: var(--crit); }
/* Falls Notfall selbst die aktive Seite ist (die Person hat das Menue von
dort aus geoeffnet): Rot bleibt Rot, gewinnt also ueber die orange
Aktiv-Flaeche oben. */
.empmenu.emp a[aria-current="page"] .empmenu-icon:has(.ic-warnung) { background: var(--crit-soft); color: var(--crit); }
.empmenu.emp a[aria-current="page"] .empmenu-icon:has(.ic-warnung) .ic { --ak: var(--crit); }
/* Auf Orange ginge das Gold im Icon unter - zwei warme Toene dicht
beieinander. Dort wird die Flaeche das dunkle Marine; auf dunklem Grund
bleibt sie Gold. */
.deckblock .ic { --ak: var(--gold); }
.empmenu-gruppe {
font-size: .625rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--muted); padding: 1rem 1rem .25rem; background: var(--surface-2);
border-bottom: 1px solid var(--hair);
}
.empmenu-text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.empmenu-label { font-weight: 650; font-size: 1rem; }
.empmenu-hint { font-size: .75rem; color: var(--muted); }
/* "Abmelden" muss ein Formular sein (POST), soll aber wie die Links daneben
aussehen - deshalb ein Knopf ohne eigenes Aussehen im Schubfach. */
.empmenu-form { margin: 0; }
.empmenu-form button {
display: flex; align-items: center; gap: .75rem; width: 100%;
padding: .75rem 1rem; border: 0; border-bottom: 1px solid var(--hair);
background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.empmenu-form button:hover { background: var(--fill); }
.empmenu .navbadge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 1.25rem; height: 1.25rem; margin-left: .5rem; padding: 0 .25rem;
border-radius: var(--radius-pille); background: var(--crit); color: var(--crit-ink);
font-size: .75rem; font-weight: 700;
}
.empmenu-cb:checked ~ .empmenu-backdrop {
display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .35);
}
.empmenu-cb:checked ~ .empmenu { right: 0; }
/* ---- Seitenleiste der Planung ------------------------------------------ */
/* Am Rechner steht die Navigation fest links, am Handy bleibt es beim
Schubfach. Beide kommen aus DERSELBEN Liste (adminNav) - nur so kann ein
neuer Menuepunkt nicht an einer der beiden Stellen fehlen.
Die Grenze liegt bei 1000 px: darunter frisst eine feste Leiste zu viel
von der Breite, die der Dienstplan fuer seine Tageskarten braucht. */
.adminseite { display: none; }
.burgerbtn { display: flex; }
@media (min-width: 1000px) {
.adminseite {
display: flex; flex-direction: column; gap: .125rem;
position: fixed; left: 0; top: 0; bottom: 0; width: 210px; z-index: 30;
background: var(--surface); border-right: 1px solid var(--border);
padding: calc(1rem + var(--safetop)) .75rem 1.25rem; overflow-y: auto;
}
/* Der Inhalt rueckt nach rechts, statt dass die Leiste ueber ihm liegt. */
body.mit-seite { padding-left: 210px; }
/* Kopfzeile und Menuesymbol werden dann nicht mehr gebraucht. */
body.mit-seite > .topbar, body.mit-seite .empmenu, body.mit-seite .empmenu-backdrop { display: none; }
}
.asmarke {
font-family: var(--f-text); font-weight: 700; font-size: 1rem;
letter-spacing: -.02em; padding: .25rem .5rem 1rem; color: var(--text); text-decoration: none;
}
.asmarke:hover { text-decoration: none; }
.asgruppe {
font-size: .625rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--muted); margin: 1rem 0 .25rem .5rem;
}
.aslink {
display: flex; align-items: center; gap: .5rem;
padding: .5rem .5rem; border-radius: var(--radius-xs);
font-size: .875rem; font-weight: 500; color: var(--text); text-decoration: none;
}
.aslink:hover { background: var(--fill); text-decoration: none; }
.aslink[aria-current="page"] { background: var(--deep); color: var(--deep-ink); font-weight: 650; }
.aslink .ic { width: 16px; height: 16px; flex: none; opacity: .78; }
.aslink[aria-current="page"] .ic { opacity: 1; --ak: var(--deep-ink); }
.aslink .navbadge {
margin-left: auto; min-width: 18px; height: 18px; padding: 0 .25rem; border-radius: var(--radius-pille);
background: var(--accent); color: var(--accent-ink);
font-size: .625rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.asform { margin: .25rem 0 0; }
.asform button {
display: flex; align-items: center; gap: .5rem; width: 100%;
padding: .5rem .5rem; border: 0; border-radius: var(--radius-xs); background: none;
color: var(--muted); font: inherit; font-size: .875rem; text-align: left; cursor: pointer;
}
.asform button:hover { background: var(--fill); }
.asform button .ic { width: 16px; height: 16px; flex: none; opacity: .7; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 1.5rem var(--pad) 4rem; }
.wrap.narrow { max-width: 720px; }
/* ---- Uebersicht der Planung ------------------------------------------- */
.ukacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.ukachel {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: .75rem 1rem; text-decoration: none; color: var(--text); display: block;
}
a.ukachel:hover { border-color: var(--accent); text-decoration: none; }
.ukachel.dunkel { background: var(--deep); border-color: var(--deep); color: var(--deep-ink); }
.ukachel .lbl { font-size: .625rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ukachel.dunkel .lbl, .ukachel.dunkel .ukfuss { color: var(--deep-ink); opacity: .68; }
.ukgross {
font-family: var(--f-text); font-size: 1.75rem; font-weight: 700;
letter-spacing: -.035em; line-height: 1.05; margin-top: .25rem; font-variant-numeric: tabular-nums;
}
.ukfuss { font-size: .75rem; color: var(--muted); margin-top: .125rem; }
.uzwei { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 780px) { .uzwei { grid-template-columns: 1fr; } }
/* Die Saeulen "2/3" der Uebersicht (leere Huellen je Tag) sind am 15.10.2026
entfallen - "Wo noch Leute fehlen" zaehlt jetzt Koepfe aus dem Bedarf
(.ufehlt weiter unten). */
.uliste { display: flex; flex-direction: column; }
.uzeile {
display: flex; align-items: center; gap: .75rem; padding: .5rem 0;
border-top: 1px solid var(--hair); text-decoration: none; color: var(--text);
}
.uzeile:first-child { border-top: 0; }
.uzeile:hover { text-decoration: none; }
.uzeile:hover .uwas { text-decoration: underline; }
.utext { flex: 1; min-width: 0; }
.uwas { display: block; font-weight: 600; font-size: .875rem; }
.uwer { display: block; font-size: .75rem; color: var(--muted); }
/* Dringend in "Wartet auf dich": eine Kante links in der Fehlt-Farbe, als
inset-Schatten wie die Bereichskante (runde Ecken bleiben), dazu das rote
Aktionswort. Nicht dringend bleibt ohne Kante und mit leisem Wort. */
.uzeile.dringend { box-shadow: inset 4px 0 0 var(--crit); padding-left: .75rem; }
/* Flach statt schwebend (Studio-Klarheit, Mathieu: "bau alles in dem design
um") - klarer Rahmen traegt die Abgrenzung, kein Schlagschatten mehr. */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.25rem 1.25rem;
margin-bottom: 1rem;
}
.card > h2, .card > h3 { margin-bottom: .25rem; }
/* News. Mathieu, 13.09.2026: "pack die News ... mit signal farbe nach ganz
oben. aber mach so nen Button gelesen und dann klappt es sich ein."
Zwei Zustaende, zwei Lautstaerken: was neu ist, traegt die Signalfarbe und
steht vor allem anderen; was gelesen ist, ist ein zugeklappter Kasten an
der alten Stelle. Dieselbe Bauart wie .nfbetont - getoente Flaeche plus
Kante links -, damit die App nicht fuer jede Betonung eine neue erfindet. */
/* Der Signalkasten: "das ist neu und geht dich an". Er traegt die Wahlfarbe
und steht vor allem anderen. Seit dem 13.09.2026 nutzen ihn ZWEI Sorten -
neue Schichtnachrichten und die Schichtuebergabe/Torten-Erinnerung
(Mathieu: "sollte diese auch in Orange oben stehen wie bei News"). Deshalb
haengen die Regeln an .signal und nicht an einer Einzelklasse: eine
Bauform, ein Selektor.
Die News-Karte selbst ist seit dem 25.09.2026 NICHT mehr dabei - sie hat
ihre eigene Farbklasse .newsrot (weiter unten), weil "neu" bei News jetzt
Rot heisst und nicht mehr die Wahlfarbe. Die Bauform (Toenung + Kante
links) bleibt dieselbe, nur die Variablen wechseln. */
.card.signal {
background: var(--wahl-soft); border-color: transparent;
border-left: 4px solid var(--wahl);
}
/* Die Nachricht selbst ist der Text, nicht eine Ueberschrift darueber -
deshalb steht der Empfaengerkopf klein DARUEBER und der Satz in Lesegroesse
darunter. */
.card.signal .msghead {
font-size: .625rem; font-weight: 800; letter-spacing: .06em;
text-transform: uppercase; color: var(--wahl); margin-bottom: .125rem;
}
.card.signal.msgneu + .card.signal.msgneu { margin-top: .75rem; }
.card.signal .card-head { margin-bottom: .5rem; }
.card.signal .card-head h2 { color: var(--wahl); }
/* Hier stand .card.newsrot - die rote News-Karte oben (Mathieu, 25.09.2026:
"Rot NUR fuer News"). Seit dem 05.10.2026 stehen neue News als Zeile im
Streifen "Neu für dich"; das Rot traegt dort der Punkt und die Zeile
darueber (.nfpunkt.news, .nfkick.news) - weiter die einzige Stelle, an der
Rot "neu" heisst. */
.newsliste { display: grid; gap: .75rem; }
/* Ab dem ZWEITEN Stueck eine Haarlinie: bei nur einer Ansage waere sie ein
Strich ohne Aufgabe. */
.newsstueck + .newsstueck { border-top: 1px solid var(--hair); padding-top: .75rem; }
.newstitel { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.newsbody { margin: .25rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--text-soft); }
.newsweg { margin-top: .5rem; }
/* Der Knopf auf der getoenten Flaeche: keine zweite Farbe, nur eine Kante -
dieselbe Regel wie ueberall (Handlung sagt sich durch die Form). Die
Schrift nimmt --text und steht damit auf der Toenung bei 9,1:1 im Hellen
und 9,4:1 im Dunkeln. 44 px, weil er mit dem Daumen getroffen wird; ohne
die Zeile waren es gemessene 40. */
.card.signal .newsweg .btn.secondary {
background: transparent; color: var(--text);
border: 1px solid var(--wahl); min-height: 44px;
}
/* Ein zugeklappter Kasten - fuer die gelesene News UND die gelesene
Schichtuebergabe (Mathieu, 13.09.2026: "wie bei News"). Der Selektor haengt
deshalb an einer allgemeinen Klasse und nicht mehr an .news: zwei Regeln
fuer dieselbe Bauform waeren der Anfang von zwei Bauformen. */
details.card.eingeklappt > summary {
display: flex; align-items: center; gap: .5rem;
cursor: pointer; list-style: none; min-height: 44px;
}
details.card.eingeklappt > summary::-webkit-details-marker { display: none; }
details.card.eingeklappt > summary::after {
content: ""; margin-left: auto; flex: none;
width: .5rem; height: .5rem;
border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
transform: rotate(45deg); transition: transform .12s ease;
}
details.card.eingeklappt[open] > summary::after { transform: rotate(-135deg); }
details.card.eingeklappt[open] > summary {
margin-bottom: .75rem; border-bottom: 1px solid var(--hair); padding-bottom: .5rem;
}
details.card.eingeklappt > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-klein); }
.klappsum { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: 1rem; }
/* Datenschutz-Unterlagen (06.10.2026): ein langer Rechtstext auf dem Handy.
Listen ruecken weniger ein (bei 390 px fraß der Standard-Einzug ein Viertel
der Zeile), Tabellen bekommen Abstand, und was Mathieu noch ausfuellen muss,
steht im warmen Grau statt im Gelb des Browsers - ein Zustand, keine
Handlung (Eine Tinte). */
.dsdoc ul { padding-left: 1.1rem; }
.dsdoc li { margin: .25rem 0; }
.dsdoc .table-scroll { margin: .6rem 0 1rem; }
/* Gemessen bei 390 px: die Tabelle der Loeschfristen war 6 px breiter als ihr
Kasten ("Abrechnungsjahres" passt nicht in die halbe Zeile) - lieber
trennen als seitlich wischen. */
.dsdoc td { hyphens: auto; overflow-wrap: anywhere; }
mark.dsoffen { background: var(--gold-soft); color: var(--text); font-weight: 600; padding: 0 .25em; border-radius: 4px; }
/* Dieselbe Chevron-Sprache wie details.card.eingeklappt oben, jetzt auch fuer
die Signalkarten selbst und fuer einzelne Ansagen/Nachrichten (Mathieu,
17.09.2026: "auf der startseite ist mega viel los ... übersichtlicher
machen") - jede ist jetzt eine Zeile, der Text kommt erst beim Antippen.
currentColor statt var(--muted): auf den Signalkarten ist die Schrift
schon die Wahlfarbe, der Pfeil soll dieselbe Farbe tragen wie die
Ueberschrift daneben, nicht grau danebenstehen. */
summary.card-head, .newsstueck > summary {
cursor: pointer; list-style: none; min-height: 44px;
}
summary.card-head::-webkit-details-marker, .newsstueck > summary::-webkit-details-marker { display: none; }
summary.card-head::after, .newsstueck > summary::after {
content: ""; margin-left: auto; flex: none; align-self: center;
width: .5rem; height: .5rem; opacity: .6;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); transition: transform .12s ease;
}
details[open] > summary.card-head::after, .newsstueck[open] > summary::after { transform: rotate(-135deg); }
summary.card-head:focus-visible, .newsstueck > summary:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-klein);
}
/* Die einzelne Ansage/Nachricht ist jetzt ein statt eines
- Rand und Abstand zum Nachbarn traegt weiterhin die Regel oben
(.newsstueck + .newsstueck), hier nur die Zeile selbst. */
.newsstueck > summary { display: flex; align-items: center; gap: .5rem; padding: .1rem 0; }
.newsstueck[open] > summary { margin-bottom: .5rem; }
.newsstueck > summary.newstitel { font-size: 1rem; font-weight: 700; margin: 0; }
.newsstueck > summary .msghead { flex: 1; }
/* Personaldaten als Liste statt als Rolle (Mathieu, 12.09.2026: "mach bei
Personaldaten auch so ne unterordnung damit das Uebersichtlicher ist").
Eine Zeile je Abschnitt, getrennt durch Haarlinien - die Karte ist der
Rahmen, die Zeile braucht keinen eigenen. Tippziel 56 px, also ueber den
44 px, die Apple und WCAG als Mindestmass nennen. */
.pdliste { display: flex; flex-direction: column; margin: 0 -1.25rem -1.25rem; }
.pdzeile {
display: flex; align-items: center; gap: .75rem; min-height: 56px;
padding: .75rem 1.25rem; color: var(--text); text-decoration: none;
border-top: 1px solid var(--hair);
}
.pdzeile:first-child { border-top: 0; }
.pdzeile:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.pdzeile:hover { background: var(--fill); text-decoration: none; }
.pdzeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pdicon {
flex: none; width: 34px; height: 34px; border-radius: var(--radius-xs); background: var(--fill);
display: flex; align-items: center; justify-content: center;
}
.pdicon .ic { width: 21px; height: 21px; }
.pdtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.pdtitel { font-size: 1rem; font-weight: 620; letter-spacing: -.01em; }
/* Die Feldnamen darunter sagen, was einen hinter der Zeile erwartet - sonst
muss man jede Zeile einmal aufmachen, um sie zu kennen. Eine Zeile, der
Rest wird abgeschnitten. */
.pdsub {
font-size: .75rem; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdstand {
flex: none; font-size: .75rem; font-weight: 700; padding: .125rem .5rem; border-radius: var(--radius-pille);
}
.pdstand.offen { background: var(--warn-soft); color: var(--warn); }
/* Fertig ist ein Haken, keine Null: "0 offen" liest sich wie ein Fehler. */
.pdstand.voll { background: var(--ok-soft); color: var(--ok); padding: .125rem .5rem; }
.pdpfeil { flex: none; color: var(--muted); font-size: 1.3125rem; line-height: 1; }
.card-head h2, .card-head h3 { margin: 0; }
.card-head h2 a, .card-head h3 a { color: inherit; text-decoration: none; }
.card-head h2 a:hover, .card-head h3 a:hover { text-decoration: underline; }
/* Der Beisatz ist ueberall derselbe - aber die Regel hing nur an .card-head.
In einem zugeklappten Kasten traegt ihn das , und dort stand er
deshalb in voller Textgroesse: gemessen 17 statt 14 px, wodurch "gelesen ·
heute 18:16" neben dem Titel umbrach. Betrifft die gelesene News genauso -
dort war die Aufschrift nur kurz genug, dass es niemandem auffiel. */
.card-head .hint,
details.card.eingeklappt > summary .hint { color: var(--muted); font-size: .875rem; }
.lede { color: var(--text-soft); max-width: 62ch; }
/* Das hidden-Attribut muss staerker sein als jede eigene display-Regel. Der
Browser setzt dafuer nur [hidden]{display:none} - eine Klasse mit
display:flex schlaegt das, und das Ding steht da. Auf der Bedarfsseite hing
deshalb dauerhaft "Noch nicht gespeichert." unter der Tabelle, auch direkt
nach dem Speichern: eine Warnung, die immer leuchtet, ist keine Warnung.
Am Bild gesehen, nicht im Code (11.09.2026). */
[hidden] { display: none !important; }
.banner {
border-radius: var(--radius-sm);
padding: .75rem 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
font-weight: 500;
display: flex; gap: .5rem; align-items: flex-start;
}
.banner.ok { background: var(--ok-soft); border-color: transparent; color: var(--text); }
.banner.err { background: var(--crit-soft); border-color: transparent; color: var(--text); }
.banner.info { background: var(--accent-soft); border-color: transparent; color: var(--text); }
/* Gelb heisst hier "fehlt noch etwas", nicht "kaputt" - dieselbe Trennung wie
bei den Marken in der Liste. Gebraucht zuerst fuer die Personalnummern, die
in der DATEV-Datei fehlen wuerden. */
.banner.warn { background: var(--warn-soft); border-color: transparent; color: var(--text); }
/* Die Sprachwahl auf der Einstellungsseite. Zwei Knoepfe nebeneinander, der
aktive gefuellt - dieselbe Art, wie die App ueberall "das hier gilt gerade"
sagt (Form statt zweiter Farbe). Bei zwei Sprachen ist eine Auswahlliste
ein Umweg: sie kostet einen Tipp mehr und zeigt die Wahl nicht. */
.sprachwahl { display: flex; gap: .5rem; flex-wrap: wrap; }
.sprachwahl button {
font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
min-height: 46px; padding: 0 1.25rem; border-radius: var(--radius-pille);
border: 1px solid var(--hair-strong); background: transparent; color: var(--text);
}
.sprachwahl button.an { background: var(--deep); color: var(--deep-ink); border-color: transparent; }
/* Hell, dunkel oder wie das Telefon - die Einstellungen der Team-App (25.10.2026). Dieselbe Gestalt wie die Sprachwahl: drei Pillen,
die gewaehlte gefuellt UND mit Haken (die Form sagt es, nicht nur die Farbe). Es sind echte Radios: der Kreis ist unsichtbar ueber
die ganze Pille gelegt, das Tippziel ist die Pille (46 px hoch). Farben nur ueber Namen. */
.tdarst { border: 0; margin: 0; padding: 0; min-width: 0; }
.tdarstlegende { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tdarstseg { display: flex; gap: .5rem; flex-wrap: wrap; }
.tdarstopt { position: relative; display: inline-flex; }
.tdarstopt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tdarstwort {
display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1.25rem;
border-radius: var(--radius-pille); border: 1px solid var(--feldrand); background: transparent; color: var(--text);
font-size: 1rem; font-weight: 600;
}
.tdarstopt input:checked + .tdarstwort { background: var(--deep); color: var(--deep-ink); border-color: transparent; }
.tdarstopt input:checked + .tdarstwort::before { content: '✓ '; white-space: pre; }
.tdarstopt input:focus-visible + .tdarstwort { outline: 3px solid var(--text); outline-offset: 2px; }
.tdarstsatz { margin: .75rem 0 0; }
/* Mitteilungen in den Einstellungen (Mathieu, 14.10.2026: "bau ne Kategorie
für Push-Benachrichtigungen"). Je Kategorie eine Zeile: Titel, ein Satz,
was drin ist, rechts der Schalter. Die ganze Zeile ist das Tippziel
(label, mindestens 44 px) - nicht nur der Schalter.
Der Schalter ist an GRUEN und gefuellt, aus nur umrandet: Gruen ist im
Hellen wie im Dunkeln die Farbe fuer "deins / laeuft" (Nachtmodus AC, zwei
Signalfarben), und die Form sagt es ein zweites Mal - gefuellt mit dem
Knopf rechts heisst an, Rahmen mit dem Knopf links heisst aus. So bleibt
"aus" auch im Dunkeln sichtbar, wo ein grauer Grund verschwand. */
.mtgeraet { padding-bottom: 1rem; margin-bottom: .25rem; border-bottom: 1px solid var(--hair); }
.mtzeile { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.mttext { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.mttext strong { font-weight: 600; color: var(--text); }
.mttext span { color: var(--muted); font-size: .875rem; font-weight: 400; line-height: 1.4; }
.mthinweis { margin: .6rem 0 0; }
.mttest { margin-top: .75rem; }
.mtmeldung { margin: .5rem 0 0; }
.mtmeldung.fehler { color: var(--crit); }
.mtwahl .lede { margin: .75rem 0 0; }
.mtliste { list-style: none; margin: .25rem 0 0; padding: 0; }
.mtliste li + li { border-top: 1px solid var(--hair); }
.mtschalter { display: flex; align-items: center; gap: .9rem; min-height: 44px; padding: .75rem 0; cursor: pointer; }
.mtschalter:has(.schalter:disabled) { cursor: default; }
.schalter {
appearance: none; -webkit-appearance: none; flex: none; position: relative;
width: 52px; height: 32px; margin: 0; border-radius: var(--radius-pille);
background: transparent; border: 2px solid var(--muted); cursor: pointer;
transition: background-color .15s ease, border-color .15s ease;
}
.schalter::after {
content: ''; position: absolute; top: 5px; left: 5px; width: 18px; height: 18px;
border-radius: 50%; background: var(--muted);
transition: transform .15s ease, width .15s ease, height .15s ease, top .15s ease, left .15s ease;
}
.schalter:checked { background: var(--gruen); border-color: var(--gruen); }
.schalter:checked::after { top: 2px; left: 2px; width: 24px; height: 24px; transform: translateX(20px); background: var(--gruen-ink); }
.schalter:disabled { opacity: .6; cursor: default; }
.schalter:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .schalter, .schalter::after { transition: none; } }
.mtspeichern { margin-top: .5rem; }
/* Was der Tag kostet. Drei Zahlen nebeneinander, am Handy untereinander -
keine Kacheln mit Rahmen: sie gehoeren zusammen und sind eine Auskunft,
nicht drei. */
.tagesgeld .tgreihe { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 46rem) { .tagesgeld .tgreihe { grid-template-columns: 1fr; gap: .75rem; } }
.tgblock.weit { grid-column: 1 / -1; }
.tgzahl {
display: block; font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em;
font-variant-numeric: tabular-nums; line-height: 1.1;
}
/* Rot erst, wenn die Quote wirklich weh tut. Eine Farbe, die immer leuchtet,
sagt nichts. */
.tgzahl.hoch { color: var(--crit); }
.tglabel { display: block; margin-top: .25rem; font-size: .875rem; color: var(--muted); line-height: 1.4; }
/* Rezeptbuch. Ein Gitter aus Karten, weil man Rezepte vergleicht statt sie
zu lesen - untereinander waere jedes einzeln und keines im Verhaeltnis. */
.rzkat { font-size: 1rem; margin: 1.25rem 0 .5rem; letter-spacing: -.02em; color: var(--text-soft); }
.rzgitter { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); margin-bottom: .5rem; }
.rezeptkarte { margin-bottom: 0; display: flex; flex-direction: column; }
.rzzutaten { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: 1rem; }
.rzzutaten li { display: flex; gap: .5rem; align-items: baseline; }
.rzzutaten b { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* EINE Zeile statt eines Merkmals an jeder Zutat: die Frage an ein Rezept
ist "was zieht das ab", nicht "welche Zeile ist nur Text". */
.rzabzug { margin: .5rem 0 0; font-size: .875rem; color: var(--muted); }
/* Die zwei Abschnitte. Cocktails und Premixes sind nicht zwei Kategorien
unter vielen, sondern die oberste Ordnung - also bekommen sie einen Kopf
mit einem Satz dazu und nicht nur eine Ueberschrift. */
/* Zwei Seiten, nicht zwei Abschnitte: der Reiter traegt die Auswahl, und
welche gerade gilt, sagt die Fuellung - keine zweite Farbe. */
.rzreiter { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.5rem; }
.rzreiter a {
display: flex; align-items: center; gap: .5rem;
font-size: 1rem; font-weight: 600; text-decoration: none;
padding: .5rem 1rem; border-radius: var(--radius-pille);
border: 1px solid var(--hair-strong); color: var(--text);
}
.rzreiter a span {
font-size: .75rem; font-weight: 700; color: var(--muted);
font-variant-numeric: tabular-nums;
}
.rzreiter a:hover { background: var(--fill); text-decoration: none; }
.rzreiter a.an { background: var(--deep); color: var(--deep-ink); border-color: transparent; }
.rzreiter a.an span { color: var(--deep-ink); opacity: .7; }
.rzteilkopf { margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 2px solid var(--hair-strong); }
.rzteilkopf h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.025em; }
.rzteilkopf p { margin: .25rem 0 0; color: var(--text-soft); font-size: 1rem; max-width: 46rem; }
/* Die Beziehung, um die es geht: welcher Cocktail nimmt diesen Premix. */
.rzverbraucher {
margin: .5rem 0 0; padding: .5rem .75rem; border-radius: var(--radius-xs);
background: var(--wahl-soft); font-size: .875rem; line-height: 1.5;
}
.rzverbraucher.leer { background: var(--fill); color: var(--muted); }
/* "Gestern verkauft". Eine Zeile je Cocktail, das Feld rechts - am Handy
tippt man sich von oben nach unten durch, ohne den Blick zu wechseln. */
.vkliste { display: grid; gap: .125rem; grid-template-columns: minmax(0, 1fr); }
.vkzeile {
display: flex; align-items: center; gap: .25rem .75rem; flex-wrap: wrap;
padding: .5rem 0; border-top: 1px solid var(--hair); cursor: text;
}
.vkzeile:first-child { border-top: 0; }
/* Grosse Schrift (Mathieu, 24.10.2026: Bestandsabgleich lief bei 200 % auf 390 px um 31 px ueber den Rand): zwei Dinge hielten die
Zeile breit - die Gitterspalte war "auto" und nahm die Mindestbreite der Zeile (Name "alkoholfrei" + Feld = 342 px) statt
der Breite der Karte (minmax(0, 1fr) oben), und der Name durfte nur schrumpfen, nicht umbrechen. Jetzt hat der Name eine
Grundbreite von 5rem: passt er mit dem Feld nicht mehr in eine Zeile, rutscht das Feld unter den Namen (rechts, wie sonst).
Bei Normalgroesse ist die Zeile auf 320 px noch 254 px breit - Name 80 + Fuge 12 + Feld 74 = 166, da bricht nichts um. */
.vkname { flex: 1 1 5rem; min-width: 0; font-size: 1rem; overflow-wrap: anywhere; }
.vkzeile input {
flex: 0 0 4.6rem; margin-left: auto; text-align: center; font-variant-numeric: tabular-nums;
min-height: 44px;
}
/* Was schon eingetragen ist, sieht man - sonst tippt jemand denselben Abend
ein zweites Mal, weil er es nicht mehr weiss. */
.vkzeile.schon .vkname { font-weight: 600; }
.vkzeile.schon input { border-color: var(--wahl); }
/* Der Lohn fuers Eintragen, ganz oben. */
.vklage .vklageliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.vklage .vklageliste li { display: flex; flex-wrap: wrap; gap: .125rem .5rem; align-items: baseline; font-size: 1rem; }
.vklage .vklageliste b { font-variant-numeric: tabular-nums; min-width: 2.6rem; }
.vklage .vklageliste li.knapp { color: var(--crit); font-weight: 600; }
/* Der Name hat eine Grundbreite statt "so breit wie der Text": bei 200 % stand "Adieu Hangover" zwischen "0x" und "Ziel 20" in 19 px
und brach als "Adi/eu/Ha/ng/ov/er". Passt er mit dem Ziel nicht in eine Zeile, rutscht das Ziel darunter. */
.vklagename { flex: 1 1 5rem; min-width: 0; overflow-wrap: anywhere; }
/* Der Kartentitel "Bestandsabgleich" (der Kopf der Seite hat eigene Regeln, .w1titel.lang in stil-w1.js): er ist 1,75rem gross und
auf 390 px bei 200 % Schrift 56 px - "Bestands-" braucht dann 281 px, die Karte hat 260, und das Wort brach als "Bestand/sabgleich"
(bei 360 px als "Bestand/s/abgleich"). Jetzt schrumpft die Schrift so weit, dass "Bestands-" (5,02 em breit, gemessen) in die Karte passt:
Kartenbreite = 100vw - 4rem (Seitenrand und Kartenrand) - 2px Rand, geteilt durch 5,3 (5 % Luft). Unter 20 px nicht weiter.
Bei Normalgroesse (28 px) greift die Rechnung nie: auf 320 px waeren es 48 px. */
#vk-form .card-head h1 { font-size: max(20px, min(1.75rem, calc((100vw - 4rem - 2px) / 5.3))); }
.vkziel { margin-left: auto; color: var(--muted); font-size: .875rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vklage .vklageliste li.knapp .vkziel { color: var(--crit); font-weight: 400; }
/* Leute probeweise ausblenden: der Knopf steht klein neben dem Namen, die
ausgeblendete Zeile bleibt lesbar - sie ist nicht geloescht, nur nicht
mitgerechnet. */
.ausraus, .ausrein { font-size: .75rem; white-space: nowrap; text-decoration: underline; }
.ausraus { color: var(--muted); }
/* 25.10.2026: "ausgetreten" leise per Tinte statt Deckkraft (.45 gab 2,4:1, und "wieder rein" blieb trotz opacity: 1 blass - Deckkraft
vererbt sich). Durchgestrichen bleibt es. */
tr.istaus td, tr.istaus td * { color: var(--muted); }
tr.istaus td.num, tr.istaus td.name { text-decoration: line-through; }
tr.istaus .ausrein { text-decoration: underline; color: var(--accent); }
.ausbanner a { display: inline-block; margin-top: .25rem; }
.kostendetails > summary { cursor: pointer; font-weight: 600; padding: .5rem 0; }
.kostendetails > summary .hint { font-weight: 400; margin-left: .5rem; }
.tebizeile { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .5rem 0; border-top: 1px solid var(--hair); }
.tebizeile:first-child { border-top: 0; }
.tebiname { flex: 1 1 11rem; min-width: 0; font-weight: 600; }
.tebizeile select { flex: 1 1 12rem; min-width: 0; }
.vkletzte { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: 1rem; }
/* Die Zahl, die hinter der Bar zaehlt: wie oft geht das heute noch. */
.rzreich { margin: .75rem 0 0; padding: .5rem .75rem; border-radius: var(--radius-xs); background: var(--fill); font-size: .875rem; }
.rzunten {
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
margin-top: auto; padding-top: 1rem;
}
.rzunten form { margin: 0; }
.rzbuchen { display: flex; align-items: center; gap: .5rem; margin-right: auto; }
.rzbuchen label { font-size: .875rem; color: var(--muted); }
.rzbuchen input { width: 3.6rem; text-align: center; }
/* Das Formular: drei Felder je Zeile am grossen Bildschirm, untereinander am
kleinen. Gepflegt wird hier ohnehin am Schreibtisch. */
.rzkopf { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 52rem) { .rzkopf { grid-template-columns: 1fr; } }
.rztabelle td { padding: .25rem .25rem; }
.rztabelle input, .rztabelle select { width: 100%; }
.rztabelle td:nth-child(3) { width: 7rem; }
.rztabelle td:nth-child(4) { width: 8rem; }
.banner.warn > span { color: var(--warn); font-weight: 700; }
/* Zwei Felder nebeneinander, am Handy untereinander. Beraternummer und
Mandantennummer gehoeren zusammen und sind beide kurz. */
.feldpaar { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 34rem) { .feldpaar { grid-template-columns: 1fr; } }
.banner strong { font-weight: 650; }
label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .25rem; color: var(--text); }
.field { margin-bottom: 1rem; }
.field .help { color: var(--muted); font-size: .875rem; margin-top: .25rem; }
/* type=tel gehoert dazu (15.10.2026): die Notfall-Nummern standen als
einziges Feld weiss mit schwarzem Systemrahmen zwischen den anderen. */
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=time], input[type=number], textarea, select {
width: 100%;
font: inherit;
font-size: 1rem;
color: var(--text);
background: var(--surface);
border: 1px solid var(--feldrand);
border-radius: var(--radius-xs);
padding: .5rem .75rem;
min-height: 44px;
appearance: none;
-webkit-appearance: none;
}
select {
/* Der Pfeil selbst gezeichnet, damit das Feld in beiden Themes gleich
aussieht - der vom System bringt seine eigene Farbe mit. */
background-image: linear-gradient(45deg, transparent 49%, currentColor 50%), linear-gradient(-45deg, transparent 49%, currentColor 50%);
background-size: 6px 6px, 6px 6px;
background-position: calc(100% - 1.05rem) calc(50% + 2px), calc(100% - .7rem) calc(50% + 2px);
background-repeat: no-repeat;
padding-right: 2rem;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
/* Der Vorlagentext im leeren Feld (Mathieu, 07.09.2026: "das feld zum
schreiben ist leer, aber in grau sieht man den vorlagen text z.b fuer
ablauf"). Ohne eigene Regel haengt das am Browser-Standard, und der ist
oft so blass, dass man die Vorlage nicht lesen kann - je nach Browser
verschieden blass.
Bei den mehrzeiligen Feldern kursiv: dort steht eine ganze Beispiel-
Vorlage, und kursiv sagt auf einen Blick "das ist ein Beispiel und nicht
dein Text". Bei einzeiligen Feldern waere das unruhig. */
::placeholder { color: var(--muted); opacity: .75; }
textarea::placeholder { font-style: italic; opacity: .7; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
input[readonly] { background: var(--surface-2); color: var(--text-soft); }
/* Das Datei-Feld kommt vom Browser und sieht ueberall anders aus. Gestrichelter
Rand, weil hier etwas hereingelegt wird - und der Knopf im selben Ton wie die
uebrigen Nebenaktionen. */
input[type=file] {
width: 100%; font: inherit; font-size: .875rem; color: var(--text-soft);
background: var(--surface); border: 1px dashed var(--border-strong);
border-radius: var(--radius-xs); padding: .75rem .75rem; min-height: 52px;
}
input[type=file]::file-selector-button {
font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
background: var(--accent-soft); color: var(--accent);
border: 0; border-radius: var(--radius-xs); padding: .5rem .75rem; margin-right: .75rem;
min-height: 34px;
}
input[type=file]::file-selector-button:hover { filter: brightness(.96); }
input[type=file]:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
/* Ein Knopf waechst mit seiner Aufschrift. Feste Hoehen schneiden lange
Beschriftungen ab - darum min-height und eine eigene, engere Zeilenhoehe. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font: inherit; font-weight: 600; font-size: 1rem; letter-spacing: -.006em;
line-height: 1.25; text-align: center; text-wrap: balance;
min-height: 44px; padding: .5rem 1.25rem; max-width: 100%;
border-radius: var(--radius-xs);
border: 1px solid transparent;
background: var(--accent); color: var(--accent-ink);
cursor: pointer; text-decoration: none;
transition: background-color .15s ease, opacity .15s ease;
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { opacity: .78; }
/* Der Knopf, mit dem man eine Schicht uebernimmt (Mathieu, 06.09.2026:
"schicht eintragen so in einem schoenen gruenen ton das es zum eintragen
motiviert"). Nur dort - sonst waere Gruen wieder eine Farbe, die alles
Moegliche heisst.
Der Ton ist bewusst dunkel genug: bei helleren Gruens sank die creme
Schrift darauf unter 4,5:1 und war bei Sonne auf dem Handy nicht mehr
sicher zu lesen. #42714A kommt auf 5,4:1.
Zu wissen: auf derselben Seite heisst eine gruene Zeile "komplett
besetzt". Die beiden treffen sich nie - bei einer vollen Schicht gibt es
diesen Knopf gar nicht, dort steht "keine Plaetze mehr frei". */
.btn.gruen { background: var(--gruen); color: var(--gruen-ink); }
.btn.gruen:hover { background: var(--gruen-hover); }
/* Leise: fuer Schichten, die schon gedeckt sind, in die man sich aber noch
eintragen DARF (Huellen ohne Kapazitaet). Ohne das standen ein gruener
Status "besetzt - danke!" und ein voller gruener Knopf uebereinander und
meinten Gegenteiliges. Bleibt gruen und bleibt anklickbar - nur eben
umrissen statt gefuellt. */
/* Orange: "sieh hier hin" (Mathieu, 17.09.2026: „hebe ihn farblich hervor").
Bewusst sparsam - die Handlungsfarbe der App bleibt das CI-Marine, und
eine zweite Knopffarbe ueberall waere wieder eine Ampel ohne Bedeutung.
Hier traegt sie eine: Orange heisst in dieser App "gerade offen", und was
der Knopf anlegt, steht eine Zeile spaeter als oranges "Offen" in der
Liste. Gerechnet: hell 6,2:1, dunkel 10,4:1 fuer die Schrift darauf. */
.btn.wahl { background: var(--wahl); color: var(--wahl-ink); }
.btn.wahl:hover { filter: brightness(1.06); }
.btn.wahl:focus-visible { box-shadow: 0 0 0 4px var(--wahl-soft); }
/* Nur der Melden-Knopf im Hub bekommt die Umriss-Form aus dem Entwurf
(Mathieu, 17.09.2026: "ich will das es so aussieht") - getoente Flaeche
statt Vollton, Rand und Schrift in Orange. Der andere .btn.wahl (der
Kalender-Sammelknopf auf "Mein Plan") bleibt unangetastet, darum haengt
die Regel an .hubmelden und nicht an .btn.wahl selbst. */
.hubmelden .btn.wahl { background: var(--wahl-soft); color: var(--wahl); border: 1.5px solid var(--wahl); }
.hubmelden .btn.wahl:hover { filter: brightness(1.04); }
.btn.secondary { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.btn.secondary:hover { filter: brightness(.96); }
.btn.danger { background: var(--crit-soft); color: var(--crit); border-color: transparent; }
.btn.danger:hover { background: var(--crit); color: var(--crit-ink); }
/* 40 px statt 34 (gemessen 08.09.2026). Nicht 44: diese Knoepfe stehen in
dichten Tabellenzeilen, und 44 wuerde die Zeilen auseinanderziehen. 40 ist
deutlich ueber den 24 px, die als Untergrenze gelten. */
.btn.small { min-height: 40px; padding: .25rem .75rem; font-size: .875rem; border-radius: var(--radius-xs); }
/* In der Team-App ist auch der kleine Knopf daumengross (15.10.2026, beim
Durchgehen gemessen: "Jetzt eintragen", "Später", "Übernehmen" je 40 px). */
body[data-app="team"] .btn.small { min-height: 44px; }
/* Auf schmalen Geraeten nimmt die Hauptaktion die ganze Breite - dann steht
die Aufschrift immer in einer Zeile. */
.btn.wide { width: 100%; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* Eigenes Bestaetigungsfenster statt window.confirm(): natives