/* ============================================================
   Plenum · Formensprache
   ============================================================
   Eine Ebene über plenum.css. Sie überträgt das Aussehen der
   Anmeldeseite auf die gesamte Anwendung.

   ## Die Bausteine dieser Sprache

   Grund      dunkler Verlauf mit drei farbigen Lichtern,
              darüber ein feines Raster, unten die Welle
   Fläche     Glas: 22px Radius, blauer Rand, Verlauf von
              rgba(17,54,105,.6) nach rgba(8,26,59,.82),
              heller Saum oben, 20px Unschärfe dahinter
   Überzeile  türkis, Versalien, weit gesperrt -- steht über
              jeder Überschrift und sagt, was für eine Art von
              Inhalt folgt
   Hauptknopf dreifarbiger Verlauf Türkis-Blau-Violett mit Pfeil
   Feld       Symbol links, 14px Radius, dunkler Grund,
              türkiser Rand beim Tippen

   ## Warum eine eigene Datei

   plenum.css bleibt unangetastet. Wer diese Datei nicht einbindet,
   bekommt das alte Papier-Design zurück -- ohne dass irgendwo
   etwas zurückgebaut werden müsste.

   ## Kontraste

   Alle Textfarben sind gegen ihren tatsächlichen Grund
   gerechnet, keine unter 4,5:1. Die Werte stehen in
   test/kontrast_test.js und werden dort mitgeprüft.
   ============================================================ */

:root {
  --g-tuerkis:   #67DCFF;
  --g-hell:      #F7FBFF;
  --g-gedaempft: #B8C7DC;
  --g-still:     #93A8C0;
  --g-rand:      rgba(106,180,255,.42);
  --g-rand-fein: rgba(106,180,255,.18);
  --g-glas:      linear-gradient(180deg, rgba(17,54,105,.6), rgba(8,26,59,.82));
  --g-schatten:  0 20px 60px rgba(0,10,30,.32), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ------------------------------------------------------------
   Der Grund
   ------------------------------------------------------------ */
body {
  color: var(--g-hell);
  background:
    radial-gradient(circle at 17% 18%, rgba(47,125,255,.16), transparent 32%),
    radial-gradient(circle at 84% 24%, rgba(45,231,255,.10), transparent 28%),
    radial-gradient(circle at 67% 82%, rgba(124,61,255,.12), transparent 32%),
    linear-gradient(135deg, #021226 0%, #05214b 55%, #03172f 100%);
  background-attachment: fixed;
}

/* Die Welle liegt fest am unteren Rand und scrollt nicht mit. */
body::before {
  content: "";
  position: fixed;
  z-index: 0;
  left: -3%; right: -3%; bottom: -2%;
  height: 42vh;
  background: url("/assets/wave-network.svg") bottom center / 106% auto no-repeat;
  opacity: .5;
  pointer-events: none;
}

/* Das feine Raster -- es nimmt der Fläche die Leere. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 68%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 68%);
}

/* Über das Gitter im Hintergrund heben (body::after, z-index 0).
   Dafür braucht ein Element eine position -- relative ist die
   sparsamste, solange es keine eigene hat.

   .kopf und .pruefung stehen NICHT dabei: Beide sind bereits
   "sticky" mit einem top und einem eigenen z-index. Ein relative
   von hier würde ihre position kippen und das top stehenlassen --
   dann heißt dieselbe Zeile plötzlich "verschiebe mich nach
   unten, ohne dass der Platz mitgeht". Beim Kopf hieß es, dass
   er beim Blättern nicht mehr stehenblieb; bei der Prüfmeldung
   rutschte sie unter die Werkzeugleiste und wurde abgeschnitten.

   test/stapel_test.js hält das fest -- für jeden Wähler, der
   irgendwo ein top bekommt. */
.nav, .nav-unter, main, #umgebungshinweis, .lader,
.editor-leiste { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   Schrift auf dem Grund
   ------------------------------------------------------------ */
h1, h2, h3 { color: var(--g-hell); letter-spacing: -.025em; }
p, .hinweis, .unterzeile, label, td, th, li, span, div, small, b, strong {
  color: inherit;
}
main > p, main > .hinweis, .unterzeile, .zweite-ueberschrift { color: var(--g-gedaempft); }

/* Die Überzeile: das Erkennungsmerkmal dieser Sprache. Sie sagt
   in zwei Wörtern, was für eine Art von Inhalt folgt. */
.ueberzeile, .fenster__art {
  display: block;
  margin-bottom: .25rem;
  color: var(--g-tuerkis);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */
.nav {
  background: rgba(6,22,47,.72);
  border-bottom: 1px solid var(--g-rand-fein);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav__marke { color: var(--g-hell); border-right-color: var(--g-rand-fein); }
.nav__bereich { color: #A9BDD4; }
.nav__bereich:hover { background: rgba(255,255,255,.07); color: var(--g-hell); }
.nav__bereich[aria-current="page"] {
  border-bottom-color: #35E8FF;
  color: var(--g-tuerkis);
}
.nav__zahl { background: rgba(255,255,255,.1); color: #C9D9EA; }
.nav__zahl--dringend { background: rgba(255,120,110,.18); color: #FFB3AC; }
.nav__wer b { color: var(--g-hell); }
.nav__wer span { color: var(--g-still); }
.nav__aus {
  border-color: rgba(106,180,255,.3);
  background: rgba(255,255,255,.06);
  color: #A9BDD4;
}
.nav__aus:hover { border-color: #35E8FF; color: var(--g-tuerkis); }

.nav-unter { background: rgba(6,22,47,.5); border-bottom-color: var(--g-rand-fein); }
.nav-unter__knopf { color: #A9BDD4; }
.nav-unter__knopf[aria-current="true"] { border-bottom-color: var(--g-tuerkis); color: var(--g-hell); }

#umgebungshinweis {
  background: rgba(6,22,47,.6);
  border-bottom-color: var(--g-rand-fein);
  color: var(--g-still);
}

/* ------------------------------------------------------------
   Flächen aus Glas
   ------------------------------------------------------------
   Jede Fläche setzt ihre Textfarbe selbst -- alles darin erbt
   sie. Ohne das erben Elemente ohne eigene Farbangabe die
   Grundfarbe und werden unlesbar, sobald sich der Grund ändert.
   ------------------------------------------------------------ */
.karte, .fenster, .blatt-vorn, .kalenderblock,
.pruefung, .editor-leiste, .hilfe {
  color: var(--g-hell);
  background: var(--g-glas);
  border: 1px solid var(--g-rand);
  border-radius: 22px;
  box-shadow: var(--g-schatten);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.karte h1, .karte h2, .karte h3,
.fenster h1, .fenster h2, .fenster h3,
.blatt-vorn h1, .blatt-vorn h2, .blatt-vorn h3 { color: var(--g-hell); }

.karte p, .fenster p, .blatt-vorn p { color: var(--g-gedaempft); }
.karte .hinweis, .fenster .hinweis, .blatt-vorn .hinweis,
.leer, .fenster__leer { color: var(--g-still); }

.blatt-kopf {
  background: none;
  border-bottom: 1px solid var(--g-rand-fein);
}
.fenster__zahl { background: rgba(255,255,255,.1); color: #C9D9EA; }
.blatt-fuss { background: rgba(255,255,255,.04); border-top-color: var(--g-rand-fein); }

/* ------------------------------------------------------------
   Listen
   ------------------------------------------------------------
   Ein Eintrag ist kein eigenes Blatt mehr, sondern eine Zeile
   in der Fläche. Zwei Glasflächen übereinander würden matschig. */
.eintrag, .zeile {
  color: var(--g-hell);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--g-rand-fein);
  border-radius: 0;
  box-shadow: none;
}
.eintrag:last-child, .zeile:last-child { border-bottom: 0; }
.eintrag:hover, .zeile:hover { background: rgba(255,255,255,.05); }
.eintrag__titel, .zeile__titel { color: var(--g-hell); }
.eintrag__prozess, .zeile__unter { color: var(--g-still); }
.fenster__mehr { color: #8FC9F5; border-top-color: var(--g-rand-fein); }
.fenster__mehr:hover { background: rgba(255,255,255,.05); color: #BFE6FF; }

/* Die Ampelkante links behält ihre Bedeutung, wird aber
   leuchtender -- blasse Töne verschwinden auf Glas. */
.eintrag--frist::before  { background: linear-gradient(#FF9A8F, #FF6E60); }
.eintrag--offen::before  { background: linear-gradient(#FFC978, #FF9F3F); }
.eintrag--fertig::before { background: linear-gradient(#7EE7B4, #3FCB8C); }
.eintrag--ruht::before   { background: rgba(255,255,255,.28); }

/* Marken am Zeilenende. */
.marke--frist   { background: rgba(255,120,110,.18); color: #FFB3AC; }
.marke--offen   { background: rgba(235,175,90,.18);  color: #FFD79A; }
.marke--fertig  { background: rgba(80,220,160,.16);  color: #8FEFC4; }
.marke--ruht    { background: rgba(255,255,255,.1);  color: #C9D9EA; }

/* ------------------------------------------------------------
   Eingabefelder
   ------------------------------------------------------------ */
/* Dieselben Attributselektoren wie in plenum.css -- ein
   schlichtes "input" ist weniger spezifisch und verliert gegen
   "input[type=text]". Die Felder blieben deshalb weiß.
   
   "search" fehlte dort ganz: Das Schülerfeld hatte keine
   Breite und war so schmal wie sein Inhalt. */
input, select, textarea,
input[type=text], input[type=email], input[type=password],
input[type=date], input[type=datetime-local], input[type=number],
input[type=search], input[type=tel], input[type=url] {
  width: 100%;
  padding: .6875rem .875rem;
  background: rgba(3,24,55,.54);
  border: 1px solid rgba(124,187,255,.5);
  border-radius: 14px;
  color: var(--g-hell);
  font: inherit;
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input::placeholder, textarea::placeholder { color: #8396B4; }
input:focus, select:focus, textarea:focus,
input[type=text]:focus, input[type=search]:focus, input[type=number]:focus,
input[type=date]:focus, input[type=email]:focus {
  border-color: #4FE6FF;
  box-shadow: 0 0 0 4px rgba(56,215,255,.1);
  outline: none;
}
/* Der Browser zeichnet Auswahllisten mit dem Grund des
   Elements -- ohne diese Zeile weiß auf weiß. */
select option { background: #0A2144; color: var(--g-hell); }
label { color: #C8D8EA; }

/* Safari färbt automatisch ausgefüllte Felder gelb. */
input:-webkit-autofill {
  -webkit-text-fill-color: var(--g-hell);
  -webkit-box-shadow: 0 0 0 60px #0A2144 inset;
}

/* ------------------------------------------------------------
   Knöpfe
   ------------------------------------------------------------
   Drei Gewichte:
   Haupt  gefüllt mit Verlauf -- die Handlung, die den Vorgang
          weiterbringt. Höchstens eine je Ansicht.
   Still  gläsern mit hellem Rand -- gleichrangige Wege.
   Text   nur Schrift -- alles Übrige.
   ------------------------------------------------------------ */
.knopf, .knopf-svg, .sortierung__knopf, .wochenleiste__knoepfe button,
.auswahl__knopf, .werkzeug {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(124,187,255,.36);
  color: var(--g-hell);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.knopf:hover, .knopf-svg:hover, .sortierung__knopf:hover,
.wochenleiste__knoepfe button:hover, .auswahl__knopf:hover, .werkzeug:hover {
  border-color: #4FE6FF;
  background: rgba(79,230,255,.12);
  color: var(--g-tuerkis);
  transform: translateY(-1px);
}
.knopf:active, .knopf-svg:active, .werkzeug:active { transform: translateY(0); }

.knopf--haupt, .knopf-svg--haupt, .anmelde-knopf {
  background: linear-gradient(90deg, #1B6FD0, #2264DE 52%, #7A2ED8);
  border-color: transparent;
  color: #fff;
  font-weight: 750;
  box-shadow: 0 14px 30px rgba(48,110,255,.3), inset 0 1px 0 rgba(255,255,255,.22);
}
.knopf--haupt:hover, .knopf-svg--haupt:hover {
  /* Beim Überfahren nicht heller werden: Weiß auf einem
     helleren Verlauf fiele unter 4,5:1. Stattdessen wächst der
     Schein darunter. */
  background: linear-gradient(90deg, #1B6FD0, #2264DE 52%, #7A2ED8);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 18px 38px rgba(48,110,255,.42), inset 0 1px 0 rgba(255,255,255,.28);
  transform: translateY(-2px);
}

/* Löschen ist die einzige Handlung ohne Rückweg. */
.werkzeug--gefahr:hover {
  border-color: #FF8A80;
  background: rgba(255,110,96,.14);
  color: #FFB3AC;
}

/* Der Generator schreibt einen Prozess, statt ihn zu
   verwalten -- das darf man sehen. */
.knopf-svg--funke {
  background: linear-gradient(180deg, rgba(200,137,31,.28), rgba(160,105,20,.34));
  border-color: rgba(235,190,110,.6);
  color: #FFDCA0;
}
.knopf-svg--funke:hover {
  background: linear-gradient(180deg, rgba(220,155,45,.36), rgba(180,120,25,.42));
  border-color: #EBBE6E;
  color: #FFEBC4;
}

.knopf-text { color: #8FC9F5; font-weight: 600; }
.knopf-text:hover { color: #BFE6FF; }
.sortierung__knopf[aria-pressed="true"] {
  background: linear-gradient(90deg, #1B6FD0, #2264DE);
  border-color: transparent;
  color: #fff;
}
.sortierung__wort { color: var(--g-still); }

/* ------------------------------------------------------------
   Suchfeld
   ------------------------------------------------------------ */
.suchfeld input { background: rgba(3,24,55,.54); }
.suchfeld__zeichen { color: #8396B4; }

/* ------------------------------------------------------------
   Meldungen
   ------------------------------------------------------------ */
.fehler {
  border: 1px solid rgba(255,138,128,.42);
  border-radius: 14px;
  padding: .75rem 1rem;
  background: rgba(120,26,20,.34);
  color: #FFC9C4;
}
.pruefung--gut {
  background: rgba(30,120,85,.28);
  border-color: rgba(110,231,176,.42);
  color: #8FEFC4;
}

/* ------------------------------------------------------------
   Der Assistent
   ------------------------------------------------------------
   Er war auf hellem Grund das einzige dunkle Feld. Jetzt hebt
   er sich durch Leuchten ab -- mit stärkerem Rand und Lichtern
   als die übrigen Flächen. */
.hilfe {
  background:
    radial-gradient(circle at 86% 20%, rgba(59,223,244,.18), transparent 26%),
    radial-gradient(circle at 72% 90%, rgba(133,73,255,.15), transparent 26%),
    linear-gradient(135deg, #0B234A 0%, #0A2855 58%, #0C315F 100%);
  border-color: rgba(64,153,255,.4);
}
.hilfe h2 { color: #fff; }
.hilfe p { color: var(--g-gedaempft); }
.hilfe__vorschlaege button:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ------------------------------------------------------------
   Prozesskacheln
   ------------------------------------------------------------
   Sie behalten ihre kräftigen Kategoriefarben -- daran erkennt
   man die Sorte auf einen Blick. Nur die Werkzeugleiste
   darunter wird gläsern. */
.kachel {
  border-color: var(--g-rand);
  border-radius: 22px;
  box-shadow: var(--g-schatten);
  background: none;
}
.kachel__werkzeuge {
  background: rgba(8,26,59,.7);
  border-top: 1px solid var(--g-rand-fein);
}
.kachel__werkzeuge .werkzeug {
  background: rgba(255,255,255,.07);
  border-color: rgba(124,187,255,.3);
  color: #C3D2E4;
}

/* ------------------------------------------------------------
   Der Belegungsplan
   ------------------------------------------------------------ */
/* Der Kalender ist kein Blatt, sondern ein Raster. Deshalb
   dünnere Linien, kleinerer Radius und kein Schatten zwischen
   den Zeilen -- was zählt, sind die Buchungen darin. */
.kalenderblock { border-radius: 16px; overflow: hidden; }
/* Siehe belegung.css: Das offene Menü darf weder abgeschnitten
   noch vom nächsten Kalender verdeckt werden. Die Regel steht
   auch hier, weil dunkel.css später lädt und sonst das
   overflow: hidden von oben gewinnt. */
.kalenderblock--offen {
  overflow: visible;
  position: relative;
  z-index: 30;
}
.kalenderblock__titel {
  color: var(--g-hell);
  border-bottom-color: var(--g-rand-fein);
  font-size: .9375rem;
  font-weight: 700;
}

/* Die Kopfzeile trägt die Wochentage. Der heutige wird
   hervorgehoben -- man sucht ihn ohnehin zuerst. */
.plan__kopf {
  background: rgba(255,255,255,.05);
  border-bottom-color: var(--g-rand-fein);
}
.plan__kopf span, .plan__kopf > span {
  color: #C8D8EA;
  border-left-color: rgba(255,255,255,.1);
  font-weight: 600;
}

/* Die Trennlinie zieht sich über die ganze Zeile und ist
   kräftiger als die Linien zwischen den Tagen -- so trennt sie
   Ressourcen und nicht Zellen. */
.plan__zeile { border-bottom-color: rgba(106,180,255,.30); }
.plan__zeile--band { background: rgba(103,220,255,.045); }
.plan__zeile:hover { background: rgba(255,255,255,.04); }
.plan__zeile--band:hover { background: rgba(103,220,255,.075); }
.plan__kennung { color: var(--g-hell); }
.plan__art { color: var(--g-still); }
.plan__name, .plan__name b { color: var(--g-hell); font-weight: 600; }
.plan__name span { color: var(--g-still); font-weight: 400; }
.plan__tag { border-left-color: rgba(255,255,255,.08); }
.plan__tag--frei:hover { background: rgba(79,230,255,.1); }

/* Die Zeichenerklärung steht neben dem Plan. */
.konflikt { color: #FFB3AC; }

/* Die Buchungen heißen "beleg", nicht "plan__buchung" -- den
   Namen hatte ich geraten, und die Regeln liefen ins Leere.

   Auf Glas verlieren blasse Töne zu viel: Die Ampelfarben
   werden leuchtender und bekommen eine Kante links, damit sie
   sich auch ohne Farbe unterscheiden. */
.beleg {
  border-radius: 8px;
  border-left-width: 3px;
  border-left-style: solid;
  font-weight: 500;
}
.beleg--bestaetigt, .beleg--fest {
  background: rgba(26,92,56,.55);
  border: 1px solid rgba(120,220,170,.4);
  border-left: 3px solid #4FD99B;
  color: #C8F3DC;
}
.beleg--beantragt {
  background: rgba(120,80,10,.5);
  border: 1px solid rgba(235,190,110,.4);
  border-left: 3px solid #EBBE6E;
  color: #FBE3B6;
}
.beleg--gesperrt {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-left: 3px solid rgba(255,255,255,.4);
  color: #C3D2E4;
}
.beleg b, .beleg strong { color: inherit; font-weight: 700; }
.beleg span { color: inherit; opacity: .85; }

.auswahl__liste {
  background: rgba(10,33,68,.97);
  border-color: rgba(124,187,255,.36);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,10,30,.5);
  backdrop-filter: blur(20px);
}
.auswahl__eintrag { color: var(--g-hell); }
.auswahl__eintrag:hover { background: rgba(255,255,255,.09); }
.auswahl__eintrag--alle { color: var(--g-tuerkis); border-bottom-color: var(--g-rand-fein); }
.auswahl__haken { color: #8FEFC4; }

/* ------------------------------------------------------------
   Der Prozesseditor
   ------------------------------------------------------------
   Palette, Raster und Seitenleiste sind Arbeitsflächen. Sie
   werden gläsern -- die Bausteine darauf behalten ihre Farben
   aus editor.css, damit die Bedeutung erhalten bleibt. */
.raster-mitte { background: rgba(3,20,45,.4); }
.e-status { color: var(--g-still); }
.reiter__knopf[aria-current="true"] { color: var(--g-tuerkis); border-bottom-color: #35E8FF; }
.pfeil { color: var(--g-still); border-color: rgba(255,255,255,.16); }

/* Die Bausteine im Diagramm bleiben hell -- ihre Farben tragen
   Bedeutung, und auf Glas ließen sie sich nicht unterscheiden. */
.zelle, .palette__stueck { box-shadow: 0 4px 12px rgba(0,10,30,.28); }

/* ------------------------------------------------------------
   Verweise
   ------------------------------------------------------------ */
a { color: #8FC9F5; }
a:hover { color: #BFE6FF; }

/* ------------------------------------------------------------
   Der Lader
   ------------------------------------------------------------ */
.lader { background: rgba(3,18,38,.62); backdrop-filter: blur(6px); }
.lader span { border-color: rgba(255,255,255,.2); border-top-color: #4FE6FF; }

/* ------------------------------------------------------------
   Was sonst dunkel geblieben wäre
   ------------------------------------------------------------
   Sechzehn Regeln in plenum.css setzen eine dunkle Schrift. Auf
   dunklem Grund wären sie unlesbar. Gefunden durch Abgleich
   beider Dateien, nicht durch Hinsehen -- zwei davon waren im
   Betrieb schon aufgefallen, die übrigen vierzehn nicht.
   ------------------------------------------------------------ */

.aktenzeichen     { color: var(--g-still); }
.zurueck          { color: #A9BDD4; }
.zurueck:hover    { color: var(--g-tuerkis); }
.position         { color: var(--g-still); }
.eintrag__meta    { color: var(--g-still); }
.kontext dt       { color: var(--g-still); }
.kontext dd       { color: var(--g-hell); }
.verlauf__was     { color: var(--g-hell); }
.verlauf__wer     { color: var(--g-still); }
.verlauf__grund   { color: var(--g-gedaempft); }
.verlauf__zeile   { border-bottom-color: var(--g-rand-fein); }
.verlauf          { border-top-color: var(--g-rand-fein); }
.dialog__wer      { color: var(--g-gedaempft); }

/* Der Zahlenblock im Überblick. */
.zahl             { background: rgba(255,255,255,.06); border-color: var(--g-rand-fein); }
.zahl__label      { color: var(--g-still); }
.zahl__wert       { color: var(--g-hell); }
.zahl--warnung    { background: rgba(200,137,31,.18); border-color: rgba(235,190,110,.4); }
.zahl--warnung .zahl__label, .zahl--warnung .zahl__wert { color: #FFDCA0; }
.zahl--frist      { background: rgba(179,38,30,.22); border-color: rgba(255,138,128,.4); }
.zahl--frist .zahl__label, .zahl--frist .zahl__wert { color: #FFC9C4; }

/* Die Balken im Überblick. */
.balken__name     { color: var(--g-gedaempft); }
.balken__zahl     { color: var(--g-still); }
.balken__spur     { background: rgba(255,255,255,.1); }
.balken__wert     { background: linear-gradient(90deg, #2BC8FF, #2679FF); }
.ueberblick__titel { color: var(--g-gedaempft); }

/* Marken im Ablauf. */
.m-offen  { background: rgba(235,175,90,.18); color: #FFD79A; }
.m-ruht   { background: rgba(255,255,255,.1);  color: #C9D9EA; }
.m-fertig { background: rgba(80,220,160,.16);  color: #8FEFC4; }

/* Das Eingabefeld im Assistenten liegt auf dessen eigenem
   Grund -- es bleibt hell, damit man sieht, wo man tippt. */
.hilfe__zeile input {
  background: rgba(255,255,255,.97);
  border-color: rgba(134,183,255,.28);
  color: #1A2943;
}
.hilfe__zeile input::placeholder { color: #7F8FA6; }
.dialog-eingabe .knopf { color: var(--g-hell); }

/* ------------------------------------------------------------
   Überfahren
   ------------------------------------------------------------
   Vier Regeln in plenum.css setzen beim Überfahren eine helle
   Fläche. Auf dunklem Grund verschwindet die weiße Schrift
   darin -- im Betrieb war eine Zeile beim Darüberfahren leer.

   Der Abgleich von vorhin hat sie nicht gefunden: Er suchte
   nach Textfarben, nicht nach Hintergründen im :hover.
   ------------------------------------------------------------ */
.fenster .eintrag:hover,
.eintrag:hover,
.zeile:hover,
.fenster__mehr:hover,
.zurueck:hover {
  background: rgba(79,230,255,.09);
  color: var(--g-hell);
}
.fenster .eintrag:hover .eintrag__titel,
.eintrag:hover .eintrag__titel,
.zeile:hover .zeile__titel { color: var(--g-hell); }
.fenster .eintrag:hover .eintrag__prozess,
.eintrag:hover .eintrag__prozess,
.zeile:hover .zeile__unter { color: #B8C7DC; }

/* ------------------------------------------------------------
   Hierarchie der Fenster
   ------------------------------------------------------------
   Nicht jede Fläche wiegt gleich viel. "Wartet auf Sie" verlangt
   eine Handlung -- alles andere ist Auskunft. Vorher sahen beide
   gleich aus, obwohl nur eines dringend ist.
   ------------------------------------------------------------ */

/* Was eine Handlung verlangt: wärmerer Rand, stärkerer Grund. */
.fenster--dringend {
  border-color: rgba(255,138,128,.36);
  background: linear-gradient(180deg, rgba(58,32,50,.5), rgba(10,28,60,.82));
}
.fenster--dringend > header { border-bottom-color: rgba(255,138,128,.16); }
.fenster--dringend .fenster__art { color: #FFB3AC; }
.fenster--dringend h2, .fenster--dringend h3 { font-size: 1.125rem; font-weight: 750; }
.fenster--dringend .fenster__zahl { background: rgba(255,120,110,.2); color: #FFB3AC; }
.fenster--dringend .eintrag__titel { font-size: .9375rem; }

/* Was nur Auskunft gibt, tritt zurück. */
.fenster--still {
  border-color: rgba(106,180,255,.28);
  background: linear-gradient(180deg, rgba(17,54,105,.44), rgba(8,26,59,.7));
  box-shadow: 0 14px 40px rgba(0,10,30,.24), inset 0 1px 0 rgba(255,255,255,.06);
}
.fenster--still .fenster__art { color: #8FA9C7; }
.fenster--still h2, .fenster--still h3 { font-size: 1.0625rem; color: #DCE7F4; }
.fenster--still .eintrag__titel { font-size: .875rem; font-weight: 600; color: #DCE7F4; }
.fenster--still .eintrag__prozess { color: #8FA9C7; }
.fenster--still .eintrag { border-bottom-color: rgba(255,255,255,.06); }
.fenster--still .aktenzeichen { color: #7E93AC; font-size: .6875rem; }

/* ------------------------------------------------------------
   Der Begrüßungsbereich
   ------------------------------------------------------------ */
.begruessung {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.begruessung h1 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 760;
  letter-spacing: -.035em;
}
.begruessung .knopf-svg { flex: none; }

/* ------------------------------------------------------------
   Der Assistent als Zeile
   ------------------------------------------------------------
   Er hatte ein Viertel des Bildschirms für ein Eingabefeld. Wer
   weiß, was er will, tippt es -- wer nicht, klickt einen
   Vorschlag. Beides braucht keine große Fläche.
   ------------------------------------------------------------ */
.hilfe--zeile {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  border-radius: 18px;
}
.hilfe--zeile h2 { display: none; }

/* Antwort und Hinweis stehen UNTER dem Feld, nicht daneben.
   Vorher lagen beide in derselben Flex-Zeile wie die Eingabe --
   der Fußtext war dort ausgeblendet, und die Treffer drängten
   sich neben den Knopf. */
.hilfe--zeile { flex-wrap: wrap; }
.hilfe--zeile #hilfe-antwort { flex: 0 0 100%; order: 4; }
/* Das Expertengespräch steht UNTER der Eingabezeile, nicht
   daneben. Ohne diese Zeile wird es zum Flex-Element neben dem
   Feld gequetscht -- die Eingabe schrumpft auf ein Drittel,
   und der Verlauf steht in einer schmalen Spalte. */
.hilfe--zeile #experte { flex: 0 0 100%; order: 6; }
.hilfe--zeile #hilfe-antwort:empty { display: none; }
.hilfe--zeile > p.hilfe__fuss {
  display: block;
  flex: 0 0 100%;
  order: 5;
  margin: .375rem 0 0;
  padding-left: 2.25rem;
  text-align: left;
  font-size: .75rem;
  color: var(--g-still);
}
.hilfe--zeile .hilfe__funke { flex: none; color: var(--g-tuerkis); }
.hilfe--zeile input {
  flex: 1;
  margin: 0;
  padding: .5rem 0;
  border: 0;
  background: transparent;
  color: var(--g-hell);
  font-size: .9375rem;
}
.hilfe--zeile input::placeholder { color: #8FA9C7; }
.hilfe--zeile input:focus { box-shadow: none; }
.hilfe--zeile .hilfe__vorschlaege { display: flex; gap: .375rem; flex: none; }
.hilfe--zeile .hilfe__weiter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  flex: none;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #1B6FD0, #7A2ED8);
  color: #fff;
}

/* Während Plenum überlegt, wechselt der Knopf ins Türkis der
   Marke -- dieselbe Farbe, in der sie spricht. Ohne dieses
   Zeichen geschieht zwischen Klick und Antwort sichtbar
   nichts, und man klickt ein zweites Mal. */
.hilfe--zeile .hilfe__weiter--denkt {
  background: linear-gradient(135deg, #1E7F9E, #67DCFF);
  color: #04223A;
  cursor: default;
}
.hilfe--zeile .hilfe__weiter--denkt svg { animation: plenum-denkt 1.1s ease-in-out infinite; }
@keyframes plenum-denkt {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hilfe--zeile .hilfe__weiter--denkt svg { animation: none; opacity: .7; }
}

@media (max-width: 56rem) {
  .hilfe--zeile { flex-wrap: wrap; }
  .hilfe--zeile .hilfe__vorschlaege { order: 3; width: 100%; flex-wrap: wrap; }
}

/* ------------------------------------------------------------
   Zeitangaben
   ------------------------------------------------------------
   "1 Tag" bei einem überfälligen Vorgang ist etwas anderes als
   "4 Std." bei einem laufenden. Vorher stand beides gleich da.
   ------------------------------------------------------------ */
.eintrag__meta--spaet {
  padding: .125rem .5rem;
  border-radius: 6px;
  background: rgba(255,120,110,.18);
  color: #FFB3AC;
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================================
   Nachtrag: helle Flächen, die durchgerutscht sind
   ============================================================
   Gefunden durch Abgleich aller Stylesheets gegen diese Datei
   -- gesucht wurde nach Hintergründen, nicht nach Textfarben.
   Der erste Abgleich hatte nur Farben geprüft, deshalb blieben
   diese sechzehn stehen.
   ============================================================ */

/* Die Kopfzeile über einem Vorgang oder Prozess. */
.kopf {
  background: rgba(6,22,47,.6);
  border-bottom: 1px solid var(--g-rand-fein);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.kopf .aktenzeichen, .kopf span { color: var(--g-gedaempft); }
.kopf .fassung { color: var(--g-still); }

/* Runde Knöpfe (Zahnrad, Schließen). */
.knopf-rund {
  background: rgba(255,255,255,.08);
  border-color: rgba(124,187,255,.34);
  color: var(--g-hell);
}
.knopf-rund:hover, .knopf-rund[aria-pressed="true"] {
  background: rgba(79,230,255,.14);
  border-color: #4FE6FF;
  color: var(--g-tuerkis);
}

/* Der Umschalter Diagramm / Liste. */
.umschalter {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(124,187,255,.28);
}
.umschalter__knopf { color: #A9BDD4; }
.umschalter__knopf[aria-current="true"] {
  background: rgba(79,230,255,.16);
  color: var(--g-hell);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

/* Die Übergangskarten in der Seitenleiste. */
.uebergang {
  background: rgba(255,255,255,.05);
  border-color: rgba(124,187,255,.26);
  color: var(--g-hell);
}
.uebergang__kopf { color: var(--g-hell); }

/* Der Schrittstapel in der Listenansicht. */
.zeile__ordnen {
  background: rgba(255,255,255,.05);
  border-color: rgba(124,187,255,.26);
  color: var(--g-hell);
}
.zeile__ordnen button {
  background: rgba(255,255,255,.07);
  border-color: rgba(124,187,255,.26);
  color: #A9BDD4;
}
.zeile__ordnen button:hover {
  background: rgba(79,230,255,.14);
  border-color: #4FE6FF;
  color: var(--g-tuerkis);
}

/* Ablageflächen im Diagramm. */
.einschub--ziel {
  background: rgba(79,230,255,.12);
  border-color: #4FE6FF;
}

/* Der Verlauf im Beschreiben-Blatt. */
.ld-antwort {
  background: rgba(255,255,255,.07);
  color: var(--g-gedaempft);
}
.ld-frage { background: rgba(200,137,31,.2); color: #FFDCA0; }
.ld-entwurf {
  background: rgba(255,255,255,.05);
  border-color: rgba(124,187,255,.26);
  color: var(--g-hell);
}
.ld-entwurf h3 { color: var(--g-hell); }
.ld-entwurf p { color: var(--g-still); }
.ld-schritt { border-top-color: rgba(255,255,255,.1); color: var(--g-hell); }
.ld-schritt span:first-child { color: var(--g-still); }
.ld-schritt em { color: var(--g-still); }

/* ------------------------------------------------------------
   Der Gesprächsverlauf im Vorgang
   ------------------------------------------------------------
   Plenum spricht links und im Türkis der Marke, die eigene
   Antwort steht rechts und ruhiger. So bleibt der Blick bei
   dem, was gefragt wird.

   Vorher trug die eigene Antwort das Türkis, und Plenums Blase
   behielt den hellen Grund aus plenum.css -- mit heller Schrift
   darauf. Die Frage war praktisch nicht zu lesen. Deshalb steht
   hier für JEDE Blase ein Grund UND eine Schriftfarbe: Wer nur
   eines von beidem setzt, verlässt sich darauf, dass das andere
   passt -- und genau das ging schief. */
.dialog__zeichen {
  background: rgba(103,220,255,.16);
  border-color: var(--g-rand);
  color: var(--g-tuerkis);
}
.dialog__text {
  background: rgba(103,220,255,.12);
  border-color: rgba(106,180,255,.30);
  color: var(--g-hell);
}
.dialog__zeile--ich .dialog__text {
  background: rgba(8,26,59,.62);
  border-color: rgba(106,180,255,.30);
  color: var(--g-hell);
}

/* Kleine Schrift braucht mehr Farbe, nicht weniger. --g-still
   ist für 12px auf diesem Grund zu schwach -- die Angaben waren
   kaum zu lesen. */
.dialog-fortschritt__wort   { color: var(--g-gedaempft); }
.dialog-fortschritt__balken { background: var(--g-rand-fein); }
.dialog-fortschritt__anteil { background: var(--g-tuerkis); }

.dialog-erfasst {
  background: rgba(8,26,59,.5);
  border-color: var(--g-rand-fein);
}
.dialog-erfasst__wort { color: var(--g-gedaempft); }
.dialog-marke {
  background: rgba(8,26,59,.6);
  border-color: rgba(106,180,255,.34);
  color: var(--g-gedaempft);
}
.dialog-marke--steht {
  background: rgba(110,231,176,.20);
  border-color: rgba(110,231,176,.55);
  color: #B4F5D6;
}

.dialog-senden {
  background: rgba(103,220,255,.16);
  border-color: var(--g-rand);
  color: var(--g-tuerkis);
}
.dialog-senden:hover { background: rgba(103,220,255,.26); }
.dialog-senden:disabled {
  background: rgba(8,26,59,.5);
  border-color: var(--g-rand-fein);
  color: var(--g-still);
}

/* Das Eingabefeld sagt selbst, ob es dran ist.
   Wartend: dunkel und still. Sobald Plenum gefragt hat: ein
   Hauch Tuerkis und ein hellerer Rand -- dieselbe Farbe, in der
   sie spricht. So sucht niemand den Knopf, um zu erfahren, ob
   er schreiben darf. */
.dialog-eingabe textarea:disabled {
  background: rgba(8,26,59,.5);
  border-color: var(--g-rand-fein);
  color: var(--g-still);
}
.dialog-eingabe textarea:not(:disabled) {
  background: rgba(103,220,255,.07);
  border-color: rgba(106,180,255,.38);
  color: var(--g-hell);
}
.dialog-eingabe textarea:not(:disabled)::placeholder { color: var(--g-still); }
.dialog-eingabe textarea:not(:disabled):focus {
  background: rgba(103,220,255,.11);
  border-color: var(--g-tuerkis);
}

/* Die Werkzeugleiste im Vorlageneditor. */
.werkzeuge {
  background: rgba(255,255,255,.06);
  border-color: rgba(124,187,255,.26);
}
.werkzeuge button { color: #A9BDD4; }
.werkzeuge button:hover { background: rgba(79,230,255,.14); color: var(--g-tuerkis); }

/* Gesperrte Zeiten im Belegungsplan. */
.beleg--sperr, .feldchen--sperr {
  background: rgba(255,255,255,.08);
  border-left: 3px solid rgba(255,255,255,.35);
  color: #C3D2E4;
}
.beleg--fest {
  background: rgba(26,92,56,.55);
  border-left: 3px solid #4FD99B;
  color: #C8F3DC;
}
.beleg--offen {
  background: rgba(120,80,10,.5);
  border-left: 3px solid #EBBE6E;
  color: #FBE3B6;
}

/* Die Uhrzeit unter der Stunde: dieselbe Farbe wie die Buchung,
   nur etwas ruhiger. Sie gehört zur Stunde darüber, nicht zum
   Namen darunter. */
.beleg__zeit { opacity: .8; }
.beleg__wer  { opacity: .75; }

.feldchen--meine {
  background: rgba(103,220,255,.16);
  border: 1px solid rgba(106,180,255,.42);
}
.feldchen--frei { border: 1px dashed rgba(106,180,255,.30); }

/* ---------- Stundenwahl im Formular ---------- */
.buchung__wort, .buchung__zeitraum { color: var(--g-still); }
.buchung__tag { color: var(--g-gedaempft); }
.buchung__antrag {
  background: rgba(250,199,117,.12);
  border: 1px solid rgba(250,199,117,.38);
  color: #FAC775;
}
.stundenwahl__knopf {
  border-color: rgba(106,180,255,.30);
  color: var(--g-gedaempft);
}
.stundenwahl__knopf:hover { border-color: var(--g-rand); color: var(--g-hell); }
.stundenwahl__knopf--gewaehlt {
  background: rgba(103,220,255,.18);
  border-color: var(--g-tuerkis);
  color: var(--g-hell);
}
.stundenwahl__knopf--aus {
  border-color: rgba(106,180,255,.14);
  color: #55708F;
}
.stundenwahl__knopf--aus:hover {
  border-color: rgba(106,180,255,.14);
  color: #55708F;
}

/* ------------------------------------------------------------
   Knöpfe ohne Klasse
   ------------------------------------------------------------
   Mehrere Knöpfe im Betrieb trugen keine der bekannten Klassen
   und bekamen den Systemstil des Browsers -- winzig, grau,
   fremd. Ein Auffangnetz: Jeder Knopf, der keine eigene Klasse
   hat, sieht wie ein stiller Knopf aus.
   ------------------------------------------------------------ */
button:not([class]),
/* Ein kleiner Knopf, der zugleich Hauptknopf ist, behaelt
   seinen Verlauf: "button.knopf--klein" ist spezifischer als
   ".knopf--haupt" und hat ihn sonst mit mattem Grau
   ueberschrieben -- der wichtigste Knopf der Seite sah aus wie
   der unwichtigste. */
button.knopf--klein:not([class*="haupt"]),
/* "anmelde" ist seit dem Theme-Umbau dabei: Die Anmeldeseite
   gestaltet ihre Knoepfe vollstaendig selbst, aus den Variablen
   des Themes. Dieses Auffangnetz hat sie eingefangen und dem
   Auge im Passwortfeld einen blauen Kasten verpasst -- auf
   Papier und Terrakotta ein blauer Kasten auf Creme. */
main button:not([class*="knopf"]):not([class*="anmelde"]):not([class*="werkzeug"]):not([class*="eintrag"]):not([class*="zeile"]):not([class*="kachel"]):not([class*="auswahl"]):not([class*="reiter"]):not([class*="sortierung"]):not([class*="fenster"]):not([class*="umschalter"]):not([class*="hilfe"]):not([class*="zurueck"]):not([class*="ld-"]):not([class*="palette"]):not([class*="handgriff"]):not([class*="g-vorschlag"]) {
  padding: .5625rem 1.125rem;
  border: 1px solid rgba(124,187,255,.36);
  border-radius: 11px;
  background: rgba(255,255,255,.07);
  color: var(--g-hell);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
button:not([class]):hover {
  border-color: #4FE6FF;
  background: rgba(79,230,255,.12);
  color: var(--g-tuerkis);
}

/* ------------------------------------------------------------
   Auswahlfelder
   ------------------------------------------------------------
   Der Browser zeichnet sie mit seinem eigenen Stil, sobald man
   ihm keinen gibt -- im Betrieb waren sie grau und fremd. */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, #8FA9C7 50%),
    linear-gradient(135deg, #8FA9C7 50%, transparent 50%);
  background-position: right 1rem center, right .8125rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Die Prüfmeldung über dem Diagramm. */
.pruefung { border-radius: 14px; }
.pruefung--fehler {
  background: rgba(179,38,30,.22);
  border-color: rgba(255,138,128,.4);
  color: #FFC9C4;
}
.pruefung--fehler b, .pruefung--fehler strong,
.pruefung--fehler li { color: #FFC9C4; }
.pruefung--gut {
  background: rgba(30,120,85,.28);
  border-color: rgba(110,231,176,.42);
  color: #8FEFC4;
}
.pruefung--gut b, .pruefung--gut strong { color: #8FEFC4; }

/* Die Zeilennummern und Hinweise im Diagramm. */

/* Der Reiter Schritt / Felder in der Seitenleiste. */
.reiter { border-bottom-color: var(--g-rand-fein); }
.reiter__knopf { color: #A9BDD4; }
.reiter__knopf[aria-current="true"], .reiter__knopf.aktiv {
  color: var(--g-tuerkis);
  border-bottom-color: #35E8FF;
}

/* Die Verwaltungsreiter im Belegungsplan. */
[data-verwaltung] {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(124,187,255,.28);
  color: #A9BDD4;
}
[data-verwaltung][aria-current="true"] {
  background: rgba(79,230,255,.16);
  border-color: rgba(79,230,255,.5);
  color: var(--g-hell);
}

/* Kontrollkästchen und Auswahlknöpfe. */
input[type="checkbox"], input[type="radio"] {
  accent-color: #2BC8FF;
  width: auto;
  border-radius: 4px;
}

/* ============================================================
   Nachtrag zwei: die letzten hellen Flächen
   ============================================================
   Vom Abgleich gefunden -- 23 Stellen in vier Stylesheets, die
   auf dunklem Grund unlesbar geblieben wären. Nach Auge hätte
   ich sie nicht alle gefunden; sechs davon sieht man erst,
   wenn man den betreffenden Bereich öffnet.
   ============================================================ */

/* Editor: Nummern, Marken, Palette, Seitenleiste */
.zeile__nr, .raster__nr        { color: var(--g-still); background: none; }
.zeile__marke                  { background: rgba(255,255,255,.1); color: #C9D9EA; }
.uebergang__rang               { background: rgba(255,255,255,.1); color: #C9D9EA; }
.palette__titel                { color: var(--g-still); background: none; }
.seitenleiste__knopf           { background: rgba(255,255,255,.06); color: #A9BDD4;
                                 border-color: rgba(124,187,255,.26); }
.seitenleiste__knopf[aria-current="true"] {
  background: rgba(79,230,255,.16);
  border-color: rgba(79,230,255,.5);
  color: var(--g-hell);
}
.seitenleiste__inhalt label    { color: #C8D8EA; }
.raster__zeile-knopf           { background: rgba(255,255,255,.06); color: #A9BDD4;
                                 border-color: rgba(124,187,255,.26); }
.raster__zeile-knopf:hover     { background: rgba(79,230,255,.12); color: var(--g-tuerkis); }
.zelle__bedingung              { background: rgba(255,255,255,.14); color: #FFD48C; }
.strang-neu                    { background: rgba(255,255,255,.05); color: var(--g-still);
                                 border-color: rgba(255,255,255,.18); }
.strang-neu:hover              { background: rgba(79,230,255,.1); color: var(--g-tuerkis); }
.zwischen__text                { background: none; color: var(--g-still); }

/* Belegungsplan: das Stundenraster */
.stunde                        { background: rgba(255,255,255,.05);
                                 border-color: rgba(124,187,255,.26); }
.stunde__nr                    { color: var(--g-still); background: none; }
.stunde__bis                   { color: var(--g-still); background: none; }


.feldleiste__gruppe            { color: var(--g-still); background: none; }
.feldchip                      { background: rgba(255,255,255,.08); color: var(--g-hell);
                                 border-color: rgba(124,187,255,.3); }
.feldchip--immer               { background: rgba(200,137,31,.22); color: #FFDCA0;
                                 border-color: rgba(235,190,110,.4); }
.feldchip__her                 { color: var(--g-still); }
.blatt__kopf                   { background: rgba(255,255,255,.05); color: var(--g-still);
                                 border-bottom-color: var(--g-rand-fein); }
.fenster__inhalt label         { color: #C8D8EA; }

/* Die Vorschau zeigt ein Blatt Papier -- sie bleibt hell,
   denn genau so kommt das Schreiben aus dem Drucker. */
.vorschau                      { background: #FBFAF7; color: var(--text); }
.vorschau b, .vorschau strong  { color: var(--text); }
.vorschau p, .vorschau div     { color: var(--text-leise); }

/* Der Fortschrittsstreifen auf einer Prozesskachel liegt auf
   der farbigen Fläche und bleibt weiß. */
.kachel__streifen i.voll       { background: #fff; }

/* ============================================================
   Startseite: Größen und Gewichte
   ============================================================
   Aus dem Entwurf übernommen. Die Werte standen dort in einer
   Vorschau; hier sind sie die verbindlichen.
   ============================================================ */

/* Die Blindenschrift-Klasse fehlte auf der Startseite --
   deshalb stand "Womit kann ich Ihnen helfen?" zweimal da:
   einmal als Beschriftung, einmal als Platzhalter. */
.sr-nur {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Die Begrüßung trägt die Seite -- sie darf groß sein. */
.begruessung { margin-bottom: 1.5rem; }
.begruessung .ueberzeile {
  font-size: .75rem;
  letter-spacing: .2em;
  margin-bottom: .4375rem;
}
.begruessung h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
  font-weight: 780;
  letter-spacing: -.038em;
}

/* Das Eingabefeld des Assistenten: höher, größere Schrift.
   Es ist die häufigste Handlung auf dieser Seite -- man muss
   sehen, dass man hineinschreiben kann. */
.hilfe--zeile {
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  border-radius: 20px;
}
.hilfe--zeile .hilfe__funke svg { width: 26px; height: 26px; }
.hilfe--zeile input {
  padding: .625rem 0;
  font-size: 1.1875rem;
  font-weight: 500;
}
.hilfe--zeile input::placeholder {
  color: #8FA9C7;
  font-size: 1.1875rem;
  font-weight: 500;
}
.hilfe--zeile .hilfe__weiter { width: 3rem; height: 3rem; border-radius: 14px; }
.hilfe--zeile .hilfe__weiter svg { width: 20px; height: 20px; }

/* Die Fensterüberschriften: größer und schwerer. Eine
   Überschrift, die man überliest, ist keine. */
.fenster > header {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: 1.25rem 1.5rem 1rem;
}
.fenster__art {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .2em;
  margin-bottom: .3125rem;
}
.fenster--dringend h2 { font-size: 1.375rem; font-weight: 780; letter-spacing: -.03em; }
.fenster--still h2    { font-size: 1.25rem;  font-weight: 750; letter-spacing: -.025em; }
.fenster__zahl {
  padding: .1875rem .625rem;
  border-radius: 9px;
  font-size: .875rem;
  font-weight: 700;
}

/* Höchstens vier Einträge sichtbar, der Rest wird gerollt.
   Eine Liste, die über den Bildschirm hinauswächst, verdeckt
   alles darunter -- und was darunter steht, ist ebenso
   wichtig. */
#arbeitsliste, #eigene-liste {
  /* Vier Einträge zu je etwa 4,64 rem sind 18,6 rem. Ein
     kleiner Überstand lässt den fünften anschneiden -- so
     sieht man, dass es weitergeht, statt eine Liste für zu
     Ende zu halten. */
  max-height: 20rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
#arbeitsliste::-webkit-scrollbar,
#eigene-liste::-webkit-scrollbar { width: 8px; }
#arbeitsliste::-webkit-scrollbar-thumb,
#eigene-liste::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(255,255,255,.22);
}
#arbeitsliste::-webkit-scrollbar-thumb:hover,
#eigene-liste::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); }

/* Der Eintrag bekommt etwas mehr Luft -- bei vier sichtbaren
   Zeilen ist Platz dafür. */
.fenster .eintrag { padding: 1rem 1.5rem; }
.fenster--dringend .eintrag__titel { font-size: 1rem; font-weight: 650; }
.fenster--still .eintrag__titel { font-size: .9375rem; }

/* ============================================================
   Der Prozesseditor
   ============================================================
   Palette, Raster und Seitenleiste sind drei Teile EINER
   Fläche, nicht drei Karten. Als eigenständige Glasflächen
   behandelt ergaben sie drei übereinanderliegende
   Weichzeichner -- der ganze Bereich wurde milchig.

   Deshalb: die Umrandung außen, die Teile innen nur durch
   Linien getrennt, und der Weichzeichner genau einmal.
   ============================================================ */
.editor-spalten {
  border: 1px solid var(--g-rand);
  border-radius: 22px;
  background: var(--g-glas);
  box-shadow: var(--g-schatten);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}

.palette, .raster-mitte, .seitenleiste {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--g-hell);
}
.palette { border-right: 1px solid var(--g-rand-fein); }
.seitenleiste { border-left: 1px solid var(--g-rand-fein); }
/* Die Arbeitsfläche in der Mitte wird etwas dunkler -- so
   heben sich die hellen Bausteine darauf ab. */
.raster-mitte { background: rgba(3,20,45,.35); }

.seitenleiste__reiter { border-bottom-color: var(--g-rand-fein); }

/* ------------------------------------------------------------
   Die Ordnen-Knöpfe in der Listenansicht
   ------------------------------------------------------------
   Sie waren weiße Pillen, größer als die Zeile selbst. Zwei
   kleine Pfeile genügen: Man drückt sie selten, und sie sollen
   den Schritt nicht überstrahlen. */
.zeile__ordnen {
  background: none;
  border: 0;
  gap: .0625rem;
}
.zeile__ordnen button {
  width: 1.5rem;
  height: 1.125rem;
  padding: 0;
  border: 1px solid rgba(124,187,255,.24);
  border-radius: 5px;
  background: rgba(255,255,255,.05);
  color: #8FA9C7;
  font-size: .625rem;
  line-height: 1;
  box-shadow: none;
}
.zeile__ordnen button:hover {
  border-color: #4FE6FF;
  background: rgba(79,230,255,.14);
  color: var(--g-tuerkis);
  transform: none;
}

/* ------------------------------------------------------------
   Die Seitenleiste
   ------------------------------------------------------------
   Ihre Felder waren weiß mit dunkler Schrift -- als einzige in
   der ganzen Anwendung. Sie gehören zu derselben Sprache wie
   alle übrigen. */
.seitenleiste input, .seitenleiste select, .seitenleiste textarea {
  background: rgba(3,24,55,.54);
  border-color: rgba(124,187,255,.5);
  color: var(--g-hell);
}
.seitenleiste input::placeholder, .seitenleiste textarea::placeholder { color: #8396B4; }
.seitenleiste select option { background: #0A2144; color: var(--g-hell); }

/* "Zuerst geprüft" ist eine Rangangabe, kein markierter Text. */
.uebergang__rang {
  padding: .125rem .5rem;
  border-radius: 6px;
  background: rgba(255,255,255,.09);
  color: #C9D9EA;
  font-size: .71875rem;
  font-weight: 600;
}

/* ------------------------------------------------------------
   Der Ziehbereich
   ------------------------------------------------------------ */
.palette__titel {
  color: var(--g-still);
  font-size: .65625rem;
  font-weight: 800;
  letter-spacing: .18em;
}
.einschub, .zwischen {
  border-color: rgba(255,255,255,.14);
  color: var(--g-still);
  background: rgba(255,255,255,.02);
}
.einschub:hover, .zwischen:hover {
  border-color: rgba(79,230,255,.45);
  background: rgba(79,230,255,.08);
  color: var(--g-tuerkis);
}

/* ============================================================
   Bausteinfarben behalten Vorrang
   ============================================================
   ".palette { color: … }" ist genauso spezifisch wie
   ".g-formular { color: … }" -- und weil dunkel.css später
   lädt, gewann sie. Die Palettenstücke verloren ihre Farben.

   Mit einem zusätzlichen Elternteil im Selektor liegen die
   Bausteinfarben wieder oben. Sie tragen Bedeutung: Blau heißt
   erfassen, Grün wirken, Violett entscheiden. Ohne sie ist die
   Palette eine Liste grauer Wörter.
   ============================================================ */
/* ------------------------------------------------------------
   Die Bausteine im Diagramm bleiben hell -- ihre Farben tragen
   Bedeutung, und auf Glas ließen sie sich nicht unterscheiden.
   ------------------------------------------------------------ */
.editor-spalten .zelle.g-formular      { background: #DCEBFA; border-color: #A9CBEA; color: #0C3B63; }
.editor-spalten .zelle.g-ki_rueckfrage { background: #D9EFF3; border-color: #A2D6E0; color: #0A3F49; }
.editor-spalten .zelle.g-genehmigung   { background: #E5E1F8; border-color: #C0B8EC; color: #2B2270; }
.editor-spalten .zelle.g-bedingung     { background: #EFE3F7; border-color: #D7BFE9; color: #4A1F63; }
.editor-spalten .zelle.g-verfuegbarkeit{ background: #E3E7F7; border-color: #BCC5E9; color: #21306B; }
.editor-spalten .zelle.g-aufgabe       { background: #D9F0E2; border-color: #A5D8BB; color: #0A4429; }
.editor-spalten .zelle.g-email         { background: #DAF0EE; border-color: #A6D8D2; color: #0A4441; }
.editor-spalten .zelle.g-dokument      { background: #E4EFD7; border-color: #C0DBA4; color: #2C4212; }
.editor-spalten .zelle.g-warten        { background: #FAECD2; border-color: #EBCF97; color: #5A3A08; }
.editor-spalten .zelle.g-ende          { background: #E8E6E0; border-color: #CFCABD; color: #3B3830; }
.editor-spalten .zelle.g-start,
.editor-spalten .zelle.g-verzweigung_parallel,
.editor-spalten .zelle.g-zusammenfuehrung { background: #E8E6E0; border-color: #CFCABD; color: #3B3830; }

/* ------------------------------------------------------------
   Die Palette: dunkles Glas mit leuchtendem Rand
   ------------------------------------------------------------
   Anders als im Diagramm, und mit Absicht. Zehn helle Kacheln
   nebeneinander in einer schmalen Spalte erschlagen den Blick,
   und die Arbeitsfläche daneben lebt davon, dass die Bausteine
   DORT hell sind.

   Die Zuordnung bleibt: Jeder Baustein trägt in der Palette
   denselben Farbton wie im Diagramm -- nur als Rand und Zeichen
   statt als Fläche. Wer "Dokument erzeugen" hier grün sieht,
   findet es drüben grün wieder.

   Jeder Farbton kommt genau einmal vor. Zwei Bausteine in
   derselben Farbe wären schlimmer als gar keine Farbe: Man
   hielte sie für dasselbe.
   ------------------------------------------------------------ */
.palette .palette__stueck {
  background: rgba(8,26,59,.55);
  border: 1px solid var(--g-rand-fein);
  color: var(--g-hell);
  font-weight: 500;
  text-align: left;
  box-shadow: none;
}
.palette .palette__stueck:hover {
  transform: translateY(-1px);
  background: rgba(12,40,84,.72);
}

/* Farbton, Rand und Zeichen je Baustein. Der Schein am Rand
   ist derselbe Farbwert wie das Zeichen -- so wirkt der Knopf
   wie aus einem Stück. */
.palette .palette__stueck.g-formular       { border-color: rgba(124,196,255,.55); }
.palette .palette__stueck.g-formular svg   { color: #7CC4FF; }
.palette .palette__stueck.g-formular:hover { border-color: #7CC4FF; box-shadow: 0 0 0 1px rgba(124,196,255,.35), 0 0 14px rgba(124,196,255,.28); }

.palette .palette__stueck.g-ki_rueckfrage       { border-color: rgba(103,220,255,.55); }
.palette .palette__stueck.g-ki_rueckfrage svg   { color: #67DCFF; }
.palette .palette__stueck.g-ki_rueckfrage:hover { border-color: #67DCFF; box-shadow: 0 0 0 1px rgba(103,220,255,.35), 0 0 14px rgba(103,220,255,.28); }

.palette .palette__stueck.g-genehmigung       { border-color: rgba(167,156,255,.55); }
.palette .palette__stueck.g-genehmigung svg   { color: #A79CFF; }
.palette .palette__stueck.g-genehmigung:hover { border-color: #A79CFF; box-shadow: 0 0 0 1px rgba(167,156,255,.35), 0 0 14px rgba(167,156,255,.28); }

.palette .palette__stueck.g-bedingung       { border-color: rgba(216,156,255,.55); }
.palette .palette__stueck.g-bedingung svg   { color: #D89CFF; }
.palette .palette__stueck.g-bedingung:hover { border-color: #D89CFF; box-shadow: 0 0 0 1px rgba(216,156,255,.35), 0 0 14px rgba(216,156,255,.28); }

.palette .palette__stueck.g-verfuegbarkeit       { border-color: rgba(143,168,255,.55); }
.palette .palette__stueck.g-verfuegbarkeit svg   { color: #8FA8FF; }
.palette .palette__stueck.g-verfuegbarkeit:hover { border-color: #8FA8FF; box-shadow: 0 0 0 1px rgba(143,168,255,.35), 0 0 14px rgba(143,168,255,.28); }

.palette .palette__stueck.g-aufgabe       { border-color: rgba(110,231,176,.55); }
.palette .palette__stueck.g-aufgabe svg   { color: #6EE7B0; }
.palette .palette__stueck.g-aufgabe:hover { border-color: #6EE7B0; box-shadow: 0 0 0 1px rgba(110,231,176,.35), 0 0 14px rgba(110,231,176,.28); }

.palette .palette__stueck.g-email       { border-color: rgba(95,224,208,.55); }
.palette .palette__stueck.g-email svg   { color: #5FE0D0; }
.palette .palette__stueck.g-email:hover { border-color: #5FE0D0; box-shadow: 0 0 0 1px rgba(95,224,208,.35), 0 0 14px rgba(95,224,208,.28); }

.palette .palette__stueck.g-dokument       { border-color: rgba(182,232,106,.55); }
.palette .palette__stueck.g-dokument svg   { color: #B6E86A; }
.palette .palette__stueck.g-dokument:hover { border-color: #B6E86A; box-shadow: 0 0 0 1px rgba(182,232,106,.35), 0 0 14px rgba(182,232,106,.28); }

.palette .palette__stueck.g-warten       { border-color: rgba(250,199,117,.55); }
.palette .palette__stueck.g-warten svg   { color: #FAC775; }
.palette .palette__stueck.g-warten:hover { border-color: #FAC775; box-shadow: 0 0 0 1px rgba(250,199,117,.35), 0 0 14px rgba(250,199,117,.28); }

.palette .palette__stueck.g-ende       { border-color: rgba(184,199,220,.5); }
.palette .palette__stueck.g-ende svg   { color: #B8C7DC; }
.palette .palette__stueck.g-ende:hover { border-color: #B8C7DC; box-shadow: 0 0 0 1px rgba(184,199,220,.3), 0 0 14px rgba(184,199,220,.22); }

/* Die Zeichen leuchten leise mit -- ohne den Schein sähen sie
   auf dunklem Glas wie ausgegraut aus. */
.palette .palette__stueck svg {
  filter: drop-shadow(0 0 6px currentColor);
  opacity: .95;
}

.palette .palette__stueck span,
.editor-spalten .zelle span,
.editor-spalten .zelle b { color: inherit; }
.editor-spalten .zelle__unter { color: inherit; opacity: .72; }

/* ============================================================
   Ablageflächen und Pfeile
   ============================================================
   Auf hellem Grund reichte eine dünne gestrichelte Linie. Auf
   dunklem verschwindet sie -- man sieht nicht mehr, wohin man
   einen Baustein ziehen kann.
   ============================================================ */
.einschub, .zwischen {
  border-width: 2px;
  border-style: dashed;
  border-color: rgba(124,187,255,.34);
  border-radius: 12px;
  color: #8FA9C7;
  font-weight: 500;
}
.einschub:hover, .zwischen:hover {
  border-color: #4FE6FF;
  border-style: dashed;
  background: rgba(79,230,255,.1);
  color: var(--g-tuerkis);
}
.einschub--ziel, .zwischen--ziel {
  border-width: 2px;
  border-color: #4FE6FF;
  background: rgba(79,230,255,.16);
  color: var(--g-tuerkis);
}

/* Die Pfeile zwischen den Zeilen: dicker und heller. Sie
   tragen den Ablauf -- man liest an ihnen, was worauf folgt. */
.pfeil, .pfeil svg {
  color: #8FA9C7;
  stroke-width: 2.2;
}
.pfeil svg path, .zwischen svg path { stroke-width: 2.2; }
.zwischen__text, .pfeil span { color: #A9BDD4; font-size: .78125rem; }

/* ============================================================
   Schülersuche im Vorgang
   ============================================================
   Ein Suchfeld, keine Liste: Bei tausend Schülern wäre eine
   Auswahlliste unbrauchbar. Drei Buchstaben, dann die Treffer.
   ============================================================ */
.schuelerfeld { position: relative; margin-bottom: 1rem; }

.schuelerfeld__treffer {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 17rem;
  overflow-y: auto;
  padding: .25rem;
  border: 1px solid rgba(124,187,255,.4);
  border-radius: 14px;
  background: rgba(10,33,68,.97);
  box-shadow: 0 20px 60px rgba(0,10,30,.5);
  backdrop-filter: blur(20px);
}
.schuelerfeld__treffer-zeile {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  width: 100%;
  padding: .5rem .75rem;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--g-hell);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.schuelerfeld__treffer-zeile:hover { background: rgba(79,230,255,.14); }
.schuelerfeld__treffer-zeile b { font-size: .9375rem; font-weight: 650; }
/* Klasse, Betrieb und Geburtsdatum helfen beim Unterscheiden --
   bei zwei Schwestern in derselben Klasse ist das Geburtsdatum
   das einzige Merkmal. */
.schuelerfeld__treffer-zeile span { font-size: .78125rem; color: #93A8C0; }

.schuelerfeld__gewaehlt {
  margin-top: .375rem;
  padding: .5rem .75rem;
  border-left: 3px solid #4FD99B;
  border-radius: 0 8px 8px 0;
  background: rgba(26,92,56,.28);
  color: #C8F3DC;
  font-size: .8125rem;
}

/* ============================================================
   Der Zahlenblock in der Vorschau
   ============================================================ */
.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .75rem;
  margin: 1rem 0 1.25rem;
}
.zahl {
  padding: .875rem 1rem;
  border: 1px solid var(--g-rand-fein);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
}
.zahl__wert { display: block; font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; }
.zahl__label {
  display: block;
  margin-top: .1875rem;
  font-size: .71875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Die Dateiauswahl. */
input[type="file"] {
  padding: .75rem;
  border-style: dashed;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: .875rem;
  padding: .4375rem 1rem;
  border: 1px solid rgba(124,187,255,.36);
  border-radius: 9px;
  background: rgba(255,255,255,.08);
  color: var(--g-hell);
  font: inherit;
  font-size: .84375rem;
  font-weight: 600;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  border-color: #4FE6FF;
  background: rgba(79,230,255,.14);
  color: var(--g-tuerkis);
}

/* ============================================================
   Der Vorlageneditor
   ============================================================
   Hier entsteht ein Schreiben, das gedruckt wird. Deshalb ist
   das Blatt hell und bleibt es: Was auf dem Bildschirm steht,
   soll aussehen wie das, was aus dem Drucker kommt.

   Alles darum herum -- Feldleiste, Werkzeuge, Angaben -- folgt
   der Formensprache der übrigen Anwendung.
   ============================================================ */

/* Das Blatt: Papier, nicht Glas. */
.blatt {
  background: #FFFFFF;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,10,30,.4);
}
.blatt *, .blatt p, .blatt div, .blatt span, .blatt h1, .blatt h2, .blatt h3 {
  color: var(--text);
}
.blatt__kopf { color: var(--text-still); background: none; }
.blattbereich { background: none; }

/* Die eingesetzten Felder auf dem Blatt bleiben in ihrem
   Bernstein -- sie sind Platzhalter, kein Text. Auf weißem
   Papier heißt das dunkle Schrift auf hellem Grund, nicht
   umgekehrt. */
.blatt .feld, .vorschau .feld {
  background: #FBF0DC;
  border: 1px solid #E0C48A;
  color: #4A3210;
}


.feldleiste__kopf { border-bottom-color: var(--g-rand-fein); }

.feldleiste__kopf p  { color: var(--g-still); }


/* Ein Feld zum Hineinziehen. Der Titel trägt die Bedeutung --
   er war im Betrieb unsichtbar, weil er keine eigene Farbe
   hatte und die helle vom Grund erbte. */
.feldchip {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(124,187,255,.3);
  color: var(--g-hell);
}
.feldchip:hover {
  border-color: #4FE6FF;
  background: rgba(79,230,255,.12);
}
.feldchip b, .feldchip strong { color: var(--g-hell); font-weight: 650; }
.feldchip__her, .feldchip span { color: var(--g-still); }

/* Felder, die immer verfügbar sind (Aktenzeichen, Datum),
   heben sich ab: Sie stammen aus dem Vorgang selbst, nicht aus
   einem Formular. */
.feldchip--immer {
  background: rgba(200,137,31,.2);
  border-color: rgba(235,190,110,.42);
  color: #FFDCA0;
}
.feldchip--immer b, .feldchip--immer strong { color: #FFDCA0; }
.feldchip--immer:hover {
  border-color: #EBBE6E;
  background: rgba(200,137,31,.3);
}

/* Die Vorschau rechts zeigt, wie das Schreiben aussehen wird
   -- also ebenfalls auf Papier. */
.vorschau {
  background: #FFFFFF;
  color: var(--text);
  border-radius: 6px;
}
.vorschau *, .vorschau b, .vorschau p, .vorschau div { color: var(--text); }


/* Die Werkzeugleiste über dem Blatt. */
.werkzeuge {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(124,187,255,.28);
  border-radius: 14px;
}
.werkzeuge button {
  border-color: rgba(124,187,255,.28);
  background: rgba(255,255,255,.06);
  color: var(--g-hell);
}
.werkzeuge button:hover {
  border-color: #4FE6FF;
  background: rgba(79,230,255,.14);
  color: var(--g-tuerkis);
}

/* Die Angabenspalte rechts. */
.fenster__inhalt label { color: #C8D8EA; }
.fenster__inhalt p { color: var(--g-still); }

/* Die Feldleiste ist entfallen -- die Felder erscheinen jetzt
   als Menü an der Cursorstelle. Ihre Regeln standen noch hier
   und gestalteten nichts mehr. */


/* ============================================================
   Technical Center
   ============================================================ */
.tc-lade { background: rgba(3,18,38,.72); backdrop-filter: blur(8px); }
.tc-lade__inhalt {
  background: var(--g-glas);
  border: 1px solid var(--g-rand);
  box-shadow: var(--g-schatten);
}
.tc-lade__kopf { border-bottom: 1px solid var(--g-rand-fein); }
.tc-lade__fuss { border-top: 1px solid var(--g-rand-fein); background: rgba(255,255,255,.04); }

.tc-geaendert { background: rgba(200,137,31,.22); color: #FFDCA0; }

/* "Quelltext" ist der Normalfall -- ruhig. Eine eigene Fassung
   ist eine Abweichung und darf auffallen. */
.tc-stand { background: rgba(255,255,255,.1); color: #C9D9EA; }
.tc-stand--eigen { background: rgba(79,230,255,.18); color: var(--g-tuerkis); }

.tc-marke { background: rgba(255,255,255,.08); color: #C3D2E4; }
.tc-marke--klick { border: 1px solid rgba(124,187,255,.3); }
.tc-marke--klick:hover { border-color: #4FE6FF; background: rgba(79,230,255,.14); color: var(--g-tuerkis); }
/* Ein Platzhalter, den der Endpunkt braucht -- ohne ihn rät das
   Modell. */
.tc-marke--noetig { background: rgba(200,137,31,.2); border-color: rgba(235,190,110,.42); color: #FFDCA0; }
.tc-platzhalter__titel { color: var(--g-still); }

#ed-text { background: rgba(3,20,45,.6); border-color: rgba(124,187,255,.36); color: #E4EFFA; }

.tc-fassung {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(124,187,255,.24);
  color: var(--g-hell);
}
.tc-fassung:hover { border-color: #4FE6FF; background: rgba(79,230,255,.1); }
.tc-fassung span { color: var(--g-still); }
.tc-fassung--aktiv {
  border-color: rgba(110,231,176,.5);
  background: rgba(30,120,85,.24);
}
.tc-fassung--aktiv b { color: #8FEFC4; }
.tc-fassung--quelltext { border-style: dashed; }

.tc-diff { background: rgba(3,20,45,.5); }
.tc-diff__zeile--gleich { color: #8FA9C7; }
.tc-diff__zeile--weg    { background: rgba(120,26,20,.34); color: #FFC9C4; }
.tc-diff__zeile--neu    { background: rgba(30,120,85,.28); color: #8FEFC4; }

.tc-antwort { background: rgba(3,20,45,.6); color: #DCE7F4; }

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

/* Die Klassen, die eine Person leitet. Sie stehen in der
   Liste, weil sie der Grund sind, warum jemand ein Schreiben
   an eine Klasse erzeugen darf. */
.zeile__klassen { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .3125rem; }
.klassenmarke {
  padding: .125rem .4375rem;
  border-radius: 6px;
  background: rgba(79,230,255,.16);
  color: #67DCFF;
  font-size: .6875rem;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Vertretung: dieselben Rechte, andere Anzeige. */
.klassenmarke--vertretung {
  background: rgba(255,255,255,.1);
  color: #C9D9EA;
}

/* Drei Zustände, immer sichtbar -- sonst weiß niemand, wer
   noch nicht hineinkommt. */
.zeile__stand { flex: none; text-align: right; }
.einladung {
  display: block;
  padding: .125rem .5rem;
  border-radius: 6px;
  background: rgba(255,255,255,.1);
  color: #C9D9EA;
  font-size: .71875rem;
  font-weight: 600;
  white-space: nowrap;
}
.einladung--wartet { background: rgba(200,137,31,.2);  color: #FFDCA0; }
.einladung--fertig { background: rgba(30,120,85,.32);  color: #8FEFC4; }
.zeile__wann {
  display: block;
  margin-top: .1875rem;
  font-size: .6875rem;
  color: #7E93AC;
  white-space: nowrap;
}

/* Der Einladeknopf in der Zeile: Nach einem Import will man
   vierzig Einladungen versenden, ohne vierzigmal ein Blatt zu
   öffnen. */
.zeile__knopf { flex: none; padding: .375rem .75rem; font-size: .8125rem; }
.zeile__knopf--gesperrt { opacity: .4; cursor: default; }
.zeile__knopf--gesperrt:hover { border-color: rgba(255,255,255,.26); transform: none; }

/* Das Bearbeiten-Blatt. Die Rollen nutzen die vorhandene
   Kästchenliste -- eine zweite wäre eine zweite Wahrheit. */
.pb-klasse {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .4375rem 0;
  border-bottom: 1px solid var(--g-rand-fein);
}
.pb-klasse .hinweis { flex: 1; margin: 0; }

/* ============================================================
   Mehrere Reservierungen je Tag
   ============================================================
   Eine Buchung füllte vorher die ganze Zelle -- ein Raum ließ
   sich pro Tag nur einmal reservieren, obwohl andere Zeiten
   frei sind.

   Jetzt stehen die Buchungen untereinander, darunter ein
   gestricheltes Feld mit Kreuz für die nächste.
   ============================================================ */
.plan__tag {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  min-height: 3.25rem;
}
.plan__tag .beleg { flex: none; }

.beleg-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  padding: 0;
  border: 1px dashed rgba(124,187,255,.3);
  border-radius: 7px;
  background: none;
  color: #8FA9C7;
  cursor: pointer;
  opacity: .5;
  transition: opacity .15s ease, border-color .15s ease, background .15s ease;
}
/* Zurückhaltend, bis man hinfährt: In einem Wochenplan mit
   fünfundzwanzig Feldern wären fünfundzwanzig Kreuze Unruhe. */
.plan__tag:hover .beleg-plus { opacity: 1; }
.beleg-plus:hover {
  border-color: #4FE6FF;
  background: rgba(79,230,255,.1);
  color: var(--g-tuerkis);
  opacity: 1;
}
/* Eine leere Zelle braucht kein zusätzliches Kreuz -- sie ist
   selbst die Fläche zum Klicken. */
.plan__tag:not(:has(.beleg)) .beleg-plus { min-height: 2.5rem; }

/* ============================================================
   Raumauswahl mit Kästchen
   ============================================================
   Ein Haken allein sagt nicht, dass man klicken kann. Ein
   Kästchen davor schon -- und bei zwanzig Räumen sieht man auf
   einen Blick, was gewählt ist.
   ============================================================ */
.auswahl__kopf {
  display: flex;
  gap: .25rem;
  padding: .25rem .25rem .375rem;
  margin-bottom: .1875rem;
  border-bottom: 1px solid var(--g-rand-fein);
}
.auswahl__alle {
  flex: 1;
  padding: .3125rem .5rem;
  border: 1px solid rgba(124,187,255,.28);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: #A9BDD4;
  font: inherit;
  font-size: .71875rem;
  font-weight: 600;
  cursor: pointer;
}
.auswahl__alle:hover {
  border-color: #4FE6FF;
  background: rgba(79,230,255,.12);
  color: var(--g-tuerkis);
}

.auswahl__kasten {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  border: 1px solid rgba(124,187,255,.42);
  border-radius: 5px;
  background: rgba(3,24,55,.5);
  color: #fff;
}
.auswahl__kasten--an {
  border-color: transparent;
  background: linear-gradient(135deg, #1B6FD0, #2264DE);
}
.auswahl__name { flex: 1; text-align: left; }

/* Die Zeit im Konflikthinweis. Ohne sie sieht man nicht, WARUM
   es kollidiert -- und hält eine richtige Meldung für einen
   Fehler. */
.konflikt__zeit {
  display: block;
  margin: .125rem 0;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------------
   Experten
   ------------------------------------------------------------ */
.grundlage {
  background: rgba(8,26,59,.5);
  border-color: var(--g-rand-fein);
}
.ex-umfang__balken      { background: var(--g-rand-fein); }
.ex-umfang__balken span { background: var(--g-tuerkis); }
.ex-probe {
  background: rgba(8,26,59,.5);
  border-color: var(--g-rand-fein);
}
.ex-probe__antwort { color: var(--g-hell); }

/* Das Expertengespräch am Arbeitsplatz. Dieselbe Bauart wie das
   Gespräch im Vorgang -- deshalb erbt es dessen Blasen und
   braucht hier nur seinen Rahmen. */
.experte {
  margin-top: .75rem;
  padding: .875rem 1rem;
  background: var(--g-glas);
  border: 1px solid var(--g-rand);
  border-radius: 18px;
}
.experte__kopf {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.experte__name {
  flex: 1;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--g-hell);
}


/* ------------------------------------------------------------
   Der Vorlageneditor
   ------------------------------------------------------------ */
.werkzeuge__fuss { color: var(--g-still); }
.blatt-kopf, .blatt-fuss-zeile { color: var(--g-still); }
.blatt-fuss-zeile { border-top-color: var(--g-rand-fein); }

.feldmenue, .mehr-menue, .fenster-schicht__blatt {
  background: linear-gradient(180deg, rgba(17,54,105,.96), rgba(8,26,59,.98));
  border: 1px solid var(--g-rand);
  color: var(--g-hell);
  box-shadow: 0 18px 44px rgba(0,8,24,.55);
}
.feldmenue__gruppe { color: var(--g-still); }
.feldmenue__feld   { color: var(--g-gedaempft); }
.feldmenue__feld:hover { background: rgba(103,220,255,.14); color: var(--g-hell); }
.mehr-menue button { color: var(--g-gedaempft); }
.mehr-menue button:hover { background: rgba(103,220,255,.14); color: var(--g-hell); }
.mehr-menue__trenner { background: var(--g-rand-fein); }
.mehr-menue__weg { color: #FFB4A8; }

.fenster-schicht { background: rgba(2,10,24,.62); backdrop-filter: blur(3px); }

.einlesen__warnung {
  background: rgba(250,199,117,.12);
  border: 1px solid rgba(250,199,117,.38);
  color: #FAC775;
}
.einlesen__probe {
  background: rgba(8,26,59,.5);
  border-color: var(--g-rand-fein);
  color: var(--g-gedaempft);
}
.vorschau__leer { color: var(--g-still); }

.vorlagenzeile__weg {
  border-color: var(--g-rand-fein);
  color: var(--g-still);
}
.vorlagenzeile__weg:hover { border-color: #FF8A80; color: #FFB4A8; }

.blatt .blatt__bild img:hover { outline-color: var(--g-rand); }
.blatt__bild--fehlt { border-color: #FF8A80; color: #FFB4A8; }

.bildleiste {
  background: rgba(8,26,59,.5);
  border-color: var(--g-rand-fein);
}
.bildleiste__wort { color: var(--g-still); }
.bildleiste__mass { color: var(--g-hell); }
.bildleiste__trenner { background: var(--g-rand-fein); }
.bildleiste button {
  border-color: rgba(106,180,255,.30);
  color: var(--g-gedaempft);
}
.bildleiste button:hover { border-color: var(--g-rand); color: var(--g-hell); }
.bildleiste__weg:hover { border-color: #FF8A80; color: #FFB4A8; }
.blatt__bild--gewaehlt { outline-color: var(--g-tuerkis); }

.werkzeuge button { color: var(--g-gedaempft); }
.werkzeuge button:hover { background: rgba(103,220,255,.14); color: var(--g-hell); }
.werkzeuge__haupt { border-color: var(--g-rand) !important; color: var(--g-tuerkis); }
.werkzeuge__fuss { color: var(--g-still); }
.werkzeuge__trenner { background: var(--g-rand-fein); }
.bildleiste button[aria-pressed="true"] {
  background: rgba(103,220,255,.18);
  border-color: var(--g-tuerkis);
  color: var(--g-hell);
}

.blatt__anfasser { border-color: var(--g-tuerkis); background: #FBFAF7; }
.blatt__bild--gewaehlt img { outline-color: var(--g-tuerkis); }
.bildleiste button[aria-pressed="true"] { border-color: var(--g-tuerkis); }

/* Im Dunkeldesign die hellen Stufen -- die dunklen wären auf
   dem Glas nicht zu lesen. */
.feldmenue__gruppe--blau      { color: #85B7EB; }
.feldmenue__band--blau        { border-left-color: #378ADD; }
.feldmenue__gruppe--tuerkis   { color: #5DCAA5; }
.feldmenue__band--tuerkis     { border-left-color: #1D9E75; }
.feldmenue__gruppe--bernstein { color: #EF9F27; }
.feldmenue__band--bernstein   { border-left-color: #BA7517; }
.feldmenue__gruppe--violett   { color: #AFA9EC; }
.feldmenue__band--violett     { border-left-color: #7F77DD; }
.feldmenue__gruppe--rosa      { color: #ED93B1; }
.feldmenue__band--rosa        { border-left-color: #D4537E; }
.feldmenue__gruppe--koralle   { color: #F0997B; }
.feldmenue__band--koralle     { border-left-color: #D85A30; }
.feldmenue__gruppe--gruen     { color: #97C459; }
.feldmenue__band--gruen       { border-left-color: #639922; }
.feldmenue__gruppe--grau      { color: var(--g-still); }
.feldmenue__band--grau        { border-left-color: var(--g-rand-fein); }
.feldmenue__hinweis           { color: var(--g-still); }

/* Die Werkzeugsymbole tragen jetzt SVG statt Textzeichen. */
.werkzeuge button svg { display: block; }

.werkzeuge__groesse {
  background: rgba(8,26,59,.6);
  border-color: rgba(106,180,255,.3);
  color: var(--g-hell);
}


/* ------------------------------------------------------------
   Farben in der Werkzeugleiste
   ------------------------------------------------------------
   Auf dunklem Glas die hellen Stufen als Schrift und die
   mittleren als Rand -- die dunklen wären nicht zu lesen. */
.werkzeuge button[data-befehl="fett"] {
  background: rgba(55,138,221,.18); border-color: rgba(55,138,221,.55); color: #85B7EB;
}
.werkzeuge button[data-befehl="punkte"],
.werkzeuge button[data-befehl="zahlen"] {
  background: rgba(127,119,221,.18); border-color: rgba(127,119,221,.55); color: #AFA9EC;
}
.werkzeuge button[data-befehl="linie"],
.werkzeuge #bild-einfuegen {
  background: rgba(29,158,117,.18); border-color: rgba(29,158,117,.55); color: #5DCAA5;
}
.werkzeuge #zurueck-schritt {
  background: rgba(186,117,23,.16); border-color: rgba(186,117,23,.5); color: #EF9F27;
}
.werkzeuge__haupt {
  background: rgba(103,220,255,.2);
  border-color: #67DCFF !important;
  color: #67DCFF;
}
.bildleiste__weg {
  background: rgba(226,75,74,.14); border-color: rgba(226,75,74,.5); color: #F09595;
}
.bildleiste__weg:hover { border-color: #F09595; color: #FFB4A8; }

/* Beim Ueberfahren wird der Rand voll -- die Flaeche bleibt,
   damit der Knopf nicht springt. */
.werkzeuge button[data-befehl="fett"]:hover   { border-color: #378ADD; }
.werkzeuge button[data-befehl="punkte"]:hover,
.werkzeuge button[data-befehl="zahlen"]:hover { border-color: #7F77DD; }
.werkzeuge button[data-befehl="linie"]:hover,
.werkzeuge #bild-einfuegen:hover              { border-color: #1D9E75; }
.werkzeuge #zurueck-schritt:hover             { border-color: #BA7517; }

/* Ein gesperrter Knopf traegt keine Farbe. */
.werkzeuge button:disabled {
  background: none;
  border-color: var(--g-rand-fein);
  color: #55708F;
}


/* ============================================================
   Vorgangs-Generator
   ============================================================ */
.generator__dialog, .g-tafel {
  background: var(--g-glas);
  border-color: var(--g-rand);
}
.g-vorschlag {
  border-color: rgba(106,180,255,.4);
  color: var(--g-gedaempft);
  background: none;
}
.g-vorschlag:hover {
  border-color: var(--g-tuerkis);
  background: rgba(103,220,255,.12);
  color: var(--g-hell);
}
.g-reiter__knopf {
  border-color: rgba(106,180,255,.22);
  color: var(--g-still);
  background: none;
}
.g-reiter__knopf[aria-selected="true"] {
  background: rgba(103,220,255,.16);
  border-color: var(--g-tuerkis);
  color: var(--g-tuerkis);
}
.g-pfeil { color: var(--g-still); }

/* Die Bausteine bleiben hell -- ihre Farben tragen Bedeutung,
   und auf Glas ließen sie sich nicht unterscheiden. Das ist
   dieselbe Entscheidung wie im Prozesseditor. */

.g-blatt { background: #FBFAF7; color: #2A2A28; }
.g-blatt__kopf, .g-blatt__fuss { color: #8A8A84; }

.g-fragen {
  background: rgba(250,199,117,.08);
  border: 1px solid rgba(250,199,117,.32);
}
.g-fragen__kopf { color: #FAC775; }
.g-frage { color: #D9C6A4; }

.g-zweig { border-left-color: rgba(106,180,255,.3); }
.g-zweig__bedingung, .g-verweis, .g-abseits__kopf { color: var(--g-still); }
.g-offen {
  border-color: rgba(106,180,255,.35);
  color: var(--g-still);
}

/* Bernstein, nicht Rot. Rot bleibt dem Entfernen vorbehalten --
   eine Farbe, die überall vorkommt, warnt nirgends mehr. Ein
   fehlender Übergang ist auch nichts Zerstörerisches, sondern
   etwas, das noch fehlt. */
.g-luecken {
  background: rgba(250,199,117,.12);
  border: 1px solid rgba(250,199,117,.5);
}
.g-luecken .g-fragen__kopf { color: #FAC775; }
.g-luecke { color: #E4D3B4; }

.g-roh {
  background: rgba(8,26,59,.6);
  border: 1px solid var(--g-rand-fein);
  color: var(--g-gedaempft);
}

.g-zusammen { color: var(--g-still); }

/* Die Übersicht des Generators. */
.vorlagenzeile__weg { border-color: var(--g-rand-fein); color: var(--g-still); }
.vorlagenzeile__weg:hover { border-color: #FF8A80; color: #FFB4A8; }
#ansicht-liste .sortierung__wort { color: var(--g-hell); }
#ansicht-liste .sortierung__knopf {
  border-color: rgba(106,180,255,.42);
  color: var(--g-tuerkis);
  background: rgba(103,220,255,.1);
}
#ansicht-liste .sortierung__knopf:hover {
  border-color: var(--g-tuerkis);
  background: rgba(103,220,255,.18);
  color: var(--g-hell);
}

.knopf--bereit {
  border-color: #6EE7B0 !important;
  box-shadow: 0 0 0 1px rgba(110,231,176,.4), 0 0 16px rgba(110,231,176,.3);
}

/* Die Zeichen der Vorgänge -- dieselbe Farbfamilie wie im
   Feldmenü. Eine zweite nebenan sähe aus wie ein Versehen. */
.g-symbol--blau      { background: rgba(55,138,221,.16);  border-color: rgba(55,138,221,.5);  color: #85B7EB; }
.g-symbol--tuerkis   { background: rgba(29,158,117,.16);  border-color: rgba(29,158,117,.5);  color: #5DCAA5; }
.g-symbol--bernstein { background: rgba(186,117,23,.16);  border-color: rgba(186,117,23,.5);  color: #EF9F27; }
.g-symbol--violett   { background: rgba(127,119,221,.16); border-color: rgba(127,119,221,.5); color: #AFA9EC; }
.g-symbol--rosa      { background: rgba(212,83,126,.16);  border-color: rgba(212,83,126,.5);  color: #ED93B1; }
.g-symbol--koralle   { background: rgba(216,90,48,.16);   border-color: rgba(216,90,48,.5);   color: #F0997B; }
.g-symbol--gruen     { background: rgba(99,153,34,.16);   border-color: rgba(99,153,34,.5);   color: #97C459; }
.g-symbol--grau      { background: rgba(255,255,255,.06); border-color: var(--g-rand-fein);   color: var(--g-still); }
.g-symbol--offen     { color: var(--g-still); }

/* ------------------------------------------------------------
   Die gemeinsame Prozessliste
   ------------------------------------------------------------ */
.listenkopf__titel { color: var(--g-hell); }
.zustandsfilter__knopf { border-color: rgba(106,180,255,.25); color: var(--g-still); }
.zustandsfilter__knopf[aria-pressed="true"] {
  background: rgba(103,220,255,.16);
  border-color: var(--g-tuerkis);
  color: var(--g-tuerkis);
}
.prozessliste__kopf { color: #6A8AAE; }
.prozesszeile { border-top-color: rgba(106,180,255,.16); }
.prozesszeile:hover { background: rgba(103,220,255,.05); }
.prozesszeile__titel { color: var(--g-hell); }
.prozesszeile__unter, .prozesszeile__datum { color: var(--g-still); }

.zustand--tuerkis   { background: rgba(103,220,255,.14); border-color: rgba(103,220,255,.45); color: #67DCFF; }
.zustand--bernstein { background: rgba(250,199,117,.14); border-color: rgba(250,199,117,.5);  color: #FAC775; }
.zustand--gruen     { background: rgba(99,153,34,.16);   border-color: rgba(99,153,34,.5);    color: #97C459; }
.zustand--grau      { background: rgba(255,255,255,.05); border-color: var(--g-rand-fein);    color: var(--g-still); }

.handgriff { border-color: rgba(106,180,255,.28); color: var(--g-gedaempft); }
.handgriff:hover { border-color: var(--g-rand); color: var(--g-hell); }
.handgriff--wichtig { border-color: rgba(103,220,255,.45); color: var(--g-tuerkis); }
.handgriff--weg:hover { border-color: #FF8A80; color: #FFB4A8; }
.handgriff--gesperrt { border-color: rgba(106,180,255,.18); color: #44607E; }

.umbenennen { background: var(--g-glas); border-color: var(--g-rand); }

a.knopf { text-decoration: none; color: var(--g-gedaempft); }
a.knopf:hover { color: var(--g-hell); border-color: var(--g-rand); }
#g-ruhen { background: none; border-color: rgba(106,180,255,.28); color: var(--g-gedaempft); }
#g-ruhen:hover { border-color: var(--g-rand); color: var(--g-hell); }

/* Ein gesperrter Hauptknopf bleibt erkennbar als das Ziel --
   nur eben noch nicht erreichbar. */
/* Ein gesperrter Hauptknopf bleibt lesbar: #55708F ergab auf
   dieser Fläche 2,85:1 -- unter der Grenze und damit für
   manche gar nicht erkennbar. */
.knopf--haupt:disabled {
  background: rgba(255,255,255,.05);
  border-color: rgba(106,180,255,.22);
  color: #93A8C0;
}


/* ------------------------------------------------------------
   Generator · kräftigere Farben
   ------------------------------------------------------------
   Die Zeichen waren auf dem dunklen Grund zu blass: 16 Prozent
   Deckung tragen bei 21 Pixeln nicht. Flächen und Ränder
   stärker, Schrift heller. */
.g-symbol--blau      { background: rgba(55,138,221,.3);  border-color: rgba(55,138,221,.85);  color: #A9D0F5; }
.g-symbol--tuerkis   { background: rgba(29,158,117,.3);  border-color: rgba(29,158,117,.85);  color: #7FE0BC; }
.g-symbol--bernstein { background: rgba(186,117,23,.3);  border-color: rgba(239,159,39,.85);  color: #FFC069; }
.g-symbol--violett   { background: rgba(127,119,221,.3); border-color: rgba(127,119,221,.85); color: #C7C2F5; }
.g-symbol--rosa      { background: rgba(212,83,126,.3);  border-color: rgba(212,83,126,.85);  color: #F5AEC5; }
.g-symbol--koralle   { background: rgba(216,90,48,.3);   border-color: rgba(216,90,48,.85);   color: #FFB093; }
.g-symbol--gruen     { background: rgba(99,153,34,.3);   border-color: rgba(99,153,34,.85);   color: #B5DC7C; }
.g-symbol--grau      { background: rgba(255,255,255,.1); border-color: rgba(106,180,255,.4);  color: #C3D2E6; }
.g-symbol--offen     { color: #93A8C0; }

/* Die Zustandsmarken ebenso. */
.zustand--tuerkis   { background: rgba(103,220,255,.2); border-color: rgba(103,220,255,.7); color: #8CE6FF; }
.zustand--bernstein { background: rgba(250,199,117,.2); border-color: rgba(250,199,117,.7); color: #FFD48C; }
.zustand--gruen     { background: rgba(99,153,34,.24);  border-color: rgba(151,196,89,.75); color: #B5DC7C; }
.zustand--grau      { background: rgba(255,255,255,.09); border-color: rgba(106,180,255,.35); color: #B8C7DC; }

/* Die Ueberschriftenleiste war kaum zu lesen. */
.prozessliste__kopf { color: #93A8C0; }

/* Die Filterleiste: Ring statt Strich, Zahl im Kreis. */
.zustandsfilter__knopf {
  background: rgba(255,255,255,.06);
  border-color: rgba(106,180,255,.35);
  color: var(--g-gedaempft);
}
.zustandsfilter__knopf:hover {
  border-color: var(--g-rand);
  color: var(--g-hell);
}
.zustandsfilter__knopf[aria-pressed="true"] {
  background: rgba(103,220,255,.2);
  border-color: var(--g-tuerkis);
  color: #8CE6FF;
}
.zustandsfilter__zahl {
  background: rgba(255,255,255,.12);
  color: var(--g-hell);
}
.zustandsfilter__knopf[aria-pressed="true"] .zustandsfilter__zahl {
  background: rgba(103,220,255,.35);
  color: #EAFBFF;
}
/* Jeder Zustand faerbt seinen Kreis -- dieselbe Farbe wie die
   Marke in der Zeile daneben. */
.zustandsfilter__knopf--tuerkis   .zustandsfilter__zahl { background: rgba(103,220,255,.3); color: #8CE6FF; }
.zustandsfilter__knopf--bernstein .zustandsfilter__zahl { background: rgba(250,199,117,.3); color: #FFD48C; }
.zustandsfilter__knopf--gruen     .zustandsfilter__zahl { background: rgba(151,196,89,.3);  color: #B5DC7C; }
.zustandsfilter__knopf--grau      .zustandsfilter__zahl { background: rgba(255,255,255,.14); color: #C3D2E6; }


/* Der gesperrte Zielknopf bleibt erkennbar.
   
   Vorher war er kaum vom Hintergrund zu unterscheiden -- dabei
   ist er das Ziel des ganzen Gespraechs und soll sagen: hier
   geht es hin, nur noch nicht. */
#g-fertig:disabled {
  background: rgba(255,255,255,.07);
  border-color: rgba(106,180,255,.4) !important;
  color: #93A8C0;
  box-shadow: none;
  opacity: 1;
}

/* Die vier Knöpfe der Kopfzeilen -- an den Kennungen, damit
   sie ohne die Gruppe in generator.html wirken. */
#g-ruhen, .knopf--zweitweg {
  background: rgba(103,220,255,.14);
  border-color: rgba(103,220,255,.55) !important;
  color: #8CE6FF;
}
#g-ruhen:hover, .knopf--zweitweg:hover {
  background: rgba(103,220,255,.24);
  border-color: #67DCFF !important;
  color: #EAFBFF;
}

/* Die Handgriffe farbig hinterlegen -- jeder in der Farbe
   seiner Handlung. Drei gleiche Kaestchen zwangen dazu, die
   Zeichen zu suchen. */
.handgriff--stift { background: rgba(55,138,221,.22);  border-color: rgba(55,138,221,.7);  color: #A9D0F5; }
.handgriff--kopie { background: rgba(29,158,117,.22);  border-color: rgba(29,158,117,.7);  color: #7FE0BC; }
.handgriff--weg   { background: rgba(226,75,74,.2);    border-color: rgba(240,149,149,.65); color: #F5AEAE; }

.handgriff--stift:hover { background: rgba(55,138,221,.34); border-color: #85B7EB; color: #DCEBFA; }
.handgriff--kopie:hover { background: rgba(29,158,117,.34); border-color: #5DCAA5; color: #D9F0E2; }
.handgriff--weg:hover   { background: rgba(226,75,74,.32);  border-color: #F09595; color: #FFD9D9; }

.handgriff--wichtig { background: rgba(103,220,255,.24); border-color: rgba(103,220,255,.7); color: #8CE6FF; }
.handgriff--wichtig:hover { background: rgba(103,220,255,.36); border-color: #67DCFF; color: #EAFBFF; }

/* Gesperrt bleibt farblos. */
.handgriff--gesperrt,
.handgriff--weg.handgriff--gesperrt {
  background: none;
  border-style: dashed;
  border-color: rgba(106,180,255,.18);
  color: #44607E;
}

/* Die gruppierte Reiterleiste der Verwaltung. */
.reiter__gruppe  { color: #55708F; }
.reiter__trenner { background: rgba(106,180,255,.22); }

/* Die beiden Wege: Gespraech tuerkis, Kette violett. Gleich
   kraeftig -- keiner der beiden ist der Hauptweg. */
.handgriff--gespraech { background: rgba(103,220,255,.22); border-color: rgba(103,220,255,.7); color: #8CE6FF; }
.handgriff--kette     { background: rgba(127,119,221,.24); border-color: rgba(127,119,221,.75); color: #C7C2F5; }
.handgriff--gespraech:hover { background: rgba(103,220,255,.34); border-color: #67DCFF; color: #EAFBFF; }
.handgriff--kette:hover     { background: rgba(127,119,221,.36); border-color: #AFA9EC; color: #EAE8FB; }

/* Wer eine Vorlage benutzt. Violett wie die Prozessmarken
   anderswo -- dieselbe Sache, dieselbe Farbe. */
.verwendungsmarke {
  background: rgba(127,119,221,.24);
  border-color: rgba(127,119,221,.75);
  color: #C7C2F5;
}
.verwendungsmarke--mehr   { background: rgba(255,255,255,.08); border-color: var(--g-rand-fein); color: var(--g-gedaempft); }
.verwendungsmarke--keiner { background: none; border-color: rgba(106,180,255,.3); color: var(--g-still); }
.vorlagenzeile__weg--gesperrt { border-color: rgba(106,180,255,.18); color: #44607E; }

/* Personen in der Liste: Initialen und Rollenmarken. */
.personenkachel--blau      { background: rgba(55,138,221,.3);  border-color: rgba(55,138,221,.85);  color: #A9D0F5; }
.personenkachel--tuerkis   { background: rgba(29,158,117,.3);  border-color: rgba(29,158,117,.85);  color: #7FE0BC; }
.personenkachel--violett   { background: rgba(127,119,221,.3); border-color: rgba(127,119,221,.85); color: #C7C2F5; }
.personenkachel--bernstein { background: rgba(186,117,23,.3);  border-color: rgba(239,159,39,.85);  color: #FFC069; }
.personenkachel--rosa      { background: rgba(212,83,126,.3);  border-color: rgba(212,83,126,.85);  color: #F5AEC5; }
.personenkachel--gruen     { background: rgba(99,153,34,.3);   border-color: rgba(99,153,34,.85);   color: #B5DC7C; }

.rollenmarke               { background: rgba(255,255,255,.07); border-color: var(--g-rand-fein); color: var(--g-gedaempft); }
.rollenmarke--admin        { background: rgba(127,119,221,.24); border-color: rgba(127,119,221,.75); color: #C7C2F5; }
.rollenmarke--schulleitung { background: rgba(127,119,221,.24); border-color: rgba(127,119,221,.75); color: #C7C2F5; }
.rollenmarke--lehrkraft    { background: rgba(55,138,221,.24);  border-color: rgba(55,138,221,.7);   color: #A9D0F5; }
.rollenmarke--sekretariat  { background: rgba(29,158,117,.24);  border-color: rgba(29,158,117,.7);   color: #7FE0BC; }
.rollenmarke--ohne         { background: none; border-style: dashed; color: var(--g-still); }

/* Klassen im Schuelerbestand. */
.klassenblock { border-top-color: rgba(106,180,255,.16); }
.klassenzeile:hover { background: rgba(103,220,255,.05); }
.klassenzeile__pfeil { border-color: rgba(106,180,255,.35); color: #8CE6FF; }
.klassenzeile__name { color: var(--g-hell); }
.klassenzeile__zahl { color: var(--g-gedaempft); }
.klassenzeile__leitung { color: var(--g-still); }
.klassenzeile__leitung--ohne { color: #FFD48C; }
/* Keine Streifen -- siehe editor.css. */
.schuelerzeile__name { color: var(--g-hell); }
.schuelerzeile__neben { color: var(--g-still); }

/* Der Knopf "Räume verwalten".
   
   Er setzte "color: var(--tinte)" -- die Tintenfarbe des HELLEN
   Designs, #1F3A6E. Auf dem dunklen Grund ergab das 1,59:1:
   dunkel auf dunkel, praktisch unsichtbar.
   
   Dieselbe Behandlung wie die übrigen Zweitknöpfe. */
#verwalten {
  background: rgba(103,220,255,.14);
  border-color: rgba(103,220,255,.55) !important;
  color: #8CE6FF;
}
#verwalten:hover {
  background: rgba(103,220,255,.24);
  border-color: #67DCFF !important;
  color: #EAFBFF;
}

/* Das Schuelerblatt. */
.schuelerblatt__grund  { background: rgba(2, 10, 24, .68); }
.schuelerblatt__karte  {
  background: linear-gradient(180deg, rgba(17,54,105,.94), rgba(8,26,59,.97));
  border-color: var(--g-rand);
}
.schuelerblatt__kopf h2 { color: var(--g-hell); }
.schuelerblatt__zeile   { border-top-color: rgba(106,180,255,.16); }
.schuelerblatt__was     { color: var(--g-still); }
.schuelerblatt__wert    { color: var(--g-hell); }
.schuelerblatt__ueber   { color: #93A8C0; }
.schuelerblatt__sorge   { border-color: rgba(106,180,255,.24); background: rgba(255,255,255,.04); }
.schuelerblatt__sorgename { color: var(--g-hell); }
button.schuelerzeile:hover { background: rgba(103,220,255,.06); }

/* Suche im Schuelerbestand. */
.schuelersuche {
  background: rgba(8,26,59,.6);
  border-color: rgba(106,180,255,.35);
  color: var(--g-hell);
}
.schuelersuche::placeholder { color: #6A8AAE; }
.trefferklasse { color: #93A8C0; }

/* Begruendung einer Entscheidung. */
.begruendung__wort { color: var(--g-gedaempft); }
.begruendung__feld {
  background: rgba(8,26,59,.6);
  border-color: rgba(106,180,255,.35);
  color: var(--g-hell);
}
.begruendung__feld:focus { border-color: var(--g-tuerkis); outline: none; }
.begruendung__wann { color: var(--g-still); }

/* ------------------------------------------------------------
   Die Vorgangskachel
   ------------------------------------------------------------ */
.vkachel {
  border-color: rgba(106,180,255,.28);
  background: linear-gradient(180deg, rgba(17,54,105,.55), rgba(8,26,59,.8));
}
.vkachel__kopf:hover { background: rgba(103,220,255,.05); }
.vkachel__titel { color: var(--g-hell); }
.vkachel__az    { color: var(--g-still); }

.vkachel__symbol            { border-color: rgba(106,180,255,.3); color: var(--g-gedaempft); }
.vkachel__symbol--blau      { background: rgba(55,138,221,.3);  border-color: rgba(55,138,221,.85);  color: #A9D0F5; }
.vkachel__symbol--tuerkis   { background: rgba(29,158,117,.3);  border-color: rgba(29,158,117,.85);  color: #7FE0BC; }
.vkachel__symbol--violett   { background: rgba(127,119,221,.3); border-color: rgba(127,119,221,.85); color: #C7C2F5; }
.vkachel__symbol--bernstein { background: rgba(186,117,23,.3);  border-color: rgba(239,159,39,.85);  color: #FFC069; }
.vkachel__symbol--rosa      { background: rgba(212,83,126,.3);  border-color: rgba(212,83,126,.85);  color: #F5AEC5; }
.vkachel__symbol--koralle   { background: rgba(216,90,48,.3);   border-color: rgba(216,90,48,.85);   color: #FFB093; }
.vkachel__symbol--gruen     { background: rgba(99,153,34,.3);   border-color: rgba(99,153,34,.85);   color: #B5DC7C; }
.vkachel__symbol--grau      { background: rgba(255,255,255,.08); border-color: rgba(106,180,255,.3); color: #C3D2E6; }

.vkachel__stand--fertig { background: rgba(99,153,34,.24);   border-color: rgba(151,196,89,.75); color: #B5DC7C; }
.vkachel__stand--warte  { background: rgba(255,255,255,.06); border-color: rgba(106,180,255,.32); color: #B8C7DC; }
.vkachel__stand--still  { background: rgba(255,255,255,.05); border-color: rgba(106,180,255,.22); color: #93A8C0; }
.vkachel__stand--tun    { background: rgba(103,220,255,.2);  border-color: rgba(103,220,255,.7);  color: #8CE6FF; }
.vkachel__stand--bald   { background: rgba(250,199,117,.2);  border-color: rgba(250,199,117,.7);  color: #FFD48C; }
.vkachel__stand--spaet  { background: rgba(226,75,74,.2);    border-color: rgba(240,149,149,.65); color: #F5AEAE; }

.vkachel__stufe         { background: rgba(255,255,255,.1); }
.vkachel__stufe--fertig { background: #97C459; }
.vkachel__stufe--jetzt  { background: #67DCFF; }
.vkachel__stufenwort    { color: var(--g-still); }

.vkachel__band        { border-top-color: rgba(106,180,255,.16); }
.vkachel__band--ok    { background: rgba(99,153,34,.14); }
.vkachel__band--rueck { background: rgba(250,199,117,.12); }
.vkachel__band--frist { background: rgba(226,75,74,.12); }
.vkachel__band--tun   { background: rgba(103,220,255,.1); }
.vkachel__band--still { background: none; }

.vkachel__bandsymbol--ok    { background: rgba(151,196,89,.24);  color: #B5DC7C; }
.vkachel__bandsymbol--rueck { background: rgba(250,199,117,.24); color: #FFD48C; }
.vkachel__bandsymbol--frist { background: rgba(240,149,149,.24); color: #F5AEAE; }
.vkachel__bandsymbol--tun   { background: rgba(103,220,255,.24); color: #8CE6FF; }
.vkachel__bandsymbol--still { background: rgba(255,255,255,.08); color: #93A8C0; }

.vkachel__bandtext { color: var(--g-hell); }
.vkachel__bandwer  { color: var(--g-still); }

.vkachel__knopf--haupt { background: linear-gradient(90deg,#1B6FD0,#2264DE 52%,#7A2ED8); border-color: transparent; color: #fff; }
.vkachel__knopf--doku  { background: rgba(99,153,34,.24); border-color: rgba(151,196,89,.75); color: #CFEBA6; }

.kachelfehler {
  background: rgba(250,199,117,.14);
  border-color: rgba(250,199,117,.55);
  color: #FFD48C;
}

/* Das Vorgangsfenster. */
.vorgangsfenster__rechts {
  background: rgba(2,10,24,.3);
  border-color: rgba(106,180,255,.22);
}
.vorgangsfenster__ueber { color: #93A8C0; }

/* Der Vorgang als Fenster. */
body.fenster-offen #ansicht-schritt { background: rgba(2, 10, 24, .68); }
body.fenster-offen #ansicht-schritt .kopf,
body.fenster-offen #ansicht-schritt .vorgangsfenster {
  background: linear-gradient(180deg, rgba(17,54,105,.94), rgba(8,26,59,.97));
  border-color: var(--g-rand);
}

/* Die Aufgabenkachel. */
.akachel {
  border-color: rgba(106,180,255,.28);
  background: linear-gradient(180deg, rgba(17,54,105,.55), rgba(8,26,59,.8));
}
.akachel--jetzt { border-color: rgba(240,149,149,.5); }
.akachel__kopf:hover { background: rgba(103,220,255,.05); }
.akachel__auftrag { color: var(--g-hell); }
.akachel__woher   { color: var(--g-still); }
.akachel__frist--spaet { background: rgba(226,75,74,.2);    border-color: rgba(240,149,149,.65); color: #F5AEAE; }
.akachel__frist--bald  { background: rgba(250,199,117,.2);  border-color: rgba(250,199,117,.7);  color: #FFD48C; }
.akachel__frist--tun   { background: rgba(103,220,255,.2);  border-color: rgba(103,220,255,.7);  color: #8CE6FF; }
.akachel__frist--offen { background: rgba(255,255,255,.06); border-color: rgba(106,180,255,.32); color: #B8C7DC; }
.akachel__ang {
  border-color: rgba(106,180,255,.28);
  background: rgba(255,255,255,.05);
  color: var(--g-hell);
}
.akachel__angwort { color: var(--g-still); }
.akachel__fuss { border-top-color: rgba(106,180,255,.16); background: rgba(255,255,255,.03); }
.akachel__seit { color: var(--g-still); }

/* Kette und Streifen im Vorgangsfenster. */
.vf-kette__balken { background: rgba(255,255,255,.11); }
.vf-kette__balken--fertig { background: #97C459; }
.vf-kette__balken--jetzt  { background: #67DCFF; }
/* Noch nicht erreichte Schritte: gedaempft, aber lesbar.
   #6A8AAE ergab 3,40:1 -- ein Name, den man nicht lesen kann,
   ist kein Name. */
.vf-kette__wort { color: #93A8C0; }
.vf-kette__glied--fertig .vf-kette__wort { color: #93A8C0; }
.vf-kette__glied--jetzt  .vf-kette__wort { color: #8CE6FF; }

.vf-streifen { border-top-color: rgba(106,180,255,.18); border-bottom-color: rgba(106,180,255,.18); }
.vf-streifen--ok    { background: rgba(99,153,34,.14); }
.vf-streifen--still { background: rgba(255,255,255,.035); }
.vf-streifen__symbol--ok    { background: rgba(151,196,89,.24); color: #B5DC7C; }
.vf-streifen__symbol--still { background: rgba(255,255,255,.08); color: #93A8C0; }
.vf-streifen__text { color: var(--g-hell); }
.vf-streifen__wer  { color: #93A8C0; }

/* Im Fenster bilden Kopf, Kette, Streifen und Inhalt eine
   Karte.
   
   Hier stand "background-color: transparent" -- gedacht, damit
   ein Verlauf der Karte durchscheint. Hinter Kette und Streifen
   liegt aber kein Verlauf, sondern die abgedunkelte Seite: Man
   las "Guten Tag, Anna" mitten durch die Kette hindurch.
   
   Sie tragen jetzt dieselbe Flaeche wie Kopf und Inhalt. */
body.fenster-offen #ansicht-schritt .vf-kette,
body.fenster-offen #ansicht-schritt .vf-streifen {
  background: linear-gradient(180deg, rgba(17,54,105,.94), rgba(8,26,59,.97));
  border-left: 1px solid var(--g-rand);
  border-right: 1px solid var(--g-rand);
}

/* Der Streifen traegt die Farbe der Nachricht -- auf der
   Flaeche der Karte, nicht statt ihrer. */
body.fenster-offen #ansicht-schritt .vf-streifen--ok {
  background:
    linear-gradient(rgba(99,153,34,.14), rgba(99,153,34,.14)),
    linear-gradient(180deg, rgba(17,54,105,.94), rgba(8,26,59,.97));
}
body.fenster-offen #ansicht-schritt .vf-streifen--still {
  background:
    linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.035)),
    linear-gradient(180deg, rgba(17,54,105,.94), rgba(8,26,59,.97));
}

/* Kopfzeile des Vorgangsfensters. */
.vf-titel { color: var(--g-hell); }
.vf-titelblock .aktenzeichen { color: #93A8C0; }
.vf-zustand--fertig { background: rgba(99,153,34,.24);   border-color: rgba(151,196,89,.75); color: #B5DC7C; }
.vf-zustand--warte  { background: rgba(255,255,255,.07); border-color: rgba(106,180,255,.35); color: #C3D2E6; }
.vf-zustand--still  { background: rgba(255,255,255,.05); border-color: rgba(106,180,255,.22); color: #93A8C0; }
.vf-zustand--tun    { background: rgba(103,220,255,.2);  border-color: rgba(103,220,255,.7);  color: #8CE6FF; }

/* Dateien im Vorgangsfenster. */
.vf-ueber { color: #93A8C0; }
.vf-datei { border-color: rgba(106,180,255,.22); background: rgba(255,255,255,.035); }
.vf-datei__symbol--plenum { background: rgba(127,119,221,.26); color: #C7C2F5; }
.vf-datei__symbol--hoch { background: rgba(55,138,221,.26);  color: #A9D0F5; }
.vf-datei__name  { color: var(--g-hell); }
.vf-datei__unter { color: #93A8C0; }
.vf-datei__laden {
  border-color: rgba(151,196,89,.7);
  background: rgba(99,153,34,.22);
  color: #CFEBA6;
}