/* beurteilen.css -- Auftrag 16 Teil U (24.10.2026): Reiter «Beurteilen».
 * Alles unter .bu-…, nichts Globales. Tippflächen ≥ 44 px (iPad hochkant und quer).
 * Feste Mindestbreiten in der Tabelle, damit beim Eintragen nichts springt. */

.bu { --bu-rand: #c9d1d9; --bu-leise: #5b6670; --bu-akzent: #1f6feb; --bu-gelb: #fff3bf; --bu-gelb-rand: #e0a800;
      --bu-rot: #b42318; --bu-rot-hell: #fdecea; --bu-gruen: #1a7f37; --bu-kopf-bg: #f3f5f7; --bu-flaeche: #fff;
      color: #1d252c; padding: 8px 0 96px; }
.bu-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.bu-kopf__text { flex: 1 1 260px; min-width: 0; }
.bu-titel { font-size: 1.35rem; margin: 0; }
.bu-untertitel { font-size: 1.05rem; margin: 18px 0 8px; }
.bu-leise { color: var(--bu-leise); font-size: 0.92rem; margin: 4px 0; }

.bu-knopf { min-height: 44px; min-width: 44px; padding: 8px 14px; border: 1px solid var(--bu-rand); border-radius: 10px;
            background: var(--bu-flaeche); color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
.bu-knopf:hover { border-color: var(--bu-akzent); }
.bu-knopf:disabled { opacity: 0.4; cursor: default; }
.bu-knopf--haupt { background: var(--bu-akzent); border-color: var(--bu-akzent); color: #fff; font-weight: 600; }
.bu-knopf--still { border-color: transparent; background: transparent; }
.bu-knopf--klein { padding: 6px 10px; font-size: 0.92rem; }

.bu-feld { min-height: 44px; padding: 6px 10px; border: 1px solid var(--bu-rand); border-radius: 8px; font: inherit; background: var(--bu-flaeche); color: inherit; box-sizing: border-box; }
.bu-formular { display: grid; gap: 10px; max-width: 720px; }
.bu-feldzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.bu-feldzeile__text { min-width: 110px; font-weight: 600; }
.bu-feldzeile .bu-feld { flex: 1 1 260px; min-width: 0; }
.bu-aktionen { margin: 16px 0; display: flex; gap: 10px; flex-wrap: wrap; }

/* Startseite */
.bu-block { margin-top: 12px; }
.bu-liste { display: grid; gap: 6px; }
.bu-liste__zeile { display: flex; align-items: stretch; gap: 6px; }
.bu-liste__oeffnen { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 52px; padding: 8px 12px;
                     border: 1px solid var(--bu-rand); border-radius: 10px; background: var(--bu-flaeche); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.bu-liste__datum { font-variant-numeric: tabular-nums; color: var(--bu-leise); min-width: 86px; }
.bu-liste__fach { color: var(--bu-leise); }
.bu-liste__name { font-weight: 600; flex: 1 1 200px; }
.bu-liste__stand { color: var(--bu-leise); }

/* Raster-Editor */
.bu-raster { margin-top: 16px; }
.bu-raster__bereiche { display: grid; gap: 12px; }
.bu-bereich { border: 1px solid var(--bu-rand); border-radius: 12px; padding: 10px; background: var(--bu-flaeche); }
.bu-bereich--aus { opacity: 0.6; background: #f6f7f8; }
.bu-bereich__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.bu-bereich__titel { flex: 1 1 240px; font-weight: 600; }
.bu-bereich__zahl { color: var(--bu-leise); font-size: 0.9rem; }
.bu-bereich__schnell, .bu-bereich__fuss { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.bu-kriterien { display: grid; gap: 6px; }
.bu-krit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px; border-radius: 8px; background: var(--bu-kopf-bg); }
.bu-krit--aus { opacity: 0.55; }
.bu-krit--aus .bu-krit__titel { text-decoration: line-through; }
.bu-krit__nr { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.bu-krit__texte { flex: 1 1 260px; display: grid; gap: 4px; min-width: 0; }
.bu-krit__text { font-size: 0.9rem; }
.bu-zahlfeld { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; }
.bu-zahlfeld .bu-feld { width: 64px; text-align: center; }
.bu-haken { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; justify-content: center; cursor: pointer; }
.bu-haken input { width: 24px; height: 24px; }
.bu-griff { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: grab; touch-action: none; color: var(--bu-leise); user-select: none; }
.bu-zieht { opacity: 0.85; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.bu-zielmarke { box-shadow: inset 0 3px 0 var(--bu-akzent); }
.bu-zielmarke-ende { box-shadow: inset 0 -3px 0 var(--bu-akzent); }
.bu-raster__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }

/* Wertetabelle */
.bu-speicherstand { display: inline-block; min-width: 13em; text-align: right; color: var(--bu-leise); font-size: 0.9rem; }
/* Tabellen-Ansicht (16b U2-4): Kopf auf EINER Zeile, Tabelle nutzt die Resthöhe. */
.bu--tabelle { padding-bottom: 8px; }
.bu-kopf--tabelle { flex-wrap: nowrap; gap: 6px 8px; margin: 0; }
.bu-kopf--tabelle .bu-kopf__text { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; overflow: hidden; }
.bu-kopf--tabelle .bu-titel { flex: 0 1 auto; min-width: 3em; font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; }
.bu-kopf__angaben { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; }
/* 16d C33: feste Breite -- kein Statustext darf den Kopf umbrechen oder die Tabelle schieben (ganzer Text im title). */
.bu-kopf--tabelle .bu-speicherstand { flex: 0 0 8.5em; width: 8.5em; min-width: 8.5em; max-width: 8.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-kopf--tabelle .bu-druck { flex-wrap: nowrap; }
/* Auftrag 21c (UI-4, Beats Foto): die Auswahl ist so breit wie ihr längster Eintrag -- nie abgeschnitten. */
.bu-kopf--tabelle .bu-druckwahl { flex: 0 0 auto; width: auto; max-width: none; min-width: max-content; }
.bu-kopf--tabelle .bu-knopf { white-space: nowrap; }
/* Larry 24.10.: feste Bedienelemente schrumpfen nie (sonst läuft ihr Text unter den Titel: «← Übersicht» und «Raster ändern» waren bei 1180 px überdeckt); nur der Textblock kürzt mit «…». */
.bu-kopf--tabelle > .bu-knopf, .bu-kopf--tabelle > .bu-druck, .bu-kopf--tabelle > .bu-speicherstand { flex-shrink: 0; }
/* Der Titel kürzt zuletzt: die Angaben (Fach, Thema, Datum) geben zuerst nach. */
/* Auftrag 21b (IP-02): der Titel kürzt jetzt auch (vor Klasse und Datum, die vorne fest stehen); höchstens 40 % der Breite. */
.bu-kopf--tabelle .bu-kopf__text > .bu-titel { flex: 0 1 auto; min-width: 3em; max-width: 40%; }
.bu-druck { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.bu-tabelle-wrap { overflow: auto; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); border: 1px solid var(--bu-rand); border-radius: 10px;
                   -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--bu-flaeche); }
.bu-tabelle { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; min-width: 100%; }
.bu-tabelle th, .bu-tabelle td { border-right: 1px solid #e3e7eb; border-bottom: 1px solid #e3e7eb; padding: 2px 4px; text-align: center; white-space: nowrap; background: var(--bu-flaeche); }
.bu-tabelle thead th { position: sticky; z-index: 2; background: var(--bu-kopf-bg); font-weight: 600; }
/* top je Kopfzeile setzt js/beurteilen.js (kopfStickySetzen), damit die vier Kopfzeilen nie übereinander liegen */
/* Auftrag 21c (UI-1): Max- und Faktor-Zeile sind selbst 44 px hoch -- keine Tippfläche ragt in die Nachbarzeile
 * (früher ::after: der untere Teil von Max öffnete den Faktor). Zwei volle Zeilen bleiben bei 1180×820 sichtbar. */
.bu-tabelle thead tr:nth-child(3) .bu-kopfknopf, .bu-tabelle thead tr:nth-child(4) .bu-kopfknopf, .bu-faktor__knopf { min-height: 44px; height: 44px; }
/* 18b: Die Kopfknöpfe sind selbst 44 px hoch -- ohne Zellenabstand bleibt der Kopf so niedrig wie möglich (E10: Zeile 2 frei bei 1180×820). */
.bu-tabelle thead th { padding-top: 0; padding-bottom: 0; }
.bu-tabelle tbody td, .bu-tabelle tbody th { padding-top: 0; padding-bottom: 0; }
.bu-tabelle-wrap { scrollbar-width: thin; }
.bu-tabelle thead .bu-kopfknopf { padding-top: 0; padding-bottom: 0; }
.bu-tabelle .bu-name { position: sticky; left: 0; z-index: 1; text-align: left; min-width: 150px; max-width: 190px; }
.bu-tabelle thead .bu-name { z-index: 3; }
.bu-tabelle tbody .bu-name { font-weight: 500; }
.bu-name__nr { display: inline-block; min-width: 22px; color: var(--bu-leise); }
.bu-abschneiden { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* Auftrag 21c (UI-10): der Bildtitel nutzt die ganze Breite seines Kopfes und bestimmt nie die Spaltenbreite (liegt absolut
 * im Knopf); Namen brechen höchstens auf zwei Zeilen um (Zeile bleibt 44 px), ganzer Name im title. */
.bu-bereichkopf__knopf { position: relative; }
.bu-bereichkopf__knopf > .bu-abschneiden { position: absolute; left: 4px; right: 4px; top: 50%; transform: translateY(-50%); max-width: none; white-space: nowrap; }
/* Auftrag 21d (IA-10): Bildfaktor «× 2» rechts im Bildkopf, der Titel macht ihm Platz */
.bu-bereichkopf__knopf--faktor > .bu-abschneiden { right: 3.6em; }
.bu-bereichkopf__faktor { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-weight: 700; color: #3b4a5a; }
.bu-tabelle tbody .bu-name .bu-abschneiden { max-width: 186px; white-space: normal; display: -webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.12; vertical-align: middle; overflow-wrap: anywhere; }
.bu-bereichkopf { max-width: 260px; border-left: 2px solid #aab4be; }
/* Auftrag 18: feste Breite -- ein umbenanntes oder neues Kriterium verschiebt die anderen Spalten nicht. */
.bu-kritkopf { width: 84px; min-width: 84px; max-width: 84px; font-size: 0.85rem; }
.bu-kritkopf__nr { display: block; font-weight: 700; }
.bu-kritkopf__titel { max-width: 76px; font-weight: 400; }
.bu-sumkopf, .bu-sum { background: #eef2f5 !important; min-width: 52px; font-weight: 600; }
.bu-zahl { font-variant-numeric: tabular-nums; }
.bu-punkte { min-width: 92px; }
.bu-prozent { min-width: 56px; }
.bu-note { min-width: 62px; font-weight: 700; }
.bu-note--vorlaeufig { color: var(--bu-leise); font-weight: 400; font-style: italic; }
/* [NEUE-VERSION] (Auftrag 229) Notenskala: Standard leise, «Angepasst» zählt (massgebend) */
.bu-note--standard { font-weight: 400; color: var(--bu-leise); }
.bu-note--angepasst { font-weight: 800; }
.bu-lo { min-width: 64px; }
.bu-bem { min-width: 180px; position: relative; }
.bu-faktor__knopf { min-width: 52px; border: 1px dashed var(--bu-rand); border-radius: 8px; background: transparent; font: inherit; cursor: pointer; }
.bu-zelle { padding: 2px; }
.bu-eingabe { width: 54px; min-height: 44px; box-sizing: border-box; border: 1px solid transparent; border-radius: 6px; text-align: center; font: inherit; font-size: 1.02rem;
              background: transparent; color: inherit; }
.bu-eingabe:focus { outline: 2px solid var(--bu-akzent); outline-offset: -2px; background: #f2f7ff; }
.bu-eingabe::placeholder { color: #9aa5af; }
.bu-eingabe--lo { width: 58px; }
.bu-eingabe--bem { width: 100%; min-width: 170px; text-align: left; padding-right: 46px; }
.bu-eingabe--fehler { border-color: var(--bu-rot); background: var(--bu-rot-hell); }
.bu-eingabe--konflikt { border-color: var(--bu-gelb-rand); background: var(--bu-gelb); }
.bu-zelle--abzug .bu-eingabe { color: var(--bu-rot); }
.bu-tabelle tfoot td, .bu-tabelle tfoot th { background: var(--bu-kopf-bg); font-weight: 600; height: 36px; }
.bu-statistik { margin: 8px 2px; color: var(--bu-leise); font-variant-numeric: tabular-nums; }

/* Schnelltasten (16b U2-3): UNTER der Tabelle im Fluss, nie darüber -- sie verdeckt keine Zeile.
 * Die Tabelle bekommt per js/beurteilen.js (hoeheSetzen) genau die Resthöhe, darum bleibt die Leiste im Bild. */
.bu-schnell { position: static; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 6px 0 0; margin: 0;
              background: var(--bu-flaeche); }
.bu-schnell__knopf { min-width: 56px; font-weight: 600; }
.bu-schnell .bu-knopf { padding: 6px 10px; flex: 0 0 auto; }
/* Auftrag 20 (U5-4): «+½ Max» und «1 Tag … 1 Woche» liegen übereinander im selben Platz -- nichts daneben springt. */
.bu-schnell__wechsel { display: inline-grid; flex: 0 0 auto; }
.bu-schnell__satz { grid-area: 1 / 1; display: flex; gap: 6px; }
.bu-schnell__satz[aria-hidden="true"] { visibility: hidden; }
/* Auftrag 21c (AB-08): auch die Abzug-Tasten sind mindestens 44 px breit (kleinere Schrift statt min-width:0). */
.bu-schnell__satz[data-satz="abzug"] .bu-knopf { min-width: 44px; padding: 6px 8px; font-size: 0.9rem; }
.bu-schnell__bild { min-width: 10.5em; font-weight: 500; font-size: 0.9rem; }   /* feste Breite: Beschriftung «Bild 3 …» wechselt, nichts springt */
/* [NEUE-VERSION] Auftrag 123: ↶ ↷ am rechten Ende der Schnelltasten -- dieselbe Zeile und Höhe (die übrigen Tasten bleiben an
 * ihrer Stelle), beim waagrechten Rollen (iPad hochkant) bleiben sie rechts sichtbar. disabled = gleiche Grösse. */
.bu-schnell__verlauf { display: flex; gap: 6px; flex: 0 0 auto; margin-left: auto; position: sticky; right: 0; padding-left: 6px; background: var(--bu-flaeche); }
.bu-schnell .bu-verlauf__knopf { min-width: 44px; padding: 6px 8px; }
.bu-schnell__einzel { margin-left: auto; }
.bu-schnell__einzel + .bu-schnell__verlauf { margin-left: 0; }
/* [NEUE-VERSION] Auftrag 123 (C123): mit ↶ ↷ und «Auswertung SuS ▸» läuft die Leiste unter 1000 px über; ein sichtbarer
 * Rollbalken machte sie 15 px höher (820×1180: 50 → 65 px). Rollen geht weiter (Wischen, Trackpad), nur ohne Balken. */
.bu-schnell { scrollbar-width: none; }
.bu-schnell::-webkit-scrollbar { display: none; }
/* Nach ↶/↷ leuchtet das Feld kurz (nur Schatten, kein Layoutwechsel). */
.bu-eingabe--zurueck { box-shadow: inset 0 0 0 3px var(--bu-akzent); }
/* Einzelblatt «Auswertung SuS»: der Name öffnet es (nur wenn js/beurteilen-einzel.js geladen ist); Breite bleibt. */
.bu--mit-einzel .bu-tabelle tbody th.bu-name { cursor: pointer; }

/* Info oben: fest, schiebt nichts */
.bu-info { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 1000; width: min(720px, calc(100vw - 24px)); display: grid; gap: 6px;
  /* 16d C34: höchstens halbe Fensterhöhe, eigener Bildlauf -- Tabelle und Reiter bleiben bedienbar. */
  max-height: 45vh; overflow-y: auto; overscroll-behavior: contain; }
.bu-papierkorb > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.bu-info__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--bu-rand);
                  background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
.bu-info__zeile > span { flex: 1 1 240px; }
.bu-info__zeile--ok { border-color: var(--bu-gruen); }
.bu-info__zeile--fehler { border-color: var(--bu-rot); background: var(--bu-rot-hell); }
.bu-info__zeile--konflikt { border-color: var(--bu-gelb-rand); background: var(--bu-gelb); }

/* Auftrag 18: Kopf der Tabelle antippbar (Bild, Kriterium, Max, «+ Krit.»). Der Knopf füllt die Zelle, die Breite
 * bestimmt weiter die Spalte -- Antippen öffnet ein Feld darüber (.bu-pop), die Tabelle springt nicht. */
.bu-kopfknopf { display: block; width: 100%; min-height: 44px; min-width: 44px; margin: 0; padding: 2px 4px; border: 1px dashed transparent; border-radius: 6px;
                background: transparent; color: inherit; font: inherit; text-align: inherit; cursor: pointer; touch-action: manipulation; }
.bu-kopfknopf:hover, .bu-kopfknopf:focus-visible { border-color: var(--bu-akzent); outline: none; background: #f2f7ff; }
.bu-bereichkopf__knopf { text-align: left; font-weight: 600; }
/* 18b: Titel, Fach, Thema, Datum über der Tabelle antippbar. Sieht aus wie Text, Tippfläche 44 px, Langes mit «…». */
.bu-kopftipp { display: inline-block; max-width: 100%; min-height: 44px; line-height: 42px; margin: 0; padding: 0 3px; border: 1px dashed transparent; border-radius: 6px;
               background: transparent; color: inherit; font: inherit; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.bu-kopftipp:hover, .bu-kopftipp:focus-visible { border-color: var(--bu-akzent); outline: none; background: #f2f7ff; }
.bu-kopf--tabelle .bu-kopf__text { align-items: center; }
.bu-kopf--tabelle .bu-kopf__angaben { display: flex; align-items: center; min-width: 0; white-space: pre; }
.bu-kopf__fest, .bu-kopf__angaben .bu-kopftipp { flex: 0 0 auto; }
.bu-kopf__angaben .bu-kopftipp--kurz { flex: 0 1 auto; min-width: 2.6em; }
.bu-kopf__angaben .bu-kopftipp--lang { flex: 0 100 auto; min-width: 2.6em; }
.bu-kopf__angaben .bu-kopftipp--fest { flex: 0 0 auto; }
.bu-kopf__note { overflow: hidden; text-overflow: ellipsis; flex: 0 1000 auto; min-width: 0; }
.bu-kritkopf__knopf { text-align: center; }
.bu-max__knopf { text-align: center; border-color: var(--bu-rand); font-variant-numeric: tabular-nums; }
.bu-plus__knopf { font-size: 0.8rem; font-weight: 600; color: var(--bu-akzent); white-space: nowrap; border-color: var(--bu-rand); }
.bu-eingabe--uebermax { border-color: var(--bu-gelb-rand); background: var(--bu-gelb); }
.bu-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 2px 0; }
.bu-fuss .bu-statistik { flex: 1 1 320px; margin: 0; }
.bu-fuss__knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
/* Auftrag 21b (IP-08): ab 1000 px bleibt die Fusszeile EINE Zeile (sonst nimmt sie der Tabelle eine Zeile weg, iPad quer);
 * die Statistik kürzt mit «…», der ganze Text steht im title. */
@media (min-width: 1000px) {
  .bu-fuss { flex-wrap: nowrap; }
  .bu-fuss .bu-statistik { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bu-fuss__knoepfe { flex: 0 0 auto; flex-wrap: nowrap; }
}

/* Feld an Ort und Stelle (Popover): fest über der Seite, schiebt nichts. */
.bu-pop { position: fixed; z-index: 990; width: min(380px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto; box-sizing: border-box;
          display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--bu-akzent); border-radius: 12px; background: var(--bu-flaeche);
          box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
.bu-pop__titel { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-pop__zeile { display: grid; gap: 2px; }
.bu-pop__text { font-size: 0.85rem; color: var(--bu-leise); }
.bu-pop__lang { min-height: 72px; resize: vertical; width: 100%; }
.bu-pop .bu-feld { width: 100%; }
.bu-pop__zahlen { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.bu-pop__zahlzeile { display: inline-flex; align-items: center; gap: 4px; }
.bu-pop .bu-pop__zahl { width: 72px; text-align: center; }
.bu-pop__knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.bu-pop__rollen { display: grid; gap: 4px; max-height: 50vh; overflow: auto; }
.bu-pop__liste { display: flex; align-items: center; gap: 8px; justify-content: space-between; }

/* Dialog (Ordner-Wähler, In Ordner speichern): deckt die Seite ab, Tipp daneben schliesst nicht. */
.bu-dialog { position: fixed; inset: 0; z-index: 995; background: rgba(15, 23, 32, 0.35); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 8px; box-sizing: border-box; }
.bu-dialog__panel { width: min(760px, 100%); max-height: 92vh; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; box-sizing: border-box;
                    background: var(--bu-flaeche); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); }
.bu-dialog__kopf { display: flex; align-items: center; gap: 8px; }
.bu-dialog__titel { flex: 1 1 auto; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-dialog__werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; }
.bu-dialog__werkzeuge .bu-feld { flex: 1 1 200px; min-width: 0; }
/* Auftrag 21 (IP-03): der Dialog gibt keinen Bildlauf an die Seite weiter; (IP-05) ein speicherndes Feld lässt Tipps durch. */
.bu-dialog, .bu-dialog__panel { overscroll-behavior: contain; }
.bu-pop--speichert { pointer-events: none; opacity: 0.7; }
/* Auftrag 21c (UI-6): der Ordner-Wähler hat von Anfang an seine volle Höhe (Laden, Reiter, Suche verschieben die Fusszeile nicht). */
.bu-dialog__panel--fest { height: min(92vh, 760px); }
.bu-dialog__panel--fest .bu-dialog__liste { min-height: 0; }
.bu-dialog__liste { flex: 1 1 auto; min-height: 200px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--bu-rand); border-radius: 10px; padding: 6px; }
.bu-dialog__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.bu-dialog__zahl { margin-right: auto; }
.bu-reiter { display: flex; gap: 6px; }
.bu-reiter__knopf[aria-selected="true"] { background: var(--bu-akzent); border-color: var(--bu-akzent); color: #fff; }
.bu-wahl-gruppe { margin: 4px 0 10px; display: grid; gap: 4px; }
.bu-wahl-gruppe__kopf { display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
.bu-wahl { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; border-radius: 8px; background: var(--bu-kopf-bg); cursor: pointer; }
.bu-wahl input { width: 24px; height: 24px; flex: 0 0 auto; }
.bu-wahl__texte { flex: 1 1 auto; display: grid; min-width: 0; }
.bu-wahl__titel { font-weight: 600; }
.bu-wahl__text { font-size: 0.85rem; margin: 0; }
.bu-wahl__max { flex: 0 0 auto; font-size: 0.85rem; margin: 0; }

/* Meine Ordner */
.bu-ordner-neu { max-width: 720px; margin: 4px 0 12px; }
.bu-ordner-neu .bu-feld { flex: 1 1 260px; min-width: 0; }
.bu-ordner { border: 1px solid var(--bu-rand); border-radius: 12px; padding: 10px; margin: 0 0 12px; background: var(--bu-flaeche); }
.bu-ordner--aus { opacity: 0.65; background: #f6f7f8; }
.bu-ordner__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.bu-ordner__titel { flex: 1 1 240px; font-weight: 600; }
.bu-ordner__liste { display: grid; gap: 6px; margin-top: 8px; }
.bu-okrit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px; border-radius: 8px; background: var(--bu-kopf-bg); }
.bu-okrit--aus { opacity: 0.55; }
.bu-okrit--aus .bu-okrit__titel { text-decoration: line-through; }

/* Logo: feste Höhe, Laden oder Fehlen verschiebt nichts. */
.bu-logo-platz { flex: 1 1 260px; }
.bu-logo { height: 72px; display: flex; align-items: center; }
.bu-logo__bild { max-height: 72px; max-width: 100%; object-fit: contain; }
/* 18b: «Logo ändern» -- das Dateifeld liegt unsichtbar im Knopf (Tastatur erreicht es), Zustandszeile mit fester Höhe. */
.bu-logo__waehlen { position: relative; overflow: hidden; cursor: pointer; }
.bu-logo__wahl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bu-logo__waehlen:focus-within { outline: 2px solid var(--bu-akzent); outline-offset: 2px; }
.bu-logo__zustand { min-height: 1.5em; margin: 2px 0 6px; }
/* 18b: Vorschau beim Zurücksetzen. */
.bu-ursprung__liste { margin: 6px 0; padding-left: 1.2em; max-height: 50vh; overflow: auto; }
.bu-ursprung__liste li { margin: 2px 0; }

/* Auftrag 21c (UI-3/UI-5): reicht eine Zeile nicht für Titel, Klasse, Datum, Fach und Thema (js/beurteilen.js kopfZeilenSetzen
 * misst es), steht der Kopf auf zwei Zeilen: Angaben oben über die ganze Breite, Knöpfe darunter. Gilt für jede Breite und jeden Zoom. */
.bu-kopf--tabelle.bu-kopf--zwei { flex-wrap: wrap; }
.bu-kopf--tabelle.bu-kopf--zwei .bu-kopf__text { flex-basis: 100%; order: -1; }
.bu-kopf--tabelle.bu-kopf--zwei .bu-kopf__text > .bu-titel { max-width: 60%; }
.bu-kopf--tabelle.bu-kopf--zwei > .bu-knopf--still { margin-right: auto; }
.bu-fuss .bu-speicherstand { flex: 0 0 8.5em; width: 8.5em; min-width: 8.5em; max-width: 8.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .bu-tabelle .bu-name { min-width: 120px; max-width: 140px; }
  .bu-abschneiden { max-width: 110px; }
  .bu-speicherstand { min-width: 0; text-align: left; }
}
/* Auftrag 21b (V6) / Auftrag 20: Feld mit Grenzfehler; Bereich «Abgabe» im Raster-Editor (fest vorne). */
.bu-feld--fehler { border-color: var(--bu-rot); background: var(--bu-rot-hell); }
.bu-bereich--abgabe { border-left: 4px solid var(--bu-rot); }
.bu-griff--fest { cursor: default; font-weight: 700; }
.bu-ursprung__warnung { margin: 6px 0; padding: 6px 8px; border-radius: 8px; background: var(--bu-gelb); border: 1px solid var(--bu-gelb-rand); }
.bu-wahl__rasterzeile { display: grid; gap: 2px; margin: 0 0 6px; }
@media print { .bu-info, .bu-schnell, .bu-pop, .bu-dialog { display: none !important; } }
/* Auftrag 109 Teil A (U111): Namen-Ampel (nur Bildschirm) und Bemerkungs-Bausteine.
 * Die App hat keinen Dunkelmodus (styles.css): die Farben sind deckend und gemessen ≥ 4.5 : 1 auf der hellen Fläche.
 * Auftrag 116 (A12): Reserve entfällt, Zeichen sitzt in der Ecke: Breite = 0.6.370. Das Zeichen steht oben links (12 × 12),
 * wo weder Nummer noch Name stehen; der Name bricht in jedem Zustand gleich um wie ohne Farbe. */
.bu { --bu-ampel-rot: #fbd5d0; --bu-ampel-rot-zeichen: #9c1c12; --bu-ampel-orange: #fde3bd; --bu-ampel-orange-zeichen: #7f4100;
      --bu-ampel-gruen: #d3f0dc; --bu-ampel-gruen-zeichen: #0e5a26; --bu-ampel-leise: #46505a; }
.bu-tabelle tbody .bu-name--rot { background: var(--bu-ampel-rot); }
.bu-tabelle tbody .bu-name--orange { background: var(--bu-ampel-orange); }
.bu-tabelle tbody .bu-name--gruen { background: var(--bu-ampel-gruen); }
.bu-name--rot .bu-name__nr, .bu-name--orange .bu-name__nr, .bu-name--gruen .bu-name__nr { color: var(--bu-ampel-leise); }
.bu-name--rot::after, .bu-name--orange::after, .bu-name--gruen::after { position: absolute; left: 2px; top: 0; right: auto; transform: none;
      width: 12px; height: 9px; font-size: 9px; line-height: 9px; text-align: center; font-weight: 700; pointer-events: none; }
.bu-name--rot::after { content: "✗"; color: var(--bu-ampel-rot-zeichen); }
.bu-name--orange::after { content: "✎"; color: var(--bu-ampel-orange-zeichen); }
.bu-name--gruen::after { content: "✓"; color: var(--bu-ampel-gruen-zeichen); }
.bu-ampel-baustein { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; border: 1px solid transparent;
      border-radius: 8px; background: transparent; color: var(--bu-leise); font: inherit; font-size: 1.1rem; cursor: pointer; touch-action: manipulation; }
.bu-ampel-baustein:hover, .bu-ampel-baustein:focus-visible { border-color: var(--bu-akzent); outline: none; color: var(--bu-akzent); }
.bu-ampel-bausteine { display: grid; gap: 6px; max-height: 46vh; overflow: auto; }
.bu-ampel-baustein__zeile { display: flex; gap: 6px; align-items: center; }
.bu-ampel-baustein__text { flex: 1 1 auto; text-align: left; white-space: normal; }
.bu-ampel-baustein__weg { flex: 0 0 auto; }
.bu-ampel-baustein__fragetext { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bu-ampel-bausteine__verborgen:not([hidden]) { display: grid; gap: 6px; }
.bu-ampel-bausteine__eigen { margin: 8px 0 0; }
.bu-ampel-bausteine__neu { display: flex; gap: 6px; align-items: center; }
.bu-ampel-bausteine__neu .bu-feld { flex: 1 1 auto; min-width: 0; }
.bu-ampel-legende { display: grid; gap: 4px; margin: 6px 0; }
.bu-ampel-legende__zeile { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 600; }
.bu-ampel-legende__schalter { width: 22px; height: 22px; margin: 0; }
.bu-ampel-legende__zahlen { color: var(--bu-leise); font-size: 0.92rem; }
.bu-ampel-legende__punkt--gruen { color: var(--bu-ampel-gruen-zeichen); }
.bu-ampel-legende__punkt--orange { color: var(--bu-ampel-orange-zeichen); }
.bu-ampel-legende__punkt--rot { color: var(--bu-ampel-rot-zeichen); }
@media print {
  .bu-tabelle tbody .bu-name--rot, .bu-tabelle tbody .bu-name--orange, .bu-tabelle tbody .bu-name--gruen { background: var(--bu-flaeche) !important; }
  .bu-name--rot::after, .bu-name--orange::after, .bu-name--gruen::after { content: none !important; }
  .bu-name--rot .bu-name__nr, .bu-name--orange .bu-name__nr, .bu-name--gruen .bu-name__nr { color: var(--bu-leise); }
  .bu-ampel-baustein { display: none !important; }
}
/* [NEUE-VERSION] (Auftrag 229) Dialog «Notenskala ändern» */
.bns-knopf { font-size: 0.9em; }
.bns-knopf--aktiv { font-weight: 700; }
.bns-hinter { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 3000; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 24px 12px; }
.bns-box { background: var(--bu-flaeche, #fff); color: inherit; border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); width: min(980px, 100%); max-width: 100%; box-sizing: border-box; padding: 14px 16px; }
.bns-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bns-titel { margin: 0; font-size: 1.2em; }
.bns-inhalt { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 16px; margin-top: 10px; }
.bns-links { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bns-rechts { min-width: 0; }
.bns-feld { display: flex; flex-direction: column; gap: 3px; }
.bns-zahl { width: 7em; }
.bns-grenzen td, .bns-grenzen th { padding: 2px 4px; text-align: left; }
.bns-reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--bu-linie, #ccc); margin-bottom: 8px; flex-wrap: wrap; }
.bns-reiter__knopf { border: 1px solid transparent; background: none; padding: 6px 12px; min-height: 40px; cursor: pointer; border-radius: 6px 6px 0 0; font: inherit; color: inherit; }
.bns-reiter__knopf[aria-selected="true"] { border-color: var(--bu-linie, #ccc); border-bottom-color: var(--bu-flaeche, #fff); font-weight: 700; margin-bottom: -1px; background: var(--bu-flaeche, #fff); }
.bns-tabelle-rahmen { max-height: 360px; overflow: auto; }
.bns-tabelle { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.bns-tabelle th, .bns-tabelle td { padding: 3px 8px; text-align: right; border-bottom: 1px solid var(--bu-linie, #e3e3e3); }
.bns-tabelle th { position: sticky; top: 0; background: var(--bu-flaeche, #fff); }
.bns-vier td { font-weight: 700; }
.bns-grafik { width: 100%; max-width: 520px; height: auto; }
.bns-g-gitter { stroke: var(--bu-linie, #ddd); stroke-width: 1; }
.bns-g-vier { stroke: #c0392b; stroke-width: 1.5; stroke-dasharray: 5 4; }
.bns-g-kurve { fill: none; stroke: #1f6fb2; stroke-width: 2.2; }
.bns-g-text { font-size: 11px; fill: currentColor; }
.bns-vert { margin-bottom: 10px; }
.bns-vert__titel { font-weight: 700; margin-bottom: 4px; }
.bns-vert__saeulen { display: flex; align-items: flex-end; gap: 3px; height: 110px; border-bottom: 1px solid var(--bu-linie, #ccc); }
.bns-saeule { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; position: relative; }
.bns-saeule__balken { width: 100%; background: #1f6fb2; border-radius: 3px 3px 0 0; }
.bns-vert--alt .bns-saeule__balken { background: #9aa5b1; }
.bns-saeule__zahl { font-size: 11px; }
.bns-saeule__note { position: absolute; bottom: -18px; font-size: 11px; }
.bns-vert--neu, .bns-vert--alt { padding-bottom: 18px; }
.bns-leise { color: var(--bu-leise, #666); font-size: 0.9em; margin: 4px 0; }
.bns-meldung { color: #b00020; margin: 8px 0 0; }
.bns-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .bns-inhalt { grid-template-columns: 1fr; }
  .bns-hinter { padding: 8px; }
}