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 ---------------------------------------------- */

.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));
}

/* DAS FUNKELN DES MANAGER-STERNS.

   Ein heller Streifen wandert einmal quer ueber den Stern. Bewusst
   langsam (4,5 s) und mit langer Pause: Ein schnelles Blinken waere
   genau die aggressive Optik, die hier nicht sein soll -- und in einer
   Liste mit fuenf Rollen zoege ein zappelndes Zeichen den Blick
   dauerhaft von allem anderen ab.

   Gemacht ueber eine wandernde Maske, nicht ueber die Deckkraft: Ein
   Auf- und Abblenden des ganzen Sterns waere ein Pulsieren, kein
   Glitzern. Glanz ist etwas, das sich BEWEGT. */
.rs-funkel {
  -webkit-mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat;
  mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat;
  animation: rs-glitzer 4.5s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes rs-glitzer {
  0%, 62% { -webkit-mask-position: 145% 0; mask-position: 145% 0; }
  100%    { -webkit-mask-position: -45% 0; mask-position: -45% 0; }
}
/* Hausregel: Wer weniger Bewegung eingestellt hat, bekommt keine.
   Uebrig bleibt ein ruhiger goldener Stern -- nicht ein unsichtbarer. */
@media (prefers-reduced-motion: reduce) {
  .rs-funkel { animation: none; -webkit-mask: none; mask: none; opacity: .25; }
}
/* 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; }