DogFatherGitandClaude Opus 5
a16e4cb337
Filipe, drei Bildschirmfotos: den Namen der Kachel aendern, "diese zwei kacheln noch mehr perfektionieren", "veraender den hintergrund von diesen kacheln komplett", "perfektionnier diese seite einfach komplett". DER NAME, DRITTE FASSUNG. Zuerst "Team-Lage" -- das klang nach Bericht UEBER Menschen. Dann "Eingang" -- das beschrieb nur die eine Haelfte (was hereinkommt) und liess die groessere weg: wer da ist, wer heute kann, wer was offen hat. "Dein Team" sagt beides und stellt niemanden ueber jemanden. DREI SACHEN WAREN NICHT GESCHMACK, SONDERN FEHLER -- und alle drei hat erst das Nachmessen am fertigen Bildschirm gezeigt: UEBER SIEBEN TAGEN STAND "Kann heute". Im Singular, ueber einer ganzen Woche. Wer nur die Ueberschrift liest -- und das tut man bei einer Zeile in Versalien --, haelt den ganzen Streifen fuer den heutigen Tag und liest sechs Kaestchen falsch. Der Satz DARUNTER war immer richtig; zwei Aussagen ueber demselben Bild, und die auffaelligere war die falsche. DIE VIER ZAHLEN BRACHEN 3 + 1. Gemessen: Die Karte ist innen 536 px breit, die Regel verlangte je Spalte mindestens 130 px, vier Spalten braeuchten 544. Acht Pixel zu wenig. Die Lehre ist NICHT "130 auf 122 senken" -- das waere dieselbe Rechnung mit einer anderen Zahl. Vier Dinge sehen nur in 1x4, 2x2 oder 4x1 richtig aus; 3+1 ist die eine Anordnung, die immer falsch wirkt, und eine `auto-fit`-Regel kann jederzeit dort landen. Zwei feste Spalten koennen es nicht. DER WEG IN DEN CHAT war ein unterstrichener Satz ueber die volle Kartenbreite -- er sah aus wie eine Ueberschrift, nicht wie ein Knopf. DER GRUND DER KARTEN, und hier hat mich das erste Ergebnis widerlegt: Der Schein aus der oberen Ecke nahm `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. Nach der Aenderung sah die Karte auf dem Bildschirmfoto genauso aus wie davor. Jetzt tragen die beiden Ecken die Hausfarben (Lila oben links, Babyblau unten rechts), dazu ein Lichtstreifen quer und ein Kantenlicht oben. Die Stufe bleibt, wo sie hingehoert: im Kantenlicht und am Schild. AUGENSCHONEND BLEIBT PFLICHT: Keine Lage geht ueber 26 %, der Lichtstreifen liegt bei 3 %, und die hellsten Stellen sitzen in den ECKEN -- nicht hinter dem Text. Ein Schein hinter einer Zahl macht sie schwerer lesbar, egal wie schoen er ist. Dazu: HEUTE ist im Wochenstreifen markiert (sieben gleich aussehende Kaestchen zwingen sonst dazu, den Wochentag im Kopf auszurechnen), ein freier Tag hat eine Andeutung statt gar nichts (sieben leere Rahmen sahen aus wie "noch nicht geladen"), und der Erklaerkasten im Kopf darf 68 statt 44 Zeichen breit sein -- auf einem breiten Bildschirm stand er als schmale Saeule mit sechs Zeilen zu je vier Woertern neben viel Bild. WARUM DIE FALSCHE UEBERSCHRIFT UEBERLEBEN KONNTE: pruef-team-ampel prueft seit dem ersten Tag, dass SIEBEN Tage kommen und der erste heute ist. Was sie nie angesehen hat, ist der Text darueber -- die Zahl stimmte ja. Sie prueft ihn ab jetzt, an derselben Stelle wie die Zahl, damit beide zusammen gelesen werden. Mit Gegenprobe: Die Suche muss das Wort "heute" auch finden koennen, sonst waere sie gruen, weil sie nie etwas liest. pruef-team-ampel 28 -> 32 · pruef-team-stufen 24 · pruef-css-klassen gruen · pruef-start-ansicht 143 · pruef-rollen 278 · pruef-modi-wortleck 5. OFFEN GEBLIEBEN und ihm gemeldet: Auf einem 1920er Bildschirm steht der Inhalt in einer Saeule von rund 1150 px, links und rechts bleibt Bild. Das ist die Breite ALLER zwanzig Seiten; sie hier allein zu aendern hiesse, eine Seite anders zu bauen als die anderen neunzehn. Co-Authored-By: Claude Opus 5 <[email protected]>
766 lines
31 KiB
CSS
766 lines
31 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;
|
||
}
|
||
|
||
/* =====================================================================
|
||
„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; }
|