DogFatherGitandClaude Opus 5
d5570ee501
Filipe, mit Bildschirmfoto: "mach die ganze kachel perfekter detailliert schoenes. der hintergrund soll auch bissl dunkler sein von der kachel." --- 29 PIXEL NICHTS, FUENFMAL UNTEREINANDER --- Auf dem Bild stand unter jeder zugeklappten Rolle ein leerer Streifen. Nachgemessen: Abschnitt 74 px, Zeile darin 45 -- 29 px Leerraum. Sie kamen aus ZWEI Quellen, und nur eine stand in personen.css: padding-bottom: 14px am Abschnitt, plus margin-bottom: 14px an .gruppe__kopf aus start.css Zeile 765. Letzteres ist fuer die freistehenden Abschnitte der STARTSEITE geschrieben, wo unter der Ueberschrift wirklich gleich Karten kommen. Zugeklappt kommt hier aber nichts, und dann ist der Abstand Abstand zu nichts. Beide haengen jetzt am Zustand: offen -> Luft, zu -> keine. Die Kachel ist damit 383 px hoch statt 293 -- pardon, 293 statt 383. --- DIE ROLLEN HABEN FARBEN, NUR HIER NICHT --- Fuenf Zeilen sahen fuenfmal gleich aus. Das Haus fuehrt fuer jede Rolle eine Farbe (Anmeldeseite, Marken, Bereiche); ausgerechnet in der Liste, in der es NUR um Rollen geht, hoerten sie auf. Jeder Abschnitt traegt jetzt `data-rolle`, setzt daraus EIN --r, und alles Weitere liest davon: der Streifen links, die Anzahl, die Namenszeichen, der Pfeil, das Licht beim Aufklappen. Und `--ton`, die Variable, aus der module.css das Kantenlicht jeder Kachel zieht -- die Personenkarten in einem Manager-Abschnitt sind damit lila statt orange. Eine Zeile, und der Abschnitt wird ein Stueck. NEU: WER DRINSTEHT, OHNE AUFZUKLAPPEN. Vier Namenszeichen, ab dem fuenften "+n". Zugeklappt sagte die Zeile bisher nur, WIE VIELE es sind; wer wissen wollte, ob Patrick dabei ist, musste aufklappen. --- DER STREIFEN, DEN getComputedStyle NICHT SIEHT --- Erster Anlauf: 3 px breit, left: 0, volle Hoehe. Im Bild war nichts. getComputedStyle meldete trotzdem "3 px, sichtbar, Deckkraft 0,55". Der Grund steht in module.css: Jede Kachel traegt auf ::before ein Kantenlicht mit inset: 0 und z-index: 2 -- eine 1,6 px breite Linie UEBER allen Kindern. Vom Streifen blieben 1,4 px, und die lagen genau in der Kante. Er sitzt jetzt bei 3 px, gerundet, mit Luft oben und unten. Die Pruefung misst ihn deshalb an echten BILDPUNKTEN, und zwar dieselbe Stelle zweimal: einmal wie sie ist, einmal mit ausgeschaltetem Streifen. Was sich aendert, IST der Streifen -- und was sich nicht aendert, ist die Gegenprobe, ohne dass man sie erfinden muss. --- UND EINE PRUEFUNG, DIE GRUEN GELOGEN HAT --- Die Kontrastmessung las die Textfarbe mit `getComputedStyle(e).color.match(/\d+/g)`. Das geht, solange dort "rgb(148, 165, 187)" steht. Alle neuen Stellen kommen aus color-mix(), und Chromium antwortet darauf mit "color(srgb 0.36 0.51 0.42)". Aus dem Muster fielen "0", "510588", "0" -- die Pruefung meldete 775929299:1 und war gruen. Die Farbe wird jetzt in ein Canvas GEMALT und als Punkt zurueckgelesen; das versteht jede Schreibweise, die der Browser versteht. Davor steht eine Gegenprobe mit zwei bekannten Farben: Stimmt das Messgeraet nicht, ist alles darunter wertlos. Echte Werte jetzt: 7,95 bis 15,71:1. --- AM HANDY STAND DER PFEIL IN EINER DRITTEN ZEILE --- Der Zusatztext bekommt dort eine eigene Rasterzeile -- richtig, er passt sonst nicht. Der Pfeil bekam dadurch eine dritte und stand mittig unter dem Text wie ein vergessenes Zeichen: 106 px je Rolle. Er hat jetzt eine eigene Spalte und ueberspannt beide Zeilen: 75 px, und er steht da, wo die Hand ihn sucht. --- Pruefung --- server/pruef-personen-kachel.mjs, neu, 43 Pruefungen, alle gruen. Ausserdem gruen: pruef-personen-liste, pruef-css-klassen (die hat die Namenszeichen bei 10,56 px erwischt, bevor sie jemand lesen musste). Angesehen bei 1440 px und 390 px, zu und offen. Co-Authored-By: Claude Opus 5 <[email protected]>
750 lines
34 KiB
CSS
750 lines
34 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.
|
||
===================================================================== */
|
||
/* 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; }
|
||
}
|