DogFatherGitandClaude Opus 5
2bea133feb
Filipe: "ich will dass das alles viel anders und krasser und geiler
gestaltet ist bitte ... viel profissioneller und moderner."
--- DIE PERSONENSEITE ---
Auf seinem Bildschirmfoto stand woertlich, was in der Datenbank steht:
"treff_freigegeben", "video_eingelesen", "einstellung_geaendert". Das
sind Spaltenwerte, keine Saetze fuer Menschen. Daneben die rohe
IP-Adresse, quer ueber ein Viertel der Zeile.
KEINE TABELLE MIT 77 EINTRAEGEN. So viele Aktionen gibt es; eine
Liste davon waere am Tag der naechsten unvollstaendig, und niemand
merkte es -- dann stuende einfach wieder der Rohname da. Dieselbe
Falle wie jede abgeschriebene Liste in diesem Haus.
Stattdessen eine REGEL: Unterstriche werden Leerzeichen, der erste
Buchstabe gross. Das ergibt fuer jede Aktion einen lesbaren Ausdruck,
auch fuer die, die es noch nicht gibt. Nachgeprueft an allen echten
Namen:
treff_freigegeben -> Treff freigegeben
einstellung_geaendert -> Einstellung geändert
chat_zurueckgenommen -> Chat zurückgenommen
vorlage_uebernommen -> Vorlage übernommen
Die Umlaute sind der zweite Teil: In der Datenbank stehen sie als
ae/oe/ue. Blind zurueckzusetzen waere falsch ("neue" wuerde "neü"),
deshalb nur in Wortteilen, die sicher sind -- gemessen an den 77
echten Namen, nicht geraten.
Der Rohname bleibt als Titel an der Zeile: Wer im Server danach sucht,
braucht ihn genau so, wie er in der Spalte steht.
DIE IP TRITT ZURUECK, verschwindet aber nicht: feste schmale Spalte,
leiser Ton. Sie beantwortet eine Frage, die man selten stellt.
UND DIE BESCHREIBUNGEN BRECHEN UM. Die der linken Hand lief ueber 150
Zeichen in einer Zeile; der Augensprung ans naechste Zeilenende ist
dann so weit, dass man die Zeile verliert. Setzer rechnen seit
Jahrhunderten mit 60 bis 80. Gekuerzt wird nichts -- "78ch" misst in
ZEICHEN und stimmt darum auch, wenn die Schrift groesser gestellt wird.
--- UND DIE ZWEI ALTLASTEN, BEIDE GESTERN GEMELDET ---
pruef-chatkachel suchte dreizehn Toene als dreizehn Knoepfe. Das
stimmte, bis die Kachelfarbe ein FARBKREIS wurde (7a674963): Seither
liegen die meisten auf einem Schieberegler und werden durch Drehen
gewaehlt. Sie meldete seither "mit allen 13 Toenen (2)" -- nichts war
kaputt, sie stellte eine Frage, die es nicht mehr gibt. Jetzt fragt
sie, was zaehlt: Ist der Kreis da, ist er bedienbar, sagt er welche
Farbe eingestellt ist, und stehen die uebrigen daneben. 36 Pruefungen,
alles in Ordnung.
pruef-galerie mass "#liste". Das war richtig, bis die Highlights am
20.09. in Kanalspalten umzogen -- seither nimmt bereich.js dem
Listenkasten sein data-galerie ausdruecklich wieder weg und setzt es
an die einzelne Spalte. Die Pruefung mass also eine leere Huelle.
Dazu erwartete sie "mindestens zwei Spalten", und das ist in einer
schmalen Kanalspalte schlicht falsch: Dort gehoert EINE Kachel je
Reihe. Jetzt sucht sie das Raster ueber das BILD (nicht ueber einen
Kastennamen -- der naechste Umbau darf umbenennen) und fragt nach der
KACHELBREITE: "1 Spalte à 219 px in einem 243 px breiten Kasten".
Eine Galerie, die sich in vier Spalten à 90 px quetscht, waere der
Fehler -- nicht eine Spalte in einem schmalen Kasten.
Beide waren monatelang rot, ohne dass etwas kaputt war. Eine Warnung,
die immer kommt, liest irgendwann niemand mehr -- und dann faellt die
echte daneben auch nicht mehr auf.
Gemessen: pruef-chatkachel 36, pruef-galerie, pruef-css-klassen,
pruef-deutsche-texte -- alle ohne Befund.
Co-Authored-By: Claude Opus 5 <[email protected]>
833 lines
37 KiB
CSS
833 lines
37 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. */
|
||
|
||
/* DIE SPALTEN NACH IHREM GEWICHT (23.09.2026).
|
||
|
||
Vorher: 128px Zeit, 190px Aktion, Rest fuer das Was, und die
|
||
IP-Adresse ganz rechts mit "auto" -- also so breit, wie sie will.
|
||
Auf Filipes Bildschirmfoto nahm sie ein Viertel der Zeile, und was
|
||
dort stand ("79.252.248.142") beantwortet eine Frage, die man
|
||
selten stellt.
|
||
|
||
Die Aktion braucht seit heute mehr Platz, weil sie ein Satz ist und
|
||
kein Spaltenwert ("Einstellung geändert" statt
|
||
"einstellung_geaendert"). Die IP bekommt eine feste, schmale Spalte
|
||
und tritt farblich zurueck -- sie steht weiter da, aber sie draengt
|
||
sich nicht mehr auf. */
|
||
.protokoll-zeile {
|
||
display: grid; gap: 10px;
|
||
grid-template-columns: 124px 210px 1fr 132px;
|
||
padding: 7px 10px;
|
||
font-size: .8rem; color: var(--text-leise);
|
||
border-bottom: 1px solid rgba(150, 186, 220, .08);
|
||
}
|
||
.protokoll-zeile:first-child { border-top: 1px solid rgba(150, 186, 220, .08); }
|
||
.protokoll-zeit { color: var(--text-still); font-variant-numeric: tabular-nums; }
|
||
.protokoll-ip {
|
||
color: color-mix(in srgb, var(--text-still) 70%, transparent);
|
||
font-variant-numeric: tabular-nums; font-size: .74rem;
|
||
text-align: right; align-self: center;
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
/* Das WAS ist die Hauptsache der Zeile -- es sagt, was passiert ist.
|
||
Vorher stand dort ein Spaltenwert und sah aus wie alles andere. */
|
||
.protokoll-was { color: var(--text); }
|
||
|
||
@media (max-width: 760px) {
|
||
.person { grid-template-columns: 1fr; }
|
||
.person__knoepfe { justify-content: flex-start; margin-top: 10px; }
|
||
.protokoll-zeile { grid-template-columns: 1fr; gap: 2px; padding: 10px; }
|
||
/* Am Handy steht die IP unter dem Rest statt daneben -- rechts
|
||
ausgerichtet waere sie dort eine einsame Zahl am Rand. */
|
||
.protokoll-ip { text-align: left; }
|
||
}
|
||
|
||
|
||
/* ---------- Zuständigkeit ------------------------------------------------
|
||
Wer betreut welchen Creator. Bewusst direkt in der Personenzeile und
|
||
nicht auf einer eigenen Seite: Es ist eine Eigenschaft der Person, kein
|
||
eigener Vorgang. */
|
||
.betreuung { display: flex; align-items: center; gap: 9px; margin-top: 9px; flex-wrap: wrap; }
|
||
.betreuung__schild {
|
||
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; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
DER CODE-KASTEN, VERVOLLSTÄNDIGT (19.09.2026)
|
||
|
||
Er sagte „jetzt weitergeben" und gab die Adresse nicht mit, ohne die
|
||
ein Code nutzlos ist. Und er verschwieg, dass sich ein verlorener
|
||
Code jederzeit neu vergeben lässt – wer das nicht weiß, glaubt, er
|
||
habe einen Menschen angelegt, der nie hereinkommt.
|
||
===================================================================== */
|
||
.code-kasten__zeile {
|
||
margin: 10px 0 0;
|
||
display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
|
||
}
|
||
.code-kasten__was {
|
||
font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
|
||
color: var(--text-still);
|
||
}
|
||
.code-kasten__adresse {
|
||
/* 44 px Tippziel: Auf dem Handy führt dieser Link zur Anmeldeseite,
|
||
die man der anderen Person zeigen will. */
|
||
display: inline-flex; align-items: center; min-height: 44px;
|
||
font-size: .95rem; font-weight: 600;
|
||
color: var(--text); text-decoration: underline;
|
||
text-underline-offset: 3px;
|
||
word-break: break-all;
|
||
}
|
||
.code-kasten__adresse:hover { color: var(--text-hell, #ffffff); }
|
||
|
||
/* Der Rettungsweg. Ruhig gesetzt – er ist eine Beruhigung, keine
|
||
Warnung, und darf den Satz darüber nicht überstrahlen. */
|
||
.code-kasten__rettung {
|
||
margin: 10px 0 0; max-width: 60ch;
|
||
padding-left: 11px;
|
||
border-left: 2px solid var(--rand);
|
||
font-size: .84rem; line-height: 1.6; color: var(--text-still);
|
||
}
|
||
.code-kasten__rettung strong { color: var(--text-leise); font-weight: 640; }
|
||
|
||
/* Drei Knöpfe statt zwei: Auf schmalen Bildschirmen untereinander,
|
||
damit keiner auf 50 px gequetscht wird. */
|
||
@media (max-width: 460px) {
|
||
.code-kasten .neu__knoepfe { flex-direction: column; align-items: stretch; }
|
||
}
|
||
|
||
|
||
/* =====================================================================
|
||
EINE ZEILE, DIE MAN LESEN KANN (23.09.2026)
|
||
=====================================================================
|
||
|
||
Filipe: "ich will dass das alles viel anders und krasser und geiler
|
||
gestaltet ist ... viel profissioneller."
|
||
|
||
Auf seinem Bildschirmfoto lief die Beschreibung der linken Hand
|
||
ueber die ganze Breite: rund 150 Zeichen in einer Zeile. Der
|
||
Augensprung ans naechste Zeilenende ist dann so weit, dass man die
|
||
Zeile verliert -- Setzer rechnen seit Jahrhunderten mit 60 bis 80.
|
||
|
||
Es wird nichts gekuerzt. Der Text bleibt vollstaendig, er bricht
|
||
nur frueher um. "ch" als Einheit ist dabei die richtige Angabe und
|
||
keine Pixelzahl: Sie misst in ZEICHEN und stimmt darum auch, wenn
|
||
die Schrift groesser gestellt wird.
|
||
|
||
Nur im Kopf der Rollen-Abschnitte, nicht ueberall: In den
|
||
Personenkacheln darunter steht dieselbe Klasse fuer kurze Angaben
|
||
("letzte Anmeldung ..."), und die brauchen keine Grenze. */
|
||
.gruppe__kopf .gruppe__unter {
|
||
max-width: 78ch;
|
||
line-height: 1.5;
|
||
}
|