/* ==========================================================================
DIE DESKTOP-SCHICHT — Etappe 1: Rahmen, Dichte, Detail neben der Liste
==========================================================================
WOZU
Die Oberfläche war mobil gedacht und nach oben gedeckelt. Gemessen am
11.8.2026: acht Media Queries, alle `max-width` — es gab keine einzige Regel
für einen großen Bildschirm, und `#content` endete bei 1100 px. Auf einem
24-Zöller stand damit eine schmale Spalte mit 600 px grauem Rand daneben: eine
Handy-App auf einem Schreibtisch.
Der Meister arbeitet aber am Rechner, und zwar den ganzen Tag. Für ihn zählt,
wie viele Zeilen er auf einen Blick sieht und ob er die Tastatur benutzen kann.
WIE SIE ANGEHÄNGT IST
Alles hier hängt an `body.ansicht-desktop`. Diese Klasse gibt es schon
(mobil.js): Sie wird gesetzt, wenn der Bildschirm breiter als 820 px ist oder
der Nutzer „Computer" gewählt hat. Ein zweiter Mechanismus mit eigenen
Breakpoints hätte dieselbe Frage zweimal beantwortet — und die zwei Antworten
wären irgendwann auseinandergelaufen.
Am Handy ändert diese Datei NICHTS. Jede Regel steht hinter
`body.ansicht-desktop`, und die Klasse fehlt dort.
WAS HIER NICHT DRINSTEHT
Tastatur (Etappe 2) und die Feld-Hilfetexte (Etappe 3). Der Rahmen zuerst,
weil die anderen beiden darauf aufbauen.
========================================================================== */
/* --- 1) Der Deckel ------------------------------------------------------------
Nicht ersatzlos weg, sondern weiter gefasst. Ganz ohne Grenze werden auf einem
32-Zöller Tabellenzeilen 2.500 px breit, und das Auge verliert beim Sprung von
der letzten Spalte zurück zur ersten die Zeile. 1.680 px sind rund 20 Spalten
in lesbarer Breite — mehr braucht keine Liste in diesem System. */
body.ansicht-desktop #content {
max-width: 1680px;
padding: 22px 28px 40px;
}
/* Ab wirklich breiten Schirmen mittig, damit der Blick nicht ganz links klebt,
während rechts 800 px leer sind. */
@media (min-width: 1940px) {
body.ansicht-desktop #content { margin-left: auto; margin-right: auto; }
}
/* --- 2) Dichte ---------------------------------------------------------------
Die Zeilenhöhe war für Finger gebaut: 10 px Polster oben und unten, 0,93 rem
Schrift. Am Schreibtisch wird mit der Maus gezeigt, nicht getippt — dort zählt,
wie viele Zeilen ins Bild passen. Aus 10 px werden 6, und aus sechs sichtbaren
Aufträgen werden rund fünfundzwanzig.
Nicht kleiner: Unter 0,88 rem wird eine Zahlenkolonne mühsam, und dieses
System zeigt Geldbeträge. */
body.ansicht-desktop .tabelle th,
body.ansicht-desktop .tabelle td {
padding: 6px 10px;
font-size: 0.88rem;
}
/* --- 2b) Die Tabelle scrollt in ihrem eigenen Kasten ------------------------
ELF SPALTEN PASSEN NICHT IN 1.512 PIXEL, und bis August 2026 schob die
Belegliste der Buchhaltung deshalb die ganze Seite nach rechts: 1.629 px
Tabelle in einem 1.512 px breiten Fenster. Beim Nachrechten wanderten Menü,
Kopfleiste und Kachelband mit aus dem Bild — man scrollte die Anwendung weg,
um eine Zahl zu lesen.
Bemerkt hat es zuerst ein Browser-Test (browsertests/), denn im nachgebauten
DOM gibt es keine Breite: Dort ist jede Tabelle so breit, wie man will.
Der Kasten ist gleichzeitig der Bezugsrahmen für BEIDE stehenden Ränder — den
Spaltenkopf oben (Abschnitt 3) und die Titelspalte links (Abschnitt 14).
Ohne ihn kleben sie am Fenster, und das heißt: Sie kleben, während alles
andere wegrutscht.
`max-height` statt fester Höhe: Eine kurze Liste bleibt genau so hoch wie
ihre Zeilen und bekommt gar keinen Rollbalken. Erst wenn es mehr wird als ein
Bildschirm, rollt der Kasten — und der Spaltenkopf steht dann da, wo er
gebraucht wird. */
body.ansicht-desktop .tabelle-rollbar {
overflow: auto;
max-height: calc(100vh - 210px);
border-radius: 12px;
/* Der Rahmen gehört jetzt an den Kasten: Am Element selbst schnitte
`overflow` die stehenden Zellen ab (siehe Abschnitt 3). */
background: var(--flaeche);
/* Ein Rollbalken, der Fläche wegnimmt, ist am Schreibtisch Lärm. */
scrollbar-width: thin;
}
/* --- 3) Der Spaltenkopf bleibt stehen ---------------------------------------
Bei achtzig Zeilen scrollt die Beschriftung sonst weg, und ab der zwanzigsten
Zeile rät man, welche Spalte welche ist. Möglich wurde das erst durch echtes
(kern.js) — in einem stillschweigenden greift sticky nicht.
`overflow: hidden` am .tabelle (für die runden Ecken) macht sticky unwirksam,
deshalb steht es am Tisch nur noch am Rahmen und nicht am Element selbst. */
body.ansicht-desktop .tabelle { overflow: visible; }
body.ansicht-desktop .tabelle thead th {
position: sticky;
top: 0;
z-index: 2;
/* Ohne eigenen Hintergrund scheinen die Zeilen durch, sobald sie darunter
laufen. Der Wert ist derselbe wie sonst — nur eben undurchsichtig. */
background: var(--primaer-hell);
box-shadow: inset 0 -1px 0 var(--rahmen);
}
/* --- 4) Zeilen zum Abfahren -------------------------------------------------
Wechselnde Zeilenfarben und eine Markierung unter dem Zeiger. Das ist kein
Schmuck: Wer in einer Zeile mit zwölf Spalten nach rechts liest, verliert ohne
diese beiden Hilfen die Zeile — und trägt eine Zahl in der falschen ein. */
body.ansicht-desktop .tabelle tbody tr:nth-child(even) {
background: color-mix(in srgb, var(--primaer-hell) 40%, transparent);
}
body.ansicht-desktop .tabelle tbody tr:hover {
background: color-mix(in srgb, var(--primaer-hell) 85%, transparent);
}
/* Anklickbare Zeilen sagen es auch mit dem Zeiger. */
body.ansicht-desktop .tabelle tbody tr.tappbar { cursor: pointer; }
/* --- 5) Das Detail NEBEN der Liste, nicht darüber ---------------------------
Am Handy ist eine überlagernde Akte richtig: Der Bildschirm hat nur Platz für
eine Sache. Am Schreibtisch ist sie falsch — der Meister will die Liste sehen,
WÄHREND er einen Datensatz liest, und beim Abarbeiten von zwölf Freigaben
nicht zwölfmal zurückspringen.
Umgesetzt ohne eine Zeile JavaScript: `body.detail-offen` gibt es bereits
(kern.js setzt es in rendereDetail). Der dunkle Grund verschwindet, das Panel
bleibt rechts stehen, und der Inhalt macht Platz. Klicks gehen wieder an die
Liste, weil der Überzug keine Ereignisse mehr annimmt — nur das Panel selbst.
Erst ab 1.280 px: Darunter ist nebeneinander enger als eine Postkarte. */
@media (min-width: 1280px) {
body.ansicht-desktop .detail-overlay {
background: transparent;
pointer-events: none;
}
body.ansicht-desktop .detail-panel {
pointer-events: auto;
max-width: 620px;
/* Kein Schlagschatten nach links mehr, sondern eine Kante: Der Schatten
gehörte zu „liegt darüber", und das stimmt hier nicht mehr. */
box-shadow: none;
border-left: 1px solid var(--rahmen);
background: var(--flaeche);
}
/* Der Inhalt macht Platz, statt sich zu verstecken. */
body.ansicht-desktop.detail-offen #content { padding-right: 660px; }
}
@media (min-width: 1700px) {
body.ansicht-desktop .detail-panel { max-width: 760px; }
body.ansicht-desktop.detail-offen #content { padding-right: 800px; }
}
/* --- 6) Formulare in Spalten ------------------------------------------------
`.formular` ist ein umbrechender Flex-Container — am Handy eine Spalte, am
Schreibtisch eine sehr lange Kette. Ein Raster füllt die Breite und hält die
Felder in Reihen, ohne dass für jedes Formular eigene Regeln nötig wären.
minmax(240px, …) ist die Grenze, unter der ein Datumsfeld mit Beschriftung
nicht mehr lesbar umbricht. */
@media (min-width: 1280px) {
body.ansicht-desktop .formular {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px 16px;
align-items: end;
}
/* Ein Textfeld über mehrere Zeilen braucht die ganze Breite — sonst steht die
Leistungsbeschreibung in einer Spalte von 240 px. */
body.ansicht-desktop .formular textarea { grid-column: 1 / -1; }
/* Knöpfe gehören ans Ende und nicht mitten in das Raster. */
body.ansicht-desktop .formular button { grid-column: 1 / -1; justify-self: start; }
}
/* --- 7) Kennzahlen bleiben lesbar ------------------------------------------
`.karten` füllt automatisch auf; bei 1.680 px wären das neun Kacheln in einer
Reihe und jede zu schmal für ihre Zahl. Eine Untergrenze von 220 px hält sie
bei rund sieben — und die Zahl bleibt die Hauptsache. */
body.ansicht-desktop .karten {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* --- 8) Sortierbare Spaltenköpfe (Etappe 2) --------------------------------
Der Pfeil ist nicht Zierde: Ohne ihn weiß niemand, dass die Spalte sortiert
ist, und schon gar nicht in welche Richtung — dann liest man die oberste Zeile
als „die neueste", obwohl sie die älteste ist. */
body.ansicht-desktop .tabelle th.sortierbar {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
body.ansicht-desktop .tabelle th.sortierbar:hover {
background: color-mix(in srgb, var(--primaer) 18%, var(--primaer-hell));
}
body.ansicht-desktop .tabelle th.sortierbar::after {
content: "⇅";
opacity: 0.35;
margin-left: 6px;
font-size: 0.85em;
}
body.ansicht-desktop .tabelle th[data-sortierung="auf"]::after { content: "▲"; opacity: 1; }
body.ansicht-desktop .tabelle th[data-sortierung="ab"]::after { content: "▼"; opacity: 1; }
/* --- 9) Die Nummer am Bereich (Alt + 1…9) ----------------------------------
Ein Tastenkürzel, das man nicht sieht, benutzt niemand. Die Nummer steht
deshalb am Knopf — zurückhaltend, aber sichtbar. */
body.ansicht-desktop .nav-nummer {
margin-left: auto;
font-size: 0.72rem;
opacity: 0.5;
padding-left: 8px;
}
/* --- 10) Die Tafel mit den Tastenkürzeln (?) -------------------------------
z-index über allem außer dem Toast: Sie ist eine Nachfrage des Nutzers und
darf von nichts verdeckt werden, das er nicht gerufen hat. */
body.ansicht-desktop .kuerzel-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .45);
display: flex;
align-items: center;
justify-content: center;
z-index: 34;
}
body.ansicht-desktop .kuerzel-tafel {
background: var(--flaeche);
border-radius: 14px;
padding: 22px 26px;
max-width: 520px;
width: 100%;
box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
body.ansicht-desktop .kuerzel-tafel h3 { margin: 0 0 14px; color: var(--primaer); }
body.ansicht-desktop .kuerzel-liste {
display: grid;
grid-template-columns: max-content 1fr;
gap: 8px 16px;
margin: 0 0 18px;
}
body.ansicht-desktop .kuerzel-liste dt {
font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
background: var(--primaer-hell);
color: var(--primaer);
padding: 2px 8px;
border-radius: 6px;
font-size: 0.85rem;
white-space: nowrap;
}
body.ansicht-desktop .kuerzel-liste dd { margin: 0; align-self: center; }
/* --- 11) Das ⓘ an der Feldbeschriftung (Etappe 3) --------------------------
Zurückhaltend, aber sichtbar: Ein Hilfetext, von dem niemand weiß, ist keiner.
Beim Zeigen wird es deutlich — dann sucht der Blick nicht, sondern findet.
Am Handy erscheint es nicht: Dort gibt es kein Zeigen mit der Maus und damit
kein title-Fenster; ein Zeichen ohne Wirkung wäre nur Verwirrung. Die
Erklärungen stehen dort ohnehin als Platzhalter im Feld. */
body.ansicht-desktop .hilfe-zeichen {
margin-left: 5px;
color: var(--gedaempft);
cursor: help;
font-size: 0.9em;
opacity: 0.55;
}
body.ansicht-desktop label:hover .hilfe-zeichen { opacity: 1; color: var(--primaer); }
/* --- 12) Sichtbarer Fokus ---------------------------------------------------
Vorbereitung für Etappe 2 (Tastatur), aber schon hier richtig: Wer mit der
Tabulatortaste arbeitet, muss sehen, wo er steht. Der Standardrahmen der
Browser verschwindet auf farbigen Flächen — dieser nicht. */
body.ansicht-desktop :is(button, a, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--primaer);
outline-offset: 2px;
border-radius: 4px;
}
/* --- 13) Zahlen rechtsbündig, Ziffern gleich breit (Etappe 4) ---------------
DAS IST DER UNTERSCHIED ZWISCHEN LESBAR UND VERGLEICHBAR.
Am Handy steht eine Karte: „Summe 1.240,50 €" — mit der Beschriftung davor,
und man liest EINEN Wert. Am Schreibtisch steht eine Spalte mit achtzig
Zeilen, und die Frage ist nie „was steht hier?", sondern „welcher Betrag ist
der größte?". Linksbündig kann man das nicht sehen: 999,00 sieht länger aus
als 1.240,50.
Dazu gleich breite Ziffern (tabular-nums). Ohne sie tanzen die Kommastellen,
weil die 1 in den meisten Schriften schmaler ist als die 8 — und dann hilft
auch der rechte Rand nicht mehr.
Welche Spalte eine Zahl ist, weiß die Liste selbst: kern.js schreibt die Art
der Spalte an die Zelle (data-art). Ohne das müsste jede der rund neunzig
Listen es einzeln sagen, und die neunzigste würde es vergessen. */
body.ansicht-desktop .tabelle :is(th, td)[data-art="eur"],
body.ansicht-desktop .tabelle :is(th, td)[data-art="zahl"],
body.ansicht-desktop .tabelle :is(th, td)[data-art="stunden"],
body.ansicht-desktop .tabelle :is(th, td)[data-art="prozent"] {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Ein Datum ist keine Zahl, aber es soll untereinander stehen: TT.MM.JJJJ ist
immer gleich lang, und gleich breite Ziffern machen die Spalte zu einem Block,
in dem das Auge einen Tag findet, ohne zu lesen. */
body.ansicht-desktop .tabelle :is(th, td)[data-art="datum"],
body.ansicht-desktop .tabelle :is(th, td)[data-art="monat"] {
font-variant-numeric: tabular-nums;
}
/* --- 14) Die erste Spalte bleibt stehen -------------------------------------
Eine Auftragsliste hat zwölf Spalten. Wer nach rechts scrollt, um die Marge zu
sehen, verliert den Namen der Baustelle — und liest dann eine Zahl, von der er
nicht weiß, zu wem sie gehört. Genau dieser Fehler ist teuer.
Nur die Spalte mit der Rolle „titel" (kern.js setzt .zell-titel), damit es
nicht in Listen greift, deren erste Spalte ein Datum ist. */
@media (min-width: 1280px) {
body.ansicht-desktop .tabelle tbody td.zell-titel {
position: sticky;
left: 0;
background: var(--flaeche);
z-index: 1;
}
/* Der Kopf DERSELBEN Spalte muss in beide Richtungen stehen bleiben, sonst
scrollt die Beschriftung unter die Zeilen.
„DERSELBEN" ist hier das ganze Thema. Bis August 2026 stand hier
`thead th:first-child` — die ERSTE Spalte —, unten aber `td.zell-titel` —
die Spalte mit dem NAMEN. In der Belegliste der Buchhaltung sind das zwei
verschiedene: vorne steht eine schmale, namenlose Spalte. Beim Rollen nach
rechts blieb oben deren leere Ueberschrift stehen und unten der Lieferant.
Man las einen Namen unter einer Ueberschrift, die nicht dazu gehoerte.
kern.js setzt .kopf-titel auf denselben Schluessel, aus dem unten
.zell-titel entsteht; die beiden koennen jetzt nicht mehr auseinanderlaufen. */
body.ansicht-desktop .tabelle thead th.kopf-titel {
left: 0;
z-index: 3;
}
/* Die Zebra-Streifen liegen sonst UNTER der klebenden Zelle und scheinen
durch — die erste Spalte hätte dann als einzige keinen Streifen. */
body.ansicht-desktop .tabelle tbody tr:nth-child(even) td.zell-titel {
background: var(--flaeche-hoch, var(--flaeche));
}
}
/* --- 15) Lesbare Zeilenlänge für Prosa -------------------------------------
Auf 1.680 px Breite wird ein Hinweissatz 200 Zeichen lang. Ab etwa 90 findet
das Auge beim Zeilenwechsel den Anfang nicht mehr zuverlässig — man liest
dieselbe Zeile zweimal. Tabellen dürfen die ganze Breite haben, Sätze nicht. */
body.ansicht-desktop :is(p.hinweis, .leer-hinweis, .feldgruppe > p) {
max-width: 92ch;
}
/* --- 16) Der Sprachknopf tritt am Schreibtisch zurück -----------------------
Am Handy ist er das Hauptbedienelement: 76 px, mittig unten, immer erreichbar.
Am Schreibtisch wird getippt — dort ist ein Knopf dieser Größe mitten über der
Liste im Weg, und er verdeckt die letzte Tabellenzeile.
Er bleibt sichtbar und benutzbar (die Sprachbedienung IST das Besondere dieses
Systems), aber kleiner und in der Ecke. */
@media (min-width: 1280px) {
body.ansicht-desktop #ptt-bereich {
justify-content: flex-end;
padding-right: 26px;
bottom: 18px;
}
body.ansicht-desktop #ptt {
width: 58px;
height: 58px;
opacity: 0.9;
}
body.ansicht-desktop #ptt:hover { opacity: 1; }
/* Damit die letzte Zeile nicht darunter verschwindet. */
body.ansicht-desktop #content { padding-bottom: 96px; }
}
/* --- 17) Die gewählte Zeile (Tastatur-Navigation) --------------------------
Sie muss sich vom Zeigen mit der Maus (:hover) unterscheiden, sonst weiß man
nicht, welche Zeile Enter öffnet: Beim Durchgehen mit ↑↓ liegt der Mauszeiger
irgendwo, und wenn beide gleich aussehen, öffnet man die falsche.
Deshalb eine Kante links statt einer Fläche — sie bleibt auch dann sichtbar,
wenn die Maus zufällig auf derselben Zeile steht. */
body.ansicht-desktop .tabelle tbody tr.zeile-gewaehlt > td {
background: color-mix(in srgb, var(--primaer) 14%, transparent);
}
body.ansicht-desktop .tabelle tbody tr.zeile-gewaehlt > td:first-child {
box-shadow: inset 3px 0 0 var(--primaer);
}
/* --- 18) Die Kontierung in der Tabellenzeile --------------------------------
Zwei Kontenauswahlen und ein Knopf, nebeneinander in EINER Zelle. Sie stehen
bewusst in der Zeile und nicht im Detail-Blatt: Der Meister arbeitet einen
STAPEL Belege ab, und ein Blatt dazwischen wären zehnmal Öffnen und Schließen.
Am Handy (ohne diese Datei) stehen dieselben drei Elemente untereinander in
der Karte — dort ist Platz nach unten, aber keiner nach rechts. */
body.ansicht-desktop .kontierung-zelle {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
/* Nicht breiter: Die Kontobezeichnung wird abgeschnitten, die NUMMER bleibt
lesbar — und die sucht der Buchhalter. Der volle Text steht im Aufklappen. */
body.ansicht-desktop .kontierung-zelle .konto-auswahl {
max-width: 190px;
font-size: 0.85rem;
padding: 3px 6px;
}
body.ansicht-desktop .kontierung-zelle .hinweis {
font-size: 0.78rem;
white-space: nowrap;
}
/* Die Spalte darf breiter werden als die Nachbarn — sonst quetscht der Browser
die Auswahlfelder auf die Breite der Überschrift „Kontierung". */
body.ansicht-desktop .tabelle td:has(.kontierung-zelle) { min-width: 400px; }
/* --- 19) Die KI-Assistenz am Schreibtisch -----------------------------------
Dieser Bildschirm ist nach der Desktop-Schicht entstanden und fiel deshalb
durch: Die Antworten sind Prosa, und Prosa auf 1.680 px ist unlesbar — Regel
15 greift nicht, weil sie `p.hinweis` meint und der Verlauf `.berater-text`
heißt.
Dazu die Höhe: 58 vh sind am Handy der ganze Bildschirm, am 27-Zöller ein
Streifen mit 400 px Luft darunter. Wer den Assistenten benutzt, führt ein
Gespräch — dabei will man sehen, was vorher gesagt wurde. */
/* DAS GESPRÄCH IST DER BILDSCHIRM. Vorher war es ein Kasten mit fester Höhe
und darunter noch ein Formular — bei einem 27-Zöller blieb unter der Eingabe
ein Drittel leer, und im Gespräch sah man vier Züge.
Jetzt: Die Ansicht nimmt die verfügbare Höhe, der Verlauf bekommt den Rest,
und die Eingabe klebt unten. Genau die Aufteilung, die jeder Chat hat. */
body.ansicht-desktop #view-berater {
display: flex;
flex-direction: column;
height: calc(100vh - 132px);
}
body.ansicht-desktop #view-berater .berater-verlauf {
flex: 1;
min-height: 0;
max-height: none;
/* Die Züge stehen in einer lesbaren Spalte, mittig — nicht über 1.680 px.
Dieselbe Entscheidung wie bei jedem Chat, und derselbe Grund: Ab etwa 90
Zeichen findet das Auge beim Zeilenwechsel den Anfang nicht mehr. */
padding-right: 8px;
}
body.ansicht-desktop #view-berater .berater-zug,
body.ansicht-desktop #view-berater .assistenz-eingabe {
width: 100%;
max-width: 46rem;
margin-left: auto;
margin-right: auto;
}
body.ansicht-desktop #view-berater .assistenz-eingabe { margin-top: 12px; }
body.ansicht-desktop .berater-text { max-width: 82ch; }
/* Die eigene Frage rückt am Handy um 15 % ein — das sind dort rund 55 px. Am
Schreibtisch wären es 250, und die Frage stünde als schmale Säule rechts.
Ein fester Wert hält den Versatz überall gleich lesbar. */
body.ansicht-desktop .berater-mensch {
margin-left: 64px;
max-width: 82ch;
}
/* Genug Platz für eine ausformulierte Frage, ohne dass man vorher zieht. */
body.ansicht-desktop .berater-eingabe textarea {
max-width: 92ch;
min-height: 84px;
}
/* ==========================================================================
ETAPPE 5 — DIE ANORDNUNG
==========================================================================
RÜCKMELDUNG, WÖRTLICH: „Alles ist noch untereinander, könnte aber vielleicht
besser nebeneinander sein… Es kann halt aber auch alles maximal effizient
dargestellt werden, und das in jeder einzelnen Ansicht."
Die Schichten 1–4 haben Dichte, Kopfzeilen, Tastatur und Zahlen geregelt —
also wie eine LISTE aussieht. Was fehlte, ist die Ebene darüber: wie ein
BILDSCHIRM aufgebaut ist. Jede Ansicht war eine einzige Spalte von oben nach
unten, weil sie am Handy entstanden ist. Am 27-Zöller heißt das: eine schmale
Kolonne, viel Weg mit den Augen, und rechts nichts.
========================================================================== */
/* --- 19) Der Startbildschirm: zwei Spalten ---------------------------------
LINKS was du TUST — Anwesenheit, dein Tag, deine Termine.
RECHTS was du WISSEN musst — Morgenlage, Warnungen, Einrichtung. Eine
Schiene, die man einmal liest und dann stehen lässt.
OBEN die Kacheln über beiden Spalten: ein Band aus Zahlen, das gescannt
und nicht gelesen wird.
Erst ab 1.280 px. Darunter (Tablet quer) sind zwei Spalten enger als eine
Postkarte, und die Morgenlage bräche in Zwei-Wort-Zeilen um. */
@media (min-width: 1280px) {
body.ansicht-desktop #view-heute {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(330px, 0.95fr);
grid-template-areas:
"kopf kopf"
"kacheln kacheln"
"anwesen schiene"
"arbeit schiene";
/* Die letzte Zeile nimmt den Rest, damit die Schiene nicht künstlich in die
Länge gezogen wird. */
grid-template-rows: auto auto auto 1fr;
align-items: start;
row-gap: 4px;
column-gap: 26px;
}
body.ansicht-desktop #view-heute > .heute-kopf { grid-area: kopf; }
body.ansicht-desktop #view-heute > #heute-kacheln { grid-area: kacheln; }
body.ansicht-desktop #view-heute > #heute-anwesenheit { grid-area: anwesen; }
body.ansicht-desktop #view-heute > .heute-arbeit { grid-area: arbeit; }
body.ansicht-desktop #view-heute > .heute-schiene { grid-area: schiene; }
/* Der große Mikrofon-Knopf ist am Schreibtisch AUS. Am Handy ist er die
Hauptbedienung; hier nahm er die halbe Bildschirmhöhe für etwas weg, das
rechts unten als kleiner Knopf danebensteht (Abschnitt 16). */
body.ansicht-desktop #view-heute > #heute-mikro,
body.ansicht-desktop #view-heute > .schnellaktionen { display: none; }
/* Die Schiene bleibt beim Scrollen stehen: Man arbeitet links die Termine ab
und hat rechts weiter im Blick, was heute eine Entscheidung braucht. */
body.ansicht-desktop .heute-schiene {
position: sticky;
top: 14px;
display: flex;
flex-direction: column;
gap: 12px;
max-height: calc(100vh - 28px);
overflow-y: auto;
/* Ein Strich links macht sie zur Schiene statt zu einer zweiten Spalte
gleichen Rangs — sonst liest das Auge zwei gleichwertige Kolonnen und
weiß nicht, wo es anfangen soll. */
padding-left: 20px;
border-left: 1px solid var(--rahmen);
}
body.ansicht-desktop .heute-arbeit {
display: flex;
flex-direction: column;
gap: 4px;
}
}
/* Der Kopf: Anrede und Datum nebeneinander statt in zwei Zeilen. Aus zwei
Zeilen mit Rändern wurden rund 60 px, die am Schreibtisch nichts sagen. */
body.ansicht-desktop .heute-kopf {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
body.ansicht-desktop .heute-kopf h2 { margin: 0; }
body.ansicht-desktop .heute-kopf .hinweis { margin: 0; }
/* --- 20) Der Tagesstreifen -------------------------------------------------
Er war ein waagerechter Schieber mit sieben Kästen à 58 px — am Handy
richtig, weil dort nichts anderes hinpasst. Am Schreibtisch gibt es kein
Wischen: Die sieben Tage teilen sich die Breite und stehen alle gleich da.
Damit ist der Streifen auf einen Blick eine Woche und kein Karussell. */
body.ansicht-desktop .tagesstreifen {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
overflow: visible;
margin: 8px 0 14px;
padding: 0;
}
body.ansicht-desktop .tagesstreifen-tag {
min-width: 0;
min-height: 62px;
transition: border-color .13s ease, background .13s ease;
}
body.ansicht-desktop .tagesstreifen-tag:hover { border-color: var(--rahmen-stark); }
/* Der Rückstand gehört nicht in die Wochenreihe: Er ist kein Tag, sondern eine
Summe. Als achter Kasten daneben verschob er die Woche um einen Platz. */
body.ansicht-desktop .tagesstreifen-rueckstand { grid-column: 1 / -1; }
/* --- 21) Der Kopf JEDER Ansicht -------------------------------------------
Bis hier stand über jeder Liste ein Stapel: Überschrift, darunter der
Aufklapper „… anlegen", darunter eine Filterzeile, darunter erst die Daten.
Drei Zeilen à rund 40 px, bevor der erste Datensatz kommt — auf jedem der
27 Bildschirme.
Am Schreibtisch ist das eine Werkzeugleiste: Überschrift links, Aufklapper
und Filter rechts daneben, alles in EINER Zeile. Der Gewinn sind rund 90 px
sichtbare Liste — zwei bis drei zusätzliche Zeilen, auf jedem Bildschirm.
Ohne eine Zeile HTML: Überschrift und Nachbar werden nebeneinander gesetzt.
Das geht, weil alle Ansichten denselben Aufbau haben — h2, dann der
Aufklapper oder die Filterzeile. Dass das überall gleich ist, war Glück;
ab jetzt ist es eine Verabredung. */
@media (min-width: 1280px) {
/* Die Überschrift verliert ihren oberen Rand und rückt an das heran, was
darunter kommt. */
body.ansicht-desktop .view > h2 {
display: inline-block;
margin: 0 20px 8px 0;
vertical-align: baseline;
}
/* DER EINLEITUNGSSATZ. Auf neun Bildschirmen steht zwischen Überschrift und
Werkzeugleiste ein Absatz von 240 bis 430 Zeichen — bei „Buchhaltung" sind
das vier Zeilen, die jeden Morgen dieselbe Erklärung wiederholen. Er wird
EINMAL gelesen und danach nie wieder, kostet aber jeden Tag denselben Platz.
Weggelassen wird er nicht: Für den, der den Bildschirm zum ersten Mal
öffnet, ist er die Antwort auf „was ist das hier". Aber er wird zur
Nebenschrift — klein, gedämpft, auf lesbarer Breite gedeckelt. Aus vier
Zeilen Fließtext werden zwei Zeilen Beiwerk. */
body.ansicht-desktop .view > h2 + p.hinweis {
max-width: 96ch;
margin: 0 0 12px;
font-size: 0.815rem;
line-height: 1.45;
color: var(--gedaempft);
}
/* Die Werkzeugleiste steht in EINER Zeile — egal ob sie direkt an der
Überschrift hängt oder hinter dem Einleitungssatz. */
body.ansicht-desktop .view > h2 + .anlegen,
body.ansicht-desktop .view > h2 + .filter-zeile,
body.ansicht-desktop .view > h2 + .filterzeile,
body.ansicht-desktop .view > h2 + .tab-zeile {
display: inline-flex;
vertical-align: baseline;
margin-bottom: 8px;
}
/* Aufgeklappt braucht das Formular die Breite wieder — sonst steht ein
zwölffeldriges Formular in einer halben Zeile. */
body.ansicht-desktop .view > h2 + .anlegen[open] {
display: block;
width: 100%;
}
}
/* Filter sind eine Leiste und kein Formular: eine Zeile, gleiche Höhe, kein
Umbruch bei drei Feldern. */
body.ansicht-desktop .filter-zeile,
body.ansicht-desktop .filterzeile {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 0 0 12px;
}
body.ansicht-desktop .filter-zeile input,
body.ansicht-desktop .filter-zeile select,
body.ansicht-desktop .filterzeile input,
body.ansicht-desktop .filterzeile select {
padding: 6px 10px;
font-size: 0.88rem;
}
/* Der Aufklapper war eine breite Farbfläche über die ganze Seite. Als Knopf
neben der Überschrift ist er das, was er ist: eine Handlung. */
body.ansicht-desktop .anlegen > summary {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border-radius: var(--rund-s);
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
}
body.ansicht-desktop .anlegen[open] > summary { margin-bottom: 12px; }
/* --- 22) Reiter als Segmente ----------------------------------------------
Die Reiterzeilen waren Knöpfe nebeneinander, jeder mit eigener Fläche — man
sah fünf Schaltflächen, nicht eine Auswahl mit fünf Stellungen. Ein
Segment-Schalter zeigt beides: dass es EINE Auswahl ist, und welche gilt. */
body.ansicht-desktop .tab-zeile {
display: inline-flex;
gap: 2px;
padding: 3px;
background: var(--sand);
border: 1px solid var(--rahmen);
border-radius: 10px;
}
body.ansicht-desktop .tab-zeile .tab-btn,
body.ansicht-desktop .tab-zeile .bh-tab {
border: none;
background: transparent;
color: var(--gedaempft);
font-size: 0.875rem;
font-weight: 600;
padding: 6px 14px;
border-radius: 7px;
min-height: 0;
}
body.ansicht-desktop .tab-zeile .tab-btn:hover,
body.ansicht-desktop .tab-zeile .bh-tab:hover { color: var(--text); }
body.ansicht-desktop .tab-zeile .tab-btn.aktiv,
body.ansicht-desktop .tab-zeile .bh-tab.aktiv {
background: var(--flaeche);
color: var(--text);
box-shadow: var(--schatten-s);
}
/* --- 23) Der senkrechte Rhythmus ------------------------------------------
Die Abstände stammen vom Handy: 16–24 px zwischen allem, weil dort ein Daumen
trifft und der Bildschirm ohnehin scrollt. Am Schreibtisch kostet jeder
Abstand sichtbare Zeilen — und zu viel Luft liest sich nicht luftig, sondern
unfertig, weil Zusammengehörendes auseinanderfällt. */
@media (min-width: 1280px) {
body.ansicht-desktop #content { padding-top: 18px; }
body.ansicht-desktop .view > h3 { margin: 18px 0 8px; }
body.ansicht-desktop .view > .karte { margin-bottom: 12px; }
body.ansicht-desktop .karte { padding: 14px 16px; }
body.ansicht-desktop .karten { gap: 12px; }
body.ansicht-desktop .kachel-band { margin: 0 0 6px; }
body.ansicht-desktop .kachel-band-kopf { margin-bottom: 8px; }
}
/* --- 24) Mehrere Themen in einer Ansicht ----------------------------------
Drei Bildschirme stapeln voneinander unabhängige Abschnitte: „Tagesberichte"
über „Zeitbuchungen", und bei den Anmeldungen sogar drei Themen mit je einer
eigenen Hauptüberschrift — Anmeldungen, Anlagen-Datenblätter, Netzbetreiber.
Am Handy ist das die einzig mögliche Anordnung. Am Schreibtisch heißt es:
scrollen, um zu vergleichen, und dabei die erste Liste aus dem Blick
verlieren.
`section.block` fasst Überschrift und Liste zusammen. Ohne diese Hülle würde
ein Raster die Überschrift in die eine und die Liste in die andere Spalte
legen — sie sind im HTML zwei Geschwister, keine Einheit.
Erst ab 1.600 px: Darunter ist eine Tabelle mit acht Spalten in einer halben
Bildschirmbreite nicht mehr lesbar, und dann ist untereinander besser. */
@media (min-width: 1600px) {
body.ansicht-desktop .view.spalten-zwei {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
gap: 8px 30px;
align-items: start;
}
/* Überschrift, Einleitungssatz und Werkzeugleiste der Ansicht gehören über
BEIDE Spalten — sie gelten für den ganzen Bildschirm. */
body.ansicht-desktop .view.spalten-zwei > :is(h2, p.hinweis, .filter-zeile,
.filterzeile, .tab-zeile, .anlegen) {
grid-column: 1 / -1;
}
body.ansicht-desktop .view.spalten-zwei > .block { min-width: 0; }
/* Innerhalb eines Blocks steht die Überschrift wieder oben und nicht neben
der Liste — Abschnitt 21 gilt nur für die Ansicht selbst. */
body.ansicht-desktop .block > h2 { display: block; margin: 0 0 8px; }
}
/* Ein Block trägt seine Überschrift dicht über der Liste. */
body.ansicht-desktop .block > :is(h2, h3) { margin: 0 0 8px; }
body.ansicht-desktop .block + .block { margin-top: 22px; }
/* --- 25) Der zweite Titel in derselben Ansicht ----------------------------
Abschnitt 21 nimmt der Überschrift den oberen Rand, damit sie in einer Zeile
mit der Werkzeugleiste steht. Bei Bildschirmen mit MEHREREN Hauptüberschriften
klebte die zweite dadurch an der Liste darüber — sie sah aus wie deren
Fußzeile statt wie der Anfang von etwas Neuem. */
body.ansicht-desktop .view > h2 ~ h2 { margin-top: 26px; }