/* ==========================================================================
SEITENSCHALE UND WERTEVORRAT
Die Marke von conve (www.conve.at) in Tokens gegossen. Die NAMEN sind
dieselben geblieben, die die rund 1500 Zeilen Fachschicht darunter benutzen
- nur ihre WERTE sind jetzt Conve. Wer einen Namen ändert, macht aus einer
Farbanpassung eine Umschreibung der ganzen Datei.
>> WO DIE MARKENWERTE NICHT UEBERNOMMEN WURDEN, UND WARUM.
Die Website ist ein Marketingauftritt: große Flächen, kurze Texte, viel
Weiss. Dieses Werkzeug ist eine Maske, vor der jemand stundenlang sitzt und
Kleingedrucktes liest. Drei Markenfarben erreichen dort den geforderten
Kontrast nicht (WCAG 1.4.3: 4,5:1 im Fliesstext). Sie sind abgedunkelt,
Farbton und Wiedererkennung bleiben. Nachgerechnet, nicht geschätzt:
Marke auf Weiss verwendet auf Weiss
--primary #007DA9 4,66:1 #005F82 (Marke: 7,10:1
--primary-dark)
Fehler #E74C3C 3,82:1 #C0392B 5,44:1
Erfolg #28CA42 2,18:1 #146C33 6,52:1
--text-muted #8891A4 3,17:1 #616B7F 5,36:1
#007DA9 ist nicht verloren: Es steht als --akzent-hell für alles, was
nicht gelesen, sondern gesehen wird - Fokusring, Überfahren, Kanten - und
als in allen drei Layouts.
Der Grund für #005F82 statt #007DA9 im Fliesstext ist eng: Ein Verweis in
Markenblau auf der Seitenfläche --grund erreicht 4,26:1 und liegt damit
knapp unter der Schwelle. "Knapp" heißt hier: bei jedem zweiten Link auf
jeder Seite.
========================================================================== */
/* --------------------------------------------------------------------------
Inter, aus dem eigenen Haus
Die Hausschrift liegt unter assets/vendor/inter/ - zwei variable Schnitte
(Achse wght 100-900) in genau den Teilmengen, die Google Fonts ausliefert.
Nachgesehen, nicht angenommen: `latin` trägt 230 Zeichen einschließlich
ae/oe/ue/ss, Gedankenstrich und Mittelpunkt; `latin-ext` trägt 733 und
fängt an, wo `latin` aufhört. Die unicode-range-Angaben unten sind
deshalb keine Zierde - ohne sie lädt der Browser die falsche der beiden
Dateien und setzt Kästchen statt Buchstaben.
Zwei url() und keine dritte: Die CSP lautet font-src 'self', und das System
sagt nach außen genau drei Ausgänge zu. Ein Schriftabruf wäre ein
vierter.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Inter';
src: url("../vendor/inter/inter-latin-Gz7AlRl.woff2") format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
src: url("../vendor/inter/inter-latin-ext-1Br77OV.woff2") format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
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;
}
/* >> DER ERSATZSCHNITT IST KEINE ZIERDE.
font-display:swap heißt: Der Browser setzt die Seite erst mit der
Ersatzschrift und tauscht dann. Arial ist deutlich schmaler und
kurzbäuchiger als Inter - ohne Angleichung springt beim Tausch die ganze
Maske, und zwar sichtbar. Die vier Werte sind die Metriken von Inter,
umgerechnet auf Arial; sie verändern nur den Ersatz, nie Inter selbst.
local() ist kein Netzabruf und von der CSP nicht berührt. */
@font-face {
font-family: 'Inter Ersatz';
src: local('Arial'), local('Helvetica'), local('Liberation Sans');
size-adjust: 107.12%;
ascent-override: 90.2%;
descent-override: 22.48%;
line-gap-override: 0%;
}
/* ==========================================================================
DER WERTEVORRAT
>> BIS HIERHER WAR NUR DIE FARBE ENTSCHIEDEN.
Die erste Fassung dieses Blattes fuehrte siebzehn Farbtoken mit
nachgerechneten Kontrasten - und keinen einzigen Abstand, keine
Schriftgroesse, keine Zeilenhoehe, keine Bedienhoehe. Nachgezaehlt, bevor
hier etwas geaendert wurde:
Dimension Token im Umlauf in Deklarationen
Farbe 17 2 (vorbildlich)
Radius 5 4 (vorbildlich)
Abstand 0 39 589
Schriftgroesse 0 30 166
Zeilenhoehe 0 8 --
Bedienhoehe 0 7 --
Das ist die Ursache dessen, was der Auftraggeber "schlecht dargestellt"
genannt hat: Nichts hatte zweimal denselben Wert, also sah nichts
absichtlich gesetzt aus. Neununddreissig Abstandsstufen sind keine
Gestaltung, sondern neununddreissig Einzelentscheidungen, von denen keine
die anderen kennt.
>> WARUM LEITERN UND NICHT NUR NAMEN.
Ein Token, das einen vorgefundenen Wert nur umbenennt, aendert nichts. Die
Leitern unten sind deshalb GESCHLOSSEN und grob: acht Abstaende, sechs
Schriftgroessen, drei Zeilenhoehen, drei Bedienhoehen. Wer eine neunte
Stufe braucht, muss sie hier eintragen - und sieht dann beim Lesen dieser
Datei, wie viele es geworden sind. Das ist dieselbe Vorkehrung, die weiter
unten die neunzehn Prozentbreiten der CSP-Ersatzklassen zusammenhaelt.
>> DIE FARBEN SIND UNVERAENDERT. Ihre Namen, ihre Werte, ihre
Kontrastrechnungen. Sie waren die einzige Dimension, die bereits ein
System hatte; sie anzufassen haette Substanz zerstoert und nichts geloest.
Dazugekommen sind sieben, und zwar ABGELEITET statt gegriffen - siehe
unten.
========================================================================== */
:root {
/* ------------------------------------------------------------------
FLAECHEN. Reihenfolge wie in der ersten Fassung: --grund ist die
dunkelste, --flaeche das Papier, --flaeche-2 liegt dazwischen. Die
Fachschicht rechnet damit (eine Karte auf --grund, eine Einlassung
auf --flaeche-2 in der Karte); eine Umkehrung liesse Kacheln
verschwinden.
------------------------------------------------------------------ */
--grund:#eef2f6; --flaeche:#fff; --flaeche-2:#f6f9fb;
/* NEU: die vierte Stufe, eingelassen. Sie fehlte, und deshalb sahen
Rollbehaelter, Vorschaufenster und der Grund eines Dateifelds aus wie
eine Karte statt wie eine Vertiefung. */
--flaeche-3:#e9eff5;
/* ------------------------------------------------------------------
SCHRIFT. --tinte und --tinte-2 sind die Markenwerte --text und
--text-secondary. --tinte-3 ist die abgedunkelte Fassung von
--text-muted: Der Markenwert erreicht 3,17:1 und traegt in dieser
Anwendung Fliesstext (die unveraenderten Zeilen im Wortlautdiff).
------------------------------------------------------------------ */
--tinte:#1a1a2e; --tinte-2:#4a5568; --tinte-3:#616b7f;
/* ------------------------------------------------------------------
KANTEN. --rand ist der Markenwert, leicht abgedunkelt, weil er hier
gegen eine getoente statt gegen eine weisse Seite steht. --rand-stark
erreicht 3,28:1 auf Weiss - die Schwelle fuer die Umrandung eines
Bedienelements (WCAG 1.4.11).
------------------------------------------------------------------ */
--rand:#dce2ea; --rand-weich:#ebeff4; --rand-stark:#838fa0;
/* ------------------------------------------------------------------
AKZENT. --akzent traegt Schrift und muss lesbar sein; --akzent-hell
ist das Markenblau und traegt, was gesehen und nicht gelesen wird.
------------------------------------------------------------------ */
--akzent:#005f82; --akzent-hell:#007da9; --akzent-weich:#c8e8fb;
/* NEU. Der gefuellte Hauptknopf brauchte einen Zustand fuer den Zeiger.
app.css:3580 schrieb `var(--akzent-dunkel, var(--akzent))` - mit
Rueckfall, also folgenlos, aber eben auch wirkungslos: Der wichtigste
Knopf jeder Maske antwortete nicht auf das Ueberfahren. */
--akzent-dunkel:#004a66;
/* ------------------------------------------------------------------
SEMANTIK. Farbe traegt nie allein eine Aussage (WCAG 1.4.1) - alle
drei stehen in der Fachschicht neben einem Wort.
------------------------------------------------------------------ */
--warn:#c0392b; --hinweis:#96610d; --gut:#146c33;
/* >> DIE SECHS GETOENTEN WERTE SIND GERECHNET, NICHT GEGRIFFEN.
Sie standen zwoelfmal als `color-mix(in srgb, var(--warn) 6%,
transparent)` mitten in der Fachschicht - jedes Mal mit einem anderen
Prozentsatz (6, 7, 8, 12), weil niemand nachsah, was daneben stand.
Als Ableitung geschrieben loesen sie zwei Aufgaben auf einmal:
Sie sind EIN Wert statt zwoelf, und sie kippen im Dunkelmodus von
selbst mit - `--warn` und `--flaeche` sind dort andere Farben, die
Mischung folgt. Deshalb steht unten im Dunkelmodusblock keine
Wiederholung dieser sechs Zeilen.
`var(--flaeche)` und nicht `transparent`: Eine durchscheinende Toenung
nimmt die Farbe dessen an, was zufaellig dahinterliegt - unter einem
haftenden Tabellenkopf ist das die durchrollende Zeile. */
--warn-weich:color-mix(in srgb, var(--warn) 8%, var(--flaeche));
--hinweis-weich:color-mix(in srgb, var(--hinweis) 9%, var(--flaeche));
--gut-weich:color-mix(in srgb, var(--gut) 8%, var(--flaeche));
/* Die Kante desselben Kastens. 40 Prozent, damit sie sich von der
Flaeche abhebt, ohne die Lautstaerke der Vollfarbe zu haben. */
--warn-rand:color-mix(in srgb, var(--warn) 40%, var(--rand));
--hinweis-rand:color-mix(in srgb, var(--hinweis) 40%, var(--rand));
--gut-rand:color-mix(in srgb, var(--gut) 40%, var(--rand));
/* Die Kopfleiste des Portals. Eigene Token, damit die Flaeche im
Dunkelmodus mitkippen kann, statt als heller Balken stehen zu bleiben. */
--portalband:#005f82; --portalband-tinte:#fff;
/* ==================================================================
DIE RAUMLEITER — acht Stufen auf dem 4px-Raster
Ersetzt 39 freie Werte in 589 Deklarationen, davon 19 Stufen allein
unterhalb von 1rem (.15 .2 .25 .3 .32 .35 .4 .45 .5 .55 .6 .65 .7
.75 .8 .9). Vier Pixel sind die kleinste Einheit, die man auf einem
Bildschirm noch als Absicht liest.
In rem und nicht in px: Ein fester Pixelwert uebergeht die im Browser
eingestellte Grundschrift. Wer sie auf 20px stellt, bekommt hier
groessere Abstaende mit - genau das ist der Zweck.
================================================================== */
--raum-0:0;
--raum-1:.25rem; /* 4px innerhalb einer Zeile: Marke zu Wort */
--raum-2:.5rem; /* 8px Zellpolsterung senkrecht, Knopfluecke */
--raum-3:.75rem; /* 12px Zellpolsterung waagrecht, Feldpolsterung */
--raum-4:1rem; /* 16px zwischen Geschwistern */
--raum-5:1.5rem; /* 24px zwischen Abschnitten, Rasterluecke */
--raum-6:2rem; /* 32px zwischen Bloecken */
--raum-7:3rem; /* 48px zwischen Kapiteln */
--raum-8:4rem; /* 64px Seitenfuss */
/* ==================================================================
DIE SCHRIFTLEITER — sechs Stufen
Ersetzt 30 Werte in 166 Angaben. 98 davon lagen im Band .82rem bis
.98rem: dreizehn Stufen fuer einen einzigen Zweck, naemlich "etwas
kleiner als Fliesstext". Das ist jetzt --schrift-sm, und es ist EIN
Wert.
Die Stufen sind bewusst weit auseinander. Zwei Groessen, die sich um
0,03rem unterscheiden, sind keine Hierarchie - sie sind ein Fehler,
den niemand bemerkt.
================================================================== */
--schrift-xs:.75rem; /* Marke, Tabellenkopf, Gruppentitel, Pfad */
--schrift-sm:.875rem; /* ARBEITSWERT: Zelle, Beitext, Beschriftung */
--schrift-md:1rem; /* Fliesstext */
--schrift-lg:1.125rem; /* h2 */
--schrift-xl:1.375rem; /* h1 im Seitenkopf */
--schrift-2xl:1.75rem; /* Kachelziffer */
/* >> WARUM h1 KLEINER WIRD (1.75rem -> 1.375rem).
Ein Fachwerkzeug braucht keinen Plakattitel. Die alte Groesse stammt
aus einem Satzspiegel fuer Fliesstext; auf einer Maske, deren
Ueberschrift "12 Lohnverrechnung" lautet, kostet sie nur senkrechten
Platz. Die Ordnung leistet der Seitenkopf, nicht die Punktgroesse. */
/* ==================================================================
ZEILENHOEHE — drei Stufen statt acht Werten von 1.1 bis 1.7
Der groesste Einzelhebel fuer Dichte. Die Grundzeile faellt von 1.6
auf 1.5; zusammen mit der Zellpolsterung aus der Raumleiter sinkt die
Tabellenzeile von 45,3 auf rund 35 Pixel. In der Fristenliste stehen
damit elf Zeilen im Bild statt sieben.
================================================================== */
--zeile-eng:1.3; /* Ueberschriften, Tabellenzellen, Marken */
--zeile-normal:1.5; /* Grundzeile */
--zeile-weit:1.65; /* Erlaeuterungen, Portal */
/* ==================================================================
SCHRIFTGEWICHT
Vorgefunden: 400, 600, 650, 700 - wobei 650 in einer variablen
Schrift eine eigene Strichstaerke ist und in der Ersatzschrift auf
700 einrastet. Beim Tausch sprang die Seite. Vier benannte Stufen,
alle in der Achse von Inter (100-900) und in Arial vorhanden.
================================================================== */
--fett-normal:400; --fett-halb:500; --fett-stark:600; --fett-voll:700;
/* ==================================================================
BEDIENHOEHE — drei Stufen statt sieben ungeordneten
Knopf, Feld, Auswahl, Filterreiter und Blaetterschritt waren sieben
verschiedene Hoehen. Nebeneinander in einer Werkzeugleiste sah das
aus, als sei es aus Teilen zusammengesetzt - was es auch war.
2,25rem ist der Regelfall und kein Kompromiss: Es ist die Hoehe, bei
der --schrift-sm mit --raum-2 Innenabstand senkrecht sitzt.
================================================================== */
--hoehe-1:1.75rem; /* 28px Nebenhandlung in einer Tabellenzelle */
--hoehe-2:2.25rem; /* 36px REGELFALL */
--hoehe-3:2.75rem; /* 44px Anmeldung, Hauptabsenden, Beruehrungsziel */
/* ==================================================================
RADIUS
Die fuenf Stufen standen schon da und wurden benutzt. Dazu kommt die
Pille: Sie stand viermal als `border-radius:999px` im Blatt.
================================================================== */
--radius-xs:4px;
--radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px;
--radius-voll:999px;
/* ==================================================================
SCHATTEN
Die drei vorhandenen bleiben. Dazu einer fuer das, was ueber der
Seite schwebt - Dialog und Aufklappmenue. Er ist deutlich staerker,
weil ein Element ohne Abhebung nicht als "davor" gelesen wird.
================================================================== */
--schatten-sm:0 1px 3px rgba(0,125,169,.06);
--schatten-md:0 4px 20px rgba(0,125,169,.08);
--schatten-lg:0 8px 40px rgba(0,125,169,.10);
--schatten-schwebend:0 16px 48px rgba(16,24,32,.18), 0 2px 8px rgba(16,24,32,.10);
/* ==================================================================
BREITEN
>> DIE AUSNAHME WIRD ZUR REGEL (und umgekehrt).
Bisher galt ueberall 70rem, und ab 90rem Fensterbreite durfte die
Arbeitsspalte auf 100rem wachsen. Das ist andersherum richtig: 58
Prozent der Masken sind Datenmasken, und eine Tabelle mit siebzehn
Spalten in 1120 Pixeln bricht auf vier Zeilen je Datensatz um,
waehrend links und rechts je 276 Pixel leer bleiben.
--breite-text bleibt der Deckel fuer alles, was gelesen wird. Eine
Erlaeuterung ueber 1600 Pixel ist nicht lesbar, egal wie breit das
Fenster ist.
================================================================== */
--breite-text:70ch; /* Fliesstext, Beitexte, Hilfetexte */
--breite-masse:70rem; /* Formular- und Lesemasken */
--breite-weit:100rem; /* Listenmasken */
/* ==================================================================
DAUER UND VERLAUF
Vorgefunden: .1s, .12s, .15s, 120ms, .2s, 200ms - sechs Werte fuer
zwei Absichten. Die Zeitkurve war ueberall `ease`; sie startet zu
traege fuer einen Zustandswechsel unter dem Zeiger.
Jede Bewegung dieses Blattes hat ein Gegenstueck in
`prefers-reduced-motion` - das ist die Regel und keine Zugabe.
================================================================== */
--dauer-schnell:.1s;
--dauer-normal:.18s;
--stufe:cubic-bezier(.2,0,.2,1);
/* ==================================================================
DIE EBENEN
Vorgefunden: 1, 2, 3, 60 - ohne Namen, an vier Stellen im Blatt
verteilt. Wer eine fuenfte brauchte, riet.
Die Abstaende sind gross genug, dass ein Bauteil dazwischenpasst.
================================================================== */
--ebene-haftend:2; /* Tabellenkopf, haftende Zeile */
--ebene-gliederung:10; /* die Gliederung beim Rollen */
--ebene-kopfleiste:60; /* Kopf, Ebenenstreifen, Banner */
--ebene-ueberlagerung:100; /* Dialog, Aufklappmenue, Sprunglink */
}
/* --------------------------------------------------------------------------
DER DUNKELMODUS KIPPT AUSSCHLIESSLICH TOKEN.
Jede Regel weiter unten, die eine feste Farbe setzt, bricht ihn - deshalb
steht hier kein Hex, das nicht auch oben steht. Die Kontraste sind gegen
--flaeche (#161e25) gerechnet: --tinte 14,2:1, --tinte-2 8,1:1,
--tinte-3 4,6:1, --akzent 9,6:1, --warn 6,9:1, --hinweis 7,8:1,
--gut 8,8:1.
>> WAS HIER NICHT STEHT UND WARUM.
Die sechs getoenten Semantikwerte und die drei Semantikkanten fehlen in
diesem Block mit Absicht: Sie sind oben als Mischung aus --warn/--hinweis/
--gut und --flaeche geschrieben. Beide Bestandteile kippen hier, also
kippt die Mischung mit. Wer sie hier noch einmal auffuehrte, haette zwei
Wahrheiten - und die zweite wuerde beim naechsten Farbwechsel vergessen.
Ebenso fehlen Raum, Schrift, Zeile, Gewicht, Hoehe, Radius, Dauer und
Ebene: Ein Abstand hat keinen Dunkelmodus.
-------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
:root:not([data-thema="hell"]) {
--grund:#10161b; --flaeche:#161e25; --flaeche-2:#1c262e;
/* Eingelassen heisst im Dunkeln TIEFER, nicht heller. */
--flaeche-3:#0d1318;
--tinte:#e6ecf2; --tinte-2:#a8b6c4; --tinte-3:#78889a;
--rand:#2a3742; --rand-weich:#202b34; --rand-stark:#5a6c7b;
--akzent:#84cde8; --akzent-hell:#a8dcf2; --akzent-weich:#10323f;
/* Der gefuellte Knopf traegt hier helle Flaeche und dunkle Schrift.
"Dunkler" beim Ueberfahren waere ein Rueckschritt in der
Aufmerksamkeit - er wird heller, wie jede erhellte Flaeche. */
--akzent-dunkel:#a8dcf2;
--warn:#f08a80; --hinweis:#e0a64a; --gut:#6bd08a;
--portalband:#0e2c3a; --portalband-tinte:#dceef7;
/* Ein blaeulicher Schlagschatten ist auf dunklem Grund unsichtbar. */
--schatten-sm:0 1px 3px rgba(0,0,0,.45);
--schatten-md:0 4px 20px rgba(0,0,0,.5);
--schatten-lg:0 8px 40px rgba(0,0,0,.55);
--schatten-schwebend:0 16px 48px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.5);
}
}
/* ==========================================================================
GRUNDSCHICHT
========================================================================== */
* { box-sizing:border-box; }
body {
/* 1rem und nicht 16px: Ein fester Pixelwert übergeht die im Browser
eingestellte Grundschrift, und weil der Rest der Datei in rem rechnet,
wäre die Einstellung für die ganze Anwendung wirkungslos. */
margin:0; min-height:100dvh;
display:flex; flex-direction:column;
background:var(--grund); color:var(--tinte);
font-family:'Inter','Inter Ersatz',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",sans-serif;
font-size:var(--schrift-md); line-height:var(--zeile-normal);
-webkit-font-smoothing:antialiased;
}
/* >> DER UNTERSTRICH GEHOERT IN DEN FLIESSTEXT, NICHT IN DIE BEDIENUNG.
Bis AP-H17 war jeder Verweis unterstrichen - auch die Kachelzahl im
Cockpit, auch jeder Spaltenkopf, auch jeder Filter. Eine Oberflaeche, in
der alles unterstrichen ist, sieht nicht nach Anwendung aus, sondern nach
Dokument.
WCAG 1.4.1 verlangt, dass ein Verweis IM TEXT nicht allein an der Farbe
haengt. Genau dort steht der Unterstrich weiter: in Absaetzen, Beitexten
und Aufzaehlungen. Ein Verweis, der allein in einer Tabellenzelle, auf
einer Kachel oder in der Gliederung steht, ist von umgebendem Text nicht zu
unterscheiden - es gibt keinen -, und er bekommt den Unterstrich beim
Ueberfahren. */
a { color:var(--akzent); text-decoration:none; text-underline-offset:2px; }
a:hover { text-decoration:underline; }
p a, li a, dd a, caption a, .unterzeile a, .hilfe a, .hinweis a, .warnung a,
.leerfall a, .help-text a, small a, .klein a {
text-decoration:underline;
}
/* Der Fokusring ist das Markenblau: Er wird gesehen und nicht gelesen, und er
soll sich von der Schriftfarbe unterscheiden, damit man ihn nicht für eine
Auszeichnung hält. 4,66:1 gegen Weiss und 4,26:1 gegen --grund - die
Schwelle für ein Bedienelement liegt bei 3:1 (WCAG 1.4.11). Genau diese
4,26 waren der Grund, ihn NICHT auch zur Schriftfarbe zu machen: Für
Fliesstext gilt 4,5:1. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
outline:2px solid var(--akzent-hell); outline-offset:2px;
}
/* ==========================================================================
SCHALE UND RASTER
========================================================================== */
/* ==========================================================================
FAMILIE: RASTER, SCHALE UND BREITEN
Diese Familie legt fest, WO etwas steht. Drei Dinge, die das Blatt bisher
an Ort und Stelle handgeschrieben hat:
1. ein benanntes Raster, damit nicht jede Maske ihr eigenes erfindet
(24 handgeschriebene `grid-template-columns` standen im Blatt),
2. eine Schale mit GEMESSENEN Massen statt geschaetzten Zahlen,
3. eine Breitensteuerung, die Liste und Formular unterscheidet.
>> DIE LEITREGEL DIESER FAMILIE.
Eine Medienabfrage misst das FENSTER. Fast alles, was hier zu bemessen
ist, steht aber in `main`, und `main` steht in `.rumpf`, dem die
Gliederung `--gliederung-breite` wegnimmt. Bei 90rem Fenster hat die
Arbeitsspalte 72rem Inhalt, nicht 90. Das Blatt hat diesen Unterschied
bisher an drei Stellen von Hand nachgerechnet (`.werkbank` bei 105rem,
`.beleg-und-arbeit` und `.durchsicht-paar` bei 90rem) und die Rechnung
jedes Mal in einen Kommentar geschrieben.
Deshalb: Die SCHALE misst das Fenster (Medienabfragen), der INHALT misst
seine eigene Spalte (`auto-fit` mit `minmax`). Das ist der Grund, warum
unten vier Bruchpunkte reichen, wo vorher acht standen - drei davon
verschwinden nicht durch Zusammenlegen, sondern weil die Regel dahinter
gar keinen Bruchpunkt braucht.
========================================================================== */
/* --------------------------------------------------------------------------
DIE MASSE DER SCHALE
ACHTUNG BEIM ZUSAMMENFUEGEN: Dieser :root-Block ERGAENZT den Wertevorrat
ganz oben im Blatt, er ersetzt ihn nicht. Er muss NACH den Bloecken der
Familien Raum/Schrift/Radius stehen, weil er `--raum-*` und `--hoehe-3`
benutzt.
Die Hoehenwerte sind gemessen - und sie sind unten mit `min-height` an den
Bauteilen FESTGENAGELT. Das ist der Grund, aus dem sie stimmen duerfen:
Eine Zahl, die nur einmal nachgemessen wurde, ist beim naechsten Eingriff
falsch. Genau das ist passiert: `--kopfleiste-hoehe` stand seit AP-H15 auf
4rem (app.css:2769, mitten im Blatt), AP-H23 setzte den Ebenenstreifen
darunter und brachte die Leiste auf 7,5rem. Der feststehende Tabellenkopf
klebte seither 3,5rem zu hoch und verschwand unter dem Streifen.
-------------------------------------------------------------------------- */
:root {
/* Kopfzeile: Kontozeile (--schrift-sm, .3rem Innenabstand) plus zweimal
--raum-2 Innenabstand plus die 1px-Kante unten. */
--kopf-hoehe:3.5rem;
/* Ebenenstreifen: Reitertitel, Beitext, zweimal --raum-2 und die
3px-Kante, die den offenen Reiter traegt. */
--streifen-hoehe:4rem;
/* Der Unterstuetzungsmodus ist nicht immer da - vorgabemaessig traegt er
deshalb nichts zur Hoehe bei. */
--banner-hoehe:0rem;
/* Was oben feststeht. Aus den Teilen GERECHNET und nirgends abgeschrieben:
Wer eine Zeile in den Kopf legt, aendert einen Wert und nicht sieben. */
--kopfleiste-hoehe:calc(var(--banner-hoehe) + var(--kopf-hoehe) + var(--streifen-hoehe));
/* 15rem statt der bisherigen 15.5rem. Der laengste Punkt der Gliederung
ist "Dublettenpruefung"; mit Zeichen, Luecke und Pillenrand braucht er
bei --schrift-sm 13,4rem. Der Rest war Luft. */
--gliederung-breite:15rem;
/* Zwoelf Spalten sind kein Ritual: Sie teilen sich durch 2, 3, 4 und 6.
Ein Raster mit zehn Spalten kann kein Drittel. */
--spalten:12;
--raster-luecke:var(--raum-5);
}
/* Der Unterstuetzungsmodus schaltet seine Hoehe zu. --hoehe-3 und kein
eigener Wert: Das Banner ist eine Bedienzeile mit einem Verweis darin, und
2,75rem ist die Hoehe, die es bei --raum-2 Innenabstand ohnehin hat.
`:has()` und keine zweite Klasse am : Das Banner steht in einem
Teilstueck, das drei Layouts einbinden - eine Klasse am muesste in
allen dreien bedingt gesetzt werden, und eines wuerde sie vergessen.
`:has()` benutzt das Blatt seit AP-F15 an acht Stellen. */
:root:has(.impersonate-banner) { --banner-hoehe:var(--hoehe-3); }
/* Das Portal hat keinen Ebenenstreifen - dort ist die Leiste nur der Kopf. */
:root:has(> body.welt-portal) {
--kopfleiste-hoehe:calc(var(--banner-hoehe) + var(--kopf-hoehe));
}
/* Anmeldung und Mandantenauswahl haben ueberhaupt keine Kopfleiste. Ohne
diese Zeile schoebe `scroll-padding-top` dort 7,5rem Nichts vor jedes
Sprungziel. */
:root:has(> body.welt-schlank) { --kopfleiste-hoehe:0rem; }
/* --------------------------------------------------------------------------
ERSETZT app.css:163-167 (`html { scroll-padding-top:5.5rem }`)
Die Begruendung bleibt: Die Kopfleiste steht fest, und ohne diese Angabe
landet jedes Sprungziel (#id) darunter und ist nicht zu sehen. Neu ist,
dass die Zahl nicht mehr danebensteht, sondern aus derselben Variablen
kommt wie die Leiste selbst. 5,5rem war die Hoehe VOR dem Ebenenstreifen;
seit AP-H23 war sie um 2rem zu klein, und der Sprunglink unten braucht sie
auf den Millimeter.
--raum-4 obendrauf, damit das Sprungziel nicht an der Kante klebt.
-------------------------------------------------------------------------- */
html { scroll-padding-top:calc(var(--kopfleiste-hoehe) + var(--raum-4)); }
/* --------------------------------------------------------------------------
DER SPRUNGLINK (WCAG 2.4.1 "Bypass Blocks") - NEU, fehlte vollstaendig
Wer die Anwendung mit der Tastatur bedient, lief auf JEDER der 228 Masken
zuerst durch Wortmarke, Kontozeile, drei Ebenenreiter und bis zu siebzehn
Gliederungspunkte, bevor der erste Bedienpunkt der Maske kam - zwei Dutzend
Tabulatorschritte, auf jeder Seite, immer dieselben.
Er ist SICHTBAR, sobald er den Fokus hat, und nur dann. Die Umschrift von
`.nurvorlesen` waere hier falsch: Ein Sprunglink, den man nicht sieht,
wenn man auf ihm steht, ist kein Sprunglink. `position:fixed` und nicht
`absolute`, damit er auch dann im Bild steht, wenn die Seite schon
gerollt war.
-------------------------------------------------------------------------- */
.sprunglink {
position:fixed; z-index:var(--ebene-ueberlagerung);
top:var(--raum-2); left:var(--raum-2);
display:inline-flex; align-items:center;
min-height:var(--hoehe-2); padding:var(--raum-2) var(--raum-4);
color:var(--akzent); background:var(--flaeche);
border:1px solid var(--akzent-hell); border-radius:var(--radius-sm);
box-shadow:var(--schatten-lg);
font-size:var(--schrift-sm); font-weight:var(--fett-stark);
text-decoration:none;
/* Aus dem Bild geschoben statt `display:none`: Ein Element ohne
Darstellung ist auch nicht fokussierbar - dann gaebe es den Link
genau fuer die Nutzer nicht, fuer die er da ist. */
transform:translateY(-300%);
transition:transform var(--dauer-schnell) var(--stufe);
}
.sprunglink:focus { transform:translateY(0); }
.sprunglink:hover { text-decoration:none; }
/* Das Sprungziel. `tabindex="-1"` macht `main` fokussierbar, ohne es in den
Tabulatorlauf zu legen; ohne das springt zwar die Ansicht, der Fokus aber
bleibt oben stehen und der naechste Tabulatorschritt faengt wieder von
vorn an. Die Kante liegt INNEN (negativer Versatz), weil ein Ring um die
volle Arbeitsspalte sonst aus dem Fenster ragt. */
main[tabindex]:focus-visible {
outline:2px solid var(--akzent-hell); outline-offset:-2px;
}
/* ==========================================================================
DIE KOPFLEISTE - ERSETZT app.css:221-232 UND app.css:329-332
Banner, Kopf und Ebenenstreifen stehen zusammen fest. Zwei getrennt
klebende Elemente ueberdecken sich beim Rollen gegenseitig; die Klammer
loest das ohne Hoehenrechnerei.
Neu ist nur, dass die drei Teile jetzt die Hoehe HABEN, die der
Wertevorrat ihnen zuschreibt. Das ist die Bedingung dafuer, dass die
haftende Gliederung, der feststehende Tabellenkopf und
`scroll-padding-top` aus derselben Variablen rechnen duerfen.
========================================================================== */
.kopfleiste {
position:sticky; top:0; z-index:var(--ebene-kopfleiste);
background:var(--flaeche);
box-shadow:var(--schatten-sm);
}
.kopf {
display:flex; align-items:center; gap:var(--raum-4); flex-wrap:wrap;
/* min-height statt eines groesseren Innenabstands: Bei umbrechendem
Inhalt darf die Zeile wachsen, bei normalem Inhalt ist sie auf den
Millimeter --kopf-hoehe. `box-sizing:border-box` (app.css:161) rechnet
die 1px-Kante unten mit hinein. */
min-height:var(--kopf-hoehe);
padding:var(--raum-2) var(--raum-5);
background:var(--flaeche);
border-bottom:1px solid var(--rand);
}
/* >> DER UNTERSTUETZUNGSMODUS.
Teil des Sicherheitsmechanismus, nicht Zierde: Er darf nicht wegrollen und
muss auffallen. Die Schriftfarbe ist --grund und nicht #fff - im
Dunkelmodus kippt --warn nach hell, und weisse Schrift stuende dort mit
2,4:1 auf ihr. So sind es 5,0:1 im hellen und 7,5:1 im dunklen Modus.
Die Hoehe ist neu festgenagelt, weil `--banner-hoehe` oben mit ihr
rechnet: Wuerde das Banner 3rem hoch, saesse die haftende Gliederung
darunter um denselben Betrag zu hoch. */
.impersonate-banner {
display:flex; align-items:center; flex-wrap:wrap; gap:var(--raum-1);
min-height:var(--hoehe-3);
padding:var(--raum-2) var(--raum-5);
font-size:var(--schrift-sm); font-weight:var(--fett-stark);
color:var(--grund); background:var(--warn);
}
/* ERSETZT app.css:3430-3436. Nur Hoehe und Tokens; Farbe, Reiter und die
WCAG-1.4.1-Begruendung des offenen Reiters bleiben unberuehrt.
`border-top:1px solid var(--linie)` stand hier, und `--linie` ist im
ganzen Blatt nirgends definiert. Eine Kantenangabe mit einem unbekannten
Wert ist zur Rechenzeit ungueltig und faellt auf `border:none` zurueck -
die Kante war nicht blass, sie war gar nicht da. Sie heisst `--rand`. */
.ebenenstreifen {
display:flex; align-items:stretch;
gap:var(--raum-1);
min-height:var(--streifen-hoehe);
padding:0 var(--raum-5);
border-top:1px solid var(--rand);
background:var(--flaeche-2);
}
/* Das Portalband war mit .9rem gepolstert und damit 3,6rem hoch - 1,6px mehr,
als --kopf-hoehe sagt. Auf --raum-3 gebracht greift dort dieselbe
min-height, und die Zahl im Wertevorrat stimmt in BEIDEN Welten. Ohne das
klebte der feststehende Tabellenkopf im Portal um diesen Betrag zu hoch. */
.welt-portal .kopf { padding:var(--raum-3) var(--raum-5); }
/* ==========================================================================
DER SEITENRUMPF - ERSETZT app.css:348-352, app.css:362 UND app.css:371-376
Zwei Spalten: die Gliederung links, die Arbeit rechts. Unter 64rem wird
daraus eine Spalte mit zusammengeklappter Gliederung.
========================================================================== */
.rumpf {
flex:1;
display:grid;
grid-template-columns:var(--gliederung-breite) minmax(0,1fr);
}
/* >> DIE TRENNLINIE GEHOERT NICHT AN DIE GLIEDERUNG (neu).
Bis hierher trug `.hauptnavigation` `border-right:1px solid var(--rand)`,
und weil ein Rasterelement vorgabemaessig `align-self:stretch` hat, lief
die Linie ueber die volle Seitenhoehe. Genau das geht verloren, sobald die
Gliederung haftet: Haften verlangt `align-self:start` und eine
`max-height` - und dann reisst die Linie nach einem Bildschirm ab, und
unter der Gliederung steht statt der weissen Spalte der graue Grund.
Drei Loesungen standen zur Wahl:
a) Farbverlauf als Hintergrund auf `.rumpf`. VERWORFEN: Er schriebe die
Spaltenbreite ein ZWEITES Mal fest - wer `--gliederung-breite`
aendert, verschoebe die Linie nicht mit, und die zwei Zahlen liefen
beim naechsten Eingriff auseinander. Ausserdem malte er auch hinter
der Arbeitsspalte.
b) Kante an `.rumpf` selbst. GEHT NICHT: `.rumpf` ist das ganze
Zweispaltenraster, seine Kante liegt aussen.
c) Ein Pseudoelement in Rasterzelle 1/1. GEWAEHLT.
Das Pseudoelement ist ein Rasterelement wie jedes andere: Es liegt in der
Spur der Gliederung, es streckt sich vorgabemaessig ueber die volle Hoehe,
und es folgt `--gliederung-breite` von selbst. Es traegt beides - die
Flaeche der Spalte UND die Linie an ihrem Rand -, und die Gliederung
darueber darf dabei so hoch oder so kurz sein, wie sie will.
Die drei Rasterplaetze stehen ausdruecklich da. Ohne sie legte die
automatische Platzierung das Pseudoelement auf 1/1, die Gliederung auf 1/2
und `main` in eine zweite Zeile. */
.welt-backoffice .rumpf::before {
content:""; grid-area:1 / 1;
background:var(--flaeche);
border-right:1px solid var(--rand);
}
.welt-backoffice .rumpf > .hauptnavigation { grid-area:1 / 1; }
.welt-backoffice .rumpf > main { grid-area:1 / 2; }
/* Das Portal bekommt nichts davon ab: `.welt-portal .rumpf { display:block }`
(app.css:2827, AP-H15) bleibt unveraendert stehen, und das Pseudoelement
oben ist ausdruecklich auf `.welt-backoffice` begrenzt. */
/* >> width:100% IST HIER KEINE ZIERDE (AP-H17).
`main` ist ein Rasterelement in `.rumpf`. Auf einem Rasterelement schaltet
`margin:0 auto` die Selbstausrichtung von "stretch" auf "auto-Raender" um -
und dann bemisst es sich nach seinem INHALT. Die Folge: Die Ueberschrift
stand auf der Uebersicht bei x=307 und auf den Textbausteinen bei x=594.
Jede Maske hatte ihren eigenen linken Rand, und beim Wechseln sprang die
Seite. `width:100%` bindet es wieder an die Spur; der Deckel bleibt. */
main {
max-width:var(--breite-masse); width:100%; min-width:0;
margin:0 auto; padding:var(--raum-5);
}
/* --------------------------------------------------------------------------
DIE HAFTENDE GLIEDERUNG - ERSETZT app.css:371-376
Fuenf Gruppen statt siebzehn gleichrangiger Punkte. Die Gruppenueberschrift
ist kein Verweis: Sie benennt einen Bereich, sie fuehrt nirgendwohin. Wer
sie klickbar macht, erzeugt eine Seite, die es nicht gibt.
NEU: Sie haftet. Die Fristenliste hat 21 Spalten und beliebig viele
Zeilen; wer dort nach unten rollt, hat die Gliederung nicht mehr und muss
fuer jeden Wechsel erst wieder ganz nach oben. Der feststehende
Tabellenkopf loest dasselbe Problem seit AP-H15 waagrecht - senkrecht
blieb es offen.
`align-self:start` ist die Bedingung dafuer: Ein gestrecktes
Rasterelement ist so hoch wie seine Zeile und kann deshalb nirgendwohin
haften. Flaeche und Trennlinie hat es an das Pseudoelement oben abgegeben;
die Begruendung steht dort.
-------------------------------------------------------------------------- */
.hauptnavigation {
grid-area:1 / 1;
align-self:start;
position:sticky; top:var(--kopfleiste-hoehe);
z-index:var(--ebene-gliederung);
/* Siebzehn Punkte in fuenf Gruppen sind hoeher als ein kleiner Laptop.
Ohne den Deckel schoebe die Gliederung ihr unteres Ende aus dem Bild,
und die letzten Punkte waeren beim Rollen NIE zu erreichen. */
max-height:calc(100dvh - var(--kopfleiste-hoehe));
overflow-y:auto;
/* Ist die Gliederung zu Ende gerollt, soll das Rad die SEITE
weiterrollen und nicht in der Spalte haengenbleiben. */
overscroll-behavior:contain;
min-width:0;
padding:var(--raum-4) 0 var(--raum-6);
background:transparent;
border-right:0;
}
/* ==========================================================================
DIE BREITE DER MASKE (loest die Regel aus AP-H15 ab)
Nachgemessen, bevor etwas geaendert wurde: Das Blatt gab JEDER
Backoffice-Maske ab 90rem Fensterbreite 100rem Arbeitsspalte - der
Fristenliste mit 21 Spalten ebenso wie dem Anlegeformular mit vier
Feldern. Beides ist falsch, und zwar in verschiedene Richtungen:
- Ein Formular in 100rem Breite hat ein Feld links und 80rem Nichts
rechts. Wer es ausfuellt, wandert mit den Augen ueber eine leere
Flaeche, weil Beschriftung und Feld auseinandergezogen sind.
- Eine Liste mit 21 Spalten hatte UNTERHALB von 90rem Fenster 70rem -
den Satzspiegel einer Textspalte. Sie rollte waagrecht, obwohl der
Bildschirm daneben leer war.
Also andersherum als bisher: Die Liste bekommt die Breite, die da ist, das
Formular behaelt das Textmass. Und zwar OHNE Medienabfrage - `max-width`
greift von sich aus erst, wenn das Fenster breiter ist als der Deckel.
Die Klasse steht am `` und kommt aus einem Twig-Block im Layout
(siehe "braucht_vorlagenaenderung"). Am `` und nicht am Inhalt, weil
nur `main` die Spur ausfuellt: Eine Klasse weiter innen kann den Deckel
darueber nicht anheben.
========================================================================== */
/* Listen-, Tabellen- und Matrixmasken. `.welt-backoffice` davor, damit die
Regel das Portal nicht erreicht: Dort ist die schmale Spalte Absicht
(`.welt-portal main { max-width:54rem }`) - der Mandant liest dort. */
.welt-backoffice main.maske-weit { max-width:var(--breite-weit); }
/* Formular- und Lesemasken. Steht der Vollstaendigkeit halber da, obwohl sie
nur wiederholt, was `main` ohnehin traegt: Wer die Vorlage liest, soll die
Breite dort ablesen koennen und nicht raten muessen. */
.welt-backoffice main.maske-masse { max-width:var(--breite-masse); }
/* Ein Absatz OHNE Klasse steht in 34 Masken. Bis hierher war er so breit wie
die Spalte; das fiel bei 70rem nicht auf und faellt bei 100rem sofort auf.
`:not([class])` ist keine Feinheit, sondern notwendig: Ein Elementselektor
bringt Gewicht mit, und `.welt-backoffice main > section > p` (0,1,2)
schluege `.unterzeile` (0,1,0) - die Beitexte waeren gewachsen, obwohl
ihre eigene Regel etwas anderes sagt. Mit dem Ausschluss trifft die Regel
genau das, wofuer sie gedacht ist.
Der Deckel ist jetzt --breite-text (70ch) statt der bisherigen 78ch: Der
Wertevorrat kennt EIN Textmass, und zwei Textmasse im selben Blatt sind
eines zu viel. */
.welt-backoffice main > p:not([class]),
.welt-backoffice main > section > p:not([class]),
.welt-backoffice main > .karte > p:not([class]) { max-width:var(--breite-text); }
/* ==========================================================================
DAS RASTER
Zwoelf Spalten in Hausschreibweise. Es ersetzt keine bestehende Regel - es
ist das, was neue Masken benutzen sollen, statt sich ein eigenes
`grid-template-columns` zu schreiben. Genau daraus sind die 24
handgeschriebenen Raster im Blatt entstanden.
========================================================================== */
.raster {
display:grid;
grid-template-columns:repeat(var(--spalten), minmax(0,1fr));
gap:var(--raster-luecke);
/* Zwei Kaesten nebeneinander sollen oben buendig stehen und nicht beide
so hoch werden wie der laengere. */
align-items:start;
}
.spalte-1 { grid-column:span 1; }
.spalte-2 { grid-column:span 2; }
.spalte-3 { grid-column:span 3; }
.spalte-4 { grid-column:span 4; }
.spalte-5 { grid-column:span 5; }
.spalte-6 { grid-column:span 6; }
.spalte-7 { grid-column:span 7; }
.spalte-8 { grid-column:span 8; }
.spalte-9 { grid-column:span 9; }
.spalte-10 { grid-column:span 10; }
.spalte-11 { grid-column:span 11; }
.spalte-12 { grid-column:span 12; }
/* Jedes Kind bekommt `min-width:0` mit. Ohne das ist das Mindestmass eines
Rasterelements sein INHALT, und ein langer Hash oder eine breite Tabelle
zieht die Spur auf, statt in ihrer `.tabellenrolle` zu rollen. Dieselbe
Falle hat das Blatt bisher an sechs Stellen einzeln behoben
(`.werkbank__arbeit`, `.beleg-und-arbeit > *`, `.spalte`, `main`, ...). */
.raster > * { min-width:0; }
/* --------------------------------------------------------------------------
DIE SELBSTMESSENDE SPUR - EINE FORMEL FUER SIEBEN BAUTEILE
>> auto-fit UND NICHT auto-fill (AP-H17).
`auto-fill` legt so viele Spuren an, wie hineinpassen - auch leere. Auf
einem 1920er Bildschirm standen drei Kacheln zu je 250px links in einer
1600px breiten Spalte, und rechts daneben lagen drei leere Spuren.
`auto-fit` faltet die leeren zusammen, und die vorhandenen Kacheln nehmen
den Platz.
Der Kommentar stand seit AP-H17 im Blatt, die Regel darunter (app.css:1237)
sagte `auto-fill`. Er beschrieb also einen Zustand, den es nie gab - und
dreimal daneben, bei `.befundliste`, `.ersatzcodes` und `.vorlagenfelder`,
stand derselbe Fehler ohne Kommentar.
`min(100%, ...)` ist die zweite Haelfte: Ohne sie ragt eine Kachel mit
18rem Mindestbreite aus einer 16rem schmalen Spalte heraus, statt
mitzuschrumpfen.
Dies ist die Stelle, an der diese Familie die Bruchpunkte SPART: Ein
`auto-fit`-Raster misst seine eigene Spalte. Es braucht keine
Medienabfrage, es kennt die Gliederung daneben, und es bleibt richtig,
wenn `--gliederung-breite` sich aendert. Jedes Bauteil unten sagt nur noch
ZWEI Zahlen: ab welcher Spurbreite es teilt und - wenn noetig - wie breit
eine Spur hoechstens werden darf.
-------------------------------------------------------------------------- */
.raster--auto,
.kachelliste,
.zweispaltig,
.beleg-und-arbeit,
.werkbank,
.aktenblatt,
.befundliste,
.vorlagenfelder {
grid-template-columns:repeat(
auto-fit,
minmax(min(100%, var(--mindestbreite, 18rem)), var(--hoechstbreite, 1fr))
);
}
/* --------------------------------------------------------------------------
DIE ZWEI GRUNDFORMEN
`.stapel` und `.reihe` ersetzen den senkrechten Abstand, den das Blatt
bisher als `margin-bottom` an jedes einzelne Bauteil geschrieben hat. Der
Unterschied ist nicht Geschmack: Ein Abstand, der am KIND haengt, ist beim
letzten Kind falsch - deshalb stehen im Blatt zwoelf Regeln der Form
`> :last-child { margin-bottom:0 }` - und er faellt weg, sobald das Kind
in einer Bedingung steht und nicht gerendert wird. Eine Luecke am
BEHAELTER hat beide Fehler nicht.
-------------------------------------------------------------------------- */
/* Senkrechte Reihung. `--luecke` ist der Regler; die Vorgabe ist der
uebliche Abstand zwischen zwei Bloecken einer Maske. */
.stapel {
display:grid;
gap:var(--luecke, var(--raum-4));
align-content:start;
}
/* `margin-block` und nicht `margin`: Der seitliche Einzug bleibt erhalten -
`article.beratungseintrag.nachtrag` lebt davon. */
.stapel > * { margin-block:0; min-width:0; }
.stapel--eng { --luecke:var(--raum-2); }
.stapel--weit { --luecke:var(--raum-6); }
/* Waagrechte Reihung mit Umbruch. Das ist die Form der Werkzeugleiste, der
Filterzeile und jeder Knopfgruppe: nebeneinander, mittig ausgerichtet, und
UMBRECHEND statt die Spalte sprengend. */
.reihe {
display:flex; flex-wrap:wrap; align-items:center;
gap:var(--luecke, var(--raum-3));
}
.reihe > * { margin-block:0; }
.reihe--eng { --luecke:var(--raum-2); }
.reihe--weit { --luecke:var(--raum-5); }
/* Ein Textfeld und sein Knopf gehoeren an die Oberkante, wenn eines von
beiden mehrzeilig ist - mittig ausgerichtet schwimmt der Knopf. */
.reihe--oben { align-items:flex-start; }
/* "Alles links, das Letzte rechts" ohne einen zweiten Behaelter. */
.reihe--auseinander { justify-content:space-between; }
.reihe__schub { margin-inline-start:auto; }
/* ==========================================================================
DIE HANDGESCHRIEBENEN RASTER, AUF DIE FORMEL ZURUECKGEFUEHRT
Alle Bloecke hier ersetzen ein eigenes `grid-template-columns` (und meist
eine Medienabfrage dazu) durch die Formel oben. Sie behalten ihre
Klassennamen - 228 Vorlagen zeigen darauf - und ihre Begruendung; was
wegfaellt, ist die Zahl im Medienausdruck. Jede Zahl unten ist aus der
bisherigen Schwelle nachgerechnet, und die Rechnung steht daneben.
========================================================================== */
/* --- Die Kacheln des Cockpits (ERSETZT app.css:1231-1238) --------------
Zaehlwerte, keine Bewertung. Nach oben gedeckelt: Eine Kachel mit einer
Ziffer und zwei Zeilen Text sieht in 780px Breite leer aus. 22rem ist die
Breite, in der die laengste Bezeichnung zweizeilig steht. Beide Zahlen
sind unveraendert; nur `auto-fill` ist jetzt `auto-fit`, wie es der
Kommentar von AP-H17 immer schon behauptet hat. */
.kachelliste {
list-style:none; margin:0; padding:0;
display:grid; gap:var(--raum-4);
--mindestbreite:17rem;
--hoechstbreite:22rem;
}
/* --- Pruefansicht einer Meldung (ERSETZT app.css:2033-2037, AP-F15) -----
Links der Wortlaut des Mandanten, rechts die Arbeit. Der Unterschied ist
nicht Zierde: Links steht Nachweis und kein Eingabefeld, und die ruhige
Flaeche sagt das, bevor jemand hineinzuklicken versucht.
26rem ist genau die Spaltenbreite, die die bisherige Schwelle von 56rem
Fensterbreite ergab (56rem Fenster minus 2rem Innenabstand, geteilt durch
zwei). Der Bruchpunkt entfaellt trotzdem, und er entfaellt zu Recht: Er
war FALSCH. Bei 56rem Fenster ist die Gliederung zusammengeklappt und die
Spalte 54rem breit; bei 64rem klappt sie auf und nimmt 15rem weg - die
beiden Spalten schrumpften also von 26rem auf 22rem, waehrend das Fenster
BREITER wurde. `auto-fit` misst die Spalte und kennt diesen Sprung. */
.zweispaltig {
display:grid; gap:var(--raum-5); align-items:start;
--mindestbreite:26rem;
}
.spalte { min-width:0; }
/* --- Zwei Faktenbloecke nebeneinander (ERSETZT app.css:3180-3184) -------
Hier stehen zwei TABELLEN nebeneinander, und eine Tabelle, die umbricht,
ist schlechter lesbar als eine, die untereinander steht - deshalb teilt
dieser Fall spaeter als `.zweispaltig`. 34rem entspricht der bisherigen
Schwelle von 90rem Fenster (90 minus 15 Gliederung minus 3 Innenabstand =
72rem Spalte, minus --raum-5 Luecke, geteilt durch zwei = 35,25rem).
Doppelte Klasse im Selektor, damit die Reihenfolge im Blatt egal ist. */
.zweispaltig.zweispaltig--weit { --mindestbreite:34rem; }
.zweispaltig--weit .spalte > h2:first-child { margin-top:0; }
/* --- Beleg links, Arbeit rechts (ERSETZT app.css:3212-3217) ------------
In der Drittlandmaske steht links, WORAUS entschieden wird - der
festgehaltene Stand und die Zeitachse der Rechtsakte -, rechts das
Formular, das entscheidet. Untereinander liegt der Beleg ausserhalb des
Bildschirms, sobald jemand das Formular ausfuellt: Er ist dann genau in
dem Augenblick weg, in dem er gebraucht wird.
35rem statt der Schwelle 90rem, aus derselben Rechnung wie oben. */
.beleg-und-arbeit {
display:grid; gap:var(--raum-5); align-items:start;
--mindestbreite:35rem;
}
.beleg-und-arbeit > * { min-width:0; }
/* Derselbe Deckel wie fuer den Fliesstext der Arbeitsspalte: Eine
Erlaeuterung ueber die volle Spaltenbreite ist nicht lesbar. */
.beleg-und-arbeit p { max-width:var(--breite-text); }
/* --- Werkbank und Nachschlagewerk (ERSETZT app.css:3253-3266) ----------
Zwei Dinge gehoeren NEBENEINANDER und nicht untereinander: die Zuordnung
("welche Klasse bekommt diese Datenkategorie?") und der Bestand der
eigenen Klassen. Das Auswahlfeld der Zuordnung zeigt nur Schluessel und
Bezeichnung - Frist, Belegstelle und Verwendungszahl stehen im Bestand.
Untereinander scrollt der Berater bei jeder einzelnen Zeile.
>> HIER STAND DIE RECHNUNG, DIE DIESE FAMILIE UEBERFLUESSIG MACHT.
Der bisherige Kommentar rechnete vor, warum `.werkbank` erst bei 105rem
FENSTER teilen darf: "Eine Medienabfrage misst das FENSTER, `.werkbank`
steht aber in `main` - und `main` steht in `.rumpf`, das ab 64rem 15.5rem
fuer die Gliederung abzieht." Die Rechnung war richtig, ihr Ergebnis war
ein achter Bruchpunkt, den sonst niemand benutzte.
Die BEDINGUNG aus dem alten Kommentar war: Die schmalere der beiden
Spalten braucht 566px fuer Frist, Verwendungszahl und den Knopf
"Durchsicht vermerken". Sie steht jetzt als Zahl da, wo sie hingehoert -
als Mindestbreite der Spur. Bei --raum-4 Luecke teilt die Werkbank ab
71rem Spurbreite, und beide Spalten haben dann 35,5rem = 568px.
Der Preis: 3fr/2fr wird 1fr/1fr. Bei 568px trug die schmalere Spalte
ohnehin alles, was in ihr steht; das Verhaeltnis war fuer ein 105rem
breites Fenster gewaehlt und nicht fuer die Sache. */
.werkbank {
display:grid; gap:var(--raum-4); align-items:start;
--mindestbreite:35rem;
}
/* Ohne min-width:0 sprengt eine breite Tabelle ihre Rasterspalte, statt im
Behaelter `.tabellenrolle` zu rollen. Beide Kinder stehen ausdruecklich da
und nicht als `> *`: Eine Klasse aus einer Vorlage soll im Blatt
auffindbar sein (AP-H15). */
.werkbank__arbeit, .werkbank__bestand { min-width:0; }
/* --- Die Mandantenakte (ERSETZT app.css:3478-3486) ---------------------
27rem entspricht der bisherigen Schwelle von 75rem Fenster (75 minus 15
minus 3 = 57rem Spalte, minus --raum-5 Luecke, geteilt durch zwei =
27,75rem). Auch hier faellt ein Verhaeltnis weg (1.2fr/1fr): Es sind zwei
unabhaengige Bloecke, keine Haupt- und keine Nebenspalte. */
.aktenblatt {
display:grid; gap:var(--raum-5); align-items:start;
--mindestbreite:27rem;
}
.aktenblatt__spalte { min-width:0; }
/* --- Zwei weitere auto-fill, dieselbe Ursache -------------------------
(ERSETZT die Zeilen app.css:3012 und app.css:3527)
Die Befundliste des Cockpits und die Felderliste der Vorlagenebene tragen
den Fehler von `.kachelliste` ohne dessen Kommentar. Bei EINEM Befund
stand er in 19rem, und daneben lagen zwei leere Spuren.
`.ersatzcodes` (app.css:3069) bleibt bewusst `auto-fill` und steht
deshalb nicht in der Formel oben: Die zehn Ersatzcodes werden
ABGESCHRIEBEN, nicht gelesen. Feste Spuren halten sie in derselben
Rasterlage, auch wenn einer verbraucht ist; `auto-fit` liesse die
verbleibenden auf halbe Seitenbreite wachsen. Das ist der einzige
begruendete auto-fill im Blatt. */
.befundliste { --mindestbreite:19rem; }
.vorlagenfelder { --mindestbreite:20rem; }
/* ==========================================================================
DER SCHALTER FUER SCHMALE BILDSCHIRME
Ohne JavaScript, ohne . Die Begruendung fuer das
Kontrollkaestchen steht in layout/backoffice.html.twig: Die verbergende
Regel liegt ausschliesslich im Medienausdruck weiter unten. Faellt CSS aus
oder greift der Medienausdruck nicht, ist die Navigation sichtbar - nicht
unerreichbar.
>> DAS MENUE WAR AUF SCHMALEN SCHIRMEN NUR MIT DER MAUS ZU OEFFNEN.
AP-H17 nahm das Kaestchen aus dem Tabulatorlauf, weil es oberhalb von
64rem als ERSTES Element jeder Maske den Fokus bekam - auf einem
Bedienelement, das dort `display:none` ist (WCAG 2.4.3). Der Kommentar
daneben versprach: "Sichtbar gemacht wird es erst im schmalen
Medienausdruck unten." Der Medienausdruck unten hat es nie wieder
hergestellt.
Die Folge: `display:none` nimmt ein Element aus dem Tabulatorlauf, und die
zugehoerige `