DogFatherGitandClaude Opus 5
6676998af8
--- DAS WICHTIGSTE ZUERST: die Verbergungsregel --- Filipe, ausdruecklich und dringlich: "und noch gaaaaaanz wichtig keiner soll vanvan sehen ausser ich, ueberall soll keiner vanvan sehen ausser dogfather." ES GAB DAVON NUR EINE HAELFTE. In der Personenliste wurde der zweite Admin-Zugang fuer Spicy Media ausgeblendet (Wunsch vom 31.08.). Ueberall sonst -- Chat, Kalender, Aufgaben, Dateien, Zentrale -- war er sichtbar. `sichtbarePersonenIds` hat ihn sogar ausdruecklich JEDER Rolle gezeigt, weil sie alle Admins einsammelt. WORAN DIE BEIDEN AUSEINANDERGEHALTEN WERDEN: In der Datenbank tragen beide die Rolle `admin`, es gibt kein unterscheidendes Feld. Der Unterschied, den es wirklich gibt, ist das Alter -- DogFather ist der erste Zugang. Also: der Admin mit der kleinsten Nummer ist DogFather, alle weiteren sind verborgen. Drei Ausnahmen: DogFather sieht alle, ein verborgener Zugang sieht sich selbst, und bei nur einem Admin gibt es nichts zu verbergen. WARUM AN EINER STELLE UND NICHT IN DEN ABFRAGEN: Allein workspace-personen.js hat 23 Abfragen auf `personen`. Eine Regel, die man 23-mal wiederholt, ist 23 Gelegenheiten, sie zu vergessen -- und beim Vergessen faellt niemand auf die Nase, sondern jemand SIEHT etwas. Die Regel sitzt deshalb in `verborgeneIds()` und wird ueber einen MANTEL um die sechs Listenfunktionen gelegt: Diese haben zusammen achtzehn Rueckgabewege; sie einzeln zu flicken waeren achtzehn Gelegenheiten, einen zu uebersehen. Die ungefilterten Fassungen (`...Roh`) werden nicht mehr exportiert -- niemand kann sie versehentlich benutzen. `null` HIESS BISHER "SIEHT ALLES". Sobald es etwas zu verbergen gibt, gilt das nicht mehr: Die Liste wird ausgeschrieben. Das ist strenger, nicht lockerer. NEUE PRUEFUNG server/pruef-verborgen.mjs -- sechs Personen (darunter ein zweiter Admin), fuenf Schnittstellen, jede Rolle einzeln. Sie hat beim ersten Lauf sofort ein Loch gefunden, das ich sonst nicht bemerkt haette: Die ZENTRALE holt sich das Haus selbst und ging an allen Listenfunktionen vorbei -- Spicy Media sah VanVan dort als Segment im Team-Ring. Und beim Korrigieren der Pruefpfade fiel ein zweites auf: `darfEintragen` im Kalender liess die Leitung JEDEN eintragen, bevor ueberhaupt eine Liste befragt wurde. Eine Sichtbarkeitsregel, die nur beim Lesen gilt und nicht beim Schreiben, hat ein Loch in der Mitte. Die Pruefung hat eine Gegenprobe: Ein Manager MUSS DogFather in derselben Liste sehen -- sonst waere "sieht VanVan nicht" auch dann gruen, wenn die Listen leer zurueckkaemen. --- screen1 Punkt 1: Silber mit Babyblau --- "ich will dass diese farbe gemischt wird mit babyblau." #c7dcf4 statt #d8e0ec -- dieselbe Helligkeit, mit Blaurichtung. Nachgerechnet bleibt der Abstand zur naechsten Rolle bei 0,1790, immer noch weiter als das frueher benutzte Babyblau (0,1349). Gemischt ist es ausserdem SICHTBAR: Die Schiene laeuft von Silber nach Babyblau, und der Glanz traegt beide Toene. Eine Mischung, die man nur im Hexwert findet, ist keine. --- screen1 Punkt 2: das Wasserzeichen --- "soll viel groesser sein und nicht so abgecuttet sondern gut zu sehen sein." NACHGEMESSEN war es auf der Dashboard-Kachel zu 50 Prozent abgeschnitten, und zwar auf DREI Seiten: 36 px ueber dem oberen Rand, 44 rechts, 60 unten -- 220 px Zeichen auf einer 152 px hohen Kachel. UND ES GAB ZUM DRITTEN MAL DIESE WOCHE EINE DOPPELREGEL: 3600 Zeilen unter der sorgfaeltig begruendeten Fassung (156 px bei 0,14) stand eine zweite (118 px bei 0,085) mit derselben Spezifitaet. Sie gewann, und die Begruendung oben war wirkungslos. Am 08.09. hatte ich beim Wasserzeichen schon einmal genau so eine Doppelung gefunden -- und diese hier uebersehen. Jetzt eine Fassung, und die Groesse haengt an der KACHELHOEHE: Ein um 8 Grad gedrehtes Quadrat der Seite S braucht S x 1,129 Platz, also `min(132px, 100% - 30px)`. Nachgemessen 100 Prozent sichtbar statt 50, bei 0,14 statt 0,085 -- die sichtbare Flaeche hat sich verdoppelt. --- screen1 Punkt 3: die Personenliste in einer Kachel --- Die fuenf Rollengruppen standen als fuenf lose Abschnitte frei auf dem Hintergrundbild. Es ist aber EINE Liste mit fuenf Abschnitten. Jetzt eine Sammelkachel aus der Modulliste, mit dunklen Fugen statt Luft -- und dunkler als die Karten darin, wie eine Vitrine. --- screen1 Punkt 4: "Womit meldest du dich an?" --- Der einzige Satz auf der Anmeldeseite, der eine FRAGE stellt, stand als graue Feldbeschriftung da. Jetzt gebuerstetes Metall, ein Anschlag aus drei Kerben in Rot und Babyblau und eine auslaufende Linie -- dieselbe Sprache wie die Typenschilder im Workspace. Rueckfall vollwertig: Faellt `background-clip: text` aus, steht dort heller Text. Geprueft: pruef-verborgen (neu), pruef-rollen, pruef-start-ansicht, pruef-css-klassen, pruef-workspace-seiten, pruef-buehne, pruef-handy, pruef-chat, pruef-kalender -- alle in Ordnung. Co-Authored-By: Claude Opus 5 <[email protected]>
465 lines
20 KiB
CSS
465 lines
20 KiB
CSS
/* ===================================================================
|
||
Personenverwaltung.
|
||
=================================================================== */
|
||
|
||
.person {
|
||
display: grid; gap: 4px 16px; align-items: center;
|
||
grid-template-columns: 1fr auto;
|
||
padding: 14px 16px; margin-bottom: 9px;
|
||
background: var(--flaeche);
|
||
border: 1px solid var(--rand);
|
||
border-radius: var(--radius-klein);
|
||
}
|
||
.person[data-aktiv="nein"] { opacity: .58; }
|
||
|
||
.person__name { font-weight: 600; font-size: .98rem; }
|
||
|
||
.person__zeile {
|
||
display: flex; flex-wrap: wrap; gap: 8px;
|
||
margin-top: 2px; font-size: .79rem; color: var(--text-still);
|
||
}
|
||
|
||
.marke-rolle {
|
||
padding: 1px 9px; border-radius: 999px;
|
||
font-size: .7rem; 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); }
|
||
|
||
.person__knoepfe { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
|
||
|
||
/* ---------- Code-Anzeige ---------------------------------------------- */
|
||
|
||
.code-kasten {
|
||
margin: 0 0 26px; padding: 20px 22px;
|
||
background: linear-gradient(100deg, rgba(63, 189, 245, .12), rgba(138, 118, 255, .09));
|
||
border: 1px solid rgba(63, 189, 245, .5);
|
||
border-radius: var(--radius);
|
||
}
|
||
.code-kasten__schild {
|
||
margin: 0 0 8px; font-size: .78rem; font-weight: 600;
|
||
letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise);
|
||
}
|
||
.code-kasten__code {
|
||
margin: 0 0 12px;
|
||
font-family: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
|
||
font-size: clamp(1.3rem, 3.4vw, 1.9rem); font-weight: 700;
|
||
letter-spacing: .12em; color: #eaf4fd;
|
||
user-select: all; /* ein Klick markiert den ganzen Code */
|
||
word-break: break-all;
|
||
}
|
||
.code-kasten__hinweis { margin: 0 0 14px; font-size: .85rem; color: var(--text-leise); }
|
||
|
||
/* ---------- 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. */
|
||
|
||
.protokoll-zeile {
|
||
display: grid; gap: 10px;
|
||
grid-template-columns: 128px 190px 1fr auto;
|
||
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: var(--text-still); font-variant-numeric: tabular-nums; }
|
||
|
||
@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; }
|
||
}
|
||
|
||
|
||
/* ---------- 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 {
|
||
font-size: .7rem; 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. */
|
||
.gruppe .person:last-child { margin-bottom: 0; }
|
||
|
||
/* 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; }
|
||
body[data-nur-lesen="ja"] .person__knoepfe,
|
||
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.
|
||
===================================================================== */
|
||
.liste-kachel {
|
||
padding: 4px 0 0;
|
||
margin-bottom: 24px;
|
||
background:
|
||
var(--raster),
|
||
linear-gradient(178deg, rgba(9, 13, 20, .96), rgba(4, 7, 12, .98));
|
||
}
|
||
/* 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 14px;
|
||
border-bottom: 1px solid #05070c;
|
||
box-shadow: 0 1px 0 rgba(255, 255, 255, .035);
|
||
}
|
||
.liste-kachel > .gruppe:last-child { border-bottom: 0; box-shadow: none; }
|
||
/* Der Kopf jeder Gruppe füllt die Breite der Kachel -- so ist die
|
||
ganze Zeile das Ziel, nicht nur der Text. */
|
||
.liste-kachel > .gruppe > .gruppe__kopf {
|
||
width: calc(100% + 32px);
|
||
margin-left: -16px;
|
||
padding: 13px 16px 11px;
|
||
}
|
||
/* Ein Abschnitt, der offen ist, hebt sich leicht ab -- so sieht man,
|
||
welcher gerade Platz einnimmt, ohne eine zweite Farbe. */
|
||
.liste-kachel > .gruppe:has(> .gruppe__kopf[aria-expanded="true"]) {
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, .028), transparent 60%);
|
||
}
|