/* Die Form der Bausteine - Kasten, Kopfzeile, Schild
===================================================
Phase 6 der Aufräumung (Michael, 14.09.2026). Die Makros dazu stehen in
templates/_bausteine.html, die Skala in tokens.css. Tabelle und Kalender
haben ihre eigenen Dateien (tabelle.css, kalender.css); die Knopfleiste ist
die .bedienleiste aus base.html - sie war schon vorher die eine Leiste.
Jeder Wert hier ist ein Merkmal aus tokens.css. Eine Zahl, die hier als Zahl
steht, ist eine Ausnahme mit Grund daneben. */
/* ── Kasten ──────────────────────────────────────────────────────────────
Der EINE weiße Kasten (Michael, 14.09.2026: Rand --grau-3, Radius
--radius-2, Innenluft wie die Kachel des Portals). Er ersetzt .kachel,
.formkasten und Bootstraps .card - vier Kästen mit drei Radien und zwei
Randfarben, bis der Stilkatalog sie nebeneinander zeigte. Die Kachel war
das Vorbild: Das Portal ist die Seite, die jeder morgens aufschlägt.
height: 100% und die Spalte, damit er in einem Raster die Zeile füllt und
sein Inhalt den Rest nimmt (wie .kachel). */
.kasten { background: var(--weiss); border: 1px solid var(--grau-3);
border-radius: var(--radius-2); height: 100%;
display: flex; flex-direction: column; }
.kasten > .kopfzeile { display: flex; align-items: baseline; gap: var(--abstand-4);
padding: var(--abstand-4) var(--abstand-6);
border-bottom: 1px solid var(--grau-2);
font-size: var(--schrift-3); font-weight: 700;
color: var(--blau-dunkel); }
.kasten > .kopfzeile i.bi { color: var(--gruen); }
.kasten > .kopfzeile .spanne { font-weight: 400; font-size: var(--schrift-2);
color: var(--grau-6); }
.kasten > .inhalt { padding: var(--abstand-5) var(--abstand-6); flex: 1 1 auto; }
/* "dicht": ein Kalender oder eine Liste, die selbst Rand und Rundung tragen,
liegt ohne Innenluft im Kasten - sonst stünde Rahmen in Rahmen. */
.kasten > .inhalt.dicht { padding: 0; }
.kasten > .inhalt.dicht > .tabelle { border: 0; border-radius: 0; }
/* Ein Kasten, der auf etwas wartet: der Hinweis in der Mitte, gedämpft. */
.kasten .wartet { display: flex; align-items: center; gap: var(--abstand-5);
min-height: 3.2rem; /* Ausnahme: die Höhe der beiden Portalzeilen, siehe .kachel */
color: var(--grau-6); font-size: var(--schrift-3); }
.kasten .wartet i.bi { font-size: var(--schrift-5); color: var(--grau-4); }
/* Eine Anzeigeleiste im Kasten (die Bilanzen des Portals) steht immer in der
Telefonform (Michael, 14.09.2026): einzelne Kästchen, die umbrechen, wo die
Vorlage ein setzt - drei und drei. Die einzeilige
Leiste, die bei sich scrollt, gehört in die Bedienleiste, wo sie nicht
höher sein darf als die Knöpfe; im Kasten war sie bei 820 (zwei Kästen
nebeneinander) abgeschnitten, bei 1280 schon vorher. Dieselben Werte wie
[data-fassung="schmal"] .anzeigeleiste in base.html. */
.kasten > .inhalt > .anzeigeleiste { display: flex; flex-wrap: wrap; height: auto;
border: 0; background: transparent; overflow: visible; gap: var(--abstand-2); max-width: none; }
.kasten > .inhalt > .anzeigeleiste .feld { flex: 1 1 auto;
border: 1px solid var(--grau-3); border-radius: var(--radius-2); background: var(--weiss);
min-height: 1.9rem; /* Ausnahme: die Höhe der Leiste in der Bedienleiste, base.html */
overflow: hidden; /* die blassblaue Fläche der Bezeichnung endet an der Rundung */ }
/* Bezeichnung links am Rand, der Wert nimmt den Rest und steht mittig. */
.kasten > .inhalt > .anzeigeleiste .feld b { flex: 1 1 auto; justify-content: center; }
.kasten > .inhalt > .anzeigeleiste .zeilenende { display: block; flex-basis: 100%; height: 0; }
/* ── Kastenraster ────────────────────────────────────────────────────────
Kästen nebeneinander, so viele, wie Platz ist (Phase 4, Michael,
14.09.2026: Raster fragen nach Platz, nicht nach Breite - keine col-xl-4).
22 rem je Kasten ist die Breite, in der eine Wochentabelle (8 Spalten)
noch lesbar ist - auf dem Telefon trägt sie 390 px, hier 352 px plus
Innenluft. Am Mac (1280) werden das drei Spalten wie vorher, auf dem iPad
quer (820) zwei statt einer, auf dem Telefon eine. "voll" nimmt die ganze
Zeile - die Besonderheiten im Portal. Der Abstand ist der der Feldraster
und Leisten (--abstand-9), nicht mehr Bootstraps g-3 (1 rem).
Höchstens drei Spalten (Michael, 14.09.2026, "jetzt haben wir vier
Spalten!"): Auf dem breiten Mac stellte auto-fit vier Kästen nebeneinander
und ließ zwei allein in der zweiten Zeile. Die Mindestbreite ist deshalb
max(22 rem, 30 %) - 30 % lässt nie mehr als drei zu, 22 rem hält die
Wochentabelle lesbar. */
.kastenraster { display: grid; gap: var(--abstand-9);
grid-template-columns: repeat(auto-fit, minmax(max(22rem, 30%), 1fr)); }
.kastenraster > .voll { grid-column: 1 / -1; }
[data-fassung="schmal"] .kastenraster { grid-template-columns: 1fr; }
/* ── Schild ──────────────────────────────────────────────────────────────
Bedeutung = Farbe, fünf Regeln (Michael, 14.09.2026). Vorher vierzehn
Formen ohne Regel, davon fünf auf der Personenseite in einer Zeile.
Die Größe ist die Beschriftung ganz klein (--schrift-1), die Rundung die
kleine; dieselbe Form wie die Schilder der Legende. */
/* "span.schild", nicht ".schild": Das Makro tabelle() schreibt die Art einer
Spalte als Klasse an das | - auch "schild" -, und ein Tabellenkopf soll
kein Schild werden (14.09.2026, im Stilkatalog aufgefallen). */
span.schild { display: inline-block; padding: .15rem .45rem; /* Ausnahme: kleiner als --abstand-2, ein Schild ist kein Kasten */
border-radius: var(--radius-1); font-size: var(--schrift-1);
font-weight: 700; line-height: 1.2; white-space: nowrap;
vertical-align: middle; border: 1px solid transparent; }
/* Rolle: Admin rot, Leitung gelb, Mitarbeiter grau - wie heute, nur benannt. */
.schild-rolle-admin { background: var(--rot); color: var(--weiss); }
.schild-rolle-leitung { background: var(--gelb); color: #212529; /* Bootstraps Textschwarz */ }
.schild-rolle-mitarbeiter { background: var(--grau-6); color: var(--weiss); }
/* Zustand: was gilt, grün; was ruht, grau. */
.schild-zustand-aktiv, .schild-zustand-freigegeben, .schild-zustand-veroeffentlicht
{ background: var(--gruen-dunkel); color: var(--weiss); }
.schild-zustand-ruhend, .schild-zustand-gesperrt, .schild-zustand-geschlossen, .schild-zustand-pausiert,
.schild-zustand-in-arbeit { background: var(--grau-4); color: var(--weiss); }
/* Ein Schild, das zwischen zwei Wörtern wechselt (Dienstplan: "in Arbeit" /
"veröffentlicht"), hält seine Breite (Michael, 09.09.2026): Sonst rückte
beim Veröffentlichen alles dahinter um ein paar Punkte, und man greift
daneben. 6 rem ist die Breite von "veröffentlicht" in dieser Schrift. */
span.schild.fest { min-width: 6rem; text-align: center; }
/* Termin: ein Datum, das Beachtung will (ab …, bis …). */
.schild-termin { background: var(--gelb-hell); color: var(--gelb-dunkel);
border-color: var(--gelb-linie); }
/* Kürzel und Wunsch tragen die Kalenderfarbe (kalender.css: .k-*, .w-*). */
.schild-kuerzel, .schild-wunsch { border-color: rgba(0,0,0,.08); /* Ausnahme: ein Hauch Kante auf hellen Flächen, wie die Marken der Personenseite */ }
/* Hinweis: alles Beschreibende - im Bau, Zähler, Quelle. */
.schild-hinweis { background: var(--flaeche-hell); color: var(--grau-6);
border-color: var(--grau-3); }
/* ── Kontoblock ──────────────────────────────────────────────────────────
Ein Konto mit Festsetzungen, Buchungen und Eingabezeile (templates/_konto.html)
- in der Karteikarte und in der Kontenübersicht der Abwesenheit. Stand bis
zum 23.09.2026 im Kopf von personen.html; seit er an zwei Orten steht,
gehört er hierher. */
.kontoblock { border: 1px solid var(--kal-linie); border-radius: .4rem;
padding: .6rem .7rem; margin-bottom: .6rem; }
.kontokopf { font-weight: 600; color: var(--blau-dunkel); margin-bottom: .35rem; }
.kontoblock .tabelle { margin-bottom: .5rem; }
.kontoblock .leise { color: #6b7c8a; font-weight: 400; }
.kontoblock td.zurueck { width: 1.6rem; text-align: right; }
.kontoblock td.zurueck .btn { line-height: 1; }
|