/* ══════════════════════════════════════════════════════════════════════════
KONSOLE — die Form.
Drei Dateien, drei Zuständigkeiten, und das ist Absicht:
modern.css wie ein Bauteil aufgebaut ist (Karte, Reihe, Telefon)
marke.css welche Farbe und welche Schrift es trägt
konsole.css welche FORM die Anwendung als Ganzes hat
Diese Datei stellt die Anwendung von einer Kachelwand auf eine Konsole um:
dunkle Navigationsspalte, weiße randlose Arbeitsfläche, Kennzahlen als Band
statt als Karten, Listen als eigentlicher Inhalt. Vorbild ist die Machart
von Zahlungsdashboards — dort ist die Liste der Bildschirm, nicht das
Raster.
Rückweg: diese Zeile aus der index.html nehmen. Dann steht die vorige
Optik wieder, unverändert.
── Was sich dadurch ändert, und warum ─────────────────────────────────
KEINE SCHATTEN, KEINE RADIEN. Eine Karte, die schwebt, sagt „ich bin ein
eigenes Ding". Bei zwölf Blöcken auf einem Bildschirm sagen zwölf Dinge
dasselbe, und keins sticht heraus. Haarlinien trennen genauso gut und
kosten keine Aufmerksamkeit.
DIE NAVIGATION IST DER EINZIGE DUNKLE BLOCK. Dadurch wirkt die
Arbeitsfläche heller, ohne heller zu sein — ein alter Satzspiegel-Trick.
ZWEI SCHRIFTEN MIT KLARER AUFGABE. Archivo trägt Text und Überschriften,
IBM Plex Mono jede Zahl, jede Kennung, jede Uhrzeit. Das ist kein
Stilmittel: Dicktengleiche Ziffern stehen in einer Spalte untereinander,
proportionale nicht. Wer je eine Betragsspalte gelesen hat, kennt den
Unterschied.
══════════════════════════════════════════════════════════════════════════ */
@font-face {
font-family: "Archivo";
src: url("../schriften/archivo.woff2") format("woff2");
font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Plex Mono";
src: url("../schriften/plexmono-400.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Plex Mono";
src: url("../schriften/plexmono-500.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Plex Mono";
src: url("../schriften/plexmono-600.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
}
:root {
--schrift: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--schrift-zahl: var(--schrift);
--mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* Midnight Blue — die zweite Hausfarbe des Vorbilds, und der Grund, warum
dieser Entwurf ohne Grün auskommt. */
--k-nacht: #00112c;
--k-nacht-2: #0a1f3f;
--k-nacht-3: #16305a;
--k-linie: #e4e7ec;
--k-linie-stark: #cbd2dc;
--k-zeile: 38px;
}
/* ── Grundfläche ──────────────────────────────────────────────────────────
Weiß, randlos, ohne Licht. Der Verlauf aus `marke.css` gehört zur alten
Form; hier wäre er eine zweite Aussage neben der dunklen Leiste. */
body {
font-family: var(--schrift);
background: var(--k-flaeche) !important;
background-image: none !important;
color: var(--n-text);
}
:root { --k-flaeche: #ffffff; }
/* ── Die Ableitungen — dreimal, und das ist Pflicht ──────────────────────
Diese zehn Merkmale übersetzen die Konsolen-Werte in die Sprache, die
`app.css` und `modern.css` sprechen. Sie standen auf schlichtem `:root`
— Spezifität (0,1,0) — und `marke.css` setzt dieselben Namen unter
`:root:not([data-theme="hell"])` und `:root[data-theme="dunkel"]`, also
(0,2,0). Damit gewann `marke.css` jedes Mal, sobald das Gerät auf dunkel
stand oder jemand das dunkle Thema wählte.
Die Folge war im Bild zu sehen und ohne Bild nicht zu finden: Karten
blieben weiß (die setzt diese Datei direkt), aber alles, was über
`--n-flaeche`, `--card2` oder `--hover` lief, wurde dunkel. Ein Balken
hinter einer Zahlart war schwarz statt hellgrau, und beim Überfahren
einer Zeile legte sich eine dunkle Fläche darunter — der „Rahmen", der
keiner war.
Genau davor warnt CLAUDE.md, und es ist im August 2026 schon einmal
passiert. Also stehen sie jetzt unter allen drei Selektoren, wie überall
sonst auch. */
:root,
:root[data-theme="dunkel"] {
--n-grund: var(--k-flaeche);
--n-flaeche: var(--k-flaeche);
--n-strich: var(--k-linie);
--n-strich-stark: var(--k-linie-stark);
--card2: var(--k-card2);
--hover: var(--k-hover);
--s1: none; --s2: none; --s3: none;
--kartenkante: none;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="hell"]) {
--n-grund: var(--k-flaeche);
--n-flaeche: var(--k-flaeche);
--n-strich: var(--k-linie);
--n-strich-stark: var(--k-linie-stark);
--card2: var(--k-card2);
--hover: var(--k-hover);
--s1: none; --s2: none; --s3: none;
--kartenkante: none;
}
}
/* Die Ausgangswerte dafür — sie tragen eigene Namen (`--k-…`), damit die
Zuweisung oben in jedem Thema dieselbe bleibt und nur die Quelle wechselt. */
:root { --k-card2: #f1f3f6; --k-hover: #f8fafc; }
/* ── Das dunkle Thema der Konsole ────────────────────────────────────────
Beim ersten Bild stand die Anwendung im dunklen Thema mit WEISSEN Flächen
und hellem Text da — unlesbar. Der Grund: Diese Datei hatte Weiß fest
verdrahtet, weil die helle Fassung zuerst entstand.
Jetzt trägt jede Fläche ein Merkmal, und hier stehen die Werte dafür. Die
Navigationsspalte ist dabei DUNKLER als die Arbeitsfläche — dieselbe
Ordnung wie im Hellen, nur umgekehrt herum gedacht: Sie tritt zurück,
damit die Zahlen vorn stehen. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="hell"]) {
--k-flaeche: #12161d;
--k-nacht: #080b11;
--k-nacht-2: #161c26;
--k-nacht-3: #202836;
--k-linie: rgba(255,255,255,.085);
--k-linie-stark: rgba(255,255,255,.17);
--k-card2: #1a2029;
--k-hover: #171d26;
}
}
:root[data-theme="dunkel"] {
--k-flaeche: #12161d;
--k-nacht: #080b11;
--k-nacht-2: #161c26;
--k-nacht-3: #202836;
--k-linie: rgba(255,255,255,.085);
--k-linie-stark: rgba(255,255,255,.17);
--k-card2: #1a2029;
--k-hover: #171d26;
}
#app { background: var(--k-flaeche) !important; }
@media (min-width: 901px) {
main {
background: var(--k-flaeche) !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
/*
* Der Rand sitzt am Inhalt, nicht an den Bauteilen — und die wenigen
* Bauteile, die von Kante zu Kante laufen sollen, ziehen sich mit
* negativem Rand wieder heraus.
*
* Andersherum ging es schief: Ohne Rand am Inhalt klebte jede Ansicht,
* die nicht umgebaut ist, am linken Rand, und die Tischkacheln liefen
* rechts aus dem Bild. Der Umbau betrifft die Übersicht; er darf nicht
* jede andere Ansicht mitreißen.
*/
.topbar { padding: 20px 26px 16px !important; margin: 0 !important;
border-bottom: 1px solid var(--k-linie) !important; }
#content { padding: 0 26px 26px !important; }
.awband, .awzeile, .awverlauf, .awsreiter, .prreiter, .streiter {
margin-left: -26px !important; margin-right: -26px !important;
}
.zrbar { padding: 12px 26px !important; margin: 0 !important;
border-bottom: 1px solid var(--k-linie) !important; }
}
/* ── Die Navigationsspalte ───────────────────────────────────────────────── */
@media (min-width: 901px) {
#app { grid-template-columns: 216px 1fr !important; }
aside {
background: var(--k-nacht) !important;
border-right: 0 !important;
padding: 18px 0 !important;
gap: 20px !important;
}
aside .brand { color: #fff; padding: 0 18px; font-size: 15px; font-weight: 600; }
aside .brand .mark {
width: 20px; height: 20px; border-radius: 4px;
background: linear-gradient(140deg, #4d8fc7, #7fb3dd);
box-shadow: none;
}
#mainNav { padding: 0 !important; }
.navgroup {
padding: 12px 18px 5px !important; font-size: 10px !important;
letter-spacing: .14em; text-transform: uppercase;
/* Gemessen: rgba(255,255,255,.34) ergibt auf #00112c nur 3,04 : 1.
#8892a4 kommt auf 6,3 : 1 und wirkt trotzdem zurückhaltend — auf
dunklem Grund braucht „leise" weniger Abstand als auf hellem. */
color: #8892a4 !important;
}
.navzeile { margin: 0 !important; }
.navlink {
padding: 8px 18px !important; border-radius: 0 !important;
font-size: 13px !important; color: #b9c1cd !important;
border-left: 3px solid transparent !important; width: 100%;
justify-content: flex-start !important;
}
.navlink:hover { background: var(--k-nacht-2) !important; color: #fff !important; }
.navlink.active {
background: var(--k-nacht-2) !important; color: #fff !important;
border-left-color: #4d8fc7 !important; font-weight: 600 !important;
}
.navlink .ic, .navlink.active .ic { color: inherit !important; opacity: .85; }
.navmehr, .navordnen {
color: #9aa3b1 !important; padding: 7px 18px !important;
font-size: 12px !important;
}
.userbox {
padding: 0 18px !important;
border-top: 1px solid rgba(255,255,255,.12) !important;
padding-top: 12px !important;
}
.userbox #userName { color: #fff !important; font-size: 12.5px; }
.logout {
background: transparent !important; color: #b0b9c6 !important;
border: 1px solid rgba(255,255,255,.18) !important; border-radius: 4px !important;
}
.themawahl { background: rgba(255,255,255,.08) !important; }
.themawahl button { color: rgba(255,255,255,.6) !important; }
.themawahl button.an { background: var(--k-nacht-3) !important; color: #fff !important; }
}
/* ── Karten sind keine Karten mehr ───────────────────────────────────────── */
.awk, .card, .panel, .kachel, .kikarte, .bdk, .zgz, .modcard {
border-radius: 0 !important;
box-shadow: none !important;
background: var(--k-flaeche) !important;
background-image: none !important;
border: 1px solid var(--k-linie) !important;
}
/* ── Das Kennzahlenband ──────────────────────────────────────────────────
Fünf Werte in der Höhe, die eine einzige Kachel gebraucht hätte. Statt
Abständen zwischen Kästen trennen Haarlinien; das Band läuft von Kante zu
Kante wie eine Tabellenzeile. */
.awgesamt, .kpis {
display: grid !important;
grid-auto-flow: column; grid-auto-columns: 1fr;
gap: 0 !important; margin: 0 !important;
border-bottom: 1px solid var(--k-linie);
background: var(--k-flaeche) !important;
}
.awgfeld, .kpi {
padding: 15px 26px 14px !important;
border-right: 1px solid var(--k-linie);
border-radius: 0 !important; box-shadow: none !important;
background: var(--k-flaeche) !important; background-image: none !important;
display: flex !important; flex-direction: column; gap: 3px;
}
.awgfeld:last-child, .kpi:last-child { border-right: 0; }
.awgt, .kpi .k {
font-size: 11.5px !important; color: var(--n-sehrleise) !important;
font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important;
}
.awgv, .kpi .v {
font-family: var(--mono); font-size: 23px !important; font-weight: 600 !important;
letter-spacing: -.02em !important; color: var(--n-text) !important;
}
.awgf, .kpi .kfuss { font-size: 11.5px !important; font-family: var(--mono); }
/* ── Zahlen tragen die Monospace ─────────────────────────────────────────
Überall dort, wo Ziffern untereinander stehen sollen. */
.awgv, .kpi .v, .awgrossw, .awv, .awv1, .awv2, .awv3,
.betrag, .zahl, td.num, .mono, .awsz, .awzahl {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
/* ── Tabellen und Listen ─────────────────────────────────────────────────
38 Pixel Zeilenhöhe, keine senkrechten Linien, Kopf in Versalien. Dicht
genug zum scrollenden Suchen, ruhig genug zum Lesen dabei. */
table.tbl, .panel table, .awstab table, .zgliste {
border-collapse: collapse; width: 100%;
}
table.tbl th, .panel table th, .awstab table th {
text-align: left; font-size: 10.5px !important; letter-spacing: .09em;
text-transform: uppercase; color: var(--n-sehrleise) !important;
font-weight: 600 !important; padding: 10px 12px !important;
border-bottom: 1px solid var(--k-linie) !important; background: var(--k-flaeche) !important;
}
table.tbl td, .panel table td, .awstab table td {
height: var(--k-zeile); padding: 0 12px !important;
border-bottom: 1px solid var(--k-linie) !important;
font-size: 13px !important;
}
table.tbl tr:hover td, .panel table tr:hover td { background: var(--hover) !important; }
table.tbl td.r, .panel table td.r { text-align: right; }
/* ── Chips, Reiter, Knöpfe ───────────────────────────────────────────────── */
.zrchip, .zrknopf, .zrbtn, .chip, .chipbtn, .awschip, .filterchip, .seg {
border-radius: 20px !important; border: 1px solid var(--k-linie-stark) !important;
background: var(--k-flaeche) !important; color: var(--n-leise) !important;
font-size: 12px !important; padding: 5px 12px !important;
box-shadow: none !important; min-height: 30px;
}
.zrchip.an, .zrknopf.an, .zrbtn.an, .chip.on, .chipbtn.on, .awschip.an,
.filterchip.an, .seg.on {
background: var(--k-nacht) !important; border-color: var(--k-nacht) !important;
color: #fff !important; font-weight: 500 !important;
}
.awsreiter, .prreiter, .streiter {
border-bottom: 1px solid var(--k-linie) !important;
padding: 0 26px !important; margin: 0 !important; gap: 24px !important;
}
.awsreit, .pfreit, .prreit, .streit {
padding: 11px 0 !important; font-size: 13px !important;
border-bottom: 2px solid transparent !important; margin-bottom: -1px !important;
}
.awsreit.an, .pfreit.an, .prreit.an, .streit.an {
color: var(--n-text) !important; font-weight: 600 !important;
border-bottom-color: var(--k-nacht) !important;
}
.btn2, .sendbtn {
background: var(--k-nacht) !important; border: 1px solid var(--k-nacht) !important;
color: #fff !important; border-radius: 5px !important; box-shadow: none !important;
font-weight: 500 !important;
}
.btn, .btn-ghost, .zgbtn, .awsbtn {
background: var(--k-flaeche) !important; border: 1px solid var(--k-linie-stark) !important;
color: var(--n-text) !important; border-radius: 5px !important;
box-shadow: none !important; font-weight: 500 !important;
}
/* ── Der Statuspunkt ─────────────────────────────────────────────────────
Grün, Gelb und Rot kommen nur noch hier vor — und heißen dadurch wieder
etwas. Alles andere ist Blau oder Grau. */
.zgfahne, .fahne, .badge, .awpille {
border-radius: 20px !important; font-size: 11.5px !important;
padding: 3px 9px !important; box-shadow: none !important;
}
/* ── Die große Umsatzkachel ──────────────────────────────────────────────
In der alten Form war sie eine Farbfläche mit weißer Schrift. Nimmt man
ihr die Fläche — und diese Datei nimmt sie allen —, steht weiße Schrift
auf weißem Grund. Im Bild war die Kachel schlicht leer.
In der neuen Form gibt es keine hervorgehobene Fläche mehr: Die Zahl ist
groß, das genügt. Hervorhebung durch Größe statt durch Farbe ist auch der
ehrlichere Weg — Farbe ist hier für Zustände reserviert. */
.awgross {
background: var(--k-flaeche) !important; background-image: none !important;
border: 1px solid var(--k-linie) !important;
box-shadow: none !important;
padding: 20px 24px 8px !important;
}
.awgross .awl { color: var(--n-sehrleise) !important; font-size: 11.5px !important; }
.awgrossw {
color: var(--n-text) !important;
font-family: var(--mono); font-size: min(42px, 9cqw) !important;
font-weight: 600 !important; letter-spacing: -.03em !important;
-webkit-text-fill-color: currentColor !important;
background: none !important;
}
.awunter { color: var(--n-leise) !important; font-size: 12.5px !important; }
.awgross .awpille.auf { background: var(--n-gut-leise) !important; color: var(--n-gut) !important; }
.awgross .awpille.ab { background: var(--n-ab-leise) !important; color: var(--n-ab) !important; }
.awkurve .fl { fill: rgba(45,99,148,.10) !important; }
.awvl .awfeier { stroke: var(--n-akzent); stroke-width: 2; opacity: .75; }
/* Die dritte Zeile im Zeigerfeld — Wetter und Anlass des Tages.
Gemeldet am 08.09.2026: „Die Wetterdaten und die Summe überlagern sich."
Ursache war das Feld selbst: `white-space: nowrap` galt für den ganzen
Kasten, die drei Zeilen standen also in EINER Zeile nebeneinander, und die
dritte lief unter dem Betrag durch. Jetzt liegen sie als Spalte
untereinander; nowrap gilt nur noch je Zeile, damit „Sa, 29.08." nicht
mittendrin bricht. */
/* Das Zeigerfeld — eine Angabe je Zeile (08.09.2026 überarbeitet).
Gemeldet: „Durch die Vorjahressumme stimmt die Formatierung nicht mehr, es
ist nicht schön zu lesen. Die Wetterdaten sollen besser untereinander
stehen." Im Bild brach „7,2 mm / Regen" mitten in der Angabe um, und der
Vergleichstag lief über zwei Zeilen, weil alles in EINER Zeichenkette
stand.
Jetzt ist jede Angabe ein eigenes Element, und KEINE Zeile bricht um: Das
Feld wächst lieber in die Breite (bis 300 px) als eine Zahl von ihrer
Einheit zu trennen. */
.awvlfeld {
display: flex; flex-direction: column; gap: 1px;
white-space: nowrap !important;
min-width: 132px; max-width: 300px;
}
.awvlfeld > * { white-space: nowrap; }
/* Anlass des Tages (Feiertag, Ferien) — direkt unter dem Datum, ohne Linie:
Er gehört zum Tag, nicht zum Wetter. */
.awvlfeld .awvlanlass {
font-size: 10.5px; opacity: .8; line-height: 1.4; margin-top: 1px;
}
.awvlfeld .awvlum {
display: flex; align-items: center; gap: 6px;
font-style: normal; margin-top: 4px; padding-top: 5px;
border-top: 1px solid rgba(255,255,255,.14);
font-size: 11px; opacity: .9; line-height: 1.35;
}
.awvlfeld .awvlanlass[hidden], .awvlfeld .awvlum[hidden] { display: none; }
/* Das Wettersymbol — gezeichnet, nicht als Emoji: Es soll die Farbe der
Umgebung annehmen und auf jedem System gleich aussehen. */
.awwlage { width: 15px; height: 15px; flex: none; overflow: visible; }
.awwlage .sn { stroke: #ffc861; fill: #ffc861; stroke-width: 1.5; stroke-linecap: round; }
.awwlage .sn circle { stroke: none; }
.awwlage .wo { fill: rgba(255,255,255,.82); }
.awwlage .rg { stroke: #7fc4f2; stroke-width: 1.5; stroke-linecap: round; }
.awwlage .rg .fl { fill: #cfe8fb; stroke: none; }
.awwvorrat { display: none; }
.awkurve .ln {
stroke: var(--n-akzent) !important; stroke-width: 1.6 !important;
filter: none !important;
}
/* Die kleinen Kennzahlkacheln daneben — gleiche Machart, kleinere Zahl. */
.awmini .awl { color: var(--n-sehrleise) !important; font-size: 11.5px !important; }
.awmini .awv, .awmini .awv1, .awmini .awv2, .awmini .awv3 {
font-family: var(--mono); font-weight: 600 !important; letter-spacing: -.02em !important;
}
/* Überschriften der Blöcke: ruhig, klein, ohne Versalien — die Versalien
bleiben den Tabellenköpfen vorbehalten, sonst schreit alles gleich laut. */
.awk h4, .panel h3, .card h3 {
font-size: 13px !important; font-weight: 600 !important;
letter-spacing: -.01em !important; text-transform: none !important;
color: var(--n-text) !important;
}
.awleg, .awslink { font-size: 11.5px !important; }
.awslink { color: var(--n-akzent) !important; }
/* ── Band, Verlauf, Zeilen ───────────────────────────────────────────────
Die drei Ebenen der neuen Übersicht. Alle laufen von Kante zu Kante; den
Rand geben die Bauteile selbst, nicht ein Rahmen um sie herum. */
.awband {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
border-bottom: 1px solid var(--k-linie);
}
.awband > .awk {
border: 0 !important; border-right: 1px solid var(--k-linie) !important;
padding: 15px 26px 14px !important; min-height: 0 !important;
display: flex !important; flex-direction: column; gap: 3px;
grid-column: auto !important; grid-row: auto !important;
}
.awband > .awk:last-child { border-right: 0 !important; }
.awband .awgrossw { font-size: 26px !important; margin-top: 2px !important; }
.awband .awunter { margin-top: 4px !important; font-size: 11.5px !important; gap: 7px !important; }
.awband .awv, .awband .awv1, .awband .awv2, .awband .awv3 {
font-size: 23px !important; margin-top: 2px;
}
/* Die zweite Kennzahlenreihe (07.09.2026).
Sie trägt zehn Werte statt vier, also kann sie nicht dieselbe Spaltenregel
benutzen: `grid-auto-flow: column` verteilt zehn Kacheln auf zehn gleich
breite Spalten, und bei 1400 px sind das 140 px je Kachel — die Zahl
„1.234,56 €" bricht dann um. Stattdessen umbricht die REIHE, sobald es eng
wird, und die Kacheln behalten ihre Breite.
Kleiner gesetzt als die erste Reihe: Ø Bon und Rabattquote sind nicht
gleich wichtig, und wenn beide gleich groß dastehen, behauptet die
Oberfläche das Gegenteil. */
.awband.zweite {
/* Spalten aus der Anzahl, nicht aus einer Mindestbreite: Die Reihe soll
immer voll sein. Ein umbrechendes Raster liess die zweite Zeile im Bild
halb leer stehen. */
border-top: 1px solid var(--k-linie);
}
.awband.zweite > .awk {
padding: 11px 22px 10px !important;
border-bottom: 1px solid var(--k-linie) !important;
}
.awband.zweite .awl { font-size: 11px !important; }
.awband.zweite .awv, .awband.zweite .awv1,
.awband.zweite .awv2, .awband.zweite .awv3 {
font-size: 17px !important;
}
/* Die letzte Kachel einer Zeile hat keinen rechten Nachbarn — nur ist bei
umbrechendem Raster nicht `:last-child` gemeint, sondern jede, die rechts
aussen sitzt. Das weiss CSS nicht; die Linie stört dort aber auch nicht,
weil der Block selbst am Rand endet. Die untere Linie der letzten Zeile
dagegen läge doppelt auf der des Blocks — die wird entfernt. */
.awband.zweite { border-bottom: 0 !important; }
.awband.zweite > .awk { border-bottom: 0 !important; }
/* ── Die Farblegende unter den Kennzahlen (08.09.2026) ───────────────────
„Manchmal ist der Pfeil nach unten rot, manchmal grün. Die Zahlen sind
nicht verständlich." Beide Farben waren richtig — die Regel stand nur
nirgends. Sie steht jetzt da, wo die Pillen sind.
Bewusst leise gesetzt: Eine Legende, die so laut ist wie die Zahlen, über
die sie spricht, nimmt ihnen den Platz. */
.awfarblegende {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
padding: 9px 26px 10px;
border-top: 1px solid var(--k-linie);
border-bottom: 1px solid var(--k-linie);
font-size: 11px; color: var(--n-sehrleise); line-height: 1.5;
}
.awfarblegende .lgp {
white-space: normal; /* der Zahlungsmix-Satz darf umbrechen */
align-items: baseline;
}
.awfarblegende i { display: inline-block; flex: none; }
.awfarblegende .lgtext { margin-right: 2px; }
.awfarblegende .lgende { margin-left: auto; padding-left: 14px; opacity: .85; }
.awfarblegende .lgmehr { font-style: normal; }
.lgauf, .lgab, .lgneutral {
width: 9px; height: 9px; border-radius: 999px; vertical-align: -1px;
}
.lgauf { background: var(--n-gut); }
.lgab { background: var(--n-ab); }
.lgneutral { background: var(--n-sehrleise); opacity: .55; }
/* Die neutrale Pille: Pfeil ja, Wertung nein. Kein Grau-in-Grau — sie muss
sich von der Fläche abheben, ohne wie „gut" oder „schlecht" auszusehen. */
.awpille.neutral, .awgross .awpille.neutral {
background: var(--k-linie) !important;
color: var(--n-leise) !important;
}
.awgf.neutral { color: var(--n-leise) !important; }
@media (max-width: 900px) {
.awfarblegende { padding: 9px 14px 10px; }
/* Der lange Zahlungsmix-Satz frisst auf dem Telefon eine halbe Seite. Dort
bleibt die Farbregel; die Begründung steht weiter im `title`. */
.awfarblegende .lgmehr, .awfarblegende .lgende { display: none; }
}
.awverlauf {
border: 0 !important; border-bottom: 1px solid var(--k-linie) !important;
padding: 14px 26px 4px !important;
}
.awverlauf .awkurve {
width: 100% !important; height: 128px !important; margin: 8px 0 0 !important;
}
.awzeile {
display: grid; grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--k-linie);
}
.awzeile.eins { grid-template-columns: 1fr; }
.awzeile > .awk {
border: 0 !important; border-right: 1px solid var(--k-linie) !important;
padding: 16px 26px 14px !important; min-height: 0 !important;
grid-column: auto !important; grid-row: auto !important;
}
.awzeile > .awk:last-child { border-right: 0 !important; }
/* Der Ring der Warengruppen wird kleiner: Er stand in einer Kachel, jetzt
in einer halben Zeile neben einer Liste. */
.awdonut svg { flex: 0 0 112px !important; width: 112px !important; height: 112px !important; }
.awdonut { gap: 18px !important; }
/* ── Nachbesserungen aus dem Prüfbild ────────────────────────────────────
Drei Dinge, die man dem Quelltext nicht ansieht:
1. Die Veränderungspille dehnte sich über die volle Spaltenbreite. In
einer Kachel stand sie neben Text und blieb schmal; im Band ist sie
das einzige Kind einer Flex-Spalte und wächst mit. `align-self`
begrenzt sie auf ihre Breite — eine Pille, die eine Spalte füllt,
liest sich als Warnbalken.
2. Die Überschrift des Verlaufs stand NEBEN der Kurve statt darüber:
`.awk` ist eine Flex-Spalte, deren Kinder sich verteilen, und die
Kurve bringt `margin:auto` mit. Als Block gesetzt stimmt die Folge.
3. Der Tagesverlauf unten wuchs ins Riesenhafte, weil die Zeile keine
Höhe vorgibt und das Diagramm sich nimmt, was da ist. */
.awband .awpille, .awzeile .awpille { align-self: flex-start; }
.awverlauf { display: block !important; }
.awverlauf .awkurve { margin: 10px 0 0 !important; width: 100% !important; }
.awzeile .awdia, .awverlauf .awdia { height: 132px !important; }
.awzeile .awdia.klein { height: 108px !important; }
.awk.awhoch { min-height: 0 !important; }
/* `.awk` hatte `overflow: hidden` — nötig, solange die Karte runde Ecken
hatte und die Kurve randlos darüber hinauslief. Beides gibt es nicht mehr;
geblieben war nur die Wirkung: Die Kurve wurde an der Blockkante
abgeschnitten, im Bild deutlich zu sehen. */
.awk { overflow: visible !important; }
.awverlauf { height: auto !important; padding-bottom: 14px !important; }
.awverlauf .awkurve { height: 120px !important; display: block; }
/* ── Telefon ─────────────────────────────────────────────────────────────
Das Band trägt am Rechner fünf Werte nebeneinander. Auf 390 Pixeln sind
das 78 je Wert — im Bild stand „169.59" und dann war die Spalte zu Ende.
Zwei Spalten, umbrechend. Die Zeilen darunter werden einspaltig: Zwei
Listen nebeneinander sind auf dem Telefon zwei halbe Listen. */
@media (max-width: 900px) {
#content { padding: 0 14px 20px !important; }
.awband, .awzeile, .awverlauf, .awsreiter, .prreiter, .streiter {
margin-left: -14px !important; margin-right: -14px !important;
}
.awband {
grid-auto-flow: row !important;
grid-template-columns: 1fr 1fr !important;
grid-auto-columns: auto !important;
}
.awband > .awk {
padding: 12px 14px 11px !important;
border-bottom: 1px solid var(--k-linie) !important;
}
.awband > .awk:nth-child(2n) { border-right: 0 !important; }
.awband > .awk:nth-last-child(-n+2) { border-bottom: 0 !important; }
.awband .awgrossw { font-size: 21px !important; }
.awband .awv, .awband .awv1, .awband .awv2, .awband .awv3 { font-size: 19px !important; }
.awband .awunter { flex-wrap: wrap; }
.awzeile { grid-template-columns: 1fr !important; }
.awzeile > .awk {
border-right: 0 !important;
border-bottom: 1px solid var(--k-linie) !important;
padding: 14px !important;
}
.awzeile > .awk:last-child { border-bottom: 0 !important; }
.awverlauf { padding: 12px 14px !important; }
.awverlauf .awkurve { height: 96px !important; }
.awsreiter { padding: 0 14px !important; }
.topbar { padding: 14px 14px 12px !important; }
/* Der Ring nimmt auf dem Telefon zu viel Breite — die Liste daneben
bekommt sonst keine Zahl mehr unter. */
.awdonut { flex-direction: column; align-items: stretch; gap: 12px !important; }
.awdonut svg { align-self: center; }
}
/* ── Die Wortmarke ───────────────────────────────────────────────────────
Als MASKE, nicht als Bild: `mask-image` färbt die Form mit
`background-color`, und damit nimmt die Marke die Schriftfarbe an — weiß
auf der dunklen Leiste, blaugrau auf der hellen Anmeldemaske. Ein `![]()
`
könnte das nicht; es bräuchte zwei Dateien, und die zweite vergisst
irgendwann jemand.
Die Vorlage ist 780 × 414; bei 132 Pixeln Breite sind das 70 in der Höhe. */
.ckvlogo {
display: block; width: 132px; height: 70px; flex: none;
background-color: currentColor;
-webkit-mask: url("../symbole/ckv-logo.svg") no-repeat center / contain;
mask: url("../symbole/ckv-logo.svg") no-repeat center / contain;
}
.brand {
display: flex !important; align-items: baseline; gap: 8px;
flex-wrap: wrap; line-height: 1.2;
}
.brand .bt {
font-size: 12px; font-weight: 500; letter-spacing: .1em;
text-transform: uppercase; opacity: .62; flex: 1 0 100%;
margin-top: -6px;
}
@media (min-width: 901px) {
aside .brand { padding: 2px 18px 6px !important; display: block !important; }
/* In der Leiste steht der Zusatz „Dashboard" nicht: Direkt darunter beginnt
die Modulgruppe, die schon so heißt — im Bild stand das Wort zweimal
untereinander. Auf der Anmeldemaske bleibt er, dort gibt es keine
Gruppenüberschrift. */
aside .brand .bt { display: none; }
}
/* Auf der Anmeldemaske größer und mittig — dort ist die Marke das Erste,
was jemand sieht. */
#login .brand { justify-content: center; }
#login .ckvlogo { width: 176px; height: 93px; margin: 0 auto; }
#login .brand .bt { text-align: center; }
/* ── Reste aus der alten Form ────────────────────────────────────────────
Zwei Stellen, die im Bild noch die vorige Optik trugen. Beide führen
`!important` in `modern.css`, also braucht es hier dasselbe — ein
`!important` gegen ein `!important` ist an dieser Stelle kein Notnagel,
sondern die einzige Sprache, die dort gesprochen wird.
1. `.kpi.held` war die violette Farbfläche der alten Kennzahlkachel. In
der Konsole gibt es keine hervorgehobene Fläche mehr: Die Zahl ist
groß, das genügt, und Farbe bleibt für Zustände reserviert.
2. Der aktive Chip stand in blassem Akzent auf hellem Grund. In der
Konsole ist „ausgewählt" dunkel gefüllt — dasselbe Zeichen wie beim
aktiven Register, damit Auswahl überall gleich aussieht. */
.kpi.held {
background: var(--k-flaeche) !important;
background-image: none !important;
color: var(--n-text) !important;
box-shadow: none !important;
}
/* `marke.css` füllt diese Zahl mit einem Farbverlauf und macht den Text
selbst durchsichtig (`-webkit-text-fill-color: transparent`) — richtig,
solange die Kachel eine violette Fläche war. Auf der weißen Fläche der
Konsole ist die Zahl damit UNSICHTBAR: gemessener Kontrast 1,00.
Gefunden hat das die Kontrastmessung, im Bild wäre es nur aufgefallen,
wenn man genau diese Ansicht im dunklen Thema geöffnet hätte.
Die Selektoren dort sind spezifischer (0,3,1), also muss hier dieselbe
Höhe her — sonst gewinnt der Verlauf trotz `!important`. */
.kpi.held .v,
:root .kpi.held .v,
:root[data-theme="dunkel"] .kpi.held .v {
color: var(--n-text) !important;
-webkit-text-fill-color: var(--n-text) !important;
background: none !important; background-image: none !important;
text-shadow: none !important;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="hell"]) .kpi.held .v {
color: var(--n-text) !important;
-webkit-text-fill-color: var(--n-text) !important;
background: none !important; background-image: none !important;
}
}
/* Die Fußnote auf dem Kassenbon stand auf #8a8a84 — 3,41 : 1 auf dem
Bonpapier. Der Bon behält sein eigenes Aussehen, aber lesbar muss auch
er sein. */
.bfussnote { color: #6a6a64 !important; }
.kpi.held .k, .kpi.held .kfuss { color: var(--n-sehrleise) !important; }
.kpi.held .kfuss.auf { color: var(--n-gut) !important; }
.kpi.held .kfuss.ab { color: var(--n-ab) !important; }
.chip.an, .filterchip.an, .zrchip.an, .awschip.an,
.chipbtn.on, .chip.on, .seg.on {
background: var(--k-nacht) !important;
color: #fff !important;
box-shadow: none !important;
border-color: var(--k-nacht) !important;
font-weight: 500 !important;
}
/* Der Zähler im Chip bleibt lesbar, wenn der Chip dunkel gefüllt ist. */
.chip.an .cnt, .chipbtn.on .cnt { color: rgba(255,255,255,.62) !important; }
/* ══════════════════════════════════════════════════════════════════════════
LESBARKEIT — gemessen, nicht geschätzt.
Am 07.09.2026 gemeldet: Überschriften in den fertigen Berichten seien
„viel zu hell". Nachgemessen mit `werkzeuge/kontrast.mjs`, das im echten
Browser jeden sichtbaren Textknoten gegen seinen tatsächlichen Untergrund
rechnet: **80 Stellen** unter der Norm, fast alle mit demselben Wert.
Es war eine einzige Farbe. `--n-sehrleise` stand auf #8b95a5 und ergibt
auf weißem Grund 3,03 : 1 — die WCAG verlangt 4,5 : 1 für normalen Text.
Betroffen war damit alles, was leise sein soll und trotzdem gelesen
werden muss: Kachelüberschriften, Legenden, Tabellenköpfe, Prozentwerte,
die Achsenbeschriftung, das ALT-Schild, „Filiale".
Die neuen Werte sind gerechnet, nicht gewählt:
hell #67717f auf #ffffff 4,95 : 1
dunkel #929db0 auf #12161d 6,62 : 1
„Leise" heißt zurückhaltend, nicht unlesbar. Wer eine Zahl nicht
entziffern kann, liest sie nicht später — er liest sie nie. */
:root { --n-sehrleise: #67717f; }
:root[data-theme="dunkel"] { --n-sehrleise: #929db0; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="hell"]) { --n-sehrleise: #929db0; }
}
/* Die Veränderungspille lag bei 4,11 : 1 auf ihrem eigenen blassen Grund —
knapp darunter, und ausgerechnet bei der Angabe, wegen der man hinsieht. */
:root { --n-ab: #b3202f; }
:root[data-theme="dunkel"] { --n-ab: #ff8a99; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="hell"]) { --n-ab: #ff8a99; }
}
/* ── Fertige Berichte ────────────────────────────────────────────────────
Die Vorlagenkacheln hatten ihre Form verloren: `mac.css` gab ihnen
`border: none` und einen Schatten, und diese Datei nimmt allen Bauteilen
die Schatten. Übrig blieb Text ohne Fassung — im Bild standen die Titel
nackt auf der Fläche, und man sah nicht mehr, wo eine Kachel anfängt.
In der Konsolenform bekommt eine Kachel einen Haarstrich statt eines
Schattens. Beim Überfahren wechselt nicht der Schatten, sondern der
Untergrund: eine Fläche, die auf den Zeiger reagiert, ohne zu springen. */
.brkachel {
border: 1px solid var(--k-linie) !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--k-flaeche) !important;
padding: 14px 16px !important;
}
.brkachel:hover {
box-shadow: none !important;
background: var(--hover) !important;
border-color: var(--k-linie-stark) !important;
}
.brvorlagen { gap: 12px !important; }
.brgruppe { margin-top: 22px; }
.brgt {
font-size: 10.5px !important; letter-spacing: .14em; text-transform: uppercase;
color: var(--n-sehrleise) !important; font-weight: 600 !important;
padding-bottom: 6px; margin-bottom: 12px;
border-bottom: 1px solid var(--k-linie);
}
.brkn { font-size: 14px !important; }
.brkz { color: var(--n-sehrleise) !important; }
.brkb { color: var(--n-leise) !important; font-size: 12.5px !important; }
/* Der Sortiergriff stand links vor dem Titel und klebte an ihm — im Bild
las sich „⠿Abgleich mit der Kasse" wie ein Schreibfehler. Er sitzt jetzt
oben rechts, wo kein Text hinkommt, und wird erst beim Überfahren
deutlich: Man greift ihn selten, sehen muss man ihn nicht ständig. */
.brkachel { position: relative; }
.brkachel .sortgriff {
position: absolute; right: 8px; top: 10px; left: auto;
color: var(--n-sehrleise); opacity: .28; font-size: 12px;
transition: opacity .12s;
}
.brkachel:hover .sortgriff { opacity: .7; }
.brkoeffnen { padding-right: 18px; }
.hint {
color: var(--n-leise) !important; font-size: 12.5px !important;
padding: 12px 0 4px; margin: 0 !important;
}
/* ── Rechnungsliste und Orderbons ────────────────────────────────────────
Die Liste IST hier der Bildschirm — nicht ein Block unter anderen. Sie
war mit 11 px Innenabstand locker gesetzt; in der Konsolenform wird sie
dichter, damit mehr Zeilen ohne Scrollen sichtbar sind.
Warum das kein Selbstzweck ist: Wer eine Rechnung sucht, überfliegt
Zeilen. Vierzehn statt zehn auf einem Bildschirm heißt vierzig Prozent
weniger scrollen bei derselben Suche. */
.blliste, .obliste {
border-radius: 0 !important; box-shadow: none !important;
border: 0 !important; overflow: visible !important;
}
.blz {
/* Nur die HÖHE zusammenstreichen, nicht die Breite: `padding: 0` nahm auch
den seitlichen Abstand, und die Beträge klebten am rechten Rand — im
Bild stand das Eurozeichen auf der Kante. */
padding: 0 14px !important; min-height: var(--k-zeile);
border-bottom: 1px solid var(--k-linie) !important;
align-items: center;
}
.blz + .blz { border-top: 0 !important; }
.blz:hover { background: var(--hover) !important; }
.blnr, .blsumme, .blzeit, .blpos { font-family: var(--mono); }
.blsumme { font-size: 13px !important; font-weight: 600 !important; }
.blnr { color: var(--n-akzent) !important; font-weight: 500 !important; }
.blkopf {
padding: 10px 0 !important; border-bottom: 1px solid var(--k-linie);
font-size: 12.5px;
}
.blmehr {
border: 1px solid var(--k-linie-stark) !important; border-radius: 5px !important;
background: var(--k-flaeche) !important; box-shadow: none !important;
}
/* ── Die Marke auf dem Telefon ───────────────────────────────────────────
Am Rechner steht sie in der Leiste und darf Platz haben. Auf dem Telefon
sitzt sie in der Kopfzeile neben dem Kontoknopf — dort nahm sie bei 132 ×
70 Pixeln fast die halbe Zeile und drückte den Inhalt nach unten.
Kleiner, aber nicht winzig: Bei 92 Pixeln bleibt „Kassensysteme &
Payment" noch lesbar. Darunter wird die Unterzeile zu Grau, und dann ist
ein Logo ohne Zusatz das ehrlichere Bild. */
@media (max-width: 900px) {
.ckvlogo { width: 92px; height: 49px; }
aside .brand { padding: 0 !important; }
/* Die Belegzeile bricht auf dem Telefon ohnehin um — dann braucht sie
keine feste Mindesthöhe, die nur zusätzlichen Leerraum erzeugt. */
.blz { min-height: 0 !important; padding: 9px 12px !important; }
}
/* ── Die Berichtstabelle ─────────────────────────────────────────────────
Sie ist der Zeichner, den auch die fertigen Berichte benutzen — was hier
steht, gilt dort mit. Deshalb keine zweite Regel für die Vorlagen.
Wie bei den Listen: die Höhe zusammenstreichen, den seitlichen Abstand
lassen. Die Summenzeile bekommt eine kräftige Oberlinie statt einer
getönten Fläche — eine farbige Zeile in einer sonst neutralen Tabelle
liest sich als Hinweis, gemeint ist aber nur „hier endet die Rechnung". */
.brtabelle {
border: 1px solid var(--k-linie) !important;
border-radius: 0 !important; box-shadow: none !important;
}
.brtkopf, .brtecke {
background: var(--k-flaeche) !important;
font-size: 10.5px !important; letter-spacing: .09em; text-transform: uppercase;
color: var(--n-sehrleise) !important; padding: 10px 12px !important;
}
.brtz td, .brtz th { height: var(--k-zeile); padding: 0 12px !important; }
.brtz { border-top-color: var(--k-linie) !important; }
.brtz:hover { background: var(--hover) !important; }
.brtsumme, .brtz.brtgesamt {
background: var(--k-flaeche) !important;
border-top: 2px solid var(--k-linie-stark) !important;
}
.brtz.brtgesamt .brtn,
.brtz.brtgesamt:not(:hover) .brtn { background: var(--k-flaeche) !important; }
.brtw, .brtv, .brtsumme { font-family: var(--mono); }
.brtv { font-size: 11px !important; }
/* ══════════════════════════════════════════════════════════════════════════
ZEITRAUM UND REGISTER — wer laut sein darf.
Am 07.09.2026 beanstandet: die Zeitraum-Pillen wirkten altbacken, und die
Register darunter „gehen ein bisschen unter". Beides in einem Atemzug, und
das trifft die Ursache: Die zwei Elemente stehen übereinander und
konkurrierten. Ein Rahmen um jedes Wort oben, nur Text unten — also zog
das Unwichtigere den Blick.
Umgedreht: Die Register sind Navigation und stehen jetzt OBEN, kräftig.
Der Zeitraum ist eine Einstellung und wird zur schmalen Werkzeugzeile
darunter, auf leicht getöntem Grund — sichtbar als das, was er ist.
══════════════════════════════════════════════════════════════════════════ */
/* ── Der Registerplatz ──────────────────────────────────────────────────── */
.reiterbar:empty { display: none; }
.reiterbar .awsreiter {
margin: 0 !important;
border-bottom: 1px solid var(--k-linie) !important;
padding: 0 26px !important;
gap: 26px !important;
align-items: stretch;
}
.reiterbar .awsreit {
font-size: 14.5px !important;
padding: 13px 0 !important;
color: var(--n-leise) !important;
border-bottom: 2px solid transparent !important;
margin-bottom: -1px !important;
}
.reiterbar .awsreit:hover { color: var(--n-text) !important; }
.reiterbar .awsreit.an {
color: var(--k-nacht) !important; font-weight: 650 !important;
border-bottom-color: var(--k-nacht) !important;
}
/* Der Vergleichswähler gehört nicht zur Navigation — er rutscht nach rechts
und wird leise, damit die Register die Zeile tragen. */
.reiterbar .awsverg { margin-left: auto; align-self: center; }
.reiterbar .awsverg select { font-size: 12.5px !important; }
/* ── Die Zeitraumzeile ──────────────────────────────────────────────────── */
.zrbar {
background: var(--card2) !important;
border-bottom: 1px solid var(--k-linie) !important;
padding: 9px 26px !important;
}
.zrzeile {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; row-gap: 8px;
}
.zrwas {
font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
font-weight: 600; color: var(--n-sehrleise); margin-right: 2px;
}
/* Ein Element, sechs Möglichkeiten: die Trennlinien stehen INNEN, der Rahmen
außen. Deshalb `overflow: hidden` — sonst stehen die Ecken der Knöpfe über
dem gerundeten Rahmen. */
.zrseg {
display: inline-flex; border: 1px solid var(--k-linie-stark);
border-radius: 6px; overflow: hidden; background: var(--k-flaeche);
}
.zrs {
border: 0; border-right: 1px solid var(--k-linie); background: none;
font: inherit; font-size: 12.5px; color: var(--n-leise);
padding: 6px 13px; cursor: pointer; white-space: nowrap;
}
.zrs:last-child { border-right: 0; }
.zrs:hover { background: var(--hover); color: var(--n-text); }
.zrs.an {
background: var(--k-nacht); color: #fff; font-weight: 600;
}
.zrkal {
display: inline-flex; align-items: center; gap: 7px;
border: 1px solid var(--k-linie-stark); border-radius: 6px;
background: var(--k-flaeche); color: var(--n-text);
font: inherit; font-size: 12.5px; padding: 6px 12px; cursor: pointer;
white-space: nowrap;
}
.zrkal:hover { background: var(--hover); }
.zrkal.an { border-color: var(--k-nacht); font-weight: 600; }
.zrspanne {
font-family: var(--mono); font-size: 12.5px; font-weight: 500;
color: var(--n-text);
}
.zrbestand { font-size: 11.5px; color: var(--n-sehrleise); }
@media (max-width: 900px) {
.zrbar { padding: 8px 14px !important; }
.reiterbar .awsreiter { padding: 0 14px !important; }
.zrwas { display: none; }
.zrseg { flex: 1 1 100%; }
.zrs { flex: 1; padding: 7px 6px; text-align: center; font-size: 12px; }
.zrbestand { display: none; }
}
/* ── Nachgemessen: zwei Stellen ──────────────────────────────────────────
1. Die Zeitraumzeile steht auf getöntem Grund (`--card2`), nicht auf Weiß.
Damit fällt `--n-sehrleise` dort von 4,95 auf 4,45 : 1 — knapp unter
der Norm. Ein Wert, den man nur findet, wenn man gegen den ECHTEN
Untergrund misst statt gegen den angenommenen.
2. Das aktive Register war `--k-nacht`, also fast schwarz. Auf hellem
Grund richtig, im dunklen Thema Kontrast 1,09 — die gewählte Ansicht
war schlicht unsichtbar. Dort muss es die Textfarbe tragen. */
.zrwas, .zrbestand { color: #5b6472 !important; }
:root[data-theme="dunkel"] .reiterbar .awsreit.an,
:root[data-theme="dunkel"] .zrs.an,
:root[data-theme="dunkel"] .zrkal.an {
color: var(--n-text) !important;
border-bottom-color: var(--n-akzent) !important;
}
:root[data-theme="dunkel"] .zrs.an {
background: var(--n-akzent) !important; color: #0b1017 !important;
}
:root[data-theme="dunkel"] .zrwas,
:root[data-theme="dunkel"] .zrbestand { color: var(--n-sehrleise) !important; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="hell"]) .reiterbar .awsreit.an,
:root:not([data-theme="hell"]) .zrkal.an {
color: var(--n-text) !important;
border-bottom-color: var(--n-akzent) !important;
}
:root:not([data-theme="hell"]) .zrs.an {
background: var(--n-akzent) !important; color: #0b1017 !important;
}
:root:not([data-theme="hell"]) .zrwas,
:root:not([data-theme="hell"]) .zrbestand { color: var(--n-sehrleise) !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
OFFENE TISCHE — die Zeile ist die Zeitachse.
Die vorige Kachel war das Muster, das man an jeder Ecke wiedererkennt:
abgerundet, farbiger Streifen links, Titel links / Betrag rechts. Am
07.09.2026 beanstandet als „Standard-KI-Layout" — zu Recht, denn es sagt
nichts über den Inhalt aus.
Jetzt trägt die Zeile selbst die Aussage: Ihr Hintergrund ist ein zarter
Verlauf, dessen Länge die Verweildauer ist. Man liest die Liste normal und
sieht die Dauer nebenbei — Tisch 888 füllt sie ganz, ein frisch geöffneter
gerade einen Finger breit.
══════════════════════════════════════════════════════════════════════════ */
.ofgruppe { margin-bottom: 26px; }
.ofgk {
display: flex; align-items: baseline; gap: 11px;
padding-bottom: 8px; border-bottom: 2px solid var(--n-text);
}
.ofgk h3 { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; }
.ofgk span { font-size: 11.5px; color: var(--n-sehrleise); }
.ofgk b { margin-left: auto; font-size: 11.5px; color: var(--n-leise); font-weight: 500;
font-family: var(--mono); }
.ofz {
position: relative; display: grid;
grid-template-columns: 62px 14px 1fr 84px 88px 34px 96px;
align-items: center; gap: 12px;
min-height: 44px; padding: 0 10px;
border-bottom: 1px solid var(--k-linie);
cursor: pointer; overflow: hidden;
}
.ofz:last-child { border-bottom: 0; }
.ofz > * { position: relative; z-index: 1; }
.ofz:hover { background: var(--hover); }
/* Die Fläche IST die Dauer. Zehn Prozent Deckkraft am linken Rand, nach
rechts auslaufend — sichtbar genug, um Zeilen zu unterscheiden, leise
genug, um den Text nicht zu stören. Die Kante rechts ist der Endpunkt. */
.ofachse {
position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
background: linear-gradient(90deg, rgba(45,99,148,.10), rgba(45,99,148,.03));
border-right: 1px solid rgba(45,99,148,.22);
}
.wartet .ofachse {
background: linear-gradient(90deg, rgba(168,100,42,.13), rgba(168,100,42,.04));
border-right-color: rgba(168,100,42,.30);
}
.ofnr {
font-family: var(--mono); font-size: 19px; font-weight: 600;
letter-spacing: -.02em; white-space: nowrap;
}
.ofnr i {
font-style: normal; font-size: 10.5px; font-weight: 400;
color: var(--n-sehrleise); margin-left: 5px;
}
/* Ein Zeichen für zwei Zustände: gefüllt heißt „läuft", hohl heißt „wartet".
Keine Legende nötig — der Unterschied erklärt sich beim Vergleich. */
.ofpunkt {
width: 7px; height: 7px; border-radius: 50%; justify-self: center;
background: var(--n-akzent);
}
.wartet .ofpunkt { background: none; box-shadow: inset 0 0 0 1.5px #a8642a; }
.ofwer {
font-size: 12.5px; color: var(--n-leise);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ofwer i { font-style: normal; color: var(--n-sehrleise); }
.ofdauer, .ofruhe, .ofpos {
font-family: var(--mono); font-size: 11.5px;
color: var(--n-sehrleise); text-align: right;
}
.wartet .ofruhe { color: #a8642a; font-weight: 600; }
.ofbetrag {
font-family: var(--mono); font-size: 13.5px; font-weight: 600;
text-align: right;
}
/* Der Bon und der Doppelt-Hinweis stehen unter der Zeile und brauchen die
volle Breite — sonst würden sie in die Rasterspalten gequetscht. */
.ofz .ofbon, .ofz .ofdoppelt { grid-column: 1 / -1; }
.ofdoppelt {
font-size: 11.5px; color: #a8642a; padding: 0 0 9px;
line-height: 1.45;
}
/* Im dunklen Thema tragen Achse und Warnung eigene Werte: Ein Braun, das auf
Weiß warnt, verschwindet auf Nachtblau. */
:root[data-theme="dunkel"] .ofachse {
background: linear-gradient(90deg, rgba(124,160,210,.16), rgba(124,160,210,.05));
border-right-color: rgba(124,160,210,.30);
}
:root[data-theme="dunkel"] .wartet .ofachse {
background: linear-gradient(90deg, rgba(230,160,90,.16), rgba(230,160,90,.05));
border-right-color: rgba(230,160,90,.34);
}
:root[data-theme="dunkel"] .wartet .ofpunkt { box-shadow: inset 0 0 0 1.5px #e0a060; }
:root[data-theme="dunkel"] .wartet .ofruhe,
:root[data-theme="dunkel"] .ofdoppelt { color: #e0a060; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="hell"]) .ofachse {
background: linear-gradient(90deg, rgba(124,160,210,.16), rgba(124,160,210,.05));
border-right-color: rgba(124,160,210,.30);
}
:root:not([data-theme="hell"]) .wartet .ofachse {
background: linear-gradient(90deg, rgba(230,160,90,.16), rgba(230,160,90,.05));
border-right-color: rgba(230,160,90,.34);
}
:root:not([data-theme="hell"]) .wartet .ofpunkt { box-shadow: inset 0 0 0 1.5px #e0a060; }
:root:not([data-theme="hell"]) .wartet .ofruhe,
:root:not([data-theme="hell"]) .ofdoppelt { color: #e0a060; }
}
/* Auf dem Telefon fehlt die Breite für sieben Spalten. Zwei Zeilen: oben
Nummer und Betrag, darunter der Rest — die Zeitachse bleibt, sie ist der
Kern der Darstellung. */
@media (max-width: 900px) {
.ofz {
grid-template-columns: auto 12px 1fr auto;
grid-template-areas: "nr pkt wer bet" "nr pkt meta bet";
row-gap: 2px; padding: 9px 10px; min-height: 0;
}
.ofnr { grid-area: nr; font-size: 17px; }
.ofpunkt { grid-area: pkt; }
.ofwer { grid-area: wer; }
.ofbetrag { grid-area: bet; }
/*
* Die drei Angaben in EINEN Rasterbereich zu legen stapelt sie
* übereinander — im Bild lagen „34 Min", „6 Min still" und „3"
* buchstäblich aufeinander. Ein Bereich nimmt genau ein Element.
*
* Also eine eigene Zeile, in der sie nebeneinander stehen. Getrennt
* werden sie durch Abstand statt durch Mittelpunkte: Bei drei Angaben in
* Monospace ist der Abstand ruhiger als zwei Trennzeichen.
*/
.ofz {
grid-template-areas: "nr pkt wer bet" "nr pkt meta meta";
}
.ofmeta {
grid-area: meta; display: flex; gap: 12px;
font-family: var(--mono); font-size: 11px; color: var(--n-sehrleise);
}
.ofdauer, .ofruhe, .ofpos { display: none; }
}
/* Am Rechner stehen die drei Angaben in eigenen Spalten — die Telefonzeile
wäre dort eine Wiederholung. */
.ofmeta { display: none; }
.ofmeta i { font-style: normal; }
.ofmeta i.warn { color: #a8642a; font-weight: 600; }
@media (max-width: 900px) { .ofmeta { display: flex; } }
/* Das Kennzahlenband der offenen Tische hat VIER Werte, nicht fünf wie in
der Übersicht — auf dem Telefon sind das 97 Pixel je Wert, und im Bild
stand „714,95 €" halb über „6". Zwei Spalten, wie beim Band der
Übersicht auch. */
@media (max-width: 900px) {
.awgesamt {
grid-auto-flow: row !important;
grid-template-columns: 1fr 1fr !important;
grid-auto-columns: auto !important;
}
.awgfeld {
padding: 11px 14px 10px !important;
border-bottom: 1px solid var(--k-linie) !important;
}
.awgfeld:nth-child(2n) { border-right: 0 !important; }
.awgfeld:nth-last-child(-n+2) { border-bottom: 0 !important; }
.awgesamt .awgv { font-size: 19px !important; }
.awgesamt .awgt, .awgesamt .awgf { font-size: 11px !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
DER UMSATZVERLAUF — mit Bezugspunkten.
Bis zum 07.09.2026 eine Linie ohne Achse, ohne Datum, ohne Zahlen.
Beanstandet als „total nichtssagend", und das trifft: Eine Kurve ohne
Bezug zeigt eine Form. Man kann ihr weder entnehmen, wie hoch ein
Ausschlag ist, noch wann er war.
Die Beschriftungen liegen als HTML ÜBER dem SVG. Das SVG wird mit
`preserveAspectRatio="none"` auf die Breite gezogen — Text darin würde
mitverzerrt und stünde je nach Fensterbreite anders breit da.
══════════════════════════════════════════════════════════════════════════ */
/* Platz für die Beschriftungen: Der beste Tag steht ÜBER seinem Punkt, der
schwächste DARUNTER. Ohne diesen Abstand stand der eine im Titel der
Kachel und der andere in der Datumsachse — im Bild überlagerten sich
„2.790,27 €" und „03.09.". */
.awvl { position: relative; margin-top: 10px; padding: 22px 0 20px; }
.awvl .awkurve {
width: 100% !important; height: 150px !important;
margin: 0 !important; display: block;
}
/* Die Marken liegen über der KURVE, nicht über dem ganzen Block — sonst
rechnen ihre Prozentwerte gegen die Höhe samt Innenabstand. */
.awvlmarken { position: absolute; left: 0; right: 0; top: 22px; height: 150px;
pointer-events: none; }
/* Wochenenden. In der Gastronomie ist der Wochentag die stärkste
Einzelgröße — ohne Marken hält man die normale Wochenwelle für ein
Ereignis. Sehr blass: Sie sollen den Blick führen, nicht binden. */
.awwe { fill: rgba(20,28,40,.045); }
:root[data-theme="dunkel"] .awwe { fill: rgba(255,255,255,.045); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="hell"]) .awwe { fill: rgba(255,255,255,.045); }
}
/* Der Durchschnitt ist der Bezug, an dem sich jeder Punkt messen lässt.
Ohne ihn ist „hoch" ein Gefühl. */
.awschnitt {
stroke: var(--n-sehrleise); stroke-width: 1; stroke-dasharray: 4 4;
vector-effect: non-scaling-stroke; opacity: .6;
}
/* Über der Linie, nicht auf ihr. Mittig gesetzt lag das Schild auf gleicher
Höhe wie ein Tageswert am rechten Rand — im Bild überlagerten sich
„Ø 4.865,47 €" und „2.790,27 €". Eine Textzeile Versatz trennt sie. */
.awvlschnitt {
position: absolute; right: 0; transform: translateY(-100%); margin-top: -3px;
font-family: var(--mono); font-size: 10.5px; color: var(--n-sehrleise);
background: var(--k-flaeche); padding: 0 4px;
}
/* Der vorige Zeitraum: dünn und gestrichelt, damit er nicht mit dem
aktuellen verwechselt wird. */
.awvgl {
fill: none; stroke: var(--n-sehrleise); stroke-width: 1.2;
stroke-dasharray: 3 3; opacity: .55; vector-effect: non-scaling-stroke;
}
/* Bester und schwächster Tag — die beiden Punkte, nach denen man sucht. */
.awvlp {
position: absolute; width: 8px; height: 8px; border-radius: 50%;
transform: translate(-50%, -50%);
background: var(--n-akzent); box-shadow: 0 0 0 2.5px var(--k-flaeche);
}
.awvlp.tief { background: var(--n-sehrleise); }
.awvlb {
position: absolute; transform: translate(-50%, -100%);
margin-top: -9px; text-align: center; white-space: nowrap;
font-family: var(--mono); line-height: 1.25;
}
/* Betrag und Datum NEBENeinander, nicht untereinander.
Zweizeilig brauchte die Marke 28 Pixel Höhe, und der schwächste Tag lag
damit auf der Datumsachse — im Bild stand „03.09." zweimal übereinander.
Einzeilig passt beides und liest sich schneller. */
.awvlb { display: inline-flex; align-items: baseline; gap: 6px; }
.awvlb b { font-size: 12px; font-weight: 600; color: var(--n-text); }
.awvlb i { font-style: normal; font-size: 10px; color: var(--n-sehrleise); }
/* Der schwächste Tag steht UNTER seinem Punkt: oben stünde er sonst in der
Fläche und die Beschriftung des besten Tages läge womöglich darüber. */
.awvlb.tief { transform: translate(-50%, 0); margin-top: 8px; }
/* Am Rand würde eine mittige Beschriftung aus dem Bild laufen — die Klasse
kommt aus dem Zeichner, der die Lage kennt. Ein Selektor auf den
`style`-Text hätte es nicht getan: Dort steht „left:100.00%", nicht
„left:100". */
.awvlb.links { transform: translate(0, -100%); text-align: left; }
.awvlb.rechts { transform: translate(-100%, -100%); text-align: right; }
.awvlb.tief.links { transform: translate(0, 0); }
.awvlb.tief.rechts { transform: translate(-100%, 0); }
.awvlx {
display: flex; justify-content: space-between; margin-bottom: -6px;
font-family: var(--mono); font-size: 10.5px; color: var(--n-sehrleise);
border-top: 1px solid var(--k-linie); padding-top: 5px; margin-top: 2px;
}
/* ── Der Umsatzverlauf auf dem Telefon (08.09.2026) ──────────────────────
Gemeldet: „Ich möchte auch den Umsatzverlauf gut ablesen können.
Optimiere die Ansicht und Bedienbarkeit."
Im Bild bei 390 px stand die Kurve 118 px hoch, und über ihr lagen drei
Beschriftungen: der beste Tag mit Datum, der schwächste mit Datum, dazu
die Ø-Linie mit „je Öffnungstag". Auf 350 px Breite überlagerten sie
einander und die Kurve gleich mit.
Vier Änderungen, alle in dieselbe Richtung — der Kurve Platz geben:
1. HÖHER (170 statt 118 px). Eine Kurve über dreißig Tage braucht
Ausschlag, sonst ist sie ein Strich.
2. Die Marken für Höchst- und Tiefstwert tragen nur noch den BETRAG.
Das Datum steht im Zeigerfeld, sobald man den Punkt berührt — dort
stört es niemanden.
3. Die Ø-Linie steht LINKS und kurz („Ø 7.709 €"), nicht rechts mit
Zusatz: Rechts endet die Kurve, dort ist die Beschriftung am
meisten im Weg.
4. Die Achsenbeschriftung unten zeigt nur noch Anfang und Ende. */
@media (max-width: 900px) {
.awvl { padding: 26px 0 22px; }
.awvl .awkurve { height: 170px !important; }
.awvlmarken { top: 26px; height: 170px; }
.awvltreffer, .awvlzeiger { top: 26px !important; height: 170px !important; }
.awvlb b { font-size: 11px; }
/* Das Datum an den Extrempunkten entfällt — es steht im Zeigerfeld. */
.awvlb i { display: none; }
.awvlschnitt {
font-size: 10px;
left: 0 !important; right: auto !important;
transform: translateY(-100%) !important;
padding: 0 4px 1px 0;
}
/* Die festen Tageswerte (bis zwölf Punkte) werden auf dem Telefon zu
dicht — dort führt der Zeiger, nicht die Beschriftung. */
.awvlfest { display: none; }
.awvlx span:nth-child(2) { display: none; }
}
/* ── Die Legende des Verlaufs ────────────────────────────────────────────
Am 07.09.2026 gefragt: „Was bedeutet der graue Kasten?" Eine Frage nach
der Bedeutung ist der Beweis, dass das Zeichen gescheitert ist. Es war
die Wochenendmarkierung — und die gestrichelte Linie daneben der
Vergleichszeitraum, ebenfalls unerklärt.
Jetzt trägt jedes Zeichen seinen Namen, in derselben Form, in der es im
Bild erscheint: der Streifen als Fläche, die Vergleichslinie gestrichelt,
der Durchschnitt als Strichlinie. */
.awlegende {
display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
font-size: 11px; color: var(--n-sehrleise); white-space: nowrap;
}
/* Jeder Legendeneintrag trägt seine Erklärung im `title` — dezent, wie
gewünscht: sichtbar ist nur das Wort, die Begründung kommt beim
Verweilen. Der gestrichelte Unterstrich sagt, dass da etwas zu holen ist. */
.lgp {
display: inline-flex; align-items: center; gap: 5px; margin-left: 10px;
border-bottom: 1px dotted var(--k-linie-stark); cursor: help;
}
.lgp:first-child { margin-left: 0; }
.awlegende i { display: inline-block; flex: none; }
.lgwe { width: 11px; height: 11px; background: rgba(20,28,40,.10); border-radius: 2px;
vertical-align: -1px; }
.lgvgl { width: 15px; height: 0; border-top: 1.2px dashed var(--n-sehrleise); }
/* Die Feiertagsmarke: ein Strich am oberen Rand, in der Akzentfarbe. Nicht
rot — Rot heisst in dieser Oberflaeche „Fehler". */
.lgfeier { width: 2px; height: 11px; background: var(--n-akzent); vertical-align: -2px; }
.lgschnitt { width: 15px; height: 0; border-top: 1px dashed var(--n-sehrleise); opacity: .6; }
:root[data-theme="dunkel"] .lgwe { background: rgba(255,255,255,.10); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="hell"]) .lgwe { background: rgba(255,255,255,.10); }
}
/* Die Kopfzeile trägt jetzt drei Dinge — sie braucht die volle Breite. */
.awverlauf h4 { display: flex; align-items: baseline; gap: 9px; width: 100%; }
@media (max-width: 900px) {
/* Auf dem Telefon passt die Legende nicht neben den Titel. Sie rückt in
eine eigene Zeile darunter, statt den Titel zu kürzen. */
.awverlauf h4 { flex-wrap: wrap; }
.awlegende { margin-left: 0; flex-basis: 100%; margin-top: 4px; }
}
/* ── Werte je Tag ────────────────────────────────────────────────────────
Gefordert: die Umsätze JEDES Tages, nicht nur der beiden Ausreißer.
Dreißig Zahlen fest über eine Kurve zu schreiben macht sie unlesbar —
deshalb zwei Wege, je nach Anzahl. */
/* Bis zwölf Punkte steht jeder Wert fest da. Bei einer Woche ist Platz, und
dann will man die Zahlen ohne Zutun sehen. */
.awvlfest {
position: absolute; transform: translate(-50%, -100%); margin-top: -8px;
/* Am Rand nach innen, sonst steht die Hälfte außerhalb. */
font-family: var(--mono); font-size: 10.5px; color: var(--n-leise);
white-space: nowrap; pointer-events: none;
}
.awvlfest.links { transform: translate(0, -100%); }
.awvlfest.rechts { transform: translate(-100%, -100%); }
/* Die Trefferflächen: unsichtbare Streifen über die ganze Höhe. Ein acht
Pixel breiter Punkt wäre mit dem Finger nicht zu treffen. */
.awvltreffer { position: absolute; left: 0; right: 0; top: 22px; height: 150px; }
.awvltr {
position: absolute; top: 0; bottom: 0; width: 26px;
transform: translateX(-50%); cursor: crosshair;
}
/* Der Zeiger: senkrechte Linie, Kugel auf der Kurve, Feld mit Betrag. */
.awvlzeiger {
position: absolute; top: 22px; height: 150px; width: 0;
pointer-events: none; z-index: 2;
}
.awvlzeiger[hidden] { display: none; }
/* NUR das direkte Kind ist die senkrechte Linie.
Ohne den Kindselektor traf diese Regel jedes IM Zeiger — und im
Zeiger steckt auch das Feld. Am 08.09.2026 bekam die neue Wetterzeile
(``) dadurch `position:absolute` und `width:1px`: Sie
lag als 1 Pixel breiter Streifen über dem Betrag, und im Bild sah es aus,
als überlagerten sich Umsatz und Wetter. Genau die Sorte Fehler, die im
Quelltext beider Dateien richtig aussieht. */
.awvlzeiger > i {
position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
background: var(--n-akzent); opacity: .45;
}
.awvlkugel {
position: absolute; left: 0; width: 9px; height: 9px; border-radius: 50%;
transform: translate(-50%, -50%);
background: var(--n-akzent); box-shadow: 0 0 0 2.5px var(--k-flaeche);
}
/* Das Zeigerfeld (08.09.2026 überarbeitet).
Gemeldet: „Die Wetterdaten und die Summe überlagern sich in der Kachel."
Zwei Ursachen, beide erst im Bild zu sehen:
1. Es hing an `top: -6px` und wuchs von dort nach OBEN aus der Grafik
heraus — mitten in die Kopfzeile mit der Legende und über die feste
Beschriftung des Höchsttags. Mit zwei Zeilen fiel das kaum auf, mit der
dritten (Wetter) lagen drei Texte übereinander.
2. Es hatte keinen z-index, stand also je nach Reihenfolge unter den
Marken.
Jetzt hängt es INNERHALB der Grafik am oberen Rand und weicht nach unten
aus, wenn der Punkt selbst dort oben liegt (Klasse `unten`, gesetzt in der
Verdrahtung). Damit verdeckt es nie den Wert, um den es geht. */
.awvlfeld {
position: absolute; top: 3px; left: 0; transform: translate(-50%, 0);
background: var(--k-nacht); color: #fff; border-radius: 5px;
padding: 6px 10px; font-family: var(--mono);
box-shadow: 0 6px 18px rgba(0,17,44,.28);
z-index: 7; pointer-events: none;
}
.awvlfeld.links { transform: translate(-8px, 0); }
.awvlfeld.rechts { transform: translate(calc(-100% + 8px), 0); }
/* Liegt der Punkt oben, klappt das Feld an den unteren Rand. */
.awvlfeld.unten { top: auto; bottom: 3px; }
.awvlfeld.unten.links { transform: translate(-8px, 0); }
.awvlfeld.unten.rechts { transform: translate(calc(-100% + 8px), 0); }
.awvlfeld b { display: block; font-size: 12.5px; font-weight: 600; }
.awvlfeld em { font-style: normal; font-size: 10.5px; opacity: .72; }
@media (max-width: 900px) {
/* Auf dem Telefon reicht die Trefferfläche über die ganze Kurve — eine
Fingerkuppe ist elf Millimeter breit, ein Balken elf Pixel. */
.awvltreffer, .awvlzeiger { top: 14px; height: 150px; }
.awvlfest { font-size: 9.5px; }
}
/* ── Ruhetage ────────────────────────────────────────────────────────────
Ein Wert von null und ein Wert von 200 EUR sehen in einer geglätteten
Kurve fast gleich aus — beanstandet am 07.09.2026: „die Linie ist da so
leicht höher". Der Strich auf der Grundlinie sagt „hier war zu" und nicht
„hier war wenig los". */
.awzu {
stroke: var(--n-sehrleise); stroke-width: 2;
vector-effect: non-scaling-stroke; opacity: .75;
}
.lgzu {
width: 2px; height: 11px; background: var(--n-sehrleise);
opacity: .75; vertical-align: -2px;
}
/* Die Ø-Beschriftung trägt jetzt zwei Angaben und wird länger — sie braucht
den Platz, bevor der letzte Tageswert ihn nimmt. */
.awvlschnitt { max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
/* Bei wenigen Tagen steht über einem Ruhetag „geschlossen" statt „0,00 €".
Die Null ist richtig und sagt trotzdem weniger: Sie könnte ein Tag mit
lauter Stornos sein. */
.awvlfest.zu { color: var(--n-sehrleise); font-style: italic; }
/* ══ Vorschau: Prognose, Güte, Formel (08.09.2026) ═══════════════════════
Drei Ebenen wie in der Übersicht — Band, Tabelle, Erklärung. Die
Erklärung ist hier kein Beiwerk: Eine Formel, die sich bei jedem Aufruf
selbst neu wählt, muss zeigen, was sie gewählt hat. */
.vsband {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
border-bottom: 1px solid var(--k-linie);
margin: 0 -26px;
}
.vsband .vsk {
padding: 15px 26px 14px;
border-right: 1px solid var(--k-linie);
display: flex; flex-direction: column; gap: 2px;
}
.vsband .vsk:last-child { border-right: 0; }
.vsband .vsl { color: var(--n-sehrleise); font-size: 11.5px; }
.vsband strong {
font-family: var(--mono); font-size: 23px; font-weight: 600;
letter-spacing: -.02em; color: var(--n-text); margin-top: 2px;
}
.vsband .gross strong { font-size: 28px; }
.vssp { color: var(--n-leise); font-size: 11.5px; margin-top: 2px; }
.vssp em { font-style: normal; color: var(--n-sehrleise); }
.vstab { margin-top: 0; }
.vstab .btzeile.vsruhe { opacity: .55; }
.vsum { font-size: 11.5px; }
.vsfeier { color: var(--n-akzent); font-weight: 600; }
.vsohne { font-style: normal; color: var(--n-sehrleise); }
.vsformel {
border-top: 1px solid var(--k-linie);
margin: 0 -26px; padding: 16px 26px 20px;
}
.vsformel h4 { display: flex; align-items: baseline; gap: 9px; margin: 0 0 6px; }
.vsvf { margin: 0 0 10px; color: var(--n-text); font-size: 12.5px; }
.vsmk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.vsmkt { color: var(--n-sehrleise); font-size: 11.5px; margin-right: 2px; }
/* Die gefundenen Einflüsse als Marken, nach Herkunft unterschieden — man
soll sehen, ob ein Fund aus dem Warenangebot, dem Wetter oder dem
Kalender kommt, ohne es zu lesen. */
.vsm {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px; border-radius: 999px; font-size: 11.5px;
border: 1px solid var(--k-linie-stark); cursor: help;
}
.vsm::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--n-sehrleise);
}
.vsm.artikel::before { background: var(--n-akzent); }
.vsm.wetter::before { background: #7fc4f2; }
.vsm.kalender::before { background: #ffc861; }
.vsdet { margin-top: 8px; }
.vsdet summary {
cursor: pointer; color: var(--n-akzent); font-size: 12px;
padding: 3px 0; list-style: none;
}
.vsdet summary::-webkit-details-marker { display: none; }
.vsdet summary::before { content: "› "; display: inline-block; transition: transform .15s; }
.vsdet[open] summary::before { content: "⌄ "; }
.vsverw { margin: 6px 0 0; padding-left: 16px; font-size: 11.5px; color: var(--n-leise); }
.vsverw li { margin-bottom: 3px; }
.vsverw b { color: var(--n-text); font-weight: 600; }
.vsvar { width: 100%; margin-top: 6px; font-size: 11.5px; border-collapse: collapse; }
.vsvar td { padding: 3px 0; color: var(--n-leise); }
.vsvar td.btr { font-family: var(--mono); text-align: right; color: var(--n-text); }
.vsformel .sub { color: var(--n-sehrleise); font-size: 11.5px; margin: 8px 0 0; }
@media (max-width: 900px) {
.vsband {
grid-auto-flow: row; grid-template-columns: 1fr 1fr;
margin: 0 -14px;
}
.vsband .vsk { padding: 12px 14px 11px; border-bottom: 1px solid var(--k-linie); }
.vsband .vsk:nth-child(2n) { border-right: 0; }
.vsband .gross { grid-column: 1 / -1; }
.vsband strong { font-size: 19px; }
.vsband .gross strong { font-size: 24px; }
.vsformel { margin: 0 -14px; padding: 14px 14px 18px; }
}
/* Die Deutung — sichtbar getrennt von den gerechneten Zahlen darüber.
Wer eine Zahl liest, soll wissen, ob sie gemessen oder formuliert ist. */
.vsdeutung {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin: 0 -26px; padding: 14px 26px 18px;
border-top: 1px solid var(--k-linie);
}
.vsdt p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.55; color: var(--n-text); }
.vsdt b { font-weight: 600; }
.vsdt .sub { color: var(--n-sehrleise); font-size: 11.5px; }
@media (max-width: 900px) { .vsdeutung { margin: 0 -14px; padding: 12px 14px 16px; } }
/* Die Kurve nimmt das Wischen selbst entgegen (der Zeiger folgt dem Finger),
also darf der Browser daraus kein Scrollen machen. Senkrechtes Scrollen
bleibt möglich: `pan-y` gibt genau das frei. */
.awvltreffer { touch-action: pan-y; }
@media (max-width: 900px) { .awvlszus { display: none; } }
/* Die Randmarken brauchen Luft zur Kante. Ohne sie klebt „2.790,27 €" am
Bildschirmrand und sieht abgeschnitten aus, obwohl nichts fehlt. */
.awvlb.rechts { transform: translate(calc(-100% - 7px), -100%); }
.awvlb.tief.rechts { transform: translate(calc(-100% - 7px), 0); }
.awvlb.links { transform: translate(7px, -100%); }
.awvlb.tief.links { transform: translate(7px, 0); }
/* Der Balken in der Prognosetabelle darf den Betrag nicht überlaufen.
Im Bild stand „11.808,18 €" weiß auf blauem Balken — lesbar nur mit
Mühe, und beim schwächsten Tag lag der Betrag halb daneben. Der Balken
endet jetzt vor der Zahl: Er hat eine eigene Spalte, die Zahl auch.
Damit vergleicht man Längen UND liest Werte, statt beides halb. */
.vstab .btwert {
display: grid !important; grid-template-columns: 1fr auto;
align-items: center; gap: 10px;
}
.vstab .btwert i {
position: static !important; height: 8px; border-radius: 999px;
background: var(--n-akzent) !important; opacity: .30;
justify-self: end;
}
.vstab .btwert b {
font-family: var(--mono); font-weight: 600;
min-width: 92px; text-align: right;
}
/* Die Wettersymbole in der Umstände-Spalte sitzen in der Textzeile. */
.vsum .awwlage { width: 14px; height: 14px; vertical-align: -3px; margin-right: 3px; }
.vsum .awwlage .wo { fill: var(--n-leise); }
/* Der Vergleichstag als eigener Block: Beschriftung, Betrag, Wetter — jedes
auf seiner Zeile. Leiser gesetzt als der aktuelle Tag, damit man die
beiden Beträge nicht verwechselt. */
.awvlfeld .awvlvgl {
display: flex; flex-direction: column; gap: 1px;
margin-top: 5px; padding-top: 5px;
border-top: 1px solid rgba(255,255,255,.14);
opacity: .68;
}
.awvlfeld .awvlvgl[hidden] { display: none; }
.awvlfeld .vgt {
font-style: normal; font-size: 9.5px; letter-spacing: .06em;
text-transform: uppercase; opacity: .75;
}
.awvlfeld .vgw { font-size: 12px; font-weight: 600; }
.awvlfeld .vgwetter {
display: flex; align-items: center; gap: 6px;
font-size: 10.5px; margin-top: 1px;
}
.awvlfeld .vgwetter[hidden] { display: none; }
@media (max-width: 900px) {
/* Die Prognosetabelle auf dem Telefon: Tag und Umstände untereinander in
einer Spalte, der Betrag rechts daneben.
Als drei nebeneinanderliegende Spalten (Tag · Umstände · erwartet) blieb
dem Betrag zu wenig Platz — im Bild stand dort „6." und „11.". Ein
abgeschnittener Betrag ist schlimmer als ein umbrochener: Man sieht ihm
nicht an, dass etwas fehlt. */
/* Die Zeile hielt sich nicht an ihren Container: gemessen 420 px breit in
einer 336 px breiten Tabelle, der Rest wurde von `overflow: hidden`
abgeschnitten — deshalb stand dort „6." statt „6.675,15 €". Ursache ist
die Standardbreite eines Grid-Containers, der seine Spalten aus dem
Inhalt bildet; `width: 100%` mit `border-box` bindet ihn an die Tabelle. */
/* Die Basistabelle bekommt auf dem Telefon `min-width: 420px` und scrollt
seitwärts — richtig für die Betriebstabellen mit vier Spalten, falsch
hier: Diese Zeile ist gestapelt und braucht nur die Bildschirmbreite.
Ohne diese Aufhebung stand die Zeile 420 px breit in einem 336 px
breiten Kasten, und der Betrag lag hinter dessen Rand — im Bild „6."
statt „6.675,15 €". Gemessen, nicht vermutet: Die Elternkette zeigte
`min-width: 420px` an der Zeile. */
.vstab { width: 100%; box-sizing: border-box; overflow-x: visible; }
.vstab .btzeile, .vstab .btkopf {
min-width: 0 !important;
width: 100%; max-width: 100%; box-sizing: border-box;
}
.vstab .btkopf { display: none; }
.vstab .btzeile {
/* `max-content` statt `auto`: Die Wertspalte bekommt genau so viel Platz,
wie der Betrag braucht — bei `auto` teilte sie ihn mit der ersten
Spalte und im Bild stand dort „6." statt „6.675,15 €". Dazu muss das
`overflow: hidden` aus der Basistabelle weichen, das den Rest
wegschnitt, ohne dass man es der Zahl ansah. */
grid-template-columns: minmax(0, 1fr) max-content !important;
align-items: center; row-gap: 2px; padding: 9px 14px !important;
}
.vstab .btzeile > span:first-child { grid-column: 1; }
.vstab .btzeile > .vsum {
grid-column: 1; grid-row: 2; font-size: 11px;
}
.vstab .btzeile > .btwert {
grid-column: 2; grid-row: 1 / span 2;
}
/* Der Balken entfällt mobil — bei 120 px Restbreite trägt er nichts bei,
und die Zahl braucht den Platz. */
.vstab .btwert i { display: none; }
.vstab .btwert {
grid-template-columns: max-content !important;
overflow: visible !important; white-space: nowrap;
}
.vstab .btwert b { min-width: 0; }
}
/* ── Die Register auf schmalen Schirmen (08.09.2026) ─────────────────────
Gemeldet aus der PWA: „Das seitliche Scrollen in der PWA ist nicht schön."
Von fünf Registern waren drei zu sehen; der Rest lag hinter dem Rand.
Drei Änderungen, damit alle fünf in eine Zeile passen: der Kurzname statt
des langen, engere Abstände und Innenabstände, die sich an der Breite
ausrichten. Gescrollt wird nicht mehr — was man wegschieben muss, findet
man nicht. */
.rkurz { display: none; }
@media (max-width: 900px) {
.rlang { display: none; }
.rkurz { display: inline; }
.reiterbar .awsreiter, .awsreiter {
padding: 0 10px !important;
gap: 0 6px !important;
}
/*
* DIE KNÖPFE SITZEN IN `.awsreitliste`, nicht direkt im Container — an
* dieser Ebene lag der erste Fehlversuch: Die Verteilung wurde auf
* `.awsreiter` gesetzt und traf damit nur zwei Kinder (Liste und
* Vergleichswähler), während die Register in der Liste weiter scrollten.
*
* `marke.css` gibt der Liste mobil `overflow-x: auto` samt Abblendung am
* Rand — ein sauberer Weg, solange die Namen lang sind. Mit den Kurznamen
* passen alle fünf hinein; dann ist Scrollen kein Zugeständnis mehr,
* sondern nur noch ein verstecktes Register.
*/
.awsreitliste {
flex: 1 1 100% !important;
display: flex !important;
justify-content: space-between !important;
gap: 0 !important;
overflow-x: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
.reiterbar .awsreit, .awsreit {
font-size: 13px !important;
padding: 12px 6px !important;
flex: 1 1 auto !important; text-align: center;
white-space: nowrap;
}
}
/* Ganz schmal (kleine Telefone im Hochformat): eine Stufe kleiner, statt
die letzte Beschriftung abzuschneiden. */
/* Ganz schmal: Der letzte Registername stand sonst halb am Rand. Gemessen
an einem 390-px-Gerät — „Steuerung" ist das längste der fünf. */
/* Ganz schmal: Der letzte Registername stand sonst halb am Rand. Gemessen
an einem 390-px-Gerät — „Steuerung" ist das längste der fünf. */
@media (max-width: 430px) {
.reiterbar .awsreiter, .awsreiter { padding: 0 6px !important; }
.reiterbar .awsreit, .awsreit {
font-size: 12px !important; padding: 12px 3px !important;
letter-spacing: -.01em !important;
}
}
/* Der Hinweis über einem Zeitraum ohne Daten. Kein Fehlerrot: Es ist kein
Fehler, dass die Zukunft noch leer ist. */
.awsleerband {
margin: 0 -26px; padding: 13px 26px;
border-bottom: 1px solid var(--k-linie);
background: var(--k-flaeche2, var(--k-flaeche));
font-size: 12.5px; color: var(--n-leise); line-height: 1.5;
}
.awsleerband b { color: var(--n-text); font-weight: 600; }
.awsleerband em { font-style: normal; color: var(--n-akzent); }
.awsleerband.leise { font-size: 11.5px; color: var(--n-sehrleise); padding: 9px 26px; }
@media (max-width: 900px) {
.awsleerband { margin: 0 -14px; padding: 12px 14px; }
.awsleerband.leise { padding: 9px 14px; }
}
/* „freiwillig" neben einem Feldnamen — kleiner als das Etikett, damit es
nicht wie ein zweites Etikett aussieht. */
.mdopt {
display: inline-block; margin-left: 7px; padding: 1px 7px;
border-radius: 999px; background: var(--k-linie);
color: var(--n-sehrleise); font-size: 10.5px; font-weight: 500;
letter-spacing: .02em; vertical-align: 1px;
}
/* Der Löschknopf in den Zugängen — als einziger in Rot, und erst beim
Darüberfahren gefüllt. Sichtbar gefährlich, aber nicht laut: Er steht in
jeder Zeile, und drei rote Knöpfe untereinander lesen sich wie eine Warnung,
die keine ist. */
.zgbtn.gefahr {
color: var(--n-ab) !important;
border-color: color-mix(in srgb, var(--n-ab) 35%, var(--k-linie-stark)) !important;
}
.zgbtn.gefahr:hover {
background: var(--n-ab-leise) !important;
border-color: var(--n-ab) !important;
}
/* Der Warnkasten im Löschdialog. */
.hint.warnung {
border-left: 3px solid var(--n-ab);
padding-left: 10px; color: var(--n-text);
}
/* ══ Kompakter (09.09.2026) ════════════════════════════════════════════════
*
* Verlangt: „Bitte etwas kompakter." Anlass war die Übersicht mit fünf
* Kennzahlenreihen — 27 Kacheln, die zusammen mehr als eine Bildschirmhöhe
* einnahmen. Wer scrollen muss, um die Zusammensetzung des Umsatzes zu sehen,
* sieht sie nicht.
*
* Der grösste Gewinn steckt NICHT in kleinerer Schrift, sondern in einer
* Zeile weniger je Kachel: Label, Wert und Vergleichspille standen
* untereinander. Wert und Pille gehören nebeneinander — sie sagen dasselbe
* über dieselbe Zahl, und die Pille ist ohnehin kleiner gesetzt.
*
* vorher Label / Wert / Pille drei Zeilen, ~74 px
* jetzt Label / Wert · Pille zwei Zeilen, ~52 px
*
* Bei vier Reihen sind das rund 90 px — eine ganze Kennzahlenreihe.
*/
.awband.zweite > .awk {
display: grid !important;
grid-template-columns: auto auto;
align-items: baseline;
justify-content: start;
column-gap: 8px; row-gap: 0 !important;
padding: 8px 18px 7px !important;
}
/* Die Beschriftung steht über beidem und darf die volle Breite nehmen. */
.awband.zweite .awl { grid-column: 1 / -1; font-size: 10.5px !important; }
.awband.zweite .awv, .awband.zweite .awv1,
.awband.zweite .awv2, .awband.zweite .awv3 { font-size: 16px !important; }
/* Lange Werte („13.504,91 €") dürfen die Pille in die nächste Zeile
schieben, statt aus der Kachel zu laufen. */
.awband.zweite .awv.sehrlang { grid-column: 1 / -1; }
/* Die erste Reihe bleibt die grösste — nur enger gesetzt. */
.awband > .awk { padding: 11px 22px 10px !important; gap: 2px; }
.awband .awgrossw { font-size: 23px !important; }
.awband .awunter { margin-top: 2px !important; }
/* Die Farblegende darunter trägt viel Text und wenig Gewicht. */
.awfarblegende { padding: 6px 18px !important; font-size: 10.5px !important; }
@media (max-width: 900px) {
/* Auf dem Telefon zählt jede Zeile doppelt. */
.awband.zweite > .awk { padding: 7px 12px 6px !important; }
.awband > .awk { padding: 9px 14px 8px !important; }
}
/* ── Gleich breite Kacheln, nichts wird abgeschnitten (09.09.2026) ────────
*
* Gemeldet: „So sind einige Kacheln halb leer, andere werden abgeschnitten."
* Beides kam aus derselben Regel: `grid-auto-flow: column` teilt die Breite
* durch die Anzahl. Vier Kacheln bekamen je 475 px und standen halb leer da,
* neun bekamen 211 px — und „13.504,91 € ↓ 45,7 %" passte nicht mehr, die
* Pille wurde abgeschnitten.
*
* Jetzt bestimmt nicht die Anzahl die Breite, sondern die Breite die Anzahl:
* Jede Kachel ist zwischen 190 und 300 px breit, egal in welcher Reihe sie
* steht. Reihen mit wenigen Kacheln enden früher, statt ihre Kacheln
* aufzublähen — und die Kacheln sehen über alle Reihen hinweg gleich aus.
*
* Und in der Kachel selbst darf umbrochen werden: Passt die Pille nicht mehr
* neben den Wert, rutscht sie darunter. Das regelt sich von selbst und ist
* verlässlicher als eine Schwelle nach Zeichenzahl — „13.504,91 €" hat elf
* Zeichen und galt damit als kurz genug, war es aber nicht.
*/
.awband.zweite {
/* Raster mit `auto-fill`, nicht `flex`: Bei flex streckt die letzte Zeile
ihre wenigen Kacheln auf, und dieselbe Kennzahl ist dann in Zeile 1
schmal und in Zeile 3 breit. Ein Raster hält alle Spalten gleich — die
letzte Zeile endet einfach früher. */
display: grid !important;
/* `grid-auto-flow` MUSS zurückgesetzt werden: Die Grundregel von `.awband`
stellt sie auf `column`, und dann füllt das Raster Spalte für Spalte in
EINE Zeile — 23 Kacheln wurden auf 80 px gequetscht, die letzten beiden
zeigten nur noch „44." und „20.". Ein `grid-template-columns` allein
ändert daran nichts. */
grid-auto-flow: row !important;
grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.awband.zweite > .awk {
box-sizing: border-box;
min-width: 0;
min-width: 0;
overflow: visible !important;
/* Zurück auf Fluss statt Raster: Wert und Pille sollen umbrechen dürfen. */
display: flex !important;
flex-direction: row; flex-wrap: wrap;
align-items: baseline;
column-gap: 7px; row-gap: 0;
}
.awband.zweite .awl { flex: 0 0 100%; }
.awband.zweite .awv, .awband.zweite .awv1,
.awband.zweite .awv2, .awband.zweite .awv3 { white-space: nowrap; }
.awband.zweite .awpille { white-space: nowrap; }
/* Die erste Reihe trägt vier grosse Werte und bleibt bei gleichen Spalten —
dort ist die Breite Absicht, nicht Rest. */