/* ---------------------------------------------------------------------------
Abo-Tracker – Design
Handgeschrieben, ohne Framework: läuft auch ohne Internetverbindung.
Aufbau: Ganz oben stehen alle Farben als "Variablen" – das sind Namen für
Farbwerte. Weiter unten wird immer nur der Name benutzt, nie die Farbe
selbst. Dadurch reicht es, für den Dunkelmodus einmal die Namen neu zu
belegen – der Rest der Datei bleibt unverändert.
--------------------------------------------------------------------------- */
/* --------------------------------------------------- Farben: Heller Modus -- */
:root {
color-scheme: light;
--bg: #f4f5f8;
--surface: #ffffff;
--text: #151824;
--muted: #6b7180;
--line: #e5e7ec;
/* Für SENKRECHTE Trenner. Bewusst kräftiger als --line: Eine waagerechte
Linie geht über die volle Breite und wird deshalb auch ganz zart noch
wahrgenommen. Eine senkrechte ist nur ein paar Zeilen hoch - in derselben
Farbe verschwindet sie einfach. Nachgesehen an der Spaltentrennung im
Steuerkasten, dort war sie mit --line schlicht nicht zu sehen. */
--line-senkrecht: #d3d7e1;
--accent: #1a63ad;
--accent-hover: #14528f;
--verlauf: linear-gradient(135deg, #17518f 0%, #1d6bab 55%, #2483c4 100%);
--leise-hover: #f1f2f6; /* Hintergrund, wenn man über einen Knopf fährt */
--eingabe-bg: #ffffff;
--label-text: #3c414f;
--badge-bg: #eef0f5;
--badge-text: #4a5060;
--fehler-bg: #fdeced;
--fehler-line: #f6c9cc;
--fehler-text: #9d2933;
--info-bg: #eaf6ef;
--info-line: #bfe3cd;
--info-text: #12603a;
--gefahr: #d13b3b;
--gefahr-hover: #fdeaea;
--gelb: #b7791f;
--balken-bg: #eef0f5;
--code-bg: #ffffff;
/* Einfarbiger Schein in der Karte mit der Gesamtsumme. */
--glow: rgba(26, 99, 173, .10);
--radius: 16px;
--schatten: 0 1px 2px rgba(20, 22, 35, .04), 0 4px 16px rgba(20, 22, 35, .06);
--schatten-hoch: 0 2px 4px rgba(20, 22, 35, .05), 0 10px 26px rgba(20, 22, 35, .09);
}
/* -------------------------------------------------- Farben: Dunkler Modus -- */
/* Greift, sobald am -Element data-theme="dark" steht. */
:root[data-theme="dark"] {
color-scheme: dark; /* damit auch Kalender & Auswahlfelder dunkel werden */
--bg: #101218;
--surface: #191c24;
--text: #e9ebf2;
--muted: #949aab;
--line: #282c37;
--line-senkrecht: #3c4353;
/* Im Dunkeln etwas heller, sonst waere Blau auf Schwarz kaum lesbar. */
--accent: #3f8fd6;
--accent-hover: #4f9ee2;
--leise-hover: #232733;
--eingabe-bg: #14171e;
--label-text: #c3c8d6;
--badge-bg: #262a35;
--badge-text: #b4bacb;
--fehler-bg: #2e1b1e;
--fehler-line: #4d2b30;
--fehler-text: #ffa8a8;
--info-bg: #16281f;
--info-line: #244633;
--info-text: #86dfb0;
--gefahr: #ff8f8f;
--gefahr-hover: #2e1b1e;
--gelb: #e0ad5a;
--balken-bg: #262a35;
--code-bg: #14171e;
/* Im Dunkeln darf der Schein kräftiger sein - er soll ja leuchten. */
--glow: rgba(63, 143, 214, .17);
--schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .35);
--schatten-hoch: 0 2px 4px rgba(0, 0, 0, .35), 0 10px 26px rgba(0, 0, 0, .45);
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
transition: background-color .2s ease, color .2s ease;
}
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.02em; }
a { color: var(--accent); }
/* ------------------------------------------------------------------ Kopf -- */
/* Ohne eigene Hintergrundfarbe - die Leiste geht nahtlos in die Seite über.
Deshalb auch nicht mehr am oberen Rand klebend: Beim Scrollen würde sonst
der Inhalt sichtbar dahinter durchlaufen. */
.kopf {
background: transparent;
}
.kopf-inhalt {
max-width: 960px;
margin: 0 auto;
padding: 26px 20px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.marke {
display: flex;
align-items: center;
gap: 9px;
font-weight: 700;
font-size: 17px;
color: var(--text);
text-decoration: none;
letter-spacing: -.02em;
white-space: nowrap;
}
/* Das Logo: geflügeltes Geld in feiner Linienführung, ohne Kasten drumherum.
Die Zeichnung kommt aus /logo.svg - der DÜNNEN der beiden Fassungen. Das
Tab-Symbol benutzt die kräftige (/icon.svg), weil feine Linien bei 16 px
zu einem Fleck verschmelzen. Bei 28 px hier ist das kein Thema.
Benutzt wird sie nur als SCHABLONE (mask): Der Browser nimmt daraus allein
die Form und füllt sie mit der Hintergrundfarbe.
Warum nicht einfach als Bild einbinden? Weil das Symbol dann seine eigene
Farbe mitbrächte - und die richtet sich nach der Einstellung des
Betriebssystems, nicht nach dem Hell-/Dunkel-Schalter der App. Beim
Umschalten in der App bliebe das Logo also stehen. Als Schablone folgt es
dagegen var(--accent) und wechselt mit.
-webkit-mask zusätzlich, weil Safari die Kurzform noch braucht.
--logo wird in views/partials/head.ejs gesetzt, damit die Versionsnummer
mit drinsteht. */
.marke-icon {
width: 28px;
height: 28px;
flex: none;
background: var(--accent);
-webkit-mask: var(--logo) center / contain no-repeat;
mask: var(--logo) center / contain no-repeat;
}
.kopf-links { display: flex; align-items: center; gap: 22px; min-width: 0; }
.kopf-nav { display: flex; gap: 16px; }
.kopf-nav a {
color: var(--muted);
text-decoration: none;
font-size: 14.5px;
font-weight: 550;
padding: 3px 0;
border-bottom: 2px solid transparent;
white-space: nowrap;
}
.kopf-nav a:hover { color: var(--text); }
/* Die aktuelle Seite bekommt einen Strich in der Akzentfarbe. */
.kopf-nav a.aktiv {
color: var(--text);
border-bottom-color: var(--accent);
}
.kopf-rechts { display: flex; align-items: center; gap: 10px; }
.kopf-mail { color: var(--muted); font-size: 14px; }
/* -------------------------------------------------------- Design-Schalter -- */
.design-schalter {
display: grid;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--line);
border-radius: 10px;
background: transparent;
color: var(--text);
font-size: 16px;
line-height: 1;
cursor: pointer;
transition: background-color .15s, border-color .15s;
}
.design-schalter:hover { background: var(--leise-hover); }
/* Es wird immer nur das Symbol gezeigt, wohin man wechseln WÜRDE:
im hellen Modus der Mond, im dunklen die Sonne. */
:root[data-theme="dark"] .icon-mond { display: none; }
:root:not([data-theme="dark"]) .icon-sonne { display: none; }
/* Auf den Anmeldeseiten gibt es keine Kopfzeile – dort schwebt der Schalter
oben rechts in der Ecke. */
.design-schalter-schwebend {
position: fixed;
top: 18px;
right: 18px;
z-index: 20;
background: var(--surface);
box-shadow: var(--schatten);
}
/* --------------------------------------------------------------- Struktur -- */
.seite {
max-width: 960px;
margin: 0 auto;
padding: 28px 20px 64px;
}
.mitte-seite {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
}
.karte {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--schatten);
}
/* ------------------------------------------------------------------ Hero -- */
/* Aufgebaut wie die übrigen Karten - nur mit einem einfarbigen Schein.
Der Schein liegt jetzt tief und breit, so als ginge das Licht vom Band am
unteren Rand aus. Früher saß er rechts hinter dem Kreisdiagramm, das es
nicht mehr gibt. Die Farbfläche liegt VOR der Kartenfarbe, deshalb steht
sie in der Aufzählung zuerst. */
.hero {
background:
radial-gradient(125% 85% at 50% 115%, var(--glow), transparent 68%),
var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--schatten);
/* Ringsum gleich viel Luft - ohne den Ring rechts gibt es keinen Grund
mehr, links mehr Platz zu lassen. */
padding: 30px 32px 28px;
margin-bottom: 22px;
}
/* ------------------------------------------------------------------ Band -- */
/*
Das Band hat das Kreisdiagramm abgelöst. Der Grund ist Geometrie, nicht
Geschmack:
Im Ring bekam jedes Stück runde Enden, und so ein rundes Ende ragt um die
halbe Ringstärke über das gezeichnete Stück hinaus - an beiden Enden
zusammen also um eine ganze Ringstärke, 13 von 364 Einheiten Umfang. Alles
unter 3,6 % hatte damit rechnerisch die Länge null: Übrig blieben nur die
zwei runden Enden, und die sahen aus wie ein Punkt. Bei rund 60 Einträgen
mit vielen Kleinposten betraf das die halbe Liste.
Das Band kennt dieses Problem nicht. Und das Beste daran: Es wird dafür
NICHTS gerechnet. Jedes Stück bekommt seinen Betrag als flex-grow, die
Breite verteilt der Browser selbst - proportional und immer exakt auf 100 %
aufgehend. Die ganze Sonderfall-Rechnerei von früher ist ersatzlos
entfallen.
*/
.hero-band-bereich { margin-top: 28px; }
/* Feste Höhe, damit beim Draufzeigen nichts springt. */
.band-info {
display: flex;
align-items: center;
gap: 9px;
height: 20px;
margin-bottom: 10px;
font-size: 13.5px;
color: var(--muted);
}
/* Im Ruhezustand ein leerer Umriss statt gar nichts - sonst wirkt die Lücke
links vom Text wie ein Darstellungsfehler. Beim Draufzeigen füllt das
Skript ihn mit der Farbe der Kategorie.
box-sizing: border-box gilt global, der Punkt bleibt also 10 px groß. */
.band-info-punkt {
width: 10px;
height: 10px;
border-radius: 50%;
flex: none;
border: 1.5px solid var(--line);
background: transparent;
transition: background-color .15s ease, border-color .15s ease;
}
.band-info-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-band {
display: flex;
gap: 2px;
height: 18px;
}
/* flex-grow steht als Betrag am Element (siehe Seitenvorlage).
min-width ist die Untergrenze: Ohne sie verschwände ein 0,1-%-Posten ganz -
genau der Fehler, den der Ring hatte. 5 px bleiben immer anklickbar. */
.band-stueck {
flex: 1 1 0;
min-width: 5px;
border-radius: 3px;
background: var(--kat-farbe);
cursor: pointer;
transition: filter .15s ease;
}
.band-stueck:hover { filter: brightness(1.25); }
.hero-label {
font-size: 13px;
text-transform: uppercase;
letter-spacing: .09em;
color: var(--muted);
margin-bottom: 6px;
}
.hero-summe {
font-size: clamp(38px, 8vw, 54px);
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.05;
color: var(--text);
}
.hero-zeile {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 26px;
margin-top: 18px;
font-size: 14px;
color: var(--muted);
}
.hero-zeile b { font-weight: 650; color: var(--text); }
.hero-pausiert {
margin-left: 6px;
padding: 2px 8px;
border-radius: 999px;
background: var(--badge-bg);
color: var(--badge-text);
font-size: 12.5px;
}
/* ---------------------------------------------------------------- Knöpfe -- */
.knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px 17px;
border: 1px solid transparent;
border-radius: 10px;
background: var(--accent);
color: #fff;
font: inherit;
font-size: 15px;
font-weight: 550;
cursor: pointer;
text-decoration: none;
transition: background .15s, border-color .15s, transform .05s;
}
.knopf:hover { background: var(--accent-hover); }
.knopf:active { transform: translateY(1px); }
.knopf-leise {
background: transparent;
border-color: var(--line);
color: var(--text);
}
.knopf-leise:hover { background: var(--leise-hover); }
.knopf-gefahr {
background: transparent;
border-color: transparent;
color: var(--gefahr);
padding: 10px 12px;
}
.knopf-gefahr:hover { background: var(--gefahr-hover); }
.knopf-klein { padding: 7px 12px; font-size: 14px; }
.knopf-voll { width: 100%; }
/* -------------------------------------------------------------- Formular -- */
.feld { margin-bottom: 15px; }
.feld label {
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 550;
color: var(--label-text);
}
.feld input,
.feld select {
width: 100%;
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--eingabe-bg);
font: inherit;
font-size: 15px;
color: var(--text);
}
.feld input:focus,
.feld select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(36, 131, 196, .22);
}
/* Eigener Pfeil für die Auswahlfelder.
Den eingebauten Pfeil zeichnet der Browser selbst, und zwar hart an den
rechten Rand - Innenabstand ignoriert er dabei komplett. Deshalb wird er
mit "appearance: none" abgeschaltet und durch ein eigenes Bild ersetzt,
das sich frei setzen lässt.
"right 13px center" heißt: 13 px vom rechten Rand, mittig in der Höhe -
also genau derselbe Abstand, den der Text links vom Rand hat.
Das Bild steckt als Zeichnung direkt in der Zeile (keine zusätzliche
Datei, kein Ladevorgang). %23 ist ein maskiertes #, sonst würde die
Farbangabe abgeschnitten. */
.feld select {
appearance: none;
-webkit-appearance: none;
/* 13 Rand + 12 Pfeil + 13 Luft: So läuft kein langer Eintrag unter den Pfeil. */
padding-right: 38px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: right 13px center;
background-size: 12px 8px;
}
/* Im Dunkeln der hellere Grauton, sonst verschwindet der Pfeil im Feld. */
:root[data-theme="dark"] .feld select {
background-image: url("data:image/svg+xml,");
}
.feld-reihe {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0 15px;
}
.feld-hinweis {
margin-top: 5px;
font-size: 13px;
color: var(--muted);
}
/* Die Felder für eine direkt im Formular angelegte Kategorie: Name und
Farbwähler nebeneinander. Der Name nimmt den Platz, der übrig bleibt. */
.neue-kategorie-reihe {
display: flex;
align-items: center;
gap: 10px;
}
/* min-width: 0 ist nötig, weil ".feld input" die Breite auf 100 % setzt -
ohne diese Zeile würde das Textfeld den Farbwähler aus der Reihe drängen. */
.neue-kategorie-reihe input[type="text"] { flex: 1; min-width: 0; }
/* ------------------------------------------------------------- Meldungen -- */
.meldung {
border-radius: 12px;
padding: 13px 16px;
margin-bottom: 18px;
font-size: 14.5px;
border: 1px solid;
}
.meldung ul { margin: 0; padding-left: 18px; }
.meldung-fehler {
background: var(--fehler-bg);
border-color: var(--fehler-line);
color: var(--fehler-text);
}
.meldung-info {
background: var(--info-bg);
border-color: var(--info-line);
color: var(--info-text);
}
/* --------------------------------------------------------- Neues Abo (+) -- */
.neu-box { margin-bottom: 26px; overflow: hidden; }
.neu-box > summary {
padding: 16px 20px;
cursor: pointer;
font-weight: 600;
list-style: none;
display: flex;
align-items: center;
gap: 9px;
user-select: none;
}
.neu-box > summary::-webkit-details-marker { display: none; }
/* Das Pluszeichen ist GEZEICHNET, nicht getippt: zwei weiße Balken, die sich
auf dem blauen Feld kreuzen.
Vorher stand hier das Schriftzeichen "+", und das saß 1,45 px zu tief -
Schriftarten richten ihre Zeichen an der Schriftlinie aus, nicht an der
Mitte des Kästchens. Einfach um 1,45 px nach oben zu schieben hätte nur auf
dem Mac gestimmt: Unter Windows ist die Schrift eine andere und der Versatz
damit auch. Gezeichnete Balken sitzen dagegen überall exakt mittig.
"linear-gradient(#fff, #fff)" heißt schlicht: eine weiße Fläche. Dahinter
steht jeweils Position und Größe, also "center / 10px 2px" für den
liegenden und "center / 2px 10px" für den stehenden Balken. */
.neu-box > summary::before {
content: "";
display: block;
width: 22px;
height: 22px;
flex: none;
border-radius: 7px;
background:
linear-gradient(#fff, #fff) center / 10px 2px no-repeat,
linear-gradient(#fff, #fff) center / 2px 10px no-repeat,
var(--accent);
transition: transform .18s;
}
.neu-box[open] > summary::before { transform: rotate(45deg); }
.neu-box[open] > summary { border-bottom: 1px solid var(--line); }
.neu-box-inhalt { padding: 20px; }
/* ----------------------------------------------------------------- Karten -- */
.abschnitt-titel {
font-size: 15px;
font-weight: 650;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 13px;
}
/* Titel links, Ansichts-Umschalter rechts - beide in einer Zeile. */
.listen-kopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 13px;
}
/* Der Titel bringt sonst seinen eigenen Abstand nach unten mit. Hier steht er
in einer Zeile mit dem Umschalter und braucht ihn deshalb nicht. */
.listen-kopf .abschnitt-titel { margin-bottom: 0; }
/* ------------------------------------------------------ Ansicht-Umschalter -- */
/* Zwei Knöpfe in einem gemeinsamen Rahmen. Hervorgehoben ist immer der,
dessen Ansicht man gerade sieht. */
.ansicht-schalter {
display: flex;
gap: 2px;
flex: none;
padding: 2px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
}
.ansicht-knopf {
display: grid;
place-items: center;
width: 32px;
height: 28px;
padding: 0;
border: none;
border-radius: 7px;
background: transparent;
color: var(--muted);
cursor: pointer;
transition: background-color .15s, color .15s;
}
.ansicht-knopf:hover { background: var(--leise-hover); color: var(--text); }
.ansicht-knopf.aktiv {
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent);
}
.ansicht-knopf:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(36, 131, 196, .35);
}
/* ----------------------------------------------------------- Filterleiste -- */
.filter-leiste {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 13px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--muted);
font: inherit;
font-size: 13.5px;
font-weight: 550;
cursor: pointer;
transition: background-color .15s, border-color .15s, color .15s;
}
.filter-chip:hover { background: var(--leise-hover); color: var(--text); }
.filter-chip:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(36, 131, 196, .35);
}
/* Der Knopf "Alle" gehört zu keiner Kategorie - er nutzt die Akzentfarbe. */
.filter-chip[data-kategorie=""] { --kat-farbe: var(--accent); }
/* Der gewählte Filter wird in der Farbe SEINER Kategorie eingefärbt. So sieht
man auf einen Blick, wonach gerade gefiltert wird. Gleiche Mischung wie bei
.badge-farbig, damit Markierung und Filter zusammenpassen. */
.filter-chip.aktiv {
background: color-mix(in srgb, var(--kat-farbe) 15%, transparent);
border-color: color-mix(in srgb, var(--kat-farbe) 40%, transparent);
color: var(--kat-farbe);
}
:root[data-theme="dark"] .filter-chip.aktiv {
background: color-mix(in srgb, var(--kat-farbe) 28%, transparent);
color: color-mix(in srgb, var(--kat-farbe) 45%, white);
}
.filter-anzahl { font-size: 12px; font-weight: 600; opacity: .6; }
/* ------------------------------------------------------------------ Liste -- */
/* Die 290 px sind gemessen, nicht geschätzt.
In der Kachelansicht stehen im Fuß "Bearbeiten", "Löschen" und rechts das
Datum bzw. der Schalter. Nachgemessen braucht das 235,4 px.
| Kachel | Platz innen | Ergebnis |
|--------|-------------|-----------------|
| 268 px | 230,0 px | 5,4 px zu wenig |
| 285 px | 247,0 px | 11,6 px Luft |
| 290 px | 252,0 px | 16,6 px Luft |
Bei den alten 268 px brach das Datum also in eine zweite Zeile um und die
Kachel wuchs von 49 auf 77 px. Es fiel nur selten auf, weil die Spalten
meist breiter ausfallen als das Minimum - erst auf einem schmaleren Fenster
kam das Minimum überhaupt zum Tragen.
Warum 290 und nicht 285: Andere Browser setzen dieselbe Schrift minimal
breiter, und 11,6 px sind davon schnell aufgebraucht. Drei Spalten gibt es
weiterhin (dafür reichen 900 px, die Seite ist innen 920 px breit). */
.abo-gitter {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 15px;
}
/* Vom Filter ausgeblendet.
Diese Regel ist nötig: .abo setzt weiter unten display:flex, und das würde
das eingebaute Verstecken des Browsers sonst überstimmen - die Kachel
bliebe trotz "hidden" sichtbar. */
.abo[hidden] { display: none; }
.abo {
padding: 18px;
display: flex;
flex-direction: column;
gap: 13px;
transition: box-shadow .15s, transform .15s;
}
.abo:hover {
transform: translateY(-2px);
box-shadow: var(--schatten-hoch);
}
.abo-kopf {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.abo-name {
font-size: 17px;
font-weight: 650;
letter-spacing: -.01em;
margin-bottom: 9px; /* Luft zur Kategorie-Markierung darunter */
/* Bricht nur um, wenn ein Wort allein nicht in die Zeile passt -
nicht mitten in "Tageszeitung". */
overflow-wrap: break-word;
word-break: normal;
}
.abo-preis { text-align: right; white-space: nowrap; }
.abo-preis b {
display: block;
font-size: 19px;
font-weight: 700;
letter-spacing: -.02em;
}
/* Jede Angabe auf eigener Zeile - sonst wird die Preisspalte so breit,
dass für den Namen daneben kaum noch Platz bleibt. */
.abo-preis small {
display: block;
color: var(--muted);
font-size: 12.5px;
}
.abo-fuss {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto; /* Fuß immer unten, auch bei langen Namen */
padding-top: 12px;
border-top: 1px solid var(--line);
font-size: 13.5px;
color: var(--muted);
}
.abo-aktionen { display: flex; gap: 2px; }
/* In den Karten treten die Knöpfe zurück: kein Rahmen, gedämpfte Schrift.
Erst beim Draufzeigen treten sie hervor - Löschen dann in Rot, damit die
Warnfarbe genau dann kommt, wenn man kurz davor ist.
Schmaler und eine Spur kleiner als ein normaler .knopf-klein. Das ist hier
kein Geschmack, sondern Platz: Zusammen mit dem Datum rechts daneben ist
der Kartenfuß die engste Stelle der ganzen App. Ohne Rahmen und Fläche
braucht ein Knopf ohnehin weniger Innenabstand, um noch antippbar zu
wirken - die Fläche zum Klicken bleibt über die Höhe erhalten. */
.abo-aktionen .knopf {
background: transparent;
border-color: transparent;
color: var(--muted);
font-weight: 500;
padding: 7px 8px;
font-size: 13.5px;
}
.abo-aktionen .knopf:hover {
background: var(--leise-hover);
color: var(--text);
}
.abo-aktionen .knopf-gefahr:hover {
background: var(--gefahr-hover);
color: var(--gefahr);
}
.badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 550;
background: var(--badge-bg);
color: var(--badge-text);
}
/* Kategorie mit eigener Farbe.
Die Farbe wählt der Nutzer selbst, sie kommt als --kat-farbe direkt aus der
Datenbank. Daraus wird beides berechnet: ein stark abgeschwächter
Hintergrund und die Schriftfarbe. Im Dunkelmodus wird die Schrift
aufgehellt, sonst wäre sie auf dunklem Grund kaum lesbar.
Die erste background-Zeile ist die Rückfalllösung für Browser, die
color-mix noch nicht kennen. */
.badge-farbig {
background: var(--badge-bg);
background: color-mix(in srgb, var(--kat-farbe) 15%, transparent);
color: var(--kat-farbe);
}
:root[data-theme="dark"] .badge-farbig {
background: color-mix(in srgb, var(--kat-farbe) 28%, transparent);
color: color-mix(in srgb, var(--kat-farbe) 45%, white);
}
/* ------------------------------------------------------------- Schalter -- */
/* Ein Kästchen zum Ankreuzen, das wie ein Schiebeschalter aussieht.
Das echte Kästchen wird unsichtbar gemacht, sichtbar ist nur die Bahn
daneben - die reagiert per CSS darauf, ob das Kästchen angehakt ist. */
.schalter-form {
display: flex;
align-items: center;
gap: 9px;
}
.schalter { display: inline-flex; cursor: pointer; }
.schalter input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* Umrandung statt gefüllter Fläche - passt zu den Eingabefeldern und
Kästen der Seite. Innen sitzt der eigentliche Schalter als Punkt. */
.schalter-bahn {
position: relative;
width: 38px;
height: 22px;
border-radius: 999px;
background: transparent;
border: 1px solid var(--line);
transition: border-color .18s ease, background-color .18s ease;
}
.schalter-bahn::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--muted);
transition: transform .18s ease, background-color .18s ease;
}
/* Eingeschaltet: Rahmen und Punkt in der Akzentfarbe, dazu ein Hauch
Fläche - kräftig genug zum Erkennen, ruhig genug fürs Gesamtbild. */
.schalter input:checked + .schalter-bahn {
border-color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 14%, transparent);
}
.schalter input:checked + .schalter-bahn::after {
background: var(--accent);
transform: translateX(16px);
}
.schalter input:focus-visible + .schalter-bahn {
box-shadow: 0 0 0 3px rgba(36, 131, 196, .35);
}
/* Pausierte Abos bleiben sichtbar, treten aber zurück. */
.abo-pausiert { opacity: .55; }
.abo-pausiert .abo-preis b { text-decoration: line-through; }
.abo-pausiert:hover { opacity: .8; }
/* --------------------------------------------------------- Ansicht: Zeilen -- */
/* Dieselben Einträge, nur anders angeordnet: statt eines Gitters mit Kacheln
liegen sie untereinander, jeder in einer einzigen Zeile.
Deshalb ändert sich hier ausschließlich das CSS - die Seitenvorlage ist für
beide Ansichten dieselbe und muss nicht doppelt gepflegt werden.
Ausgelöst durch data-ansicht="liste" am -Element. */
:root[data-ansicht="liste"] .abo-gitter {
display: flex;
flex-direction: column;
gap: 8px;
}
:root[data-ansicht="liste"] .abo {
flex-direction: row;
align-items: center;
gap: 16px;
padding: 11px 16px;
}
/* Das Anheben beim Draufzeigen wirkt in einer Liste unruhig - die Zeile
bleibt liegen und bekommt stattdessen einen farbigen Rahmen. */
:root[data-ansicht="liste"] .abo:hover {
transform: none;
box-shadow: var(--schatten);
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
:root[data-ansicht="liste"] .abo-kopf {
flex: 1;
align-items: center;
min-width: 0;
}
/* Name und Kategorie nebeneinander statt untereinander. */
:root[data-ansicht="liste"] .abo-titel {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
:root[data-ansicht="liste"] .abo-name {
margin-bottom: 0;
font-size: 15.5px;
/* Sehr lange Namen kürzen statt die Zeile zu sprengen. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:root[data-ansicht="liste"] .abo-titel .badge { flex: none; }
/* Preis, Rhythmus und Monatswert nebeneinander statt untereinander - sonst
wäre jede Zeile drei Stockwerke hoch.
Drei FESTE Spalten, weil nur ein Teil der Einträge den Zusatz "≙ x/Mon."
hat: Ohne feste Breiten stünde jeder Betrag an einer anderen Stelle, und
genau das Untereinander macht eine Liste ja erst lesbar. */
:root[data-ansicht="liste"] .abo-preis {
display: grid;
grid-template-columns: 88px 88px 96px;
gap: 0 8px;
align-items: baseline;
flex: none;
}
:root[data-ansicht="liste"] .abo-preis b { font-size: 16px; }
/* --------------------------------------------- Rechnungen in Zeilenform -- */
/*
Andere Reihenfolge als bei den Fixkosten: Nummer und Kunde links, dann die
Knöpfe, ganz rechts die Beträge - mit dem Netto-Betrag am äußersten Rand.
Das ist der Aufbau eines Kontoauszugs: Wer eine Spalte Zahlen überfliegt,
findet sie am rechten Rand am schnellsten.
display: contents beim Kopf ist der Kniff dabei. Netto-Betrag und Knöpfe
stecken im HTML in verschiedenen Kästen (.abo-kopf und .abo-fuss) und
ließen sich deshalb nicht gegeneinander verschieben. "contents" löst den
Kopf auf, ohne seinen Inhalt zu entfernen - erst dadurch stehen alle vier
Teile auf derselben Ebene und lassen sich frei anordnen.
*/
:root[data-ansicht="liste"] .rechnungen .abo-kopf { display: contents; }
:root[data-ansicht="liste"] .rechnungen .abo-titel { flex: 1; order: 1; }
:root[data-ansicht="liste"] .rechnungen .abo-fuss { order: 2; }
:root[data-ansicht="liste"] .rechnungen .abo-preis { order: 3; }
/* Die Zusätze sind bei Rechnungen länger als bei den Fixkosten:
"19 % · +1.615,00 €" statt "vierteljährlich". Nachgemessen brauchen sie
115 bzw. 105 px - mit den 88/96 der Fixkosten liefen sie ineinander. */
:root[data-ansicht="liste"] .rechnungen .abo-preis {
grid-template-columns: 122px 112px 104px;
}
/* Alles bleibt in EINER Rasterzeile.
Ohne diese Regel bricht die Anzeige um: Der Betrag steht im HTML vorn, wird
unten aber nach Spalte 3 geschickt. Das Raster füllt von links nach rechts
auf und hat Spalte 1 damit schon hinter sich - die beiden Zusätze rutschen
deshalb in eine zweite Zeile unter den Betrag. */
:root[data-ansicht="liste"] .rechnungen .abo-preis > * { grid-row: 1; }
/* Feste Spalten statt "order", weil nicht jede Rechnung beide Zusätze hat:
Bei 0 % Umsatzsteuer steht dort nur "ohne Umsatzsteuer". Mit order würde
der Betrag dann eine Spalte nach links rutschen und die Zahlenreihe wäre
nicht mehr bündig. */
:root[data-ansicht="liste"] .rechnungen .abo-preis b {
grid-column: 3;
text-align: right;
}
:root[data-ansicht="liste"] .rechnungen .abo-preis small:nth-of-type(1) { grid-column: 1; }
:root[data-ansicht="liste"] .rechnungen .abo-preis small:nth-of-type(2) { grid-column: 2; }
/* Gibt es nur einen Zusatz, rückt er direkt neben den Betrag statt weit weg. */
:root[data-ansicht="liste"] .rechnungen .abo-preis small:only-of-type { grid-column: 2; }
/* In der Zeile ist der Fuß kein Fuß mehr: kein Trennstrich, kein Abstand. */
:root[data-ansicht="liste"] .abo-fuss {
flex: none;
flex-wrap: nowrap;
margin-top: 0;
padding-top: 0;
border-top: none;
}
/* ------------------------------------------------------------ Kategorien -- */
.kategorie-liste { padding: 6px 20px 14px; margin-top: 26px; }
.kategorie-zeile {
display: grid;
grid-template-columns: 1fr auto;
gap: 4px 14px;
align-items: center;
padding: 11px 0;
border-bottom: 1px solid var(--line);
}
.kategorie-zeile:last-child { border-bottom: none; }
.kategorie-zeile b { font-weight: 650; }
/* In der Aufteilung ("Wofür geht das Geld?" bzw. "Von wem kommt das Geld?")
ohne Trennlinien: Dort trennt schon der farbige Balken jede Zeile von der
nächsten - eine zusätzliche Linie macht die Liste nur unruhig.
Bewusst NUR hier: In der Steuerbox stehen keine Balken, dort hilft die
Linie beim Auseinanderhalten der Quartale. */
.kategorie-liste .kategorie-zeile { border-bottom: none; }
/* Vom Filter ausgeblendet. Die eigene Regel ist nötig, weil .kategorie-zeile
display:grid setzt - das würde das eingebaute Verstecken überstimmen. */
.kategorie-zeile[hidden] { display: none; }
/* Der Anteilsbalken, der beim Filtern zwischen Filterleiste und Einträgen
erscheint. Er sitzt dichter dran als die große Aufteilung unten. */
.filter-anteil {
margin-top: 0;
margin-bottom: 16px;
padding: 4px 20px 10px;
}
.balken {
grid-column: 1 / -1;
height: 6px;
border-radius: 99px;
background: var(--balken-bg);
overflow: hidden;
}
.balken > i {
display: block;
height: 100%;
border-radius: 99px;
background: var(--verlauf);
}
/* ------------------------------------------------------------------ Leer -- */
.leer {
text-align: center;
padding: 52px 24px;
color: var(--muted);
}
.leer-icon { font-size: 40px; margin-bottom: 12px; color: var(--accent); }
.leer h3 { color: var(--text); margin-bottom: 6px; }
/* --------------------------------------------------------- Login-Seiten -- */
.auth-karte { width: 100%; max-width: 400px; padding: 32px; }
.auth-marke {
display: flex;
align-items: center;
gap: 9px;
justify-content: center;
margin-bottom: 22px;
font-weight: 700;
font-size: 17px;
letter-spacing: -.02em;
color: var(--text);
text-decoration: none;
}
.auth-titel { font-size: 23px; text-align: center; }
.auth-unter {
text-align: center;
color: var(--muted);
font-size: 14.5px;
margin: 7px 0 24px;
}
.auth-wechsel {
text-align: center;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--line);
font-size: 14.5px;
color: var(--muted);
}
.demo-hinweis {
margin-top: 18px;
padding: 12px 14px;
border-radius: 10px;
background: var(--bg);
border: 1px dashed var(--line);
font-size: 13px;
color: var(--muted);
line-height: 1.6;
}
.demo-nur-lokal {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--gefahr);
}
.demo-hinweis code {
color: var(--text);
font-size: 12.5px;
background: var(--code-bg);
padding: 1px 5px;
border-radius: 5px;
border: 1px solid var(--line);
}
/* --------------------------------------------------------------- Diverses -- */
.zurueck-link {
display: inline-block;
margin-bottom: 16px;
font-size: 14.5px;
text-decoration: none;
}
.zurueck-link:hover { text-decoration: underline; }
.formular-karte { padding: 24px; max-width: 540px; }
/* ---------------------------------------------------- Verwaltungs-Seite -- */
/* Zwei Bereiche auf einer Seite - Kategorien und Kunden -, umschaltbar über
zwei Knöpfe. Aufgebaut wie der Kachel-/Zeilen-Umschalter: Welcher Bereich
gilt, steht als data-bereich am -Element, sichtbar macht es allein
das CSS. */
.bereich-schalter {
display: inline-flex;
gap: 3px;
padding: 3px;
margin-bottom: 22px;
border: 1px solid var(--line);
border-radius: 11px;
background: var(--surface);
}
.bereich-knopf {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 15px;
border: none;
border-radius: 8px;
background: transparent;
color: var(--muted);
font: inherit;
font-size: 14.5px;
font-weight: 550;
cursor: pointer;
transition: background-color .15s, color .15s;
}
.bereich-knopf:hover { background: var(--leise-hover); color: var(--text); }
.bereich-knopf.aktiv {
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent);
}
.bereich-knopf:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(36, 131, 196, .35);
}
/* Die Bedingung ":root[data-bereich]" ist Absicht: Solange das Attribut fehlt -
also wenn das Skript nicht lief, weil Javascript aus ist - bleiben BEIDE
Bereiche sichtbar. Ohne diese Vorsichtsmaßnahme wäre die Seite dann leer. */
:root[data-bereich] .verwaltung-bereich { display: none; }
:root[data-bereich="kategorien"] .verwaltung-bereich[data-bereich="kategorien"],
:root[data-bereich="kunden"] .verwaltung-bereich[data-bereich="kunden"] {
display: block;
}
/* ------------------------------------------------------ Kategorien-Seite -- */
.kat-liste { padding: 6px 20px; }
/* Der Kasten "Deine Daten" am Seitenende.
⚠️ Das Padding steht hier und nicht bei .karte: Die Grundklasse gibt
absichtlich NUR Hintergrund, Rahmen und Ecken vor - jede Verwendung bringt
ihren eigenen Innenabstand mit (.formular-karte 24, .auth-karte 32,
.neu-box-inhalt 20, .kat-liste 6/20 …). Wer .karte ein Padding gäbe, würde
alle diese Stellen auf einmal verschieben. */
.daten-box { padding: 20px; }
.daten-box p { line-height: 1.6; margin: 0 0 16px; }
.daten-box .knopf + p { margin: 16px 0 0; color: var(--muted); font-size: 13.5px; }
.kat-zeile {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.kat-zeile:last-child { border-bottom: none; }
.kat-form {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 250px;
}
.kat-form input[type="text"] {
flex: 1;
min-width: 110px;
padding: 8px 11px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--eingabe-bg);
font: inherit;
font-size: 14.5px;
color: var(--text);
}
.kat-form input[type="text"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(36, 131, 196, .22);
}
.kat-nutzung {
color: var(--muted);
font-size: 13.5px;
white-space: nowrap;
}
.kat-neu {
display: flex;
align-items: flex-end;
gap: 14px;
flex-wrap: wrap;
}
/* Der Farbwähler des Browsers ist von Haus aus klobig - hier klein und rund.
Muss nach ".feld input" stehen, damit die Breite von 100% überschrieben wird. */
input[type="color"] {
width: 44px;
height: 38px;
flex: none;
padding: 3px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--eingabe-bg);
cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
/* ---------------------------------------------------------- Einnahmen -- */
/* Die Jahreswahl benutzt die vorhandenen Filter-Knöpfe, ist aber aus Links
gebaut - deshalb muss der Unterstrich weg. Und --kat-farbe muss gesetzt
sein, sonst weiß .filter-chip.aktiv nicht, womit es einfärben soll. */
.jahr-wahl a {
text-decoration: none;
--kat-farbe: var(--accent);
}
/* Das Datum steht in der Rechnungskarte dort, wo bei den Fixkosten der
Pausier-Schalter sitzt. */
.rechnung-datum {
color: var(--muted);
font-size: 13px;
white-space: nowrap;
}
/* ------------------------------------------------------- Steuerrücklage -- */
.steuer-box { padding: 6px 20px 18px; margin-bottom: 26px; }
.steuer-form {
display: flex;
align-items: flex-end;
gap: 12px;
flex-wrap: wrap;
padding: 16px 0 4px;
}
/* Das Prozentzeichen sitzt IM Feld, nicht daneben - so ist auf einen Blick
klar, dass 30 nicht 30 Euro bedeutet. */
.steuer-eingabe { position: relative; }
.steuer-eingabe input {
width: 130px;
padding-right: 32px;
}
.steuer-prozent {
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--muted);
font-size: 15px;
pointer-events: none; /* sonst klickt man daneben statt ins Feld */
}
.steuer-leer {
color: var(--muted);
font-size: 14px;
margin: 4px 0 0;
padding: 12px 0;
border-top: 1px solid var(--line);
}
/* ---------------------------------------------------------------------------
Eine Schriftgröße für alle Geldbeträge im Steuerkasten.
Hier stehen drei Sorten von Beträgen: die Jahressumme oben, die Summe je
Quartal, und in den beiden Spalten die Einkommen- und die Umsatzsteuer.
Sie sind alle gleich wichtig - man legt sie ja alle zurück -, deshalb
sind sie auch gleich groß. Vorher stufte die Größe sie ab (21 / 16 / 14 px)
und ließ die Spaltenbeträge wie eine Randnotiz aussehen.
Als Variable, damit sie sich an EINER Stelle ändern lässt. Drei Zahlen von
Hand gleich zu halten geht genau so lange gut, bis man eine davon vergisst.
--------------------------------------------------------------------------- */
.steuer-box {
--betrag-groesse: 21px;
--betrag-abstand: -.02em;
}
/* Die Gesamtsumme steht ganz oben und ist die Zahl, um die es geht.
Bewusst ohne Trennlinie nach oben: Der Abstand allein genügt, die Linie
machte den Kasten nur unruhig. */
.steuer-gesamt {
align-items: baseline;
padding-top: 16px;
}
.steuer-gesamt > span { font-weight: 550; }
.steuer-gesamt b {
font-size: var(--betrag-groesse);
letter-spacing: var(--betrag-abstand);
}
/* Solange kein Steuersatz hinterlegt ist, fehlt der Summe die
Einkommensteuer - das muss man sehen. */
.steuer-unvollstaendig {
margin-left: 8px;
padding: 2px 8px;
border-radius: 999px;
background: var(--fehler-bg);
color: var(--fehler-text);
font-size: 12px;
font-weight: 500;
white-space: nowrap;
}
.steuer-offen {
color: var(--muted);
font-weight: 500;
font-size: 13.5px;
}
.steuer-grundlage span { color: var(--muted); }
/* Die Jahressummen der beiden Steuern - ebenfalls in Betragsgröße.
Ohne diese Regel blieben ausgerechnet sie klein, während dieselbe Steuer
je Quartal darunter groß steht: Die Jahres-Einkommensteuer sähe dann
unwichtiger aus als ihr eigenes Viertel.
Das :not() ist nötig, weil in derselben Stelle bei fehlendem Steuersatz
kein Betrag steht, sondern der Hinweis "Steuersatz fehlt" - und der ist
Text und soll klein bleiben. */
.steuer-grundlage b:not(.steuer-offen) {
font-size: var(--betrag-groesse);
letter-spacing: var(--betrag-abstand);
}
.steuer-quartal { align-items: baseline; }
/* Nur das direkte Kind: Das ist die Summe des Quartals (bzw. des Jahres in
der Gesamtansicht). Die Kennung "Q1" und die Spaltenbeträge stecken je eine
Ebene tiefer und behalten ihre eigene Größe. */
.steuer-quartal > b {
font-size: var(--betrag-groesse);
letter-spacing: var(--betrag-abstand);
}
/* Die Kennung Q1 / 2026 bleibt klein - sie ist eine Beschriftung, kein Betrag. */
.steuer-quartal .steuer-q { font-size: 16px; }
/* Die Aufschlüsselung je Quartal (und je Jahr in der Gesamtansicht):
ZWEI SPALTEN mit einer Trennlinie dazwischen.
Warum nicht einfach nebeneinander in einer Zeile, wie es hier mal stand:
Es sind zwei GETRENNTE Zahlungen ans Finanzamt - andere Berechnung, andere
Termine, andere Anmeldung. Nebeneinander im Fließtext liefen sie optisch
ineinander, man musste jedes Mal nachlesen, welcher Betrag wozu gehört.
Feste 1fr 1fr statt "auto": Dadurch stehen die Beträge über alle vier
Quartale hinweg untereinander, und man kann eine Spalte senkrecht
durchlesen. Mit "auto" wanderte die zweite Spalte je nach Textlänge. */
.steuer-teile {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 10px;
}
.steuer-teil {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding-right: 18px;
color: var(--muted);
font-size: 12.5px;
}
/* Die Linie sitzt an der zweiten Spalte, nicht zwischen zwei Rändern:
So ist sie genau einmal da, auch wenn ohne Steuersatz nur die
Umsatzsteuer-Spalte übrig bleibt - dann steht diese allein links und
bekommt gar keine Linie. */
.steuer-teil + .steuer-teil {
padding-left: 18px;
padding-right: 0;
border-left: 1px solid var(--line-senkrecht);
}
.steuer-teil-name { font-size: 12px; }
.steuer-teil b {
font-size: var(--betrag-groesse);
letter-spacing: var(--betrag-abstand);
color: var(--text);
font-weight: 650;
}
.steuer-q {
display: inline-block;
min-width: 28px;
font-weight: 650;
}
.steuer-monate { color: var(--muted); font-size: 13.5px; margin-left: 4px; }
/* Kein margin-left mehr: Der Termin steht jetzt UNTER seinem Betrag in der
eigenen Spalte, nicht mehr dahinter in derselben Zeile. */
.steuer-faellig {
padding: 2px 8px;
border-radius: 999px;
background: var(--badge-bg);
color: var(--badge-text);
font-size: 12px;
white-space: nowrap;
}
/* Die letzte Quartalszeile ohne Linie nach unten.
Die Regel .kategorie-zeile:last-child greift hier NICHT: Nach Q4 kommen
noch die Hinweistexte, Q4 ist also nicht das letzte Kind. :last-of-type
zählt dagegen nur die Elemente derselben Sorte - und der letzte div im
Kasten ist Q4. */
.steuer-box .kategorie-zeile:last-of-type { border-bottom: none; }
/* Ebenfalls ohne Trennlinie - der größere Abstand nach oben setzt den
Hinweisblock deutlich genug ab. */
.steuer-hinweis {
color: var(--muted);
font-size: 12.5px;
line-height: 1.6;
margin: 22px 0 0;
}
.steuer-hinweis + .steuer-hinweis { margin-top: 10px; }
@media (max-width: 560px) {
/* Zwei Steuerspalten nebeneinander sind hier zu eng - "Einkommensteuer"
bräuchte allein schon fast die halbe Breite. Sie rücken untereinander,
und aus der senkrechten Trennlinie wird eine waagerechte. */
.steuer-teile { grid-template-columns: 1fr; gap: 12px; }
.steuer-teil { padding-right: 0; }
/* Hier bewusst das zarte --line und nicht --line-senkrecht: Waagerecht über
die volle Breite ist es gut sichtbar, und es DARF nicht kräftiger sein als
die Linie zwischen den Quartalen - sonst sähe die Trennung innerhalb eines
Quartals wichtiger aus als die zwischen zweien. */
.steuer-teil + .steuer-teil {
padding-left: 0;
padding-top: 12px;
border-left: none;
border-top: 1px solid var(--line);
}
.hero { padding: 22px 16px 20px 22px; }
/* Auf schmalen Bildschirmen wird das Band etwas kräftiger, damit man es
noch treffen kann, und die Stücke dürfen enger zusammenrücken. */
.hero-band { height: 22px; gap: 1.5px; }
.band-stueck { min-width: 4px; }
.kopf-mail { display: none; }
/* Ab drei Menüpunkten reicht die Breite nicht mehr - vorher schoben sich
"Verwaltung" und der Abmelden-Knopf übereinander. Jetzt bleiben Marke und
Knöpfe in der ersten Zeile, die Navigation rutscht darunter.
flex-basis: 100% ist der Auslöser: Es zwingt die Navigation auf eine
eigene Zeile, statt sie zusammenzuquetschen. */
.kopf-links { gap: 10px 14px; flex-wrap: wrap; }
.kopf-nav { flex-basis: 100%; gap: 18px; }
.kopf-inhalt { align-items: flex-start; padding-top: 18px; }
.kopf-rechts { padding-top: 2px; }
/* In der Zeilenansicht ist auf schmalen Bildschirmen kein Platz für alles
nebeneinander. Dort rutschen Knöpfe und Schalter in eine zweite Zeile,
Name und Preis bleiben oben zusammen. */
:root[data-ansicht="liste"] .abo { flex-wrap: wrap; gap: 10px; }
:root[data-ansicht="liste"] .abo-fuss { flex: 1; }
:root[data-ansicht="liste"] .abo-kopf {
flex-basis: 100%;
align-items: flex-start;
}
/* Für die drei festen Preisspalten reicht die Breite hier nicht - sie
würden über den Namen laufen. Deshalb stapeln sich Preis, Rhythmus und
Monatswert wieder wie in der Kachelansicht, und die Kategorie rutscht
unter den Namen. Die Zeile bleibt trotzdem gedrungener als eine Kachel:
weniger Polsterung, weniger Abstand. */
:root[data-ansicht="liste"] .abo-preis {
display: block;
text-align: right;
}
:root[data-ansicht="liste"] .abo-titel { display: block; }
:root[data-ansicht="liste"] .abo-name { margin-bottom: 8px; }
/* Bei den Rechnungen wird der Kopf auf breiten Bildschirmen aufgelöst
(display: contents), damit die Beträge hinter die Knöpfe rutschen können.
Hier muss er wieder ein echter Kasten sein: Ein aufgelöstes Element
erzeugt keine Box, und damit greift auch das flex-basis: 100 % oben nicht
mehr, das den Umbruch überhaupt erst auslöst. Ohne diese Zeile stünden
Nummer, Knöpfe und Beträge auf dem Handy wild durcheinander. */
:root[data-ansicht="liste"] .rechnungen .abo-kopf {
display: flex;
order: 0;
}
}