/* huelle-menue.css: was Welle 3 (23.09.2026) am Menü und im Admin-Bereich
   dazubringt: die Work-Seite, die Projekt-Wahl im Kopf, die Reiter des
   Admin-Bereichs, die Tabelle „Rechte" und den Brain-Wechsel des Betreibers.
   Eine eigene Datei, weil huelle.css und app.css am Zeilenmaß stehen. */

/* Work ist dieselbe Seite wie Meetings, nur mit der anderen Art darin. */
body[data-ansicht="work"] #ansichtMeetings { display: block; }

/* --- Projekt-Wahl ----------------------------------------------------------- */

/* Viele Projekte rollen in der Liste, statt sie über den Rand zu schieben. */
#projektListe { max-height: 60vh; overflow-y: auto; }
/* „Neues Projekt" ist die seltenste Handlung der Liste: unten und abgesetzt. */
#projektListe button.projektNeu { margin-top: 4px; border-top: 1px solid var(--linie);
  border-radius: 0 0 8px 8px; color: var(--dim); }
#projektListe button.projektNeu:hover, #projektListe button.projektNeu:focus-visible { color: var(--text); }

/* --- Admin-Bereich: Reiter, Rechte, Brain ---------------------------------- */

.adminReiter { margin: 2px 0 6px; }

/* Die Tabelle wird bei vielen Projekten breiter als die Fläche: Sie rollt in
   ihrem Rahmen, die Seite nicht. */
.rechteRahmen { overflow-x: auto; max-width: 100%; }
.rechteTabelle td.rechteZelle { text-align: center; }
.rechteTabelle .uLeiste { vertical-align: middle; }
.rechteTabelle th .rechteZu { display: inline-grid; place-items: center; margin-left: 6px;
  color: var(--goldText); vertical-align: middle; }
.rechteTabelle .rechteZu .ikon { width: 13px; height: 13px; }
/* „offen" in einem geschlossenen Projekt: sieht es nicht. Blass, nicht rot:
   Es ist die Folge einer Zulassung anderer, keine eigene Sperre. */
.rechteTabelle td.rechteVerdeckt .uLeiste { opacity: .5; }
.rechteImmer { display: inline-grid; place-items: center; color: var(--dim); }
.rechteImmer .ikon { width: 15px; height: 15px; }

.brainListe { display: flex; flex-direction: column; gap: 2px; max-width: 460px; }
.brainKnopf { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px;
  padding: 8px 10px; background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
.brainKnopf .ikon { width: 16px; height: 16px; color: var(--dim); }
.brainKnopf:hover, .brainKnopf:focus-visible { background: var(--zeile); outline: none; }
.brainKnopf.aktiv { color: var(--goldText); font-weight: 600; border-color: var(--gold); }
.brainKnopf.aktiv .ikon { color: var(--goldText); }
.brainKnopf.brainNeu { max-width: 460px; margin-top: 10px; color: var(--dim); }

/* --- T1a (Welle 4, 23.09.2026, E-5): Zähler, Tests dauerhaft, Reiter anpassen */

/* Die Zahl am Reiter ist dieselbe `.navZahl` wie bei Meetings und Work
   (huelle.css) und braucht hier keine eigene Regel.
   „Reiter anpassen" ist die seltenste Handlung unter den Reitern: leiser als sie. */
.navKnopf.navReiterAnpassen { font-size: 12.5px; min-height: 28px; opacity: .8; }
.navKnopf.navReiterAnpassen .ikon { width: 14px; height: 14px; }

/* Die drei Zahlen eines Testlaufs, Farbe UND Wort (Haus-Regel Form und Farbe). */
.prommTestFeld[data-stand="nichts"] { border-color: var(--randStark); }
.prommTestFeld[data-stand="nichts"] .prommTestMarke { color: var(--dim); }
.prommTestZahlen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 0 0 10px; font-size: 12.5px; }
.prommTestZahl { padding: 1px 8px; border-radius: 9px; border: 1px solid var(--linie); }
.prommTestZahl.gruen { color: var(--gruenText, var(--gruen)); border-color: var(--gruen); }
.prommTestZahl.rot { color: var(--warnText, var(--warn)); border-color: var(--warn); }
.prommTestZahl.offen { color: var(--dim); }
.prommTestZahlHerkunft { color: var(--dim); font-size: 11.5px; }

/* Der Dialog „Reiter anpassen". */
#reiterAnpassenModal .pmInhalt { width: min(720px, 100%); }
.raHinweis { color: var(--dim); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.raListe { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
/* Feste Spalten, in jeder Zeile dieselben: Haken, Symbol, Aufschrift, Art, hoch, runter. Mit `auto`
   endete das Feld der Aufschrift je Zeile woanders, weil die Art verschieden lang ist. */
.raZeile { display: grid; align-items: center; gap: 8px; padding: 5px 8px;
  grid-template-columns: 18px 34px minmax(0, 1fr) 104px 30px 30px;
  border: 1px solid var(--linie); border-radius: var(--rundKlein); }
.raListe.mitNeu .raZeile { grid-template-columns: 18px 34px minmax(0, 1fr) 104px 30px 30px 30px; }
.raZeile .raSichtbar { margin: 0; justify-self: center; }
.raSymbolFeld { position: relative; display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--bg); border: 1px solid var(--linie); border-radius: 7px; color: var(--text); }
.raSymbolFeld:hover, .raSymbolFeld:focus-within { border-color: var(--blau); }
.raZeile .raSymbolFeld select, .raSymbolFeld select { position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; opacity: 0; cursor: pointer; }
.raSymbolFeld select:disabled { cursor: default; }
.raZeile.fest .raSymbolFeld { border-color: var(--linie); opacity: .6; }
/* Die Zeile für einen neuen Reiter: dieselbe Flucht wie die Liste, aber keine Zeile der Liste. */
.raNeuZeile { display: grid; align-items: center; gap: 8px; padding: 5px 8px; margin-bottom: 8px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  border: 1px solid var(--linie); border-radius: var(--rundKlein); }
.raNeuZeile .raDazu { margin: 0; height: 34px; min-height: 0; padding: 0 14px; font-size: 13px; line-height: 1; }
.raPlatz { width: 30px; }
.raZeile.aus { opacity: .55; }
.raVorschau { display: grid; place-items: center; color: inherit; pointer-events: none; }
.raVorschau .ikon { width: 17px; height: 17px; }
.raZeile select, .raZeile input.raTitelFeld, .raNeuZeile input.raTitelFeld { min-width: 0; background: var(--bg);
  border: 1px solid var(--linie); border-radius: 7px; color: var(--text); padding: 6px 8px;
  font: inherit; font-size: 13px; }
.raZeile input.raTitelFeld:focus, .raNeuZeile input.raTitelFeld:focus, .raZeile select:focus { outline: none; border-color: var(--blau); }
.raArt { color: var(--dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raFestMarke { display: inline-flex; vertical-align: -2px; margin-right: 4px; }
.raFestMarke .ikon { width: 12px; height: 12px; }
.raKnopf { display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  background: transparent; border: 1px solid var(--linie); border-radius: 7px;
  color: var(--dim); cursor: pointer; }
.raKnopf:hover:not(:disabled), .raKnopf:focus-visible { color: var(--text); border-color: var(--blau); outline: none; }
.raKnopf:disabled { opacity: .35; cursor: default; }
.raKnopf .ikon { width: 14px; height: 14px; }
.raHoch .ikon { transform: rotate(-90deg); }
.raRunter .ikon { transform: rotate(90deg); }
.raNeuKopf { font: 600 14px var(--schrift); color: var(--kopf); margin: 4px 0 8px; }
.raNeuRaster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.raFuss { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
@media (max-width: 560px) {
  .raZeile { display: flex; flex-wrap: wrap; }
  .raZeile input.raTitelFeld { flex: 1 1 140px; }
  .raArt { display: none; }
  .raNeuRaster { grid-template-columns: minmax(0, 1fr); }
}