VIER DINGE, und das erste ist eine Meldung aus dem Support.
1. MISS KAM AUS "AUFGABE BEARBEITEN" NICHT HERAUS.
„Ich konnte da wieder nicht zurück gehen, musste die App schließen
damit ich wieder auf die Hauptseite kam."
Gemessen (mess-dialog-ausgang.mjs), vier Größen:
412x915 App 782 px Inhalt in 784 px -- knapp ja
412x780 Browser 782 px Inhalt in 742 px -- SACKGASSE
360x640 klein 794 px Inhalt in 602 px -- SACKGASSE
412x430 Tastatur 794 px Inhalt in 392 px -- SACKGASSE
`.dialog` hatte `overflow: hidden`, eine Scroll-Höhe gab es NUR für
`.dialog--breit`. Alles unterhalb des Rands wurde abgeschnitten --
samt "Abbrechen". Jetzt rollt JEDES Fenster, und Kopf wie Knopfzeile
bleiben stehen (`position: sticky`), damit man den Ausgang SIEHT,
ohne erst durch acht Felder zu scrollen. Alle vier Größen: ja.
2. DIE VORLAGENKACHEL DREHT SICH.
„wenn ich drauf drücke dreht sich die kachel und dan seh ich wer es
gemacht hat, und immer noch die option es nochmal zu verteilen falls
neue leute ins team zustoßen."
Vorne bleibt die Kurzfassung ("liegt bei 3 von 4"), hinten stehen
die Namen mit ihrem Stand und zwei Knöpfe: "Nachholen – 1 fehlt"
(oder "Nochmal an alle", wenn wirklich alle sie haben) und "Zurück".
Nach dem Verteilen dreht sie sich von selbst; wer nur nachsehen
will, drückt "Wer hat sie?".
3. DER EINGANG SIEHT AUS WIE DAS HAUS.
Fase und Leuchtschiene statt flachem Kasten, die Schiene in der
Farbe des Stands. Die drei Zahlen werden drei Felder -- und die
"0 neu" leuchtet nicht mehr rot: Eine Warnung, die immer kommt, ist
keine Warnung. Ab 760 px steht das Bild neben dem Text statt
darunter; die Karte war dadurch dreimal so hoch wie nötig.
4. DER CREATOR-KATALOG IST AUF DER TEAM-SEITE WEG.
„es gibt keine creator auf dieser seite" -- dort stand "Wähle oben
einen Creator", eine Aufforderung zu etwas Unmöglichem. Gefragt wird
jetzt nach den Daten (gibt es jemanden, dem ich das geben kann?),
nicht nach der Adresse.
DAZU FERTIG GEMACHT, WAS VON GESTERN OFFEN WAR:
* Die zwei Serien ohne Haus ("Community-Call", "Schulung-Agentur").
Ursache war meine eigene Abschrift: Bei den Terminen frage ich die
Teilnehmerliste, bei den Serien hatte ich sie vergessen. Auf einer
Kopie der echten Datenbank: 0 offene Zeilen.
* Sieben Schreibwege setzen jetzt `haus` (Aufgaben, Einträge,
Dateien, Material, Wissen, Video-Titelbild). Dabei gefunden:
`material` verwaltet seine Spalten SELBST -- meine Spalte stand in
der falschen Liste und fehlte auf einer frischen Datenbank
(78 Fehlschläge in pruef-material, jetzt 159/0).
* unterstuetzen.html lud meldung.js gar nicht -- dort stand das
Maschinenwort des Servers statt eines Satzes (pruef-meldungen 8/0).
DREI VERALTETE PRÜFUNGEN NACHGEZOGEN, jede STRENGER als vorher:
* "der Modi legt eine Aufgabe an (201)" -- seit dem 22.09. ist das
403 und gewollt. Geprüft wird jetzt auch das WORT.
* "calls.html ist verboten" -- Filipe hat die Kachel selbst verlangt
("jeder der einen kalender hat"). Mit Gegenprobe ersetzt.
* "Review" heißt seit dem 20.09. "Zur Freigabe". Der Name wird jetzt
aus STATUS_NAME GELESEN statt abgeschrieben.
GEPRÜFT: modi-katalog 150/0 (war 144), modi-verborgen 85/0 (war 80/2),
haus-trennung 97/0, material 159/0, meldungen 8/0, abbrechen-optik 0
Fehler. Dazu grün: an-alle, vorlagen, support, css-klassen,
aufgabenbrett, aufgaben-vorlagen, unterstuetzung, formulare, loeschen,
nachfrage, kalender, chat, leerzustand.
OFFEN UND NICHT ANGEFASST: pruef-breiten meldet auf report.html ein
Berührziel von 27x18 px. Der Link (`class="zurueck"`) ist auf 30
Seiten derselbe und hat gar keinen eigenen Stil; beanstandet wird nur
diese eine Seite, weil dort hinter ihm nur "· Review" steht und die
Prüfung Fließtext-Links erst ab 12 Zeichen Umgebung ausnimmt. Eine
Klasse auf 30 Seiten ohne Prüflauf zu ändern wäre geraten.
Co-Authored-By: Claude Opus 5 <[email protected]>
363 lines
14 KiB
CSS
363 lines
14 KiB
CSS
/* ===================================================================
|
|
SUPPORT (24.09.2026)
|
|
|
|
Filipe: „es soll alles hoch profissionell gemacht werden aber so
|
|
einfach wie möglich, will nichts kompliziertes oder zu viel. kurz
|
|
und knapp und extrem geil."
|
|
|
|
Deshalb kein eigenes Aussehen: Kästen, Knöpfe und Marken kommen aus
|
|
start.css und module.css, so wie auf jeder anderen Seite. Hier steht
|
|
nur, was es woanders nicht gibt — das Melde-Feld, die Bildvorschau,
|
|
die Karte einer Meldung und das Zahlenband des Eingangs.
|
|
|
|
Eine eigene Farbwelt hätte die Seite fremd wirken lassen. Wer im
|
|
schlechtesten Moment etwas meldet, soll nicht zusätzlich merken,
|
|
dass er woanders ist.
|
|
=================================================================== */
|
|
|
|
.s-titel {
|
|
font-size: 1.05rem; font-weight: 700; letter-spacing: .01em;
|
|
margin: 0 0 12px;
|
|
}
|
|
.s-zahl {
|
|
display: inline-block; margin-left: 8px; padding: 1px 9px;
|
|
border-radius: 999px; font-size: .8rem; font-weight: 700;
|
|
background: color-mix(in srgb, var(--akzent) 15%, transparent);
|
|
color: var(--akzent);
|
|
}
|
|
|
|
/* ---------- Melden ------------------------------------------------- */
|
|
|
|
.s-melden {
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
padding: 18px 18px 16px;
|
|
margin-bottom: 22px;
|
|
}
|
|
/* Für die Leitung rutscht der Melde-Kasten unter den Eingang.
|
|
|
|
NICHT ueber `order` (24.09.2026, nachgemessen): `.inhalt` ist in
|
|
start.css ein gewoehnlicher Block, kein Flex-Behaelter -- `order`
|
|
haette dort gar nichts getan, und die Klasse waere eine Regel
|
|
gewesen, die aussieht, als wirke sie. Verschoben wird der Kasten
|
|
deshalb im DOM (support.js), und dieser Abstand gilt dann. */
|
|
.s-melden--unten { margin-top: 26px; margin-bottom: 0; }
|
|
|
|
.s-feld { display: block; }
|
|
.s-feld__schild {
|
|
display: block; margin-bottom: 6px;
|
|
font-size: .78rem; font-weight: 700; letter-spacing: .07em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.s-melden textarea {
|
|
width: 100%; box-sizing: border-box;
|
|
padding: 11px 12px;
|
|
font: inherit; font-size: .95rem; line-height: 1.5;
|
|
color: var(--text);
|
|
background: var(--grund);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
resize: vertical; min-height: 96px;
|
|
}
|
|
.s-melden textarea:focus {
|
|
outline: 2px solid var(--akzent); outline-offset: 1px;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.s-bild {
|
|
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
|
margin-top: 12px;
|
|
}
|
|
.s-bild__name { font-size: .8rem; color: var(--text-still); }
|
|
|
|
.s-vorschau { margin-top: 12px; }
|
|
.s-vorschau img {
|
|
display: block; max-width: 100%; max-height: 260px;
|
|
width: auto; height: auto;
|
|
border-radius: var(--radius-klein);
|
|
border: 1px solid var(--rand);
|
|
}
|
|
|
|
.s-knopfreihe {
|
|
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
|
margin-top: 14px;
|
|
}
|
|
.s-hinweis { font-size: .83rem; color: var(--text-still); }
|
|
|
|
/* ---------- Der Eingang -------------------------------------------- */
|
|
|
|
.s-eingang__kopf {
|
|
display: flex; align-items: flex-start; justify-content: space-between;
|
|
gap: 16px; flex-wrap: wrap;
|
|
}
|
|
|
|
/* Das Zahlenband: je Stand eine Zahl gross, das Wort klein darunter.
|
|
Dieselbe Bauart wie in den Personenkacheln -- man vergleicht mit dem
|
|
Auge, statt eine Zeile zu lesen. */
|
|
/* Das Zahlenband: je Stand eine Zahl gross, das Wort klein darunter --
|
|
und seit dem 25.09.2026 jede in einem eigenen kleinen Feld. Drei
|
|
nackte Zahlen nebeneinander lasen sich als EINE Angabe ("0 1 0");
|
|
mit Rand und Fase sind es drei Auskuenfte. */
|
|
.s-bilanz { display: flex; gap: 10px; flex-wrap: wrap; }
|
|
.s-bilanz__feld {
|
|
display: flex; flex-direction: column; gap: 1px;
|
|
min-width: 68px; padding: 8px 13px 7px;
|
|
border: 1px solid var(--rand);
|
|
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
|
|
background: linear-gradient(163deg,
|
|
rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, .012) 100%);
|
|
}
|
|
.s-bilanz__zahl {
|
|
font-size: 1.42rem; font-weight: 700; line-height: 1.1; color: var(--text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.s-bilanz__wort {
|
|
font-size: .72rem; color: var(--text-still);
|
|
letter-spacing: .04em; text-transform: uppercase;
|
|
}
|
|
/* EINE NULL IST KEINE WARNUNG. Vorher war die Zahl bei "neu" IMMER
|
|
rot -- auch die 0, und damit stand dauerhaft ein roter Punkt auf der
|
|
Seite, an dem nichts war. Eine Warnung, die immer kommt, ist keine
|
|
Warnung mehr; dieselbe Erkenntnis steht im Projektgedaechtnis vom
|
|
03.09.2026. `data-leer` setzt support.js. */
|
|
.s-bilanz__feld[data-stand="neu"]:not([data-leer="ja"]) .s-bilanz__zahl { color: var(--warn); }
|
|
.s-bilanz__feld[data-stand="neu"]:not([data-leer="ja"]) {
|
|
border-color: color-mix(in srgb, var(--warn) 38%, var(--rand));
|
|
background: linear-gradient(163deg,
|
|
color-mix(in srgb, var(--warn) 9%, transparent) 0%,
|
|
rgba(255, 255, 255, .012) 100%);
|
|
}
|
|
|
|
.s-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 16px; }
|
|
.s-filter__knopf {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 6px 13px; border-radius: 999px;
|
|
font: inherit; font-size: .84rem; font-weight: 600;
|
|
color: var(--text-still);
|
|
background: transparent;
|
|
border: 1px solid var(--rand);
|
|
cursor: pointer;
|
|
}
|
|
.s-filter__knopf:hover { color: var(--text); border-color: var(--akzent); }
|
|
.s-filter__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
.s-filter__knopf[aria-pressed="true"] {
|
|
color: var(--akzent);
|
|
border-color: var(--akzent);
|
|
background: color-mix(in srgb, var(--akzent) 12%, transparent);
|
|
}
|
|
.s-filter__zahl { font-size: .78rem; opacity: .8; }
|
|
|
|
/* ---------- Eine Meldung ------------------------------------------- */
|
|
|
|
/* =====================================================================
|
|
DIE MELDEKARTE IM HAUS-STIL (25.09.2026)
|
|
|
|
Filipe zum Bildschirmfoto des Eingangs: "lass das bitte auch geiler
|
|
aussehen bitte."
|
|
|
|
WAS VORHER DA WAR: ein flacher Kasten mit runden Ecken und einem
|
|
3 px breiten Strich links. Funktional richtig -- aber die einzige
|
|
Flaeche im Haus, die weder die Fase noch die Leuchtschiene traegt.
|
|
Neben einer Kachel oder einem Dialog sah sie aus wie aus einer
|
|
anderen Anwendung.
|
|
|
|
UEBERNOMMEN WIRD, WAS ES SCHON GIBT, nicht etwas Neues erfunden:
|
|
dieselbe `--fase` wie ueberall, dieselbe Bauart der Leuchtschiene
|
|
wie an `.dialog` und an jeder Kachel, derselbe dunkle Verlauf. Eine
|
|
zweite Formensprache waere ein zweites Haus.
|
|
|
|
DIE SCHIENE TRAEGT DIE STANDFARBE (`--s`) und nicht den Akzent: An
|
|
ihr liest man ab, ob etwas neu ist, bevor man ein Wort liest. Sie
|
|
ist gedeckt beigemischt, nicht als Leuchtbalken -- augenschonend
|
|
ist Vorgabe, nicht Geschmack.
|
|
===================================================================== */
|
|
.s-karte {
|
|
--s: var(--text-still);
|
|
position: relative;
|
|
padding: 16px 18px 15px 22px;
|
|
margin-bottom: 12px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: 0;
|
|
/* Dieselbe Fase wie an Kachel und Dialog. Wer sie spaeter aendert,
|
|
aendert sie an EINER Stelle -- `--fase` steht im Grundblatt. */
|
|
clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
|
|
background:
|
|
linear-gradient(90deg,
|
|
color-mix(in srgb, var(--s) 13%, transparent) 0%,
|
|
color-mix(in srgb, var(--s) 4%, transparent) 16%,
|
|
transparent 44%),
|
|
linear-gradient(163deg, #131b27 0%, #0b1017 62%, #080c13 100%);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, .07),
|
|
inset 0 -1px 0 rgba(0, 0, 0, .45),
|
|
0 14px 30px -20px rgba(0, 0, 0, .9);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Die Leuchtschiene -- dieselbe Bauart wie an `.dialog`, nur in der
|
|
Farbe des Stands. Sie ersetzt den alten flachen Strich links. */
|
|
.s-karte::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: linear-gradient(180deg,
|
|
color-mix(in srgb, var(--s) 52%, #fff) 0%,
|
|
var(--s) 24%,
|
|
color-mix(in srgb, var(--s) 42%, transparent) 100%);
|
|
box-shadow:
|
|
0 0 8px 0 color-mix(in srgb, var(--s) 45%, transparent),
|
|
3px 0 18px -4px color-mix(in srgb, var(--s) 34%, transparent);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Beim Daruebergehen tritt die Karte einen Schritt vor -- ohne
|
|
Bewegung, ohne Aufblitzen. Nur Rand und Schatten. */
|
|
.s-karte:hover {
|
|
border-color: color-mix(in srgb, var(--s) 32%, var(--rand));
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, .09),
|
|
inset 0 -1px 0 rgba(0, 0, 0, .45),
|
|
0 18px 38px -20px rgba(0, 0, 0, .95);
|
|
}
|
|
.s-karte[data-stand="neu"] { --s: var(--warn); }
|
|
.s-karte[data-stand="in_arbeit"] { --s: var(--akzent); }
|
|
/* --k-gut ist die Hausfarbe fuer "passt, erledigt, freigegeben"
|
|
(gate.css). Gemessen nachgesehen, nicht geraten: --gut gibt es
|
|
nicht, und ein Ersatzwert in Klammern haette hier still eine
|
|
sechste Gruenschattierung ins Haus gebracht. */
|
|
.s-karte[data-stand="erledigt"] { --s: var(--k-gut); opacity: .82; }
|
|
|
|
/* Wer aus einer Benachrichtigung kommt, soll sehen, welche gemeint
|
|
ist -- ohne Blinken, ohne Bewegung. */
|
|
.s-karte[data-hervor="ja"] {
|
|
border-color: var(--akzent);
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--akzent) 45%, transparent);
|
|
}
|
|
|
|
.s-karte__kopf {
|
|
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
|
margin-bottom: 9px;
|
|
}
|
|
.s-marke {
|
|
padding: 2px 10px; border-radius: 999px;
|
|
font-size: .75rem; font-weight: 700; letter-spacing: .05em;
|
|
text-transform: uppercase;
|
|
background: color-mix(in srgb, var(--s) 16%, transparent);
|
|
color: var(--s);
|
|
}
|
|
.s-karte__von { font-size: .88rem; font-weight: 600; color: var(--text); }
|
|
.s-karte__zeit { font-size: .78rem; color: var(--text-still); margin-left: auto; }
|
|
|
|
.s-karte__text {
|
|
margin: 0; font-size: .95rem; line-height: 1.55; color: var(--text);
|
|
/* Absätze bleiben erhalten. Wer „Schritt 1 … Schritt 2 …"
|
|
untereinander schreibt, soll es so wiederfinden. */
|
|
white-space: pre-wrap; overflow-wrap: anywhere;
|
|
}
|
|
.s-karte__wo { margin: 8px 0 0; font-size: .78rem; color: var(--text-still); }
|
|
|
|
.s-karte__bild { margin-top: 11px; }
|
|
.s-karte__bild img {
|
|
display: block; max-width: 100%; max-height: 300px;
|
|
width: auto; height: auto;
|
|
border: 1px solid var(--rand);
|
|
border-radius: 0;
|
|
/* Kleine Fase, damit das Bild zur Karte gehoert und nicht wie ein
|
|
aufgeklebtes Rechteck darauf liegt. */
|
|
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
|
|
box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .95);
|
|
transition: border-color var(--tempo, .18s);
|
|
}
|
|
/* Dass man es anklicken kann, sagt bisher nur der Mauszeiger-Text.
|
|
Ein heller werdender Rand sagt es beim Daruebergehen -- ohne
|
|
Bewegung, ohne Vergroessern: `prefers-reduced-motion` braucht hier
|
|
nichts abzuschalten, weil sich nichts bewegt. */
|
|
.s-karte__bild a:hover img,
|
|
.s-karte__bild a:focus-visible img {
|
|
border-color: color-mix(in srgb, var(--akzent) 55%, var(--rand));
|
|
}
|
|
.s-karte__bild a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
|
|
|
|
/* =====================================================================
|
|
DAS BILD NEBEN DEN TEXT, NICHT DARUNTER (25.09.2026)
|
|
|
|
Im Bildschirmfoto stand ein hochkantes Handybild unter zwei Zeilen
|
|
Text -- und rechts daneben eine handbreite leere Flaeche ueber die
|
|
ganze Kartenhoehe. Eine Meldung mit Bild war damit dreimal so hoch
|
|
wie noetig, und im Eingang sah man weniger davon auf einmal.
|
|
|
|
ERST AB 760 px, und das ist der Punkt: Auf dem Handy gibt es keine
|
|
zweite Spalte, dort bleibt alles untereinander. Gefragt wird nach
|
|
dem PLATZ, nicht nach dem Geraet.
|
|
|
|
`auto` UND NICHT EINE FESTE BREITE fuer die Bildspalte: Gibt es kein
|
|
Bild, greift die ganze Regel gar nicht erst (`:has`). Eine feste
|
|
Breite waere eine Luecke bei jeder Meldung ohne Bild -- und die sind
|
|
die Mehrzahl.
|
|
===================================================================== */
|
|
@media (min-width: 760px) {
|
|
.s-karte:has(.s-karte__bild) {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
grid-template-areas:
|
|
"kopf kopf"
|
|
"text bild"
|
|
"wo bild"
|
|
"antwort bild"
|
|
"tun bild";
|
|
column-gap: 20px;
|
|
align-items: start;
|
|
}
|
|
.s-karte:has(.s-karte__bild) > .s-karte__kopf { grid-area: kopf; }
|
|
.s-karte:has(.s-karte__bild) > .s-karte__text { grid-area: text; }
|
|
.s-karte:has(.s-karte__bild) > .s-karte__wo { grid-area: wo; }
|
|
.s-karte:has(.s-karte__bild) > .s-antwort { grid-area: antwort; }
|
|
.s-karte:has(.s-karte__bild) > .s-karte__tun { grid-area: tun; }
|
|
.s-karte:has(.s-karte__bild) > .s-karte__bild {
|
|
grid-area: bild; margin-top: 0; align-self: start;
|
|
}
|
|
/* 180 UND NICHT 260 (gemessen 25.09.2026). Bei 260 war die Karte
|
|
330 px hoch, obwohl der Text zwei Zeilen hat -- die Bildspalte gab
|
|
die Hoehe vor, und links stand eine leere Flaeche. Das Bild ist
|
|
anklickbar ("In voller Groesse ansehen"), eine Vorschau reicht
|
|
also. Ein Handy-Bildschirmfoto ist bei 180 px noch als solches zu
|
|
erkennen; darum geht es an dieser Stelle. */
|
|
.s-karte:has(.s-karte__bild) > .s-karte__bild img { max-height: 180px; }
|
|
}
|
|
.s-karte__bild a:focus-visible img { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
|
|
.s-antwort {
|
|
margin-top: 12px; padding: 10px 12px;
|
|
background: color-mix(in srgb, var(--akzent) 8%, transparent);
|
|
border-left: 2px solid color-mix(in srgb, var(--akzent) 50%, transparent);
|
|
border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
|
|
}
|
|
.s-antwort__schild {
|
|
display: block; margin-bottom: 4px;
|
|
font-size: .75rem; font-weight: 700; letter-spacing: .06em;
|
|
text-transform: uppercase; color: var(--akzent);
|
|
}
|
|
.s-antwort__text {
|
|
margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text);
|
|
white-space: pre-wrap; overflow-wrap: anywhere;
|
|
}
|
|
|
|
.s-karte__tun { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
|
|
|
|
.s-leer {
|
|
padding: 22px 16px; text-align: center;
|
|
font-size: .92rem; color: var(--text-still);
|
|
background: var(--flaeche);
|
|
border: 1px dashed var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
|
|
/* ---------- Am Handy ------------------------------------------------ */
|
|
|
|
@media (max-width: 560px) {
|
|
.s-melden { padding: 15px 14px 14px; }
|
|
.s-karte { padding: 13px 14px 12px; }
|
|
.s-karte__zeit { margin-left: 0; width: 100%; }
|
|
.s-bilanz { gap: 14px; }
|
|
.s-eingang__kopf { gap: 10px; }
|
|
}
|