/* ===================================================================
   Personenverwaltung.
   =================================================================== */

.person {
  display: grid; gap: 4px 16px; align-items: center;
  grid-template-columns: 1fr auto;
  padding: 14px 16px; margin-bottom: 9px;
  background: rgba(255, 255, 255, .03);
  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;
}
.marke-rolle[data-rolle="admin"]   { background: rgba(63, 189, 245, .16); color: #7fd2fb; }
.marke-rolle[data-rolle="creator"] { background: rgba(138, 118, 255, .16); color: #b3a6ff; }
.marke-rolle[data-rolle="scout"]   { background: rgba(77, 171, 119, .16); color: #79d1a2; }

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

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

.rollenwahl-block { grid-column: 1 / -1; }
.rollenwahl {
  display: grid; gap: 8px; margin-top: 2px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 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); }
.rollenwahl__knopf:focus-visible {
  outline: none; 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: #e8c07d; }
.rollenwahl__knopf[data-rolle="manager"] { --r: #8a76ff; }
.rollenwahl__knopf[data-rolle="scout"]   { --r: #5fc99a; }
.rollenwahl__knopf[data-rolle="creator"] { --r: #3fbdf5; }

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

.rollenwahl__symbol {
  width: 22px; height: 22px; flex: none; margin-top: 1px;
  fill: none; stroke: var(--r); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.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; }