DogFatherGitandClaude Opus 5
49bd4a7cec
Filipe: "wieso greift das in die rechte rein? ist doch ok, die sollen einfach paar leute selber hinzufuegen koennen." Er hat recht, und ich hatte zwei Dinge in einen Topf geworfen: Das hier braucht KEINE Datenbankaenderung -- nur die Rolle "Spicy Media" braucht eine. WARUM EIN EIGENER WEG UND NICHT DIE ALTE TUER Alles unter /workspace/api/verwaltung haengt an EINER Schranke (nurAdmin). Dahinter liegen acht Wege: Rollen aendern, Codes neu setzen, sperren, loeschen, Protokoll lesen. Einen Manager dort hineinzulassen und danach in jedem der acht einzeln zu pruefen, was er darf, ist genau die Bauweise, durch die am 31.08.2026 ein Loch entstanden ist -- zwei von drei Stellen abgesichert, die dritte vergessen. Deshalb bleibt die Tuer zu, und daneben steht eine neue mit genau einem Zweck: POST /workspace/api/creator-anlegen. Sie kann nichts anderes, als einen Creator anzulegen -- nicht weil eine Abfrage es verbietet, sondern weil es hier keinen anderen Weg gibt. Unterschied zwischen "darf nicht" und "kann nicht". DIE ROLLE STEHT NICHT IM AUFRUF, sie wird im Server gesetzt. Ein Feld `rolle` im Koerper waere die naheliegende Loesung und die falsche: Dann muesste eine Abfrage sie pruefen, und eine vergessene Abfrage ist ein zweiter Zugang mit vollen Rechten. Geprueft wird deshalb nicht, dass ein mitgeschicktes `rolle: "admin"` abgelehnt wird, sondern dass es WIRKUNGSLOS ist. DIE ZUTEILUNG PASSIERT SOFORT. Ein Creator ohne Betreuung ist fuer alle ausser DogFather unsichtbar -- der Manager haette ihn angelegt und danach nicht mehr gesehen. Wer anlegt, betreut; ein eigener Scout kann mitgegeben werden. Eine FREMDE Scout-Nummer wird abgelehnt (403) und nicht stillschweigend auf den Anleger zurueckgesetzt: Sonst glaubte der Manager, er haette zugeteilt. Der Knopf sitzt auf dem Dashboard, nicht in der Personenverwaltung -- dort kommt ein Manager gar nicht hinein, und hier sieht er seine Creator ohnehin. Der Zugangscode steht einmal im Dialog und wird nie nachgeladen; deshalb schliesst sich das Fenster NICHT von selbst. pruef-creator-anlegen.mjs, 29 Pruefungen, alle gruen -- und die Haelfte davon prueft, was NICHT geht: Personenverwaltung 404 fuer Manager, Scout und Creator kommen gar nicht erst durch, fremder Scout 403 (und der Creator wird dabei gar nicht erst angelegt), erfundene Nummer 403. Zwei Manager mit je einem eigenen Scout, weil sich "nur die eigenen" mit nur einem Manager gar nicht pruefen laesst. Nebenbei: .feld-hinweis ist von bereich.css nach aufgaben.css gewandert (zu den uebrigen Formularstilen) -- ein Formularbaustein in der Bereichsdatei ist nur so lange richtig, wie ihn keine zweite Seite braucht. Gruen: creator-anlegen (29), personen-liste (33), css-klassen (15), struktur (32), formulare (19). Co-Authored-By: Claude Opus 5 <[email protected]>
398 lines
15 KiB
CSS
398 lines
15 KiB
CSS
/* ===================================================================
|
|
Gemeinsame Ansicht für LIVE, Content, Technik, Community und Schutz.
|
|
=================================================================== */
|
|
|
|
.eintrag-karte {
|
|
padding: 15px 17px; margin-bottom: 10px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand);
|
|
border-left: 3px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
.eintrag-karte[data-dringlich="hoch"] { border-left-color: #d8656e; }
|
|
.eintrag-karte[data-dringlich="mittel"] { border-left-color: #4b6c8a; }
|
|
.eintrag-karte[data-dringlich="niedrig"] { border-left-color: #3c4a5a; }
|
|
.eintrag-karte[data-status="erledigt"] { opacity: .55; }
|
|
|
|
.eintrag-kopf {
|
|
display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
|
|
}
|
|
.eintrag-titel { font-weight: 600; font-size: .96rem; flex: 1 1 240px; }
|
|
|
|
.marke-art {
|
|
padding: 1px 9px; border-radius: 999px;
|
|
background: rgba(63, 189, 245, .14); color: #7fd2fb;
|
|
font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Bewertung als Punktreihe statt als Zahl -- auf einen Blick erfassbar,
|
|
und ohne Sterne, die im Dunkeln flimmern. */
|
|
.bewertung { display: inline-flex; gap: 3px; align-items: center; }
|
|
.bewertung__punkt {
|
|
width: 7px; height: 7px; border-radius: 50%;
|
|
background: rgba(150, 186, 220, .22);
|
|
}
|
|
.bewertung__punkt[data-voll="ja"] { background: var(--akzent); }
|
|
|
|
.eintrag-text {
|
|
margin: 9px 0 0; font-size: .87rem; color: var(--text-leise);
|
|
line-height: 1.55; white-space: pre-wrap;
|
|
}
|
|
|
|
.eintrag-fuss {
|
|
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
|
margin-top: 11px; font-size: .77rem; color: var(--text-still);
|
|
}
|
|
.eintrag-knoepfe { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
|
|
|
|
.filter { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
|
|
.filter .schritt[aria-pressed="true"] {
|
|
/* Gedrueckt = der "voll"-Auftritt des Knopf-Systems. Vorher stand
|
|
hier eine eigene Flaeche, die den geschliffenen Rand ueberschrieb. */
|
|
--f: var(--akzent);
|
|
color: #fff;
|
|
background:
|
|
linear-gradient(color-mix(in srgb, var(--f) 20%, #121926),
|
|
color-mix(in srgb, var(--f) 12%, #0d1420)) padding-box,
|
|
linear-gradient(150deg, var(--f),
|
|
color-mix(in srgb, var(--f) 45%, transparent)) border-box;
|
|
box-shadow: 0 4px 16px -9px var(--f);
|
|
}
|
|
|
|
|
|
@media (max-width: 620px) {
|
|
.eintrag-knoepfe { margin-left: 0; width: 100%; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
UNTERWEISUNGEN — beidseitig bestaetigen
|
|
|
|
Drei Stufen, drei Farben. Die mittlere ("halb") ist die wichtigste:
|
|
Ein Nachweis, bei dem nur einer unterschrieben hat, ist KEIN Nachweis.
|
|
Wer das nicht sieht, haelt ihn fuer fertig -- und merkt es erst, wenn
|
|
jemand danach fragt. Deshalb bekommt sie eine eigene, warnende Farbe
|
|
und nicht einfach ein blasses Gruen.
|
|
===================================================================== */
|
|
|
|
.schulung { margin: 0 0 30px; }
|
|
.schulung__kopf {
|
|
display: flex; align-items: flex-end; justify-content: space-between;
|
|
gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
|
|
}
|
|
.schulung__unter {
|
|
margin: 4px 0 0; max-width: 68ch;
|
|
font-size: .86rem; line-height: 1.55; color: var(--text-leise);
|
|
}
|
|
.schulung__wahl { display: grid; gap: 4px; min-width: 0; }
|
|
.schulung__liste { display: grid; gap: 11px; }
|
|
|
|
.unterweisung {
|
|
--stufe-ton: var(--text-still);
|
|
position: relative; overflow: hidden;
|
|
padding: 15px 17px 14px;
|
|
border: 1px solid color-mix(in srgb, var(--stufe-ton) 26%, var(--rand));
|
|
border-radius: var(--radius-klein);
|
|
background:
|
|
linear-gradient(90deg, color-mix(in srgb, var(--stufe-ton) 8%, transparent), transparent 55%),
|
|
var(--flaeche);
|
|
}
|
|
.unterweisung::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: linear-gradient(180deg, var(--stufe-ton),
|
|
color-mix(in srgb, var(--stufe-ton) 30%, transparent));
|
|
}
|
|
.unterweisung[data-stufe="offen"] { --stufe-ton: #6f89a8; }
|
|
/* Bewusst warnend: halb bestaetigt sieht nach fertig aus, ist es aber
|
|
nicht. Diese Verwechslung ist genau die, die einen Nachweis wertlos
|
|
macht. */
|
|
.unterweisung[data-stufe="halb"] { --stufe-ton: #e0a33c; }
|
|
.unterweisung[data-stufe="fertig"] { --stufe-ton: #4dab77; }
|
|
|
|
.unterweisung__kopf {
|
|
display: flex; align-items: flex-start; justify-content: space-between;
|
|
gap: 14px; margin-bottom: 12px;
|
|
}
|
|
.unterweisung__titel { margin: 0 0 3px; font-size: .98rem; font-weight: 650; color: var(--text); }
|
|
.unterweisung__datei { margin: 0; font-size: .8rem; color: var(--ton, var(--akzent)); }
|
|
.unterweisung__text { margin: 5px 0 0; font-size: .85rem; color: var(--text-leise); }
|
|
.unterweisung__marke {
|
|
flex: none; padding: 3px 11px;
|
|
border: 1px solid color-mix(in srgb, var(--stufe-ton) 36%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--stufe-ton) 12%, transparent);
|
|
color: var(--stufe-ton);
|
|
font-size: .72rem; letter-spacing: .06em;
|
|
}
|
|
|
|
/* Die beiden Unterschriften nebeneinander -- man soll auf einen Blick
|
|
sehen, WER fehlt, nicht nur DASS etwas fehlt. */
|
|
.unterschriften {
|
|
display: grid; gap: 8px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
|
|
margin-bottom: 12px;
|
|
}
|
|
.unterschrift {
|
|
display: grid; gap: 2px;
|
|
padding: 9px 12px;
|
|
border: 1px solid var(--rand); border-radius: 8px;
|
|
background: rgba(0, 0, 0, .18);
|
|
}
|
|
.unterschrift[data-da="ja"] {
|
|
border-color: rgba(80, 167, 130, .32);
|
|
background: rgba(80, 167, 130, .07);
|
|
}
|
|
.unterschrift__wer {
|
|
font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.unterschrift__wann { font-size: .84rem; color: var(--text); }
|
|
.unterschrift[data-da="nein"] .unterschrift__wann { color: var(--text-still); font-style: italic; }
|
|
|
|
.unterweisung__fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
|
.unterweisung__fest { font-size: .82rem; color: #6fbd95; }
|
|
.unterweisung__wartet { font-size: .82rem; color: #e0b45c; }
|
|
/* Ausgetauschtes Dokument: Das ist der einzige Fall, in dem ein
|
|
abgeschlossener Nachweis seinen Wert verliert -- und dann muss es
|
|
auch laut sein. */
|
|
.unterweisung__warnung {
|
|
padding: 3px 10px;
|
|
border: 1px solid rgba(255, 154, 162, .4); border-radius: 999px;
|
|
background: rgba(255, 154, 162, .1);
|
|
color: var(--warn); font-size: .8rem; font-weight: 600;
|
|
}
|
|
|
|
.schulung__neu {
|
|
margin-top: 18px; padding: 16px 17px;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
}
|
|
.schulung__neu .neu__raster { margin-top: 12px; }
|
|
.schulung__neu .knopf { margin-top: 12px; }
|
|
|
|
@media (max-width: 560px) {
|
|
.schulung__kopf { flex-direction: column; align-items: stretch; }
|
|
.unterweisung__kopf { flex-direction: column; }
|
|
.unterweisung__marke { align-self: flex-start; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
AMPEL UND RUECKMELDUNG
|
|
|
|
Drei Stufen, drei Farben. Die Stufe steht IMMER da -- auch fuer den
|
|
Creator, auch wenn sie "noch nicht angesehen" lautet. Das ist der
|
|
ganze Sinn: Er soll sehen, wo er steht, ohne fragen zu muessen.
|
|
===================================================================== */
|
|
|
|
.ampel {
|
|
--a-ton: #6f89a8;
|
|
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
|
margin-top: 11px; padding-top: 11px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.ampel[data-stufe="gut"] { --a-ton: #4dab77; }
|
|
.ampel[data-stufe="verbessern"] { --a-ton: #e0a33c; }
|
|
.ampel[data-stufe="offen"] { --a-ton: #6f89a8; }
|
|
|
|
.ampel__marke {
|
|
display: inline-flex; align-items: center; gap: 7px;
|
|
padding: 3px 11px;
|
|
border: 1px solid color-mix(in srgb, var(--a-ton) 38%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--a-ton) 13%, transparent);
|
|
color: var(--a-ton);
|
|
font-size: .76rem; font-weight: 600;
|
|
}
|
|
.ampel__marke::before {
|
|
content: ""; width: 8px; height: 8px; border-radius: 50%;
|
|
background: var(--a-ton);
|
|
box-shadow: 0 0 8px color-mix(in srgb, var(--a-ton) 70%, transparent);
|
|
}
|
|
.ampel__von { font-size: .76rem; color: var(--text-still); }
|
|
/* Der Grund steht auf einer eigenen Zeile und in voller Breite --
|
|
"noch verbessern" ohne Grund ist nicht umsetzbar, nur entmutigend.
|
|
Deshalb darf er nicht in eine Ecke gequetscht werden. */
|
|
.ampel__grund {
|
|
flex-basis: 100%; margin: 4px 0 0;
|
|
padding: 8px 11px;
|
|
border-left: 2px solid var(--a-ton);
|
|
border-radius: 0 6px 6px 0;
|
|
background: color-mix(in srgb, var(--a-ton) 8%, transparent);
|
|
font-size: .85rem; line-height: 1.5; color: var(--text);
|
|
}
|
|
.ampel .schritt { margin-left: auto; }
|
|
|
|
/* ---------- Der ausgeklappte Bereich ------------------------------------ */
|
|
.rueckmeldung {
|
|
margin-top: 11px; padding: 13px 14px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: rgba(0, 0, 0, .2);
|
|
}
|
|
.rueckmeldung__hinweis {
|
|
margin: 0 0 12px; font-size: .84rem; color: var(--text-leise);
|
|
}
|
|
.rueckmeldung__bewerten { margin-bottom: 14px; }
|
|
.ampel__wahl { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
|
|
.ampel__knopf {
|
|
padding: 8px 14px;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
background: var(--flaeche);
|
|
color: var(--text-leise);
|
|
font: inherit; font-size: .84rem; cursor: pointer;
|
|
transition: border-color .18s ease, color .18s ease, background .18s ease;
|
|
}
|
|
.ampel__knopf[data-stufe="gut"]:hover,
|
|
.ampel__knopf[data-stufe="gut"][data-an="ja"] {
|
|
border-color: rgba(77, 171, 119, .5); color: #6fbd95;
|
|
background: rgba(77, 171, 119, .12);
|
|
}
|
|
.ampel__knopf[data-stufe="verbessern"]:hover,
|
|
.ampel__knopf[data-stufe="verbessern"][data-an="ja"] {
|
|
border-color: rgba(224, 163, 60, .5); color: #e0b45c;
|
|
background: rgba(224, 163, 60, .12);
|
|
}
|
|
|
|
/* ---------- Das Gespraech ------------------------------------------------ */
|
|
.nachrichten { display: grid; gap: 8px; margin-bottom: 12px; }
|
|
.nachrichten__leer { margin: 0; font-size: .84rem; color: var(--text-still); }
|
|
.nachricht {
|
|
padding: 9px 12px;
|
|
border: 1px solid var(--rand); border-radius: 9px;
|
|
background: var(--flaeche);
|
|
}
|
|
/* Eigene Nachrichten heben sich ab -- in einem Gespraech will man auf
|
|
einen Blick sehen, was man selbst gesagt hat. */
|
|
.nachricht[data-eigen="ja"] {
|
|
border-color: color-mix(in srgb, var(--akzent) 26%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 7%, var(--flaeche));
|
|
}
|
|
.nachricht__kopf {
|
|
display: flex; align-items: center; gap: 9px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.nachricht__von { font-size: .8rem; font-weight: 650; color: var(--text); }
|
|
.nachricht__wann { font-size: .74rem; color: var(--text-still); }
|
|
.nachricht__weg {
|
|
margin-left: auto;
|
|
width: 24px; height: 24px;
|
|
border: 0; border-radius: 6px;
|
|
background: none; color: var(--text-still);
|
|
font-size: 1rem; line-height: 1; cursor: pointer;
|
|
}
|
|
.nachricht__weg:hover { color: var(--warn); background: rgba(255, 154, 162, .1); }
|
|
.nachricht__text {
|
|
margin: 0; font-size: .87rem; line-height: 1.55; color: var(--text);
|
|
white-space: pre-wrap; overflow-wrap: anywhere;
|
|
}
|
|
|
|
.nachricht-neu { display: grid; gap: 8px; }
|
|
/* Aussehen, Rahmen, Schrift und Fokusring stehen seit dem 01.09.2026
|
|
EINMAL in start.css (":where(.inhalt) :where(input, textarea, select)").
|
|
Die Kopie, die hier stand, war Wort fuer Wort dieselbe -- und genau so
|
|
entstehen zwei Feld-Optiken auf einer Seite, sobald eine der beiden
|
|
verbessert wird. Hier bleibt nur, was WIRKLICH nur hier gilt. */
|
|
.nachricht-neu textarea { width: 100%; min-height: 44px; }
|
|
.nachricht-neu .knopf { justify-self: start; }
|
|
|
|
@media (max-width: 560px) {
|
|
.ampel .schritt { margin-left: 0; }
|
|
.ampel__knopf { flex: 1 1 auto; text-align: center; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
AGENTUR-EVENTS (07.09.2026)
|
|
|
|
Ein Event ist die einzige Eintragsart, die eine LAUFZEIT hat. Alles
|
|
andere in diesen Bereichen ist ein Vermerk zu einem Tag; ein Event
|
|
ist eine Einladung, an der man teilnehmen kann -- oder eben nicht
|
|
mehr. Deshalb ist der Zustand (kommt / läuft / vorbei) das Erste auf
|
|
der Karte und nicht eine Fussnote.
|
|
|
|
Farbe wird hier als AUSKUNFT eingesetzt, nicht als Schmuck: gedecktes
|
|
Grün heisst "du kannst mitmachen", Bernstein "noch nicht", Grau
|
|
"vorbei". Die Farben stammen aus derselben Familie wie die Ampel
|
|
(--k-gut / --k-mittel), damit nicht zwei Bedeutungssysteme
|
|
nebeneinander laufen. Und weil Farbe allein nie ausreicht, steht der
|
|
Zustand zusaetzlich als WORT da ("läuft bis 30.09.2026").
|
|
===================================================================== */
|
|
|
|
.event-zeitraum {
|
|
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
|
|
margin: 2px 0 10px;
|
|
font-size: .82rem;
|
|
}
|
|
.event-zeitraum__marke {
|
|
--f: var(--k-neutral);
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 3px 10px;
|
|
border: 1px solid color-mix(in srgb, var(--f) 34%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--f) 12%, transparent);
|
|
color: color-mix(in srgb, var(--f) 82%, #fff);
|
|
font-weight: 600; letter-spacing: .01em;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* Der Punkt davor ist reine Zierde und darf deshalb NICHT vorgelesen
|
|
werden -- ein Screenreader saehe sonst ein Aufzaehlungszeichen mitten
|
|
im Satz. */
|
|
.event-zeitraum__marke::before {
|
|
content: ""; width: 7px; height: 7px; border-radius: 50%;
|
|
background: var(--f); flex: none;
|
|
}
|
|
.event-zeitraum[data-stand="laeuft"] .event-zeitraum__marke { --f: var(--k-gut); }
|
|
.event-zeitraum[data-stand="kommt"] .event-zeitraum__marke { --f: var(--k-mittel); }
|
|
.event-zeitraum[data-stand="vorbei"] .event-zeitraum__marke { --f: var(--k-neutral); }
|
|
.event-zeitraum__spanne {
|
|
color: var(--text-leise);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Ein vorbeigelaufenes Event bleibt lesbar, tritt aber zurueck. Kein
|
|
display:none -- was gelaufen ist, will man nachschlagen koennen.
|
|
Gedaempft wird nur die Flaeche, nicht die Schrift: Text unter 4.5:1
|
|
waere nicht mehr lesbar, und "alt" ist kein Grund, jemanden
|
|
auszuschliessen. */
|
|
.eintrag-karte[data-event="vorbei"] { opacity: .82; }
|
|
|
|
.event-block {
|
|
margin: 10px 0 0;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
background: rgba(255, 255, 255, .022);
|
|
}
|
|
.event-block__schild {
|
|
margin: 0 0 4px;
|
|
/* .74rem = 11.84 px, nicht .7rem. Die Schriftgroessen-Pruefung zieht
|
|
die Grenze bei 11.5 px, und sie hat recht: In Grossbuchstaben mit
|
|
Sperrung wirkt eine Schrift kleiner, als die Zahl sagt -- und das
|
|
hier ist die Beschriftung, an der man die Regeln vom Aufgabenteil
|
|
unterscheidet. */
|
|
font-size: .74rem; font-weight: 700;
|
|
letter-spacing: .09em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.event-block__text {
|
|
margin: 0;
|
|
font-size: .87rem; line-height: 1.6; color: var(--text);
|
|
/* pre-line, nicht pre-wrap: Zeilenumbrueche bleiben (die Aufzaehlung
|
|
ist der Sinn dieser Felder), aber eine versehentlich eingefuegte
|
|
Einrueckung aus einer Chatnachricht reisst die Karte nicht auf. */
|
|
white-space: pre-line;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* .feld-hinweis steht seit dem 07.09.2026 in aufgaben.css -- bei den
|
|
uebrigen Formularstilen. Grund: Die Dashboard-Seite braucht ihn jetzt
|
|
auch (Creator anlegen), laedt aber diese Datei hier nicht. Ein
|
|
Formularbaustein, der in der Bereichsdatei liegt, ist nur so lange
|
|
richtig, wie ihn keine zweite Seite braucht. */
|
|
|
|
@media (max-width: 560px) {
|
|
/* Auf dem Handy untereinander: Marke und Spanne nebeneinander
|
|
ergaeben bei "vorbei seit 30.09.2026" einen Umbruch mitten im
|
|
Datum. */
|
|
.event-zeitraum { gap: 6px; }
|
|
.event-zeitraum__spanne { flex-basis: 100%; }
|
|
}
|