/* Ein Aussehen für alle Listentabellen
====================================
Michael, 07.09.2026: "Wir sollten uns generell auf ein einziges
Tabellenlayout einigen." Diese Datei ist dafür die einzige Quelle - so wie
kalender.css die einzige Quelle für die Kalenderfarben ist. Wer eine neue
Liste baut, schreibt hier nichts dazu, sondern benutzt die Klassen.
Nicht gemeint sind die Kalender (Dienstplan, Dienstwünsche, Urlaubsplan) und
das Musterraster: Das sind Gitter, keine Listen - dort steht in jeder Zelle
ein Zustand, nicht eine Angabe. Ihre Formen stehen in kalender.css und bei
der jeweiligen Seite.
Aufbau einer Liste:
Die Hülle trägt Rahmen und runde Ecken und schneidet die Ecken ab; ohne sie
stünden die eckigen Zellen über dem runden Rand.
*/
:root {
/* Bis zum 14.09.2026 #dbe6ef, zwei Stufen heller als der Rahmen des
Kalenders. Michael hat sich für EIN Rahmengrau entschieden, das des
Kalenders - Tabellen und Karten bekommen damit einen sichtbar
kräftigeren Rahmen. */
--tab-rand: var(--grau-3); /* Rahmen der Hülle und Linie unter dem Kopf */
--tab-linie: var(--grau-1); /* Trennlinie zwischen zwei Zeilen */
--tab-hover: var(--flaeche-hover);
}
/* "overflow: auto", nicht "hidden" (Michael, 12.09.2026): Eine Liste, die
breiter ist als ihr Platz, scrollt bei sich - nie die Seite. Vorher war das
eine Zusatzklasse ("scrollbar"), die zwei von elf Listen trugen; die anderen
neun liefen auf dem Telefon aus dem Bild. Die runden Ecken bleiben: Auch
"auto" schneidet ab, was über den Rand hinausgeht. */
.tabelle { border: 1px solid var(--tab-rand); border-radius: var(--radius-3);
overflow: auto; background: var(--weiss); }
/* Sicherheitshalber auch an den Ecken der Tabelle selbst: Manche Browser malen
den Hintergrund einer Zelle über die abgeschnittene Ecke der Hülle hinaus. */
/* Einen Pixel enger als der Rahmen der Hülle: Die Ecke der ersten Zelle liegt
einen Pixel (die Rahmenbreite) innerhalb - das war die Absicht hinter dem
früheren .45rem, sie stand nur nirgends (14.09.2026). */
table.tab thead tr:first-child th:first-child { border-top-left-radius: calc(var(--radius-3) - 1px); }
table.tab thead tr:first-child th:last-child { border-top-right-radius: calc(var(--radius-3) - 1px); }
table.tab tbody tr:last-child > *:first-child { border-bottom-left-radius: calc(var(--radius-3) - 1px); }
table.tab tbody tr:last-child > *:last-child { border-bottom-right-radius: calc(var(--radius-3) - 1px); }
/* Eine Liste mit Deckel: Sie zeigt drei Zeilen, danach scrollt sie in sich
selbst (Michael, 11.09.2026, für die offenen Anträge). So bleibt die Seite
ruhig, auch wenn zwanzig Anträge offen sind - und der Kalender darüber
behält seine Höhe. Der Kopf klebt oben: Nach der dritten Zeile wüsste sonst
niemand mehr, welche Spalte was ist.
Die Höhe ist gerechnet und nicht geraten: Kopfzeile plus drei Zeilen, jede
so hoch wie ein kleiner Knopf samt Polster (1,6 + 0,7 rem). */
/* Eine flache Liste: weniger Luft über und unter jeder Zeile, damit fünf
Zeilen dort hineinpassen, wo sonst drei stehen (Michael, 11.09.2026, für die
Dienstbilanz unter dem Dienstplan: "Zeilenhöhe so reduzieren, dass 5
Inhaltszeilen ohne Scrollen passen"). Die Schrift bleibt, nur das Polster
geht weg - eine kleinere Schrift wäre die zweite Änderung an derselben
Stelle, und lesbar bleiben soll sie. */
/* Die Zeile hat eine feste Höhe, damit sich mit ihr rechnen lässt: Wer für
fünf Zeilen Platz vorhält (die Dienstbilanz), braucht eine Zahl, die stimmt -
und 1,3 rem, mit denen dort gerechnet wurde, waren geraten und zu klein
(11.09.2026). */
.tabelle.flach table.tab th, .tabelle.flach table.tab td {
height: var(--zeile-flach); padding-top: var(--abstand-1); padding-bottom: var(--abstand-1); }
:root { --zeile-flach: 1.6rem; }
.tabelle.gedeckelt { overflow-y: auto; }
.tabelle.gedeckelt table.tab thead th { position: sticky; top: 0; z-index: 2; }
/* Drei Zeilen ist das Maß der offenen Anträge; wie hoch ein anderer Deckel
liegt, sagt die Seite (die Dienstbilanz im Dienstplan zeigt fünf). */
.tabelle.drei-zeilen { max-height: calc(1.9rem + 3 * 2.3rem); }
table.tab { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0;
font-size: .85rem; /* → .85rem → --schrift-3 */ }
table.tab th, table.tab td { padding: .35rem var(--abstand-6); /* → .35rem → --abstand-3 oder --abstand-4 */ vertical-align: middle;
text-align: left; }
/* Der Kopf ist dunkel (Michael, 07.09.2026) - er schließt die Tabelle nach oben
ab, so wie die Menüleiste die Seite. Keine Versalien: Die Spaltennamen sind
teils lang ("Fachärztinnen und Fachärzte"), und in Versalien liest man sie
schlechter. */
table.tab thead th { background: var(--blau-dunkel); color: var(--weiss);
font-weight: 600; white-space: nowrap; border: 0; }
/* Zwei Kopfzeilen - oben der Titel der Liste, darunter die Spaltennamen: Die
Spaltennamen sind dem Titel untergeordnet und tragen deshalb dasselbe
Hellblau wie eine Zwischenüberschrift (Michael, 07.09.2026). Zwei dunkle
Zeilen übereinander wären ein Block, in dem man die Gliederung nicht sieht. */
table.tab thead tr.unterkopf th { background: var(--blau-hell);
color: var(--blau-dunkel);
font-weight: 600; }
/* Linien nur ZWISCHEN den Zeilen: Eine Linie über der ersten stünde doppelt
unter dem Kopf, eine unter der letzten doppelt auf dem Rahmen. */
table.tab tbody tr + tr > td, table.tab tbody tr + tr > th {
border-top: 1px solid var(--tab-linie);
}
/* Zwischenüberschrift innerhalb einer Liste (Gruppen, Abschnitte): hellblau,
und ohne Linie an den Rändern - das blaue Band soll von Kante zu Kante
laufen (Michael, 07.09.2026). Ein Strich, der die Fläche vom Rahmen trennt,
zerschneidet die Liste an einer Stelle, an der nichts zu trennen ist. */
table.tab tr.abschnitt > th { background: var(--blau-hell); color: var(--blau-dunkel);
font-weight: 600; padding: .25rem var(--abstand-6); /* → .25rem → --abstand-2 oder --abstand-3 */
border-left: 0; border-right: 0; }
table.tab tr.abschnitt + tr > td { border-top: 0; }
table.tab tr.abschnitt .anzahl { font-weight: 400; opacity: .75; }
table.tab tr.anklickbar { cursor: pointer; }
table.tab tr.anklickbar:hover > td { background: var(--tab-hover); }
table.tab tr.gewaehlt > td { background: var(--blau-hell); color: var(--blau-dunkel);
font-weight: 600; }
/* Eine Zeile, die gerade nicht gilt - pausierte Person, alter Stand. */
table.tab tr.ruht > td { color: #8a99a8; /* → #8a99a8 → --grau-5 */ }
/* Linksbündig ist die Regel (Michael, 07.09.2026) - eine Tabelle, in der die
Spalten mal so und mal so ausgerichtet sind, wirkt unruhig. "zahl" bleibt für
die Ausnahme: reine Zahlenspalten, die man untereinander vergleicht (die
Dienstbilanz). Werte mit Einheit - "40 Tage", "50 %" - sind keine solche
Spalte und stehen links. */
table.tab th.zahl, table.tab td.zahl { text-align: right;
font-variant-numeric: tabular-nums; }
table.tab td.leise, table.tab .leise { color: #5d6f7f; /* → #5d6f7f → --grau-6 */ }
/* Eine kräftigere Linie trennt zwei Gruppen von Spalten - im Dienstplan die
Dienste von der Auswertung der Feste. Links gezogen, und die Zelle davor gibt
ihre rechte ab: dieselbe Regel wie in den Kalendern. */
table.tab th.fest-erste, table.tab td.fest-erste { border-left: 2px solid var(--tab-rand); }
table.tab th:has(+ th.fest-erste), table.tab td:has(+ td.fest-erste) { border-right: 0; }
/* Knöpfe am Zeilenende: nie umbrechen, sonst wächst die Zeile in die Höhe.
Linksbündig wie alles andere (Michael, 07.09.2026); "rechts" gibt es als
Zusatz, wo die Knöpfe an der Kante stehen sollen. */
table.tab td.knoepfe { white-space: nowrap; text-align: right; }
table.tab td.knoepfe.links { text-align: left; }
table.tab td.knoepfe > div { display: inline-flex; gap: .25rem; /* → .25rem → --abstand-2 oder --abstand-3 */ }
table.tab td.leer { color: #5d6f7f; /* → #5d6f7f → --grau-6 */ font-style: italic; }
/* Die Ampel für Bilanzzahlen - dieselbe wie in den Kalendern, damit "gut",
"knapp" und "zu wenig" überall gleich aussehen. Die Farben stehen in
kalender.css; hier steht nur, dass eine Listenzelle sie tragen kann. */
table.tab td.diff-gut { background: var(--kal-gut); color: var(--kal-gut-schrift); }
table.tab td.diff-knapp { background: var(--kal-knapp); color: var(--kal-knapp-schrift); }
table.tab td.diff-schlecht { background: var(--kal-schlecht); color: var(--kal-schlecht-schrift); }
/* KARTEN - die Liste auf dem Telefon
==================================
Michael, 12.09.2026: Wo Lesen wichtiger ist als Vergleichen, wird in der
schmalen Fassung jede Zeile zu einem Block - links der Spaltenname, rechts
der Wert, die Knöpfe darunter. Eine Liste, die das will, trägt
`table.tab.karten`; sonst ändert sich nichts. Die Spaltennamen holt
static/karten.js aus dem Kopf der Tabelle (data-spalte) - in der Vorlage
steht dafür keine Zeile.
Was hier NICHT hingehört: Listen aus Zahlen, die man untereinander liest
(Stempel, Dienstbilanz, Versionen). Die scrollen bei sich, siehe oben.
Alle Regeln unter [data-fassung="schmal"] - die breite Fassung sieht davon
nichts, die Tabelle bleibt eine Tabelle. */
[data-fassung="schmal"] table.tab.karten thead { display: none; }
/* Ein Wort, das breiter ist als das Telefon (ein Pfad in der Versionsliste,
55 Zeichen am Stück), bricht in der Karte mitten im Wort - sonst zöge es
den Block über den Rand. NUR in der Kartenform: In einer Liste, die bei
sich scrollt, würde dieselbe Regel auch Daten und Zahlen zerteilen
("09.09.202|6", 12.09.2026 nachgesehen) - dort darf ein kurzes Wort lieber
die Spalte breit machen. */
[data-fassung="schmal"] table.tab.karten td { overflow-wrap: anywhere; }
[data-fassung="schmal"] table.tab.karten,
[data-fassung="schmal"] table.tab.karten tbody,
[data-fassung="schmal"] table.tab.karten tr { display: block; }
[data-fassung="schmal"] table.tab.karten tbody tr { padding: var(--abstand-3) 0 var(--abstand-4); }
[data-fassung="schmal"] table.tab.karten tbody tr + tr { border-top: 1px solid var(--tab-linie); }
[data-fassung="schmal"] table.tab.karten tbody tr.abschnitt { padding: 0; }
[data-fassung="schmal"] table.tab.karten tr.abschnitt > th { display: block; }
/* Der KARTENKOPF (Michael, 14.09.2026, am iPhone entschieden). Bis dahin war
jede Zelle eine Zeile "Name links, Wert rechts" mit dem Namen auf 6,5 rem
festgenagelt - die rechte Hälfte des Telefons blieb leer, und die Knöpfe
standen in zwei Zeilen ("Inhalt auf der linken Hälfte gequetscht").
Jetzt ist die Zeile ein zweispaltiges Raster: Oben die Kopfzelle (Name)
mit den Schildern rechts daneben, darunter die übrigen Felder als Paare in
zwei Spalten - Beschriftung klein darüber, Wert darunter -, zuletzt alle
Knöpfe in einer Zeile rechts. Welche Spalte Kopf, Schild oder Knopf ist,
sagt das | im Tabellenkopf (Klasse kopf / schild / knoepfe, siehe das
Makro tabelle() in _bausteine.html); karten.js schreibt es als data-art an
die Zellen. Eine Liste, deren Kopf noch nichts sagt, bekommt nur die zwei
Spalten und die Knopfzeile - kein Kopf, kein Fehler. */
[data-fassung="schmal"] table.tab.karten tbody tr:not(.abschnitt) {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: baseline;
padding-left: var(--abstand-6); padding-right: var(--abstand-6);
column-gap: var(--abstand-9); }
[data-fassung="schmal"] table.tab.karten td { display: block; border: 0;
padding: var(--abstand-1) 0; text-align: left; min-width: 0;
height: auto; /* die feste Zeilenhöhe von "flach" gilt für Zeilen, nicht für Felder mit Beschriftung darüber */ }
[data-fassung="schmal"] table.tab.karten td[data-spalte]::before {
content: attr(data-spalte); display: block;
color: var(--grau-6); font-size: var(--schrift-1); line-height: 1.2; }
[data-fassung="schmal"] table.tab.karten td.zahl { text-align: left; }
/* Der Kopf: die erste Zeile, fett und eine Stufe größer, ohne Beschriftung.
Steht ein Schild dahinter, teilt er die Zeile mit ihm (Raster: ein Grid,
keine Flex-Zeile - so kann kein Paarfeld neben den Kopf rutschen, wenn der
Name kurz ist); ohne Schild nimmt er die ganze Breite. */
[data-fassung="schmal"] table.tab.karten td[data-art="kopf"] { grid-row: 1; grid-column: 1 / -1;
font-weight: 700; font-size: var(--schrift-4); padding-top: 0; }
[data-fassung="schmal"] table.tab.karten td[data-art="kopf"]:has(~ td[data-art="schild"]) { grid-column: 1; }
[data-fassung="schmal"] table.tab.karten td[data-art="kopf"]::before { display: none; }
/* Die Schilder: rechts neben dem Kopf, so viele es gibt. */
[data-fassung="schmal"] table.tab.karten td[data-art="schild"] { grid-row: 1; grid-column: 2;
text-align: right; padding-top: 0; }
[data-fassung="schmal"] table.tab.karten td[data-art="schild"]::before { display: none; }
/* Die Knöpfe: die letzte Zeile, alle nebeneinander, rechts. td.knoepfe ist
die alte Schreibweise an der Zelle selbst, data-art die aus dem Kopf. */
[data-fassung="schmal"] table.tab.karten td.knoepfe,
[data-fassung="schmal"] table.tab.karten td[data-art="knoepfe"] { order: 99; grid-column: 1 / -1;
display: flex; justify-content: flex-end; white-space: nowrap;
padding-top: var(--abstand-3); }
[data-fassung="schmal"] table.tab.karten td.knoepfe::before,
[data-fassung="schmal"] table.tab.karten td[data-art="knoepfe"]::before { display: none; }
[data-fassung="schmal"] table.tab.karten td.knoepfe > div,
[data-fassung="schmal"] table.tab.karten td[data-art="knoepfe"] > div { display: inline-flex; gap: var(--abstand-2); }
/* Eine Zelle über alle Spalten ("keine Einträge") nimmt die ganze Zeile. */
[data-fassung="schmal"] table.tab.karten td[colspan] { grid-column: 1 / -1; }
/* Die Farbe einer Zeile (gewählt, gefahren) liegt in der Karte auf der ganzen
Karte, nicht auf den Feldern - sonst schimmern die Spalten- und Zeilenlücken
weiß durch. Die Differenzfarbe (gut/knapp/schlecht) bleibt am Wert: sie
färbt nur noch die Schrift, ein Farbblock unter Beschriftung und Wert wäre
auf dem Telefon lauter als in der Tabelle. */
[data-fassung="schmal"] table.tab.karten tbody tr.gewaehlt { background: var(--blau-hell); }
[data-fassung="schmal"] table.tab.karten tbody tr.anklickbar:hover { background: var(--tab-hover); }
[data-fassung="schmal"] table.tab.karten tbody tr > td,
[data-fassung="schmal"] table.tab.karten tbody tr.anklickbar:hover > td { background: transparent; }
[data-fassung="schmal"] table.tab.karten td.diff-gut,
[data-fassung="schmal"] table.tab.karten td.diff-knapp,
[data-fassung="schmal"] table.tab.karten td.diff-schlecht { background: transparent; font-weight: 600; }
/* Ein Deckel (drei Zeilen, dann scrollen) gilt nur am Schreibtisch: Auf dem
Telefon scrollt die ganze Seite, und ein Fenster im Fenster, das man mit
dem Finger treffen muss, ist dort das Gegenteil von Ruhe. */
[data-fassung="schmal"] .tabelle.gedeckelt { max-height: none; }
|