DogFatherGitandClaude Opus 5
1a14eb7449
=== 1. BEARBEITEN UND LOESCHEN, WAS SIE ANGELEGT HAT ===
Filipe: "kuemmer dich bitte auch drum dass die rechte hand, wenn sie
aufgaben an die modis oder linke hand erstellt, will ich dass sie die
moeglichkeit hat die auch zu bearbeiten und zu loeschen bitte.
perfektionier das fuer sie und fuer dogfather."
WARUM ES VORHER NICHT GING, und es sah nicht danach aus: `creator_id`
heisst nicht "wer hat sie angelegt", sondern "zu wem gehoert sie" (so
steht es am Tabellenkopf). Verteilt die rechte Hand eine Aufgabe an
einen Modi, steht dort der MODI. Sie erfuellte damit an ihrer eigenen
Aufgabe keine der drei Bedingungen von `darfAendern` und bekam 403 --
auf einen Knopf, den die Oberflaeche ihr trotzdem anbot, weil sie ihn
an `darf_verteilen` haengte: eine Auskunft ueber die PERSON, wo die
Frage der AUFGABE gilt.
Die Spalte `erstellt_von` gibt es seit jeher und wird beim Anlegen
gefuellt -- die Sichtbarkeitsregeln fragen sie an sechs Stellen ab. Sie
stand nur nie in dieser einen Zeile. Und sie fehlte in SPALTEN, kam
also in keiner Aufgabe mit: Die neue Regel waere ein Vergleich gegen
`undefined` geblieben.
DIE REGEL IST ALLGEMEIN, NICHT AUF EINE ROLLE GEMUENZT: wer etwas
angelegt hat, darf es auch aendern. Ein Rollenname waere die naechste
zweite Wahrheit -- in dieser Woche ist genau das dreimal veraltet.
LOESCHEN BEKOMMT EINE EIGENE FRAGE, weil es das Einzige ist, was sich
nicht zuruecknehmen laesst: `darfAufgabenVerteilen(person) &&
darfAendern(person, aufgabe)`. Damit darf sie ihre eigenen -- und der
Modi, bei dem die Aufgabe LIEGT, darf sie weiterhin bearbeiten, aber
nicht verschwinden lassen. Ablehnen und Abbrechen sind die Wege dafuer.
Die Loesch-Route holt die Aufgabe jetzt mit der Sichtbarkeitsregel und
antwortet mit 404 statt 403, wenn es sie fuer diese Person nicht gibt
-- sonst liesse sich durch Ausprobieren herausfinden, welche Nummern
vergeben sind. Beim Aendern stand das schon so, eine Route weiter oben.
pruef-verteilen: 19 -> 30 Punkte. Mit drei Gegenproben, ohne die "sie
darf" auch dann gruen waere, wenn jeder alles duerfte: der Modi wird
abgewiesen (403), die Aufgabe steht danach noch da, und eine FREMDE
Aufgabe loescht sie nicht.
=== 2. JEDE KARTE HAT DENSELBEN FUSS ===
Filipe: "wer hat sie soll bitte bei all diesen aufgaben stehen. bei all
diesen kategorien da. ... es soll auch immer gleich aussehen und nicht
manchmal verschoben und so."
ZWEI URSACHEN, und keine davon war Zufall:
a) "Wer hat sie?" entstand nur, solange oben "Alle" gewaehlt war
(`if (anAlle)`). Wer auf einen Namen tippte, verlor den Knopf an
ALLEN zwoelf Karten, ohne dass irgendwo stand, warum. Die Auskunft
"wer aus dem Team hat diese Vorlage" haengt aber an der VORLAGE,
nicht an der Auswahl -- sie daran zu binden war der Fehler.
b) Der Fuss war EINE Reihe mit `flex-wrap`, und wie viele Angaben
darin stehen, haengt von der Karte ab: "Frist" immer, "fuer:
Rolle" manchmal, "liegt bei 4 von 5" nur, wenn schon jemand sie
hat. Karten ohne den dritten Text hatten noch Platz fuer einen
Knopf, Karten mit ihm nicht -- also stand "An alle" mal neben der
Frist und mal darunter. Zwoelf Karten, drei verschiedene Fuesse.
Jetzt zwei Reihen mit fester Aufgabe: oben, was man LIEST; unten, was
man DRUECKT. Die Knopfreihe ist immer die letzte Zeile und sitzt am
unteren Rand, also stehen die Knoepfe bei allen Karten einer Reihe auf
derselben Hoehe -- auch wenn der Text darueber verschieden lang ist.
Die Rueckseite verteilt jetzt IMMER an alle. Vorher nahm sie
`katalogZiel()`; solange sie nur bei "Alle" existierte, war das
dasselbe. Seit sie immer da ist, waere es eine Falle: Der Knopf sagt
"Nachholen - 3 fehlen" und gaebe sie einer einzigen Person.
=== 3. DUBLETTEN AUFRAEUMEN ===
Filipe zu "Diene x6 - Ghost x6 - Marina x6 - Miss x6" bei "0 von 24":
"mach aus den 6 1 mal bitte, ich hab mich da geirrt."
`tools/aufgaben-doppelte.mjs` raeumt das auf. Es TUT VON SICH AUS
NICHTS: ohne `--wirklich` zeigt es nur, was passieren wuerde. Mit
`--wirklich` legt es ZUERST eine Kopie der Datenbank an (`VACUUM INTO`,
nicht `cp` -- eine blosse Dateikopie kann das WAL verlieren) und nennt
den Befehl, mit dem man zurueckkommt.
WELCHE BLEIBT, ist nicht beliebig: eine erledigte, wenn es sie gibt
(getane Arbeit wirft man nicht weg), sonst eine begonnene, sonst die
aelteste. An einer Wegwerf-Datenbank durchgespielt: 12 Aufgaben, zwei
Menschen, einer mit einer erledigten darunter -- es blieben genau die
richtigen zwei stehen, die Einzelaufgabe blieb unberuehrt, und das
Nachzaehlen am Ende meldete null Dubletten.
Geprueft: pruef-verteilen (30), pruef-vorlagen (24),
pruef-aufgaben-vorlagen, pruef-aufgabenbrett, pruef-modi-katalog (150),
pruef-bewerbung-aufgaben (101).
Co-Authored-By: Claude Opus 5 <[email protected]>
1972 lines
82 KiB
CSS
1972 lines
82 KiB
CSS
/* ===================================================================
|
||
Aufgabenbrett. Baut auf gate.css und start.css auf.
|
||
=================================================================== */
|
||
|
||
/* .inhalt--breit, .zurueck, .kopf-zeile und .leise sind am 31.08.2026 nach
|
||
start.css gewandert -- sie werden auf jeder Seite gebraucht, aber nicht
|
||
jede Seite laedt diese Datei hier. */
|
||
|
||
/* ---------- Formular -------------------------------------------------- */
|
||
|
||
.neu {
|
||
margin: 0 0 28px;
|
||
padding: 20px;
|
||
background: var(--flaeche);
|
||
border: 1px solid var(--rand);
|
||
border-radius: var(--radius);
|
||
}
|
||
.neu__zeile { margin-bottom: 14px; }
|
||
/* Zwoelf Spalten statt auto-fit: Damit laesst sich sagen, WIE breit ein
|
||
Feld sein soll -- ein Titel braucht die ganze Zeile, eine Stufe ein
|
||
Drittel. auto-fit gab jedem Feld dieselbe Breite, egal was drin steht. */
|
||
.neu__raster {
|
||
display: grid; gap: 14px 16px; margin-bottom: 8px;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
}
|
||
/* Vorgabe: ein Drittel. Reicht fuer Auswahlfelder und Datumsangaben. */
|
||
/* JEDES direkte Kind, nicht nur die mit der Klasse .feld.
|
||
|
||
Genau daran lag die "verzogene" Formularzeile im Kalender: Dort
|
||
stehen schlichte <div> ohne Klasse. Sie fielen durch diese Regel
|
||
hindurch, bekamen von den zwoelf Spalten je EINE und wurden nur so
|
||
breit, wie ihr Inhalt sie zwang. Ergebnis: "Art" schmal, "Beginn"
|
||
breit, "Dauer (Minuten)" zweizeilig umgebrochen, alles auf
|
||
verschiedenen Hoehen. Es sah nach einem Fehler aus und war einer.
|
||
|
||
:not() haelt die Sonderbreiten am Leben. */
|
||
.neu__raster > *:not(.feld--breit):not(.feld--halb) { grid-column: span 4; min-width: 0; }
|
||
|
||
/* Alle Felder gleich hoch und unten buendig -- unabhaengig davon, ob
|
||
die Beschriftung darueber ein- oder zweizeilig ist. Ohne das sitzt
|
||
ein Feld mit langer Beschriftung tiefer als seine Nachbarn. */
|
||
.neu__raster { align-items: stretch; }
|
||
/* ZEILENABSTAND FUER DEN HINWEIS. Er haengt ausserhalb des Feldes und
|
||
braucht Luft nach unten -- sonst liegt er auf dem naechsten Feld,
|
||
und zwar genau dann, wenn die Felder untereinander stehen (schmaler
|
||
Bildschirm). Der Spaltenabstand bleibt unveraendert. */
|
||
.neu__raster { row-gap: 30px; }
|
||
/* Zwei Zeilen je Feld: Die Beschriftung oben DEHNT sich (1fr), das
|
||
Eingabefeld unten hat feste Hoehe. Dadurch sitzen alle Eingabefelder
|
||
auf exakt derselben Linie -- unabhaengig davon, ob die Beschriftung
|
||
darueber ein- oder zweizeilig ist.
|
||
|
||
Der Umweg ueber flex mit justify-content: flex-end reichte nicht: Ein
|
||
<select> und ein <input> derselben Hoehe standen damit trotzdem 3 px
|
||
versetzt, weil ihre Kaesten unterschiedlich sitzen. Drei Pixel klingen
|
||
nach nichts und sind genau das, was man als "verzogen" sieht. */
|
||
/* Die zweite Rasterzeile hat eine FESTE Hoehe, und das Feld fuellt sie
|
||
ganz aus. Mit "auto" bestimmte jedes Element die Zeilenhoehe selbst:
|
||
Ein <select> mass sich 3 px kleiner als ein <input> und sass dadurch
|
||
hoeher. Gemessen: Container beider Felder 652+71 identisch, Eingabe
|
||
aber 676..720 gegen 679..723. Drei Pixel -- genau das, was man als
|
||
"verzogen" sieht. */
|
||
.neu__raster > * { display: grid; grid-template-rows: 1fr 44px; position: relative; }
|
||
|
||
/* EINE ZELLE, DIE AUFKLAPPT, PASST NICHT IN EINE FESTE ZEILE
|
||
(22.09.2026).
|
||
---------------------------------------------------------------------
|
||
Filipe zum Bildschirmfoto: "wie scheisse sieht das aus, verbesser das
|
||
bitte." Zu sehen: "Anlegen" und "Abbrechen" lagen mitten in der
|
||
Personenliste.
|
||
|
||
GEMESSEN bei 1280 px, aufgeklappt:
|
||
|
||
Zelle Zeilen Hoehe Inhalt
|
||
feld-verant 24px 44px 68 107
|
||
feld-mehrere 43px 44px 87 261 <-- 174 zu viel
|
||
|
||
Die Regel darueber gibt JEDER Zelle zwei Zeilen: Beschriftung oben,
|
||
Eingabe unten mit festen 44 px. Das ist richtig und der Grund, warum
|
||
alle Eingaben auf einer Linie sitzen (siehe 17.09.).
|
||
|
||
`feld-mehrere` ist aber keine Beschriftung mit Eingabe, sondern ein
|
||
Knopf mit einer Liste, die aufklappt. Ihr zweites Kind landet damit
|
||
in der 44-Pixel-Zeile -- und laeuft heraus, sobald jemand sie
|
||
oeffnet. Was herauslaeuft, belegt keinen Platz, also legt es sich
|
||
ueber das Naechste. Das Naechste sind die Knoepfe.
|
||
|
||
WARUM NICHT `:has(> input, > select, > textarea)`:
|
||
Das war der erste Gedanke -- "Zellen ohne eigene Eingabe brauchen
|
||
die zwei Zeilen nicht". Die Messung sagt etwas anderes: Von sieben
|
||
Zellen haben SECHS ihre Eingabe nicht als direktes Kind, weil der
|
||
Auswahl-Baustein sie in ein <div> wickelt. Die Regel haette also
|
||
fast das ganze Formular getroffen und genau die Ausrichtung
|
||
zerstoert, die sie schuetzen soll.
|
||
|
||
Gemessen ist `aria-expanded` das einzige Merkmal, das nur bei dieser
|
||
einen Zelle steht -- und es ist zugleich das inhaltlich richtige:
|
||
Es sagt "dieser Bereich kann groesser werden". Etwas, das groesser
|
||
werden kann, darf keine feste Hoehe haben. */
|
||
.neu__raster > *:has(> [aria-expanded]) {
|
||
grid-template-rows: auto;
|
||
align-content: start;
|
||
}
|
||
|
||
/* EIN HINWEIS UNTER EINEM FELD HAENGT UNTER DEM RASTER, NICHT DARIN
|
||
(17.09.2026).
|
||
|
||
Die zwei Rasterzeilen darueber sind der ganze Grund, warum die
|
||
Eingaben auf einer Linie sitzen. Ein dritter Absatz im Feld erzeugt
|
||
eine dritte Zeile -- und weil das Raster alle Felder auf gleiche
|
||
Hoehe dehnt, rutscht dann ausgerechnet DIESE Eingabe nach oben.
|
||
Gemessen am 17.09.: 328..372 gegen 351..395 bei den Nachbarn. 23 px,
|
||
und genau das sieht man als "verzogen".
|
||
|
||
Der Hinweis wird deshalb aus dem Fluss genommen. Er beschreibt das
|
||
Feld darueber und braucht dessen Breite -- deshalb absolut IM Feld
|
||
und nicht als eigenes Rasterkind, das in der naechsten Zeile ganz
|
||
links landen wuerde.
|
||
|
||
`pointer-events: none`: Er ist Text, kein Ziel. Ohne das faengt er
|
||
Klicks ab, die dem Element darunter galten -- und niemand versteht,
|
||
warum ein Knopf manchmal nicht reagiert. */
|
||
.neu__raster > * > .feld-hinweis {
|
||
position: absolute;
|
||
top: 100%; left: 0; right: 0;
|
||
margin: 4px 0 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* UND DARUNTER MUSS PLATZ SEIN (22.09.2026).
|
||
---------------------------------------------------------------------
|
||
Filipe zum Bildschirmfoto: "die zwei buttons sollen nicht vor dem
|
||
text stehen das sieht voll scheisse aus."
|
||
|
||
Genau das war es: "Anlegen" und "Abbrechen" lagen ueber den beiden
|
||
Hinweisen, gemessen bei 1280 px mit 363 x 27 und 363 x 10 Pixeln
|
||
Ueberlappung.
|
||
|
||
DIE URSACHE IST DIE REGEL DARUEBER -- und sie ist richtig: Der
|
||
Hinweis haengt absolut unter seinem Feld, damit die Eingaben auf
|
||
einer Linie bleiben (siehe 17.09.). Was aus dem Fluss genommen wird,
|
||
belegt aber keinen Platz. Solange darunter nur der Rasterabstand
|
||
kam, fiel das nicht auf. Am 21.09. bekam die Zelle "Wer macht es?"
|
||
den Knopf "Noch jemanden dazunehmen" dazu, wurde hoeher -- und der
|
||
Hinweis wanderte mit, direkt auf die Knoepfe.
|
||
|
||
DIE HOEHE IST GEMESSEN, NICHT GEGRIFFEN: Ein Hinweis ist zweizeilig
|
||
35 px hoch, plus 4 px Abstand nach oben. 44 gibt Luft und ist
|
||
zugleich das Mass, das im Haus ohnehin ueberall steht.
|
||
|
||
`:has()` statt einer pauschalen Zeile: Ein Formular ohne Hinweis
|
||
bekaeme sonst 36 px Leere geschenkt, die niemand braucht. */
|
||
.neu__raster:has(> * > .feld-hinweis) { margin-bottom: 44px; }
|
||
.neu__raster > * > .feld-schild { align-self: end; margin-bottom: 6px; }
|
||
.neu input, .neu select { height: 44px; box-sizing: border-box; }
|
||
/* Die Zeile ganz ausfuellen -- sonst zentriert der Browser das Element
|
||
darin und der Versatz waere wieder da. */
|
||
.neu__raster > * > input,
|
||
.neu__raster > * > select,
|
||
.neu__raster > * > textarea { align-self: stretch; height: 100%; }
|
||
.neu__raster textarea { min-height: 44px; }
|
||
|
||
/* Diese Klasse stand in drei HTML-Dateien, war aber NIE definiert --
|
||
deshalb quetschte das Raster jedes Feld in dieselbe Breite und lange
|
||
Kategorienamen wurden abgeschnitten. */
|
||
.neu__raster > .feld--breit { grid-column: 1 / -1; }
|
||
.neu__raster > .feld--halb { grid-column: span 6; }
|
||
|
||
@media (max-width: 860px) {
|
||
.neu__raster > *:not(.feld--breit) { grid-column: span 6; }
|
||
}
|
||
@media (max-width: 560px) {
|
||
/* Auf dem Handy untereinander -- zwei Felder auf 300 px sind zwei
|
||
Streifen, in die nichts hineinpasst. */
|
||
.neu__raster > * { grid-column: 1 / -1 !important; }
|
||
}
|
||
@media (max-width: 560px) {
|
||
.neu__raster > .feld, .neu__raster > .feld--halb { grid-column: 1 / -1; }
|
||
}
|
||
|
||
/* DER HINWEIS GEHOERT AUF DEM HANDY WIEDER IN DEN FLUSS (18.09.2026).
|
||
|
||
Er haengt sonst absolut unter dem Feld, und darunter stehen genau
|
||
30 px Luft (row-gap). Das reicht fuer EINE Zeile. Der Satz bei „Gilt
|
||
fuer" -- „Gehoert allen hier - wer Der Treff sieht, sieht auch
|
||
diesen Eintrag." -- braucht auf 412 px ZWEI, und lag damit quer
|
||
ueber der naechsten Beschriftung. Im Bildschirmfoto stand
|
||
„UEBERSCHRIFT" halb unter dem Hinweis; gemeldet hat das keine Zahl.
|
||
|
||
Die ganze absolute Konstruktion gibt es nur, damit die Eingaben
|
||
MEHRERER Felder nebeneinander auf einer Linie sitzen. Unter 560 px
|
||
steht ohnehin nur eins je Zeile -- dort gibt es nichts auszurichten,
|
||
und der Hinweis darf einfach dort stehen, wo er hingehoert.
|
||
|
||
Das ist die bessere Antwort als „row-gap groesser machen": Die
|
||
naechste Zeile Text waere sonst wieder eine zu viel. */
|
||
@media (max-width: 560px) {
|
||
.neu__raster { row-gap: 16px; }
|
||
.neu__raster > * { grid-template-rows: auto auto; }
|
||
.neu__raster > * > .feld-hinweis {
|
||
position: static;
|
||
margin-top: 6px;
|
||
}
|
||
}
|
||
.neu__knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
|
||
|
||
.feld-schild {
|
||
display: block; margin-bottom: 6px;
|
||
font-size: .76rem; font-weight: 600; letter-spacing: .06em;
|
||
text-transform: uppercase; color: var(--text-still);
|
||
}
|
||
|
||
/* Aussehen, Rahmen, Schrift und Fokusring stehen seit dem 01.09.2026
|
||
EINMAL in start.css (":where(.inhalt) :where(input, textarea, select)").
|
||
Die Kopie, die hier stand, war Wort fuer Wort dieselbe -- und genau so
|
||
entstehen zwei Feld-Optiken auf einer Seite, sobald eine der beiden
|
||
verbessert wird. Hier bleibt nur, was WIRKLICH nur hier gilt. */
|
||
.neu textarea { min-height: 62px; }
|
||
/* Die BREITE bleibt hier: Sie ist Layout dieser Seite, nicht Aussehen.
|
||
Ohne sie fallen leere Auswahlfelder auf 28 Pixel zusammen. */
|
||
.neu input, .neu select, .neu textarea { width: 100%; }
|
||
/* Aufhellen ist nicht mehr noetig: color-scheme: dark (gate.css) laesst den
|
||
Browser das Kalendersymbol schon hell zeichnen. Ein invert() wuerde es hier
|
||
wieder verdunkeln. */
|
||
.neu input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
|
||
|
||
/* ---------- Brett ----------------------------------------------------- */
|
||
|
||
/* LEERE SPALTEN NEHMEN SICH ZURUECK (23.09.2026)
|
||
|
||
Vorher: vier gleich breite Spalten. Am 23.09. standen darin 136, 0,
|
||
0 und 1 Karte -- drei Viertel des Bildschirms waren damit belegt,
|
||
um dreimal "nichts" zu sagen, waehrend die volle Spalte 46 000 px
|
||
nach unten lief.
|
||
|
||
GRID KANN DAS NICHT, FLEX SCHON. Ein Raster teilt nach Vorschrift,
|
||
ein Flussverbund nach Inhalt. Damit schrumpft eine leere Spalte auf
|
||
ihre Breite und der Rest bekommt den Platz -- ohne dass irgendwo
|
||
eine Zahl steht, die jemand pflegen muesste.
|
||
|
||
SIE VERSCHWINDEN NICHT. Eine Spalte, die fehlt, kann man auch nicht
|
||
fuellen -- und "Zur Freigabe" muss man sehen koennen, um zu
|
||
verstehen, dass es den Schritt gibt. */
|
||
.brett {
|
||
display: flex; flex-wrap: wrap; gap: 14px;
|
||
align-items: flex-start;
|
||
}
|
||
/* Eine volle Spalte waechst, eine leere nicht. `flex: 0 0` statt
|
||
`0 1`: Die leere soll auch dann nicht mitwachsen, wenn Platz
|
||
uebrig ist -- der gehoert der Arbeit, nicht dem Hinweis, dass
|
||
gerade keine da ist. */
|
||
.brett > .spalte { flex: var(--wuchs, 1) 1 190px; min-width: 0; }
|
||
/* 170 statt 190: Gemessen passten bei 190 nur zwei Kartenreihen in
|
||
die volle Spalte (745 px, noetig fuer drei sind 756). Die zwanzig
|
||
Pixel je leerer Spalte sind genau der Unterschied -- und sie fehlen
|
||
dort niemandem, weil dort nichts steht. */
|
||
.brett > .spalte[data-leer="ja"] { flex: 0 0 170px; }
|
||
|
||
/* DIE KARTEN LEGEN SICH NEBENEINANDER, WENN PLATZ IST.
|
||
|
||
auto-fill mit einer Mindestbreite statt einer festen Spaltenzahl:
|
||
Bei 1600 px passen drei nebeneinander, bei 900 px zwei, am Handy
|
||
eine -- und niemand muss dafuer eine Schwelle pflegen. Genau daran
|
||
ist am 06.09.2026 die Kopfleiste gescheitert: eine feste Zahl, die
|
||
beim sechsten Element nicht mehr stimmte. */
|
||
.spalte__karten {
|
||
display: grid; gap: 12px;
|
||
grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
|
||
align-items: start;
|
||
}
|
||
|
||
/* Die vier Spalten bekommen dieselbe Behandlung wie die Kacheln auf der
|
||
Startseite: eine eigene Farbe je Status, ein Streifen oben in dieser
|
||
Farbe, ein sehr weicher Verlauf darunter. Vorher unterschied sie nur
|
||
ein 8 px grosser Punkt -- vier gleiche graue Kaesten nebeneinander.
|
||
|
||
Die Farbe folgt dem STATUS, nicht dem Rang: Offen blaugrau (noch
|
||
nichts passiert), In Arbeit blau (laeuft), Review gold (jemand muss
|
||
hinsehen), Erledigt gruen (fertig). */
|
||
.spalte {
|
||
--sfarbe: #6f89a8;
|
||
position: relative; overflow: hidden;
|
||
background:
|
||
linear-gradient(180deg, color-mix(in srgb, var(--sfarbe) 8%, transparent), transparent 42%),
|
||
var(--flaeche);
|
||
border: 1px solid color-mix(in srgb, var(--sfarbe) 20%, var(--rand));
|
||
border-radius: var(--radius);
|
||
padding: 16px 13px 18px;
|
||
min-height: 120px;
|
||
}
|
||
/* Der Streifen oben laeuft nach rechts aus -- eine durchgezogene Kante
|
||
wirkt wie eine Trennwand, eine auslaufende wie eine Markierung. */
|
||
.spalte::before {
|
||
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
|
||
background: linear-gradient(90deg, var(--sfarbe),
|
||
color-mix(in srgb, var(--sfarbe) 20%, transparent) 70%, transparent);
|
||
}
|
||
/* Was die Spalte bedeutet -- steht immer da, nicht nur wenn sie leer
|
||
ist. "Review" allein sagt einem Neuen nichts. */
|
||
.spalte__unter {
|
||
margin: 2px 0 12px 17px;
|
||
font-size: .76rem; color: var(--text-still);
|
||
}
|
||
|
||
.spalte__kopf {
|
||
display: flex; align-items: center; gap: 8px;
|
||
margin: 0 2px 12px;
|
||
font-size: .78rem; font-weight: 700;
|
||
letter-spacing: .08em; text-transform: uppercase;
|
||
color: var(--text-leise);
|
||
}
|
||
.spalte__punkt { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
|
||
.spalte__zahl {
|
||
margin-left: auto; padding: 1px 8px;
|
||
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
||
font-size: .74rem; color: var(--text-still); letter-spacing: normal;
|
||
}
|
||
|
||
/* --ton mitgesetzt: Das Licht unter dem Zeiger nimmt seine Farbe von
|
||
dort. Ohne diese Zeile leuchtete die gruene Erledigt-Spalte orange
|
||
(der Farbton der SEITE), was aussah wie ein Fehler und einer war. */
|
||
.spalte[data-status="offen"] { --sfarbe: #6f89a8; --ton: #6f89a8; }
|
||
.spalte[data-status="arbeit"] { --sfarbe: #3fbdf5; --ton: #3fbdf5; }
|
||
.spalte[data-status="review"] { --sfarbe: #e0a33c; --ton: #e0a33c; }
|
||
.spalte[data-status="erledigt"] { --sfarbe: #4dab77; --ton: #4dab77; }
|
||
.spalte__punkt {
|
||
background: var(--sfarbe);
|
||
box-shadow: 0 0 9px color-mix(in srgb, var(--sfarbe) 70%, transparent);
|
||
}
|
||
.spalte .spalte__zahl { color: var(--sfarbe); }
|
||
|
||
.karte {
|
||
padding: 12px 13px;
|
||
margin-bottom: 9px;
|
||
background: rgba(9, 13, 22, .78);
|
||
border: 1px solid var(--rand);
|
||
border-left: 3px solid transparent;
|
||
border-radius: var(--radius-klein);
|
||
}
|
||
.karte[data-prio="hoch"] { border-left-color: #d8656e; }
|
||
.karte[data-prio="mittel"] { border-left-color: #4b6c8a; }
|
||
.karte[data-prio="niedrig"] { border-left-color: #3c4a5a; }
|
||
|
||
.karte__titel { font-weight: 600; font-size: .93rem; line-height: 1.35; }
|
||
.karte__text { margin: 6px 0 0; font-size: .84rem; color: var(--text-leise); }
|
||
|
||
.karte__zeile {
|
||
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
||
margin-top: 10px; font-size: .76rem; color: var(--text-still);
|
||
}
|
||
.karte__frist--faellig { color: var(--warn); font-weight: 600; }
|
||
|
||
.karte__schritte { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
|
||
|
||
/* Der leere Zustand einer Spalte. Vorher stand hier in allen vier
|
||
Spalten ein Gedankenstrich -- vier graue Striche nebeneinander sehen
|
||
aus, als sei die Seite kaputt. Jetzt sagt jeder Satz, was das
|
||
Leersein BEDEUTET (siehe SPALTEN in aufgaben.js), auf einer eigenen
|
||
ruhigen Flaeche statt im Nichts. */
|
||
.spalte__leer {
|
||
margin: 4px 0 0; padding: 16px 12px;
|
||
text-align: center;
|
||
font-size: .82rem; color: var(--text-still); line-height: 1.5;
|
||
border: 1px solid color-mix(in srgb, var(--sfarbe) 14%, transparent);
|
||
border-radius: var(--radius-klein);
|
||
background: color-mix(in srgb, var(--sfarbe) 5%, transparent);
|
||
}
|
||
|
||
/* Auf schmalen Schirmen bekommt die volle Spalte die ganze Breite und
|
||
die leeren stellen sich nebeneinander darunter -- statt vier
|
||
Streifen, die alle zu schmal sind. */
|
||
@media (max-width: 1080px) {
|
||
.brett > .spalte { flex: 1 1 100%; }
|
||
.brett > .spalte[data-leer="ja"] { flex: 1 1 calc(50% - 7px); }
|
||
/* Am Handy bleibt eine Karte je Zeile -- zwei nebeneinander waeren
|
||
auf 390 px je 180 px breit, und darauf passt kein Titel. */
|
||
.spalte__karten { grid-template-columns: 1fr; }
|
||
}
|
||
@media (max-width: 620px) { .brett { grid-template-columns: 1fr; } }
|
||
|
||
/* ---------- Bearbeiten-Dialog ------------------------------------------ */
|
||
|
||
|
||
.neu--blank { margin: 0; border: 0; background: none; padding: 22px 24px 20px; }
|
||
|
||
|
||
.dialog__knoepfe #b-loeschen { margin-left: auto; }
|
||
|
||
.abmelden--warnung { color: var(--warn); border-color: rgba(255, 154, 162, .35); }
|
||
.abmelden--warnung:hover { background: rgba(255, 154, 162, .1); border-color: rgba(255, 154, 162, .6); }
|
||
|
||
/* Der Bearbeiten-Stift war nie ein richtiger Knopf, sondern nackter
|
||
Text -- man sah nicht, dass man draufdruecken kann. Jetzt traegt er
|
||
das Knopf-System in der kleinsten, ruhigsten Groesse. */
|
||
.karte__stift { margin-left: auto; }
|
||
.karte__kopf { display: flex; align-items: flex-start; gap: 8px; }
|
||
.karte__kopf .karte__titel { flex: 1 1 auto; }
|
||
|
||
/* ===================================================================
|
||
Rückmeldungen an einer Aufgabe ("Aufgaben & Feedback", Konzept).
|
||
|
||
Direkt an der Karte, nicht in einem Fenster: Man liest sie im
|
||
Zusammenhang mit der Aufgabe -- sonst fehlt beim Antworten die
|
||
Hälfte.
|
||
=================================================================== */
|
||
|
||
.karte__rueck {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
margin-top: 10px; padding: 6px 11px; cursor: pointer;
|
||
background: transparent;
|
||
border: 1px solid var(--rand); border-radius: 999px;
|
||
color: var(--text-still); font: inherit; font-size: .76rem;
|
||
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
||
}
|
||
.karte__rueck:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); }
|
||
/* Wo schon etwas besprochen wurde, sieht man es ohne Aufklappen. */
|
||
.karte__rueck[data-hat="ja"] {
|
||
color: var(--akzent);
|
||
border-color: rgba(63, 189, 245, .38);
|
||
background: rgba(63, 189, 245, .08);
|
||
}
|
||
.karte__rueck[data-offen="ja"] { border-color: rgba(63, 189, 245, .6); color: #fff; }
|
||
.karte__blase {
|
||
width: 14px; height: 14px; flex: none;
|
||
fill: none; stroke: currentColor; stroke-width: 1.7;
|
||
stroke-linecap: round; stroke-linejoin: round;
|
||
}
|
||
|
||
.rueck {
|
||
margin-top: 11px; padding-top: 11px;
|
||
border-top: 1px solid var(--rand);
|
||
}
|
||
.rueck__liste { display: grid; gap: 8px; margin-bottom: 11px; }
|
||
.rueck__eintrag {
|
||
padding: 9px 12px;
|
||
background: rgba(255, 255, 255, .035);
|
||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||
}
|
||
.rueck__kopf { display: flex; align-items: baseline; gap: 8px; margin: 0 0 3px; }
|
||
.rueck__wer { font-size: .79rem; font-weight: 650; color: var(--text); }
|
||
.rueck__wann { font-size: .72rem; color: var(--text-still); }
|
||
.rueck__weg {
|
||
margin-left: auto; padding: 0 5px; cursor: pointer; line-height: 1;
|
||
background: none; border: 0; color: var(--text-still); font-size: 1rem;
|
||
}
|
||
.rueck__weg:hover { color: #ffb4b9; }
|
||
.rueck__text {
|
||
margin: 0; font-size: .85rem; color: var(--text-leise);
|
||
white-space: pre-wrap; line-height: 1.5;
|
||
}
|
||
|
||
.rueck__form { display: grid; gap: 8px; justify-items: start; }
|
||
.rueck__feld {
|
||
width: 100%; padding: 9px 12px;
|
||
background: rgba(255, 255, 255, .045);
|
||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||
color: var(--text); font: inherit; font-size: .86rem; resize: vertical;
|
||
}
|
||
.rueck__feld:focus {
|
||
outline: none; border-color: rgba(63, 189, 245, .65);
|
||
box-shadow: 0 0 0 3px rgba(63, 189, 245, .15);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) { .karte__rueck { transition: none; } }
|
||
|
||
/* Die letzten drei Pixel.
|
||
|
||
Trotz gleicher Hoehe und gleicher Rasterzeile sassen Auswahl- und
|
||
Eingabefelder 3 px versetzt. Grund: Ein <input> ist von Haus aus
|
||
inline und wird an der SCHRIFTGRUNDLINIE ausgerichtet -- die liegt je
|
||
nach Element unterschiedlich. Drei Pixel klingen nach nichts und sind
|
||
genau das, was man als "verzogen" sieht.
|
||
|
||
display: block nimmt die Grundlinie aus dem Spiel; margin: 0 die
|
||
Vorgaben des Browsers. */
|
||
.neu__raster > * > input,
|
||
.neu__raster > * > select,
|
||
.neu__raster > * > textarea {
|
||
display: block;
|
||
width: 100%;
|
||
margin: 0;
|
||
vertical-align: top;
|
||
}
|
||
|
||
/* Die Beschriftung bekommt eine FESTE Hoehe.
|
||
|
||
Damit beginnt das Eingabefeld in jeder Spalte an derselben Stelle --
|
||
ganz gleich, wie das Feld darunter beschaffen ist. Vorher hing es an
|
||
Grundlinien und Zeilenhoehen, und drei Pixel Versatz blieben trotz
|
||
gleicher Feldhoehe und gleicher Rasterzeile uebrig.
|
||
|
||
Feste Werte sind hier ausnahmsweise das richtige Mittel: Eine
|
||
Beschriftung ist immer einzeilig (mehrzeilige werden gekuerzt, siehe
|
||
die Handypruefung), und "alle Felder auf einer Linie" ist eine
|
||
Zusicherung, keine Faustregel. */
|
||
.neu__raster > * > .feld-schild {
|
||
height: 17px;
|
||
margin-bottom: 7px;
|
||
line-height: 17px;
|
||
overflow: hidden;
|
||
white-space: nowrap; text-overflow: ellipsis;
|
||
}
|
||
|
||
/* ---------- Die Leiste über dem Brett (01.09.2026) ------------------------
|
||
|
||
"verbessere die Aufgabenseite auch bei Manager, Scout und Creator …
|
||
aber auch die Creator sollen es besser und detaillierter sehen."
|
||
|
||
Drei Zeilen, die zusammen die Frage beantworten, mit der man auf diese
|
||
Seite kommt: Muss ich mir Sorgen machen, und wo fange ich an? Ein
|
||
Brett aus vier Spalten kann das nicht sagen – man müsste alle vier
|
||
durchsehen, um zu wissen, dass nichts brennt. */
|
||
|
||
.lage {
|
||
--l-ton: #6f89a8;
|
||
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
||
margin: 0 0 14px; padding: 11px 15px;
|
||
border: 1px solid color-mix(in srgb, var(--l-ton) 28%, var(--rand));
|
||
border-left-width: 3px;
|
||
border-radius: var(--radius-klein);
|
||
background:
|
||
linear-gradient(90deg, color-mix(in srgb, var(--l-ton) 10%, transparent), transparent 55%),
|
||
var(--flaeche);
|
||
}
|
||
.lage[data-stufe="warnung"] { --l-ton: #e0a33c; }
|
||
.lage[data-stufe="offen"] { --l-ton: #6f89a8; }
|
||
.lage[data-stufe="ruhig"] { --l-ton: #4dab77; }
|
||
.lage__satz { font-size: .95rem; color: var(--text); }
|
||
.lage[data-stufe="warnung"] .lage__satz { color: #f0c67c; }
|
||
/* Steht rechts und leiser: "wie viel davon ist meins" ist die zweite
|
||
Frage, nicht die erste. */
|
||
.lage__meins {
|
||
margin-left: auto; padding: 3px 10px;
|
||
border: 1px solid var(--rand); border-radius: 999px;
|
||
font-size: .78rem; color: var(--text-leise);
|
||
}
|
||
|
||
.ausschnitte, .creator-reihe {
|
||
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
|
||
margin-bottom: 12px;
|
||
}
|
||
.creator-reihe { margin-bottom: 18px; }
|
||
.creator-reihe__schild {
|
||
font-size: .72rem; font-weight: 600;
|
||
letter-spacing: .1em; text-transform: uppercase;
|
||
color: var(--text-still); margin-right: 2px;
|
||
}
|
||
|
||
/* Ein Ausschnitt-Knopf trägt IMMER seine Zahl. Ein Filter, der sich erst
|
||
nach dem Klick als leer herausstellt, kostet zweimal Aufmerksamkeit --
|
||
und man klickt ihn beim nächsten Mal trotzdem wieder an. */
|
||
.schnitt, .creator-knopf {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
min-height: 38px; padding: 7px 13px;
|
||
border: 1px solid var(--rand); border-radius: 999px;
|
||
/* EIGENER UNTERGRUND, NICHT GELIEHENER (07.09.2026).
|
||
|
||
Hier stand `rgba(255, 255, 255, .03)` -- also praktisch nichts. Der
|
||
Knopf war lesbar, weil hinter ihm zufaellig etwas Dunkles lag. Als
|
||
die Buehnenbilder heller wurden (Glanz) und die Flaechen darueber
|
||
ihren Weichzeichner verloren, war das vorbei: Auf dem Handy sass
|
||
"Ueberfaellig" ploetzlich auf rgb(79, 76, 79) und kam auf 4,16:1
|
||
statt der noetigen 4,5:1 -- gemessen von pruef-buehne an echten
|
||
Bildpunkten.
|
||
|
||
Das ist kein Bildproblem und wird auch nicht dort behoben: Das Bild
|
||
dunkler zu machen haette genau die Verbesserung zurueckgenommen, um
|
||
die es ging. Ein Bedienelement, dessen Lesbarkeit davon abhaengt,
|
||
was zufaellig dahinter liegt, ist die eigentliche Schwachstelle --
|
||
es geht beim naechsten Hintergrundwechsel wieder kaputt, und
|
||
niemand rechnet damit.
|
||
|
||
Dunkel und trotzdem durchscheinend: Das Motiv bleibt zu ahnen, der
|
||
Text steht aber nie mehr direkt auf einem Foto. */
|
||
background: rgba(9, 13, 21, .62);
|
||
color: var(--text-leise); font: inherit; font-size: .85rem;
|
||
cursor: pointer;
|
||
transition: border-color var(--tempo), color var(--tempo), background var(--tempo);
|
||
}
|
||
.schnitt:hover:not([disabled]), .creator-knopf:hover {
|
||
color: var(--text); border-color: rgba(255, 255, 255, .22);
|
||
}
|
||
.schnitt[aria-pressed="true"], .creator-knopf[aria-pressed="true"] {
|
||
color: var(--text);
|
||
border-color: color-mix(in srgb, var(--akzent) 55%, transparent);
|
||
/* Die Farbe liegt AUF dem dunklen Untergrund, nicht statt seiner --
|
||
sonst haette der gedrückte Knopf genau das Problem zurück, das der
|
||
ungedrückte gerade losgeworden ist. */
|
||
background: color-mix(in srgb, var(--akzent) 15%, rgba(9, 13, 21, .66));
|
||
}
|
||
.schnitt:focus-visible, .creator-knopf:focus-visible {
|
||
outline: 2px solid var(--akzent); outline-offset: 2px;
|
||
}
|
||
/* Ein Ausschnitt ohne Inhalt wird abgeschaltet statt versteckt: Wer
|
||
gestern "3 überfällig" gesehen hat, soll heute sehen, dass es 0 sind
|
||
-- und nicht rätseln, wo der Knopf hin ist. */
|
||
/* 0,62 statt 0,42 (06.09.2026). Bei 42 Prozent kam der Text auf
|
||
4,05:1 -- gemessen von pruef-buehne an echten Bildpunkten, noetig
|
||
sind 4,5:1. Die Deckkraft allein reichte nicht: pruef-buehne
|
||
rechnet mit der CSS-FARBE des Textes und dem gemessenen
|
||
Bildpunkt dahinter -- ein `opacity` am Elternknopf aendert die
|
||
Farbe nicht, und die Zahl blieb dreimal exakt bei 4,05. Deshalb
|
||
zusaetzlich ein eigener, hellerer Ton (#aab7c7, 4,9:1).
|
||
Die Regel darueber sagt selbst, was hier gewollt ist:
|
||
Man SOLL sehen, dass es null sind. Ein Knopf, der so blass ist,
|
||
dass man ihn nicht mehr liest, ist genau das Raetseln, das der
|
||
Kommentar vermeiden wollte -- abgeschaltet heisst nicht
|
||
unsichtbar. */
|
||
/* DIE DECKKRAFT MUSSTE GANZ WEG (07.09.2026).
|
||
|
||
Am 06.09. stand hier `opacity: .42`, die Messung blieb dreimal bei
|
||
4,05:1, und die Lehre daraus war richtig notiert: Deckkraft aendert
|
||
die CSS-Farbe des Textes nicht. Nur habe ich damals die andere Haelfte
|
||
uebersehen -- sie aendert dafuer sehr wohl den UNTERGRUND, denn
|
||
`opacity` wirkt auf das ganze Element samt seiner Flaeche.
|
||
|
||
Heute hat mich genau das ein zweites Mal erwischt, aus der anderen
|
||
Richtung: Ich habe dem Knopf einen dunklen Untergrund gegeben, und
|
||
die Zahl blieb auf die Stelle genau bei 4,16:1. Wieder das
|
||
Unveraenderlichkeits-Zeichen -- eine Zahl, die sich nach einer
|
||
Aenderung KEIN Stueck bewegt, sagt nicht "zu wenig", sondern "an der
|
||
falschen Stelle". Der neue Untergrund wurde mit 62 Prozent
|
||
durchgereicht, das helle Buehnenbild schlug durch, und heraus kam
|
||
rgb(79, 76, 79).
|
||
|
||
Abgeschaltet heisst jetzt: gedaempfte FARBEN, volle Flaeche. Der
|
||
Untergrund traegt, der Text tritt zurueck -- und beides ist messbar,
|
||
statt sich gegenseitig zu verrechnen. */
|
||
.schnitt[disabled] {
|
||
cursor: default;
|
||
color: #aab7c7;
|
||
border-color: rgba(150, 186, 220, .12);
|
||
background: rgba(9, 13, 21, .72);
|
||
}
|
||
.schnitt[disabled] .schnitt__zahl { background: rgba(255, 255, 255, .05); color: #96a4b6; }
|
||
|
||
.schnitt__zahl, .creator-knopf__zahl {
|
||
min-width: 20px; padding: 1px 7px;
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, .07);
|
||
font-size: .76rem; font-weight: 700;
|
||
font-variant-numeric: tabular-nums;
|
||
text-align: center;
|
||
}
|
||
/* "Überfällig" trägt seine Farbe nur, wenn wirklich etwas überfällig ist.
|
||
Ein dauerhaft warnender Knopf warnt nach zwei Tagen niemanden mehr. */
|
||
.schnitt[data-warn="ja"]:not([disabled]) {
|
||
color: #f0c67c; border-color: rgba(224, 163, 60, .42);
|
||
}
|
||
.schnitt[data-warn="ja"]:not([disabled]) .schnitt__zahl {
|
||
background: rgba(224, 163, 60, .18);
|
||
}
|
||
.schnitt[data-warn="ja"][aria-pressed="true"] {
|
||
background: rgba(224, 163, 60, .16);
|
||
border-color: rgba(224, 163, 60, .6);
|
||
}
|
||
|
||
.creator-knopf__name { font-weight: 600; color: inherit; }
|
||
/* Die kleine Warnzahl am Creator: wie viele seiner Aufgaben überfällig
|
||
sind. Sie steht NEBEN der Gesamtzahl, nicht statt ihr -- sonst weiß
|
||
man nicht, ob "2" viel oder wenig ist. */
|
||
.creator-knopf__warn {
|
||
min-width: 20px; padding: 1px 7px;
|
||
border-radius: 999px;
|
||
background: rgba(224, 163, 60, .18);
|
||
border: 1px solid rgba(224, 163, 60, .38);
|
||
color: #f0c67c;
|
||
font-size: .74rem; font-weight: 700;
|
||
font-variant-numeric: tabular-nums; text-align: center;
|
||
}
|
||
|
||
@media (max-width: 560px) {
|
||
.lage { flex-direction: column; align-items: flex-start; gap: 6px; }
|
||
.lage__meins { margin-left: 0; }
|
||
/* Waagerecht scrollen statt umbrechen: Bei fünf Creatorn würde die
|
||
Reihe sonst drei Zeilen hoch und das Brett wäre weg. */
|
||
.ausschnitte, .creator-reihe {
|
||
flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
|
||
scrollbar-width: thin;
|
||
}
|
||
.schnitt, .creator-knopf { flex: none; }
|
||
}
|
||
|
||
/* ===================================================================
|
||
Der feste Call-Raum (02.09.2026)
|
||
|
||
Eine ruhige Zeile über der Liste: wo die Gespräche stattfinden. Sie
|
||
beantwortet die Frage einmal, statt sie an jedem Termin neu zu
|
||
stellen. Bewusst zurückhaltend -- sie ist eine Auskunft, keine
|
||
Aufforderung.
|
||
=================================================================== */
|
||
.call-raum {
|
||
display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
|
||
margin: 0 0 18px; padding: 11px 14px;
|
||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||
background: var(--flaeche);
|
||
}
|
||
.call-raum__zeile {
|
||
margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
||
min-width: 0;
|
||
}
|
||
.call-raum__schild {
|
||
/* .78rem = 12,48 px. Untergrenze auf dem Handy sind 11,5 px (siehe
|
||
pruef-grosscheck.mjs) -- die vorher hier stehenden .68rem waren
|
||
10,88 px und damit unter der Grenze. Eine Beschriftung in
|
||
Grossbuchstaben braucht ohnehin mehr Groesse, nicht weniger. */
|
||
font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
|
||
color: var(--text-still);
|
||
}
|
||
.call-raum__link {
|
||
color: var(--akzent);
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
max-width: min(60vw, 520px);
|
||
}
|
||
.call-raum__leer { color: var(--text-still); font-size: .86rem; }
|
||
.call-raum button { margin-left: auto; }
|
||
.call-raum__form {
|
||
display: flex; align-items: end; flex-wrap: wrap; gap: 8px;
|
||
width: 100%;
|
||
}
|
||
.call-raum__form .feld-schild { width: 100%; margin: 0 0 2px; }
|
||
.call-raum__form input { flex: 1 1 260px; min-width: 0; }
|
||
.call-raum__form button { margin-left: 0; }
|
||
|
||
@media (max-width: 560px) {
|
||
.call-raum { align-items: flex-start; }
|
||
.call-raum button { margin-left: 0; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
ABBRECHEN — Knopf, Bereich und Dialog
|
||
=====================================================================
|
||
|
||
Wunsch Filipe, 05.09.2026: *"ich will dass man in jedem status die
|
||
aufgaben auch abbrechen kann."*
|
||
|
||
GESTALTUNGSREGEL HIER: zurückhaltend. Abbrechen ist die seltene
|
||
Handlung neben "starten" und "erledigt" -- sie darf auf der Karte
|
||
nicht lauter sein als die beiden, die man täglich braucht. Kein
|
||
Signalrot, kein Ausrufezeichen: ein gedeckter Ton, der sich vom
|
||
Weiterschalten unterscheidet, ohne die Karte an sich zu reißen.
|
||
(Augenschonend ist hier ohnehin Hausregel.) */
|
||
|
||
/* Ein warmer, gedämpfter Ton statt Alarmrot. --f ist die Farbvariable,
|
||
die .schritt in gate.css für Rand, Schrift und Schimmer benutzt. */
|
||
.schritt--ab { --f: #c98a7d; }
|
||
.schritt--ab:hover { color: color-mix(in srgb, #c98a7d 40%, #ffffff); }
|
||
|
||
/* ---------- Der Bereich unter dem Brett ---------------------------------- */
|
||
|
||
.abgebrochen {
|
||
margin: 22px 0 0;
|
||
border: 1px solid var(--rand);
|
||
border-radius: 14px;
|
||
background: rgba(255, 255, 255, .022);
|
||
}
|
||
|
||
.abgebrochen__kopf {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 13px 17px;
|
||
cursor: pointer;
|
||
font-size: .82rem; font-weight: 700;
|
||
letter-spacing: .06em; text-transform: uppercase;
|
||
color: var(--text-still);
|
||
/* Das eigene Dreieck von <summary> weg -- es wird unten selbst
|
||
gezeichnet, damit es links steht und sich mitdreht. */
|
||
list-style: none;
|
||
}
|
||
.abgebrochen__kopf::-webkit-details-marker { display: none; }
|
||
.abgebrochen__kopf:hover { color: var(--text-leise); }
|
||
.abgebrochen__kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; border-radius: 14px; }
|
||
|
||
/* Das Dreieck. Dreht sich beim Aufklappen -- die Bewegung sagt, dass
|
||
der Inhalt darunter erscheint und nicht woanders. */
|
||
.abgebrochen__kopf::before {
|
||
content: ""; flex: none;
|
||
width: 0; height: 0;
|
||
border-left: 5px solid currentColor;
|
||
border-top: 4px solid transparent;
|
||
border-bottom: 4px solid transparent;
|
||
transition: transform .18s ease;
|
||
}
|
||
.abgebrochen[open] .abgebrochen__kopf::before { transform: rotate(90deg); }
|
||
|
||
.abgebrochen__name { flex: 1; }
|
||
.abgebrochen__zahl {
|
||
padding: 2px 9px; border-radius: 999px;
|
||
font-size: .78rem; font-weight: 700; letter-spacing: 0;
|
||
color: var(--text-leise);
|
||
background: rgba(255, 255, 255, .06);
|
||
border: 1px solid var(--rand);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.abgebrochen__unter {
|
||
margin: 0; padding: 0 17px 4px;
|
||
font-size: .8rem; color: var(--text-still); max-width: 72ch;
|
||
}
|
||
|
||
.abgebrochen__liste {
|
||
display: grid; gap: 10px;
|
||
/* Mehrspaltig, sobald Platz ist: Abgebrochenes liest man am Stück,
|
||
nicht einzeln -- eine lange Spalte zwänge zum Scrollen durch etwas,
|
||
das man ohnehin nur überfliegt. */
|
||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||
padding: 10px 17px 17px;
|
||
}
|
||
|
||
.abbruch-karte {
|
||
padding: 13px 15px;
|
||
border: 1px solid var(--rand);
|
||
border-radius: 12px;
|
||
background: rgba(255, 255, 255, .028);
|
||
}
|
||
.abbruch-karte__kopf {
|
||
display: flex; align-items: baseline; gap: 9px;
|
||
margin-bottom: 6px;
|
||
}
|
||
/* Durchgestrichen sagt "gilt nicht mehr" schneller als jedes Wort --
|
||
und bleibt lesbar, anders als bloßes Ausgrauen. */
|
||
.abbruch-karte__titel {
|
||
margin: 0; flex: 1;
|
||
font-size: .92rem; font-weight: 600;
|
||
color: var(--text-leise);
|
||
text-decoration: line-through;
|
||
text-decoration-color: color-mix(in srgb, var(--text-still) 70%, transparent);
|
||
}
|
||
/* Wo es stand, als es abgebrochen wurde. */
|
||
.abbruch-karte__vorher {
|
||
flex: none;
|
||
padding: 2px 8px; border-radius: 999px;
|
||
font-size: .68rem; font-weight: 700;
|
||
letter-spacing: .04em; text-transform: uppercase;
|
||
color: var(--text-still);
|
||
background: rgba(255, 255, 255, .05);
|
||
border: 1px solid var(--rand);
|
||
}
|
||
.abbruch-karte__grund {
|
||
margin: 0 0 7px;
|
||
font-size: .84rem; color: var(--text-leise);
|
||
/* Der Grund ist der eigentliche Inhalt dieser Karte -- er steht in
|
||
normaler Textfarbe, während der Titel durchgestrichen zurücktritt. */
|
||
}
|
||
.abbruch-karte__wer {
|
||
margin: 0 0 9px;
|
||
font-size: .74rem; color: var(--text-still);
|
||
}
|
||
.abbruch-karte .schritt { font-size: .8rem; padding: 7px 13px; }
|
||
|
||
|
||
#abbruch-grund {
|
||
width: 100%;
|
||
resize: vertical;
|
||
min-height: 72px;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.abgebrochen__kopf::before { transition: none; }
|
||
}
|
||
|
||
/* Ohne Farbverläufe trägt die Kante allein. Der Durchstrich bleibt --
|
||
er ist hier das eigentliche Merkmal und keine Deko. */
|
||
@media (forced-colors: active) {
|
||
.abgebrochen, .abbruch-karte { border: 1px solid CanvasText; }
|
||
.abgebrochen__zahl, .abbruch-karte__vorher { border: 1px solid CanvasText; }
|
||
}
|
||
|
||
/* `.feld-hinweis` steht seit 22.09.2026 in start.css -- er wird auf
|
||
drei Seiten gebraucht, und start.css laedt jede davon. */
|
||
|
||
|
||
/* =====================================================================
|
||
AUFGABEN AUS DER VORLAGE (09.09.2026)
|
||
|
||
Der Block sitzt über dem Brett und muss sich als VORRAT lesen, nicht
|
||
als weitere Spalte: eigene Fläche, ruhigere Farbe, deutlich weniger
|
||
Kontrast als die Karten darunter. Wer das Brett voll hat, soll ihn
|
||
überblättern können, ohne ihn wegklicken zu müssen.
|
||
|
||
Die beiden Knopfreihen benutzen `.stufenleiter` aus start.css --
|
||
dieselbe Einteilung, dieselbe Darstellung. Eine zweite Optik für
|
||
dieselben vier Bereiche wäre zwei Sachen zum Lernen statt einer.
|
||
===================================================================== */
|
||
.vorlagenbrett {
|
||
margin: 0 0 22px;
|
||
padding: 20px 20px 22px;
|
||
border-radius: var(--radius-klein, 14px);
|
||
/* EINE EIGENE FLAECHE, KEIN SCHLEIER.
|
||
|
||
Erster Anlauf: nur ein Hauch Weiss ueber dem Buehnenbild. pruef-buehne
|
||
hat das zu Recht abgelehnt -- der Untergrund war gemessen
|
||
rgb(84, 69, 70), also das Foto, und die Ueberschrift kam auf 3,61:1
|
||
statt der noetigen 4,5:1. Ein durchsichtiger Kasten hat keinen
|
||
Untergrund, sondern den, der gerade dahinterliegt.
|
||
|
||
Jetzt eine deckende dunkle Flaeche mit einem Hauch Struktur darauf.
|
||
Der Weichzeichner dahinter macht aus dem Foto einen ruhigen Grund,
|
||
statt es einfach zuzudecken -- dieselbe Behandlung wie bei den
|
||
anderen freistehenden Bloecken im Haus. */
|
||
background:
|
||
linear-gradient(168deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)),
|
||
rgba(6, 9, 16, .84);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(160, 190, 225, .16);
|
||
}
|
||
.vorlagenbrett__kopf { margin-bottom: 14px; }
|
||
.vorlagenbrett__unter {
|
||
margin-top: 6px; font-size: .86rem; line-height: 1.5;
|
||
color: var(--text-leise);
|
||
max-width: 62ch;
|
||
}
|
||
.vorlagenbrett__hinweis {
|
||
margin: 12px 0 0; font-size: .86rem; font-weight: 600;
|
||
color: var(--warn, #ff9aa2);
|
||
}
|
||
.vorlagenbrett__liste {
|
||
display: grid; gap: 12px; margin-top: 16px;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
}
|
||
.vorlagenbrett__karte {
|
||
display: flex; flex-direction: column; gap: 8px;
|
||
padding: 16px 18px;
|
||
border-radius: 12px;
|
||
background: rgba(4, 7, 12, .72);
|
||
border: 1px solid rgba(160, 190, 225, .14);
|
||
}
|
||
/* =====================================================================
|
||
DIE KACHEL DREHT SICH (25.09.2026)
|
||
|
||
Filipe: „wenn ich drauf drücke dreht sich die kachel und dan seh ich
|
||
wer es gemacht hat, und immer noch die option es nochmal zu
|
||
verteilen falls neue leute ins team zustoßen."
|
||
|
||
WIE ES GEBAUT IST: Die Karte selbst dreht sich (`rotateY`), und die
|
||
beiden Seiten verstecken ihre Rueckseite (`backface-visibility`).
|
||
Das ist der eine Weg, bei dem die Drehung EINE Bewegung ist und
|
||
nicht zwei -- ein Ein- und Ausblenden saehe aus wie ein Austausch,
|
||
nicht wie ein Umdrehen.
|
||
|
||
DIE RUECKSEITE LIEGT ABSOLUT UEBER DER VORDERSEITE, und das hat
|
||
einen Grund, der nicht nach aussen sichtbar ist: Das Brett ist ein
|
||
Raster. Zwei Seiten im Fluss wuerden die Karte doppelt so hoch
|
||
machen, und das Raster zoege alle Nachbarkarten mit. So bestimmt
|
||
weiterhin die Vorderseite die Hoehe.
|
||
|
||
`inset: 0` MEINT DEN INNENRAND, nicht den Rahmen -- absolute
|
||
Kinder richten sich am Innenrand ihres Ankers aus. Die Rueckseite
|
||
sitzt damit genau dort, wo auch der Text der Vorderseite beginnt,
|
||
ohne dass ein Wert doppelt gepflegt werden muss.
|
||
|
||
UND WER NICHT UMDREHEN WILL, MUSS NICHT: Die Kurzfassung („liegt bei
|
||
3 von 4") steht weiterhin vorne im Fuss. Die Rueckseite ist die
|
||
Vertiefung, nicht die Grundauskunft.
|
||
===================================================================== */
|
||
.vorlagenbrett__karte[data-dreh="ja"] {
|
||
position: relative;
|
||
transform-style: preserve-3d;
|
||
transition: transform .34s cubic-bezier(.2, .7, .3, 1);
|
||
}
|
||
.vorlagenbrett__karte[data-dreh="ja"][data-gedreht="ja"] { transform: rotateY(180deg); }
|
||
|
||
.vorlagenbrett__seite {
|
||
display: flex; flex-direction: column; gap: 8px;
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
}
|
||
.vorlagenbrett__seite--vorn { flex: 1; }
|
||
.vorlagenbrett__seite--hinten {
|
||
position: absolute; inset: 0;
|
||
transform: rotateY(180deg);
|
||
/* DIE POLSTERUNG MUSS HIER NOCH EINMAL STEHEN. `inset: 0` richtet
|
||
sich am INNENRAND des Rahmens aus -- die 16/18 px der Karte liegen
|
||
damit INNERHALB dieser Flaeche und nicht davor. Ohne diese Zeile
|
||
klebte die Ueberschrift am Rahmen; im Bild war die erste Ziffer
|
||
angeschnitten. Dieselben Werte wie an `.vorlagenbrett__karte`. */
|
||
padding: 16px 18px;
|
||
/* Passt die Rueckseite einmal nicht (viele Namen, schmales Geraet),
|
||
rollt SIE -- die Karte bleibt so hoch wie vorne. Ein Abschneiden
|
||
waere dieselbe Sackgasse wie im Bearbeiten-Fenster. */
|
||
overflow: auto;
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
/* BEWEGUNG IST EIN ANGEBOT, KEINE PFLICHT. Wer sie abbestellt hat,
|
||
bekommt dieselbe Rueckseite -- nur sofort. `transition: none`
|
||
genuegt dafuer: Der Endzustand ist derselbe. */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.vorlagenbrett__karte[data-dreh="ja"] { transition: none; }
|
||
}
|
||
|
||
.vorlagenbrett__wer-schild {
|
||
margin: 0; font-size: .78rem; font-weight: 700;
|
||
letter-spacing: .04em; text-transform: uppercase;
|
||
color: var(--text-still);
|
||
}
|
||
|
||
/* Der Weg zurueck ist ruhiger als der Weg vorwaerts: „Nochmal
|
||
verteilen" ist die Handlung, „Zurueck" nur das Zumachen. */
|
||
.vorlagenbrett__zurueck {
|
||
background: none;
|
||
border-color: rgba(160, 190, 225, .22);
|
||
color: var(--text-still);
|
||
}
|
||
.vorlagenbrett__zurueck:hover { color: var(--text); border-color: var(--akzent); }
|
||
|
||
/* Der Umdreh-Knopf steht rechts im Fuss, hinter Frist und Vermerk --
|
||
er ist die Nebenhandlung, nicht die Hauptsache. */
|
||
.vorlagenbrett__drehknopf {
|
||
background: none;
|
||
border-color: rgba(160, 190, 225, .22);
|
||
color: var(--text-still);
|
||
}
|
||
.vorlagenbrett__drehknopf:hover { color: var(--text); border-color: var(--akzent); }
|
||
|
||
.vorlagenbrett__titel {
|
||
margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3;
|
||
color: var(--text);
|
||
}
|
||
.vorlagenbrett__text {
|
||
margin: 0; font-size: .86rem; line-height: 1.5; color: var(--text-leise);
|
||
}
|
||
/* Der Fuß trägt Frist und Knopf. `margin-top: auto` schiebt ihn nach
|
||
unten, damit die Knöpfe aller Karten auf einer Linie stehen -- auch
|
||
wenn die Texte verschieden lang sind. */
|
||
/* DIE FUSSZEILE DARF UMBRECHEN (16.09.2026).
|
||
Vorher eine starre Zeile. Solange zwei Dinge darin standen -- Frist
|
||
und Knopf -- ging die Rechnung auf. Bei einer schon uebernommenen
|
||
Aufgabe sind es DREI (Frist, Vermerk, "Nochmal"), im Aufbauplan
|
||
sogar vier, und in einer 215 px breiten Karte wurde daraus ein
|
||
"Frist: in / 2 / Tagen" ueber drei Zeilen neben dem Vermerk.
|
||
|
||
Keine neue feste Breite dagegen -- das waere derselbe Fehler mit
|
||
einer anderen Zahl, und beim fuenften Element wieder faellig.
|
||
`flex-wrap` bricht genau dann um, wenn der Platz nicht reicht, und
|
||
`nowrap` haelt zusammen, was ein Begriff ist: "in 2 Tagen" mitten
|
||
im Wort zu trennen sagt weniger als dieselbe Angabe eine Zeile
|
||
tiefer. */
|
||
/* ZWEI FESTE REIHEN STATT EINER, DIE UMBRICHT (25.09.2026).
|
||
|
||
Filipe: „es soll auch immer gleich aussehen und nicht manchmal
|
||
verschoben und so."
|
||
|
||
Die alte Reihe hielt Angaben UND Knoepfe zusammen und brach um, wenn
|
||
der Platz nicht reichte. Wie viele Angaben es gibt, haengt aber von
|
||
der Karte ab: „Frist" immer, „fuer: Rolle" manchmal, „liegt bei 4
|
||
von 5" nur, wenn schon jemand sie hat. Karten ohne den dritten Text
|
||
hatten in Reihe eins noch Platz fuer einen Knopf, Karten mit ihm
|
||
nicht -- also stand „An alle" mal neben der Frist und mal darunter.
|
||
Zwoelf Karten, drei verschiedene Fuesse.
|
||
|
||
JETZT: oben, was man LIEST; unten, was man DRUECKT. Der Fuss sitzt
|
||
weiterhin am unteren Rand (`margin-top: auto`), und weil die
|
||
Knopfreihe jetzt IMMER die letzte Zeile ist, stehen die Knoepfe bei
|
||
allen Karten einer Reihe auf derselben Hoehe. */
|
||
.vorlagenbrett__fuss {
|
||
display: grid; gap: 10px;
|
||
margin-top: auto; padding-top: 8px;
|
||
}
|
||
.vorlagenbrett__fuss-info {
|
||
display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
|
||
min-height: 1.2em; /* leer bleibt die Zeile gleich hoch */
|
||
}
|
||
/* Die Knoepfe stehen links und in fester Reihenfolge: erst verteilen,
|
||
dann nachsehen. `space-between` haette sie bei zwei Knoepfen an die
|
||
Raender gezogen und bei einem allein nach links -- wieder ein Bild,
|
||
das von der Anzahl abhaengt. */
|
||
.vorlagenbrett__fuss-tun {
|
||
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
||
}
|
||
/* Beide Knoepfe gleich breit halten, damit die Reihe bei zwoelf Karten
|
||
nicht zwoelfmal anders aussieht. `flex: 1 1 0` teilt den Platz; die
|
||
Mindestbreite verhindert, dass „Zurück" neben „Nachholen – 3 fehlen"
|
||
zu einem Streifen wird. */
|
||
.vorlagenbrett__fuss-tun > .knopf { flex: 1 1 0; min-width: 7.5rem; }
|
||
.vorlagenbrett__frist {
|
||
font-size: .78rem; font-weight: 700; letter-spacing: .04em;
|
||
color: var(--text-still); white-space: nowrap;
|
||
}
|
||
@media (max-width: 620px) {
|
||
.vorlagenbrett { padding: 16px 14px 18px; }
|
||
.vorlagenbrett__liste { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
DIE BEDIENUNG DER AUFGABEN (09.09.2026)
|
||
|
||
Filipe: "ich will nur dass du dich informierst und schaust was man
|
||
vielleicht noch besser machen könnte von der benutzung wenn man die
|
||
benutzt. also ich red von den aufgaben. das system von den aufgaben,
|
||
die bedienung."
|
||
|
||
Gemessen auf dem Handy: Der Vorlagenblock füllte anderthalb
|
||
Bildschirme, BEVOR die erste eigene Aufgabe kam -- und der Ausbau von
|
||
Profi und Meister am selben Tag hat ihn noch länger gemacht. Vorlagen
|
||
holt man selten, das Brett benutzt man jeden Tag.
|
||
===================================================================== */
|
||
|
||
/* ---- Der Kopf ist der Klappknopf ------------------------------------ */
|
||
.vorlagenbrett__kopf {
|
||
width: 100%;
|
||
display: flex; align-items: center; gap: 12px;
|
||
padding: 0; margin: 0 0 2px;
|
||
background: none; border: 0;
|
||
font: inherit; color: inherit; text-align: left; cursor: pointer;
|
||
}
|
||
.vorlagenbrett__kopftext { display: grid; gap: 4px; min-width: 0; flex: 1; }
|
||
.vorlagenbrett__kopf .klapp-pfeil {
|
||
flex: none; width: 20px; height: 20px;
|
||
fill: none; stroke: currentColor; stroke-width: 1.8;
|
||
stroke-linecap: round; stroke-linejoin: round;
|
||
color: var(--text-still);
|
||
transition: transform var(--tempo), color var(--tempo);
|
||
}
|
||
.vorlagenbrett__kopf[aria-expanded="true"] .klapp-pfeil { transform: rotate(180deg); }
|
||
.vorlagenbrett__kopf:hover .klapp-pfeil { color: var(--akzent); }
|
||
.vorlagenbrett__kopf:focus-visible {
|
||
outline: 2px solid var(--akzent); outline-offset: 4px; border-radius: 6px;
|
||
}
|
||
/* Zugeklappt braucht der Block nur die Höhe seiner Zeile -- sonst bliebe
|
||
ein leerer Kasten stehen und der gewonnene Platz wäre wieder weg. */
|
||
.vorlagenbrett[data-auf="nein"] { padding-bottom: 14px; }
|
||
.vorlagenbrett__koerper { display: contents; }
|
||
|
||
/* ---- Schon übernommen ----------------------------------------------- */
|
||
/* Die Karte tritt zurück, statt zu verschwinden. Wer eine Vorlage
|
||
ausblendet, nimmt die Möglichkeit weg, sie bewusst noch einmal zu
|
||
holen -- und lässt den Verdacht offen, dass etwas fehlt. */
|
||
.vorlagenbrett__karte[data-schon="ja"] { opacity: .62; }
|
||
.vorlagenbrett__karte[data-schon="ja"]:hover,
|
||
.vorlagenbrett__karte[data-schon="ja"]:focus-within { opacity: 1; }
|
||
.vorlagenbrett__schon {
|
||
font-size: .74rem; font-weight: 600;
|
||
color: var(--scout-haupt);
|
||
white-space: nowrap;
|
||
}
|
||
.vorlagenbrett__stand {
|
||
margin: 12px 0 0;
|
||
font-size: .8rem; color: var(--text-leise);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* =====================================================================
|
||
WER HAT SIE, WER NICHT -- NAMENTLICH (24.09.2026)
|
||
|
||
Filipe: „wenn ich eine aufgabe an alle verteile will ich dass
|
||
dogfather und die rechte hand individuel von jedem sehen wer es
|
||
gemacht hat oder nicht."
|
||
|
||
KEINE TABELLE, SONDERN MARKEN. Eine Tabelle braucht Spaltenbreiten,
|
||
und die stimmen entweder auf dem Handy oder am Rechner. Marken mit
|
||
`flex-wrap` brechen genau dann um, wenn der Platz nicht reicht --
|
||
dieselbe Ueberlegung wie beim Fuss darueber, und aus demselben
|
||
Grund: eine feste Schwelle waere beim naechsten Namen wieder falsch.
|
||
|
||
DIE FARBE IST DIE ABKUERZUNG, NICHT DIE AUSKUNFT. Das Wort steht
|
||
immer dabei. Wer Farben nicht unterscheidet, liest „Erledigt" --
|
||
und die Toene sind aus der gedeckten Zustandsleiste (--k-gut,
|
||
--k-mittel, --k-warn), nicht aus Neon: augenschonend ist Vorgabe.
|
||
|
||
WER SIE NICHT HAT, STEHT TROTZDEM DA -- gedaempft und mit
|
||
gestricheltem Rand. Ein durchgezogener Rand sagt „hier ist etwas",
|
||
ein gestrichelter „hier fehlt etwas"; das trennt die beiden Sorten
|
||
auch ohne Farbe, und die Frage „wen muss ich noch fragen?" ist die,
|
||
nach der man handelt.
|
||
===================================================================== */
|
||
.vorlagenbrett__wer {
|
||
display: flex; flex-wrap: wrap; gap: 6px;
|
||
/* KEIN TRENNSTRICH MEHR (25.09.2026): Der gehoerte dazu, solange die
|
||
Reihe UNTER der Karte stand und sich vom Text darueber absetzen
|
||
musste. Auf der Rueckseite ist sie der Inhalt -- ein Strich ueber
|
||
dem einzigen Inhalt trennt nichts. */
|
||
margin: 8px 0 0;
|
||
}
|
||
.vorlagenbrett__wer-p {
|
||
display: inline-flex; align-items: baseline; gap: 6px;
|
||
padding: 3px 9px; border-radius: 999px;
|
||
border: 1px solid var(--rand-hell);
|
||
background: rgba(255, 255, 255, .035);
|
||
font-size: .72rem; line-height: 1.5;
|
||
}
|
||
.vorlagenbrett__wer-name { font-weight: 700; color: var(--text-still); }
|
||
.vorlagenbrett__wer-stand { font-weight: 600; color: var(--text-leise); }
|
||
|
||
/* Erledigt tritt zurueck statt zu leuchten: Es ist die Nachricht, die
|
||
KEINE Handlung braucht. Wer die Reihe ueberfliegt, soll an den
|
||
offenen haengenbleiben, nicht an den fertigen. */
|
||
.vorlagenbrett__wer-p[data-stand="erledigt"] { opacity: .78; }
|
||
.vorlagenbrett__wer-p[data-stand="erledigt"] .vorlagenbrett__wer-stand { color: var(--k-gut); }
|
||
|
||
.vorlagenbrett__wer-p[data-stand="arbeit"] .vorlagenbrett__wer-stand,
|
||
.vorlagenbrett__wer-p[data-stand="review"] .vorlagenbrett__wer-stand { color: var(--k-mittel); }
|
||
|
||
.vorlagenbrett__wer-p[data-stand="spaet"] {
|
||
border-color: color-mix(in srgb, var(--k-warn) 45%, transparent);
|
||
background: color-mix(in srgb, var(--k-warn) 9%, transparent);
|
||
}
|
||
.vorlagenbrett__wer-p[data-stand="spaet"] .vorlagenbrett__wer-stand { color: var(--k-warn); }
|
||
|
||
.vorlagenbrett__wer-p[data-stand="abgebrochen"] { opacity: .6; }
|
||
.vorlagenbrett__wer-p[data-stand="abgebrochen"] .vorlagenbrett__wer-stand { color: var(--k-neutral); }
|
||
|
||
.vorlagenbrett__wer-p[data-stand="fehlt"] {
|
||
border-style: dashed; background: none;
|
||
}
|
||
.vorlagenbrett__wer-p[data-stand="fehlt"] .vorlagenbrett__wer-name { color: var(--text-leise); }
|
||
.vorlagenbrett__wer-p[data-stand="fehlt"] .vorlagenbrett__wer-stand { color: var(--k-neutral); }
|
||
|
||
/* Eine gedimmte Karte darf die Reihe nicht mitnehmen -- sonst ist
|
||
ausgerechnet die Auskunft „wer hat sie" am schlechtesten lesbar,
|
||
wenn alle sie haben und man nachsehen will, wer schon fertig ist. */
|
||
.vorlagenbrett__karte[data-schon="ja"] .vorlagenbrett__wer { opacity: 1; }
|
||
|
||
@media (forced-colors: active) {
|
||
.vorlagenbrett__wer-p { border: 1px solid CanvasText; }
|
||
.vorlagenbrett__wer-p[data-stand="fehlt"] { border-style: dashed; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
BEWERBUNGEN AUF EINE VORLAGE (23.09.2026)
|
||
|
||
Filipe: „die modis sollen bei all diesen voschlägen auch nur
|
||
bewerben können ... und nur dogfather und die rechte hand sollen
|
||
annehmen oder ablehnen können, mit einem text als notiz."
|
||
|
||
SIE STEHEN AN DER KARTE, nicht in einer Liste woanders. Entschieden
|
||
wird über eine bestimmte Aufgabe, und die Frage „will ich, dass Frida
|
||
das macht?" beantwortet man besser mit dem Text der Aufgabe direkt
|
||
darüber.
|
||
|
||
EINE KARTE MIT BEWERBUNG FÄLLT AUF. Sie ist der einzige Grund, warum
|
||
jemand dieses Brett gerade öffnen muss -- alles andere kann warten.
|
||
Dafür reicht eine wärmere Kante; ein Leuchten wäre bei zwölf Karten
|
||
nebeneinander Lärm.
|
||
===================================================================== */
|
||
.vorlagenbrett__karte[data-beworben="ja"] {
|
||
border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
|
||
background: linear-gradient(180deg,
|
||
color-mix(in srgb, var(--akzent) 9%, transparent),
|
||
transparent 60%),
|
||
rgba(4, 7, 12, .72);
|
||
}
|
||
|
||
.vorlagenbrett__bewerbungen {
|
||
display: grid; gap: 8px;
|
||
margin-top: 4px; padding-top: 10px;
|
||
border-top: 1px solid color-mix(in srgb, var(--akzent) 26%, transparent);
|
||
}
|
||
.vorlagenbrett__bschild {
|
||
margin: 0;
|
||
font-size: .78rem; font-weight: 700; letter-spacing: .02em;
|
||
color: color-mix(in srgb, var(--akzent) 62%, #ffffff);
|
||
}
|
||
.vorlagenbrett__bewerbung {
|
||
display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
|
||
}
|
||
.vorlagenbrett__bname { font-size: .88rem; font-weight: 700; color: var(--text); }
|
||
.vorlagenbrett__bzuerst {
|
||
font-size: .7rem; font-weight: 700; letter-spacing: .06em;
|
||
text-transform: uppercase;
|
||
padding: 2px 7px; border-radius: 999px;
|
||
color: color-mix(in srgb, var(--akzent) 60%, #ffffff);
|
||
background: color-mix(in srgb, var(--akzent) 16%, transparent);
|
||
}
|
||
/* Das Wort der Bewerbung darf die ganze Zeile nehmen -- es ist der
|
||
Grund, aus dem man überhaupt entscheidet, und in einer schmalen
|
||
Spalte neben zwei Knöpfen bliebe davon ein Wortfetzen übrig. */
|
||
.vorlagenbrett__bwort {
|
||
flex: 1 1 100%;
|
||
font-size: .82rem; line-height: 1.5;
|
||
color: var(--text-leise);
|
||
}
|
||
|
||
/* ---- Beworben, wartet ----------------------------------------------
|
||
Für den, der sich beworben hat. Der Satz sagt, WER antwortet -- sonst
|
||
wartet man auf niemanden und fragt am nächsten Tag im Chat. */
|
||
.vorlagenbrett__warte {
|
||
font-size: .76rem; font-weight: 600; line-height: 1.4;
|
||
color: color-mix(in srgb, var(--akzent) 58%, #ffffff);
|
||
}
|
||
|
||
/* =====================================================================
|
||
WAS WARTET -- QUER ÜBER ALLE KATEGORIEN (23.09.2026)
|
||
|
||
Die Bewerbungen stehen an ihrer Karte, und die Karte steht in EINER
|
||
von vierzehn Kategorien. Ohne dieses Band sieht jemand, der eine
|
||
andere offen hat, gar nichts — das Brett ist offen, die Bewerbung
|
||
ist da, und trotzdem findet er sie nie.
|
||
|
||
ES STEHT GANZ OBEN, über den Kategorie-Reitern. Das ist die einzige
|
||
Stelle, an der es unabhängig davon steht, was gerade gewählt ist.
|
||
===================================================================== */
|
||
.vorlagenbrett__warten {
|
||
display: grid; gap: 8px;
|
||
margin: 0 0 14px;
|
||
padding: 12px 14px;
|
||
border: 1px solid color-mix(in srgb, var(--akzent) 42%, transparent);
|
||
border-radius: 12px;
|
||
background: linear-gradient(180deg,
|
||
color-mix(in srgb, var(--akzent) 12%, transparent),
|
||
transparent 70%),
|
||
rgba(4, 7, 12, .6);
|
||
}
|
||
.vorlagenbrett__warten-schild {
|
||
margin: 0;
|
||
font-size: .84rem; font-weight: 700;
|
||
color: color-mix(in srgb, var(--akzent) 62%, #ffffff);
|
||
}
|
||
.vorlagenbrett__warten-reihe {
|
||
display: flex; flex-wrap: wrap; gap: 8px;
|
||
}
|
||
.vorlagenbrett__warten-knopf {
|
||
display: inline-flex; align-items: baseline; gap: 7px;
|
||
/* 40 px hoch wie alles, was ein Daumen trifft. */
|
||
min-height: 40px;
|
||
padding: 6px 12px;
|
||
max-width: 100%;
|
||
border: 1px solid var(--rand);
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, .04);
|
||
color: var(--text);
|
||
font: inherit; font-size: .84rem;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
}
|
||
.vorlagenbrett__warten-knopf:hover {
|
||
border-color: color-mix(in srgb, var(--akzent) 55%, transparent);
|
||
background: color-mix(in srgb, var(--akzent) 12%, transparent);
|
||
}
|
||
.vorlagenbrett__warten-knopf:focus-visible {
|
||
outline: 2px solid var(--akzent); outline-offset: 2px;
|
||
}
|
||
.vorlagenbrett__warten-wer { font-weight: 700; flex: none; }
|
||
/* Der Titel darf abgeschnitten werden, der Name nicht: Wer drei
|
||
Bitten untereinander sieht, unterscheidet sie am Namen. */
|
||
.vorlagenbrett__warten-was {
|
||
color: var(--text-leise);
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
|
||
/* ---- Die angesprungene Karte kurz hervorheben ----------------------
|
||
Wer auf einem Brett mit zwölf Karten landet, sucht sonst die, wegen
|
||
der er hergekommen ist. Zwei Sekunden reichen; ein dauerhaftes
|
||
Leuchten wäre beim nächsten Blick nur noch Zierde.
|
||
|
||
KEIN BLINKEN -- eine ruhige Kante, die wieder verschwindet. */
|
||
.vorlagenbrett__karte[data-hervor="ja"] {
|
||
border-color: var(--akzent);
|
||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent);
|
||
transition: box-shadow var(--tempo, .2s) ease, border-color var(--tempo, .2s) ease;
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.vorlagenbrett__karte[data-hervor="ja"] { transition: none; }
|
||
}
|
||
|
||
@media (forced-colors: active) {
|
||
.vorlagenbrett__karte[data-beworben="ja"] { border: 2px solid Highlight; }
|
||
.vorlagenbrett__bewerbungen { border-top: 1px solid CanvasText; }
|
||
.vorlagenbrett__warten { border: 1px solid CanvasText; }
|
||
.vorlagenbrett__karte[data-hervor="ja"] { border: 2px solid Highlight; }
|
||
}
|
||
|
||
/* ---- Wichtig ---------------------------------------------------------
|
||
Die Priorität war ein 3 px breiter Rand links -- direkt neben der
|
||
farbigen Kante der Spalte und damit praktisch unsichtbar. Als Wort
|
||
steht sie dort, wo man sie liest. */
|
||
.karte__wichtig {
|
||
flex: none;
|
||
padding: 1px 8px; border-radius: 999px;
|
||
/* 0,72 rem: Darunter liegt die Hausgrenze von 11,5 px. Gemeldet von
|
||
pruef-css-klassen, bevor es jemand lesen musste. */
|
||
font-size: .72rem; font-weight: 700;
|
||
letter-spacing: .04em; text-transform: uppercase;
|
||
color: #ffb4ba;
|
||
background: rgba(216, 101, 110, .16);
|
||
border: 1px solid rgba(216, 101, 110, .38);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.vorlagenbrett__kopf .klapp-pfeil { transition: none; }
|
||
}
|
||
@media (forced-colors: active) {
|
||
.karte__wichtig { border: 1px solid CanvasText; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
ANHAENGE IM AUFGABEN-DIALOG (15.09.2026)
|
||
|
||
Eine Datei je Zeile, anklickbar, mit Groesse dahinter. "nicht mehr
|
||
aktuell" darf auffallen -- wer hier die alte Fassung herunterlaedt,
|
||
merkt es sonst nicht.
|
||
===================================================================== */
|
||
|
||
.anhaenge__liste { display: grid; gap: 5px; margin: 4px 0 8px; }
|
||
.anhaenge__datei {
|
||
display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
|
||
padding: 8px 11px;
|
||
text-decoration: none;
|
||
color: var(--text-leise);
|
||
background: rgba(0, 0, 0, .22);
|
||
border: 1px solid var(--rand);
|
||
border-radius: var(--radius);
|
||
}
|
||
.anhaenge__datei:hover { color: var(--text); border-color: var(--rand-hell); }
|
||
.anhaenge__name { font-size: .86rem; font-weight: 600; }
|
||
.anhaenge__groesse {
|
||
font-size: .76rem; color: var(--text-still); margin-left: auto;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.anhaenge__fassung { font-size: .76rem; color: var(--text-still); }
|
||
.anhaenge__alt {
|
||
font-size: .76rem; font-weight: 640;
|
||
padding: 1px 8px; border-radius: 999px;
|
||
color: #d8a76a;
|
||
border: 1px solid color-mix(in srgb, #cc9451 45%, transparent);
|
||
}
|
||
.anhaenge__leer { font-size: .82rem; color: var(--text-still); }
|
||
.anhaenge__zufuegen { display: inline-block; cursor: pointer; }
|
||
.anhaenge__knopf {
|
||
display: inline-block;
|
||
font-size: .8rem; font-weight: 600;
|
||
padding: 7px 14px; border-radius: 999px;
|
||
color: var(--text-leise);
|
||
border: 1px solid var(--rand);
|
||
}
|
||
.anhaenge__zufuegen:hover .anhaenge__knopf { color: var(--text); border-color: var(--rand-hell); }
|
||
.anhaenge__hinweis { margin: 6px 0 0; font-size: .78rem; color: var(--text-still); }
|
||
|
||
/* =====================================================================
|
||
WIE LANGE GEHT DAS SCHON SO? (15.09.2026)
|
||
|
||
Drei Stufen, drei Toene -- aber die Farbe ist NICHT die Auskunft: Im
|
||
Text steht "liegt seit 5 Tagen", nicht nur ein roterer Punkt. Wer
|
||
Farben schlecht sieht, liest dasselbe.
|
||
|
||
Und es bleibt gedaempft. Eine Karte, die schreit, wird weggeklickt;
|
||
eine, die ruhig sagt "seit 12 Tagen", wird gelesen.
|
||
===================================================================== */
|
||
|
||
.karte__eskal {
|
||
font-size: .76rem; font-weight: 700;
|
||
padding: 2px 9px; border-radius: 999px;
|
||
letter-spacing: .01em;
|
||
color: var(--text-leise);
|
||
border: 1px solid var(--rand-hell);
|
||
}
|
||
/* faellig: es ist gerade passiert. Ein Hinweis, keine Warnung. */
|
||
.karte__eskal[data-stufe="faellig"] {
|
||
color: #d8a76a;
|
||
border-color: color-mix(in srgb, #cc9451 40%, transparent);
|
||
}
|
||
/* liegt: laenger als ein Wochenende. Jetzt ist es ein Zustand. */
|
||
.karte__eskal[data-stufe="liegt"] {
|
||
color: #e0955f;
|
||
border-color: color-mix(in srgb, #cc7a3f 50%, transparent);
|
||
background: color-mix(in srgb, #cc7a3f 10%, transparent);
|
||
}
|
||
/* haengt: ueber eine Woche. Ohne Hilfe wird das auch naechste Woche
|
||
nichts. */
|
||
.karte__eskal[data-stufe="haengt"] {
|
||
color: #e8886f;
|
||
border-color: color-mix(in srgb, #c25c45 55%, transparent);
|
||
background: color-mix(in srgb, #c25c45 14%, transparent);
|
||
}
|
||
/* still: keine Frist gerissen, nur lange nichts passiert. Bewusst
|
||
farblos -- das ist eine Beobachtung, kein gebrochenes Versprechen. */
|
||
.karte__eskal[data-stufe="still"] {
|
||
color: var(--text-still);
|
||
border-style: dashed;
|
||
}
|
||
|
||
/* =====================================================================
|
||
DER KANAL AN DER AUFGABE (17.09.2026)
|
||
|
||
Filipe: „ich hab ja auch 2 neben account, hasidog und dogfather
|
||
clips." Drei Accounts, eine Aufgabenliste — ohne ein Zeichen dafür
|
||
ist „schneide drei Ausschnitte" keine Aufgabe, sondern eine Frage.
|
||
|
||
EIN ZEICHEN, KEIN ZWEITER SATZ. Die Zeile unter dem Titel trägt
|
||
schon Frist, Kategorie, Person und Bereich. Ein weiteres „· Wort"
|
||
wäre darin untergegangen; ein eigener kleiner Rahmen wird gelesen,
|
||
ohne lauter zu sein.
|
||
|
||
GEDECKTE TÖNE, KEIN NEON: Die Farbe soll die drei unterscheidbar
|
||
machen, nicht um Aufmerksamkeit kämpfen — auf diesem Brett stehen
|
||
bis zu vierzig Karten untereinander.
|
||
------------------------------------------------------------------- */
|
||
.aufgabe__kanal {
|
||
--k-ton: #6f89a8;
|
||
display: inline-flex; align-items: center;
|
||
padding: 1px 8px; border-radius: 999px;
|
||
font-size: .72rem; font-weight: 600; letter-spacing: .02em;
|
||
color: color-mix(in srgb, var(--k-ton) 78%, #ffffff 22%);
|
||
border: 1px solid color-mix(in srgb, var(--k-ton) 34%, transparent);
|
||
background: color-mix(in srgb, var(--k-ton) 12%, transparent);
|
||
}
|
||
.aufgabe__kanal[data-kanal="dogfather"] { --k-ton: #c2544f; }
|
||
.aufgabe__kanal[data-kanal="hasidog"] { --k-ton: #7d6bbd; }
|
||
.aufgabe__kanal[data-kanal="clips"] { --k-ton: #3f9c8a; }
|
||
|
||
/* =====================================================================
|
||
ZUTEILUNG: WER HAT DIE AUFGABE (21.09.2026)
|
||
=====================================================================
|
||
|
||
Auftrag Abschnitte 1 bis 5. Drei Bauteile:
|
||
|
||
.z-band das Resümee über dem Brett
|
||
.z-karte der Block an einer Karte
|
||
.z-wahl die Mehrfachauswahl im Formular
|
||
|
||
GRUNDSATZ HIER WIE ÜBERALL IM HAUS: Ein Zustand darf nie NUR an der
|
||
Farbe hängen. Neben jeder Farbe steht das Wort — im Kontrastmodus
|
||
und für jeden, der Farben anders sieht, ist das der Unterschied
|
||
zwischen "lesbar" und "geraten".
|
||
===================================================================== */
|
||
|
||
.z-band {
|
||
margin: 0 0 18px;
|
||
padding: 16px 18px;
|
||
border: 1px solid var(--rand);
|
||
border-radius: var(--radius);
|
||
background: color-mix(in srgb, var(--flaeche) 92%, transparent);
|
||
}
|
||
/* Ueberschrift und Erklaerung stehen nebeneinander, nicht
|
||
uebereinander. Der Satz ist eine Fussnote zur Ueberschrift, keine
|
||
zweite Ueberschrift -- und zwei Zeilen fuer eine Auskunft sind auf
|
||
einer Seite, die ohnehin zu lang ist, eine zu viel. */
|
||
.z-band__kopf {
|
||
margin-bottom: 10px;
|
||
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
|
||
}
|
||
.z-band__titel { margin: 0; font-size: 1.05rem; }
|
||
.z-band__satz { margin: 0; color: var(--text-leise); font-size: .84rem; }
|
||
|
||
/* Die Zahlen. Groß genug, um sie von oben zu erfassen, ohne zu lesen. */
|
||
.z-band__zahlen { display: flex; flex-wrap: wrap; gap: 10px; }
|
||
.zk {
|
||
min-width: 96px; padding: 10px 12px;
|
||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||
background: color-mix(in srgb, var(--flaeche) 70%, transparent);
|
||
display: flex; flex-direction: column; gap: 2px;
|
||
}
|
||
.zk__zahl { font-size: 1.5rem; font-weight: 650; line-height: 1.1; }
|
||
.zk__wort { font-size: .78rem; color: var(--text-leise); }
|
||
.zk--gut { border-color: color-mix(in srgb, #7fd8a0 45%, var(--rand)); }
|
||
.zk--wach { border-color: color-mix(in srgb, #8ab4ff 45%, var(--rand)); }
|
||
.zk--warn { border-color: color-mix(in srgb, #ffb4a2 55%, var(--rand)); }
|
||
|
||
/* ---- Die Übersicht über alle ---------------------------------------- */
|
||
/* AUS GESTAPELTEN ZEILEN WIRD EINE REIHE (23.09.2026)
|
||
|
||
Gemessen: Dieser Block nahm bei vier Leuten 330 px ein -- ein
|
||
Drittel des Bildschirms, bevor die erste Aufgabe zu sehen war. Das
|
||
Brett begann dadurch erst bei 802 px.
|
||
|
||
Eine Zeile je Person war richtig gedacht, solange es um LESEN ging:
|
||
Name links, Marken rechts, ordentlich untereinander. Aber man liest
|
||
hier nicht, man SUCHT -- "wer hat zu viel?" -- und dafuer ist
|
||
nebeneinander besser als untereinander. Vier Namen in einer Reihe
|
||
vergleicht man mit einem Blick; vier Zeilen muss man abfahren.
|
||
|
||
flex-wrap statt einer festen Spaltenzahl: Bei zwanzig Leuten
|
||
bricht es von selbst um, ohne dass irgendwo eine Zahl steht, die
|
||
jemand beim naechsten Zugang nachziehen muesste. */
|
||
.z-leute { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.z-leute > .z-person { flex: 0 1 auto; }
|
||
.z-person {
|
||
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
|
||
/* 44 px am Finger -- Hausregel. Hier über die Polsterung, nicht über
|
||
eine feste Höhe: Die Zeile darf umbrechen, wenn viele Marken
|
||
danebenstehen. */
|
||
min-height: 44px; padding: 8px 12px;
|
||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||
background: transparent; color: var(--text);
|
||
text-align: left; cursor: pointer;
|
||
transition: background .16s ease, border-color .16s ease;
|
||
}
|
||
.z-person:hover { background: color-mix(in srgb, var(--flaeche) 60%, transparent); }
|
||
.z-person:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||
/* Die gewählte Zeile trägt einen Rand UND eine Kante -- nicht nur eine
|
||
andere Farbe. */
|
||
.z-person[data-gewaehlt="ja"] {
|
||
border-color: var(--akzent);
|
||
box-shadow: inset 3px 0 0 var(--akzent);
|
||
}
|
||
/* Die feste Mindestbreite war fuer die Zeilenform da -- sie hat die
|
||
Namen untereinander ausgerichtet. In der Reihe macht sie aus einem
|
||
kurzen Namen eine breite Luecke. */
|
||
.z-person__name { font-weight: 600; }
|
||
.z-person__marken { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
|
||
.z-marke {
|
||
padding: 2px 8px; border-radius: 999px;
|
||
font-size: .76rem; white-space: nowrap;
|
||
border: 1px solid var(--rand);
|
||
color: var(--text-leise);
|
||
}
|
||
.z-marke--wach { border-color: color-mix(in srgb, #8ab4ff 55%, var(--rand)); color: var(--text); }
|
||
.z-marke--warn { border-color: color-mix(in srgb, #ffb4a2 60%, var(--rand)); color: var(--text); }
|
||
.z-marke--gut { border-color: color-mix(in srgb, #7fd8a0 50%, var(--rand)); }
|
||
.z-marke--still { opacity: .7; }
|
||
|
||
.z-leer { margin: 0; color: var(--text-leise); font-size: .9rem; }
|
||
|
||
/* ---- Der Block an einer Karte --------------------------------------- */
|
||
.z-karte {
|
||
margin-top: 10px; padding-top: 10px;
|
||
border-top: 1px solid var(--rand);
|
||
}
|
||
.z-karte__zeile { margin: 0 0 6px; font-size: .82rem; color: var(--text-leise); }
|
||
|
||
.z-wer { list-style: none; margin: 0 0 8px; padding: 0; display: flex;
|
||
flex-direction: column; gap: 4px; }
|
||
.z-wer__zeile {
|
||
display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
|
||
font-size: .82rem;
|
||
/* Eine Kante links sagt den Zustand auch ohne Farbe -- sie ist
|
||
breiter bei dem, was Aufmerksamkeit braucht. */
|
||
padding-left: 8px; border-left: 2px solid var(--rand);
|
||
}
|
||
.z-wer__zeile[data-zustand="offen"] { border-left-color: color-mix(in srgb, #8ab4ff 60%, var(--rand)); }
|
||
.z-wer__zeile[data-zustand="arbeit"] { border-left-color: color-mix(in srgb, #8ab4ff 60%, var(--rand)); }
|
||
.z-wer__zeile[data-zustand="erledigt"] { border-left-color: color-mix(in srgb, #7fd8a0 55%, var(--rand)); }
|
||
.z-wer__zeile[data-zustand="abgelehnt"] { border-left-width: 4px;
|
||
border-left-color: color-mix(in srgb, #ffb4a2 60%, var(--rand)); }
|
||
.z-wer__name { font-weight: 600; }
|
||
.z-wer__stand { color: var(--text-leise); }
|
||
.z-wer__grund { width: 100%; color: var(--text-leise); font-size: .78rem; }
|
||
.z-wer__bewertung { padding: 1px 7px; border-radius: 999px; border: 1px solid var(--rand);
|
||
font-size: .74rem; }
|
||
.z-wer__bewertung[data-art="gut"] { border-color: color-mix(in srgb, #7fd8a0 55%, var(--rand)); }
|
||
.z-wer__bewertung[data-art="nicht_gut"],
|
||
.z-wer__bewertung[data-art="verbessern"] { border-color: color-mix(in srgb, #ffb4a2 60%, var(--rand)); }
|
||
|
||
.z-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
|
||
.z-bewerten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
|
||
margin-top: 8px; }
|
||
.z-bewerten__schild { font-size: .8rem; color: var(--text-leise); width: 100%; }
|
||
.z-bewerten__knopf { font-size: .8rem; }
|
||
|
||
/* ---- Die Bewerbungen (22.09.2026) -----------------------------------
|
||
Filipe: „ich will dass die sich fuer aufgaben bewerben koennen aber
|
||
die rechte hand oder dogfather muessen annehmen oder ablehnen
|
||
koennen und das mit einem kommentar als moeglichkeit."
|
||
|
||
EIGENE FLAECHE, ABGESETZT VOM REST DER KARTE. Eine Bewerbung ist
|
||
etwas, das auf eine ANTWORT wartet -- sie in die Namensliste zu
|
||
mischen hieße, sie sähe aus wie ein Stand, den man zur Kenntnis
|
||
nimmt. Hier ist etwas zu tun, und das soll man sehen. */
|
||
.z-bewerbungen {
|
||
margin-top: 10px;
|
||
padding: 10px 12px;
|
||
border: 1px solid color-mix(in srgb, var(--akzent) 34%, var(--rand));
|
||
border-radius: var(--radius-klein, 10px);
|
||
background: color-mix(in srgb, var(--akzent) 7%, transparent);
|
||
}
|
||
.z-bewerbungen__schild {
|
||
margin: 0 0 8px;
|
||
font-size: .82rem; font-weight: 600;
|
||
color: var(--text);
|
||
}
|
||
/* Name, Worte, zwei Knoepfe. Auf dem Handy bricht es um -- die Worte
|
||
nehmen dann die ganze Breite, die Knoepfe stehen darunter
|
||
nebeneinander. Kein Umbruchpunkt, `flex-wrap` misst selbst. */
|
||
.z-bewerbung {
|
||
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
|
||
padding: 6px 0;
|
||
}
|
||
.z-bewerbung + .z-bewerbung {
|
||
border-top: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
|
||
}
|
||
.z-bewerbung__name { font-weight: 600; font-size: .88rem; }
|
||
/* „Zuerst da" — die Auskunft, dass sich diese Person als Erste
|
||
gemeldet hat. Leise gesetzt: Sie ist ein Hinweis fuer die
|
||
Entscheidung, keine Vorschrift. */
|
||
.z-bewerbung__zuerst {
|
||
padding: 2px 8px;
|
||
border: 1px solid color-mix(in srgb, var(--k-gut) 45%, transparent);
|
||
border-radius: 999px;
|
||
background: color-mix(in srgb, var(--k-gut) 12%, transparent);
|
||
color: var(--k-gut);
|
||
font-size: .7rem; font-weight: 600; letter-spacing: .02em;
|
||
}
|
||
@media (forced-colors: active) {
|
||
.z-bewerbung__zuerst { border: 1px solid CanvasText; }
|
||
}
|
||
/* Die Worte der Person duerfen die Knoepfe verdraengen, nicht
|
||
umgekehrt: `flex: 1 1 100%` auf schmalen Schirmen kaeme zu frueh,
|
||
`min-width` laesst sie erst umbrechen, wenn es eng wird. */
|
||
.z-bewerbung__wort {
|
||
flex: 1 1 12rem; min-width: 0;
|
||
font-size: .82rem; color: var(--text-leise);
|
||
}
|
||
|
||
/* Wer sich beworben hat, sieht seinen eigenen Stand -- ohne ihn bleibt
|
||
der Knopf weg und nichts erklaert, warum. */
|
||
.z-karte__zeile--warte { color: var(--text); }
|
||
|
||
@media (forced-colors: active) {
|
||
.z-bewerbungen { border: 1px solid CanvasText; }
|
||
.z-bewerbung + .z-bewerbung { border-top: 1px solid CanvasText; }
|
||
}
|
||
|
||
.z-meldung { margin: 8px 0 0; font-size: .82rem; }
|
||
.z-meldung[data-gut="nein"] { color: color-mix(in srgb, #ffb4a2 80%, var(--text)); }
|
||
.z-meldung[data-gut="ja"] { color: color-mix(in srgb, #7fd8a0 80%, var(--text)); }
|
||
|
||
/* ---- Die Mehrfachauswahl im Formular -------------------------------- */
|
||
#feld-mehrere { margin-top: 10px; }
|
||
.z-wahl { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 10px; }
|
||
.z-wahl__zeile {
|
||
display: flex; align-items: center; gap: 10px;
|
||
/* Die ganze Zeile ist das Tippziel, nicht nur das Kästchen. */
|
||
min-height: 44px; padding: 4px 8px;
|
||
border-radius: var(--radius-klein); cursor: pointer;
|
||
}
|
||
.z-wahl__zeile:hover { background: color-mix(in srgb, var(--flaeche) 60%, transparent); }
|
||
.z-wahl__zeile input { width: 20px; height: 20px; flex: 0 0 auto; }
|
||
|
||
.z-art { border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||
padding: 10px 12px; margin: 0 0 8px; }
|
||
.z-art__wahl { display: flex; gap: 10px; align-items: flex-start;
|
||
min-height: 44px; padding: 6px 0; cursor: pointer; font-size: .86rem; }
|
||
.z-art__wahl input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
|
||
.z-art__wahl strong { display: block; }
|
||
|
||
/* ---- Kontrastmodus --------------------------------------------------- */
|
||
@media (forced-colors: active) {
|
||
/* Farbige Ränder verschwinden dort. Das WORT bleibt -- es stand von
|
||
Anfang an daneben, genau dafür. Die gewählte Zeile bekommt einen
|
||
eigenen Rahmen, damit "ausgewählt" nicht nur eine Farbe ist. */
|
||
.z-person[data-gewaehlt="ja"] { outline: 2px solid; outline-offset: -2px; }
|
||
.z-wer__zeile { border-left-width: 3px; }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.z-person { transition: none; }
|
||
}
|
||
|
||
|
||
/* =====================================================================
|
||
DIE SAMMELKARTE (23.09.2026)
|
||
|
||
Filipe: "so wie alles gerade ist ist es zu wenig und zu viel zu
|
||
gleich ... ich will das beste vom besten."
|
||
|
||
Eine Karte ist seither ein STUECK ARBEIT und nicht eine Zeile aus
|
||
der Datenbank. Sitzen vier Leute an derselben Sache, steht sie
|
||
einmal da -- mit den vieren darauf.
|
||
|
||
Die Begruendung und die gemessenen Zahlen stehen in aufgaben.js bei
|
||
gruppieren(). Hier steht nur, wie es aussieht.
|
||
===================================================================== */
|
||
|
||
.karte--sammel { --sammelton: var(--sfarbe, #6f89a8); }
|
||
|
||
/* Wie weit die Gruppe ist -- als Zahl. Rechts oben, wo sonst der
|
||
Stift steht: Es ist die Auskunft, die man auf einer Sammelkarte
|
||
zuerst sucht. */
|
||
.sammel__stand {
|
||
flex: 0 0 auto;
|
||
font-size: .78rem; font-variant-numeric: tabular-nums;
|
||
padding: 3px 9px; border-radius: 999px;
|
||
color: var(--text-leise);
|
||
border: 1px solid var(--rand);
|
||
background: color-mix(in srgb, var(--flaeche) 70%, transparent);
|
||
}
|
||
.sammel__stand[data-fertig="ja"] {
|
||
color: #8fd9b4;
|
||
border-color: color-mix(in srgb, #4dab77 45%, transparent);
|
||
background: color-mix(in srgb, #4dab77 14%, transparent);
|
||
}
|
||
|
||
/* Derselbe Stand noch einmal fuers Auge. ZUSAETZLICH zur Zahl, nicht
|
||
statt ihrer -- ein Balken allein laesst sich nicht vorlesen und
|
||
nicht ablesen, wenn man Farben schlecht unterscheidet. */
|
||
.sammel__balken {
|
||
height: 4px; border-radius: 999px; overflow: hidden;
|
||
background: color-mix(in srgb, var(--rand) 70%, transparent);
|
||
margin: 2px 0 9px;
|
||
}
|
||
.sammel__balken > span {
|
||
display: block; height: 100%;
|
||
width: calc(var(--anteil, 0) * 1%);
|
||
border-radius: 999px;
|
||
background: linear-gradient(90deg,
|
||
color-mix(in srgb, #4dab77 70%, transparent), #4dab77);
|
||
}
|
||
|
||
/* Der Text wird gekuerzt, nicht weggenommen. Auf der Sammelkarte
|
||
stand er vorher VIERMAL untereinander -- einmal je Person, und
|
||
jedes Mal derselbe Satz. */
|
||
/* ZWEI ZEILEN, NICHT DREI. Auf der Sammelkarte ist der Text bei
|
||
allen Beteiligten derselbe -- er steht also ohnehin nur noch
|
||
einmal statt achtmal. Zwei Zeilen reichen, um zu erkennen, worum
|
||
es geht; wer mehr braucht, klappt auf. */
|
||
.karte__text--kurz { font-size: .86rem; margin: 6px 0 0; }
|
||
.sammel__mehr {
|
||
align-self: flex-start;
|
||
border: 0; background: none; padding: 4px 0; margin: 0 0 4px;
|
||
font: inherit; font-size: .78rem; color: var(--text-leise);
|
||
text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
|
||
}
|
||
.sammel__mehr:hover { color: var(--text); }
|
||
.sammel__mehr:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||
|
||
/* ---- Die Leute ----------------------------------------------------
|
||
Jeder Name traegt seinen eigenen Stand. Das ist der Punkt, an dem
|
||
die Sammelkarte MEHR zeigt als die vier Einzelkarten vorher: Dort
|
||
musste man vier Karten suchen, die dreissig Karten auseinanderlagen,
|
||
um dieselbe Frage zu beantworten. */
|
||
.sammel__leute { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
|
||
.sammel__person {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
min-height: 34px; padding: 4px 10px 4px 8px;
|
||
border-radius: 999px; cursor: pointer;
|
||
font: inherit; font-size: .8rem; color: var(--text);
|
||
border: 1px solid var(--rand);
|
||
background: color-mix(in srgb, var(--flaeche) 62%, transparent);
|
||
}
|
||
.sammel__person:hover { border-color: var(--rand-hell); }
|
||
.sammel__person:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||
.sammel__punkt {
|
||
width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
|
||
background: var(--pton, #6f89a8);
|
||
}
|
||
.sammel__person[data-status="offen"] { --pton: #6f89a8; }
|
||
.sammel__person[data-status="arbeit"] { --pton: #3fbdf5; }
|
||
.sammel__person[data-status="review"] { --pton: #e0a33c; }
|
||
.sammel__person[data-status="erledigt"] { --pton: #4dab77; }
|
||
/* Wer fertig ist, tritt zurueck. Nicht durchgestrichen -- das liest
|
||
sich wie "faellt weg", und die Arbeit ist ja getan, nicht
|
||
abgesagt. */
|
||
.sammel__person[data-status="erledigt"] { color: var(--text-leise); }
|
||
.sammel__person[data-status="erledigt"] .sammel__punkt { box-shadow: none; }
|
||
/* Und der Rand nimmt die Farbe auf, damit man die Gruppe auch ohne
|
||
die Punkte lesen kann. */
|
||
.sammel__person { border-color: color-mix(in srgb, var(--pton, #6f89a8) 30%, var(--rand)); }
|
||
|
||
/* Steht jemand doppelt drin, steht es AN der Person. */
|
||
.sammel__mal {
|
||
font-size: .72rem; font-variant-numeric: tabular-nums;
|
||
padding: 1px 5px; border-radius: 999px;
|
||
color: #f2c94c;
|
||
background: color-mix(in srgb, #e0a33c 18%, transparent);
|
||
border: 1px solid color-mix(in srgb, #e0a33c 40%, transparent);
|
||
}
|
||
.sammel__person[data-doppelt="ja"] { border-color: color-mix(in srgb, #e0a33c 45%, var(--rand)); }
|
||
|
||
.sammel__doppelt {
|
||
margin: 8px 0 0; font-size: .78rem; line-height: 1.5;
|
||
color: #e6c169;
|
||
}
|
||
|
||
/* Die kleine Zeile im Spaltenkopf: wie viele Aufgaben aus den
|
||
Stuecken Arbeit geworden sind. */
|
||
.spalte__summe {
|
||
margin: -2px 0 10px; font-size: .76rem; color: var(--text-leise);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
.sammel__balken > span { transition: width .2s ease; }
|
||
}
|
||
|
||
@media (forced-colors: active) {
|
||
.sammel__person { border: 1px solid CanvasText; }
|
||
.sammel__person[data-doppelt="ja"] { border: 2px solid Highlight; }
|
||
.sammel__balken { border: 1px solid CanvasText; }
|
||
}
|
||
|
||
/* Die Sammelkarte darf enger sitzen als eine Einzelkarte: Auf ihr
|
||
steht weniger Text und mehr Struktur. Gemessen waren es 330 px je
|
||
Karte -- bei siebzehn Karten ist jede eingesparte Zeile ein halber
|
||
Bildschirm. */
|
||
.karte--sammel { padding: 13px 14px 14px; gap: 0; }
|
||
.karte--sammel .karte__titel { font-size: .97rem; line-height: 1.35; }
|
||
.karte--sammel .karte__zeile { margin-top: 8px; }
|
||
|
||
.inhalt--brett { max-width: 1560px; }
|
||
/* Der Kopfbereich bleibt lesbar schmal -- er ist Text, kein Brett.
|
||
Ohne das stuende der Satz "136 Aufgaben stehen an" auf einem
|
||
breiten Schirm ueber anderthalb Meter. */
|
||
.inhalt--brett > .kopf-zeile,
|
||
.inhalt--brett > .lage,
|
||
.inhalt--brett > #vorlagenbrett,
|
||
.inhalt--brett > .neu { max-width: 1240px; }
|
||
|
||
/* ---- Das Doppelt-Band ---------------------------------------------
|
||
Steht ueber dem Brett und nur dann, wenn wirklich etwas doppelt
|
||
ist. Gelb und nicht rot: Es ist eine Unsauberkeit, kein Ausfall --
|
||
niemand muss deshalb etwas stehen und liegen lassen. */
|
||
.doppelband {
|
||
display: flex; align-items: center; gap: 13px;
|
||
margin: 0 0 14px; padding: 12px 16px;
|
||
border-radius: var(--radius);
|
||
border: 1px solid color-mix(in srgb, #e0a33c 38%, var(--rand));
|
||
background: linear-gradient(180deg,
|
||
color-mix(in srgb, #e0a33c 11%, transparent), transparent 70%), var(--flaeche);
|
||
}
|
||
.doppelband__zahl {
|
||
flex: 0 0 auto;
|
||
min-width: 2.6rem; height: 2.6rem;
|
||
display: flex; align-items: center; justify-content: center;
|
||
border-radius: 999px;
|
||
font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums;
|
||
color: #f2c94c;
|
||
background: color-mix(in srgb, #e0a33c 16%, transparent);
|
||
border: 1px solid color-mix(in srgb, #e0a33c 42%, transparent);
|
||
}
|
||
.doppelband__text { display: grid; gap: 2px; min-width: 0; }
|
||
.doppelband__text > span { color: var(--text-leise); font-size: .86rem; line-height: 1.5; }
|
||
|
||
@media (forced-colors: active) { .doppelband { border: 1px solid CanvasText; } }
|
||
|
||
/* Voller Name oder Anfangsbuchstabe -- nie beides. */
|
||
.sammel__kurz { display: none; }
|
||
@media (max-width: 620px) {
|
||
.sammel__voll { display: none; }
|
||
.sammel__kurz {
|
||
display: inline-block; min-width: 1.05rem; text-align: center;
|
||
font-weight: 600; font-variant-numeric: tabular-nums;
|
||
}
|
||
/* Ohne den Namen braucht die Pille weniger Polster -- sonst waeren
|
||
es vier gleich grosse Kaesten mit viel Luft. */
|
||
.sammel__person { padding: 4px 8px; gap: 5px; }
|
||
}
|
||
|
||
/* ---- Am Handy wird aus der Reihe eine ROLLE ------------------------
|
||
Gemessen am 23.09.2026 auf 390 px: Die vier Leute brauchten dort
|
||
260 px, weil je Zeile nur zwei Pillen nebeneinander passen. Zusammen
|
||
mit dem Doppelt-Band begann das Brett erst bei 901 px -- also nach
|
||
einem vollen Bildschirm.
|
||
|
||
Nebeneinander in EINER Zeile, zum Wischen: Das ist dieselbe
|
||
Anordnung wie am grossen Schirm, nur laenger als das Fenster. Wer
|
||
jemand Bestimmten sucht, wischt; wer nur wissen will, ob jemand zu
|
||
viel hat, sieht die ersten drei und die Randschattierung sagt ihm,
|
||
dass es weitergeht.
|
||
|
||
KEIN Umbruch mehr auf schmalen Geraeten -- `nowrap` statt einer
|
||
Schwelle, ab der eine bestimmte Zahl Pillen passt. Eine solche Zahl
|
||
waere beim naechsten Namen falsch. */
|
||
@media (max-width: 620px) {
|
||
.z-leute {
|
||
flex-wrap: nowrap;
|
||
overflow-x: auto;
|
||
/* Der Finger soll waagerecht wischen, ohne dass die Seite
|
||
darunter mitwandert. */
|
||
overscroll-behavior-x: contain;
|
||
scroll-snap-type: x proximity;
|
||
/* Platz fuer den Rollbalken, damit er nichts verdeckt. */
|
||
padding-bottom: 6px;
|
||
/* Der Rand darf nicht abschneiden: Die letzte Pille soll bis an
|
||
die Kante rollen koennen. */
|
||
margin-inline: -2px; padding-inline: 2px;
|
||
}
|
||
.z-leute > .z-person { flex: 0 0 auto; scroll-snap-align: start; }
|
||
/* Eine schmale Schattierung am rechten Rand sagt: hier geht es
|
||
weiter. Ohne sie sieht eine abgeschnittene Pille aus wie ein
|
||
Darstellungsfehler. */
|
||
.z-band--team .z-leute {
|
||
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
|
||
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
|
||
}
|
||
/* Das Doppelt-Band: die Kugel kleiner, der Satz enger. Der Inhalt
|
||
bleibt vollstaendig -- er ist der Grund, warum das Brett ueberhaupt
|
||
so voll ist. */
|
||
.doppelband { gap: 10px; padding: 10px 13px; }
|
||
.doppelband__zahl { min-width: 2.2rem; height: 2.2rem; font-size: .95rem; }
|
||
.doppelband__text > span { font-size: .82rem; line-height: 1.45; }
|
||
}
|