/* ============================================================
   Lena · Formensprache
   ============================================================
   Eine Ebene über lena.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

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

  /* ----------------------------------------------------------
     Kante und Akzent (Paket 87)
     ----------------------------------------------------------
     Die Flächen waren halbdurchsichtig (55 bis 82 %) über einem
     Grund aus drei Lichtkreisen, einer Welle und einem Raster.
     Eine durchsichtige Fläche übernimmt die Helligkeit ihres
     Grundes -- sie KANN sich davon nicht absetzen. Gemessen kam
     die Kachel im Lehrerzimmer auf 1,05 : 1 gegen ihren Grund;
     das ist kein Unterschied.

     Jetzt: deckend, heller als der Grund, mit einer Kante, die
     man sieht, und einem Streifen an der Oberkante, der sagt,
     WAS in der Kachel steht. Kein Schatten, keine Unschärfe --
     beides kostet Rechenzeit und löste das Problem nicht.

     Die Rundung geht von 22 auf 12 px: Eine kantigere Fläche
     liest sich als Tafel, eine runde als Karte. Tafeln stehen
     nebeneinander, Karten stapeln sich.

     --k-akzent wird je Kachel gesetzt, in der CSS oder (wo die
     Farbe erst zur Laufzeit feststeht) aus dem Skript. */
  --k-flaeche:       #123763;
  --k-flaeche-still: #0E2C52;   /* zurückgenommene Kachel */
  /* Dialog, Vordergrund. Heller als die Hauptfläche -- aber nur
     so weit, wie die Schrift es verträgt: Bei #16406F fiel die
     stille Schrift (#93A8C0) auf 4,31 : 1 und damit unter WCAG
     AA. Auf dunklem Grund kostet jede Aufhellung Lesbarkeit;
     ein Dialog wird ohnehin vom abgedunkelten Grund dahinter
     getragen, nicht von seiner Helligkeit. */
  --k-flaeche-hoch:  #153C68;
  --k-kante:         rgba(126,190,255,.34);
  --k-kante-fein:    rgba(126,190,255,.20);
  --k-radius:        12px;
  --k-streifen:      3px;
  --k-akzent:        #67DCFF;

  /* Die Akzente. Sie tragen Bedeutung, keine Dekoration --
     wer sie ändert, ändert eine Aussage. */
  --k-a-dringend: #FF9E93;
  --k-a-warten:   #7FA6FF;
  --k-a-leise:    #7E93AE;
  --k-a-fertig:   #6FD7A8;
  --k-a-notiz:    #C0A4FF;
  --k-a-raum:     #67DCFF;
}

/* ------------------------------------------------------------
   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; }
/* Die Leiste liegt ueber allem darunter: Ihr Nachrichtenfeld
   klappt ueber den Inhalt auf (Paket 81). Mit z-index 1 wie
   main lag es darunter -- main kommt spaeter im Dokument. */
.nav { z-index: 40; }

/* ------------------------------------------------------------
   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__offline { background: rgba(240,180,90,.16); color: #F0C583; }
.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); }

/* Die Glocke und ihr Feld (Paket 81) */
.nav__glocke { border-color: rgba(106,180,255,.3); background: rgba(255,255,255,.06); color: #A9BDD4; }
.nav__glocke:hover, .nav__glocke--offen {
  border-color: rgba(103,220,255,.6); background: rgba(103,220,255,.14); color: var(--g-tuerkis);
}
.nav__glocke-zahl { background: #FF7A7A; color: #2A0707; }
.nc {
  border-color: var(--g-rand);
  background: linear-gradient(180deg, rgba(17,54,105,.98), rgba(8,26,59,.99));
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  color: var(--g-hell);
}
.nc__kopf, .nc__fuss { border-color: var(--g-rand-fein); }
.nc__textknopf { color: var(--g-tuerkis); }
.nc__reiter { background: rgba(0,10,28,.45); }
.nc__reiterknopf { color: #C9D9EA; }
.nc__reiterknopf[aria-pressed="true"] { background: var(--g-tuerkis); color: #04142B; }
.nc__leer, .nc__fuss { color: var(--g-still); }
/* Die Zeit steht auch auf dem hervorgehobenen neuen Eintrag --
   dort reichte das Still-Grau nicht (4,4:1). */
.nc__wann { color: #A9BDD4; }
.nc__eintrag { border-top-color: rgba(106,180,255,.10); }
.nc__eintrag--neu { background: rgba(103,220,255,.05); }
.nc__text { color: #C9D9EA; }
.nc__punkt { background: var(--g-tuerkis); }
.nc__zeichen { background: rgba(159,180,207,.85); color: #04142B; }
.nc__eintrag--dran .nc__zeichen          { background: #FF9A8F; }
.nc__eintrag--frist .nc__zeichen         { background: #FFD58A; }
.nc__eintrag--wiedervorlage .nc__zeichen { background: #B9A4FF; }
.nc__eintrag--geteilt .nc__zeichen       { background: #B9A4FF; }
.nc__eintrag--fertig .nc__zeichen        { background: #8FD16A; }
.nc__eintrag--weiter .nc__zeichen        { background: #9FB4CF; }
/* Aus dem Lehrerzimmer (Migration 76). */
.nc__eintrag--einladung .nc__zeichen     { background: #67DCFF; }
.nc__eintrag--lesen .nc__zeichen         { background: #FFD58A; }
.nc__eintrag--team .nc__zeichen          { background: #F07FA8; }
.nc__knopf { border-color: rgba(106,180,255,.3); background: rgba(255,255,255,.05); color: var(--g-hell); }
.nc__knopf:hover { border-color: #35E8FF; }
.nc__knopf--haupt { border-color: #3F5FE8; background: #3F5FE8; color: #FFFFFF; }
.nc__knopf--haupt:hover { background: #4B6BF0; }

.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: Kante und Akzent
   ------------------------------------------------------------
   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.

   position: relative trägt den Streifen. .fenster und
   .kalenderblock haben overflow: hidden, dort folgt er von
   selbst der Rundung; wo nicht, tut es der eigene Radius unten.
   ------------------------------------------------------------ */
.karte, .fenster, .blatt-vorn, .kalenderblock,
.pruefung, .editor-leiste, .hilfe {
  position: relative;
  color: var(--g-hell);
  background: var(--k-flaeche);
  border: 1px solid var(--k-kante);
  border-radius: var(--k-radius);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* .pruefung und .hilfe stehen NICHT dabei: Der Entwicklungs-
   streifen ist eine Warnung, keine Kachel, und die Assistenten-
   zeile auf Home ist eine Eingabe. Beide haben nichts, worüber
   ein Streifen Auskunft geben könnte. */
.karte::before, .fenster::before, .blatt-vorn::before,
.kalenderblock::before {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: var(--k-streifen);
  border-radius: var(--k-radius) var(--k-radius) 0 0;
  background: var(--k-akzent);
  opacity: .85;
  pointer-events: none;
  z-index: 1;
}

/* Der Streifen gehört zur Fläche, nicht zu allem, was zufällig
   eine dieser Klassen trägt: Eine Kachel, die als Knopf oder
   Zeile auftritt, bekommt keinen. */
.karte--nackt::before, .fenster--nackt::before { content: none; }

.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 lena.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 {
  --k-akzent: var(--k-a-raum);
  border-radius: var(--k-radius);
  overflow: hidden;
  position: relative;
}
/* 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); }

/* Migration 87: die Warnung unter dem Fristenfeld. Das Rot aus
   editor.css (#B3261E) ist auf dunklem Grund nicht lesbar --
   hier derselbe Ton wie im Fehlerkasten. */
.hinweis.warnwort { color: #FFC9C4; }

/* 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 lena.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 lena.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 {
  /* Der Streifen nimmt auf, was die Spalte ohnehin sagt: Hier
     sind SIE dran. Die Fläche bleibt gleich hell wie die
     anderen -- nur der Streifen trennt, nicht der Grund; sonst
     wäre die wichtigste Spalte die dunkelste. */
  --k-akzent: var(--k-a-dringend);
  border-color: rgba(255,158,147,.40);
  background: var(--k-flaeche);
}
.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 -- über den Akzent und
   eine ruhigere Fläche, nicht über Durchsichtigkeit. */
.fenster--still {
  --k-akzent: var(--k-a-warten);
  border-color: var(--k-kante);
  background: var(--k-flaeche);
  box-shadow: none;
}
.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; }

/* Home (Paket 81) */
.home__gruss { color: var(--g-hell); }
.home .hilfe--zeile {
  padding: .875rem .75rem .875rem 1.25rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.home-hinweis {
  border-color: rgba(242,182,82,.4);
  background: rgba(58,48,30,.38);
  color: var(--g-hell);
}
.home-hinweis:hover { color: var(--g-hell); border-color: rgba(242,182,82,.7); }
.home-hinweis--spaet { border-color: rgba(255,138,128,.45); background: rgba(58,32,50,.45); }
.home-hinweis--spaet:hover { border-color: rgba(255,138,128,.75); }
.home-hinweis__punkt { background: #FFD58A; }
.home-hinweis__teil--spaet .home-hinweis__punkt { background: #FF8A80; }
.home-hinweis__trenner { color: var(--g-still); }
.home-hinweis__weiter { background: rgba(103,220,255,.14); color: var(--g-tuerkis); }

/* Kopf der Vorgaenge */
.vorgaenge-kopf .vorgaenge-kopf__suche { height: 2.75rem; }

/* ------------------------------------------------------------
   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 Lena ü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: lena-denkt 1.1s ease-in-out infinite; }
@keyframes lena-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
   ------------------------------------------------------------
   Lena 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 Lenas Blase
   behielt den hellen Grund aus lena.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 Lena 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"]),
/* Und die Notizen-Bausteine als EINE Ausnahme.

   Diese Liste waechst sonst mit jedem neuen Knopf, und jeder
   neue faellt zuerst einmal hinein: Das Minuszeichen zum
   Loeschen eines Notizbuchs bekam so Polsterung von 9 auf 18
   Pixel, einen Rand und einen Radius von 11 -- aus einem
   20 Pixel breiten Zeichen wurde eine 38 Pixel breite Pille.
   Nachgemessen im Browser, indem er selbst gesagt hat, welche
   Regeln greifen -- an der Datei allein war es nicht zu sehen.

   Alle Praefixe der Notizenseite statt einzelner Fragmente:
   Sie gestaltet ihre Knoepfe vollstaendig selbst. Betroffen
   waren ausser dem Minuszeichen auch die Kalendertage im
   Wiedervorlage-Fenster (nwv__tag) -- sie sind Knoepfe und
   bekamen dieselbe Polsterung.

   "tk-" (Talk) aus demselben Grund, gefunden beim Umbau zur
   ruhigen Ansicht: talk.css gestaltet Abspielen und Spulen als
   Kreise und die Fassungen als Pillen. Im Blatt standen sie aber
   in main und fielen hier hinein -- die Kreise wurden zu Kaesten
   mit 11 Pixeln Rundung und 18 Pixeln Polster. So sahen sie im
   Betrieb aus, seit es die Leiste gibt; talk_test.js mass die
   Groessen, nicht die Form. */
main button:not([class*="knopf"]):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"]):not([class*="anl"]):not([class*="griff"]):not([class*="wz"]):not([class*="gknopf"]):not([class*="nbuch__"]):not([class*="nkap__"]):not([class*="nsym__"]):not([class*="nwv__"]):not([class*="nfenster__"]):not([class*="nvorschau__"]):not([class*="nausgabe__"]):not([class*="nsuch__"]):not([class*="ntasche__"]):not([class*="lz-"]):not([class*="tk-"]) {
  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; }
/* Die stillgelegte Schule -- bernstein wie jede Wiedervorlage,
   weil beides dasselbe sagt: liegt, ist aber nicht erledigt. */
.zeile__marke--ruht            { background: rgba(250,199,117,.14);
                                 border-color: rgba(250,199,117,.55);
                                 color: #FFD48C; }
.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;
}

/* Hier stand eine Rollbegrenzung: hoechstens vier Eintraege,
   der Rest in einem eigenen Rollbereich. Seit dem Umbau vom
   21.09. zeigt jede Gruppe drei Zeilen und "weitere anzeigen"
   -- ein Rollbereich in einer rollenden Seite war das, was
   man beim Wischen verlor. */

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

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

/* ------------------------------------------------------------
   Notizbuecher
   ------------------------------------------------------------ */
/* Die Bücherspalte ist Navigation, kein Inhalt -- ruhigere
   Fläche, feinere Kante, kein Streifen. */
.nbuch__buecher {
  background: var(--k-flaeche-still);
  border-color: var(--k-kante-fein);
  border-radius: var(--k-radius);
}
.nbuch__ueber   { color: #93A8C0; }
.nbuch__buch:hover { background: rgba(103,220,255,.06); }
.nbuch__buch--aktiv { background: rgba(103,220,255,.14); }
.nbuch__buch--aktiv .nbuch__buchname { color: #8CE6FF; }

/* Kapitel */
.nbuch__inhalt h3.nkap { border-bottom-color: rgba(106,180,255,.22); }
.nkap__pfeil, .nkap__uhr { color: #93A8C0; }
.nkap__pfeil:hover, .nkap__uhr:hover {
  background: rgba(103,220,255,.08);
  color: var(--g-hell);
}
.nkap__uhr--an { background: rgba(186,117,23,.32); color: #FFC069; }
.nkap__pfeil { color: var(--g-hell); }
.nkap__wann {
  border-color: rgba(250,199,117,.6);
  background: rgba(250,199,117,.18);
  color: #FFD48C;
}
.nkap__wann--spaet {
  border-color: rgba(240,149,149,.6);
  background: rgba(226,75,74,.2);
  color: #F5AEAE;
}

/* Die Markierfarben bleiben, wie sie sind.

   Sie sind der Sinn der Sache: leuchtend und wiedererkennbar.
   Im Dunkeln gedaempft, saehen sie aus wie Schmutz auf dem
   Papier -- und der dunkle Text darauf ist ohnehin festgelegt,
   also bleibt es lesbar. */
.nbuch__farben { background: rgba(2,10,24,.3); border-color: rgba(106,180,255,.22); }
.nbuch__farbe--weg { border-color: rgba(106,180,255,.22); color: #93A8C0; }
.nbuch__farbe--weg:hover { border-color: #67DCFF; color: #8CE6FF; }

/* Buecher bearbeiten */
.nbuch__ordnenknopf {
  border-color: rgba(103,220,255,.45);
  background: rgba(103,220,255,.14);
  color: #67DCFF;
}
.nbuch__ordnenknopf:hover { background: rgba(103,220,255,.3); color: #BFF1FF; }
.nbuch__ordnenknopf--an { background: rgba(103,220,255,.16); color: #8CE6FF; }
.nbuch__buch--ordnen:hover { background: none; }
.nbuch__weg { color: #FF9C9C; }
.nbuch__weg:hover { background: rgba(255,120,120,.16); }
.nbuch__buchwz { color: #93A8C0; }
.nbuch__buchwz:hover { background: rgba(103,220,255,.08); color: var(--g-hell); }
.nbuch__griff { color: #6A8AAE; }
.nbuch__buch--vor  { box-shadow: inset 0 2px 0 0 #67DCFF; }
.nbuch__buch--nach { box-shadow: inset 0 -2px 0 0 #67DCFF; }

/* Das Zeichenraster.

   NUR der Rand. Hintergrund und Farbe kommen aus notizen.css
   (Paket 104) -- und genau deshalb darf hier keiner mehr
   stehen: Diese Regel hat dieselbe Staerke wie
   .nsym__feld--blau, steht aber in der spaeter geladenen
   Datei. Sie gewann, und alle einundvierzig Kacheln waren
   wieder gleich dunkel.

   Gemessen von browser_test.js ("Mindestens sechs verschiedene
   Hintergruende"), nicht von mir gesehen. Dieselbe Falle steht
   ein paar hundert Zeilen weiter unten schon einmal
   auskommentiert -- bei den gesetzten Werkzeugen. */
.nsym__feld {
  border-color: rgba(106,180,255,.22);
}
.nsym__feld:hover { border-color: rgba(106,180,255,.55); filter: brightness(1.15); }
.nsym__feld--an { border-color: #67DCFF; box-shadow: 0 0 0 2px #67DCFF; }
.nbuch__buchname { color: var(--g-hell); }
.nbuch__zahl { color: #6A8AAE; }
/* Volle Farbe, weisses Zeichen -- in beiden Moden dieselbe
   (Paket 103).

   Vorher stand hier ein zweiter Satz halbdurchsichtiger
   Toenungen. Der war noetig, solange die Flaeche blass war:
   Auf dunklem Grund waere ein helles Feld ein Loch gewesen.
   Eine VOLLE Farbe traegt sich selbst -- sie sieht auf beiden
   Gruenden gleich aus, und damit gibt es die Farbe eines Buchs
   nur noch einmal statt zweimal.

   Etwas heller als im Hellen: Auf dunklem Grund wirkt dieselbe
   Farbe dumpfer, und "knallig" war der Auftrag. */
/* HIER STEHT NICHTS MEHR -- und das ist der Punkt.

   Mein erster Entwurf hatte hier einen zweiten, helleren Satz:
   Auf dunklem Grund wirkt dieselbe Farbe dumpfer, und
   "knallig" war der Auftrag. Nachgerechnet lagen die sieben
   Werte zwischen 3,1 und 4,3 gegen Weiss -- unter der Schwelle,
   die ich zehn Minuten vorher im Hellen eingehalten hatte.

   Also keine zweite Fassung. Die Werte aus notizen.css gelten
   in beiden Moden: notizen.css laedt vor dunkel.css, und was
   hier nicht ueberschrieben wird, bleibt stehen. Eine volle
   Farbe traegt sich selbst. */
/* Nicht grau: Ein Buch ohne gewaehlte Farbe ist gewoehnlich,
   nicht abgeschaltet. */
/* Auch die Farbkanten in der Liste kommen aus notizen.css. */
.nbuch__neu { border-color: rgba(103,220,255,.55); background: rgba(103,220,255,.07); color: #8FE4FF; }
.nbuch__neu:hover { background: rgba(103,220,255,.18); color: #BFF1FF; }
.nbuch__neu__plus { background: #67DCFF; color: #03172f; }
.nbuch__neu:hover .nbuch__neu__plus { background: #BFF1FF; color: #03172f; }

.nbuch__suche { background: rgba(8,26,59,.6); border-color: rgba(106,180,255,.35); color: var(--g-hell); }
.nbuch__notiz { border-color: rgba(106,180,255,.14); background: rgba(8,26,59,.42); }
.nbuch__buch--ziel {
  background: rgba(103,220,255,.16);
  outline-color: #67DCFF;
}
.nbuch__notiz:hover { background: rgba(255,255,255,.06); border-color: rgba(106,180,255,.3); }
.nbuch__notiz--aktiv { background: rgba(103,220,255,.1); border-color: rgba(103,220,255,.4); }
.nbuch__ntitel { color: var(--g-hell); }
.nbuch__nvor   { color: #93A8C0; }
.nbuch__ndatum { color: #6A8AAE; }
.nbuch__marke--spaet { background: rgba(226,75,74,.2);   border-color: rgba(240,149,149,.6); color: #F5AEAE; }
.nbuch__marke--wv    { background: rgba(250,199,117,.18); border-color: rgba(250,199,117,.6); color: #FFD48C; }
.nbuch__marke--still { background: rgba(255,255,255,.06); border-color: rgba(106,180,255,.3); color: #B8C7DC; }
.nbuch__marke--ton   { background: rgba(139,92,239,.24); border-color: rgba(167,132,245,.7); color: #CFC0FA; }

/* Das Blatt ist der Gegenstand der Seite -- es bekommt den
   Streifen. overflow: hidden steht schon in notizen.css, der
   Streifen folgt dort der Rundung von selbst. */
.nbuch__blatt {
  position: relative;
  background: var(--k-flaeche);
  border-color: var(--k-kante);
  border-radius: var(--k-radius);
}
.nbuch__blatt::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--k-streifen);
  background: var(--k-a-notiz);
  opacity: .85;
  pointer-events: none;
  z-index: 2;
}
.nbuch__blattkopf { border-bottom-color: rgba(106,180,255,.16); }
.nbuch__pfad  { color: #93A8C0; }
.nbuch__titel { color: var(--g-hell); }
.nbuch__verk  { background: rgba(255,255,255,.03); border-bottom-color: rgba(106,180,255,.14); }
/* Paket 109: eine Farbe fuer Verknuepfungen, eine fuer
   Freigaben -- dieselbe Trennung wie im Hellen. */
.nbuch__tag          { background: rgba(55,138,221,.22); border-color: rgba(55,138,221,.7);  color: #A9D0F5; }
.nbuch__tag--geteilt { background: rgba(23,160,180,.22); border-color: rgba(23,160,180,.65); color: #8FD9E6; }
.nbuch__tagneu { border-color: rgba(106,180,255,.35); color: #93A8C0; }
.nbuch__inhalt { color: var(--g-hell); }
.nbuch__anlage { border-top-color: rgba(106,180,255,.14); }
.nbuch__anlname  { color: var(--g-hell); }
.nbuch__anlunter { color: #93A8C0; }
.nbuch__wv     { background: rgba(250,199,117,.12); border-top-color: rgba(106,180,255,.16); }
.nbuch__wvtext { color: #FFD48C; }
.nbuch__wvwer  { color: #93A8C0; }

.nfenster__grund { background: rgba(2,10,24,.68); }
/* Dialoge stehen im Vordergrund und dürfen heller sein. Sie
   bekommen keinen Streifen: Was ohnehin über allem liegt, muss
   sich nicht noch anmelden. */
.nfenster__karte {
  background: var(--k-flaeche-hoch);
  border-color: var(--k-kante);
}
.nfenster__zeile { border-top-color: rgba(106,180,255,.14); }
.nfenster__name  { color: var(--g-hell); }
.nfenster__recht { color: #93A8C0; }
.nfenster__feld  { background: rgba(8,26,59,.6); border-color: rgba(106,180,255,.35); color: var(--g-hell); }

/* Anlagen als Kacheln und die Vorschau. */
.nbuch__anlneu { border-color: rgba(106,180,255,.35); color: #93A8C0; }
.nbuch__anlname  { color: var(--g-hell); }
.nbuch__anlunter { color: #93A8C0; }
/* Die Anlagenknoepfe sind von der Auffangregel ausgenommen --
   siehe die Liste oben, Eintrag "anl".
   
   Ohne die Ausnahme gab sie jedem Knopf eine helle Flaeche und
   Polster: Hinter dem x sass eine helle Pille, und das
   Dateizeichen bekam einen Rahmen, den es nicht haben sollte.
   
   Ein "button" davor haette nicht genuegt -- die Auffangregel
   traegt fuenfzehn Ausnahmen und damit eine weit hoehere
   Bestimmtheit. Derselbe Fall wie beim Knopf "Raeume
   verwalten", nur dass DORT eine eigene Kennung half. */
.nbuch__anlweg   { background: rgba(8,26,59,.95); border-color: rgba(106,180,255,.4); color: #B8C7DC; }
.nbuch__anlweg:hover { color: #F5AEAE; border-color: rgba(240,149,149,.7); }

/* Das Ausgabefenster.

   Die Vorschau bleibt WEISS -- auch im dunklen Anzug. Sie
   zeigt kein Stueck Oberflaeche, sondern das Blatt, das
   gleich herauskommt: eine Word-Datei und ein Ausdruck sind
   auf weissem Papier. Ein dunkles Vorschaufeld waere eine
   Zusage, die das Ergebnis nicht einhaelt. */
.nausgabe__blatt {
  background: #FFFFFF;
  color: #1A2029;
  border-color: rgba(106,180,255,.3);
  box-shadow: 0 2px 10px rgba(2,10,24,.5);
}
.nausgabe__unter { opacity: .8; }

/* ============================================================
   Die Suchmaske zum Verknuepfen
   ============================================================
   Im Anzug der uebrigen Fenster: Glas als Grund, tuerkise
   Ueberzeile ueber jeder Gruppe, 14px-Felder mit Zeichen
   links.
   ============================================================ */
.nsuch__lupe { color: #8FA6C0; }

/* "input.nsuch__feld", nicht ".nsuch__feld".

   Die allgemeine Feldregel weiter oben in dieser Datei
   (input, input[type=text], …) ist bestimmter als eine blosse
   Klasse -- ein Elementname zaehlt mit. Sie setzte das linke
   Polster auf 14px zurueck, und die Lupe stand dann UNTER dem
   getippten Text statt davor. Mit dem Elementnamen sind beide
   gleich bestimmt, und die spaetere gewinnt: diese hier. */
input.nsuch__feld {
  height: 2.75rem;
  /* Links Platz fuer die Lupe. */
  padding: 0 .875rem 0 2.625rem;
  border-radius: 14px;
  background: rgba(3,24,55,.54);
  border: 1px solid rgba(124,187,255,.5);
  color: var(--g-hell);
  font-size: .9375rem;
}
input.nsuch__feld::placeholder { color: #8396B4; }
input.nsuch__feld:focus {
  border-color: #4FE6FF;
  box-shadow: 0 0 0 4px rgba(56,215,255,.1);
}

.nsuch__vorschlag {
  border-color: rgba(106,180,255,.35);
  color: #B8C7DC;
}
.nsuch__vorschlag:hover {
  border-color: var(--g-tuerkis);
  color: var(--g-tuerkis);
  background: rgba(103,220,255,.08);
}
/* Die gedrueckte Art der Suche: tuerkis gefuellt, dunkle
   Schrift -- wie der aktive Reiter der Kopfzeile. */
.nsuch__art[aria-pressed="true"],
.nsuch__art[aria-pressed="true"]:hover {
  border-color: var(--g-tuerkis);
  background: var(--g-tuerkis);
  color: #04142B;
}

.nsuch__treffer {
  background: rgba(2,10,24,.35);
  border-color: rgba(106,180,255,.18);
}

/* Die Gruppenzeile ist die Ueberzeile dieser Sprache: tuerkis,
   Versalien, weit gesperrt. Sie klebt oben in der Liste --
   deshalb braucht sie einen eigenen Grund, sonst laesen sich
   die Zeilen darunter hindurch. */
.nsuch__gruppe {
  background: #0B2444;
  color: var(--g-tuerkis);
}

/* "zeile" steht in der Ausnahmeliste der Auffangregel -- der
   Treffer braucht seine eigene Flaeche, keine helle Pille. */
.nsuch__zeile { color: var(--g-hell); }
.nsuch__zeile:hover { background: rgba(55,138,221,.18); }
.nsuch__name  { color: var(--g-hell); }
.nsuch__unter { color: #93A8C0; }
.nsuch__leer  { color: #7A8DA5; }

/* Der Schalter "in der Aktentasche zeigen". */
.nsuch__schalter {
  background: rgba(2,10,24,.35);
  border-color: rgba(106,180,255,.18);
}
.nsuch__schalterwort { color: var(--g-hell); }
.nsuch__warn { color: #93A8C0; }
/* Offen ist eine Ansage, keine Nebensache. */
.nsuch__warn--an { color: #FFDCA0; }

/* Das Auge an einer Verknuepfungsmarke.
   
   "wz" und "tag" stehen nicht in der Ausnahmeliste der
   Auffangregel -- "anl" und "griff" schon. Deshalb hier eine
   eigene Zeile: Ohne sie machte die Auffangregel aus einem
   18-Pixel-Zeichen eine helle Pille. */
.nbuch__tagauge { color: #7A8DA5; background: none; border: 0; padding: 0; }
.nbuch__tagauge:hover:not(:disabled) { color: var(--g-tuerkis); }
.nbuch__tagauge--an { color: #A8E08A; }
.nbuch__tagauge--an:hover:not(:disabled) { color: #C6F0AE; }

/* ============================================================
   Die Aktentasche
   ============================================================ */
.ntasche__frage { color: var(--g-hell); }
.ntasche__unter, .ntasche__unter2 { color: var(--g-gedaempft); }
.ntasche__meine { border-color: rgba(106,180,255,.35); color: #B8C7DC; }
.ntasche__meine:hover {
  border-color: var(--g-tuerkis);
  color: var(--g-tuerkis);
  background: rgba(103,220,255,.08);
}

.ntasche__kopf { border-bottom-color: rgba(106,180,255,.18); }
.ntasche__name { color: var(--g-hell); }
.ntasche__spur {
  background: rgba(250,199,117,.1);
  border-left-color: rgba(250,199,117,.55);
  color: #E8D3B0;
}
.ntasche__leer { color: #7A8DA5; }
.ntasche__zaehler .hinweis { color: #93A8C0; }

.ntasche__eintrag {
  background: linear-gradient(180deg, rgba(17,54,105,.55), rgba(8,26,59,.7));
  border-color: rgba(106,180,255,.18);
  color: var(--g-hell);
}
.ntasche__eintrag:hover { border-color: rgba(106,180,255,.45); }
.ntasche__etitel { color: var(--g-hell); }
.ntasche__evorschau { color: #B8C7DC; }
.ntasche__efuss { color: #93A8C0; }

/* Die Marke bleibt hell hinterlegt wie die Kreise: Sie ist
   eine Aussage, keine Verzierung, und muss auf einen Blick
   auseinanderzuhalten sein. */
.ntasche__marke--offen   { background: #DFF0CB; color: #33600C; }
.ntasche__marke--privat  { background: #C3D2E4; color: #26303C; }
.ntasche__marke--vorgang { background: #FBE6C7; color: #7A470A; }
.ntasche__eintrag--vorgang { border-left-color: #C08A3A; }

.nvorschau__grund { background: rgba(2,10,24,.72); }
.nvorschau__karte {
  background: linear-gradient(180deg, rgba(17,54,105,.94), rgba(8,26,59,.97));
  border-color: var(--g-rand);
}
.nvorschau__kopf { border-bottom-color: rgba(106,180,255,.18); }
.nvorschau__kopf h2 { color: var(--g-hell); }
.nvorschau__buehne { background: rgba(2,10,24,.35); }
.nvorschau__ohne { color: #93A8C0; }

/* Die Handgriffe einer Notiz.
   
   "griff" steht in der Ausnahmeliste der Auffangregel -- siehe
   oben. Ohne den Eintrag gab sie jedem Handgriff eine helle
   Flaeche und waagerechtes Polster: Zeichen und Wort staenden
   nebeneinander statt uebereinander.
   
   Das ist heute der dritte Fall derselben Regel. Sie ist
   nuetzlich, aber jede neue Knopfart muss sich bei ihr
   abmelden.
   
   "handgriff" steht dort uebrigens schon -- fuer die Handgriffe
   der Prozessliste. Die Notizen heissen nur "griff", und das
   traf nicht zu. */

/* Die Werkzeugleiste der Notiz.
   "wz" und "gknopf" stehen in der Ausnahmeliste der
   Auffangregel -- sonst bekaeme jedes Werkzeug eine helle
   Flaeche und waagerechtes Polster. */
.nbuch__werkzeuge { background: rgba(255,255,255,.03); border-bottom-color: rgba(106,180,255,.14); }
.nbuch__wz {
  background: rgba(255,255,255,.04);
  border-color: rgba(106,180,255,.22);
  color: #C3D2E6;
}
.nbuch__wz:hover { border-color: rgba(103,220,255,.6); color: #8CE6FF; }
.nbuch__wztrenner { background: rgba(106,180,255,.2); }
.nbuch__groesse { background: rgba(255,255,255,.04); border-color: rgba(106,180,255,.22); }
.nbuch__gknopf { background: none; color: #C3D2E6; }
.nbuch__gzahl  { color: var(--g-hell); }

.nbuch__inhalt hr { border-top-color: rgba(106,180,255,.25); }
.nbuch__inhalt li.nh-offen::before,
.nbuch__inhalt li.nh-fertig::before { border-color: rgba(106,180,255,.5); }
.nbuch__inhalt li.nh-fertig::before { background: rgba(99,153,34,.4); border-color: rgba(151,196,89,.8); }
.nbuch__inhalt li.nh-fertig::after  { border-left-color: #CFEBA6; border-bottom-color: #CFEBA6; }
.nbuch__inhalt li.nh-fertig { color: #93A8C0; }

/* Die getoenten Handgriffe.

   Bis zur ruhigen Ansicht trug die Wiedervorlage hier eine
   volle orange Flaeche (--voll); die Regeln dafuer sind fort,
   weil kein Knopf die Klasse mehr traegt. Geblieben ist die
   Toenung: Sie sagt "dieser Griff setzt eine Frist", ohne
   lauter zu sein als die Frist selbst. */
.nbuch__wz--wv  { background: rgba(250,199,117,.14); border-color: rgba(250,199,117,.55); color: #FFD48C; }
.nbuch__wz--weg { background: rgba(226,75,74,.12);   border-color: rgba(240,149,149,.45); color: #F5AEAE; }
.nbuch__wz--tun { background: rgba(103,220,255,.12); border-color: rgba(103,220,255,.5);  color: #8CE6FF; }

.nbuch__griffe { border-bottom-color: rgba(106,180,255,.16); }

/* NACH den Regeln oben, nicht davor: Sie setzen background und
   color neu, und bei gleicher Spezifitaet gewinnt die spaetere.
   Stand dieser Block oben, sah ein gesetzter Knopf genauso aus
   wie ein ungesetzter -- die Formatierung war da und zeigte
   sich nicht. */
/* Werkzeuge */
.nbuch__wz { color: var(--g-hell); }
.nbuch__wz--an {
  border-color: #67DCFF;
  background: rgba(103,220,255,.16);
  color: #8CE6FF;
}


/* Der Kalender der Wiedervorlage. */
.nwv__schnellknopf { background: rgba(255,255,255,.05); border-color: rgba(106,180,255,.28); color: #B8C7DC; }
.nwv__schnellknopf:hover { border-color: rgba(103,220,255,.6); color: #8CE6FF; }
.nwv__kalender { background: rgba(2,10,24,.3); border-color: rgba(106,180,255,.22); }
.nwv__monat { color: var(--g-hell); }
.nwv__wtag  { color: #6A8AAE; }
.nwv__tag   { color: var(--g-hell); }
.nwv__tag:hover { background: rgba(255,255,255,.06); border-color: rgba(106,180,255,.3); }
.nwv__tag--heute { border-color: #67DCFF; }
.nwv__tag--gewaehlt { background: #2264DE; border-color: #4A90D9; color: #fff; }
.nwv__tag--vorbei { color: #6A8AAE; }
.nwv__zeit { color: #B8C7DC; }
.nwv__zeit input {
  background: rgba(8,26,59,.6);
  border-color: rgba(106,180,255,.35);
  color: var(--g-hell);
}


/* ============================================================
   Fehler- und Ereigniskontrolle (public/entwicklung.css)
   ============================================================
   Die Zeile selbst ist nur ein Raster -- dunkel wird hier nur,
   was in entwicklung.css eine helle Fläche oder eine dunkle
   Schrift setzt. test/stil_test.js kennt entwicklung.css und
   meldet, was hier fehlt.
   ============================================================ */
.ereignis { border-bottom-color: rgba(255,255,255,.08); }
.ereignis__zeit { color: var(--g-still); }
.ereignis__marke { color: #FFB3AC; }
.ereignis__frage { color: var(--g-hell); }
.ereignis__antwort { color: var(--g-gedaempft); }
.ereignis__vermerk { color: var(--g-still); }

/* Gewählt heißt gefärbt. Auf einer Liste von dreißig Zeilen
   sieht man einen Rahmen nicht, eine Fläche schon. */
.ereignis__urteil .knopf--richtig[aria-pressed="true"] {
  background: rgba(80,220,160,.16);
  border-color: rgba(80,220,160,.5);
  color: #8FEFC4;
}
.ereignis__urteil .knopf--falsch[aria-pressed="true"] {
  background: rgba(255,120,110,.18);
  border-color: rgba(255,120,110,.5);
  color: #FFB3AC;
}

/* ============================================================
   Der Steckbrief in der Aktentasche (Migration 71)
   ============================================================
   Die Kreise und Marken bleiben hell, wie die schon
   vorhandenen: eine Aussage, keine Verzierung. Sie stehen hier,
   damit "hell" eine Entscheidung ist -- test/stil_test.js kennt
   aktentasche.css seit dieser Lieferung und meldet jede helle
   Flaeche, die hier NICHT steht.
   ============================================================ */
.ntasche__kreis--schueler { background: #D8EAFB; color: #14508D; }
.ntasche__kreis--person   { background: #E5E3FD; color: #473EA8; }
.ntasche__kreis--klasse   { background: #D5F0F5; color: #0F5C68; }
.ntasche__kreis--vorgang  { background: #FBE6C7; color: #7A470A; }
.ntasche__kreis--betrieb  { background: #EFE6DA; color: #5E4320; }
.ntasche__kreis { box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.ntasche__marke--aktiv { background: #DFF0CB; color: #33600C; }
.ntasche__marke--ab    { background: #FBE0DC; color: #8A2318; }
.ntasche__marke--still { background: #C3D2E4; color: #26303C; }

.ntasche__karte, .ntasche__spalte {
  background: linear-gradient(180deg, rgba(17,54,105,.55), rgba(8,26,59,.82));
  border-color: rgba(106,180,255,.28);
}
.ntasche__kartenkopf { color: var(--g-hell); }
.ntasche__kartenkopf svg { color: var(--g-tuerkis); }
.ntasche__angaben dt { color: var(--g-still); }
.ntasche__angaben dd { color: var(--g-hell); }
.ntasche__sorgeart { color: var(--g-still); }
.ntasche__sorgename { color: var(--g-hell); }
.ntasche__sorge { color: var(--g-hell); }
.ntasche__trenner { background: rgba(255,255,255,.08); }
.ntasche__verborgen { color: var(--g-still); }
/* Die Auszubildenden eines Betriebs (Migration 73). */
.ntasche__azubis li { border-top-color: rgba(255,255,255,.08); }
.ntasche__azubis li:first-child { border-top: 0; }
.ntasche__azubis .ntasche__azubiklasse { color: var(--g-still); }
.ntasche__kasten { background: rgba(255,255,255,.06); color: #C9D9EA; }
.ntasche__klasse { border-color: rgba(106,180,255,.22); background: rgba(255,255,255,.04); }
.ntasche__klasse:hover { border-color: rgba(106,180,255,.5); }
.ntasche__klassenname b { color: var(--g-hell); }
.ntasche__klassenname span { color: var(--g-still); }
.ntasche__spaltenkopf { color: var(--g-hell); border-bottom-color: rgba(255,255,255,.08); }
.ntasche__spaltenzahl { background: rgba(255,255,255,.1); color: #C9D9EA; }
.ntasche__spalte .ntasche__eintrag {
  background: transparent;
  border-bottom-color: rgba(255,255,255,.06);
}
.ntasche__spalte .ntasche__eintrag:hover { background: rgba(255,255,255,.03); }

/* Die Karte "Schülerausweis" (Paket 110). --frist ist ein
   dunkles Rot für weißes Papier; auf dieser Fläche wäre es
   kaum zu sehen. */
.ntasche__tun--warnung { color: #FFB3AC; }
.ntasche__code { color: var(--g-hell); }
/* Und das QR-Bild bleibt WEISS, auch hier. Nicht aus Versehen:
   Auf getöntem Grund lesen manche Handykameras den Code nicht,
   und dieses Bild wird in genau dem Augenblick gescannt. */
.ntasche__qr { background: #fff; }


/* ============================================================
   Die Startseite nach dem Umbau vom 21.09.2026
   ============================================================
   Wie im abgestimmten Mockup: schmale Zeilen, duenne Linien
   dazwischen, Frist als Farbe -- rot ueberfaellig, bernstein
   diese Woche, "ohne Frist" leise.
   ============================================================ */
.fenster__anzahl { color: #93A8C0; }
.fenster--dringend .fenster__kopf,
.fenster--still .fenster__kopf,
.fenster--leise .fenster__kopf { align-items: center; }

.afilter { background: rgba(0,10,28,.45); }
.afilter__knopf { color: #C9D9EA; }
.afilter__knopf:hover { color: #FFFFFF; background: rgba(103,220,255,.08); }
.afilter__knopf[aria-pressed="true"],
.afilter__knopf[aria-pressed="true"]:hover { background: #67DCFF; color: #04142B; }
.afilter__zahl { background: rgba(255,255,255,.08); color: #93A8C0; }
.afilter__knopf--spaet .afilter__zahl { background: rgba(255,107,107,.2); color: #FFB8B8; }
.afilter__knopf[aria-pressed="true"] .afilter__zahl { background: #4DBFE3; color: #04142B; }

.agruppe { border-top-color: rgba(106,180,255,.16); }

/* Die Rollleiste der beiden Listen: schmal und hell auf dunkel. */

.spalte__liste { scrollbar-color: rgba(255,255,255,.22) transparent; }
.spalte__liste::-webkit-scrollbar { width: 8px; }
.spalte__liste::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(255,255,255,.22); }
.spalte__liste::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); }
.agruppe__kopf { color: var(--g-hell); }
/* ".fenster--dringend h3" setzt Ueberschriften auf 1.125rem --
   fuer den Kopf einer Gruppe zu laut. */
.fenster--dringend .agruppe__kopf { font-size: .90625rem; font-weight: 700; }
.agruppe__zahl { color: #93A8C0; }
.agruppe__knopf { color: #67DCFF; }
.agruppe__knopf:hover { background: rgba(103,220,255,.08); }

.azeile { border-top-color: rgba(106,180,255,.12); color: var(--g-hell); }
.agruppe__kopf + .azeile { border-top-color: transparent; }
.azeile:hover { background: rgba(103,220,255,.05); }
.azeile__auftrag { color: var(--g-hell); }
.azeile__kern, .azeile__az, .azeile__seit { color: #93A8C0; }
/* Die Kopfzeile jeder Spalte: Ueberschrift ueber dem Filter,
   nicht daneben -- in einem Drittel der Breite passt beides
   nicht nebeneinander. */
.spalte > .spalte__kopf { flex-direction: column; align-items: stretch; gap: .75rem; padding: 1rem 1.125rem .875rem; }
.spalte > .spalte__kopf h2 { font-size: 1.125rem; }
.azeile__seit--lange { color: #FFD58A; }
.azeile__frist--spaet   { background: rgba(255,107,107,.16); color: #FFB8B8; }
.azeile__frist--woche   { background: rgba(255,196,87,.14);  color: #FFD58A; }
.azeile__frist--spaeter { background: rgba(255,255,255,.07); color: #C9D9EA; }
.azeile__frist--offen   { background: none; color: #8499B4; }

/* Ihre Antraege: Zeilen statt Karten. */
#eigene-liste .vkachel { border-top-color: rgba(106,180,255,.12); background: none; }
#eigene-liste .vkachel:first-child { border-top: 0; }
/* Die gewohnte Zeile, wo keine Kachel kam: gleich aussehend,
   ohne die alte Ampelkante. */
#eigene-liste .eintrag { padding: .875rem 1.25rem; border-bottom: 0; border-top: 1px solid rgba(106,180,255,.12); }
#eigene-liste .eintrag::before { display: none; }
.vkachel__band--still .vkachel__bandtext { color: #C9D9EA; }

.vkachel__meta { color: #93A8C0; }
.vkachel__meta .vkachel__az { color: #93A8C0; }
.vkachel__dran { background: rgba(255,196,87,.16); color: #FFD58A; }
.vkachel__zutun { color: #FFD58A; }
#eigene-liste .vkachel--dran { background: rgba(255,196,87,.05); }

.spalte__unter { color: #93A8C0; }
.azeile__meta { color: #93A8C0; }
.ezeile__wie { color: #C9D9EA; }

.fenster--leise {
  /* Abgeschlossenes tritt zurück -- aber über den Akzent und die
     feinere Kante, nicht über eine dunklere Fläche.

     Die dunklere Fläche stand hier zuerst und kam auf 1,11 : 1
     gegen ihren Grund (flaechen_test): Der Seitenverlauf ist an
     dieser Stelle heller als links, und eine zurückgenommene
     Fläche wurde dort unsichtbar. Die drei Spalten sind
     ohnehin gleichrangig; was sie unterscheidet, ist ihr
     Inhalt, nicht ihre Helligkeit. */
  --k-akzent: var(--k-a-leise);
  border-color: var(--k-kante-fein);
  background: var(--k-flaeche);
}
.fenster--leise h2 { font-size: .9375rem; color: #C9D9EA; }
.ezeile { border-top-color: rgba(106,180,255,.12); color: var(--g-hell); }
.ezeile:first-child { border-top: 0; }
.ezeile:hover { background: rgba(103,220,255,.05); }
.ezeile__titel { color: var(--g-hell); }
.ezeile__unter { color: #93A8C0; }


/* Speicherbelegung (Migration 79) */
.speicherkarte__art, .speicherkarte__zahlen { color: var(--g-gedaempft); }
.speicherbalken { background: rgba(106,180,255,.18); }
.speicherkarte__form label { color: #C8D8EA; }
/* Der enge Balken ist auch im Dunklen bernstein -- die Farbe
   traegt die Bedeutung, nicht den Grund. */
.speicherbalken__voll--eng { background: #F2B652; }

/* ---------- Rollen an dieser Schule (Migration 90) ---------- */
/* Dieselbe Bauart wie .uebergang gleich oben: helle Fläche auf
   dunklem Grund, Rand in Blau. Kein zweites Aussehen für
   dieselbe Sache. */
.rollenzeile {
  background: rgba(255,255,255,.05);
  border-color: rgba(124,187,255,.26);
  color: var(--g-hell);
}
.rollenzeile:hover { border-color: var(--g-rand); }
.rollenzeile--system { background: rgba(255,255,255,.025); }
.rollenzeile__name { color: var(--g-hell); }
.rollenzeile__schluessel, .rollenzeile__zahl { color: var(--g-still); }
.rollenzeile__knopf {
  background: rgba(255,255,255,.07);
  border-color: rgba(124,187,255,.26);
  color: var(--g-gedaempft);
}
.rollenzeile__knopf:hover { border-color: var(--g-rand); color: var(--g-hell); }
/* Rot im Dunkeln: #FF9B90 auf der Fläche darunter, nachgerechnet
   in kontrast_test.js. Das hellere Rot ist nötig -- der Wert aus
   dem Hellen (#B3261E) liegt auf dunklem Grund bei 2,1:1. */
.rollenzeile__knopf--weg:hover {
  border-color: #FF9B90;
  background: rgba(255,120,105,.18);
  color: #FF9B90;
}

/* ---------- Offline (Paket 109) ---------- */
/* Dieselben Werte wie beim Ungesendeten -- nachgerechnet steht
   das in kontrast_test.js. */
.nbuch__stand { background: rgba(200, 137, 31, .18); color: #F0C674; }

/* ---------- Das Gerüst beim Laden (Paket 108) ---------- */
.nbuch__geruest__zeile {
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .nbuch__geruest__zeile { background: rgba(255,255,255,.05); }
}

/* ============================================================
   Ausweise ausgeben (Paket 111)
   ============================================================
   Die Seite steht am Beamer. Deshalb zwei Dinge anders als
   sonst: Das Grün der Haken ist heller als auf Papier, und die
   QR-Bilder bleiben weiß -- auf getöntem Grund lesen manche
   Handykameras den Code nicht, und genau das ist hier die
   einzige Aufgabe des Bildes.
   ============================================================ */
.agb__weg, .agb__bild, .agb__tafel {
  background: var(--g-glas);
  border-color: var(--g-rand-fein);
}
.agb__weg h3, .agb__klasse, .agb__blocktitel { color: var(--g-hell); }
.agb__weg p, .agb__anleitung { color: var(--g-gedaempft); }

.agb__qr, .agb__kastenqr { background: #fff; }
.agb__code, .agb__rest { color: var(--g-hell); }
.agb__fehlversuche, .agb__schluss { color: #FFB3AC; }

.agb__zeile { border-top-color: rgba(255,255,255,.08); }
.agb__wort { color: var(--g-still); }
.agb__zeile--offen .agb__haken { color: var(--g-still); }
.agb__zeile--offen .agb__name { color: var(--g-gedaempft); }
.agb__zeile--heute .agb__haken,
.agb__zeile--hat   .agb__haken { color: #7BE0A8; }
.agb__zeile--heute .agb__wort  { color: #7BE0A8; }

.agb__kasten {
  background: var(--g-glas);
  border-color: var(--g-rand);
}
.agb__kastentext b, .agb__kastencode { color: var(--g-hell); }
.agb__kastennummer, .agb__kastenwie { color: var(--g-still); }
.agb__blattkopf .hinweis { color: var(--g-still); }

/* Ausweise -- die Uebersicht (Paket 111) */
.ausweise__tabelle th { color: var(--g-still); }
.ausweise__tabelle th,
.ausweise__tabelle td { border-bottom-color: rgba(255,255,255,.08); }
.ausweise__still { color: #FFB3AC; }

/* ------------------------------------------------------------
   Sprechtag (Paket 113)
   ------------------------------------------------------------
   sprechtag.css ist in Papierfarben geschrieben, wie jedes
   Blatt in Lena. Was dort an eigenen Bausteinen dazukommt,
   braucht hier seine Entsprechung -- sonst stehen helle Kästen
   auf dem dunklen Grund.

   .reiter, .reiter__knopf, .karte, .hinweis und die Felder sind
   weiter oben schon erfasst; hier steht nur, was es vorher
   nicht gab. */

/* Der Stand des Sprechtags im Kopf. Dieselben drei Farben wie
   die Marken weiter oben -- durchsichtig statt blass, weil
   blasses Papier auf dunklem Grund leuchtet. */
.stand {
  background: rgba(235,175,90,.18);
  color: #FFD79A;
}
.stand[data-stand="offen"]       { background: rgba(80,220,160,.16); color: #8FEFC4; }
.stand[data-stand="geschlossen"] { background: rgba(255,120,110,.18); color: #FFB3AC; }

/* Die Karte, die zum Öffnen und Schliessen auffordert. */
.karte--register { border-left-color: var(--register, #C8891F); }

/* Sofort verbindlich oder erst nach Bestätigung. */
.wahlzeile {
  border-color: rgba(124,187,255,.26);
  color: var(--g-hell);
}
.wahlzeile:hover { border-color: #4FE6FF; }
.wahlzeile strong { color: var(--g-hell); }
.wahlzeile em { color: var(--g-gedaempft); }
.wahlzeile:has(input:checked) {
  border-color: #4FE6FF;
  background: rgba(79,230,255,.12);
}

/* Der Zugangscode. Er steht gestrichelt umrandet da, weil er
   zum Abschreiben gedacht ist und nicht zum Anklicken. */
.code {
  border-color: rgba(126,190,255,.5);
  background: rgba(0,10,28,.35);
  color: var(--g-hell);
}

/* Tagüberschrift, Zeitzeile, Bemerkung, Mitglied. */
.tagkopf { border-bottom-color: rgba(255,255,255,.08); }
.tagkopf h3 { color: var(--g-hell); }

.zeile {
  border-color: rgba(124,187,255,.26);
  color: var(--g-hell);
}
.zeile--frei     { color: var(--g-still); }
.zeile--gesperrt { background: rgba(255,255,255,.05); color: var(--g-still); }
.zeile__uhr { color: var(--g-gedaempft); }
.zeile__wer strong { color: var(--g-hell); }
.zeile__wer span   { color: var(--g-gedaempft); }

.bemerkung {
  border-left-color: rgba(126,190,255,.5);
  background: rgba(255,255,255,.05);
  color: var(--g-gedaempft);
}

.mitglied { border-bottom-color: rgba(255,255,255,.08); color: var(--g-gedaempft); }
.mitglied strong { color: var(--g-hell); }
.mitglied--ich strong { color: var(--g-tuerkis); }

/* Der Elternbrief ist lang -- ein Textfeld, das man liest und
   nicht nur füllt. */
#i-brief, #i-link { color: var(--g-hell); }

/* ------------------------------------------------------------
   Notizen · die Handgriffe und ihr Menü
   ------------------------------------------------------------ */
.nbuch__wz--mehr[aria-expanded="true"] {
  border-color: rgba(103,220,255,.6);
  color: #8CE6FF;
  background: rgba(103,220,255,.12);
}

.nbuch__mehrmenue {
  background: var(--k-flaeche-hoch, #153C68);
  border-color: var(--k-kante, rgba(126,190,255,.34));
  box-shadow: 0 18px 46px rgba(0,10,30,.5);
}
.nbuch__mpunkt { color: var(--g-hell, #F7FBFF); }
.nbuch__mpunkt:hover { background: rgba(255,255,255,.07); }
.nbuch__mpunkt:focus-visible { outline-color: #4FE6FF; }

.nbuch__mpunkt.nbuch__wz--tun svg     { color: #7FE3B4; }
.nbuch__mpunkt.nbuch__wz--ausgabe svg { color: #C0A4FF; }
.nbuch__mpunkt--weg, .nbuch__mpunkt--weg svg { color: #FFB9B0; }
.nbuch__mpunkt--weg:hover { background: rgba(226,75,74,.16); }

.nbuch__mstrich { background: var(--k-kante-fein, rgba(126,190,255,.20)); }

/* Notizen · der Datenschutzhinweis als Marke.
   Leise: eine Auskunft, die man wiedererkennt, kein Alarm. */
.nbuch__warnmarke {
  border-color: var(--k-kante-fein, rgba(126,190,255,.20));
  background: var(--k-flaeche-hoch, #153C68);
  color: var(--g-gedaempft, #B8C7DC);
}

/* Der Trenner in der Werkzeugleiste war so blass, dass die
   Gruppen nicht als Gruppen zu lesen waren -- obwohl es fuenf
   davon gibt. Jetzt derselbe Ton wie jede andere Kante in
   Lena: --k-kante statt --k-kante-fein. */
.nbuch__wztrenner { background: var(--k-kante, rgba(126,190,255,.34)); }

/* ============================================================
   Notizen · ruhige Ansicht
   ============================================================
   Die Farben zum gleichnamigen Abschnitt am Ende von
   notizen.css; dort steht, warum.

   Die Selektoren tragen bewusst eine Klasse mehr als die
   Regeln weiter oben (".nbuch__liste .nbuch__notiz" statt
   ".nbuch__notiz"). Sie sollen die alten Flaechen und Raender
   abloesen, ohne dass die alten Regeln umsortiert werden
   muessen -- deren Reihenfolge haelt an mehreren Stellen eine
   Falle fest (siehe ".nbuch__wz--an"). Wo eine Klasse mehr den
   Zustand einer alten Regel ueberstimmen wuerde (geoeffnet,
   gesetzt, aufgeklappt), steht der Zustand hier noch einmal. */

/* Liste: nur die geoeffnete Notiz traegt eine Flaeche. */
.nbuch__liste .nbuch__notiz { border-color: transparent; background: transparent; box-shadow: none; }
.nbuch__liste .nbuch__notiz:hover { border-color: transparent; background: rgba(255,255,255,.05); }
.nbuch__liste .nbuch__notiz--aktiv,
.nbuch__liste .nbuch__notiz--aktiv:hover { border-color: transparent; background: var(--k-flaeche); }
.nbuch__liste .nbuch__marke { background: none; }
.nbuch__liste .nbuch__marke::before { color: #6A8AAE; }

/* "Neues Notizbuch": ein Wort mit Zeichen, kein Kasten. */
.nbuch__buecher .nbuch__neu { border-color: transparent; background: none; }
.nbuch__buecher .nbuch__neu:hover { background: rgba(103,220,255,.08); }

/* Der Titel ohne Kasten -- der Rand kommt beim Zeigen. */
.nbuch__blatt .nbuch__titel { border-color: transparent; background: none; color: var(--g-hell); }
.nbuch__blatt .nbuch__titel:not(:read-only):hover { border-color: var(--k-kante-fein); }
.nbuch__blatt .nbuch__titel:not(:read-only):focus { border-color: var(--k-kante); background: rgba(2,10,24,.25); }

/* Handgriffe: ohne Flaeche, bis auf die Wiedervorlage.
   Ihre Toenung kommt unveraendert aus ".nbuch__wz--wv" weiter
   oben; hier nur Rand und Schrift. */
.nbuch__handgriffe .nbuch__wz:not(.nbuch__wz--wv) { border-color: transparent; background: transparent; }
.nbuch__handgriffe .nbuch__wz:not(.nbuch__wz--wv):hover { border-color: transparent; background: rgba(255,255,255,.06); }
.nbuch__handgriffe .nbuch__wz--mehr[aria-expanded="true"] { background: rgba(103,220,255,.12); color: #8CE6FF; }
.nbuch__handgriffe .nbuch__wz--wv { border-color: transparent; color: #FFD48C; }
.nbuch__handgriffe .nbuch__wz--wv:hover { background: rgba(250,199,117,.24); color: #FFE2B0; }

/* Eigenschaften: getoent statt umrandet. Die Schriftfarben
   (#A9D0F5, #8FD9E6) bleiben die aus Paket 109. */
.nbuch__meta .nbuch__verk { background: none; }
.nbuch__meta .nbuch__tag { border-color: transparent; background: rgba(55,138,221,.14); }
.nbuch__meta .nbuch__tag--geteilt { background: rgba(23,160,180,.14); }
.nbuch__meta .nbuch__warnmarke { background: none; color: var(--g-gedaempft); }

/* Werkzeuge: Zeichen ohne Kaestchen. */
.nbuch__blatt .nbuch__werkzeuge { background: none; }
.nbuch__werkzeuge .nbuch__wz { border-color: transparent; background: transparent; }
.nbuch__werkzeuge .nbuch__wz:hover { border-color: transparent; background: rgba(255,255,255,.07); color: #8CE6FF; }
.nbuch__werkzeuge .nbuch__wz--an,
.nbuch__werkzeuge .nbuch__wz--an:hover { border-color: transparent; background: rgba(103,220,255,.16); color: #8CE6FF; }
.nbuch__werkzeuge .nbuch__farben { border-color: transparent; background: none; }
.nbuch__werkzeuge .nbuch__wztrenner { background: var(--k-kante-fein); }

/* Die Aufnahme: eine ruhige Karte, darin die Frist leise.
   Die Frist war bernsteinfarben -- die Farbe, die in Lena
   "bald faellig" heisst. Eine Loeschfrist in dreissig Tagen
   ist eine Auskunft, keine Mahnung. */
.nbuch__tonkarte { border-color: var(--k-kante-fein); background: var(--k-flaeche-still); }
.nbuch__tonkarte .tk-frist-zeile { color: var(--g-gedaempft); }
.nbuch__tonkarte .tk-frist-zeile--weg { color: var(--g-still); }
.nbuch__ton .tk-aus { border-color: var(--k-kante-fein); background: transparent; color: var(--g-gedaempft); }
.nbuch__ton .tk-aus--da { border-color: rgba(110,231,176,.35); color: #8FEFC4; }
.nbuch__ton .tk-aus--laeuft { border-color: rgba(255,206,150,.42); color: #FFCE96; }

/* Die Wiedervorlage am Fuss: ueberfaellig ist rot -- wie
   "Ueberfaellig" in der Liste daneben. */
.nbuch__wv--spaet { background: rgba(226,75,74,.14); }
.nbuch__wv--spaet .nbuch__wvtext { color: #F5AEAE; }

/* Der Speicherknopf. Volle (deckende) Flaechen, damit der Text,
   der unter ihm durchrollt, ihn nicht unleserlich macht -- eine
   Toenung waere ueber Schrift ein Durcheinander. Die Werte sind
   in kontrast_test.js nachgerechnet. */
.nbuch__speicher--ok { border-color: rgba(111,215,168,.45); background: #17473F; color: #8FEFC4; }
.nbuch__speicher--laeuft,
.nbuch__speicher--wartet { border-color: rgba(255,176,96,.55); background: #4A3A2E; color: #FFC48A; }
.nbuch__speicher--laeuft .nbuch__speicher__punkt { background: #FFB060; }
.nbuch__speicher__tun { border-left-color: rgba(255,176,96,.4); color: #FFE2C2; }
.nbuch__speicher--wartet:hover { background: #5A4635; }
.nbuch__speicher--lesen { border-color: var(--k-kante); background: var(--k-flaeche-still); color: var(--g-gedaempft); }
.nbuch__speicher { box-shadow: 0 4px 14px rgba(0,8,24,.35); }
.nbuch__speicher:focus-visible { outline-color: #67DCFF; }

/* ============================================================
   Notizen · das Register
   ============================================================
   Die Farben zum gleichnamigen Abschnitt am Ende von notizen.css.
   Die Marke selbst traegt die Farbe ihres Buchs ueber das
   Zeichen (.nbuch__zeichen--*); hier steht nur, was darum liegt. */
.nbuch__buecher:not(.nbuch__buecher--ordnen) { border-color: transparent; background: none; }
.nbuch__buecher:not(.nbuch__buecher--ordnen) .nbuch__buch,
.nbuch__buecher:not(.nbuch__buecher--ordnen) .nbuch__buch:hover,
.nbuch__buecher:not(.nbuch__buecher--ordnen) .nbuch__buch--aktiv { background: none; }
.nbuch__buecher:not(.nbuch__buecher--ordnen) .nbuch__buch .nbuch__zahl,
.nbuch__buecher:not(.nbuch__buecher--ordnen) .nbuch__buch--aktiv .nbuch__buchname { color: #FFFFFF; }
.nbuch__buecher:not(.nbuch__buecher--ordnen) .nbuch__buch:focus-visible { outline: 2px solid #67DCFF; outline-offset: 2px; }
.nbuch__buecher:not(.nbuch__buecher--ordnen) #geteilt-ueber { background: var(--k-kante-fein); }

/* Der Punkt fuer Ueberfaelliges. #C43B26 und nicht #E24B4A:
   Weiss auf #E24B4A kommt auf 3,9 : 1 -- zu wenig fuer eine
   Zahl. Der Saum in der Farbe des Grundes trennt den Punkt von
   der Marke, auf der er sitzt. */
.nbuch__buchspaet { background: #C43B26; color: #FFFFFF; box-shadow: 0 0 0 2px #04172F; }

.nbuch__buecher:not(.nbuch__buecher--ordnen) > .nbuch__railknopf { border-color: var(--k-kante); background: transparent; color: #C0A4FF; }
.nbuch__buecher:not(.nbuch__buecher--ordnen) > .nbuch__railknopf:hover { border-color: #67DCFF; }
.nbuch__buecher:not(.nbuch__buecher--ordnen) > .nbuch__railknopf[aria-expanded="true"],
.nbuch__buecher:not(.nbuch__buecher--ordnen) > .nbuch__railknopf--an { border-color: #67DCFF; background: rgba(103,220,255,.14); }

.nbuch__buecher:not(.nbuch__buecher--ordnen).nbuch__buecher--woerter > #schlagworte {
  border-color: var(--k-kante);
  background: var(--k-flaeche-hoch);
  box-shadow: 0 16px 40px rgba(0,8,24,.5);
}

/* Beim Ordnen liegt die Spalte ueber der Liste -- sie braucht
   einen Schatten, sonst sieht man nicht, wo sie aufhoert. */
.nbuch__buecher--ordnen { box-shadow: 0 16px 40px rgba(0,8,24,.5); }

.nbuch__listtitel__name { color: var(--g-hell); }
.nbuch__listtitel__zahl { color: var(--g-still); }

.nbuch__schild {
  border-color: var(--k-kante);
  background: var(--k-flaeche-hoch);
  color: var(--g-hell);
  box-shadow: 0 8px 24px rgba(0,8,24,.45);
}
.nbuch__schild span { color: var(--g-gedaempft); }