/* =====================================================================
ProjectPattex — Stylesheet
Mobile first. Farben als Custom Properties, Dark Mode automatisch.
===================================================================== */
/* --- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
/* Kein Unterstrich, nirgends (FH, 2026-08-24). Links tragen die
Akzentfarbe; beim Überfahren wird sie kräftiger. Ausnahmen gibt es
nicht - wer eine braucht, setzt sie an der Stelle selbst. */
a { color: var(--accent); text-decoration: none; }
/* Nur Links ohne eigene Klasse - Knopf, Navigation und Namenlink
bringen ihr eigenes Verhalten mit und sollen es behalten. */
a:not([class]):hover { color: var(--accent-strong); }
/* --- Farbmarken ------------------------------------------------------
Zwei Achsen, nicht eine (FH, 2026-08-27):
Schema die Farbwelt - vier Stueck, gehoert zur Person und steht
deshalb in der Datenbank; der Server schreibt sie als
`data-schema` ans .
Hell/Dunkel gehoert zum Geraet - abends am Telefon dunkel, tagsueber
am Rechner hell. Bleibt im localStorage, gesetzt von
assets/js/theme.js vor dem ersten Zeichnen.
Deshalb steht hier je Schema **ein** Block mit zwei Saetzen Rohwerten
(`--h-*` hell, `--d-*` dunkel), und darunter **einmal** die Zuweisung
fuer die drei Zustaende. Ohne diese Trennung waeren es vier Schemen
mal drei Zustaende = zwoelf Paletten, von denen man beim Aendern
immer eine vergisst.
Ein fuenftes Schema ist ein Block, kein Umbau.
--------------------------------------------------------------------- */
:root {
/* Hoehe aller Bedienelemente einer Zeile - Textfeld, Auswahlfeld und
Knopf holen sie sich hier, damit sie nebeneinander buendig sind. */
--feldhoehe: 2.875rem;
--feldhoehe-klein: 2.125rem;
--radius: 12px;
--nav-h: 62px;
/* Die wirkliche Hoehe der Leiste, nicht eine gerundete: `body` haelt
darunter Platz frei und der klebende Tabellenkopf setzt sich
darunter. Stand hier 54, waehrend die Leiste 57 mass, verschwanden
die obersten drei Pixel jeder Seite hinter ihr. bin/test_hoehen.js
misst nach und faellt um, wenn beides auseinanderlaeuft. */
--topbar-h: 58px;
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
/* --- Sand: das warme Grau des Logos, die Vorgabe --------------------
Rot bleibt schlechten Werten vorbehalten - so faellt eine
Hypertonie-Einordnung wirklich auf, statt in einer ohnehin roten
Oberflaeche unterzugehen. `--accent-ink` ist die Schrift, die auf
einer Akzentflaeche liegt.
Die Schemabloecke stehen bewusst auf `[data-schema=…]` und nicht auf
`:root[data-schema=…]`: das Kaertchen in der Profileinstellung traegt
sein Schema selbst und soll dieselben Marken bekommen wie die Seite.
Sand braucht dafuer einen eigenen Block - ohne ihn erbte ein
Sand-Kaertchen auf einer Tinte-Seite deren Rohwerte.
--------------------------------------------------------------------- */
:root,
[data-schema="sand"] {
--h-accent: #605a53; --h-accent-strong: #4a453f;
--h-accent-soft: #ebe5db; --h-accent-ink: #ffffff;
--h-bg: #f4f1ec; --h-surface: #ffffff; --h-surface-2: #ebe6de;
--h-border: #dcd5c9; --h-text: #26231e; --h-muted: #6d665c;
--d-accent: #b8ab9c; --d-accent-strong: #d0c4b6;
--d-accent-soft: #2c281f; --d-accent-ink: #232019;
--d-bg: #1a1815; --d-surface: #232019; --d-surface-2: #2c281f;
--d-border: #3c362d; --d-text: #ece7de; --d-muted: #968e84;
}
/* --- Schiefer: kuehles Blaugrau ------------------------------------- */
[data-schema="schiefer"] {
--h-accent: #55606b; --h-accent-strong: #3f4954;
--h-accent-soft: #e4e9ee; --h-accent-ink: #ffffff;
--h-bg: #f1f3f5; --h-surface: #ffffff; --h-surface-2: #e6e9ec;
--h-border: #d5dade; --h-text: #1f242a; --h-muted: #5f6a75;
--d-accent: #a8b4c0; --d-accent-strong: #c3cdd7;
--d-accent-soft: #252b31; --d-accent-ink: #1c2126;
--d-bg: #14181c; --d-surface: #1c2126; --d-surface-2: #252b31;
--d-border: #333b43; --d-text: #e2e7ec; --d-muted: #8b95a0;
}
/* --- Salbei: gedaempftes Gruen -------------------------------------- */
[data-schema="salbei"] {
--h-accent: #4f6b58; --h-accent-strong: #3b5142;
--h-accent-soft: #e2ebe4; --h-accent-ink: #ffffff;
--h-bg: #f1f4f0; --h-surface: #ffffff; --h-surface-2: #e4eae2;
--h-border: #d3dbd0; --h-text: #1f2620; --h-muted: #5f6b60;
--d-accent: #9fbca8; --d-accent-strong: #bcd2c2;
--d-accent-soft: #252c26; --d-accent-ink: #1c221d;
--d-bg: #141814; --d-surface: #1c221d; --d-surface-2: #252c26;
--d-border: #333c35; --d-text: #e3e9e3; --d-muted: #8a958b;
}
/* --- Tinte: tiefes Blau, auch im Grund -------------------------------
FH, 2026-08-28: "das 2. und 4. Farbschema ist fast gleich". Es war
fast dasselbe Schema. Gemessen lagen Grund, Flaeche, Rahmen und Text
zwischen zwei und fuenf von 255 auseinander - unter der Schwelle, ab
der ein Auge etwas bemerkt. Verschieden war allein der Akzent, und
der sitzt nur auf Knoepfen und Verweisen; auf einer Seite mit wenigen
Knoepfen war Tinte von Schiefer nicht zu unterscheiden.
Tinte traegt sein Blau jetzt bis in den Grund: der Hellgrund geht
deutlich ins Blaue, der Dunkelgrund ebenso. Schiefer bleibt das
neutrale Grau, das es immer war - der Unterschied liegt damit auf
der ganzen Flaeche und nicht mehr auf drei Knoepfen. */
[data-schema="tinte"] {
--h-accent: #35508a; --h-accent-strong: #26386d;
--h-accent-soft: #dfe6f4; --h-accent-ink: #ffffff;
--h-bg: #eceff9; --h-surface: #ffffff; --h-surface-2: #dde3f2;
--h-border: #c6cfe6; --h-text: #1b1f2e; --h-muted: #5b6480;
--d-accent: #8fa6de; --d-accent-strong: #aebfec;
--d-accent-soft: #232941; --d-accent-ink: #171b2b;
--d-bg: #10131f; --d-surface: #171b2b; --d-surface-2: #232941;
--d-border: #333c5c; --d-text: #e2e6f3; --d-muted: #8992ad;
}
/* --- Was in jedem Schema gleich bleibt -------------------------------
Diese Farben **tragen Bedeutung** und werden deshalb vom Schema nicht
angefasst: Gruen heisst in jeder Farbwelt dasselbe. Wuerde ein Schema
sie mitdrehen, hiesse derselbe Ton je nach Einstellung etwas anderes.
Das Gepruefte-Siegel hat aus demselben Grund ein eigenes Blau und
nicht --good: der Haken sagt "nachgesehen", nicht "guter Wert".
Bei den Schlagworten fehlt Rot mit Absicht - das bleibt schlechten
Werten -, und Gruen und Bernstein sind bewusst andere Toene als
--good und --warn, damit ein Schlagwort nicht wie eine Bewertung
aussieht.
--------------------------------------------------------------------- */
:root {
--good: #1f7a44;
--warn: #a8690a;
--bad: #a71930;
--siegel: #2f6fb0;
/* "Zu niedrig" - bisher nur die Untertemperatur (FH, 2026-09-03:
"Untertemperatur sollte aber blau sein"). Ein eigener Ton neben
--siegel: das Siegel ist ein Abzeichen, das hier ist ein Messwert,
und zwei Bedeutungen sollen nicht an derselben Zahl haengen. */
--kalt: #2b6ca3;
/* Reihenfarben fuer mehrreihige Diagramme */
--chart-2: #3c6e8f;
--chart-3: #96703f;
--tag-grau: #6d665c;
--tag-blau: #3c6e8f;
--tag-ocker: #96703f;
--tag-salbei: #4f7a63;
--tag-rost: #9a5a44;
--tag-pflaume: #7a5586;
--tag-petrol: #2c716b;
--tag-oliv: #77762e;
/* Blutdruck: drei deutlich verschiedene Farbfamilien - Blau, Bernstein,
warmes Grau. Alle drei Linien durchgezogen, damit "gestrichelt"
eindeutig fuer eine Messpause steht. */
--bp-sys: #1f5f85;
--bp-dia: #a5670f;
--bp-pul: #6d665c;
--shadow: 0 1px 2px rgb(0 0 0 / .06), 0 4px 14px rgb(0 0 0 / .05);
}
/* --- Was der Browser selbst zeichnet -----------------------------------
Datumsauswahl, Bildlaufleisten, Auswahlfelder: die malt der Browser,
und er richtet sich dabei nach `color-scheme`. Ohne diese vier Zeilen
steht dort `normal`, und "normal" heisst: nimm das Schema des
Systems.
Das geht schief, sobald beides auseinanderlaeuft. Wer im Profil
**dunkel** waehlt, waehrend das Betriebssystem hell steht, bekommt
ein dunkles Feld mit einem hell gedachten Kalendersymbol darin -
dunkelgrau auf dunkelbraun, praktisch unsichtbar. Genau das hat FH
am 2026-08-31 gemeldet ("bei den routinen habe ich keine kalender
hilfe beim zeitraum"): die Hilfe war da, man sah sie nur nicht.
Nachgemessen, nicht vermutet: bei System hell und `data-theme="dark"`
stand an der Wurzel `color-scheme: normal` und am Feld ein
Hintergrund von rgb(35, 32, 25).
Ohne `data-theme` bleibt es beim `` im
Layout - dann folgt die Anwendung ohnehin dem System, und beide
sagen dasselbe. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
/* --- Hell: die Vorgabe ----------------------------------------------
`[data-schema]` steht daneben, damit das Vorschaukaertchen im Profil
aus seinen eigenen Rohwerten dieselben Marken bildet wie die Seite. */
:root,
[data-schema] {
--accent: var(--h-accent);
--accent-strong: var(--h-accent-strong);
--accent-soft: var(--h-accent-soft);
--accent-ink: var(--h-accent-ink);
--bg: var(--h-bg);
--surface: var(--h-surface);
--surface-2: var(--h-surface-2);
--border: var(--h-border);
--text: var(--h-text);
--muted: var(--h-muted);
}
/* --- Dunkel in zwei Zustaenden ---------------------------------------
1. Systemeinstellung, solange der Benutzer nichts gewaehlt hat
2. ausdrueckliche Wahl "dunkel"
Die Wahl liegt als data-theme am -Element und wird von
assets/js/theme.js noch vor dem ersten Zeichnen gesetzt.
Beide Zustaende weisen dasselbe zu; nur die Bedingung davor
unterscheidet sich. Die Werte selbst stehen weiter oben je Schema.
--------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]),
:root:not([data-theme="light"]) [data-schema] {
--accent: var(--d-accent);
--accent-strong: var(--d-accent-strong);
--accent-soft: var(--d-accent-soft);
--accent-ink: var(--d-accent-ink);
--bg: var(--d-bg);
--surface: var(--d-surface);
--surface-2: var(--d-surface-2);
--border: var(--d-border);
--text: var(--d-text);
--muted: var(--d-muted);
--good: #5aa86f;
--warn: #d9a441;
--bad: #d63a52;
--siegel: #6aa9e0;
--kalt: #6fb2e0;
--chart-2: #8fa9b8;
--chart-3: #c08f6a;
--tag-grau: #a49c92;
--tag-blau: #7fb0cd;
--tag-ocker: #c9a071;
--tag-salbei: #86b79c;
--tag-rost: #cf9683;
--tag-pflaume: #b596bf;
--tag-petrol: #6fbab2;
--tag-oliv: #c6c079;
--bp-sys: #6fb0d4;
--bp-dia: #e0a24f;
--bp-pul: #a49c92;
--shadow: 0 1px 2px rgb(0 0 0 / .4), 0 4px 14px rgb(0 0 0 / .3);
/* Im Dunkeln ist `--accent` schon hell; weiter aufzuhellen hiesse,
das Kaestchen im Grund verschwinden zu lassen. */
--haken: var(--accent);
/* Und der Haken darauf muss dunkel sein - `--accent-ink` ist genau
die Farbe, die auf `--accent` lesbar ist. `--text` waere hier
hell und der Haken damit unsichtbar. */
--hakenstrich: var(--accent-ink);
}
}
:root[data-theme="dark"],
:root[data-theme="dark"] [data-schema] {
--accent: var(--d-accent);
--accent-strong: var(--d-accent-strong);
--accent-soft: var(--d-accent-soft);
--accent-ink: var(--d-accent-ink);
--bg: var(--d-bg);
--surface: var(--d-surface);
--surface-2: var(--d-surface-2);
--border: var(--d-border);
--text: var(--d-text);
--muted: var(--d-muted);
--good: #5aa86f;
--warn: #d9a441;
--bad: #d63a52;
--siegel: #6aa9e0;
--kalt: #6fb2e0;
--chart-2: #8fa9b8;
--chart-3: #c08f6a;
--tag-grau: #a49c92;
--tag-blau: #7fb0cd;
--tag-ocker: #c9a071;
--tag-salbei: #86b79c;
--tag-rost: #cf9683;
--tag-pflaume: #b596bf;
--tag-petrol: #6fbab2;
--tag-oliv: #c6c079;
--bp-sys: #6fb0d4;
--bp-dia: #e0a24f;
--bp-pul: #a49c92;
--shadow: 0 1px 2px rgb(0 0 0 / .4), 0 4px 14px rgb(0 0 0 / .3);
/* Im Dunkeln ist `--accent` schon hell; weiter aufzuhellen hiesse,
das Kaestchen im Grund verschwinden zu lassen. */
--haken: var(--accent);
/* Und der Haken darauf muss dunkel sein - `--accent-ink` ist genau
die Farbe, die auf `--accent` lesbar ist. `--text` waere hier
hell und der Haken damit unsichtbar. */
--hakenstrich: var(--accent-ink);
}
/* Reserviert Platz fuer die Scrollleiste, damit der Inhalt nicht seitlich
springt, sobald eine Seite laenger oder kuerzer wird. */
html { scrollbar-gutter: stable; }
/* Der Doppeltipp zoomt nicht mehr (FH, 2026-09-02, in der App
aufgefallen): wer schnell zweimal tippt - zwei Haken, zweimal
derselbe Knopf - bekam stattdessen die Vergroesserung.
`manipulation` laesst Wischen und das Zwei-Finger-Zoomen in Ruhe
und nimmt nur die Doppeltipp-Deutung weg. Am Wurzelelement, weil
ein Element die Geste nur bekommt, wenn alle Vorfahren sie
erlauben - so gilt es ueberall, ohne an jedem Feld zu stehen. */
html { touch-action: manipulation; }
body {
font-family: var(--font);
font-size: 16px;
line-height: 1.5;
color: var(--text);
background: var(--bg);
/* Platz fuer die feste Kopfleiste. */
padding-top: var(--topbar-h);
padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
-webkit-font-smoothing: antialiased;
}
body.is-guest { padding-top: 0; padding-bottom: 0; display: grid; place-items: center; min-height: 100svh; }
h1 { font-size: 1.4rem; line-height: 1.25; font-weight: 650; }
h2 { font-size: 1.1rem; line-height: 1.3; font-weight: 650; }
h3 { font-size: .95rem; font-weight: 650; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
/* --- Topbar --------------------------------------------------------- */
.topbar {
/* Fest statt sticky: ein sticky-Element wird beim Scrollen vom
Compositor mitgefuehrt und schleift dabei sichtbar hinterher. Ein
festes Element wird einmal gezeichnet und bleibt stehen. */
position: fixed; top: 0; left: 0; right: 0; z-index: 40;
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: .7rem 1rem;
min-height: var(--topbar-h); box-sizing: border-box;
/* Bewusst deckend und ohne backdrop-filter: eine unscharfe Ebene ueber
dem scrollenden Inhalt bekommt eine eigene Compositing-Ebene und
wackelt in Chrome beim Scrollen um Bruchteile eines Pixels. */
background: var(--surface);
border-bottom: 1px solid var(--border);
}
/* 1.05rem Luft zwischen Wuerfel und Wortmarke (bis Paket 152: .55rem):
der taumelnde Koerper ragt bis 10,5 px ueber seine 28-px-Buehne
hinaus (gemessen ueber den ganzen Umlauf) und stiess mit .55rem an
das Wort. FH, 11.09.2026: "ProjectPattex im Kopfteil sollte etwas
weiter rechts stehen." */
.topbar__brand { display: flex; align-items: center; gap: 1.05rem; text-decoration: none; color: var(--text); }
/* Groesser als die 19 x 21 px bis zum 2026-08-29 (FH: "das Pattexlogo
oben links etwas groesser darstellen"). Daneben steht die Wortmarke
mit 16 px in Fettschrift - ihre Zeile ist 24 px hoch, das Zeichen war
also kleiner als die Schrift, die es begleiten soll. 26 x 29 passt
weiter bequem in die 58 px hohe Leiste und traegt das Verhaeltnis des
Originals (1512:1701) mit. */
/* Der Koerper in der Kopfzeile: eine Buehne von 28 px, der Wuerfel
darin steht, taumelt, steht (wuerfel--pausen). */
.topbar__mark {
--wuerfel-g: 28px; --wuerfel-h: 14px;
width: var(--wuerfel-g); height: var(--wuerfel-g); perspective: 10rem;
color: var(--accent); flex: 0 0 auto;
}
.brandmark { width: 40px; height: 46px; margin: 0 auto .7rem; color: var(--accent); display: block; }
/* Auf der Anmeldung als Koerper, der steht, taumelt, steht (FH,
11.09.2026). Dieselbe Buehne wie im Schleier, nur kleiner. Oben
1.25rem und unten 1.9rem Luft (Paket 153): der taumelnde Koerper ragt bis 16,3 px
ueber seine 44-px-Buehne hinaus, und der Kasten hat 1.1rem Rand -
im unguenstigsten Moment stand er 1 px vor der Kante, und ebenso
dicht an der Ueberschrift darunter (FH: "dass oberhalb vom wuerfel
mehr platz ist"). */
.brandmark--koerper {
--wuerfel-g: 2.75rem; --wuerfel-h: 1.375rem;
width: var(--wuerfel-g); height: var(--wuerfel-g); perspective: 16rem;
margin-top: 1.25rem; margin-bottom: 1.9rem;
}
.topbar__name { font-weight: 650; letter-spacing: -.01em; }
.topbar__actions { display: flex; align-items: center; gap: .5rem; }
/* --- Die Sprungsuche (FH, 2026-09-03) ---------------------------------
Ein Feld für Seiten und Datensätze. Der Knopf steht in der Kopfzeile,
das Blatt legt sich über die ganze Seite - auf jedem Schirm dasselbe,
weil in der Kopfzeile eines Telefons kein Feld Platz hat.
Der Knopf sieht aus wie ein Feld und ist keines: so ist ohne
Beschriftung klar, was passiert, wenn man ihn drückt. Am Handy
schrumpft er auf die Lupe. */
.sprung__knopf {
display: inline-flex; align-items: center; gap: .45rem;
padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 8px;
background: var(--surface); color: var(--muted);
font: inherit; font-size: .88rem; cursor: pointer;
}
.sprung__knopf:hover { border-color: var(--accent); color: var(--text); }
.sprung__knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sprung__knopf svg {
width: 1.05rem; height: 1.05rem; flex: none;
fill: none; stroke: currentColor; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
/* Die Taste als Verzierung - sie sagt, dass es einen kürzeren Weg gibt. */
.sprung__taste {
border: 1px solid var(--border); border-radius: 4px;
padding: 0 .3rem; font-size: .75rem; line-height: 1.3;
}
@media (max-width: 620px) {
.sprung__wort, .sprung__taste { display: none; }
.sprung__knopf { padding: .35rem .45rem; }
}
/* Der Schleier. `hidden` allein reicht nicht, sobald hier ein
display steht - dieselbe Falle wie bei der Kartenlupe. */
.sprung {
position: fixed; inset: 0; z-index: 120;
display: flex; justify-content: center;
padding: max(3rem, 8vh) 1rem 1rem;
background: color-mix(in srgb, #000 45%, transparent);
}
.sprung[hidden] { display: none; }
body.is-sprung { overflow: hidden; }
.sprung__blatt {
display: flex; flex-direction: column; width: min(38rem, 100%);
max-height: min(32rem, 80vh);
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: 12px;
box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
overflow: hidden;
}
.sprung__kopf {
display: flex; align-items: center; gap: .5rem; flex: none;
padding: .6rem .7rem; border-bottom: 1px solid var(--border);
}
.sprung__lupe {
width: 1.1rem; height: 1.1rem; flex: none;
fill: none; stroke: var(--muted); stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
/* Randlos war die Absicht: der Rahmen des Blattes ist schon da, ein
zweiter darin machte aus einer Zeile eine Schachtel.
**Erreicht wird sie nicht** (gemessen am 06.09.2026, Paket 99).
`border: 0`, `background: transparent` und das linke Polster
verlieren gegen die Grundregel fuer Eingabefelder ganz oben: die ist
als Ausschlussliste geschrieben, neun `:not()` machen Spezifitaet
0,9,1, und `.sprung__feld` hat 0,1,0. Am Feld stehen deshalb ein
1 px breiter Rahmen, ein weisser Grund und 12 px Polster links.
**Das ist FHs Entscheidung und kein Versehen.** Drei Varianten sind
gebaut und fotografiert worden (A heute, B wirklich randlos, C
randlos mit Abstand zur Lupe); er hat A gewaehlt. Wer die drei
Zeilen also wirksam machen will - mit der Ausschlussliste noch
einmal, wie bei `.field--invalid` in Paket 91 -, aendert damit das
Aussehen gegen seine Entscheidung.
Sie bleiben stehen, weil `flex`, `min-width` und die Schrift daneben
sehr wohl wirken. Dieser Kommentar steht hier, damit der naechste
Leser sie nicht fuer eine Beschreibung dessen haelt, was auf dem
Schirm steht. Siehe `docs/offene_punkte.md`. */
.sprung__feld {
flex: 1 1 auto; min-width: 0;
border: 0; background: transparent; color: inherit;
font: inherit; font-size: 1rem; padding: .25rem 0;
}
.sprung__feld:focus { outline: none; }
.sprung__liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .3rem 0; }
.sprung__gruppe {
padding: .5rem .8rem .2rem; font-size: .72rem; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.sprung__ziel {
display: flex; align-items: center; gap: .5rem;
padding: .45rem .8rem; color: inherit; text-decoration: none;
}
/* Hervorgehoben wird über eine Klasse und nicht über :hover: die
Tastatur soll dieselbe Zeile markieren wie die Maus, und zwei Wege
zu einer Hervorhebung wären zwei, die auseinanderlaufen. */
.sprung__ziel.is-wahl { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.sprung__ziel .sprung__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Seiten sind Orte, Datensätze sind Dinge - ein Pfeil sagt das ohne
ein Wort dafür zu verbrauchen. */
.sprung__ziel.is-seite .sprung__name::before { content: "→ "; color: var(--muted); }
.sprung__leer { padding: 1.2rem .8rem; color: var(--muted); }
.sprung__fuss {
flex: none; margin: 0; padding: .45rem .8rem;
border-top: 1px solid var(--border);
font-size: .78rem; color: var(--muted);
}
/* --- Avatare -----------------------------------------------------------
Ein Bild vom Benutzer, rund - oben rechts, im Profil und hinter dem,
was jemand selbst angelegt hat. Wer kein Foto hat, bekommt einen
farbigen Kreis mit seinen Initialen; damit steht ueberall etwas, ohne
dass jemand erst etwas hochladen muss (FH, 2026-08-27).
---------------------------------------------------------------------- */
.avatar {
display: inline-flex; align-items: center; justify-content: center;
flex: none; overflow: hidden; border-radius: 50%;
/* Ein Rahmen um den Kreis (FH, 2026-08-27). Er trennt das Bild vom
Hintergrund - ein Foto mit hellem Rand verlief sonst in die
Kopfleiste, und der Kreis mit den Initialen sass ohne Kante da. */
border: 1px solid var(--border);
background: var(--surface-2); color: var(--text);
font-weight: 650; line-height: 1; letter-spacing: .02em;
/* Die Initialen sind Text und wuerden sich sonst markieren lassen,
wenn man ueber den Kreis zieht. */
user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--klein { width: 1.4rem; height: 1.4rem; font-size: .6rem; }
/* In einer Tabellenzeile steht der kleine Avatar hinter dem Namen und
soll dort **mittig zur Schrift** sitzen, nicht auf der Grundlinie
haengen (FH, 2026-08-27) - dasselbe wie beim Siegel daneben. Beide
sind Zeichen am Namen und sollen gleich aussehen.
`middle` statt eines em-Werts: der Kreis ist 1,4 rem hoch und damit
hoeher als die Zeile, ein fester Versatz haette bei jeder anderen
Schriftgroesse wieder danebengelegen. Gemessen bleibt ein Pixel
Abstand zur Mitte des Namens (bin/test_avatar.js). */
.avatar--klein { vertical-align: middle; margin-left: .3rem; }
.avatar--mittel { width: 2.125rem; height: 2.125rem; font-size: .78rem; }
.avatar--gross { width: 5rem; height: 5rem; font-size: 1.6rem; }
/* Die Farbe kommt aus dem Benutzernamen (App\Support\Avatar) - und aus
vier der Variablen, die auch die Schlagworte benutzen, damit nicht
zwei Farbwelten nebeneinanderstehen und beide im dunklen Bild
mitziehen. Seit dem 03.09.2026 haben die Schlagworte vier weitere;
die Avatare bekommen sie bewusst **nicht** - warum, steht in
App\Support\Avatar.
Etwas kraeftiger als am Abzeichen (22 statt 16 Prozent): dort steht
Text darauf, hier tragen zwei Buchstaben die ganze Flaeche. */
.avatar--grau { background: color-mix(in srgb, var(--tag-grau) 22%, transparent); color: var(--tag-grau); }
.avatar--blau { background: color-mix(in srgb, var(--tag-blau) 22%, transparent); color: var(--tag-blau); }
.avatar--ocker { background: color-mix(in srgb, var(--tag-ocker) 22%, transparent); color: var(--tag-ocker); }
.avatar--salbei { background: color-mix(in srgb, var(--tag-salbei) 22%, transparent); color: var(--tag-salbei); }
/* Oben rechts ist der Avatar der ganze Knopf - deshalb bekommt er den
Rahmen beim Tastaturweg, nicht ein unsichtbares Kaestchen darum. */
.topbar__user { display: inline-flex; border-radius: 50%; }
.topbar__user:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topbar__user .avatar { transition: box-shadow .12s; }
.topbar__user:hover .avatar { box-shadow: 0 0 0 2px var(--border); }
/* Die Reiter über den Profilseiten. Dieselbe Machart wie die
segmentierten Schalter, aber über die ganze Breite und umbrechend -
sechs Wörter passen am Handy nicht in eine Zeile. */
.profilnav {
display: flex; flex-wrap: wrap; gap: .3rem;
margin: .2rem 0 1rem; padding: .25rem;
background: var(--surface-2); border-radius: 10px;
}
.profilnav a {
padding: .45rem .8rem; border-radius: 7px;
color: var(--muted); font-size: .9rem; font-weight: 600;
}
.profilnav a:hover { color: var(--text); }
.profilnav a[aria-current="page"] {
background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
/* Die zweite Ebene unter der Administration. Sie soll als Unterpunkt zu
erkennen sein und nicht als zweite Reihe gleichrangiger Reiter:
deshalb ohne eigene Fläche, kleiner, und ein Stück eingerückt. */
.profilnav--unter {
background: transparent; padding: 0 0 0 .25rem;
margin-top: -.6rem; margin-bottom: 1rem;
}
.profilnav--unter a { font-size: .82rem; padding: .3rem .6rem; }
.profilnav--unter a[aria-current="page"] {
background: var(--surface-2); box-shadow: none;
}
/* Die vier Farbwelten zur Wahl. Jedes Kaertchen traegt das Schema
selbst (`data-schema`), zeigt also nicht eine gemalte Behauptung,
sondern die Marken, die die Seite danach wirklich benutzt. */
.schemawahl {
display: grid; gap: .7rem; margin: .8rem 0;
grid-template-columns: repeat(auto-fill, minmax(min(7rem, 100%), 1fr));
}
.schema { display: grid; gap: .4rem; cursor: pointer; }
.schema input { position: absolute; opacity: 0; pointer-events: none; }
.schema__bild {
display: block; padding: .55rem; border-radius: 10px;
border: 2px solid var(--border); background: var(--bg);
transition: border-color .12s;
}
/* Innerhalb des Kaertchens gelten die Marken des gewaehlten Schemas -
deshalb hier bewusst `--surface` und `--accent` statt fester Werte. */
.schema__flaeche {
display: grid; gap: .3rem; padding: .5rem;
background: var(--surface); border-radius: 6px;
}
.schema__balken { display: block; height: .55rem; border-radius: 3px; background: var(--accent); }
.schema__zeile { display: block; height: .35rem; border-radius: 3px; background: var(--surface-2); }
.schema__zeile--kurz { width: 60%; }
/* Das gewaehlte Kaertchen traegt einen doppelten Rand statt eines
Hakens: ein Haken auf einer Farbflaeche waere in einem der vier
Schemen immer schlecht zu sehen.
`is-gewaehlt` kommt vom Server und sagt, was **gespeichert** ist;
`:has(input:checked)` sagt, was **angeklickt** ist. Bis 2026-08-28 gab
es nur das erste - wer ein anderes Schema anklickte, sah bis zum
Speichern nichts (FH). Der Ring haengt jetzt an der Auswahl, nicht am
gespeicherten Zustand.
Und er nimmt den Ton der Seite (`--pp-ring`), nicht den des
Kaertchens: `--accent` gilt im Kaertchen dem Schema, das es zeigt -
der Ring waere dann bei jedem Kaertchen anders und beim einen oder
anderen kaum zu sehen. */
.schemawahl { --pp-ring: var(--accent); }
.schema:has(input:checked) .schema__bild {
border-color: var(--pp-ring);
box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--pp-ring);
}
.schema input:focus-visible + .schema__bild { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Die Bereiche zum Anhaken. Ein Kaestchen je Zeile, der Hinweis rechts. */
.modulwahl { list-style: none; display: grid; gap: .1rem; padding: 0; margin: .2rem 0 0; }
/* Dieselbe Schrift wie die Zwischenueberschrift im Menue - es sind
dieselben Gruppen, und sie sollen auch gleich aussehen. */
.modulwahl__kopf {
margin: .95rem 0 0; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted);
}
.modulwahl:first-of-type + .modulwahl__kopf, .modulwahl__kopf:first-of-type { margin-top: .6rem; }
.modulwahl__zeile {
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
padding: .45rem .1rem; border-bottom: 1px solid var(--border);
}
.modulwahl__zeile:last-child { border-bottom: 0; }
.modulwahl__zeile label { display: flex; align-items: center; gap: .55rem; cursor: pointer; }
.modulwahl__zeile input[disabled] + .modulwahl__name { color: var(--muted); }
.modulwahl__name { font-weight: 600; }
.modulwahl__hinweis { margin-left: auto; font-size: .8rem; }
/* Im Profil steht das Bild neben seinem Formular. */
.profilbild {
display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem;
margin-top: .8rem;
}
.profilbild__form { flex: 1 1 18rem; min-width: 0; }
.topbar__user { color: var(--muted); text-decoration: none; font-size: .9rem; }
.topbar__user:hover { color: var(--text); }
/* --- Navigation: unten auf dem Handy, links am Desktop --------------- */
.nav {
position: fixed; z-index: 30; inset: auto 0 0 0;
background: var(--surface);
border-top: 1px solid var(--border);
padding-bottom: env(safe-area-inset-bottom);
}
/* Am Handy ist die Leiste **eine** Reihe, auch wenn die Punkte seit den
Zwischenueberschriften in mehreren Listen stehen: `display: contents`
loest die Listen auf, ihre Punkte werden direkt zu Feldern der Reihe.
Die Vorlage traegt dafuer `role="list"` - Safari nimmt einer so
aufgeloesten Liste sonst ihre Bedeutung fuer Vorlesegeraete. */
.nav { display: flex; }
.nav > ul { display: contents; }
.nav ul { list-style: none; padding: 0; margin: 0; }
.nav li { flex: 1; }
.nav a {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; height: var(--nav-h); text-decoration: none;
color: var(--muted); font-size: .68rem; font-weight: 550;
}
.nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav a[aria-current="page"] { color: var(--accent); }
/* Die Leiste taucht beim Lesen ab (FH, 2026-09-02): wer nach unten
scrollt, will Inhalt sehen; wer nach oben scrollt oder unten
hintippt, will navigieren. Die Klasse setzt app.js und nur am
Handy - die Regel steht trotzdem unter der Medienabfrage, damit
ein liegengebliebenes `is-versteckt` die Spalte am Rechner nie
anfassen kann. 100% nimmt das env()-Polster mit: die Leiste ist
dann wirklich aus dem Bild, nicht nur bis zum Home-Balken. */
@media (max-width: 899.98px) {
.nav { transition: transform .22s ease; }
.nav.is-versteckt { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
.nav { transition: none; }
}
/* --- Layout --------------------------------------------------------- */
.main { padding: 1rem; display: grid; gap: 1rem; min-width: 0; }
.is-guest .main { max-width: 400px; padding: 1.5rem; }
@media (min-width: 900px) {
body { padding-bottom: 0; }
/* overflow-y: sonst laufen die elf Punkte auf niedrigen Fenstern unten heraus. */
.nav { inset: var(--topbar-h) auto 0 0; width: 210px; border-top: 0; border-right: 1px solid var(--border); padding-top: .5rem; overflow-y: auto; }
.nav { display: block; }
.nav > ul { display: flex; flex-direction: column; padding: .5rem; gap: .15rem; }
.nav a { flex-direction: row; justify-content: flex-start; gap: .7rem; height: 42px; padding: 0 .8rem; border-radius: 9px; font-size: .9rem; }
.nav a[aria-current="page"] { background: var(--accent-soft); }
/* Die Zwischenueberschrift traegt nach oben mehr Luft als nach unten:
sie gehoert zu dem, was unter ihr steht, nicht zu dem darueber. */
.nav__gruppe {
margin: .9rem 0 .1rem; padding: 0 1.3rem;
font-size: .68rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted);
}
.nav > ul:first-of-type + .nav__gruppe { margin-top: .5rem; }
.nav__leiste { display: none; }
body:not(.is-guest) .main { margin-left: 210px; }
.main { padding: 1.5rem; }
.topbar { padding-left: 1.25rem; }
}
/* Der Behälter um eine Liste darf nicht breiter werden als die Karte.
Ohne das gilt `min-width: auto`, und eine breite Tabelle schiebt ihn
auseinander - die Tabelle hat ihren eigenen Rollbalken
(`.table-wrap`), aber der greift erst, wenn der Behälter darüber
schmal bleibt. Am Handy war die Messwerteseite dadurch 471 statt
390 px breit; `bin/vorschau.js` hat es gemeldet, zu sehen war nur ein
Wackeln beim Wischen. */
[data-liste] { min-width: 0; }
/* --- Karten --------------------------------------------------------- */
.card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow);
padding: 1.1rem; display: grid; gap: .85rem;
min-width: 0;
}
.card--center { text-align: center; justify-items: center; }
/* Der Kasten, hinter dem etwas endgueltig verschwindet (FH,
2026-08-30, Konto loeschen). Er sieht aus wie jeder andere, nur der
Rand nimmt die Warnfarbe auf - kein roter Block, sondern ein Kasten,
der sich beim Ueberfliegen von den drei darueber unterscheidet. Die
Ueberschrift bleibt in der Schriftfarbe: rote Ueberschriften lesen
sich wie ein Fehler, und hier ist noch nichts passiert.
`color-mix` wie bei `.btn--danger`: der Rand nimmt dieselbe Farbe
auf und ist damit in jedem Schema stimmig. Browser ohne `color-mix`
bekommen ueber die erste Zeile den gewoehnlichen Rand - blasser
waere schoener, sichtbar ist wichtiger. */
.card--gefahr {
border-color: var(--bad);
border-color: color-mix(in srgb, var(--bad) 45%, var(--border));
}
/* Was an einem Konto haengt, in Zahlen - vor dem Loeschknopf. Eine
Liste ohne Punkte: die Zahl am Anfang jeder Zeile ist die Marke, ein
Punkt davor waere eine zweite. */
.bestandliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.bestandliste li { font-size: .85rem; color: var(--muted); }
.bestandliste strong { color: var(--text); font-variant-numeric: tabular-nums; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-width: 0; }
/* Die Kopfzeile steht auch ausserhalb einer Karte direkt im Raster -
ohne das darf sie nicht schrumpfen und schiebt die Seite auf. */
.card__head > .btn-row { min-width: 0; }
/* Ein Formular als Kind der Karte ist ein Rasterfeld und wuechse sonst
mit seinem Inhalt - eine breite Tabelle darin schoebe die ganze Seite
auf, statt in ihrer .table-wrap zu scrollen. */
.card > form { min-width: 0; }
.grid { display: grid; gap: 1rem; }
@media (min-width: 620px) { .grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 620px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
/* Fuellt die Breite selbstaendig: eine Spalte schmal, danach zwei, drei,
vier - je nachdem wie viel Platz da ist. Ohne festen Umbruchpunkt. */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: start; }
/* Eine Reihe aus drei Kacheln: das Bild, daneben der Stapel aus
Einheiten und Packungen, daneben Herkunft. Unter 900 px stapelt sich
alles - drei Spalten waeren dort jede fuer sich zu schmal. */
.grid--details { align-items: start; }
@media (min-width: 900px) {
/* Die Bildspalte richtet sich nach dem Bild (auto), die beiden anderen
teilen sich den Rest. stretch laesst alle drei Kacheln gleich hoch
werden - das Bild wird so hoch wie die Herkunftskachel, und seine
Breite ergibt sich aus dem Seitenverhaeltnis. */
.grid--details { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.card--bild { max-width: 18rem; padding: .7rem; }
/* So hoch wie die Nachbarkachel, aber nicht hoeher als 12rem - sonst
zieht eine lange Herkunftstabelle das Bild ins Riesenhafte. */
.card--bild .bildknopf { height: 100%; display: grid; place-items: center; }
.card--bild .produktbild { height: 100%; max-height: 12rem; width: auto; margin: 0; }
}
.stapel { display: grid; gap: 1rem; align-content: start; min-width: 0; }
/* Bildkachel: nur das Bild, mittig, ohne Ueberschrift. */
.card--bild { display: grid; place-items: center; }
.produktbild { display: block; max-width: 100%; max-height: 8rem;
border-radius: var(--radius); object-fit: contain; }
/* --- Kennzahlen ----------------------------------------------------- */
.stat { display: grid; gap: .15rem; }
.stat__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.stat__value { font-size: 1.75rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat__unit { font-size: .95rem; font-weight: 500; color: var(--muted); }
.stat__delta { font-size: .85rem; font-variant-numeric: tabular-nums; }
.is-good { color: var(--good); }
.is-warn { color: var(--warn); }
.is-bad { color: var(--bad); }
/* "Zu niedrig" bei der Koerpertemperatur - siehe LabRepository::KALT_UNTEN. */
.is-kalt { color: var(--kalt); }
/* --- Formulare ------------------------------------------------------ */
.form { display: grid; gap: .9rem; }
/* `hidden` heisst versteckt - auch bei allem, was von sich aus
`display: flex` oder `grid` bekommt. Ohne das steht ein verstecktes
Abzeichen sichtbar da: die Klasse setzt `inline-flex`, und das schlaegt
den Vorgabewert des Attributs. Aufgefallen an der Filterleiste, wo die
Zahl neben "Filter" und der Verweis zum Zuruecksetzen zwischen sichtbar
und versteckt wechseln (FH, 2026-08-27). */
[hidden] { display: none !important; }
.field { display: grid; gap: .3rem; }
/* Ein Feld wächst nicht in die Höhe, nur weil das Feld daneben einen
Hinweistext trägt. Ohne das verteilt das Raster die freie Höhe auf
seine Zeilen, und ein Eingabefeld stünde höher da als das gleiche
Feld eine Spalte weiter. */
.field { align-content: start; }
/* Auch ohne