DogFatherGitandClaude Opus 5
e3aeeb01cd
Filipe: "ich will dass die rolle spicy und dogfather, auch die rollen
wechseln koennen wenn die personen schon drin sind. von alle
kategorien, creator, scouts, manager spicy. dogfather soll man nicht
auswaehlen koennen. das ist die einzige die man nicht auswaehlen kann
bitte."
ZWEI AENDERUNGEN, BEIDE IN EINER LISTE (ANLEGBAR):
admin: alles AUSSER der eigenen Rolle
spicy: spicy, manager, scout, creator (vorher ohne spicy)
Weil die Oberflaeche ihre Knoepfe aus derselben Auskunft baut
(`darf_anlegen` in /api/ich), verschwindet DogFather damit von selbst
aus JEDER Auswahl -- beim Anlegen wie beim Wechseln, bei Spicy Media
wie bei DogFather. Eine Liste, zwei Formulare, kein Nachziehen.
WAS DAS BEDEUTET, damit es niemand spaeter sucht: Es laesst sich kein
zweiter DogFather-Zugang mehr anlegen und niemand mehr zu einem
befoerdern. Der bestehende ist durch Sicherung 3 geschuetzt (nie den
letzten herabstufen) und kann nicht versehentlich verschwinden.
Zurueckdrehen laesst sich das nur in ANLEGBAR.
DIE TUER: /verwaltung haengt an nurAdmin, und dort steht jetzt eine
DRITTE enge Ausnahme -- PUT auf genau /personen/<Ziffern>/rolle, fuer
genau die Rollen aus darfRollenWechseln(). Gleiche Bauweise wie die
beiden davor (Liste fuer Spicy Media, Liste fuer die rechte Hand). Was
NICHT mitgeht: Codes, Sperren, Loeschen, Zuteilung, Protokoll.
EINE NEUE SICHERUNG, weil sich die Tuer geoeffnet hat: An einer
DogFather-Zeile aendert nur DogFather. Die bestehenden Pruefungen sehen
auf die ZIEL-Rolle ("darfst du 'manager' vergeben?") -- dass die
BETROFFENE Person DogFather ist, kam darin bis heute nicht vor.
Sicherung 3 haette es heute zufaellig abgefangen, weil es genau einen
gibt; eine Sperre, die nur wegen einer Zahl im Bestand haelt, ist
keine.
DIE OBERFLAECHE: "Rolle aendern" und "Loeschen" hingen an EINER Zeile
(`ich.rolle === 'admin'`). Sie gehoeren nicht zusammen -- Loeschen
bleibt bei DogFather. Und die CSS-Regel, die fuer Spicy Media die ganze
Knopfreihe ausblendete, ist weg: Welche Knoepfe es gibt, entscheidet
jetzt personen.js, und was nicht entsteht, muss man nicht verstecken.
pruef-spicy 62 -> 83. Gemessen wird jede der vier Kategorien EINZELN
(waere nur eine offen, saehe "geht" genauso aus), dazu: admin weder von
Spicy Media noch von DogFather vergebbar, an DogFathers Zeile aendert
sie nichts (und er ist danach nachweislich noch admin), ein Manager
kommt an den Weg nicht, loeschen bleibt zu -- und im Browser, dass der
KNOPF da ist, nicht nur das Recht. Genau daran war heute frueh im Chat
eine Stunde draufgegangen.
Dabei zwei eigene Messfehler gefunden: Die Knoepfe entstehen erst in
einer AUFGEKLAPPTEN Kategorie (vorher zu frueh gemessen), und /api/ich
wird jetzt als Vorbedingung geprueft.
DREI PRUEFUNGEN GEDREHT, KEINE GELOESCHT:
- pruef-personen-formular: 7 Karten, `admin` fehlt (eigene Aussage).
Die Zeichenpruefung verglich die rechte Hand gegen die Admin-KARTE --
die es nicht mehr gibt; sie lief gegen `undefined`. Ersatz ist das
Zeichen selbst, und der Kommentar sagt, dass das schwaecher ist.
- pruef-haus-trennung: Der zweite DogFather entsteht jetzt im Bestand
statt ueber die Schnittstelle, und DASS die Schnittstelle ihn
ablehnt, ist der erste Prueffall geworden. Sonst waere "nie den
letzten DogFather" ab heute ungeprueft -- weil ihre Voraussetzung
schwerer herzustellen ist.
- pruef-creator-anlegen: aus einer Aussage zwei (die vier sind da UND
admin fehlt).
Gruen: personen-liste, personen-kachel, verborgen, manager-sicht,
creator-anlegen, haus-trennung, personen-formular, spicy, rollen.
Co-Authored-By: Claude Opus 5 <[email protected]>
740 lines
33 KiB
CSS
740 lines
33 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 ----------------------------------------------
|
||
|
||
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. */
|
||
|
||
.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; }
|
||
/* `.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; }
|
||
}
|