/* seitenblick – Farben, Masse, Grundgeruest, Kopfzeile, Marke und Fusszeile
*
* Teil der Gestaltung; eingebunden in base.html in fester Reihenfolge
* (grund, bedienung). Die Reihenfolge ist Teil der Aussage: Spaeteres
* ueberschreibt Frueheres.
*
* Diese Datei ist seitenblicks Fassung von design-system/dist/marke.css und dem
* Grundgeruest aus basis.css - wertgleich, in eigener Datei, wie bei tagwerk
* und wie mapfit im eigenen Repo. Palette, Masse und Grundformen sind bewusst
* identisch: dunkle Tinte in Kopf und Fuss, eine helle, dichte Arbeitsflaeche
* dazwischen, Gruen als einziger Akzent.
*
* Hell und dunkel aus einer Hand (12.08.2026): Jede Flaechen- und Textfarbe
* traegt ihre beiden Fassungen als light-dark()-Paar, die dunklen Werte sind
* die der Systempalette. Drei Staende wie dort: `System` (Vorgabe) folgt dem
* Betriebssystem, `Hell` und `Dunkel` ueberstimmen es - gewaehlt am Knopf im
* Kopf (thema in main.js), gemerkt im localStorage, als data-thema am .
* Dieselbe Mechanik wie bei tagwerk und nicht die Token-Umdefinition aus
* marke.css: Zwei Werkzeuge gegen eines, und light-dark() spart die doppelte
* Zuweisung (siehe design-system/README.md).
*
* Kopf und Fusszeile gehen NICHT mit - sie tragen in beiden Welten die dunkle
* Tinte der Marke. Das Druckblatt auch nicht: Gedruckt wird auf weisses
* Papier. */
:root {
color-scheme: light dark;
/* --- Arbeitsflaechen ---------------------------------------------------
Die vier Werte des Systems, aus denen sich Karten, Knoepfe, Felder und
Rueckfragen zusammensetzen:
--flaeche Karten, Knoepfe, Felder - worauf gelesen wird
--flaeche-tief der Grund dahinter, eine Stufe zurueckgenommen
--flaeche-hover dieselbe Flaeche unter dem Zeiger
--text die Schrift darauf */
--flaeche: light-dark(#ffffff, #1b201d);
--flaeche-tief: light-dark(#f6f8fa, #121614);
--flaeche-hover: light-dark(#eef1f4, #262d29);
--text: light-dark(#1f2328, #e6ebe4);
--border: light-dark(#d0d7de, #333c37);
--muted: light-dark(#57606a, #9aa79c);
/* Die getoenten Hauchflaechen je Bedeutungsfarbe - der Grund der
Statusabzeichen und der Meldungen. Sie standen hier lange als
GitHub-Pastelltoene (#dafbe1, #ddf4ff, #ffebe9, #fff8c5) fest im Blatt;
das waren fuenf Farbwerte ausserhalb der Palette, und im dunklen Thema
waeren sie leuchtende Flecken geblieben. Uebernommen aus tagwerk, wo sie
dieselbe Aufgabe haben. */
--grau-hauch: light-dark(#eef1f4, #262d29);
--gruen-hauch: light-dark(#e8f1e9, #1e2f22);
--rot-hauch: light-dark(#fdf0ef, #3a1d1c);
--gelb-hauch: light-dark(#fdf6e3, #3a3010);
--blau-hauch: light-dark(#eaf2fd, #182c44);
/* Farben der Marke. Der Arbeitsbereich bleibt hell und dicht - dort wird
gearbeitet. Kopf und Fuss tragen die dunkle Tinte der Marke und halten die
Anwendung damit sichtbar in der Familie. */
--tinte: #0e1710;
--tinte-hoch: #1a2a1f;
--tinte-tief: #0a110c; /* Fusszeile - wie auf mischfeld.de */
--tinte-linie: #24382c;
--tinte-text: #e8eee2;
--tinte-leise: #a4b49e;
--gruen: #4fc662; /* Akzent auf dunklem Grund */
--gruen-hell: #6fd97f;
/* Die "-tief"-Toene sind die Akzente der Arbeitsflaeche. Im Dunkeln muessen
sie heller werden, nicht dunkler - tiefes Rot auf dunklem Grund ist
unsichtbar, und genau das war der Grund fuer die zwei Fassungen. */
--gruen-tief: light-dark(#2f7a3e, #3f9e52);
--gruen-tiefer: light-dark(#286a36, #4bb060);
--rot: #ff7b72; /* Warnung auf dunklem Grund */
--rot-tief: light-dark(#cf222e, #ff8a80);
/* Gelb heisst „wartet" - ein Zustand, kein naechster Schritt. */
--gelb-tief: light-dark(#bf8700, #f5b73a);
/* Das Blau der Bedienelemente: Fokus, Griffe, angefasste Kanten - und das
Abzeichen „geaendert", denn eine Aenderung ist kein Fehler und kein Gruen.
Verweise in Texten tragen dagegen das Gruen der Familie (siehe
bedienung.css): Blau heisst „anfassbar", nicht „lies mich". */
--blau: light-dark(#0969da, #58a6ff);
--blau-kante: light-dark(#8c959f, #6f7d73);
/* --- Schriften ----------------------------------------------------------
Der Arbeitsbereich bleibt Systemschrift - dort wird bedient. Die Serifen
der Marke, wie auf mischfeld.de, tragen nur das Markenwort. */
--schrift-bedienung: "Segoe UI", Arial, sans-serif;
--schrift-anzeige: "Iowan Old Style", "Palatino Linotype", Palatino,
"Book Antiqua", Georgia, serif;
--schrift-fest: Consolas, "SF Mono", Menlo, monospace;
/* --- Groessen -----------------------------------------------------------
Vier Stufen, mehr braucht die Bedienung nicht. Seitenblick stand vorher
durchgaengig auf 14px - eine eigene Stufe, die es im System nicht gibt,
und die Tabelle sah dadurch neben derselben Tabelle in mapfit gross aus. */
--gr-bedienung: 13px; /* Beschriftungen, Knoepfe, Eingaben */
--gr-neben: 12px; /* Hinweise, Tabellen, Nebenangaben */
--gr-klein: 11px; /* Zustandszeilen */
--gr-winzig: 10px;
/* --- Rundungen ----------------------------------------------------------
Je groesser die Flaeche, desto groesser der Radius. */
--rund-klein: 4px;
--rund: 6px; /* Knoepfe, Eingaben, Menueeintraege */
--rund-gross: 8px; /* aufklappende Menues */
--rund-karte: 12px; /* Karten und Rueckfragen */
--rund-pille: 999px; /* Abzeichen */
/* --- Takt ---------------------------------------------------------------
Der Abstand ist die Aussage: 10px trennt Zeilen einer Karte, 12px trennt
Karten, 14px ist die Polsterung einer Karte. */
--luft-eng: 6px;
--luft: 10px;
--luft-weit: 12px;
--polster: 14px;
/* --- Schatten -----------------------------------------------------------
Drei Hoehen. Was hoeher liegt, wirft weiter. */
--schatten-klein: 0 1px 4px rgba(0, 0, 0, .2);
--schatten: 0 4px 14px rgba(0, 0, 0, .18);
--schatten-hoch: 0 12px 40px rgba(0, 0, 0, .22);
/* Der gedaempfte Grund hinter einer Rueckfrage: Er daempft die Anwendung,
statt sie zu verdecken - worueber gefragt wird, soll sichtbar bleiben. */
--schleier: rgba(14, 23, 16, .38);
/* Die Uebersicht ist eine Tabelle mit acht Spalten und braucht Platz; ohne
Obergrenze zerreisst sie auf einem breiten Schirm aber in zwei weit
auseinanderliegende Haelften - Name links, Knoepfe am anderen Rand. */
--inhaltsbreite: 1400px;
}
/* Die ausdrueckliche Wahl - sie gilt auch auf einem hell eingestellten System.
Mehr als der color-scheme ist nicht noetig: Damit waehlt jedes
light-dark()-Paar seine Haelfte. */
:root[data-thema="hell"] { color-scheme: light; }
:root[data-thema="dunkel"] { color-scheme: dark; }
* { box-sizing: border-box; }
/* Verstecktes bleibt versteckt: Ohne diese Zeile gewinnt jede eigene
display-Regel gegen das display:none des Browsers fuer [hidden] - beide sind
gleich spezifisch, und die eigene steht spaeter. */
[hidden] { display: none !important; }
/* Kopf oben, Fuss unten, Inhalt dazwischen - und gescrollt wird allein in der
Mitte. Kopf und Fuss stehen damit immer da, wo man sie sucht: die Wege und
das Abmelden oben, Version und Update-Pruefung unten. Bei einer Uebersicht
mit zwanzig Seiten waere die Fusszeile sonst nur nach einer vollen Fahrt
ans Ende zu sehen.
Voraussetzung dafuer ist die feste Hoehe: Ohne `height: 100%` an html UND
body waechst body mit seinem Inhalt, und das overflow der Mitte greift
nie. */
html, body { height: 100%; }
body {
margin: 0; overflow: hidden; display: flex; flex-direction: column;
font-family: var(--schrift-bedienung);
background: var(--flaeche-tief); color: var(--text);
}
/* Sichtbarer Fokusring - jede Oberflaeche laesst sich vollstaendig mit der
Tastatur durchlaufen. Blau im Arbeitsbereich (dort heisst Blau
„anfassbar"), Gruen auf der Tinte von Kopf und Fuss. */
:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
header :focus-visible, footer :focus-visible { outline-color: var(--gruen); }
/* --- Kopf ----------------------------------------------------------------- */
/* Dasselbe Skelett wie der Kopf von tagwerk: links die Marke, rechts die
Werkzeuge mit dem ☰ und der Gruppe #kopf-werkzeuge dahinter. Nur das
Mittelfeld fehlt - gesucht wird hier nicht, und ein leeres Rasterfeld der
Familienaehnlichkeit wegen waere eine Luege ueber den Aufbau der Seite.
Deshalb Flex statt des Rasters, mit demselben Ergebnis: Marke links,
Werkzeuge rechts, eine Zeile.
Kein Umbruch: Frueher rutschten die Wege bei mittlerer Breite als ganze
Reihe unter die Marke, und der Kopf war doppelt so hoch wie noetig - auf
einer Seite, deren Inhalt eine breite Tabelle ist. Was nicht passt, faehrt
unter 600 px hinter das ☰ (siehe unten). */
header {
background: var(--tinte); color: var(--tinte-text); padding: 10px 20px; flex: none;
border-bottom: 1px solid var(--tinte-linie);
display: flex; align-items: center; justify-content: space-between; gap: 20px;
/* Bezug fuer das Menue, das auf schmalen Schirmen unter dem Kopf haengt
(siehe #kopf-werkzeuge unten) - wie bei tagwerk am Kopf selbst. */
position: relative;
}
header .kopf-links { display: flex; align-items: center; gap: 10px 16px; min-width: 0; }
header nav { display: flex; align-items: center; gap: 14px; }
header a { color: var(--tinte-leise); text-decoration: none; }
header a:hover { color: var(--tinte-text); }
/* Wo man gerade steht, steht hell - ohne diese Auszeichnung sehen "Uebersicht"
und "Einstellungen" gleich aus, und nach dem Speichern weiss man nicht mehr,
auf welcher der beiden Seiten man gelandet ist. */
header nav a.aktiv { color: var(--tinte-text); }
/* Bildmarke inline und nicht als ![]()
: Die acht ruhigen Quadrate nehmen ueber
currentColor die Textfarbe des Kopfes an, Farbe traegt allein der Kern. Bei
seitenblick sind das zwei Zeilen ungleicher Laenge - dieselbe Stelle, aber nicht
mehr derselbe Inhalt, und genau danach sucht die Anwendung. */
header .brand {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--schrift-anzeige);
font-weight: 600; font-size: 18px; letter-spacing: 0.01em;
color: var(--tinte-text); text-decoration: none;
}
/* 26px und nicht kleiner: Darunter verschmilzt das Raster, und die beiden
Zeilen darueber sind nicht mehr als zwei zu erkennen. */
header .marke-zeichen { width: 26px; height: 26px; flex: none; }
header .marke-zeilen { fill: var(--gruen); }
header .brand:hover .marke-zeilen { fill: var(--gruen-hell); }
/* „Seiten|blick" wie „Misch|feld": Der zweite Teil traegt das Gruen. */
header .brand .akzent { color: var(--gruen); }
header .brand:hover { color: var(--tinte-text); }
/* Wer angemeldet ist, leise neben dem Abmelden: eine Auskunft, keine
Ueberschrift. "lokal" oder "portal-" - jede Kennung sieht ihren eigenen
Ordner, und dann muss dastehen, wessen Seiten das gerade sind. */
header .kennung { color: var(--tinte-leise); font-size: var(--gr-bedienung); margin-right: 10px; }
/* Knoepfe im Kopf tragen die Tinte, nicht das Weiss der Arbeitsflaeche. */
header .btn { background: var(--tinte-hoch); border-color: var(--tinte-linie); color: var(--tinte-text); }
header .btn:hover:not(:disabled) { background: #24382c; }
/* Ein Griff, der AUFKLAPPT, ist ein Schalter - und ein Schalter, der seinen
Zustand nicht zeigt, ist keiner: Man drueckt ihn ein zweites Mal, um zu
sehen, was er tut. Ueber aria-expanded und nicht ueber eine eigene Klasse:
Das Attribut steht ohnehin am Knopf (die Vorlesehilfe braucht es), und was
die Ansage sagt, soll auch zu sehen sein. Wie bei tagwerk. */
header .btn[aria-expanded="true"] {
background: #2d4a36; border-color: var(--gruen); color: #fff;
}
/* --- Arbeitsflaeche ------------------------------------------------------- */
/* Der einzige Bereich mit Bildlaufleiste. min-height: 0, weil ein Flex-Kind
sonst nicht unter die Hoehe seines Inhalts schrumpft - es waere zwar
overflow: auto gesetzt, aber nie etwas zu scrollen: Die Mitte wuerde
stattdessen Kopf und Fuss aus dem Bild schieben.
Die Polsterung sitzt hier und nicht an den Karten, damit die Leiste am
Fensterrand laeuft und nicht mitten im Inhalt. Unten mehr als oben: Die
letzte Karte soll nicht auf der Fusszeile kleben. */
main { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 24px 40px; }
/* Die Breite haelt der Inhalt, nicht die Bildlaufleiste: Auf einem breiten
Schirm zerrisse die Uebersicht sonst in zwei weit auseinanderliegende
Haelften - Name links, Knoepfe am anderen Rand. */
main > * { max-width: var(--inhaltsbreite); margin-left: auto; margin-right: auto; }
/* Haekchen und Regler im Markengruen - wie die Spalte bei mapfit und tagwerk.
Am Behaelter und nicht an jedem Kaestchen: accent-color vererbt sich. */
main { accent-color: var(--gruen-tief); }
/* --- Fuss ----------------------------------------------------------------- */
/* Masse wie bei mapfit und tagwerk - dieselbe Zeile am unteren Rand derselben
Familie: 11px/24px Polsterung, mittig, 12px Schrift auf der tiefen Tinte. */
footer {
flex: none; padding: 11px 24px; border-top: 1px solid var(--tinte-linie);
text-align: center; color: var(--tinte-leise); font-size: var(--gr-neben);
background: var(--tinte-tief);
}
footer .fuss-marke {
font-family: var(--schrift-anzeige); font-size: 14px; font-weight: 600;
color: var(--tinte-text);
}
footer .akzent { color: var(--gruen); }
footer a { color: var(--tinte-leise); }
footer a:hover { color: var(--tinte-text); }
/* Bewusst kein Flex und kein Abstand: „feld" ist ein Teil desselben Wortes. */
footer .von-mischfeld { color: var(--tinte-text); text-decoration: none; font-weight: 600; }
footer .von-mischfeld span { color: var(--gruen); }
/* Beim Ueberfahren hellt das ganze Wort auf, behaelt aber seine Zweiteilung:
„Misch" wird weiss, nur „feld" traegt weiter das Gruen. */
footer .von-mischfeld:hover { color: #fff; }
footer .von-mischfeld:hover span { color: var(--gruen-hell); }
/* Knoepfe in der Fusszeile tragen das Gewand der Verweise - flach und ohne
Rahmen, damit die Zeile ruhig bleibt. Klassenname aus basis.css. */
footer .fuss-knopf {
background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
color: var(--tinte-leise); text-decoration: underline;
}
footer .fuss-knopf:hover:not(:disabled) { color: var(--tinte-text); }
/* Der Unterstrich bleibt, die Sperre traegt der Zeiger und die gedaempfte
Farbe. Ein Verweis, der beim Sperren zu Fliesstext wird, sieht nicht gesperrt
aus, sondern nach etwas anderem. */
footer .fuss-knopf:disabled { cursor: default; opacity: 0.55; }
footer #update-ergebnis a { color: var(--gruen); }
footer #update-ergebnis a:hover { color: var(--gruen-hell); }
/* Rechts die Werkzeuge. Am breiten Schirm steht die Gruppe offen in der
Kopfzeile; unter 600px faehrt sie hinter das ☰ (siehe unten). Masse und
Machart wie header-group bei tagwerk: 26px sind das Mass im Kopf - ohne
die feste Hoehe stuende der Abmelden-Knopf hoeher als das Druckzeichen
daneben, und die Reihe saesse sichtbar versetzt. */
header .kopf-rechts {
display: flex; align-items: center; gap: 10px 14px; min-width: 0;
justify-content: flex-end;
}
header .header-group { display: flex; align-items: center; gap: 10px 14px; flex-wrap: nowrap; }
header .header-group .btn:not(.btn-icon) { height: 26px; padding: 0 10px; line-height: 24px; }
/* Die Kennung darf schrumpfen, die Knoepfe nicht: Zwischen 600 und 700 Pixeln
ist sie das einzige Element ohne festen Platzanspruch. */
header .header-group .kennung {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Am breiten Schirm gibt es das Burgerzeichen nicht: Zwei Wege, die dastehen,
sind zwei Wege - ein Menue davor waere ein Klick fuer nichts. */
#btn-mehr { display: none; }
/* Das Wort neben einem Sinnbild steht nur im aufgeklappten Menue; in der
Kopfzeile genuegt das Zeichen. Wie bei tagwerk. */
.knopf-wort { display: none; }
/* 26x26 im Kopf - so steht es in der Telefon-Schicht, und so haelt es tagwerk.
Quadratisch, damit das Zeichen in der Mitte sitzt: Ohne feste Hoehe ergibt
sie sich aus dem Zeilenabstand der Schrift, waehrend die Breite fest ist -
der Knopf wird ein liegendes Rechteck und steht neben seinen Nachbarn zu
niedrig. */
header .btn-icon { width: 26px; height: 26px; }
/* ------------------------------------------------------------- Smartphone */
@media (max-width: 1100px) {
header { padding: 10px 14px; gap: 10px 16px; }
main { padding: 16px 12px 28px; }
}
/* Der Kopf auf einem schmalen Telefon: Marke, zwei Wege, Erscheinungsbild,
Drucken, die Kennung und das Abmelden passen zusammen in keine Zeile von
360 Pixeln. Die ganze Gruppe faehrt hinter das ☰ - dieselbe Mechanik,
dieselben Masse und dieselben Zeilen wie das Kopfmenue von tagwerk. */
@media (max-width: 600px) {
header { padding: 8px 10px; gap: 8px; }
header .kopf-links { gap: 6px; }
header .kopf-rechts { gap: 6px; }
/* Das Wort neben dem Zeichen gibt nach - die Marke steht im Zeichen, und
man weiss, welche Anwendung man geoeffnet hat. Wie bei tagwerk. */
header .brand > span { display: none; }
#btn-mehr { display: inline-flex; flex: none; }
/* Das Menue haengt unter dem Kopf und nicht im Fluss der Zeile - sonst
schoebe es beim Aufklappen die Tabelle nach unten. Bezug ist der Kopf
selbst (position: relative, siehe oben). */
#kopf-werkzeuge {
display: none; position: absolute; top: calc(100% + 4px); right: 8px;
z-index: 25; flex-direction: column; align-items: stretch; gap: 4px;
min-width: 190px; padding: 6px;
border: 1px solid var(--tinte-linie); border-radius: var(--rund-gross);
background: var(--tinte-hoch); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
header.menue-auf #kopf-werkzeuge { display: flex; }
/* Im Menue ist jeder Weg eine Zeile: gleich breit, links buendig, hoch genug
fuer einen Finger - und ein Sinnbild bekommt sein Wort dazu. Ein Zeichen
allein in einer Zeile voller Woerter liest niemand. */
#kopf-werkzeuge nav { flex-direction: column; align-items: stretch; gap: 0; }
#kopf-werkzeuge nav a { padding: 9px 12px; }
#kopf-werkzeuge .btn,
header #kopf-werkzeuge .btn:not(.btn-icon) {
width: auto; height: auto; justify-content: flex-start;
padding: 9px 12px; line-height: 1.2;
}
#kopf-werkzeuge .knopf-wort { display: inline; margin-left: 8px; }
/* Das Abmelden als letzte Zeile, durch eine Linie abgesetzt, die Kennung
davor: "wessen Seiten sehe ich" ist die Frage, die man stellt, bevor man
auf den Knopf sieht. Dieselbe Machart wie bei tagwerk. */
#kopf-werkzeuge .kennung {
display: block; margin: 4px 0 0; padding: 8px 12px 0; overflow: visible;
border-top: 1px solid var(--tinte-linie);
}
#kopf-werkzeuge form.inline { display: flex; align-items: stretch; }
#kopf-werkzeuge form.inline .btn { flex: 1; text-align: left; }
/* Die Fusszeile faellt weg. Sie traegt Marke, Fassung, die Update-Pruefung
und die Rechtstexte - lauter Auskuenfte, die man einmal sucht und nicht bei
jedem Blick liest. Auf einem Telefon kostete sie dafuer eine ganze Zeile
Bildschirmhoehe, und darunter steht die Tabelle, wegen der man da ist.
Dieselbe Entscheidung wie bei tagwerk. Nicht ueber die Zeigerart gebunden,
sondern ueber die Breite: Es geht um Hoehe, die fehlt, nicht um Finger, die
zielen. */
footer { display: none; }
}
/* Am Finger gilt die Telefon-Schicht - gebunden an die Zeigerart und nicht an
die Breite: Ein Tablet in Querlage ist breit und hat trotzdem keinen Zeiger.
Reine SINNBILD-Knoepfe behalten dabei ihre Groesse (geaendert am
12.08.2026, telefon.md). Hier standen 36x36; das ist gegangen, und zwar aus
demselben Grund wie bei tagwerk: Derselbe Knopf sah auf zwei Geraeten
verschieden aus, und die Rechnung ging ohnehin nicht auf - 36 px sind noch
immer kleiner als die 44, die als Fingermass gelten. BESCHRIFTETE Knoepfe
wachsen weiter: Dort geht es um die Lesbarkeit der Schrift und darum, dass
die Reihe nicht versetzt sitzt. */
@media (hover: none) {
header .header-group .btn:not(.btn-icon) { height: 36px; padding: 0 12px; line-height: 34px; }
header nav a { padding: 8px 6px; }
}
/* ----------------------------------------------------------------- Blatt
Gedruckt wird genau die Ansicht, die am Schirm steht: die Uebersicht als
Bestandsliste ("welche Seiten ueberwachen wir, in welchem Takt, seit wann
unveraendert") oder ein Aenderungsverlauf. Beides sind Auskuenfte, die man in
eine Besprechung mitnimmt oder ablegt.
Alles, was man auf Papier nicht bedienen kann, faellt weg: Kopf, Fuss,
Handlungsspalten, Sortiergriffe, Hinzufuegen-Knoepfe. Dieselbe Machart wie
drucken.css bei tagwerk. Ein dunkles Thema gilt im Druck nie - deshalb
stehen hier feste Werte und keine Token. */
@media print {
/* Oben und unten kein Seitenrand, links und rechts 12mm. Das ist kein
Gestaltungseinfall, sondern der einzige Weg, die Kopf- und Fusszeile des
BROWSERS loszuwerden - Adresse, Datum, Seitenzahl. Es gibt keine
CSS-Eigenschaft dafuer; die Browser zeichnen sie in den oberen und unteren
Seitenrand, und ist der 0, ist dort kein Platz. Der Rand, den das Blatt
trotzdem braucht, steht als Polsterung am Inhalt. */
@page { margin: 0 12mm; }
header, footer, .toolbar .btn, .actions, .btn-move, .flash { display: none !important; }
/* Weisses Papier und schwarze Schrift, was auch immer am Schirm eingestellt
ist: Ein dunkles Thema waere im Druck kein Thema, sondern ein Fehler. */
:root { color-scheme: light; }
body { background: #fff; color: #1f2328; }
main { padding: 12mm 0; max-width: none; }
/* Die Karte ist am Schirm eine Flaeche, die den Inhalt zusammenhaelt. Auf dem
Blatt hielte sie ihn nur ein - der Rahmen faellt weg, die Tabelle bleibt. */
.card { border: 0; box-shadow: none; padding: 0; background: none; }
h1 { font-size: 15pt; }
/* Eine Zeile soll nicht ueber den Seitenumbruch reissen, und der Tabellenkopf
wiederholt sich auf jeder Seite - eine Spalte ohne Ueberschrift ist auf
Seite zwei nicht mehr zu lesen. */
thead { display: table-header-group; }
tr { break-inside: avoid; }
table { font-size: 9pt; width: 100%; }
/* Woher das Blatt kommt und von wann - ein Ausdruck ohne Datum ist eine Woche
spaeter nicht mehr einzuordnen. Der Wert steht am und wird vom
Server gesetzt (siehe base.html). */
main::after {
content: "Seitenblick · " attr(data-gedruckt);
display: block; margin-top: 8mm; font-size: 8pt; color: #57606a;
}
}