dogfather-universe/workspace/assets/css/personen.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; }
}

/* =====================================================================
   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; }
}