DogFatherGitandClaude Opus 5
db8ad683a1
Gefunden beim Bauen des Vorlagenbretts, nicht gesucht:
pruef-modi-wortleck war ROT, und zwar seit einem Tag. Sieben
Fundstellen in zwei Dateien, die JEDER bekommt, der die Seite oeffnet
-- ohne Anmeldung, aus dem offenen Netz:
assets/css/team.css --ton-modi, .tmerkmal--r-modi,
.t-gruppe[data-rolle="modi"]
assets/js/teamlage.js die Woerter-Tabelle und drei Rueckfaelle
DER ZUGANG HAELT GENAU SO LANGE, WIE NIEMAND DEN NAMEN IM QUELLTEXT
FINDET. Genau dafuer gibt es diese Pruefung: Am 10.09. hatte ich
denselben Fehler schon einmal gemacht und ihn durch Nachsehen
gefunden, nicht durch Nachdenken -- Nachdenken hatte ich vorher
getan. Seither ist die Regel ein Werkzeug statt eines Vorsatzes.
Nur: Das Werkzeug hat einen Tag lang rot geleuchtet, und niemand hat
hingesehen. Das ist der eigentliche Befund an diesem Commit, und er
steht auch in der Vault-Notiz.
WAS SICH AENDERT
----------------
Die Woerter kommen jetzt vom Server (`rolle_name` aus ROLLEN_NAME) --
so wie ueberall sonst im Haus. Der Browser fuehrt keine eigene Liste
mehr; zwei Listen fuer dieselbe Sache waeren ohnehin zwei
Gelegenheiten, dass eine veraltet.
DIE DREI RUECKFAELLE SIND WEG (`|| 'modi'`, `|| 'Modi'`). Am 21.09.
wurde genau so einer an einer vierten Stelle entfernt, mit zwei
Gruenden: Er schreibt den Namen in eine ausgelieferte Datei, und er
hat noch nie etwas bewirkt -- der Server liefert die Rolle immer mit.
Beides galt fuer diese drei ebenso; sie waren damals nur uebersehen
worden. Fehlt die Rolle jetzt doch einmal, bleibt das Merkmal weg
statt falsch.
DER DRITTE FARBTON HEISST NACH SEINER AUFGABE, nicht nach seinem
Traeger: aus `--ton-modi` wird `--ton-team`, der Grundton des Teams.
Die beiden Haende weichen davon ab -- damit braucht die dritte Rolle
gar keinen eigenen Wahlausdruck mehr, und ihr Name steht nirgends in
der Datei. Das ist nicht nur unverfaenglich, es ist auch richtiger:
Eine Farbe gehoert einer Rolle nicht, sie steht fuer sie.
GEPRUEFT
--------
pruef-modi-wortleck: BESTANDEN, 8 von 8 (vorher 1 Fehler).
Ihre eigene Gegenprobe laeuft mit: eine eingebaute Fundstelle wird
erkannt, und "modifiziert", "Modul", "motion", "Modus" schlagen nicht an.
pruef-teamlage-karten: 39 von 39 weiter gruen -- darunter die Zeilen,
auf die es hier ankommt: "jede Karte nennt ihre Rolle im Klartext
(keine Luecke)" und "jede Ueberschrift nennt ihre Rolle und ihre
Anzahl richtig (Rechte Hand 1 · Linke Hand 1 · Modi 5)". Die Woerter
kommen also weiterhin an, nur aus einer anderen Quelle.
Co-Authored-By: Claude Opus 5 <[email protected]>
1182 lines
51 KiB
CSS
1182 lines
51 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. */
|
||
/* =====================================================================
|
||
DIE DREI TOENE VON TEAM DOGI -- an EINER Stelle (23.09.2026)
|
||
=====================================================================
|
||
|
||
Bis heute standen `#f0c14b`, `#d8a7f5` und `#8fd6ff` als Zahlen in
|
||
der Datei verteilt: einmal bei der Gruppenueberschrift, einmal bei
|
||
der Rollenmarke, und `#f0c14b` ein drittes Mal in module.css an der
|
||
Karte der rechten Hand. Drei Orte fuer dieselbe Farbe sind drei
|
||
Gelegenheiten, dass einer beim naechsten Anstrich nicht mitgeht --
|
||
und dann traegt die Marke einen anderen Lila-Ton als die Karte, auf
|
||
der sie liegt.
|
||
|
||
Ausloeser war Filipes Wunsch, die Karte der linken Hand in der
|
||
Farbe ihrer Marke zu faerben: „die farbe der kachel soll die gleiche
|
||
sein wie die farbe die der text linke hand hat". „Die gleiche" ist
|
||
keine Absicht, die man aufschreibt -- es ist eine, die man
|
||
ABLEITET. Deshalb steht die Farbe jetzt hier und wird ueberall von
|
||
hier geholt.
|
||
|
||
AUF :root UND NICHT AUF DEM BEHAELTER: `.tperson` gibt es auf zwei
|
||
Seiten (team.html und teamlage.html) und in zwei Behaeltern. Ein
|
||
Ton, der nur in einem davon gilt, ist der, der auf der anderen Seite
|
||
still auf seinen Rueckfall faellt. */
|
||
:root {
|
||
--ton-hand: #f0c14b; /* Gold -- die rechte Hand */
|
||
--ton-linke: #d8a7f5; /* Lila -- die linke Hand */
|
||
/* DER DRITTE TON HAT KEINEN ROLLENNAMEN (23.09.2026).
|
||
|
||
Er hiess `--ton-modi`, und damit stand der verborgene Rollenname
|
||
in einer Stilvorlage, die ohne Anmeldung im Netz liegt.
|
||
pruef-modi-wortleck hat es gemeldet.
|
||
|
||
Er heisst jetzt nach seiner AUFGABE statt nach seinem Traeger: Er
|
||
ist der Grundton des Teams, und die beiden Haende weichen davon
|
||
ab. Das ist nicht nur unverfaenglich, es ist auch richtiger --
|
||
eine Farbe gehoert einer Rolle nicht, sie steht fuer sie. */
|
||
--ton-team: #8fd6ff; /* Blau -- der Grundton des Teams */
|
||
}
|
||
|
||
.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; }
|
||
|
||
/* ---------------------------------------------------------------------
|
||
DIE ROLLE (22.09.2026)
|
||
---------------------------------------------------------------------
|
||
Filipe: „und auch den rollen entsprechend reihenfolge. nicht einfach
|
||
so sondern die rolle soll die reihenfolge ausmachen."
|
||
|
||
Gemessen war die Reihenfolge schon nach Rolle sortiert -- man konnte
|
||
es nur nicht sehen: Auf der Karte stand die STUFE („Probe"), nie die
|
||
Rolle. Eine Ordnung, die man nicht sehen kann, sieht aus wie Zufall.
|
||
|
||
DIE ROLLENMARKE IST DIE ERSTE UND DIE KRAEFTIGSTE. Sie steht vor der
|
||
Stufe, weil sie die groessere Frage beantwortet: WAS jemand ist,
|
||
nicht wie weit er darin ist. Gefuellt statt umrandet -- die anderen
|
||
Marken sind Auskunft, diese ist Einordnung.
|
||
--------------------------------------------------------------------- */
|
||
.tmerkmal--rolle {
|
||
color: #0a0f18;
|
||
background: color-mix(in srgb, var(--rm, #9fb6c6) 82%, #ffffff);
|
||
border-color: color-mix(in srgb, var(--rm, #9fb6c6) 60%, transparent);
|
||
letter-spacing: .01em;
|
||
}
|
||
/* Jede Rolle ihr Ton. Die rechte Hand behaelt ihr Gold -- es ist
|
||
dasselbe, das die Karte schon traegt; ein zweiter Ton daneben waere
|
||
eine zweite Sprache fuer dieselbe Sache. */
|
||
/* DER GRUNDTON STEHT AN DER MARKE SELBST, die beiden Haende weichen
|
||
ab. So braucht die dritte Rolle keinen eigenen Wahlausdruck -- und
|
||
damit steht ihr Name nirgends in dieser Datei. */
|
||
.tmerkmal--rolle { --rm: var(--ton-team); }
|
||
.tmerkmal--r-hand { --rm: var(--ton-hand); }
|
||
.tmerkmal--r-linke { --rm: var(--ton-linke); }
|
||
|
||
/* ---------------------------------------------------------------------
|
||
DIE GRUPPENUEBERSCHRIFT
|
||
---------------------------------------------------------------------
|
||
Vier Karten hintereinander sehen gleich aus, egal in welcher
|
||
Reihenfolge sie stehen. Erst die Zaesur macht aus der Sortierung
|
||
eine Gliederung.
|
||
|
||
Sie steht nur da, wenn es mehr als eine Gruppe gibt -- bei einer
|
||
waere sie keine Gliederung, sondern eine Zeile, die sagt, was man
|
||
ohnehin sieht.
|
||
--------------------------------------------------------------------- */
|
||
.t-gruppe {
|
||
display: flex; align-items: center; gap: 10px;
|
||
margin: 24px 0 10px;
|
||
font-size: .78rem; font-weight: 700;
|
||
letter-spacing: .12em; text-transform: uppercase;
|
||
color: var(--tg, #9fb6c6);
|
||
}
|
||
/* Dieselbe Bauweise wie bei der Marke: Grundton an der
|
||
Ueberschrift, die beiden Haende weichen ab. */
|
||
.t-gruppe { --tg: var(--ton-team); }
|
||
.t-gruppe[data-rolle="hand"] { --tg: var(--ton-hand); }
|
||
.t-gruppe[data-rolle="linke"] { --tg: var(--ton-linke); }
|
||
/* Eine Linie, die bis zum Rand laeuft. Sie traegt die Zaesur; die
|
||
Schrift allein ginge zwischen den Karten unter. */
|
||
.t-gruppe::after {
|
||
content: ""; flex: 1 1 auto; height: 1px;
|
||
background: linear-gradient(90deg,
|
||
color-mix(in srgb, var(--tg) 45%, transparent),
|
||
transparent 70%);
|
||
}
|
||
.t-gruppe__zahl {
|
||
padding: 1px 9px; border-radius: 999px;
|
||
border: 1px solid color-mix(in srgb, var(--tg) 40%, transparent);
|
||
background: color-mix(in srgb, var(--tg) 12%, transparent);
|
||
font-size: .72rem; letter-spacing: 0;
|
||
}
|
||
/* Die erste Ueberschrift braucht oben keinen Abstand -- darueber steht
|
||
schon die Trennung zur Warteliste. */
|
||
.t-gruppe:first-of-type { margin-top: 6px; }
|
||
|
||
@media (forced-colors: active) {
|
||
.tmerkmal--rolle { border: 1px solid CanvasText; }
|
||
.t-gruppe::after { background: CanvasText; }
|
||
}
|
||
|
||
/* 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 FUENF STUFENFARBEN (22.09.2026) -- GERECHNET, NICHT GEWAEHLT
|
||
=====================================================================
|
||
|
||
Filipe: „und ich will das es ein zwei kategorien mehr gibt und das
|
||
soll geiler aussehen und jede seine eigene farbe, stark erkennbar."
|
||
|
||
DER ALTE STAND WAR MESSBAR ZU NAH BEIEINANDER. Nachgerechnet in
|
||
OKLab, mit denselben Schwellen, die das ganze Haus benutzt
|
||
(tools/kachelton-regeln.mjs):
|
||
|
||
probe #9fb6c6 <-> standard #7fc4e8 Abstand 0,0576
|
||
probe <-> senior #8fd6a6 Abstand 0,1136
|
||
standard <-> senior Abstand 0,1202
|
||
|
||
MINDEST_ABSTAND ist 0,090. Das erste Paar lag DARUNTER -- „Probe"
|
||
und „Standard" waren nebeneinander praktisch dieselbe Farbe. Und
|
||
die Buntheit lag bei 0,034 / 0,086 / 0,099, alle drei unter
|
||
MINDEST_BUNTHEIT (0,12): blass, genau das, was er gemeldet hat.
|
||
Der Kommentar, der hier stand, nannte das eine Absicht („Probe
|
||
bleibt bewusst das ruhigste Schild"). Die Absicht war gut gemeint
|
||
und hat dazu gefuehrt, dass man zwei Stufen nicht unterscheiden
|
||
konnte.
|
||
|
||
DIE NEUEN FUENF SIND EIN GLEICHMAESSIGER FAECHER: fuenf Farbwinkel
|
||
im Abstand von 72 Grad, alle auf derselben Helligkeit (OKLab
|
||
L = 0,74) und jeweils so bunt, wie es bei diesem Winkel gerade noch
|
||
in sRGB passt. Der Versatz (54 Grad) ist nicht gewaehlt, sondern
|
||
ausgerechnet: Von allen 72 moeglichen Drehungen ist es die, bei der
|
||
der KLEINSTE Abstand am groessten wird -- auch zum Babyblau der
|
||
Rollenmarke „Modi", die direkt daneben steht.
|
||
|
||
Gemessen ergibt das:
|
||
|
||
kleinster Abstand untereinander 0,1531 (Schwelle 0,090)
|
||
kleinster Abstand zur Rollenmarke 0,1108
|
||
kleinster Abstand zu „pausiert" 0,1273
|
||
Kontrast gegen den Kartengrund 7,3 bis 8,6 (noetig: 4,5)
|
||
Buntheit 0,126 bis 0,212 (0,12-0,30)
|
||
|
||
Die Reihenfolge ist ausserdem KALT NACH WARM -- Probe fliederblau,
|
||
Vertretung magenta. Damit traegt die Farbe dieselbe Aussage wie die
|
||
Reihenfolge der Knoepfe: Man sieht die Steigerung, ohne zu lesen.
|
||
|
||
Nachgeprueft wird das nicht hier, sondern in pruef-team-stufen.mjs:
|
||
Die Pruefung liest STUFEN aus dem Server und die Farben aus DIESER
|
||
Datei und rechnet die Abstaende nach. Ein Kommentar, der eine Zahl
|
||
behauptet, ist kein Nachweis.
|
||
===================================================================== */
|
||
.tmerkmal--probe {
|
||
color: color-mix(in srgb, #8aa5ff 82%, #ffffff);
|
||
border-color: rgba(138, 165, 255, .42);
|
||
background: rgba(138, 165, 255, .13);
|
||
}
|
||
.tmerkmal--standard {
|
||
color: color-mix(in srgb, #00c2c7 82%, #ffffff);
|
||
border-color: rgba(0, 194, 199, .42);
|
||
background: rgba(0, 194, 199, .13);
|
||
}
|
||
.tmerkmal--fort {
|
||
color: color-mix(in srgb, #8dbe00 82%, #ffffff);
|
||
border-color: rgba(141, 190, 0, .42);
|
||
background: rgba(141, 190, 0, .13);
|
||
}
|
||
.tmerkmal--senior {
|
||
color: color-mix(in srgb, #ff8511 82%, #ffffff);
|
||
border-color: rgba(255, 133, 17, .42);
|
||
background: rgba(255, 133, 17, .13);
|
||
}
|
||
.tmerkmal--vertretung {
|
||
color: color-mix(in srgb, #ff6ad0 82%, #ffffff);
|
||
border-color: rgba(255, 106, 208, .42);
|
||
background: rgba(255, 106, 208, .13);
|
||
}
|
||
|
||
/* ---------- 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. */
|
||
/* `auto-fill` UND NICHT `auto-fit` (22.09.2026).
|
||
---------------------------------------------------------------------
|
||
Der Unterschied fiel erst auf, als die Karten nach Rolle gruppiert
|
||
wurden: `auto-fit` laesst leere Spalten zusammenfallen, und die
|
||
uebrigen Karten ziehen sich ueber die frei gewordene Breite. Solange
|
||
alle vier Personen in EINER Reihe standen, war das richtig. In einer
|
||
Gruppe mit genau einer Person -- und die rechte Hand ist immer eine
|
||
-- wurde daraus eine Karte ueber die gesamte Bildschirmbreite.
|
||
|
||
Im Bildschirmfoto vom 22.09. war Rieke damit 1800 px breit und hoeher
|
||
als der sichtbare Bereich, waehrend die drei Modis darunter normal
|
||
nebeneinander standen. Es sah aus wie zwei verschiedene Seiten.
|
||
|
||
`auto-fill` haelt die leeren Spalten offen. Eine Karte ist dann
|
||
genauso breit wie jede andere, egal wie viele neben ihr stehen. Auf
|
||
einem schmalen Schirm bleibt alles wie bisher: `min(300px, 100%)`
|
||
laesst dort ohnehin nur eine Spalte zu. */
|
||
.t-wartet, .t-leute {
|
||
display: grid; gap: 12px;
|
||
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
|
||
align-items: start;
|
||
}
|
||
|
||
/* 2. DIE STUFE ALS FARBE DER KARTE.
|
||
Dieselben fuenf Toene wie die Schilder darin -- ein sechster
|
||
waere eine zweite Sprache fuer dieselbe Sache. Sie stehen hier
|
||
ein zweites Mal, weil CSS keine Zuordnung kennt; dass beide
|
||
Listen gleich sind, weist pruef-team-stufen.mjs nach. */
|
||
.tperson[data-stufe="probe"] { --r: #8aa5ff; }
|
||
.tperson[data-stufe="standard"] { --r: #00c2c7; }
|
||
.tperson[data-stufe="fort"] { --r: #8dbe00; }
|
||
.tperson[data-stufe="senior"] { --r: #ff8511; }
|
||
.tperson[data-stufe="vertretung"] { --r: #ff6ad0; }
|
||
/* 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;
|
||
}
|
||
|
||
/* =====================================================================
|
||
„DEIN TEAM" — DIE KARTEN UND DIE SEITE (11.09.2026)
|
||
|
||
Filipe, mit drei Bildschirmfotos: die Kachel umbenennen, "diese zwei
|
||
kacheln noch mehr perfektionieren", "veränder den hintergrund von
|
||
diesen kacheln komplett", "perfektionnier diese seite einfach
|
||
komplett".
|
||
|
||
Was hier steht, ist NICHT nur Geschmack. Drei der Änderungen sind
|
||
Fehler, die erst das Nachmessen am fertigen Bildschirm gezeigt hat --
|
||
sie stehen bei ihrer Regel, jede mit ihrer Zahl.
|
||
===================================================================== */
|
||
|
||
/* ---- Die vier Zahlen: 2 × 2 statt 3 + 1 ------------------------------
|
||
|
||
GEMESSEN: Die Karte ist innen 536 px breit, die Regel verlangte je
|
||
Spalte mindestens 130 px. Vier Spalten bräuchten 4 × 130 + 3 × 8 =
|
||
544 px. Acht Pixel zu wenig -- also drei Spalten, und die vierte Zahl
|
||
rutschte allein in eine zweite Reihe. Genau so steht sie in Filipes
|
||
Bildschirmfoto.
|
||
|
||
DIE LEHRE IST NICHT „130 auf 122 senken". Das wäre dieselbe Rechnung
|
||
mit einer anderen Zahl, und beim nächsten Umbau stünde sie wieder
|
||
knapp daneben. Vier Dinge sehen nur in 1 × 4, 2 × 2 oder 4 × 1
|
||
richtig aus; 3 + 1 ist die eine Anordnung, die IMMER falsch wirkt --
|
||
und eine `auto-fit`-Regel kann jederzeit dort landen. Zwei Spalten
|
||
können es nicht. */
|
||
.tperson__zahlen {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
/* ---- Der Grund der Karte --------------------------------------------
|
||
|
||
Vorher: ein flacher Verlauf mit einem Hauch Rollenfarbe oben links.
|
||
Auf der Team-Seite stehen zwei dieser Karten nebeneinander, jede
|
||
fast bildschirmhoch -- das ist die größte Fläche der Seite, und sie
|
||
war die ruhigste.
|
||
|
||
Jetzt vier Lagen, von unten nach oben gelesen:
|
||
1. die tiefe Grundfarbe (bleibt, sie trägt die Lesbarkeit),
|
||
2. ein Lichtschein aus der oberen linken Ecke im Ton der Person,
|
||
3. ein zweiter, kühler aus der unteren rechten -- die beiden
|
||
ergeben die Diagonale, die das ganze Haus führt,
|
||
4. das feine Raster darüber.
|
||
|
||
AUGENSCHONEND BLEIBT PFLICHT: Keine Lage geht über 14 % Deckkraft,
|
||
und die hellste Stelle liegt in einer ECKE, nicht hinter dem Text.
|
||
Ein Schein hinter einer Zahl macht sie schwerer lesbar, egal wie
|
||
schön er ist. */
|
||
.tperson {
|
||
background:
|
||
/* 1. Kantenlicht an der Oberkante -- die Karte bekommt eine Kante,
|
||
die das Licht faengt, statt an einer Linie aufzuhoeren. */
|
||
linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 11%),
|
||
/* 2. das feine Raster */
|
||
var(--raster),
|
||
/* 3. ein schmaler Lichtstreifen quer ueber die Karte -- er gibt der
|
||
Flaeche eine Richtung, ohne irgendwo hell genug zu werden, um
|
||
Text zu stoeren (3 %). */
|
||
linear-gradient(115deg, transparent 26%, rgba(255, 255, 255, .032) 45%, transparent 60%),
|
||
/* 4. der Schein aus der oberen linken Ecke.
|
||
|
||
HIER STAND ZUERST `var(--r)` -- die Farbe der STUFE. Das war
|
||
logisch und unsichtbar: Bei "Probe" ist sie ein gedaempftes
|
||
Grau, und ein Grauschein auf fast Schwarz ist kein Schein.
|
||
Gemessen am Bildschirmfoto sah die Karte nach der Aenderung
|
||
genauso aus wie davor. Jetzt tragen die beiden Ecken die
|
||
Hausfarben -- Lila oben links, Babyblau unten rechts --, und
|
||
die Stufe bleibt dort, wo sie hingehoert: im Kantenlicht und
|
||
am Namensschild. */
|
||
radial-gradient(135% 105% at 0% 0%,
|
||
color-mix(in srgb, var(--violett) 26%, transparent), transparent 58%),
|
||
/* 5. der Gegenschein unten rechts */
|
||
radial-gradient(125% 95% at 100% 100%,
|
||
color-mix(in srgb, var(--akzent) 18%, transparent), transparent 60%),
|
||
/* 6. die tiefe Grundfarbe, leicht schraeg statt senkrecht */
|
||
linear-gradient(160deg, rgba(14, 18, 30, .955), rgba(6, 9, 16, .985));
|
||
transition: box-shadow var(--tempo), transform var(--tempo);
|
||
}
|
||
/* Beim Überfahren hebt sie sich einen Hauch -- so viel, dass man merkt,
|
||
welche Karte man gerade liest, und so wenig, dass die Seite nicht
|
||
zappelt. Zwei Pixel, kein Schatten-Feuerwerk. */
|
||
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
|
||
.tperson:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9);
|
||
}
|
||
}
|
||
|
||
/* ---- Die Woche ------------------------------------------------------- */
|
||
/* HEUTE IST MARKIERT. Sieben gleich aussehende Kästchen zwingen dazu,
|
||
den Wochentag im Kopf auszurechnen, um zu wissen, wo man steht. */
|
||
.tampel__tag[data-heute="ja"] {
|
||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 55%, transparent);
|
||
font-weight: 800;
|
||
}
|
||
/* Ein freier Tag war GAR NICHT gefüllt -- sieben leere Rahmen sehen aus
|
||
wie „noch nicht geladen". Jetzt eine Andeutung: sichtbar als Fläche,
|
||
leise genug, dass belegte Tage weiterhin herausstechen. */
|
||
.tampel__tag--frei {
|
||
background: rgba(255, 255, 255, .025);
|
||
}
|
||
|
||
/* ---- Der Weg in den Chat --------------------------------------------- */
|
||
.tschreiben {
|
||
display: block; margin: 2px 0 14px;
|
||
padding: 10px 14px;
|
||
border: 1px solid color-mix(in srgb, var(--r) 34%, transparent);
|
||
border-radius: var(--radius-klein);
|
||
background: color-mix(in srgb, var(--r) 9%, transparent);
|
||
color: var(--text); text-decoration: none; text-align: center;
|
||
font-size: .88rem; font-weight: 600;
|
||
transition: background var(--tempo), border-color var(--tempo);
|
||
}
|
||
.tschreiben:hover {
|
||
background: color-mix(in srgb, var(--r) 16%, transparent);
|
||
border-color: color-mix(in srgb, var(--r) 52%, transparent);
|
||
}
|
||
.tschreiben:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||
|
||
/* ---- Der Kopf der Seite ---------------------------------------------
|
||
Der Erklärkasten war auf 44 Zeichen begrenzt und stand dadurch auf
|
||
einem breiten Bildschirm als schmale Säule neben viel Bild -- sechs
|
||
Zeilen mit je vier Wörtern. Lesbar ist er zwischen 45 und 75
|
||
Zeichen; die Grenze steht jetzt am oberen Ende dieses Bereichs und
|
||
nicht darunter. */
|
||
.t-kopf__grenze { max-width: 68ch; }
|
||
|
||
/* =======================================================================
|
||
DIE PERSONENKARTE, KOMPLETT ANDERS (22.09.2026)
|
||
=======================================================================
|
||
|
||
Filipe: „was verstehst du nicht wenn ich sage die sollen viel
|
||
krasser geiler und übersichtlicher sein. […] und die kacheln sollen
|
||
viel krass geiler und spezieller aussehen auch der hintergrund,
|
||
veränder das komplett."
|
||
|
||
Das „was verstehst du nicht" ist berechtigt: Am 20.09. hatte ich
|
||
dieselbe Karte schon einmal angefasst und dabei nur die RECHTE HAND
|
||
besonders gemacht. Die Modi-Karten sahen danach aus wie vorher --
|
||
dunkles Rechteck, Raster, ein Kantenlicht in einem blassen Ton.
|
||
|
||
---------------------------------------------------------------------
|
||
WAS HIER ANDERS IST -- vier Dinge, keine Effekte
|
||
|
||
1. EIN KOPFBAND. Bis heute begann die Karte mit einem Kreis und
|
||
einem Namen auf demselben Grund wie alles darunter. Vier Karten
|
||
nebeneinander waren dadurch vier gleiche Rechtecke, in denen man
|
||
den Namen SUCHEN musste. Jetzt traegt der Kopf ein eigenes Band
|
||
in der Farbe der Stufe, bis an die Kanten der Karte (auch bis in
|
||
die Fase -- `clip-path` an der Karte schneidet es sauber ab).
|
||
Damit ist auf zwei Meter Entfernung erkennbar, wessen Karte das
|
||
ist und wo sie anfaengt.
|
||
|
||
2. DER HINTERGRUND IST NICHT MEHR NEUTRAL. Er hatte einen
|
||
Farbschimmer von 11 % aus einer Ecke; bei den alten, blassen
|
||
Stufentoenen war davon nichts zu sehen. Jetzt laeuft die Farbe
|
||
vom Kopfband aus nach unten aus und die Karte steht auf einer
|
||
DUNKLEREN Grundplatte als zuvor. Beides zusammen: mehr Farbe UND
|
||
besserer Textkontrast -- das ist kein Widerspruch, weil die Farbe
|
||
oben liegt und der Text unten.
|
||
|
||
3. DER KREIS WIRD EIN ZEICHEN. 44 px ohne Rand waren ein Punkt
|
||
neben einem Wort. 52 px mit einem Ring in der Stufenfarbe sind
|
||
ein Abzeichen. Derselbe Ring liegt um das Foto, wenn es eins
|
||
gibt -- ein Mensch mit Bild und einer ohne sollen gleich viel
|
||
Platz und dieselbe Form haben.
|
||
|
||
4. DIE ZAHLEN STEHEN AUF EINEM SOCKEL. Sie sind der Teil, den man
|
||
im Vorbeigehen liest. Ein eigener, dunklerer Streifen am Fuss
|
||
trennt sie von den Balken darueber, statt sie in dieselbe Flaeche
|
||
zu mischen.
|
||
|
||
AUGENSCHONEND BLEIBT ES: keine Bewegung, kein Leuchten, kein
|
||
Flackern. Die staerkste Farbfaeche der Karte liegt bei 30 % Deckung
|
||
ueber einem fast schwarzen Grund. Was sich geaendert hat, ist die
|
||
ANORDNUNG -- und die kostet die Augen nichts.
|
||
======================================================================= */
|
||
|
||
/* ---- 1. Das Kopfband -------------------------------------------------- */
|
||
/* `z-index: 1` liegt zwischen Raster (::after, 0) und Kantenlicht
|
||
(::before, 2). Ohne ihn verschwaende das Band unter dem Raster --
|
||
nicht falsch, aber flau. */
|
||
.tperson__kopf {
|
||
position: relative; z-index: 1;
|
||
margin: -17px -19px 14px;
|
||
padding: 15px 19px 13px;
|
||
gap: 13px;
|
||
background:
|
||
linear-gradient(135deg,
|
||
color-mix(in srgb, var(--r) 30%, transparent) 0%,
|
||
color-mix(in srgb, var(--r) 12%, transparent) 52%,
|
||
color-mix(in srgb, var(--r) 4%, transparent) 100%),
|
||
linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .12));
|
||
border-bottom: 1px solid color-mix(in srgb, var(--r) 36%, transparent);
|
||
}
|
||
@media (max-width: 620px) {
|
||
/* Die Karte hat auf schmalen Schirmen weniger Polster (14/15 px),
|
||
also braucht das Band andere Gegenmasse. Eine feste Zahl gehoert
|
||
dorthin, wo das steht, was sie ausgleicht. */
|
||
.tperson__kopf { margin: -14px -15px 12px; padding: 13px 15px 11px; }
|
||
}
|
||
|
||
/* ---- 2. Der Grund ----------------------------------------------------- */
|
||
/* Die deckende Grundfarbe setzt weiterhin module.css (#070b12) -- sie
|
||
muss decken, weil die Karte auf dem Buehnenbild der Seite liegt.
|
||
Hier stehen nur die Ebenen DARUEBER. */
|
||
.tperson {
|
||
background:
|
||
/* Der Schein, der unter dem Kopfband hervorkommt und nach etwa
|
||
einem Drittel der Karte ausgelaufen ist. */
|
||
linear-gradient(180deg,
|
||
color-mix(in srgb, var(--r) 13%, transparent) 0%,
|
||
color-mix(in srgb, var(--r) 4%, transparent) 22%,
|
||
transparent 38%),
|
||
/* Eine sehr feine Schraffur -- sie gibt der Flaeche eine Oberflaeche,
|
||
ohne ein Muster zu sein. 2,2 % Weiss auf Schwarz ist an der
|
||
Grenze des Sichtbaren, und genau dort soll sie liegen. */
|
||
repeating-linear-gradient(115deg,
|
||
rgba(255, 255, 255, .022) 0 1px, transparent 1px 10px),
|
||
/* Und die Platte darunter, dunkler als vorher. */
|
||
linear-gradient(178deg, rgba(8, 11, 18, .97), rgba(4, 6, 11, .99));
|
||
}
|
||
|
||
/* ---- 3. Das Zeichen --------------------------------------------------- */
|
||
.tperson__zeichen,
|
||
.tperson__bild {
|
||
width: 52px; height: 52px;
|
||
box-shadow:
|
||
0 0 0 2px color-mix(in srgb, var(--r) 55%, transparent),
|
||
0 0 0 3px rgba(0, 0, 0, .45);
|
||
}
|
||
.tperson__zeichen {
|
||
font-size: 1.24rem;
|
||
border-color: color-mix(in srgb, var(--r) 20%, transparent);
|
||
background: color-mix(in srgb, var(--r) 22%, #070a11);
|
||
}
|
||
.tperson__bild { border-color: transparent; }
|
||
|
||
/* Der Name traegt das Band -- er ist der Grund, warum man hinsieht. */
|
||
.tperson__kopf .tperson__name {
|
||
font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em;
|
||
}
|
||
|
||
/* ---- 4. Das Zahlenband ------------------------------------------------ */
|
||
/* EIN BAND, KEIN SOCKEL -- und das ist ein Unterschied, der beinahe
|
||
danebengegangen waere. Ein Sockel klebt am unteren Rand der Karte;
|
||
dafuer muesste er das letzte Element sein. Er ist es NICHT: Unter
|
||
den Zahlen kommen auf der Team-Lage noch die drei Bereichsbalken,
|
||
und auf team.html noch mehr. Ein negativer Aussenabstand nach unten
|
||
haette die Balken unter das Band geschoben.
|
||
|
||
Gepruefte Reihenfolge in teamlage.js: Kopf, Merkmale, Ampel,
|
||
Stufen, Schreiben, ZAHLEN, Balken. Also blutet das Band nur zu den
|
||
Seiten aus und traegt oben wie unten eine Kante -- das funktioniert
|
||
an jeder Stelle der Karte, auch wenn morgen etwas dazwischen kommt. */
|
||
.tperson__zahlen {
|
||
position: relative; z-index: 1;
|
||
margin: 14px -19px;
|
||
padding: 13px 19px;
|
||
/* NUR ANGEDUNKELT, NICHT ZUGEDECKT. Zuerst stand hier schwarz mit
|
||
34-52 % -- im Bildschirmfoto wurde daraus ein schwarzer Riegel
|
||
quer durch die Karte, waehrend die Mitte den lila Himmel des
|
||
Hauses zeigte. Drei verschiedene Flaechen uebereinander sehen
|
||
nicht nach einer Karte aus, sondern nach drei. 14-22 % dunkelt
|
||
genug, um die Zahlen abzusetzen, und laesst den Himmel durch. */
|
||
background: linear-gradient(180deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, .22));
|
||
border-top: 1px solid color-mix(in srgb, var(--r) 20%, rgba(255, 255, 255, .06));
|
||
border-bottom: 1px solid rgba(255, 255, 255, .05);
|
||
}
|
||
/* Steht es doch einmal ganz unten (keine Balken), soll die Karte nicht
|
||
mit einer Kante mitten im Polster aufhoeren. */
|
||
.tperson__zahlen:last-child {
|
||
margin-bottom: -19px; padding-bottom: 16px; border-bottom: 0;
|
||
}
|
||
@media (max-width: 620px) {
|
||
.tperson__zahlen { margin: 12px -15px; padding: 12px 15px; }
|
||
.tperson__zahlen:last-child { margin-bottom: -16px; padding-bottom: 14px; }
|
||
}
|
||
|
||
/* ---- 5. Fuenf Stufenknoepfe statt drei -------------------------------- */
|
||
/* Bei fuenf Knoepfen auf einer 300 px breiten Karte wird aus einer
|
||
Reihe eine Wand. Etwas schmaler und ein engerer Abstand halten sie
|
||
auf zwei Zeilen statt auf drei -- gemessen, nicht geschaetzt. */
|
||
.tstufen { gap: 5px; }
|
||
.tstufen__knopf { padding: 6px 10px; font-size: .75rem; }
|
||
|
||
@media (forced-colors: active) {
|
||
.tperson__kopf { border-bottom: 1px solid CanvasText; }
|
||
.tperson__zahlen { border-top: 1px solid CanvasText; }
|
||
.tperson__zeichen, .tperson__bild { box-shadow: none; border: 1px solid CanvasText; }
|
||
}
|
||
|
||
/* ---- 6. Die Karte wird kuerzer --------------------------------------- */
|
||
/* GEMESSEN, BEVOR ETWAS GEAENDERT WURDE (22.09.2026, 1420 px breit):
|
||
Karte 781 px hoch, davon Kopf 82, Merkmale 28, Ampel 95,
|
||
Schreiben-Knopf 60, ZAHLEN 167, BALKEN 276. Die beiden letzten
|
||
machen mehr als die Haelfte aus -- also wird dort gekuerzt und
|
||
nicht dort, wo es am leichtesten faellt.
|
||
|
||
Filipe zu einer anderen Seite, dieselbe Sache: „es ist alles so
|
||
lang gezogen, muss ewig scrollen um alles zu sehen das ist uncool."
|
||
Gekuerzt wird der Leerraum, nicht der Inhalt: Es steht hinterher
|
||
dasselbe da. */
|
||
.tperson .tz { padding: 8px 11px; }
|
||
.tperson .tz__schild { line-height: 1.3; }
|
||
.tperson .tfort { gap: 7px; margin-top: 12px; padding-top: 11px; }
|
||
.tperson .tfort__zeile { padding: 9px 11px; gap: 5px; }
|
||
.tperson .tampel { margin-top: 12px; }
|
||
.tperson .tschreiben { margin: 2px 0 10px; padding: 9px 14px; }
|
||
|
||
/* ---- 7. Die Stufenknoepfe tragen ihre eigene Farbe -------------------- */
|
||
/* IM BILDSCHIRMFOTO VOM 22.09. WAREN ALLE FUENF BABYBLAU, auch der
|
||
gewaehlte. Der Knopf "Senior" fuehrte also zu einer orangen Karte,
|
||
sah selbst aber aus wie "Standard". Filipe: „jede seine eigene
|
||
farbe, stark erkennbar" -- das gilt fuer die Stelle, an der man die
|
||
Stufe WAEHLT, mindestens so sehr wie fuer die, an der sie steht.
|
||
|
||
Der gewaehlte Knopf ist gefuellt (wie bisher), die uebrigen tragen
|
||
ihren Ton nur angedeutet: als Schrift und Rand. Fuenf gefuellte
|
||
Pillen nebeneinander waeren Konfetti; fuenf angedeutete sind eine
|
||
Leiter, die man von links nach rechts liest.
|
||
|
||
`--st` steht je Knopf am `data-stufe`, das Skript setzt es ohnehin.
|
||
Die Farbwerte sind dieselben fuenf wie oben -- dass sie
|
||
uebereinstimmen, weist pruef-team-stufen.mjs nach. */
|
||
.tstufen__knopf[data-stufe="probe"] { --st: #8aa5ff; }
|
||
.tstufen__knopf[data-stufe="standard"] { --st: #00c2c7; }
|
||
.tstufen__knopf[data-stufe="fort"] { --st: #8dbe00; }
|
||
.tstufen__knopf[data-stufe="senior"] { --st: #ff8511; }
|
||
.tstufen__knopf[data-stufe="vertretung"] { --st: #ff6ad0; }
|
||
|
||
.tstufen__knopf[data-stufe] {
|
||
color: color-mix(in srgb, var(--st) 72%, #e8f1fa);
|
||
border-color: color-mix(in srgb, var(--st) 30%, transparent);
|
||
background: color-mix(in srgb, var(--st) 7%, transparent);
|
||
}
|
||
.tstufen__knopf[data-stufe]:hover:not([disabled]) {
|
||
color: color-mix(in srgb, var(--st) 40%, #ffffff);
|
||
background: color-mix(in srgb, var(--st) 15%, transparent);
|
||
border-color: color-mix(in srgb, var(--st) 48%, transparent);
|
||
}
|
||
.tstufen__knopf[data-an="ja"][data-stufe] {
|
||
color: #0a121e;
|
||
background: color-mix(in srgb, var(--st) 84%, #ffffff);
|
||
border-color: transparent;
|
||
}
|
||
@media (forced-colors: active) {
|
||
.tstufen__knopf[data-an="ja"][data-stufe] { border: 2px solid Highlight; }
|
||
}
|