DogFatherGitandClaude Opus 5
670940bd3a
Aus dem Plan im Vault. Diese Stufe steht dort bewusst VOR Galerie und
Gespraech: Mehr Sichtbarkeit heisst mehr Angriffsflaeche, und ein
Bereich, der waechst und keine Bremse hat, waechst genau einmal.
DER TREFF HATTE SCHON MEHR, ALS MEIN PLAN ANNAHM
Stufen (WER schreiben darf: neu, dabei, stamm) und Massnahmen (wer
NICHT MEHR darf: Hinweis, Pause, Ausschluss). Gefehlt hat die Frage
dazwischen: WIE SCHNELL. Ein Stammgast konnte in einer Minute vierzig
Beitraege absetzen -- aus Aerger, aus Versehen oder per Skript.
DIE STILLE SPERRE IST VERWORFEN -- nach einer Messung, nicht nach
einem Gefuehl. `gast` ist eine Rolle mit Zugangscode, es gibt KEINE
Selbstanmeldung. Wer ausgeschlossen wird, kann sich nicht neu
anmelden. Damit loest ein Shadowban ein Problem, das dieses System
nicht hat; er bliebe ein Werkzeug, das Menschen taeuscht, ohne etwas
zu verhindern. Steht jetzt in §9 des Plans: was wir NICHT bauen.
DIE BREMSE: 10 Beitraege je Stunde und Person, nur auf den
Community-Brettern. Keine neue Tabelle -- die Antwort steht schon in
`eintraege`, eine Zaehlung ueber die letzte Stunde genuegt. Eine eigene
Tabelle waere ein zweiter Ort fuer dieselbe Wahrheit und muesste
zusaetzlich aufgeraeumt werden.
Die Absage sagt, WANN es weitergeht ("In 37 Minuten"). Ohne Zeitangabe
probiert jemand im Minutentakt weiter -- genau die Last, die man
verhindern wollte.
MEIN ERSTER ENTWURF BREMSTE DIE FALSCHE ARBEIT: Er zaehlte ALLE
Eintraege. Eine Creatorin mit zehn Content-Ideen haette danach im Treff
nichts mehr schreiben koennen. Eine Bremse, die das richtige Verhalten
bestraft, wird abgeschaltet -- und ist ab da wirkungslos.
DIE TEAM-SICHT: "Was hereinkommt", ganz oben auf der Moderationsseite,
vor den offenen Meldungen. Eine Meldung setzt voraus, dass jemand etwas
GESEHEN hat -- und wer acht Bretter durchklicken muss, tut das nicht
achtmal am Tag. Eine Zeile je Beitrag statt einer Karte: Hier
ueberfliegt man, man liest nicht. Der Inhalt steht auf dem Brett; eine
Vorschau waere eine zweite Stelle, an der derselbe Beitrag steht.
NEU: pruef-bremse (16 Pruefungen)
Die Grenze wird aus dem Code GELESEN, nicht abgeschrieben -- sonst
misst die Pruefung beim naechsten Anpassen etwas anderes als der
Server tut. Dazu die drei Fragen: Greift sie? Trifft sie die richtige
Arbeit (Content bleibt offen, das zweite Treff-Brett nicht)? Und laesst
sie den normalen Fall in Ruhe? Gegenprobe: Beitraege auf vorgestern
zurueckdatiert -- danach muss es sofort wieder gehen.
pruef-treff 66, pruef-wunschliste 30, pruef-countdown 22,
pruef-bereiche-lesend, pruef-css-klassen: gruen.
Co-Authored-By: Claude Opus 5 <[email protected]>
438 lines
16 KiB
CSS
438 lines
16 KiB
CSS
/* =====================================================================
|
|
Der Treff — die beiden Textseiten (11.09.2026)
|
|
|
|
Regeln & Hilfe (für die Community) und „Wer sieht was" (für
|
|
DogFather). Beides sind LESESEITEN: langer, zusammenhängender Text
|
|
und eine Tabelle, keine Kartenwand.
|
|
|
|
---------------------------------------------------------------------
|
|
WARUM SIE KEINE MODULKARTEN SIND
|
|
|
|
Die naheliegende Wahl wäre `.eintrag-karte` oder ein neuer Eintrag in
|
|
der MODULLISTE gewesen — dann sähen die Abschnitte aus wie alles
|
|
andere im Haus: geschliffene Fase, Kantenlicht, Sternenfeld.
|
|
|
|
Dagegen sprechen zwei Dinge, und das zweite wiegt schwerer:
|
|
|
|
1. Die MODULLISTE steht siebenmal in module.css und wird von
|
|
pruef-css-klassen Zeichen für Zeichen verglichen. Eine achte Klasse
|
|
hätte an sieben Stellen dasselbe ergänzen müssen — machbar, aber
|
|
jede dieser sieben ist eine Gelegenheit für einen Unterschied.
|
|
|
|
2. Karten zerteilen. Ein Regeltext ist ein Text, den man von oben
|
|
nach unten liest; sieben Karten daraus zu machen heißt, sieben
|
|
Anfänge zu machen. Genau das ist bei Regeln der Fehler: Wer nach
|
|
der dritten Karte aufhört, hat vier Regeln nicht gelesen und
|
|
glaubt trotzdem, er kenne sie.
|
|
|
|
Deshalb hier nur so viel Trennung, dass man die Abschnitte findet —
|
|
eine Linie und Abstand, keine Kante.
|
|
===================================================================== */
|
|
|
|
/* EIN RUHIGER GRUND — und er kam erst nach einem Blick (11.09.2026).
|
|
|
|
Hier stand zuerst nur eine Trennlinie und sonst nichts: kein
|
|
Hintergrund, damit ein langer Text nicht in Karten zerfällt. Die
|
|
Zahlen waren alle grün — die Kontrastmessung rechnete gegen
|
|
#07060f, den Ton des Hauses.
|
|
|
|
Im Bildschirmfoto lag hinter der Rechtetafel die BÜHNE: das
|
|
Spicy-Media-Motiv, Neonlicht, Chilischoten, ein Wasserfall. Die
|
|
Zeilen der Tabelle standen mitten darin. Lesbar war es knapp — aber
|
|
die Messung hatte den Grund gar nicht gemessen, sie hatte ihn
|
|
angenommen. Ein grüner Haken über einer falschen Voraussetzung.
|
|
|
|
Jetzt liegt unter jedem Abschnitt eine deckende Fläche. Das ist
|
|
KEINE Kartenwand: keine Fase, kein Kantenlicht, kein Sternenfeld —
|
|
nur ein Blatt Papier, auf dem der Text steht. Der Einwand von oben
|
|
(Karten zerteilen einen Text) bleibt damit gewahrt, und die Bühne
|
|
bleibt ringsum sichtbar.
|
|
|
|
DECKEND, NICHT FAST DECKEND: color-mix mit einem opaken Ton ergibt
|
|
wieder einen opaken. Ein rgba(…, .89) hätte auf dem Papier fast
|
|
gleich ausgesehen und die Messung weiterhin raten lassen — und die
|
|
Prüfung sagt jetzt ausdrücklich Nein dazu (siehe
|
|
pruef-treff-seiten, "der Grund wurde gemessen"). */
|
|
.treff-abschnitt {
|
|
margin: 0 0 16px;
|
|
padding: 18px 20px;
|
|
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
|
border: 1px solid var(--rand);
|
|
}
|
|
|
|
.treff-abschnitt__titel {
|
|
margin: 0 0 10px;
|
|
font-size: 1.06rem;
|
|
font-weight: 650;
|
|
letter-spacing: .005em;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* Der Lesefluss ist hier die eigentliche Aufgabe.
|
|
|
|
1,72 statt der üblichen 1,55: Auf einem Handy stehen in einer Zeile
|
|
etwa 42 Zeichen; bei engem Zeilenabstand verliert man beim Sprung an
|
|
den Zeilenanfang die Zeile. Das merkt niemand als „schlechter
|
|
Zeilenabstand" — man liest den Absatz einfach zweimal und hält den
|
|
Text für kompliziert.
|
|
|
|
Und eine Breitengrenze: Über etwa 70 Zeichen je Zeile wird derselbe
|
|
Sprung wieder schwierig, nur von der anderen Seite. Auf einem breiten
|
|
Bildschirm liefe der Regeltext sonst über 1100 Pixel. */
|
|
.treff-abschnitt__inhalt { max-width: 68ch; }
|
|
.treff-abschnitt__inhalt p {
|
|
margin: 0 0 12px;
|
|
font-size: .92rem;
|
|
line-height: 1.72;
|
|
color: var(--text-leise);
|
|
}
|
|
.treff-abschnitt__inhalt p:last-child { margin-bottom: 0; }
|
|
.treff-abschnitt__inhalt strong { color: var(--text); font-weight: 640; }
|
|
|
|
/* Die Aufzählungen. Die Zahl bzw. der Punkt steht AUSSERHALB des
|
|
Textblocks — so beginnt jede Zeile einer mehrzeiligen Regel an
|
|
derselben Stelle, und die Liste bleibt als Liste lesbar. */
|
|
.regel-liste {
|
|
margin: 0 0 12px;
|
|
padding-left: 1.35em;
|
|
font-size: .92rem;
|
|
line-height: 1.72;
|
|
color: var(--text-leise);
|
|
}
|
|
.regel-liste li { margin: 0 0 9px; padding-left: .2em; }
|
|
.regel-liste li:last-child { margin-bottom: 0; }
|
|
.regel-liste li::marker { color: var(--text-still); }
|
|
.regel-liste strong { color: var(--text); font-weight: 640; }
|
|
|
|
/* =====================================================================
|
|
„WER SIEHT WAS" — die Rechtetafel als Tabelle
|
|
|
|
Sie wird aus der echten Tafel gerechnet (rechte.js), nicht gepflegt.
|
|
Was sie leisten muss: Man soll eine LÜCKE sehen, ohne zu suchen.
|
|
===================================================================== */
|
|
|
|
.rechte-tafel { overflow-x: auto; margin: 0 0 26px; }
|
|
|
|
.rechte-tafel table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
font-size: .82rem;
|
|
}
|
|
|
|
/* Die Kopfzeile bleibt stehen. Bei 22 Zeilen und acht Spalten hat man
|
|
sonst nach dem halben Scrollen vergessen, welche Spalte welche Rolle
|
|
ist — und rät. Bei einer Rechteübersicht ist Raten das Gegenteil des
|
|
Zwecks. */
|
|
.rechte-tafel thead th {
|
|
position: sticky; top: 0; z-index: 1;
|
|
/* Deckend, nicht var(--flaeche): Die Kopfzeile klebt beim Scrollen
|
|
oben fest, und eine halbdurchsichtige Fläche würde dabei die
|
|
Zeilen durchscheinen lassen, über die sie gerade läuft. */
|
|
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
|
padding: 9px 8px;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
color: var(--text-leise);
|
|
border-bottom: 1px solid var(--rand-hell);
|
|
white-space: nowrap;
|
|
}
|
|
.rechte-tafel thead th:first-child { text-align: left; }
|
|
|
|
.rechte-tafel td {
|
|
padding: 7px 8px;
|
|
border-bottom: 1px solid var(--rand);
|
|
text-align: center;
|
|
color: var(--text-still);
|
|
}
|
|
.rechte-tafel td:first-child {
|
|
text-align: left;
|
|
color: var(--text-leise);
|
|
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
|
|
font-size: .79rem;
|
|
white-space: nowrap;
|
|
}
|
|
.rechte-tafel tbody tr:hover td { background: rgba(255, 255, 255, .025); }
|
|
|
|
/* JA UND NEIN SIND NICHT GRÜN UND ROT.
|
|
|
|
Das wäre die naheliegende Wahl und hier die falsche: In dieser
|
|
Tabelle ist ein „nein" nichts Schlechtes — es ist der Normalfall und
|
|
genau das, was Filipe wollte. Grün/Rot würde eine Tafel mit 140
|
|
roten Feldern erzeugen, die aussieht wie ein Schadensbericht.
|
|
|
|
Stattdessen: sichtbar gegen leise. Ein Punkt, wo es erlaubt ist,
|
|
nichts, wo nicht. Man sieht die Zeilen mit vielen Punkten sofort —
|
|
und das ist die Frage, die man an diese Tabelle hat. */
|
|
.rechte-ja {
|
|
display: inline-block; width: 7px; height: 7px; border-radius: 50%;
|
|
background: var(--akzent);
|
|
box-shadow: 0 0 8px -2px var(--akzent);
|
|
}
|
|
.rechte-nein { color: var(--text-still); opacity: .3; }
|
|
|
|
/* Die Zählzeile über der Tabelle: „Community — 3 von 22 Seiten". Das
|
|
ist die eine Zahl, die die ganze Frage beantwortet. */
|
|
.rechte-zahlen {
|
|
display: flex; flex-wrap: wrap; gap: 8px;
|
|
margin: 0 0 18px; padding: 0; list-style: none;
|
|
}
|
|
.rechte-zahlen li {
|
|
padding: 6px 11px;
|
|
border: 1px solid var(--rand-hell);
|
|
border-radius: 999px;
|
|
font-size: .8rem;
|
|
color: var(--text-leise);
|
|
}
|
|
.rechte-zahlen li b { color: var(--text); font-weight: 650; }
|
|
|
|
@media (max-width: 620px) {
|
|
.treff-abschnitt__inhalt p, .regel-liste { font-size: .95rem; }
|
|
.rechte-tafel table { font-size: .78rem; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
DER WEG ZU DEN REGELN — auf jedem Brett des Treffs
|
|
|
|
Er steht direkt unter der Unterzeile und sieht aus wie ein Link,
|
|
nicht wie ein Knopf. Das ist Absicht: Ein Knopf verspricht, dass
|
|
etwas PASSIERT; hier wechselt man nur die Seite. Wer auf jedem Brett
|
|
einen zusätzlichen Knopf sieht, zählt ihn nach zwei Tagen zum
|
|
Hintergrund.
|
|
===================================================================== */
|
|
.treff-regelweg {
|
|
display: inline-block;
|
|
margin-top: 6px;
|
|
font-size: .82rem;
|
|
color: var(--text-leise);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--rand-hell);
|
|
padding-bottom: 1px;
|
|
}
|
|
.treff-regelweg:hover, .treff-regelweg:focus-visible {
|
|
color: var(--text);
|
|
border-bottom-color: color-mix(in srgb, var(--akzent) 55%, transparent);
|
|
}
|
|
|
|
/* Links im Fließtext der Regelseite. Unterstrichen, weil Farbe allein
|
|
kein Unterschied ist, den jeder sieht (WCAG 1.4.1). */
|
|
.treff-abschnitt__inhalt a {
|
|
color: var(--text);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
text-decoration-color: color-mix(in srgb, var(--akzent) 55%, transparent);
|
|
}
|
|
.treff-abschnitt__inhalt a:hover {
|
|
text-decoration-color: var(--akzent);
|
|
}
|
|
|
|
/* =====================================================================
|
|
MELDUNGEN & MASSNAHMEN — ein Fall je Karte
|
|
|
|
Karten sind hier richtig, wo sie beim Regeltext falsch waren: Es sind
|
|
EINZELNE Vorgänge, die man einzeln entscheidet. Jeder Anfang ist ein
|
|
neuer Fall, und das soll man sehen.
|
|
===================================================================== */
|
|
.treff-fall {
|
|
margin: 0 0 12px;
|
|
padding: 13px 15px;
|
|
border: 1px solid var(--rand);
|
|
border-left: 2px solid color-mix(in srgb, var(--akzent) 45%, transparent);
|
|
background: rgba(255, 255, 255, .018);
|
|
}
|
|
|
|
/* Was schon entschieden ist, tritt zurück -- aber es verschwindet
|
|
nicht. Ausblenden wäre bequemer und wäre falsch: Man muss nachsehen
|
|
können, wie ein ähnlicher Fall damals entschieden wurde. */
|
|
.treff-fall[data-vorbei="ja"] {
|
|
opacity: .62;
|
|
border-left-color: var(--rand);
|
|
}
|
|
|
|
.treff-fall__titel {
|
|
margin: 0 0 8px;
|
|
font-size: .95rem;
|
|
font-weight: 640;
|
|
color: var(--text);
|
|
}
|
|
|
|
.treff-fall__zeile {
|
|
margin: 0 0 5px;
|
|
font-size: .85rem;
|
|
line-height: 1.6;
|
|
color: var(--text-leise);
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.treff-fall__zeile:last-of-type { margin-bottom: 0; }
|
|
|
|
/* Das Schild steht in fester Breite links. Ohne sie beginnt jede Zeile
|
|
woanders, und man liest die Liste als Fließtext statt als Angaben --
|
|
bei fünf Zeilen je Fall ist das der Unterschied zwischen Überfliegen
|
|
und Lesenmüssen. */
|
|
.treff-fall__schild {
|
|
flex: 0 0 7.5em;
|
|
color: var(--text-still);
|
|
font-size: .78rem;
|
|
text-transform: lowercase;
|
|
padding-top: .1em;
|
|
}
|
|
|
|
.treff-fall__knoepfe {
|
|
display: flex; gap: 7px; flex-wrap: wrap;
|
|
margin-top: 11px; padding-top: 10px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
/* Der Link "zum Brett" sieht aus wie die Knöpfe daneben -- er tut ja
|
|
dasselbe: Er bringt einen woandershin. Ein Link, der zwischen zwei
|
|
Knöpfen anders aussieht, wird für Text gehalten. */
|
|
.treff-fall__knoepfe a.schritt { text-decoration: none; }
|
|
|
|
@media (max-width: 620px) {
|
|
/* Untereinander statt nebeneinander: Bei 7,5em Schild und 42 Zeichen
|
|
Zeilenbreite blieben für den Wert noch etwa 20 Zeichen -- ein Grund
|
|
in zwei Wörtern je Zeile. */
|
|
.treff-fall__zeile { display: block; }
|
|
.treff-fall__schild { display: block; padding: 0 0 1px; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE TAFEL IST SEIT DEM 11.09.2026 BEDIENBAR
|
|
|
|
Aus jedem Feld wird ein Schalter. Zwei Dinge müssen dabei sichtbar
|
|
sein, und beide sind leicht zu übersehen:
|
|
|
|
1. DASS man klicken kann. Ein Punkt in einer Tabelle sieht nach
|
|
Anzeige aus, nicht nach Bedienelement — deshalb bekommt jedes
|
|
Feld eine Fläche, die auf Mauszeiger und Tastaturfokus
|
|
antwortet.
|
|
|
|
2. WAS von Hand gesetzt ist. Der Code ist der Grundstand; was davon
|
|
abweicht, hat jemand entschieden. Ohne Markierung wüsste nach
|
|
vier Wochen niemand mehr, was gedacht war.
|
|
|
|
UND DIE FLÄCHE IST GROSS GENUG ZUM TIPPEN. 34 mal 30 Pixel — unter
|
|
der üblichen Empfehlung von 44, aber das ist eine Tabelle mit acht
|
|
Spalten auf einem Handy, und ein größeres Feld hieße weniger Spalten.
|
|
Der Ausgleich ist der Abstand: zwischen zwei Feldern liegen die
|
|
Zellenränder, sodass man nicht auf den Nachbarn kommt.
|
|
===================================================================== */
|
|
|
|
.rechte-leiste {
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
|
|
margin: 0 0 20px; padding: 12px 16px;
|
|
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
|
border: 1px solid var(--rand);
|
|
}
|
|
.rechte-leiste__satz {
|
|
flex: 1 1 240px; font-size: .85rem; line-height: 1.55; color: var(--text-leise);
|
|
}
|
|
|
|
.rechte-feld {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 34px; height: 30px; padding: 0; cursor: pointer;
|
|
font: inherit;
|
|
background: transparent;
|
|
border: 1px solid transparent; border-radius: 6px;
|
|
transition: background .14s ease, border-color .14s ease;
|
|
}
|
|
.rechte-feld:hover:not(:disabled) {
|
|
background: rgba(255, 255, 255, .07);
|
|
border-color: var(--rand-hell);
|
|
}
|
|
.rechte-feld:focus-visible {
|
|
outline: 2px solid var(--akzent); outline-offset: 1px;
|
|
}
|
|
.rechte-feld:disabled { opacity: .45; cursor: default; }
|
|
|
|
/* FEST heißt: kein Schalter, sondern eine Tatsache. Er sieht deshalb
|
|
nicht aus wie etwas, das man drücken könnte — der Server würde es
|
|
ohnehin ablehnen, und ein Knopf, der immer eine Absage bringt, wird
|
|
trotzdem gedrückt. */
|
|
.rechte-feld[data-fest="ja"] {
|
|
cursor: default;
|
|
border-style: dashed;
|
|
border-color: var(--rand);
|
|
}
|
|
.rechte-feld[data-fest="ja"]:hover { background: transparent; }
|
|
|
|
/* VON HAND GESETZT. Ein Rahmen, keine Farbe: Die Zelle sagt damit
|
|
„hier hat jemand entschieden", ohne zu sagen, ob das gut war. */
|
|
.rechte-tafel td[data-anders="ja"] {
|
|
background: color-mix(in srgb, var(--akzent) 9%, transparent);
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 34%, transparent);
|
|
}
|
|
|
|
.rechte-zahlen__anders { color: var(--text-still); }
|
|
|
|
/* Die Meldung nach dem Speichern ist kein Fehler — sie darf nicht
|
|
aussehen wie einer. */
|
|
.fehler[data-art="gut"] { color: var(--text-leise); }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.rechte-feld { transition: none; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
WAS HEREINKOMMT — die Moderationsliste (17.09.2026)
|
|
|
|
Aus dem Plan im Vault, Stufe 4. Ein Moderator musste acht Bretter
|
|
durchklicken, um zu sehen, ob etwas Neues da ist. Das tut niemand
|
|
achtmal am Tag — und was niemand ansieht, moderiert auch niemand.
|
|
|
|
EINE ZEILE JE BEITRAG, nicht eine Karte. Karten sind zum Lesen,
|
|
Zeilen zum Überfliegen — und hier überfliegt man: Ist etwas
|
|
dazugekommen, und wo? Der Inhalt steht auf dem Brett, nicht hier.
|
|
Eine Vorschau wäre eine zweite Stelle, an der derselbe Beitrag steht.
|
|
------------------------------------------------------------------- */
|
|
.zulauf { list-style: none; margin: 0; padding: 0; }
|
|
.zulauf__zeile {
|
|
display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
|
|
padding: 9px 2px;
|
|
border-bottom: 1px solid var(--rand);
|
|
}
|
|
.zulauf__zeile:last-child { border-bottom: 0; }
|
|
|
|
/* Das Brett zuerst — es ist die Frage, die man beim Überfliegen hat:
|
|
WO ist etwas passiert. Ein eigener Ton je Brett macht die Liste ohne
|
|
Lesen sortierbar. */
|
|
.zulauf__brett {
|
|
--z-ton: #6f89a8;
|
|
flex: 0 0 auto; min-width: 104px;
|
|
padding: 1px 8px; border-radius: 999px;
|
|
font-size: .72rem; font-weight: 600;
|
|
color: color-mix(in srgb, var(--z-ton) 76%, #ffffff);
|
|
background: color-mix(in srgb, var(--z-ton) 13%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--z-ton) 30%, transparent);
|
|
text-align: center;
|
|
}
|
|
.zulauf__brett[data-brett="anschlag"] { --z-ton: #cc9451; }
|
|
.zulauf__brett[data-brett="ansteht"] { --z-ton: #656a9e; }
|
|
.zulauf__brett[data-brett="treff"] { --z-ton: #cc92c6; }
|
|
.zulauf__brett[data-brett="wunsch"] { --z-ton: #b2bc78; }
|
|
.zulauf__brett[data-brett="highlight"] { --z-ton: #8e5b77; }
|
|
.zulauf__brett[data-brett="regeln"] { --z-ton: #8e784f; }
|
|
.zulauf__brett[data-brett="mitmachen"] { --z-ton: #668e6e; }
|
|
|
|
.zulauf__titel {
|
|
flex: 1 1 200px; min-width: 0;
|
|
color: var(--text); font-weight: 600; font-size: .92rem;
|
|
text-decoration: none;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.zulauf__titel:hover { text-decoration: underline; }
|
|
.zulauf__wer { font-size: .78rem; color: var(--text-still); }
|
|
/* Die Zeit rechts und in Tabellenziffern — so stehen die Angaben
|
|
untereinander auf derselben Linie statt zu tanzen. */
|
|
.zulauf__wann {
|
|
margin-left: auto; flex: 0 0 auto;
|
|
font-size: .76rem; color: var(--text-leise);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
/* Auf dem Handy bleibt die Zeit unter dem Titel statt ihn zu
|
|
quetschen — 390 px tragen keine vier Spalten. */
|
|
.zulauf__wann { margin-left: 0; }
|
|
.zulauf__titel { flex-basis: 100%; }
|
|
}
|