DogFatherGitandClaude Opus 5
362d883392
Filipe: "gestalte diese seite auch anders bitte. viel krasser geiler uebersichtlicher." Auf das Angebot, die Rollen als Kacheln statt Zeilen zu bauen: "will ich." Entwurf gezeigt, Antwort: "so live". Eine Person war eine Zeile ueber die volle Breite -- links der Name, darunter fuenf halbe Saetze, rechts die Knoepfe. Gemessen: 1128 x 74 px, eine pro Reihe, mit achthundert Pixeln Luft in der Mitte. Jetzt 368 x 221 px, drei nebeneinander: sechs Creator brauchen zwei Reihen statt sechs. Die Angaben stehen in einem Zahlenband statt als Satzreihe -- aus "offene Aufgaben: 0 · 2 offene Sitzung(en) · betreut 3 Creator" werden Felder mit grosser Zahl und kleinem Wort, in jeder Kachel an derselben Stelle. Man vergleicht zwei Personen mit dem Auge, statt in jeder Zeile an einer anderen Stelle nach derselben Zahl zu suchen. Dazu: "vor 21 Tagen" statt "2026-09-15 00:26" (das genaue Datum bleibt als Titel dran), ein Namenszeichen in der Rollenfarbe mit schmalem Farbstreifen oben, und "gesperrt" als Marke in der Warnfarbe statt als graues Wort zwischen fuenf grauen Woertern. ES FAELLT NICHTS WEG. Name, Rolle, gesperrt, Anmeldung, Aufgaben, Sitzungen, betreute Creator, zugeteilte Scouts, "gehoert zu", die Zustaendigkeitsauswahl und alle Knoepfe -- die Messung prueft das ausdruecklich mit, huebsch und unvollstaendig waere schlechter als vorher. Keine feste Spaltenzahl: "auto-fill" laesst den Browser rechnen, bei 1160 px sind es drei, bei 390 px eine. Eine Zahl waere die sechste Wiederholung desselben Fehlers in diesem Haus. Nebenbei zwei Altlasten: .marke-rolle und .betreuung__schild standen auf 11,2 px, unter der Hausgrenze von 11,5. Mit Gegenprobe belegt, dass das schon vorher so war -- jetzt .75rem. Gemessen: 14 Messungen, 0 Befunde (1765 px und 390 px). Gruen: pruef-personen-kachel (45), pruef-personen-liste, pruef-css-klassen. Co-Authored-By: Claude Opus 5 <[email protected]>
947 lines
42 KiB
CSS
947 lines
42 KiB
CSS
/* ===================================================================
|
||
Personenverwaltung.
|
||
=================================================================== */
|
||
|
||
/* ==== PERSONEN ALS KACHELN (24.09.2026) =============================
|
||
|
||
Filipe: "gestalte diese seite auch anders bitte. viel krasser
|
||
geiler uebersichtlicher." Auf das Angebot, die Rollen als Kacheln
|
||
statt Zeilen zu bauen: "will ich."
|
||
|
||
WAS SICH AENDERT: Eine Person war eine Zeile ueber die volle Breite
|
||
-- links der Name, darunter fuenf halbe Saetze, rechts die Knoepfe.
|
||
Bei 1765 px lief dieselbe Zeile ueber 1160 px, mit achthundert
|
||
Pixeln Luft in der Mitte. Zehn Personen hiessen zehn Zeilen
|
||
untereinander, und wer zwei vergleichen wollte, musste in jeder
|
||
Zeile an einer anderen Stelle nach derselben Zahl suchen.
|
||
|
||
JETZT EIN RASTER AUS KACHELN. Drei bis vier nebeneinander statt
|
||
einer pro Zeile: Dieselben zehn Personen brauchen drei Reihen statt
|
||
zehn. Und in jeder Kachel steht jede Angabe an derselben Stelle --
|
||
die Zahlen fluchten untereinander, man sieht mit einem Blick, wer
|
||
sieben offene Aufgaben hat und wer keine.
|
||
|
||
ES FAELLT NICHTS WEG. Jede Angabe, die vorher in der Zeile stand,
|
||
steht auch jetzt da: Name, Rolle, gesperrt, letzte Anmeldung,
|
||
offene Aufgaben, Sitzungen, betreute Creator, zugeteilte Scouts,
|
||
Zugehoerigkeit, die Zustaendigkeitsauswahl und alle Knoepfe. */
|
||
|
||
.gruppe__raster {
|
||
display: grid; gap: 12px;
|
||
/* KEINE FESTE SPALTENZAHL. "auto-fill" laesst den Browser rechnen:
|
||
bei 1160 px sind es drei, bei 390 px eine. Eine Zahl hier waere
|
||
genau der Fehler, der in diesem Haus schon fuenfmal passiert ist
|
||
-- eine Rechnung von gestern, die still falsch wird. */
|
||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
|
||
}
|
||
|
||
.person {
|
||
display: flex; flex-direction: column; gap: 11px;
|
||
padding: 14px 15px 13px; margin-bottom: 0;
|
||
background: var(--flaeche);
|
||
border: 1px solid var(--rand);
|
||
border-radius: var(--radius-klein);
|
||
/* Die Kacheln einer Reihe werden gleich hoch, damit die Knoepfe
|
||
unten fluchten (siehe margin-top bei .person__knoepfe). */
|
||
height: 100%;
|
||
}
|
||
/* DIE ROLLENFARBE ALS SCHMALER STREIFEN OBEN. Dieselben Farben, die
|
||
das Haus fuer die Rollen ohnehin fuehrt -- gedeckt beigemischt,
|
||
nicht als Leuchtbalken: Bei zehn Kacheln nebeneinander waere ein
|
||
voller Farbton Unruhe statt Ordnung. */
|
||
.person { --r: var(--text-still); }
|
||
.person[data-rolle="spicy"] { --r: var(--spicy-haupt); }
|
||
.person[data-rolle="admin"] { --r: var(--dogi-haupt); }
|
||
.person[data-rolle="manager"] { --r: var(--manager-haupt); }
|
||
.person[data-rolle="scout"] { --r: var(--scout-haupt); }
|
||
.person[data-rolle="creator"] { --r: var(--creator-haupt); }
|
||
.person { border-top: 2px solid color-mix(in srgb, var(--r) 50%, transparent); }
|
||
|
||
.person[data-aktiv="nein"] { opacity: .58; }
|
||
|
||
.person__innen { display: flex; flex-direction: column; gap: 11px; }
|
||
|
||
.person__kopf { display: flex; align-items: center; gap: 11px; min-width: 0; }
|
||
|
||
/* DAS NAMENSZEICHEN. Gab es bisher nur in der Ueberschrift einer
|
||
zugeklappten Gruppe. In der Kachel ist es das, woran man eine
|
||
Person wiedererkennt, bevor man den Namen gelesen hat. */
|
||
.person__zeichen {
|
||
flex: 0 0 auto;
|
||
width: 42px; height: 42px; border-radius: 50%;
|
||
display: grid; place-items: center;
|
||
font-size: .92rem; font-weight: 800; letter-spacing: .03em;
|
||
color: var(--r);
|
||
background: color-mix(in srgb, var(--r) 14%, transparent);
|
||
border: 1px solid color-mix(in srgb, var(--r) 32%, transparent);
|
||
}
|
||
|
||
.person__wer { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
|
||
.person__name {
|
||
font-weight: 600; font-size: .98rem;
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
.person__marken { display: flex; flex-wrap: wrap; gap: 5px; }
|
||
|
||
/* ---- Das Zahlenband ----
|
||
Ein Raster statt einer Reihe: So stehen die Felder in jeder Kachel
|
||
an derselben Stelle, auch wenn eine Person drei Felder hat und die
|
||
naechste fuenf. */
|
||
.person__werte {
|
||
display: grid; gap: 9px 10px;
|
||
grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
|
||
padding-top: 10px;
|
||
border-top: 1px solid color-mix(in srgb, var(--rand) 75%, transparent);
|
||
}
|
||
.person__wert { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
|
||
.person__wert-zahl {
|
||
font-size: 1.22rem; font-weight: 700; color: var(--text); line-height: 1.15;
|
||
}
|
||
/* Die Zeitangabe ist keine Zahl -- sie darf nicht so schreien wie
|
||
eine, steht aber im selben Band. */
|
||
.person__wert--zeit .person__wert-zahl { font-size: .87rem; font-weight: 600; }
|
||
.person__wert-wort {
|
||
font-size: .75rem; color: var(--text-still); line-height: 1.25;
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
|
||
.person__bezug { font-size: .79rem; color: var(--text-still); }
|
||
|
||
.marke-rolle {
|
||
padding: 1px 9px; border-radius: 999px;
|
||
/* 11,2 px waren unter der Hausgrenze von 11,5 px (24.09.2026).
|
||
Gemessen, nicht gelesen: In der Kachel steht die Marke gross
|
||
genug neben dem Namen, um aufzufallen -- das war der Grund fuer
|
||
die kleine Schrift, und in einer Zeile mit fuenf grauen Saetzen
|
||
war er auch richtig. Hier braucht sie ihn nicht mehr. */
|
||
font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
|
||
}
|
||
/* Alle FUENF Rollen, aus den zentralen Farben (08.09.2026).
|
||
|
||
Vorher standen hier nur drei -- Spicy und Manager fehlten ganz und
|
||
liefen ohne Marke, also farblos, durch die Liste. Ausserdem trug
|
||
`creator` das Lila des Managers: Zwei verschiedene Rollen sahen in
|
||
derselben Liste gleich aus.
|
||
|
||
`color-mix` statt fester rgba-Werte, damit Flaeche und Schrift
|
||
automatisch aus derselben Rollenfarbe kommen -- wer die Farbe oben
|
||
aendert, muss hier nichts nachziehen. */
|
||
.marke-rolle[data-rolle="spicy"] { background: color-mix(in srgb, var(--spicy-haupt) 16%, transparent); color: var(--spicy-haupt); }
|
||
.marke-rolle[data-rolle="admin"] { background: color-mix(in srgb, var(--dogi-haupt) 16%, transparent); color: var(--dogi-haupt); }
|
||
.marke-rolle[data-rolle="manager"] { background: color-mix(in srgb, var(--manager-haupt) 16%, transparent); color: var(--manager-haupt); }
|
||
.marke-rolle[data-rolle="scout"] { background: color-mix(in srgb, var(--scout-haupt) 16%, transparent); color: var(--scout-haupt); }
|
||
.marke-rolle[data-rolle="creator"] { background: color-mix(in srgb, var(--creator-haupt) 16%, transparent); color: var(--creator-haupt); }
|
||
|
||
/* DIE KNOEPFE STEHEN UNTEN, bei allen Kacheln einer Reihe auf
|
||
derselben Hoehe. "margin-top: auto" schiebt sie ans Ende der
|
||
Kachel, egal wie viele Felder darueber stehen. Und links statt
|
||
rechts: In einer 300 px breiten Kachel beginnt jede Zeile links,
|
||
eine rechtsbuendige Knopfreihe waere die einzige Ausnahme. */
|
||
.person__knoepfe {
|
||
display: flex; gap: 7px; flex-wrap: wrap;
|
||
justify-content: flex-start; margin-top: auto;
|
||
}
|
||
|
||
/* Gesperrt ist jetzt eine Marke in der Warnfarbe, kein graues Wort in
|
||
einer Reihe grauer Woerter. */
|
||
.marke-rolle[data-rolle="gesperrt"] {
|
||
background: color-mix(in srgb, var(--warn) 16%, transparent);
|
||
color: var(--warn);
|
||
}
|
||
|
||
/* ---------- Code-Anzeige ----------------------------------------------
|
||
|
||
STEHT SEIT DEM 11.09.2026 IN start.css. Nicht aufgeraeumt, sondern
|
||
umgezogen: Seit dem Talente-Trichter entsteht ein Zugang an zwei
|
||
Stellen, und talente.html laedt diese Datei nicht. Der Kasten waere
|
||
dort unsichtbar gewesen -- ein Code in weisser Grundschrift, ohne
|
||
Rahmen, mitten im Text. Gesucht unter ".code-kasten" in start.css. */
|
||
|
||
/* ---------- Protokoll --------------------------------------------------- */
|
||
|
||
.protokoll-block { margin-top: 44px; }
|
||
|
||
/* Das Auf- und Zuklappen selbst steht in start.css (.klapp-kopf,
|
||
.klapp-pfeil, [data-klapp="zu"]) -- es wird auch auf der
|
||
Automationen-Seite gebraucht. */
|
||
|
||
/* DIE SPALTEN NACH IHREM GEWICHT (23.09.2026).
|
||
|
||
Vorher: 128px Zeit, 190px Aktion, Rest fuer das Was, und die
|
||
IP-Adresse ganz rechts mit "auto" -- also so breit, wie sie will.
|
||
Auf Filipes Bildschirmfoto nahm sie ein Viertel der Zeile, und was
|
||
dort stand ("79.252.248.142") beantwortet eine Frage, die man
|
||
selten stellt.
|
||
|
||
Die Aktion braucht seit heute mehr Platz, weil sie ein Satz ist und
|
||
kein Spaltenwert ("Einstellung geändert" statt
|
||
"einstellung_geaendert"). Die IP bekommt eine feste, schmale Spalte
|
||
und tritt farblich zurueck -- sie steht weiter da, aber sie draengt
|
||
sich nicht mehr auf. */
|
||
.protokoll-zeile {
|
||
display: grid; gap: 10px;
|
||
grid-template-columns: 124px 210px 1fr 132px;
|
||
padding: 7px 10px;
|
||
font-size: .8rem; color: var(--text-leise);
|
||
border-bottom: 1px solid rgba(150, 186, 220, .08);
|
||
}
|
||
.protokoll-zeile:first-child { border-top: 1px solid rgba(150, 186, 220, .08); }
|
||
.protokoll-zeit { color: var(--text-still); font-variant-numeric: tabular-nums; }
|
||
.protokoll-ip {
|
||
color: color-mix(in srgb, var(--text-still) 70%, transparent);
|
||
font-variant-numeric: tabular-nums; font-size: .74rem;
|
||
text-align: right; align-self: center;
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
/* Das WAS ist die Hauptsache der Zeile -- es sagt, was passiert ist.
|
||
Vorher stand dort ein Spaltenwert und sah aus wie alles andere. */
|
||
.protokoll-was { color: var(--text); }
|
||
|
||
@media (max-width: 760px) {
|
||
.person { grid-template-columns: 1fr; }
|
||
.person__knoepfe { justify-content: flex-start; margin-top: 10px; }
|
||
.protokoll-zeile { grid-template-columns: 1fr; gap: 2px; padding: 10px; }
|
||
/* Am Handy steht die IP unter dem Rest statt daneben -- rechts
|
||
ausgerichtet waere sie dort eine einsame Zahl am Rand. */
|
||
.protokoll-ip { text-align: left; }
|
||
}
|
||
|
||
|
||
/* ---------- Zuständigkeit ------------------------------------------------
|
||
Wer betreut welchen Creator. Bewusst direkt in der Personenzeile und
|
||
nicht auf einer eigenen Seite: Es ist eine Eigenschaft der Person, kein
|
||
eigener Vorgang. */
|
||
.betreuung { display: flex; align-items: center; gap: 9px; margin-top: 9px; flex-wrap: wrap; }
|
||
.betreuung__schild {
|
||
/* Auch hier 11,2 px statt der 11,5 px, die im Haus die Untergrenze
|
||
sind (24.09.2026, beim Umbau gemessen). Beides zusammen -- Marke
|
||
und Schild -- waren die einzigen zwei Stellen auf der Seite
|
||
darunter. */
|
||
font-size: .75rem; font-weight: 700; letter-spacing: .07em;
|
||
text-transform: uppercase; color: var(--text-still);
|
||
}
|
||
.betreuung__wahl {
|
||
padding: 6px 10px; min-width: 165px;
|
||
background: rgba(255, 255, 255, .05);
|
||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||
color: var(--text); font: inherit; font-size: .84rem;
|
||
}
|
||
.betreuung__wahl:focus {
|
||
outline: none; border-color: rgba(63, 189, 245, .65);
|
||
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
||
}
|
||
|
||
/* ===================================================================
|
||
Rollenwahl (28.08.2026).
|
||
|
||
Ersetzt ein <select>. Bei vier Moeglichkeiten ist eine sichtbare Wahl
|
||
schneller -- und vor allem: Das aufgeklappte Systemmenue laesst sich
|
||
nicht gestalten, es kam in Windows-Weiss daher, mitten in einer
|
||
dunklen Oberflaeche. Hier steht ausserdem gleich dabei, was die Rolle
|
||
bedeutet; das ist bei "Manager" gegen "DogFather" der Unterschied
|
||
zwischen Raten und Wissen.
|
||
=================================================================== */
|
||
|
||
/* ---------- Das Formular "Neue Person" (neu gebaut 02.09.2026) ----------
|
||
|
||
Vorher lief die Rollenauswahl unten aus dem Formular heraus und legte
|
||
sich über die Personenliste darunter. Der Grund war keine schlampige
|
||
Gestaltung, sondern eine Regel, die für etwas anderes gemacht ist:
|
||
|
||
`.neu__raster > *` (aufgaben.css) gibt JEDEM direkten Kind ein Raster
|
||
mit fester Zeilenhöhe von 44 px -- damit Beschriftung und Eingabefeld
|
||
in allen Spalten auf derselben Linie sitzen. Für ein einzeiliges Feld
|
||
ist das genau richtig. Die Rollenauswahl ist aber kein Feld, sondern
|
||
ein Block aus vier hohen Karten. Die passten nicht in 44 px, und was
|
||
nicht hineinpasst, steht eben daneben -- sichtbar über allem, was
|
||
darunter liegt.
|
||
|
||
Deshalb wird das Formular hier bewusst aus dem Spaltenraster gelöst
|
||
und von oben nach unten gelesen:
|
||
|
||
NAME (schmal -- ein Name braucht keine 1200 px)
|
||
ROLLE (volle Breite, Karten nebeneinander)
|
||
Knöpfe
|
||
|
||
Das ist nicht nur reparierter Überlauf: Es ist auch die Reihenfolge,
|
||
in der man die Sache tatsächlich entscheidet. */
|
||
#neu .neu__raster {
|
||
grid-template-columns: 1fr;
|
||
/* 26 px, nicht 14: Zwischen "Name" und "Rolle" liegt ein Gedanken-
|
||
sprung -- erst WER, dann WAS DARF ER. Stehen die beiden Blöcke dicht
|
||
beieinander, liest man sie als einen. */
|
||
gap: 26px;
|
||
margin-bottom: 4px;
|
||
}
|
||
/* Die Feldregel aus aufgaben.css hier ausdrücklich zurücknehmen. */
|
||
#neu .neu__raster > * {
|
||
display: block;
|
||
grid-column: 1 / -1;
|
||
height: auto;
|
||
}
|
||
#neu .neu__raster > *:first-child { max-width: 420px; }
|
||
#neu .neu__raster > * > .feld-schild { margin-bottom: 7px; }
|
||
/* Ohne feste Höhe wird das Namensfeld hier gut 60 px hoch: Die Regel
|
||
`height: 100%` aus aufgaben.css bezieht sich auf eine Rasterzeile,
|
||
die es hier nicht mehr gibt. Ein Eingabefeld, das höher ist als die
|
||
Knöpfe daneben, sieht nach Versehen aus -- weil es eins wäre. */
|
||
#neu .neu__raster > * > input { height: 44px; }
|
||
|
||
.rollenwahl-block { grid-column: 1 / -1; }
|
||
.rollenwahl {
|
||
display: grid; gap: 10px; margin-top: 8px;
|
||
/* Vier Karten passen ab etwa 1100 px nebeneinander, darunter bricht
|
||
es von selbst auf zwei und dann auf eine Spalte um. */
|
||
grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
|
||
}
|
||
|
||
.rollenwahl__knopf {
|
||
--r: var(--text-still);
|
||
display: flex; align-items: flex-start; gap: 12px; text-align: left;
|
||
padding: 12px 14px; cursor: pointer;
|
||
background: linear-gradient(#151d2a, #111925);
|
||
border: 1px solid var(--rand); border-radius: 12px;
|
||
color: var(--text-leise); font: inherit;
|
||
transition: border-color .16s ease, background .16s ease, color .16s ease;
|
||
}
|
||
.rollenwahl__knopf:hover { border-color: rgba(255, 255, 255, .22); color: var(--text); }
|
||
/* EIN ECHTER RAHMEN, NICHT NUR EIN SCHATTEN (07.09.2026).
|
||
|
||
Hier stand `outline: none` und stattdessen ein box-shadow. Das sieht
|
||
weicher aus und hat einen Haken: Ein Schatten wird von jedem
|
||
`overflow: hidden` eines Elternteils abgeschnitten -- und dann ist
|
||
der Fokus unsichtbar, ohne dass es irgendwo auffaellt. Genau das hat
|
||
pruef-barrierefrei gemeldet, und zwar NUR beim Manager: Er sieht auf
|
||
dieser Seite genau einen Rollenknopf, und der stand am Rand seines
|
||
Behaelters.
|
||
|
||
Jetzt beides: der Rahmen sorgt dafuer, dass man ihn IMMER sieht, der
|
||
Schatten dafuer, dass es gut aussieht. Wer mit der Tastatur arbeitet,
|
||
ist auf diesen Rahmen angewiesen -- er ist der einzige Hinweis
|
||
darauf, wo er gerade steht. */
|
||
.rollenwahl__knopf:focus-visible {
|
||
outline: 2px solid color-mix(in srgb, var(--r) 85%, #ffffff);
|
||
outline-offset: 2px;
|
||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--r) 32%, transparent);
|
||
}
|
||
|
||
/* Eine Farbe je Rolle -- dieselbe Sprache wie überall sonst. */
|
||
.rollenwahl__knopf[data-rolle="admin"] { --r: var(--dogi-haupt); }
|
||
.rollenwahl__knopf[data-rolle="manager"] { --r: var(--manager-haupt); }
|
||
.rollenwahl__knopf[data-rolle="scout"] { --r: var(--scout-haupt); }
|
||
.rollenwahl__knopf[data-rolle="creator"] { --r: var(--creator-haupt); }
|
||
|
||
.rollenwahl__knopf[data-an="ja"] {
|
||
color: #fff;
|
||
border-color: color-mix(in srgb, var(--r) 60%, transparent);
|
||
background:
|
||
linear-gradient(color-mix(in srgb, var(--r) 16%, #151d2a),
|
||
color-mix(in srgb, var(--r) 9%, #111925));
|
||
box-shadow: 0 4px 16px -10px var(--r);
|
||
}
|
||
|
||
/* =====================================================================
|
||
DIE ROLLENSYMBOLE SIND KOERPER, KEINE UMRISSE (07.09.2026)
|
||
|
||
Filipe: "alle diese symbole von den rollen sollen auch viel
|
||
realistischer, geiler aussehen, auch mit farben befuellt sein."
|
||
|
||
Sie waren reine Konturen in einer Farbe -- daneben auf derselben
|
||
Seite die Kachelzeichen mit drei Lichtern. Sie bekommen jetzt
|
||
dieselbe Behandlung, nur einfacher gebaut (die Rollensymbole stehen
|
||
als <use> im HTML, nicht aus dem Bauer):
|
||
|
||
FLAECHE ein Verlauf in der Rollenfarbe -- oben satt, unten
|
||
warm auslaufend. Dasselbe Prinzip wie bei den
|
||
Kachelzeichen: kaltes Spitzlicht, Eigenfarbe, warmes
|
||
Streulicht.
|
||
ZEICHNUNG die Linien darauf, hell -- sie tragen die Form.
|
||
AUGEN hell gefuellt, damit ein Gesicht auch ein Gesicht ist.
|
||
|
||
`--r` ist die Farbe der Rolle und kommt aus der Liste darueber. */
|
||
/* NACHTRAG 08.09.2026: DIE ZEICHEN TRAGEN IHRE FARBEN JETZT SELBST.
|
||
|
||
Die Regeln darunter faerbten jedes Zeichen in der Farbe SEINER ROLLE
|
||
ein -- eine Farbe pro Zeichen. Filipe will es zweifarbig: "peperoni:
|
||
rot und grün", "husky: silber und blaue augen", "scout: grünes schild
|
||
mit einer roten peperoni drin". Das ist mit einer einzigen `--r`
|
||
nicht darstellbar, egal wie man mischt.
|
||
|
||
Die Zeichen bringen ihre Verlaeufe deshalb selbst mit (siehe das
|
||
<defs>-Sprite in personen.html). Hier bleibt nur noch, was VON AUSSEN
|
||
kommen muss: Groesse und der Schlagschatten, der sie von der Flaeche
|
||
abhebt.
|
||
|
||
`fill: none; stroke: var(--r)` MUSSTE WEG, und das ist der Kern:
|
||
Beides wird an die Pfade VERERBT. Ein Pfad, der nur ein `fill`-Attribut
|
||
traegt, haette den Rollen-Strich in 1,55 px geerbt -- jedes Zeichen
|
||
waere von einem dicken farbigen Rand ueberzogen worden. Jetzt steht
|
||
hier `stroke: none`, und jeder Pfad, der eine Linie haben will, sagt
|
||
das selbst. */
|
||
.rollenwahl__symbol {
|
||
width: 24px; height: 24px; flex: none; margin-top: 1px;
|
||
fill: none; stroke: none;
|
||
stroke-linecap: round; stroke-linejoin: round;
|
||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
|
||
}
|
||
|
||
/* Beim gewaehlten Knopf leuchtet die Flaeche etwas staerker -- das ist
|
||
der einzige Unterschied, den es braucht: mehr Licht auf demselben
|
||
Gegenstand. */
|
||
.rollenwahl__knopf[data-an="ja"] .rollenwahl__symbol .fuell {
|
||
fill: color-mix(in srgb, var(--r) 78%, transparent);
|
||
}
|
||
.rollenwahl__text { display: grid; gap: 2px; min-width: 0; }
|
||
.rollenwahl__name { font-size: .92rem; font-weight: 650; }
|
||
.rollenwahl__erklaerung { font-size: .76rem; color: var(--text-still); line-height: 1.42; }
|
||
.rollenwahl__knopf[data-an="ja"] .rollenwahl__erklaerung { color: var(--text-leise); }
|
||
|
||
/* Rollenmarke in der Liste bekommt dieselben Farben. */
|
||
.marke-rolle[data-rolle="manager"] {
|
||
color: #b6a9ff; border-color: rgba(138, 118, 255, .42); background: rgba(138, 118, 255, .12);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) { .rollenwahl__knopf { transition: none; } }
|
||
|
||
/* Die Betreuungs-Auswahl bleibt ein Systemmenue -- bei wechselnd vielen
|
||
Scouts waere eine feste Schalterreihe unpraktisch. Sie bekommt aber
|
||
genug Breite, damit kein Name abgeschnitten wird. */
|
||
.betreuung__wahl { min-width: 190px; }
|
||
|
||
/* Die beiden Knöpfe oben rechts. Der Aufklapper steht LINKS vom
|
||
"Person anlegen" – die Hauptsache gehört ganz nach außen, sonst
|
||
springt der Blick beim Suchen daran vorbei. */
|
||
.kopf-knoepfe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||
|
||
/* Die Anzahl neben der Rollen-Überschrift. Sitzt zwischen Name und
|
||
Erklärung, damit sie zur Überschrift gehört und nicht zum Zusatztext. */
|
||
.gruppe__zahl {
|
||
min-width: 20px; padding: 1px 7px; text-align: center;
|
||
font-size: .72rem; font-weight: 700; color: var(--text-still);
|
||
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* In der Personenliste liegen die Karten direkt untereinander; der
|
||
Abstand zur nächsten Rolle kommt von .gruppe selbst. */
|
||
/* (Der eigene Abstand der letzten Kachel ist entfallen -- die Kacheln
|
||
stehen in einem Raster mit "gap", keine hat mehr einen eigenen
|
||
Abstand nach unten.) */
|
||
|
||
/* Der Löschknopf. Ruhig wie die anderen, bis man ihn ansieht – dann
|
||
deutlich rot. Ein dauerhaft roter Knopf in jeder Zeile macht die
|
||
ganze Liste nervös; einer, der erst beim Überfahren rot wird, warnt
|
||
genau im richtigen Moment. */
|
||
.schritt[data-gefahr="ja"] { color: var(--text-still); }
|
||
.schritt[data-gefahr="ja"]:hover:not(:disabled) {
|
||
color: var(--warn);
|
||
border-color: rgba(255, 154, 162, .55);
|
||
background: rgba(255, 154, 162, .1);
|
||
}
|
||
.schritt[data-gefahr="ja"]:focus-visible { outline-color: var(--warn); }
|
||
|
||
/* Die Rollen-Überschrift ist der Klappknopf. Sie sieht aus wie eine
|
||
Überschrift und verhält sich wie ein Knopf – deshalb hier nur der
|
||
Knopf-Rücksetzer und ein Zeiger, kein eigener Entwurf. */
|
||
.gruppe__kopf--klappbar {
|
||
width: 100%; text-align: left; cursor: pointer;
|
||
font: inherit; color: inherit;
|
||
background: none; border: 0;
|
||
border-bottom: 1px solid transparent;
|
||
border-image: linear-gradient(90deg, var(--rand-hell), transparent 70%) 1;
|
||
transition: opacity var(--tempo);
|
||
}
|
||
.gruppe__kopf--klappbar:hover { opacity: .82; }
|
||
.gruppe__kopf--klappbar:focus-visible {
|
||
outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 4px;
|
||
}
|
||
/* Der Pfeil ganz nach rechts – dort sucht ihn die Hand. */
|
||
.gruppe__kopf--klappbar .klapp-pfeil { margin-left: auto; color: var(--text-still); }
|
||
.gruppe__kopf--klappbar:hover .klapp-pfeil { color: var(--akzent); }
|
||
|
||
/* Zugeklappt zählt nur eines: Steckt da etwas Gesperrtes drin, das man
|
||
sehen müsste? Dann fällt der Zusatztext auf. */
|
||
.gruppe__unter[data-warn="ja"] { color: var(--warn); }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.gruppe__kopf--klappbar { transition: none; }
|
||
}
|
||
|
||
/* ---------- Die gewählte Rolle: ein Häkchen, nicht nur ein Farbton ------
|
||
Bisher unterschied die gewählte Karte nur ein etwas hellerer Rahmen
|
||
und ein Hauch Farbe. Das ist genau die Art Unterschied, die im
|
||
Kontrastmodus verschwindet, bei hellem Umgebungslicht untergeht und
|
||
für farbunsichere Augen gar nicht erst existiert. Ein Häkchen sagt
|
||
dasselbe, ohne dass man Farben vergleichen muss. */
|
||
.rollenwahl__knopf { position: relative; padding-right: 44px; }
|
||
.rollenwahl__knopf::after {
|
||
content: "";
|
||
position: absolute; top: 13px; right: 14px;
|
||
width: 19px; height: 19px; border-radius: 50%;
|
||
border: 1.5px solid color-mix(in srgb, var(--r) 40%, var(--rand));
|
||
transition: background .16s ease, border-color .16s ease;
|
||
}
|
||
.rollenwahl__knopf[data-an="ja"]::after {
|
||
content: "✓";
|
||
display: grid; place-items: center;
|
||
border-color: var(--r);
|
||
background: var(--r);
|
||
color: #0b1017;
|
||
font-size: .8rem; font-weight: 800; line-height: 1;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.rollenwahl__knopf, .rollenwahl__knopf::after { transition: none; }
|
||
}
|
||
@media (forced-colors: active) {
|
||
/* Ohne Farben trägt allein das Häkchen die Aussage. */
|
||
.rollenwahl__knopf[data-an="ja"] { border: 2px solid Highlight; }
|
||
.rollenwahl__knopf::after { border-color: CanvasText; }
|
||
.rollenwahl__knopf[data-an="ja"]::after { background: Highlight; color: HighlightText; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
ZWEI AUSBAUSTUFEN DERSELBEN SEITE (07.09.2026)
|
||
|
||
DogFather sieht diese Seite wie bisher. Manager und Spicy Media sehen
|
||
nur das Anlegen -- alles andere hier haengt am Server an `nurAdmin`
|
||
und antwortet ihnen mit 404.
|
||
|
||
DAS AUSBLENDEN IST NICHT DIE SICHERUNG, sondern die Zusage, dass
|
||
niemand vor leeren Kaesten sitzt, die sich nie fuellen. Der Schutz
|
||
steht in den Schnittstellen; wuerde diese Regel fehlen, saehen sie
|
||
Ladefehler, aber keine Daten.
|
||
===================================================================== */
|
||
body[data-nur-anlegen="ja"] #liste,
|
||
body[data-nur-anlegen="ja"] .protokoll-block,
|
||
body[data-nur-anlegen="ja"] #rest-schalter { display: none; }
|
||
|
||
/* SPICY MEDIA LIEST DIE LISTE, VERWALTET SIE ABER NICHT (07.09.2026).
|
||
|
||
Sie bekommt die Liste (ohne DogFather) -- und deshalb muss die Liste
|
||
bei ihr wieder sichtbar sein, obwohl `nur-anlegen` gesetzt ist. Was
|
||
sie NICHT bekommt, sind die Knoepfe daran: Code neu erzeugen,
|
||
sperren, loeschen, zuteilen. Die haengen am Server an `nurAdmin` und
|
||
wuerden bei ihr mit 404 antworten.
|
||
|
||
DAS AUSBLENDEN IST KEINE SICHERUNG. Es erspart ihr nur Knoepfe, die
|
||
nichts tun -- die Sperre steht im Server. Diese Unterscheidung steht
|
||
hier ausdruecklich, weil sie beim naechsten Umbau leicht verrutscht. */
|
||
body[data-nur-lesen="ja"] #liste { display: block; }
|
||
/* `.person__knoepfe` stand hier bis zum 11.09.2026 mit drin. Seit
|
||
Spicy Media Rollen wechseln darf, hat sie GENAU EINEN Knopf -- und
|
||
eine Regel, die die ganze Reihe ausblendet, haette ihn mit
|
||
weggenommen. Welche Knoepfe entstehen, entscheidet jetzt
|
||
personen.js; was es nicht gibt, muss man auch nicht verstecken. */
|
||
body[data-nur-lesen="ja"] .person__code,
|
||
body[data-nur-lesen="ja"] .zuteilung,
|
||
body[data-nur-lesen="ja"] select { display: none; }
|
||
|
||
/* =====================================================================
|
||
DIE PERSONENLISTE IST EINE KACHEL (screen1 Punkt 3, 09.09.2026)
|
||
|
||
Filipe: "das soll alles in einer großen kachel sein."
|
||
|
||
Die fünf Rollengruppen (Spicy Media, DogFather, Manager, Scout,
|
||
Creator) standen als fünf lose Abschnitte frei auf dem
|
||
Hintergrundbild. Es ist aber EINE Liste mit fünf Abschnitten --
|
||
dieselbe Überlegung wie bei den Rollen auf der Anmeldeseite und den
|
||
Anlässen im Kalender.
|
||
|
||
DIE FORM KOMMT AUS DER MODULLISTE (module.css), die FLÄCHE steht
|
||
hier. Das ist die Aufteilung, die ich in dieser Woche dreimal falsch
|
||
herum hatte: Die Liste gibt Fase, Kantenlicht und Eckwinkel; den
|
||
Hintergrund bringt jedes Bauteil selbst mit. Ohne ihn wäre die
|
||
Kachel eine Fassung ohne Füllung, also ein Loch.
|
||
|
||
DIE FUGE MACHT DIE KACHEL: Ein Spalt, durch den der Untergrund
|
||
scheint, TRENNT die Abschnitte; eine dunkle Fuge VERBINDET sie, weil
|
||
sie zum selben Körper gehört.
|
||
|
||
DUNKLER ALS DIE KARTEN DARIN -- genau wie bei der Anlasskachel im
|
||
Kalender. Eine Vitrine ist dunkler als das, was darin steht; sonst
|
||
sieht man die Vitrine statt des Inhalts.
|
||
===================================================================== */
|
||
/* DUNKLER, 09.09.2026. Filipe: "der hintergrund soll auch bissl
|
||
dunkler sein von der kachel."
|
||
|
||
Von rgba(9,13,20,.96) auf rgba(5,8,13,.985). Der Hintergrund schien
|
||
vorher merklich durch -- bei einem Motiv mit hellen Stellen sass
|
||
hinter der Liste mal ein dunkler, mal ein heller Fleck, und die
|
||
Kachel wirkte dadurch fleckig statt ruhig. Die Schrift wird davon
|
||
nur besser lesbar: Der Grund wird dunkler, die Farben bleiben. */
|
||
.liste-kachel {
|
||
padding: 4px 0 0;
|
||
margin-bottom: 24px;
|
||
background:
|
||
var(--raster),
|
||
linear-gradient(178deg, rgba(5, 8, 13, .985), rgba(2, 4, 8, .995));
|
||
}
|
||
/* Die Abschnitte werden Felder in einem Körper: keine eigenen Ränder,
|
||
keine Luft dazwischen, sondern eine Fuge. */
|
||
.liste-kachel > .gruppe {
|
||
margin: 0;
|
||
padding: 0 16px;
|
||
border-bottom: 1px solid #04060a;
|
||
box-shadow: 0 1px 0 rgba(255, 255, 255, .04);
|
||
}
|
||
.liste-kachel > .gruppe:last-child { border-bottom: 0; box-shadow: none; }
|
||
|
||
/* ---------------------------------------------------------------------
|
||
DAS LEERE BAND UNTER JEDER ZEILE (gemessen, 09.09.2026)
|
||
|
||
Filipe: "mach die ganze kachel perfekter detailliert schoenes."
|
||
|
||
Auf seinem Bild stand unter jeder zugeklappten Rolle ein leerer
|
||
Streifen. Nachgemessen: Der Abschnitt war 74 px hoch, die Zeile
|
||
darin 45 -- 29 px Nichts, fuenfmal untereinander.
|
||
|
||
Sie kamen aus ZWEI Quellen, und nur eine davon stand hier:
|
||
* padding-bottom: 14px an .liste-kachel > .gruppe
|
||
* margin-bottom: 14px an .gruppe__kopf -- aus start.css, Zeile 765,
|
||
geschrieben fuer die freistehenden Abschnitte der Startseite, wo
|
||
unter der Ueberschrift wirklich gleich Karten kommen.
|
||
|
||
Zugeklappt kommt hier aber gar nichts, und dann ist der Abstand
|
||
Abstand zu nichts. Beide werden deshalb an den ZUSTAND gebunden:
|
||
offen -> Luft, zugeklappt -> keine. */
|
||
.liste-kachel > .gruppe > .gruppe__kopf {
|
||
width: calc(100% + 32px);
|
||
margin: 0 0 0 -16px;
|
||
padding: 15px 16px;
|
||
}
|
||
.liste-kachel > .gruppe[data-auf="ja"] > .gruppe__kopf { margin-bottom: 13px; }
|
||
.liste-kachel > .gruppe[data-auf="ja"] { padding-bottom: 15px; }
|
||
|
||
/* =====================================================================
|
||
DIE KOEPFE STEHEN IN SPALTEN, NICHT IN DER MITTE (screen3, 09.09.2026)
|
||
|
||
Filipe: "die sollen schön untereinander sein und nicht so
|
||
durcheinander."
|
||
|
||
URSACHE, gemessen statt vermutet: `.gruppe__zahl` traegt in start.css
|
||
ein `margin-left: auto` -- geschrieben fuer die STARTSEITE, wo im Kopf
|
||
nur Name, Zahl und Pfeil stehen und die Zahl damit ganz nach rechts
|
||
rutscht ("Sie steht ganz rechts, direkt vor dem Pfeil", so der
|
||
Kommentar dort). Auf DIESER Seite steht zwischen Zahl und Pfeil aber
|
||
noch der Zusatztext, und der Pfeil hat sein EIGENES `margin-left:
|
||
auto`. Zwei auto-Raender in einem Flexkasten teilen den freien Platz
|
||
zu gleichen Teilen -- also landete die Gruppe [Zahl + Zusatztext]
|
||
genau in der Mitte, und ihre Lage haing an der Laenge des Rollennamens
|
||
davor. Nachgemessen im Kopf:
|
||
|
||
DOGFATHER Name x 16, Zahl x 501, Zusatz x 531
|
||
SCOUT Name x 16, Zahl x 490, Zusatz x 520
|
||
CREATOR Name x 16, Zahl x 494, Zusatz x 525
|
||
|
||
Die Regel tat also nicht einmal auf dieser Seite, was ihr eigener
|
||
Kommentar behauptet. Sie bleibt fuer die Startseite unveraendert und
|
||
wird hier zurueckgenommen -- nicht dort geaendert, sonst kippt die
|
||
andere Seite.
|
||
|
||
VIER SPALTEN STATT FLEX. Name, Zahl, Zusatztext, Pfeil. Damit die
|
||
Spalten ueber ALLE Koepfe hinweg fluchten, brauchen sie dieselbe
|
||
Namensbreite -- die kommt aus `--namen-spalte`, und die wird in
|
||
personen.js an der fertig gezeichneten Liste GEMESSEN. Eine feste
|
||
Zahl (`min-width: 11ch`) waere wieder eine Rechnung von gestern: Sie
|
||
gilt bis zur naechsten Rolle mit einem laengeren Namen, und dann
|
||
verrutscht alles still. Der Rueckfallwert `max-content` sorgt dafuer,
|
||
dass es auch ohne JavaScript ordentlich aussieht -- nur eben nicht
|
||
gefluchtet. */
|
||
.liste-kachel > .gruppe > .gruppe__kopf--klappbar {
|
||
display: grid;
|
||
grid-template-columns: var(--namen-spalte, max-content) auto minmax(0, 1fr) auto;
|
||
align-items: baseline;
|
||
column-gap: 12px;
|
||
}
|
||
/* `justify-self: start` haelt jedes Feld auf Inhaltsbreite. Ohne das
|
||
fuellt der Name seine Spalte aus -- und die Messung in personen.js
|
||
wuerde dann ihre eigene Vorgabe zurueckmessen statt der Textbreite. */
|
||
.liste-kachel .gruppe__name,
|
||
.liste-kachel .gruppe__zahl,
|
||
.liste-kachel .gruppe__unter { justify-self: start; }
|
||
.liste-kachel .gruppe__zahl { margin-left: 0; }
|
||
/* Der Pfeil braucht seinen auto-Rand im Raster nicht mehr -- die letzte
|
||
Spalte ist ohnehin die letzte. Mittig statt auf der Schriftlinie: ein
|
||
Zeichen hat keine Grundlinie, an der sich etwas ausrichten liesse. */
|
||
.liste-kachel > .gruppe > .gruppe__kopf--klappbar .klapp-pfeil {
|
||
margin-left: 0; justify-self: end; align-self: center;
|
||
}
|
||
/* Schmale Fenster: Der Zusatztext rutscht unter den Namen, statt die
|
||
Spalten zu stauchen. Zwei Zeilen sind lesbar, eine gequetschte
|
||
nicht. */
|
||
@media (max-width: 620px) {
|
||
.liste-kachel > .gruppe > .gruppe__kopf--klappbar {
|
||
grid-template-columns: max-content auto minmax(0, 1fr) auto;
|
||
}
|
||
.liste-kachel .gruppe__unter { grid-column: 1 / -1; }
|
||
}
|
||
/* Ein Abschnitt, der offen ist, hebt sich leicht ab -- so sieht man,
|
||
welcher gerade Platz einnimmt, ohne eine zweite Farbe. Der Ton kommt
|
||
aus der Rollenfarbe, ist aber so leise, dass er nicht als Farbe
|
||
auffaellt, sondern als Licht. */
|
||
.liste-kachel > .gruppe[data-auf="ja"] {
|
||
background:
|
||
linear-gradient(180deg, color-mix(in srgb, var(--r) 7%, transparent), transparent 62%);
|
||
}
|
||
|
||
/* =====================================================================
|
||
DIE KACHEL IM DETAIL (09.09.2026)
|
||
|
||
Filipe, mit Bildschirmfoto: "mach die ganze kachel perfekter
|
||
detailliert schönes. der hintergrund soll auch bissl dunkler sein
|
||
von der kachel."
|
||
|
||
Vorher waren die fünf Zeilen fünfmal dasselbe: Name, Zahl, Satz,
|
||
Pfeil, in Grau. Die Rollen haben im ganzen Haus eigene Farben --
|
||
auf der Anmeldeseite, an den Marken, in den Bereichen. Ausgerechnet
|
||
in der Liste, in der es NUR um Rollen geht, hörten sie auf.
|
||
|
||
Der Ton kommt deshalb aus derselben Quelle wie überall (--*-haupt in
|
||
gate.css) und wird an EINER Stelle je Rolle gesetzt. Alles Weitere
|
||
liest --r: Streifen, Zahl, Namenszeichen, Pfeil, das Licht beim
|
||
Aufklappen. Fünf Farbangaben je Rolle wären fünf Gelegenheiten,
|
||
dass eine nachgezogen wird und vier nicht.
|
||
|
||
AUGENSCHONEND HEISST HIER: die Farbe trägt, sie leuchtet nicht. Der
|
||
Streifen hat 3 px, die Fläche darunter höchstens 8 % Farbe. Fünf
|
||
kräftig eingefärbte Zeilen untereinander wären ein Regenbogen --
|
||
und einer, den man jeden Tag ansieht.
|
||
===================================================================== */
|
||
.liste-kachel > .gruppe { --r: var(--text-still); }
|
||
/* UND DIE KARTEN DARIN ERBEN SIE.
|
||
|
||
`--ton` ist die Variable, aus der die Modulliste (module.css) das
|
||
Kantenlicht und die Eckwinkel jeder Kachel zieht. Sie hier zu setzen
|
||
heisst: Die Personenkarten in einem Abschnitt tragen die Farbe ihrer
|
||
Rolle, nicht die allgemeine Hausfarbe. Vorher standen in einem
|
||
lila Manager-Abschnitt orange gerahmte Karten -- zwei Farben fuer
|
||
dieselbe Sache, und die aeussere hatte recht.
|
||
|
||
Eine Zeile, und der ganze Abschnitt wird ein Stueck. */
|
||
.liste-kachel > .gruppe { --ton: var(--r); }
|
||
.liste-kachel > .gruppe[data-rolle="spicy"] { --r: var(--spicy-haupt); }
|
||
.liste-kachel > .gruppe[data-rolle="admin"] { --r: var(--dogi-haupt); }
|
||
.liste-kachel > .gruppe[data-rolle="manager"] { --r: var(--manager-haupt); }
|
||
.liste-kachel > .gruppe[data-rolle="scout"] { --r: var(--scout-haupt); }
|
||
.liste-kachel > .gruppe[data-rolle="creator"] { --r: var(--creator-haupt); }
|
||
|
||
/* Der Streifen sitzt NEBEN dem Kantenlicht, nicht darunter.
|
||
|
||
Erster Anlauf: `left: 0`, volle Höhe. Im Bild war nichts zu sehen --
|
||
und die berechneten Werte sagten trotzdem "3 px breit, sichtbar,
|
||
Deckkraft 0,55". Der Grund steht in module.css: Jede Kachel trägt auf
|
||
::before ein Kantenlicht mit `inset: 0` und `z-index: 2`, also eine
|
||
1,6 px breite Linie ÜBER allen Kindern. Vom Streifen blieben 1,4 px,
|
||
und die lagen genau in der Kante.
|
||
|
||
Er beginnt deshalb bei 3 px, ist gerundet und lässt oben und unten
|
||
Luft: So liest er sich als Marke der Zeile und nicht als zweiter
|
||
Rahmen neben dem ersten. Zugeklappt reicht er über die Zeile, offen
|
||
über den ganzen Abschnitt -- man sieht am Rand, wie weit ein
|
||
geöffneter Bereich reicht. */
|
||
.liste-kachel > .gruppe { position: relative; }
|
||
.liste-kachel > .gruppe::after {
|
||
content: ""; position: absolute; left: 3px; top: 9px; bottom: 9px;
|
||
width: 3px; border-radius: 999px;
|
||
background: linear-gradient(180deg,
|
||
color-mix(in srgb, var(--r) 85%, transparent),
|
||
color-mix(in srgb, var(--r) 30%, transparent));
|
||
opacity: .7;
|
||
transition: opacity var(--tempo);
|
||
pointer-events: none;
|
||
}
|
||
.liste-kachel > .gruppe[data-auf="ja"]::after { opacity: 1; }
|
||
|
||
/* Die Zeile reagiert als GANZE, nicht durch Verblassen. `opacity: .82`
|
||
auf dem Kopf (start.css) macht beim Überfahren den Text blasser --
|
||
das ist das Gegenteil von "hier bist du". Ein leiser Farbzug von
|
||
links sagt dasselbe, ohne etwas wegzunehmen. */
|
||
.liste-kachel > .gruppe > .gruppe__kopf--klappbar { opacity: 1; }
|
||
.liste-kachel > .gruppe > .gruppe__kopf--klappbar:hover {
|
||
opacity: 1;
|
||
background: linear-gradient(90deg,
|
||
color-mix(in srgb, var(--r) 11%, transparent), transparent 58%);
|
||
}
|
||
|
||
/* Die Anzahl trägt die Rollenfarbe. Sie ist der einzige Punkt in der
|
||
Zeile, der ohnehin schon ein Feld ist -- eine zweite eingefärbte
|
||
Fläche daneben wäre eine zu viel. */
|
||
.liste-kachel .gruppe__zahl {
|
||
color: color-mix(in srgb, var(--r) 78%, #ffffff);
|
||
background: color-mix(in srgb, var(--r) 15%, transparent);
|
||
border: 1px solid color-mix(in srgb, var(--r) 32%, transparent);
|
||
padding: 1px 8px;
|
||
}
|
||
/* Und der Rollenname bekommt eine Spur mehr Gewicht als vorher -- er
|
||
ist die Überschrift der Zeile, nicht ihre Beschriftung. */
|
||
.liste-kachel .gruppe__name { color: var(--text); letter-spacing: .11em; }
|
||
.liste-kachel > .gruppe[data-auf="ja"] .gruppe__name {
|
||
color: color-mix(in srgb, var(--r) 55%, var(--text));
|
||
}
|
||
|
||
/* ---- Wer drinsteht ---------------------------------------------------
|
||
Vier Namenszeichen, leicht überlappend wie ein Stapel Karten -- so
|
||
liest man sie als EINE Gruppe und nicht als vier Einzelteile. Sie
|
||
stehen rechts, kurz vor dem Pfeil: Der Blick geht von links (wer ist
|
||
das) nach rechts (wer ist drin, kann ich aufklappen). */
|
||
.gruppe__leute { display: flex; align-items: center; justify-self: end; }
|
||
.gruppe__kopf-zeichen {
|
||
width: 26px; height: 26px; border-radius: 50%;
|
||
display: grid; place-items: center;
|
||
margin-left: -7px;
|
||
/* 0,72 rem und nicht 0,66: Darunter faellt die Hausgrenze von
|
||
11,5 px, und zwei Grossbuchstaben in einem 26-px-Kreis haben den
|
||
Platz. Gemeldet von pruef-css-klassen, bevor es jemand lesen
|
||
musste. */
|
||
font-size: .72rem; font-weight: 700; letter-spacing: .01em;
|
||
color: color-mix(in srgb, var(--r) 72%, #ffffff);
|
||
background: color-mix(in srgb, var(--r) 17%, #070a11);
|
||
/* Der Ring in der Farbe der Kachel schneidet die Zeichen voneinander
|
||
frei -- ohne ihn verschwimmt der Stapel zu einem Fleck. */
|
||
border: 1.5px solid #05080d;
|
||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--r) 26%, transparent);
|
||
}
|
||
.gruppe__kopf-zeichen:first-child { margin-left: 0; }
|
||
/* Gesperrt ist keine Farbe, sondern eine Abwesenheit von Farbe. Rot
|
||
wäre hier eine Warnung je Person; die Warnung steht schon einmal im
|
||
Zusatztext, und zweimal dasselbe zu rufen macht beides leiser. */
|
||
.gruppe__kopf-zeichen[data-gesperrt="ja"] {
|
||
color: var(--text-still);
|
||
background: rgba(255, 255, 255, .05);
|
||
box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
|
||
}
|
||
.gruppe__kopf-zeichen[data-mehr="ja"] {
|
||
color: var(--text-leise);
|
||
background: rgba(255, 255, 255, .06);
|
||
box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Der Pfeil bekommt die Rollenfarbe erst beim Überfahren -- fünf
|
||
farbige Pfeile untereinander wären fünfmal dieselbe Aussage. */
|
||
.liste-kachel > .gruppe > .gruppe__kopf--klappbar:hover .klapp-pfeil {
|
||
color: color-mix(in srgb, var(--r) 70%, var(--text));
|
||
}
|
||
.liste-kachel > .gruppe[data-auf="ja"] .klapp-pfeil {
|
||
color: color-mix(in srgb, var(--r) 60%, var(--text-leise));
|
||
}
|
||
|
||
/* Die Namenszeichen bekommen eine eigene Spalte im Raster (Name, Zahl,
|
||
Zusatztext, Leute, Pfeil). */
|
||
.liste-kachel > .gruppe > .gruppe__kopf--klappbar {
|
||
grid-template-columns: var(--namen-spalte, max-content) auto minmax(0, 1fr) auto auto;
|
||
align-items: center;
|
||
}
|
||
/* Der Zusatztext steht auf der Schriftlinie des Namens -- er ist Text,
|
||
die anderen drei sind Formen. */
|
||
.liste-kachel .gruppe__name, .liste-kachel .gruppe__unter { align-self: baseline; }
|
||
|
||
@media (max-width: 900px) {
|
||
/* Eng wird zuerst das Entbehrliche weggelassen: Die Zahl daneben sagt
|
||
schon, wie viele es sind. */
|
||
.gruppe__leute { display: none; }
|
||
.liste-kachel > .gruppe > .gruppe__kopf--klappbar {
|
||
grid-template-columns: var(--namen-spalte, max-content) auto minmax(0, 1fr) auto;
|
||
}
|
||
}
|
||
/* ---- Am Handy: zwei Zeilen, und der Pfeil bleibt rechts -------------
|
||
Hier stand nur `.gruppe__unter { grid-column: 1 / -1 }` (weiter oben
|
||
in dieser Datei). Der Zusatztext bekam damit eine eigene Rasterzeile
|
||
-- und schob den Pfeil in eine DRITTE, wo er mittig unter dem Text
|
||
stand wie ein vergessenes Zeichen. Gemessen: 106 px je Zeile, fuenfmal
|
||
untereinander, auf einem 390 px breiten Bildschirm.
|
||
|
||
Richtig ist: Der Pfeil bekommt seine eigene Spalte ganz rechts und
|
||
ueberspannt BEIDE Zeilen. Dann steht er dort, wo die Hand ihn sucht,
|
||
und die Zeile ist zwei Zeilen hoch statt drei. */
|
||
@media (max-width: 620px) {
|
||
.liste-kachel > .gruppe > .gruppe__kopf--klappbar {
|
||
grid-template-columns: max-content auto minmax(0, 1fr) auto;
|
||
row-gap: 3px;
|
||
}
|
||
.liste-kachel .gruppe__name { grid-column: 1; grid-row: 1; }
|
||
.liste-kachel .gruppe__zahl { grid-column: 2; grid-row: 1; }
|
||
.liste-kachel .gruppe__unter { grid-column: 1 / 4; grid-row: 2; }
|
||
.liste-kachel > .gruppe > .gruppe__kopf--klappbar .klapp-pfeil {
|
||
grid-column: 4; grid-row: 1 / span 2; align-self: center;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.liste-kachel > .gruppe::after { transition: none; }
|
||
}
|
||
@media (forced-colors: active) {
|
||
.liste-kachel > .gruppe::after { background: CanvasText; }
|
||
.gruppe__kopf-zeichen { border: 1px solid CanvasText; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
DER CODE-KASTEN, VERVOLLSTÄNDIGT (19.09.2026)
|
||
|
||
Er sagte „jetzt weitergeben" und gab die Adresse nicht mit, ohne die
|
||
ein Code nutzlos ist. Und er verschwieg, dass sich ein verlorener
|
||
Code jederzeit neu vergeben lässt – wer das nicht weiß, glaubt, er
|
||
habe einen Menschen angelegt, der nie hereinkommt.
|
||
===================================================================== */
|
||
.code-kasten__zeile {
|
||
margin: 10px 0 0;
|
||
display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
|
||
}
|
||
.code-kasten__was {
|
||
font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
|
||
color: var(--text-still);
|
||
}
|
||
.code-kasten__adresse {
|
||
/* 44 px Tippziel: Auf dem Handy führt dieser Link zur Anmeldeseite,
|
||
die man der anderen Person zeigen will. */
|
||
display: inline-flex; align-items: center; min-height: 44px;
|
||
font-size: .95rem; font-weight: 600;
|
||
color: var(--text); text-decoration: underline;
|
||
text-underline-offset: 3px;
|
||
word-break: break-all;
|
||
}
|
||
.code-kasten__adresse:hover { color: var(--text-hell, #ffffff); }
|
||
|
||
/* Der Rettungsweg. Ruhig gesetzt – er ist eine Beruhigung, keine
|
||
Warnung, und darf den Satz darüber nicht überstrahlen. */
|
||
.code-kasten__rettung {
|
||
margin: 10px 0 0; max-width: 60ch;
|
||
padding-left: 11px;
|
||
border-left: 2px solid var(--rand);
|
||
font-size: .84rem; line-height: 1.6; color: var(--text-still);
|
||
}
|
||
.code-kasten__rettung strong { color: var(--text-leise); font-weight: 640; }
|
||
|
||
/* Drei Knöpfe statt zwei: Auf schmalen Bildschirmen untereinander,
|
||
damit keiner auf 50 px gequetscht wird. */
|
||
@media (max-width: 460px) {
|
||
.code-kasten .neu__knoepfe { flex-direction: column; align-items: stretch; }
|
||
}
|
||
|
||
|
||
/* =====================================================================
|
||
EINE ZEILE, DIE MAN LESEN KANN (23.09.2026)
|
||
=====================================================================
|
||
|
||
Filipe: "ich will dass das alles viel anders und krasser und geiler
|
||
gestaltet ist ... viel profissioneller."
|
||
|
||
Auf seinem Bildschirmfoto lief die Beschreibung der linken Hand
|
||
ueber die ganze Breite: rund 150 Zeichen in einer Zeile. Der
|
||
Augensprung ans naechste Zeilenende ist dann so weit, dass man die
|
||
Zeile verliert -- Setzer rechnen seit Jahrhunderten mit 60 bis 80.
|
||
|
||
Es wird nichts gekuerzt. Der Text bleibt vollstaendig, er bricht
|
||
nur frueher um. "ch" als Einheit ist dabei die richtige Angabe und
|
||
keine Pixelzahl: Sie misst in ZEICHEN und stimmt darum auch, wenn
|
||
die Schrift groesser gestellt wird.
|
||
|
||
Nur im Kopf der Rollen-Abschnitte, nicht ueberall: In den
|
||
Personenkacheln darunter steht dieselbe Klasse fuer kurze Angaben
|
||
("letzte Anmeldung ..."), und die brauchen keine Grenze. */
|
||
.gruppe__kopf .gruppe__unter {
|
||
max-width: 78ch;
|
||
line-height: 1.5;
|
||
}
|