DogFatherGitandClaude Opus 5
449fe35c0a
Zwei Auftraege in einem Zug: "mach weiter" (Blueprint Kapitel 4/4.1)
und, zum Bildschirmfoto der Seite, "das muss viel krasser sein".
KAPITEL 4 -- DIE MITGLIEDER-KACHEL
Der Blueprint nennt: "Name & Foto · Rolle(n)/Kategorie(n) · Status
(aktiv/pausiert) · Anzahl offener Aufgaben · Datum 'Modi seit' ·
Schnellaktionen". Name, Foto und Zahlen standen schon; Status, "dabei
seit", Stufe und ein Knopf zum Schreiben kommen dazu.
KAPITEL 4.1 -- DIE DREI STUFEN
Probe, Standard, Senior. Sie sind eine ARBEITSEINTEILUNG, keine
Rechtegrenze -- was ein Modi darf, haengt an der Rolle; die Stufe sagt,
wo er im Team steht. Gesetzt werden sie nur von DogFather: Der
Blueprint gibt der rechten Hand den gleichen UEBERBLICK, aber
"Verwaltungsrechte optional durch Owner freischaltbar", also aus.
NULL heisst "Probe" und nicht "unbekannt" -- ein dritter Zustand waere
eine Frage, die niemand beantworten kann.
ZWEI ECHTE FEHLER, BEIDE VON DER NEUEN PRUEFUNG GEFUNDEN
1. PAUSIERTE VERSCHWANDEN KOMPLETT. In der Abfrage stand `AND aktiv =
1`. Wer jemanden pausierte, bei dem verschwand er samt seiner
OFFENEN RUECKMELDUNGEN aus dem Eingang -- die warteten weiter auf
eine Antwort, nur sah sie niemand mehr.
2. DER EINGANG HAETTE AUF FRISCHER ANLAGE 503 GELIEFERT. Die
Checklisten-Tabellen entstehen beim ersten Aufruf einer Checkliste;
diese Seite liest sie aber auch. Wer sie oeffnete, bevor je jemand
eine Checkliste angesehen hatte, bekam einen Fehler ohne Erklaerung
-- auf einer neuen Anlage also beim allerersten Blick. Das Schema
hat jetzt einen Besitzer, der es herausgibt; ein zweites CREATE
TABLE waere der Anfang von zwei Schemata gewesen.
"VIEL KRASSER" -- UND ZWAR MIT INFORMATION, NICHT MIT LAERM
* ZWEI REIHEN STATT EINER. Alle fuenf Kaesten lagen in EINEM Raster
mit 150 px Mindestbreite: Im Bildschirmfoto stand "Community 12
von" -- abgeschnitten mitten in der Zahl -- und die laengste Liste
machte die ganze Reihe so hoch wie sich selbst. Jetzt oben, was
eine Antwort braucht, darunter das Team; 300 px Mindestbreite.
* DIE KARTE WAR FAHL, und das war ein Fehler: `--r` fiel auf ein
helles Grau zurueck, aus dem das Kantenlicht einen Nebel ueber die
ganze Karte legte. Sie traegt jetzt die Farbe der Stufe -- kein
Nebel, und man sieht am Rand, wer wo steht.
* SECHS ZAHLENKAESTEN WURDEN DREI BALKEN. "40 offen" beantwortet
nicht, wie weit man ist: 40 von 40 ist etwas anderes als 40 von
100. Gruen (in Ordnung) und Bernstein (zu besprechen) fuellen den
Balken; die ganze Zeile ist der Weg dorthin.
* DIE DREI ZAHLEN DER SEITE stehen oben als Zahlen statt in einem
Satz. Die Warnfarbe erscheint NUR, wenn wirklich etwas wartet --
eine Null in Bernstein waere ein Alarm ohne Anlass, und ab dem
dritten Mal sieht man ihn nicht mehr.
GEMESSEN
pruef-team-stufen (neu) 24, mit Gegenprobe: hoch- und zurueckstufen,
und dieselbe Stufe zweimal zu setzen darf
keine zweite Protokollzeile erzeugen
pruef-rollen 274 pruef-modi-checkliste 59
pruef-zwischenspeicher 21
Ansicht: Rechner 1440 und Handy 412 -- keine Skriptfehler, nichts
ragt seitlich heraus (0 px).
Co-Authored-By: Claude Opus 5 <[email protected]>
567 lines
22 KiB
CSS
567 lines
22 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;
|
|
}
|
|
.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; } }
|