DogFatherGitandClaude Opus 5
7ccf904c3c
Filipe, 22.09.2026, zum Bildschirmfoto: „wie scheisse sieht das aus,
verbesser das bitte." Zu sehen: „Anlegen" und „Abbrechen" lagen mitten
in der Personenliste.
GEMESSEN statt geraten, bei 1280 px mit aufgeklappter Liste:
Zelle Zeilen Hoehe Inhalt
feld-verant 24px 44px 68 107
feld-mehrere 43px 44px 87 261 <-- 174 zu viel
Jede Zelle des Formularrasters bekommt zwei Zeilen: Beschriftung oben,
Eingabe unten mit festen 44 px. Das ist richtig und der Grund, warum
alle Eingaben auf einer Linie sitzen (17.09.).
`feld-mehrere` ist aber keine Beschriftung mit Eingabe, sondern ein
Knopf mit einer Liste, die aufklappt. Ihr zweites Kind landet in der
44-Pixel-Zeile und laeuft heraus, sobald jemand sie oeffnet. Was
herauslaeuft, belegt keinen Platz -- also legt es sich ueber das
Naechste, und das Naechste sind die Knoepfe.
DIE MESSUNG HAT MICH VOR DEM NAHELIEGENDEN FEHLER BEWAHRT.
Erster Gedanke: „Zellen ohne eigene Eingabe brauchen die zwei Zeilen
nicht" -- `:has(> input, > select, > textarea)`. 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 fast das ganze Formular getroffen und genau die Ausrichtung
zerstoert, die sie schuetzen soll.
`aria-expanded` ist gemessen das einzige Merkmal, das nur bei dieser
Zelle steht -- und es ist das inhaltlich richtige: Es sagt „dieser
Bereich kann groesser werden". Etwas, das groesser werden kann, darf
keine feste Hoehe haben.
UND DIE PRUEFUNG, DIE ES HAETTE FINDEN MUESSEN
pruef-formulare war gruen -- sie klappt das Feld nie auf. Ein Zustand,
der nie hergestellt wird, kann nicht gemessen werden.
Neuer Abschnitt: Jedes Element mit `aria-expanded` im Formular wird
geoeffnet, danach darf keine Rasterzelle mehr Inhalt haben, als sie
hoch ist. Nicht diese eine Stelle, sondern die Eigenschaft -- damit
faellt auch die naechste auf, die es noch gar nicht gibt.
ZWEI ANLAEUFE DABEI WAREN FALSCH, und der zweite war der gefaehrliche:
1. `scrollHeight` der Zelle meldete elf Zellen als kaputt, die alle
in Ordnung sind: Der Hinweis unter einem Feld haengt seit dem
17.09. absichtlich absolut darunter. Eine Warnung, die bei
richtigem Verhalten anschlaegt, wird abgeschaltet.
2. Nur die direkten Kinder im Fluss -- das war gruen, AUCH MIT DEM
ECHTEN FEHLER. Nachgemessen mit zurueckgenommener Behebung:
immer noch gruen. Das Raster staucht das Kind auf die feste
Zeilenhoehe, das Kind bleibt also brav in der Zelle; was
herauslaeuft, ist der Inhalt darin.
Jetzt misst sie in die Tiefe (ohne Teilbaeume unter absolut gesetzten
Elementen und ohne eigene Rollbereiche) und ist beidseitig belegt:
mit Behebung -> gruen
ohne Behebung -> FEHL „feld-mehrere: Inhalt reicht bis 169 px,
Zelle ist 87 px hoch"
Dazu eine Gegenprobe, die eine Zelle kuenstlich einklemmt.
Ueberlappungen im Formular: von 12 auf 4 -- und die vier sind Absicht
(der echte <select> liegt unsichtbar ueber seinem Knopf).
pruef-formulare, pruef-aufgabenbrett, pruef-css-klassen gruen.
Co-Authored-By: Claude Opus 5 <[email protected]>
1263 lines
52 KiB
CSS
1263 lines
52 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 ----------------------------------------------------- */
|
||
|
||
.brett {
|
||
display: grid; gap: 14px;
|
||
grid-template-columns: repeat(4, minmax(0, 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);
|
||
}
|
||
|
||
@media (max-width: 1080px) { .brett { grid-template-columns: repeat(2, minmax(0, 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);
|
||
}
|
||
.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. */
|
||
.vorlagenbrett__fuss {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
flex-wrap: wrap; gap: 8px 12px; margin-top: auto; padding-top: 6px;
|
||
}
|
||
.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;
|
||
}
|
||
|
||
/* ---- 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);
|
||
}
|
||
.z-band__kopf { margin-bottom: 12px; }
|
||
.z-band__titel { margin: 0; font-size: 1.05rem; }
|
||
.z-band__satz { margin: 4px 0 0; color: var(--text-leise); font-size: .9rem; }
|
||
|
||
/* 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 ---------------------------------------- */
|
||
.z-leute { display: flex; flex-direction: column; gap: 6px; }
|
||
.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);
|
||
}
|
||
.z-person__name { font-weight: 600; min-width: 7rem; }
|
||
.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; }
|
||
|
||
.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; }
|
||
}
|