DogFatherGitandClaude Opus 5
d92ba76e33
Die vier Saetze aus dem Anforderungsdokument, der Reihe nach: Team- Gruppenchat, Kategorie-Kanaele mit Zugriff fuer Owner und rechte Hand, private 1:1-Chats OHNE diesen Zugriff, und Pin-Nachrichten an alle. EIN KANAL IST KEINE VIERTE TABELLE, sondern eine dritte Art Raum (`art = 'kanal'` neben 'direkt' und 'gruppe'). Damit gilt fuer ihn ohne eine einzige neue Zeile alles, was schon da ist: Verlauf, Anhaenge, Suche, Ungelesen-Zaehler, Live-Strom, Wegraeumen. Eine eigene Tabelle haette all das ein zweites Mal gebraucht -- und die zweite Fassung waere die gewesen, in der die Zugriffsregel fehlt. Welche Zustaendigkeit, kommt aus MODI_KATEGORIEN -- derselben Liste, aus der auch die Aufgaben ihre Kategorie nehmen. Der NAME kommt aus der Kategorie und ist kein freies Feld: "Clipping" neben "Clipping-Team" waeren zwei halbe Verlaeufe, und man merkt es erst, wenn jemand die Antwort im falschen sucht. Ein eindeutiger Teilindex haelt das auch dann fest, wenn zwei Anfragen im selben Augenblick ankommen. DIE ZUGRIFFSREGEL STEHT IN istDrin() -- der Funktion, durch die alle sieben lesenden und schreibenden Wege gehen. In den Routen stuende sie in sechs davon und in der siebten nicht. Sie gilt AUSDRUECKLICH nur fuer 'kanal': Zweier-Gespraeche bleiben zu, auch fuer DogFather (so steht es im Dokument), und Gruppen ebenfalls -- wer eine Gruppe aufmacht, hat sich fuer einen geschlossenen Kreis entschieden, und den nachtraeglich still zu oeffnen waere das Gegenteil dessen, was er getan hat. Wenn Filipe das anders will, ist es eine Zeile -- aber es waere seine Entscheidung und muesste fuer die Beteiligten SICHTBAR sein. istDrin() nimmt dafuer die PERSON statt ihrer Nummer und wirft bei einer Nummer einen Fehler, statt stillschweigend "nein" zu antworten. HOECHSTENS DREI ANKUENDIGUNGEN je Raum. Nicht eine (Regeln, Live-Plan und Frist muessen gleichzeitig oben stehen koennen) und nicht beliebig viele -- eine Pinnwand, die scrollt, ist ein zweiter Verlauf. Der Aushang hat eine EIGENE Abfrage, weil der Verlauf nur 200 Zeilen liefert: Eine Ansage von vorletzter Woche waere sonst genau dann weg, wenn sie am laengsten oben stehen sollte. Wird die Nachricht zurueckgenommen, faellt sie ab UND gibt den Platz frei. DREI DINGE, DIE ERST DAS HINSEHEN GEZEIGT HAT: Der frisch angelegte Kanal hatte zwei Leute statt vier. Die Personenauswahl zeichnete nach der Rollenfolge aus bereiche.js -- wer dort nicht steht, wurde NICHT GEZEICHNET. Team Dogi steht dort nicht und darf es auch nicht (der Rollenname gehoert in keine Datei, die jeder herunterlaedt). Folge: DogFather konnte ueber die Auswahl niemandem aus seinem Team schreiben. Der Server schickt die Ueberschrift jetzt mit; der Browser braucht dafuer keinen Rollennamen. Der Kommentar, der genau davor warnte, stand die ganze Zeit darueber. Dieser Fehler war nebenbei ein Netz: Was nicht gezeichnet wird, kann auch nicht falsch gezeichnet werden. Deshalb ist jetzt gemessen, dass ein Manager und Spicy Media Team Dogi gar nicht erst geschickt bekommen -- und dabei fiel auf, dass Spicy Media in der EIGENEN Auswahl stand: Sobald es jemanden zu verbergen gibt, schreibt ohneVerborgene() aus "sieht alles" eine echte Liste, und darin steckt man selbst. Am Fuss jeder Nachricht stehen jetzt vier Handgriffe statt drei. Bei 390 px -- der haeufigsten Handybreite -- stand "kopieren" 18 px ueber der Blase, bei 320 px 75. Behoben mit `flex-wrap: wrap` und nicht mit einer Schwelle: Eine Regel, die misst, bleibt beim fuenften Handgriff richtig; eine Zahl nicht. pruef-chat-optik misst es ab jetzt. NACHGEZOGEN, was pruef-css-klassen an MEINEM letzten Commit fand: teamlage.html lud kopf.js ohne wahl.js (der Sicht-Umschalter sah aus wie aus einem anderen Programm -- kaputt war nichts, und genau deshalb faellt es niemandem auf), und .tampel__tag stand auf 11,2 px. Beides war schon gepusht, weil ich die Pruefung nicht laufen liess. pruef-chat-kanaele 73 (neu) · pruef-chat 48 · pruef-chat-ausbau 64 · pruef-chat-anhaenge 60 · pruef-chat-optik 24 -> 26 · pruef-css-klassen gruen · pruef-rollen 274 · pruef-modi-verborgen 78 · pruef-team-ampel 28 · pruef-start-ansicht gruen · pruef-modi-wortleck 5 · pruef-zwischenspeicher 21. Co-Authored-By: Claude Opus 5 <[email protected]>
638 lines
25 KiB
CSS
638 lines
25 KiB
CSS
/* =====================================================================
|
|
team.css — die Arbeitslage von Managern und Scouts.
|
|
|
|
Wunsch Filipe, 09.09.2026: "so eine kategorie wie über die creator
|
|
will ich dass nur für die spicy und dogfather rolle auch über manager
|
|
und scouts gibt ... ich will dass es so ultra krass gut ist."
|
|
|
|
DIE GESTALTUNG FOLGT EINER ENTSCHEIDUNG, NICHT EINEM GESCHMACK:
|
|
Diese Seite zeigt Zahlen über Kollegen. Sie darf deshalb NICHT
|
|
aussehen wie ein Cockpit mit Warnleuchten. Rot gibt es genau dort,
|
|
wo etwas liegengeblieben ist -- und sonst nirgends. Alles andere ist
|
|
ruhig, damit die wenigen roten Stellen auch etwas heißen.
|
|
===================================================================== */
|
|
|
|
/* =====================================================================
|
|
DER KOPF IST EINE KACHEL, IM TON DER KATEGORIE (09.09.2026)
|
|
|
|
Filipe: "perfektionnir das in einer kachel in der farbe von der
|
|
kategorie bitte."
|
|
|
|
`.t-kachel` steht in der Modulliste von module.css und bekommt damit
|
|
die Form des Hauses: gefraeste Fase, Kantenlicht, Eckwinkel, Raster.
|
|
Sie braucht hier nur noch zweierlei -- eine FLAECHE (die Modulliste
|
|
gibt nur die Fassung, den Grund bringt jedes Bauteil selbst mit) und
|
|
den TON.
|
|
|
|
DER TON IST NICHT ABGESCHRIEBEN. Die Kachel traegt `data-ton="22"`,
|
|
und die Regel dazu steht in start.css -- dieselbe, aus der die
|
|
Kachel auf der Startseite ihre Farbe zieht. Es gibt damit weiterhin
|
|
genau EINE Stelle, an der die Farbe dieser Kategorie steht; wer sie
|
|
dort aendert, aendert beides. Eine zweite Hexzahl hier waere die
|
|
naechste, die auseinanderlaeuft.
|
|
===================================================================== */
|
|
.t-kachel {
|
|
margin: 0 0 18px;
|
|
padding: 20px 22px;
|
|
background:
|
|
var(--raster),
|
|
linear-gradient(150deg,
|
|
color-mix(in srgb, var(--ton) 13%, transparent),
|
|
transparent 46%),
|
|
linear-gradient(178deg, rgba(9, 13, 20, .955), rgba(4, 7, 12, .985));
|
|
}
|
|
|
|
/* ---------- Der Kopf --------------------------------------------------- */
|
|
.t-kopf {
|
|
display: flex; align-items: flex-start; justify-content: space-between;
|
|
gap: 20px; flex-wrap: wrap;
|
|
}
|
|
.t-kopf__titel {
|
|
margin: 4px 0 6px;
|
|
font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700;
|
|
color: var(--text);
|
|
letter-spacing: -.01em;
|
|
}
|
|
.t-kopf__unter { margin: 0; font-size: .96rem; color: var(--text-leise); }
|
|
/* Der Satz über die Grenzen steht in einem eigenen Kasten und nicht als
|
|
Fußnote. Er ist die wichtigste Zeile der Seite: Ohne ihn wird eine
|
|
Arbeitslage als Überwachung gelesen -- und dann arbeitet niemand mehr
|
|
offen damit. */
|
|
.t-kopf__grenze {
|
|
flex: 1 1 300px; max-width: 44ch;
|
|
margin: 0; padding: 12px 15px;
|
|
/* Im Ton der Kategorie und nicht mehr in Gruen: In einer Kachel, die
|
|
schon eine Farbe hat, ist eine zweite Farbe daneben eine zweite
|
|
Aussage -- und dieser Kasten sagt dasselbe wie die Kachel, nur
|
|
genauer. */
|
|
border-left: 3px solid color-mix(in srgb, var(--ton) 60%, transparent);
|
|
border-radius: 0 10px 10px 0;
|
|
background:
|
|
linear-gradient(color-mix(in srgb, var(--ton) 9%, transparent),
|
|
color-mix(in srgb, var(--ton) 9%, transparent)),
|
|
rgba(7, 10, 17, .8);
|
|
font-size: .87rem; line-height: 1.55; color: var(--text-leise);
|
|
}
|
|
.t-kopf__grenze strong { color: var(--text); }
|
|
|
|
/* ---------- Die Lücken ------------------------------------------------- */
|
|
.t-luecken {
|
|
display: grid; gap: 12px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
|
|
margin: 0 0 18px;
|
|
}
|
|
/* EINE UNDURCHSICHTIGE FLAECHE, KEIN SCHLEIER.
|
|
|
|
Die Lektion vom Vorlagenbrett heute Mittag, hier gleich mitgenommen:
|
|
Eine Karte mit 7 Prozent Farbe auf transparentem Grund laesst das
|
|
Buehnenfoto durchscheinen -- und dann haengt die Lesbarkeit davon ab,
|
|
ob hinter dem Text gerade eine helle oder eine dunkle Stelle liegt.
|
|
Dort hat es 3,61:1 ergeben, wo 4,5 noetig sind.
|
|
|
|
Deshalb hier von vornherein ein eigener, deckender Grund. Der rote
|
|
Ton liegt darauf, nicht darin. */
|
|
.tl {
|
|
/* Auch eine Kachel -- mit dem Warnton als --ton, damit Kantenlicht
|
|
und Eckwinkel rot leuchten. Der Grund bleibt DECKEND: Die Lektion
|
|
vom Vorlagenbrett gilt weiter, eine Karte mit sieben Prozent Farbe
|
|
auf durchsichtigem Grund laesst das Buehnenfoto durch. */
|
|
--ton: #ff9aa2;
|
|
padding: 16px 18px;
|
|
background:
|
|
var(--raster),
|
|
linear-gradient(150deg, rgba(255, 154, 162, .11), transparent 50%),
|
|
rgba(7, 10, 17, .95);
|
|
}
|
|
.tl__titel {
|
|
margin: 0 0 4px; font-size: .98rem; font-weight: 700;
|
|
color: color-mix(in srgb, var(--warn, #ff9aa2) 78%, #ffffff);
|
|
}
|
|
.tl__satz { margin: 0 0 8px; font-size: .84rem; color: var(--text-leise); line-height: 1.5; }
|
|
.tl__namen {
|
|
margin: 0; font-size: .86rem; color: var(--text); line-height: 1.6;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
/* Keine Lücke ist auch eine Auskunft -- und dann grün statt rot. */
|
|
.tl[data-gut="ja"] {
|
|
--ton: var(--scout-haupt);
|
|
background:
|
|
var(--raster),
|
|
linear-gradient(150deg, rgba(95, 201, 154, .11), transparent 50%),
|
|
rgba(7, 10, 17, .95);
|
|
}
|
|
.tl[data-gut="ja"] .tl__titel { color: var(--scout-haupt); }
|
|
|
|
/* ---------- Die Lage in Zahlen ----------------------------------------- */
|
|
.t-lage {
|
|
display: grid; gap: 10px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
|
|
margin: 0 0 22px;
|
|
}
|
|
|
|
/* ---------- Eine Kennzahl ---------------------------------------------- */
|
|
/* Die Kennzahlen bleiben SCHLICHT -- und das ist eine Entscheidung.
|
|
Sie stehen zu acht in einer Karte; jede davon mit Fase, Kantenlicht
|
|
und Eckwinkel waere ein Schaufenster voller Rahmen und keine
|
|
Auskunft mehr. Eine Kachel in der Kachel in der Kachel liest
|
|
niemand.
|
|
|
|
Was sie bekommen: eine abgeschnittene Ecke aus derselben Formel wie
|
|
die Kacheln (clip-path mit --fase), damit sie erkennbar zur selben
|
|
Familie gehoeren -- nur eben als Beschlagteil, nicht als Kachel. */
|
|
.tz {
|
|
display: grid; gap: 2px; align-content: start;
|
|
padding: 11px 13px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: 0;
|
|
clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px);
|
|
/* Deckend -- eine Kennzahl auf einem Foto ist keine Kennzahl,
|
|
sondern ein Ratespiel. */
|
|
background:
|
|
linear-gradient(rgba(255, 255, 255, .034), rgba(255, 255, 255, .034)),
|
|
rgba(9, 12, 19, .92);
|
|
}
|
|
.tz__wert {
|
|
font-size: 1.28rem; font-weight: 700; color: var(--text);
|
|
font-variant-numeric: tabular-nums; line-height: 1.15;
|
|
}
|
|
.tz__schild {
|
|
font-size: .74rem; color: var(--text-leise); line-height: 1.35;
|
|
}
|
|
/* Rot NUR, wo etwas liegengeblieben ist. */
|
|
.tz[data-art="warn"] {
|
|
border-color: color-mix(in srgb, var(--warn, #ff9aa2) 45%, transparent);
|
|
/* Auch hier deckend. Diese Zeile stand zuerst mit einem einzelnen
|
|
rgba-Wert da und hat damit den undurchsichtigen Grund von oben
|
|
wieder aufgehoben -- ausgerechnet an den Karten, auf die es
|
|
ankommt. Zwei Regeln fuer denselben Grund, und die spaetere
|
|
gewinnt: derselbe Fehler wie so oft in diesem Haus. */
|
|
background:
|
|
linear-gradient(rgba(255, 154, 162, .09), rgba(255, 154, 162, .09)),
|
|
rgba(7, 10, 17, .9);
|
|
}
|
|
.tz[data-art="warn"] .tz__wert { color: color-mix(in srgb, var(--warn, #ff9aa2) 72%, #ffffff); }
|
|
/* Und grün, wenn eine Null eine gute Nachricht ist -- eine Null ohne
|
|
Farbe liest sich wie ein fehlender Wert. */
|
|
.tz[data-art="gut"] { border-color: color-mix(in srgb, var(--scout-haupt) 30%, transparent); }
|
|
.tz[data-art="gut"] .tz__wert { color: var(--scout-haupt); }
|
|
|
|
/* ---------- Die Leute --------------------------------------------------- */
|
|
.t-gruppe { margin: 0 0 26px; }
|
|
.t-gruppe .feldschild { margin: 0 0 10px; }
|
|
.t-liste {
|
|
display: grid; gap: 14px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE KARTEN UNTEN SIND JETZT AUCH KACHELN (09.09.2026)
|
|
|
|
Filipe: "und die kacheln unten in der seite auch perfektionnieren und
|
|
geil machen bitte."
|
|
|
|
Sie waren abgerundete Rechtecke mit einem Streifen links -- richtig,
|
|
aber eben nicht die Sprache dieses Hauses. `.tperson` und `.tl`
|
|
stehen jetzt in der Modulliste und bekommen damit Fase, Kantenlicht,
|
|
Eckwinkel und Raster wie jede andere Kachel.
|
|
|
|
DIE FARBE KOMMT AUS DER ROLLE, und zwar ueber `--ton`. Das ist die
|
|
Variable, aus der module.css das Kantenlicht und die Eckwinkel
|
|
zieht. Ein Manager-Kasten leuchtet damit lila, ein Scout-Kasten
|
|
gruen -- ohne dass hier eine einzige Farbe ausgeschrieben stehen
|
|
muss.
|
|
|
|
DER STREIFEN IST WEG, und das ist kein Verlust: module.css belegt
|
|
::before und ::after selbst (Kantenlicht und Eckwinkel) und laedt
|
|
NACH dieser Datei -- ein eigenes ::after waere wirkungslos gewesen.
|
|
Das Kantenlicht traegt die Rollenfarbe jetzt ohnehin, und zwar rund
|
|
um die ganze Karte statt auf drei Pixeln links. */
|
|
.tperson {
|
|
--r: var(--text-still);
|
|
--ton: var(--r);
|
|
position: relative;
|
|
padding: 17px 19px 19px;
|
|
background:
|
|
var(--raster),
|
|
linear-gradient(155deg,
|
|
color-mix(in srgb, var(--r) 11%, transparent),
|
|
transparent 52%),
|
|
linear-gradient(178deg, rgba(10, 14, 22, .95), rgba(5, 8, 14, .98));
|
|
}
|
|
.tperson[data-rolle="manager"] { --r: var(--manager-haupt); }
|
|
.tperson[data-rolle="scout"] { --r: var(--scout-haupt); }
|
|
.tperson[data-gesperrt="ja"] { opacity: .6; }
|
|
|
|
.tperson__kopf {
|
|
display: flex; align-items: center; gap: 12px;
|
|
margin-bottom: 14px; flex-wrap: wrap;
|
|
}
|
|
.tperson__bild {
|
|
width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
|
|
border: 1px solid color-mix(in srgb, var(--r) 40%, transparent);
|
|
flex: none;
|
|
}
|
|
/* SICHERHEITSNETZ (10.09.2026). In der Blase steht ein BUCHSTABE --
|
|
ein Bild gehoert in `.tperson__bild` daneben. Genau das ist einmal
|
|
schiefgegangen: ein blankes <img> darin, ohne Groesse, ohne
|
|
`overflow: hidden` am Elternteil -- das Foto lief ueber die ganze
|
|
Kachel. Behoben ist es im Skript; diese zwei Zeilen sorgen dafuer,
|
|
dass derselbe Fehler beim naechsten Mal nichts mehr anrichtet. */
|
|
.tperson__zeichen { overflow: hidden; }
|
|
.tperson__zeichen > img { width: 100%; height: 100%; object-fit: cover; }
|
|
|
|
.tperson__zeichen {
|
|
width: 44px; height: 44px; border-radius: 50%;
|
|
display: grid; place-items: center; flex: none;
|
|
font-size: 1.05rem; font-weight: 700;
|
|
color: color-mix(in srgb, var(--r) 75%, #ffffff);
|
|
background: color-mix(in srgb, var(--r) 16%, #070a11);
|
|
border: 1px solid color-mix(in srgb, var(--r) 34%, transparent);
|
|
}
|
|
.tperson__text { flex: 1; min-width: 0; }
|
|
/* LANGE NAMEN BRECHEN UM, statt abgeschnitten zu werden.
|
|
"Patrick-Maximilian" braucht 90 px, bei 320 px Bildschirm stehen 56
|
|
zur Verfuegung -- gemeldet von pruef-handy. Ein Name, den man nicht
|
|
lesen kann, ist auf einer Seite ueber Personen der schlechteste
|
|
Platz zum Sparen. */
|
|
.tperson__name {
|
|
margin: 0; font-size: 1.06rem; font-weight: 650; color: var(--text);
|
|
overflow-wrap: anywhere; hyphens: auto;
|
|
}
|
|
.tperson__unter {
|
|
margin: 2px 0 0; font-size: .82rem; color: var(--text-leise); line-height: 1.45;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.tperson__zuletzt {
|
|
flex: none;
|
|
padding: 4px 10px; border-radius: 999px;
|
|
font-size: .74rem; font-weight: 600;
|
|
color: var(--text-leise);
|
|
background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand);
|
|
}
|
|
.tperson__zuletzt[data-warn="ja"] {
|
|
color: color-mix(in srgb, var(--warn, #ff9aa2) 72%, #ffffff);
|
|
border-color: color-mix(in srgb, var(--warn, #ff9aa2) 40%, transparent);
|
|
background: rgba(255, 154, 162, .1);
|
|
}
|
|
|
|
.tperson__zahlen {
|
|
display: grid; gap: 8px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
|
|
}
|
|
|
|
/* ---------- Die Pipeline ------------------------------------------------ */
|
|
.tpipe {
|
|
margin-top: 14px; padding-top: 13px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.tpipe__schild {
|
|
margin: 0 0 8px;
|
|
font-size: .72rem; font-weight: 700; letter-spacing: .1em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.tpipe__reihe {
|
|
display: grid; gap: 8px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
|
|
}
|
|
|
|
/* ---------- Wen genau --------------------------------------------------- */
|
|
.tperson__wer { margin-top: 12px; }
|
|
.tperson__wer summary {
|
|
cursor: pointer; font-size: .82rem; color: var(--text-leise);
|
|
padding: 4px 0;
|
|
}
|
|
.tperson__wer summary:hover { color: var(--text); }
|
|
.tperson__wer summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
.tperson__namen {
|
|
margin: 6px 0 0; font-size: .84rem; color: var(--text-leise); line-height: 1.65;
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.t-kopf { flex-direction: column; gap: 14px; }
|
|
/* `flex: 1 1 300px` ist am Rechner richtig -- dort ist die Hauptachse
|
|
WAAGERECHT und der Kasten teilt sich die Breite mit dem Titel.
|
|
In einer Spalte ist die Hauptachse aber SENKRECHT, und derselbe
|
|
Wert laesst ihn in die HOEHE wachsen: Auf dem Bildschirmfoto stand
|
|
danach die halbe Kachel leer.
|
|
|
|
Ein Flexwert gilt fuer eine Richtung, nicht fuer ein Element. Wer
|
|
die Richtung dreht, muss ihn mitdrehen. */
|
|
.t-kopf__grenze { flex: 0 0 auto; max-width: none; }
|
|
.tperson { padding: 14px 15px 16px; }
|
|
}
|
|
@media (forced-colors: active) {
|
|
.tz, .tl, .tperson { border: 1px solid CanvasText; }
|
|
.tperson::after { background: CanvasText; }
|
|
}
|
|
|
|
/* =======================================================================
|
|
DIE MITGLIEDER-KACHEL AUS KAPITEL 4 (10.09.2026)
|
|
|
|
Der Blueprint verlangt dort neben Name, Foto und Zahlen auch Status
|
|
(aktiv/pausiert), das Datum "dabei seit" und -- nach 4.1 -- die
|
|
Stufe. Drei kurze Angaben, die zusammen in eine Zeile gehoeren:
|
|
Einzeln untereinander waeren sie drei Zeilen fuer neun Woerter.
|
|
|
|
ALLE DREI IM SELBEN GEWAND wie `tperson__zuletzt` daneben (Pille,
|
|
999px, .74rem). Ein zweites Gewand fuer dieselbe Sorte Angabe waere
|
|
der Anfang davon, dass die Karte nach Baustelle aussieht.
|
|
==================================================================== */
|
|
.tperson__merkmale {
|
|
display: flex; flex-wrap: wrap; gap: 6px;
|
|
margin-top: 10px;
|
|
}
|
|
.tmerkmal {
|
|
padding: 4px 10px; border-radius: 999px;
|
|
font-size: .74rem; font-weight: 600;
|
|
color: var(--text-leise);
|
|
background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand);
|
|
}
|
|
/* "dabei seit" ist die leiseste der drei -- sie beantwortet keine
|
|
Frage, sie gibt nur Zusammenhang. */
|
|
.tmerkmal--leise { opacity: .78; }
|
|
|
|
/* PAUSIERT FAELLT AUF, aber warm und nicht alarmierend: Eine Pause ist
|
|
kein Fehler. Derselbe Ton wie die Warnung daneben, nur ruhiger --
|
|
sonst liest man "pausiert" als "kaputt". */
|
|
.tmerkmal--pause {
|
|
color: color-mix(in srgb, var(--warn, #ff9aa2) 70%, #ffffff);
|
|
border-color: color-mix(in srgb, var(--warn, #ff9aa2) 38%, transparent);
|
|
background: rgba(255, 154, 162, .1);
|
|
}
|
|
|
|
/* DIE DREI STUFEN steigern sich sichtbar, ohne dass eine davon nach
|
|
Rang aussieht: gleiche Form, nur mehr Farbe. Probe bleibt bewusst
|
|
das ruhigste Schild -- wer neu ist, soll nicht markiert wirken. */
|
|
.tmerkmal--probe {
|
|
color: color-mix(in srgb, #9fb6c6 82%, #ffffff);
|
|
border-color: rgba(159, 182, 198, .3);
|
|
background: rgba(159, 182, 198, .08);
|
|
}
|
|
.tmerkmal--standard {
|
|
color: color-mix(in srgb, #7fc4e8 82%, #ffffff);
|
|
border-color: rgba(127, 196, 232, .34);
|
|
background: rgba(127, 196, 232, .1);
|
|
}
|
|
.tmerkmal--senior {
|
|
color: color-mix(in srgb, #8fd6a6 84%, #ffffff);
|
|
border-color: rgba(143, 214, 166, .38);
|
|
background: rgba(143, 214, 166, .12);
|
|
}
|
|
|
|
/* ---------- Die Stufe setzen (nur DogFather) --------------------------- */
|
|
.tstufen {
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
|
|
margin-top: 12px; padding-top: 11px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
/* DAS SCHILD NIMMT DIE GANZE ZEILE.
|
|
|
|
Ohne `flex-basis: 100%` teilt es sich die erste Zeile mit der ersten
|
|
Stufe -- im Bildschirmfoto stand "STUFE Probe" oben und darunter
|
|
"Standard Senior". Drei gleichwertige Knoepfe, ungleich verteilt:
|
|
Man liest sie dann als zwei Gruppen statt als eine Reihe. */
|
|
.tstufen__schild {
|
|
flex-basis: 100%;
|
|
margin-bottom: 2px;
|
|
font-size: .72rem; font-weight: 700; letter-spacing: .1em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.tstufen__knopf {
|
|
padding: 6px 12px; border-radius: 999px;
|
|
font: inherit; font-size: .78rem; font-weight: 600;
|
|
color: var(--text-leise);
|
|
background: rgba(255, 255, 255, .04);
|
|
border: 1px solid var(--rand);
|
|
cursor: pointer;
|
|
transition: background .15s ease, color .15s ease, border-color .15s ease;
|
|
}
|
|
.tstufen__knopf:hover:not([disabled]) {
|
|
color: var(--text); background: rgba(255, 255, 255, .08);
|
|
}
|
|
.tstufen__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
/* Die gewaehlte Stufe ist gefuellt, nicht bloss umrandet: Bei drei
|
|
gleich aussehenden Pillen erkennt man einen Rahmenwechsel zu
|
|
langsam, gerade auf einem hellen Bildschirm. */
|
|
.tstufen__knopf[data-an="ja"] {
|
|
color: #0a121e;
|
|
background: color-mix(in srgb, var(--akzent, #7fc4e8) 82%, #ffffff);
|
|
border-color: transparent;
|
|
}
|
|
.tstufen__knopf[disabled] { opacity: .55; cursor: default; }
|
|
@media (prefers-reduced-motion: reduce) { .tstufen__knopf { transition: none; } }
|
|
|
|
/* =======================================================================
|
|
DER EINGANG WIRD LESBAR STATT LEER (10.09.2026)
|
|
|
|
Filipe zum Bildschirmfoto: "das muss viel krasser sein."
|
|
|
|
Er hatte recht, und der Grund war nicht Geschmack: Auf der Seite
|
|
standen drei gleich hohe Spalten, von denen zwei leer waren und
|
|
trotzdem ueber den halben Bildschirm gingen. Die einzige Karte mit
|
|
Inhalt lag darin wie ein Zettel in einem Umzugskarton -- und war
|
|
ausserdem fahl, weil ihre Rollenfarbe auf ein helles Grau zurueckfiel.
|
|
|
|
Vier Aenderungen, und jede loest etwas Konkretes:
|
|
1. Leere Spalten schrumpfen (`align-items: start`).
|
|
2. Die Karte traegt die Farbe der Stufe -- kein Nebel mehr, und
|
|
man sieht am Rand, wer wo steht.
|
|
3. Aus sechs Zahlenkaesten je Person werden drei Balken: "wie
|
|
weit" statt "wie viele offen".
|
|
4. Die drei Zahlen der Seite stehen oben als Zahlen, nicht in
|
|
einem Satz.
|
|
==================================================================== */
|
|
|
|
/* 1. ZWEI REIHEN, UND LEERE KAESTEN SCHRUMPFEN.
|
|
|
|
`.t-lage` war ein Raster mit `auto-fit, minmax(150px, 1fr)` fuer
|
|
ALLES: die zwei Wartelisten und jede Person. Bei fuenf Kaesten
|
|
nebeneinander blieben rund 150 px je Spalte, und im
|
|
Bildschirmfoto stand "Community 12 von" -- abgeschnitten mitten
|
|
in der Zahl. Ausserdem machte die laengste Liste die ganze Reihe
|
|
so hoch wie sich selbst.
|
|
|
|
Jetzt untereinander: erst was eine Antwort braucht, dann das
|
|
Team. `align-items: start` haelt leere Kaesten kurz -- `stretch`
|
|
ist die Vorgabe und zieht sonst jeden auf die Hoehe des
|
|
hoechsten. */
|
|
.t-lage {
|
|
display: grid; gap: 18px;
|
|
grid-template-columns: 1fr;
|
|
align-items: start;
|
|
}
|
|
/* 300 px ist nachgemessen und nicht geraten: Darunter bricht
|
|
"Community" von der Zahl daneben ab, und die Stufenknoepfe fallen in
|
|
drei Zeilen. Auf einem Handy bleibt es bei einer Spalte. */
|
|
.t-wartet, .t-leute {
|
|
display: grid; gap: 12px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
|
|
align-items: start;
|
|
}
|
|
|
|
/* 2. DIE STUFE ALS FARBE DER KARTE.
|
|
Dieselben drei Toene wie die Schilder darin -- ein vierter waere
|
|
eine zweite Sprache fuer dieselbe Sache. */
|
|
.tperson[data-stufe="probe"] { --r: #9fb6c6; }
|
|
.tperson[data-stufe="standard"] { --r: #7fc4e8; }
|
|
.tperson[data-stufe="senior"] { --r: #8fd6a6; }
|
|
/* Pausiert wird leiser, nicht ausgegraut: 0,72 statt 0,6 (das ist der
|
|
Wert fuer GESPERRT). Eine Pause ist kein Entzug. */
|
|
.tperson[data-pause="ja"] { opacity: .72; }
|
|
|
|
/* 3. DIE BEREICHE ALS BALKEN --------------------------------------- */
|
|
.tfort {
|
|
display: grid; gap: 8px;
|
|
margin-top: 14px; padding-top: 13px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.tfort__zeile {
|
|
display: grid; gap: 6px;
|
|
padding: 10px 12px; border-radius: 12px;
|
|
text-decoration: none; color: inherit;
|
|
background: rgba(255, 255, 255, .028);
|
|
border: 1px solid var(--rand);
|
|
transition: background .15s ease, border-color .15s ease;
|
|
}
|
|
.tfort__zeile:hover {
|
|
background: rgba(255, 255, 255, .06);
|
|
border-color: color-mix(in srgb, var(--r) 40%, transparent);
|
|
}
|
|
.tfort__zeile:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
.tfort__kopf {
|
|
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
|
|
}
|
|
.tfort__name { font-size: .88rem; font-weight: 650; color: var(--text); }
|
|
.tfort__zahl {
|
|
flex: none;
|
|
font-size: .78rem; font-weight: 700; color: var(--text-leise);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* DIE BAHN. 8 px hoch -- hoch genug, um die Farbe zu erkennen, flach
|
|
genug, um nicht wie ein Ladebalken zu wirken. Der leere Teil bleibt
|
|
sichtbar dunkel: Ein Balken ohne Bahn zeigt nur, was da ist, nicht
|
|
wie viel fehlt. */
|
|
.tfort__bahn {
|
|
display: flex; overflow: hidden;
|
|
height: 8px; border-radius: 999px;
|
|
background: rgba(255, 255, 255, .07);
|
|
}
|
|
.tfort__bahn > i { display: block; height: 100%; }
|
|
/* GRUEN = besprochen und in Ordnung. BERNSTEIN = besprochen, da ist
|
|
was. Beide fuellen den Balken, denn beide heissen "angesehen" --
|
|
der Unterschied liegt im Ergebnis, nicht im Fortschritt. */
|
|
.tfort__gut { background: color-mix(in srgb, #8fd6a6 78%, #5f8a9f); }
|
|
.tfort__verbessern { background: color-mix(in srgb, #ffc978 82%, #b07a3a); }
|
|
.tfort__unter {
|
|
font-size: .76rem; color: var(--text-still); line-height: 1.5;
|
|
}
|
|
|
|
/* 4. DIE DREI ZAHLEN DER SEITE -------------------------------------- */
|
|
.tkopfzahlen {
|
|
grid-column: 1 / -1; /* ueber die ganze Breite, keine vierte Spalte */
|
|
display: grid; gap: 10px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
|
|
margin-bottom: 4px;
|
|
}
|
|
.tkz {
|
|
display: grid; gap: 3px; align-content: start;
|
|
padding: 15px 17px; border-radius: 14px;
|
|
background:
|
|
linear-gradient(160deg, rgba(127, 196, 232, .07), transparent 60%),
|
|
linear-gradient(178deg, rgba(10, 14, 22, .95), rgba(5, 8, 14, .98));
|
|
border: 1px solid var(--rand);
|
|
}
|
|
.tkz__wert {
|
|
font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 750;
|
|
line-height: 1.05; color: var(--text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.tkz__schild {
|
|
font-size: .8rem; color: var(--text-leise); line-height: 1.4;
|
|
}
|
|
/* WAS WARTET, FAELLT AUF -- aber nur, wenn wirklich etwas wartet. Eine
|
|
Null in Warnfarbe waere ein Alarm ohne Anlass, und ab dem dritten Mal
|
|
sieht man ihn nicht mehr. */
|
|
.tkz[data-dran="ja"] {
|
|
border-color: color-mix(in srgb, #ffc978 42%, transparent);
|
|
background:
|
|
linear-gradient(160deg, rgba(255, 201, 120, .12), transparent 62%),
|
|
linear-gradient(178deg, rgba(10, 14, 22, .95), rgba(5, 8, 14, .98));
|
|
}
|
|
.tkz[data-dran="ja"] .tkz__wert { color: color-mix(in srgb, #ffc978 78%, #ffffff); }
|
|
.tkz__bahn {
|
|
display: block; overflow: hidden;
|
|
height: 8px; margin-top: 8px; border-radius: 999px;
|
|
background: rgba(255, 255, 255, .07);
|
|
}
|
|
.tkz__bahn > i {
|
|
display: block; height: 100%;
|
|
background: linear-gradient(90deg,
|
|
color-mix(in srgb, #5f8a9f 80%, #ffffff),
|
|
color-mix(in srgb, #8fd6a6 76%, #5f8a9f));
|
|
}
|
|
@media (prefers-reduced-motion: reduce) { .tfort__zeile { transition: none; } }
|
|
|
|
/* =======================================================================
|
|
DIE VERFUEGBARKEITS-AMPEL (Blueprint 7.1, 10.09.2026)
|
|
|
|
Sieben Tage, drei Farben. Sie sagt, OB jemand kann -- nie, was er
|
|
vorhat. Diese Grenze steht im Blueprint und laeuft hier mitten durch
|
|
eine Kachel; deshalb ist sie auch im Quelltext an beiden Enden
|
|
vermerkt.
|
|
|
|
DREI FARBEN, DIE MAN AUCH OHNE FARBE UNTERSCHEIDET: Wer Rot und Gruen
|
|
nicht auseinanderhaelt -- rund acht Prozent der Maenner --, sieht sonst
|
|
drei gleiche Kaesten. Deshalb tragen die drei Stufen zusaetzlich
|
|
verschieden viel FUELLUNG: frei ist nur umrandet, teils halb, voll
|
|
ganz. Und der Titel beim Draufzeigen sagt es in Worten.
|
|
==================================================================== */
|
|
.tampel {
|
|
display: grid; gap: 7px;
|
|
margin-top: 12px; padding-top: 11px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.tampel__schild {
|
|
font-size: .72rem; font-weight: 700; letter-spacing: .1em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.tampel__woche {
|
|
display: grid; gap: 4px;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
}
|
|
/* .72rem und nicht .7 (10.09.2026, nachgezogen).
|
|
In den sieben Feldern steht die Zahl der Termine -- klein, aber es
|
|
ist die Auskunft, wegen der die Ampel da ist. Unter 11,5 px gilt im
|
|
Haus als zu klein; .7rem waren 11,2. Gefunden hat es
|
|
pruef-css-klassen, EINEN Commit zu spaet: Die Ampel war schon
|
|
gepusht, weil ich diese Pruefung nicht laufen liess. */
|
|
.tampel__tag {
|
|
display: grid; place-items: center;
|
|
padding: 7px 0 6px; border-radius: 8px;
|
|
font-size: .72rem; font-weight: 700; letter-spacing: .02em;
|
|
cursor: default;
|
|
border: 1px solid var(--rand);
|
|
}
|
|
/* FREI: nur ein Rahmen. Nichts eingetragen ist auch optisch nichts. */
|
|
.tampel__tag--frei {
|
|
color: var(--text-leise);
|
|
background: transparent;
|
|
}
|
|
/* TEILS: halb gefuellt -- ein Verlauf, der unten aufhoert. Er ist der
|
|
Unterschied, den man auch in Graustufen sieht. */
|
|
.tampel__tag--teils {
|
|
color: color-mix(in srgb, #ffc978 84%, #ffffff);
|
|
border-color: color-mix(in srgb, #ffc978 38%, transparent);
|
|
background: linear-gradient(180deg, transparent 48%, rgba(255, 201, 120, .18) 48%);
|
|
}
|
|
/* VOLL: ganz gefuellt. */
|
|
.tampel__tag--voll {
|
|
color: color-mix(in srgb, #ff9aa2 86%, #ffffff);
|
|
border-color: color-mix(in srgb, #ff9aa2 42%, transparent);
|
|
background: rgba(255, 154, 162, .17);
|
|
}
|
|
.tampel__satz {
|
|
font-size: .76rem; color: var(--text-still); line-height: 1.5;
|
|
}
|