/* css/beurteilen-einzel.css -- [NEUE-VERSION] Auftrag 123 Teil E: Einzelblatt «Auswertung SuS» (js/beurteilen-einzel.js).
 * Alles unter .bue-…; Farben und Variablen aus .bu (css/beurteilen.css). Feste Masse, damit nichts springt:
 * Leiste 52 px (unter 900 px zwei Zeilen = 104 px), Kinderliste 224 px, Blatt höchstens 820 px, Spalten 44/auto/76/100 px,
 * Punkte-Feld 88×44, alle Tippflächen ≥ 44 px. Meldungen laufen über das feste .bu-info (nie im Fluss). */

/* Namenszelle der Tabelle öffnet das Einzelblatt: nur Zeiger und ein Zierzeichen oben rechts (absolut, kein Innenabstand --
 * die Namenspalte bleibt gleich breit, Auftrag 116). */
.bu-tabelle tbody th.bu-name { cursor: pointer; }
.bu-tabelle tbody th.bu-name::before { content: "▸"; position: absolute; right: 2px; top: 1px; width: 12px; height: 12px; font-size: 10px; line-height: 12px;
  text-align: center; color: #8a949d; pointer-events: none; }

.bu--einzel { padding-bottom: 8px; }
.bue { display: flex; flex-direction: column; gap: 8px; }

/* ---------------- Leiste: genau eine Zeile 52 px */
.bue-leiste { display: flex; align-items: center; gap: 6px; height: 52px; box-sizing: border-box; padding: 4px 0; flex-wrap: nowrap; overflow: hidden;
  border-bottom: 1px solid var(--bu-rand); }
.bue-leiste__a, .bue-leiste__b { display: flex; align-items: center; gap: 6px; height: 44px; flex-wrap: nowrap; }
.bue-leiste__a { flex: 1 1 auto; min-width: 0; }
.bue-leiste__b { flex: 0 0 auto; }
.bue-leiste__titel { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.bue-titel { margin: 0; font-size: 1.1rem; flex: 0 0 auto; }
.bue-leiste__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.bue-leiste__zaehler { flex: 0 0 7.6em; width: 7.6em; text-align: center; color: var(--bu-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bue-knopf { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.bue-quadrat { width: 44px; padding: 0; }
.bue-pfeil { min-width: 56px; }
.bue .bu-speicherstand.bue-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; }
.bue-verlauf { display: inline-flex; flex: 0 0 88px; width: 88px; height: 44px; }
.bue-verlauf .bu-schnell__verlauf { display: inline-flex; gap: 0; margin: 0; padding: 0; position: static; background: none; }
.bue-verlauf .bu-verlauf__knopf, .bue-verlauf .bue-knopf { width: 44px; min-width: 44px; padding: 0; }
.bue-kurz { display: none; }
.bue-kinderknopf { display: none; }
@media (max-width: 1279px) {
  .bue-lang { display: none; }
  .bue-kurz { display: inline; }
}
@media (max-width: 899px) {
  /* zwei feste Zeilen: 4 + 44 + 8 + 44 + 4 = 104 px */
  .bue-leiste { height: 104px; flex-direction: column; align-items: stretch; gap: 8px; }
  .bue-leiste__a, .bue-leiste__b { flex: 0 0 44px; }
  .bue-leiste__b { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .bue-leiste__b::-webkit-scrollbar { display: none; }
  .bue-kinderknopf { display: inline-flex; }
}

/* ---------------- Rumpf: links die Liste (224 px), rechts das Blatt; je eigener Rollbereich */
.bue-rumpf { display: grid; grid-template-columns: 224px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "liste blatt"; gap: 12px;
  position: relative; min-height: 240px; }
.bue-blatt { grid-area: blatt; overflow: auto; overscroll-behavior: contain; min-height: 0; }
.bue-liste { grid-area: liste; display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid var(--bu-rand); border-radius: 10px; background: var(--bu-flaeche); }
@media (max-width: 899px) {
  .bue-rumpf { grid-template-columns: minmax(0, 1fr); grid-template-areas: "blatt"; }
  /* Liste als Feld über dem Blatt; sie schiebt das Blatt nie */
  .bue-liste { display: none; position: absolute; left: 0; top: 0; bottom: 0; width: min(320px, 86vw); z-index: 5; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); }
  .bue-rumpf--liste-offen .bue-liste { display: flex; }
}
.bue-liste__kopf { flex: 0 0 44px; height: 44px; box-sizing: border-box; display: flex; align-items: center; padding: 0 10px; font-size: 0.88rem; color: var(--bu-leise);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--bu-rand); font-variant-numeric: tabular-nums; }
.bue-liste__eintraege { list-style: none; margin: 0; padding: 4px; overflow: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.bue-liste__li { margin: 0 0 2px; }
.bue-eintrag { position: relative; display: grid; grid-template-columns: 2em minmax(0, 1fr) 3.4em; align-items: center; gap: 4px; width: 100%; min-height: 44px;
  box-sizing: border-box; padding: 0 6px 0 14px; border: 2px solid transparent; border-radius: 8px; background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer; touch-action: manipulation; }
.bue-eintrag:hover { border-color: var(--bu-rand); }
.bue-eintrag[aria-current="true"] { border-color: var(--bu-akzent); }
.bue-eintrag:focus-visible { outline: 2px solid var(--bu-akzent); outline-offset: 1px; }
.bue-eintrag.bu-name--rot { background: var(--bu-ampel-rot); }
.bue-eintrag.bu-name--orange { background: var(--bu-ampel-orange); }
.bue-eintrag.bu-name--gruen { background: var(--bu-ampel-gruen); }
.bue-eintrag__nr { color: var(--bu-leise); font-variant-numeric: tabular-nums; }
.bue-eintrag__name { min-width: 0; }
.bue-eintrag__note { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bue-eintrag__note--vorlaeufig { font-style: italic; font-weight: 400; }

/* ---------------- Blatt wie der Druck «Blatt je Kind» */
.bue-blatt__innen { max-width: 820px; padding: 0 4px 16px; box-sizing: border-box; }
.bue-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.bue-kopf__links { flex: 1 1 auto; min-width: 0; }
.bue-kopf__titel { display: block; max-width: 100%; min-height: 44px; font-size: 1.15rem; font-weight: 700; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bue-kopf__angaben { margin: 2px 0; color: var(--bu-leise); overflow-wrap: anywhere; }
.bue-kopf__name { margin: 4px 0; font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
.bue-kopf__marke { margin: 2px 0; }
.bue-kopf__verknuepft { margin: 2px 0; font-size: 0.88rem; color: var(--bu-leise); }
.bue-kasten { flex: 0 0 220px; width: 220px; box-sizing: border-box; padding: 6px 10px; border: 1px solid #1d252c; border-radius: 6px; }
.bue-kasten__zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 28px; }
.bue-kasten__wert { min-width: 5em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bue-tabelle { width: 100%; table-layout: fixed; border-collapse: collapse; }
.bue-sp-nr { width: 44px; }
.bue-sp-max { width: 76px; }
.bue-sp-punkte { width: 100px; }
.bue-tabelle th, .bue-tabelle td { padding: 0 6px; border-bottom: 1px solid var(--bu-rand); vertical-align: middle; text-align: left; }
.bue-tabelle thead th { height: 36px; font-size: 0.88rem; color: var(--bu-leise); font-weight: 600; }
.bue-tabelle .bue-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bue-tabelle .bue-nr { text-align: center; color: var(--bu-leise); font-variant-numeric: tabular-nums; }
.bue-bild__kopf th { padding: 4px 6px; background: var(--bu-kopf-bg); }
.bue-bild__kopfinnen { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.bue-bild__titel { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; font-weight: 700; }
.bue-titelknopf { width: 100%; min-height: 44px; box-sizing: border-box; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.bue-titelknopf:hover { border-color: var(--bu-akzent); }
.bue-titelknopf:focus-visible { outline: 2px solid var(--bu-akzent); outline-offset: -2px; }
.bue-krit__knopf { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.bue-krit__titel { overflow-wrap: anywhere; }
.bue-krit__text { font-size: 0.88rem; color: var(--bu-leise); overflow-wrap: anywhere; }
.bue-max__knopf { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px 4px; text-align: right; font-variant-numeric: tabular-nums; }
.bue-faktor { color: var(--bu-leise); font-size: 0.85rem; font-weight: 400; white-space: nowrap; }
.bue-punkte { text-align: center; }
.bue .bue-punkte .bu-eingabe { width: 88px; height: 44px; }
.bue .bue-punkte .bu-eingabe:not(.bu-eingabe--konflikt):not(.bu-eingabe--fehler):not(.bu-eingabe--uebermax) { border-color: var(--bu-rand); background: var(--bu-flaeche); }
.bue-punkte--abzug .bu-eingabe { color: var(--bu-rot); }
.bue-krit--abzug .bue-krit__titel { color: var(--bu-rot); }
.bue-leer td { height: 44px; }
.bue-leise { color: var(--bu-leise); }
.bue-zwischen td { height: 36px; background: #fafbfc; font-weight: 600; }
.bue-zwischen__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bue-total th, .bue-total td { height: 44px; border-top: 2px solid #1d252c; font-weight: 700; }

.bue-fuss { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 8px 12px; margin-top: 12px; }
.bue-fuss__titel { display: block; margin-bottom: 2px; font-size: 0.88rem; color: var(--bu-leise); }
.bue-bem { position: relative; }
.bue .bue-bem__feld { display: block; width: 100%; min-width: 0; height: 88px; min-height: 88px; box-sizing: border-box; padding: 8px 52px 8px 8px; resize: none;
  border: 1px solid var(--bu-rand); background: var(--bu-flaeche); text-align: left; font: inherit; line-height: 1.35; }
.bue .bue-bem__feld.bu-eingabe--fehler { border-color: var(--bu-rot); background: var(--bu-rot-hell); }
.bue .bue-bem__feld.bu-eingabe--konflikt { border-color: var(--bu-gelb-rand); background: var(--bu-gelb); }
.bue .bue-bem__baustein { top: 4px; transform: none; }
.bue .bue-lo__feld { width: 100%; height: 44px; border: 1px solid var(--bu-rand); }
.bue .bue-lo__feld.bu-eingabe--fehler { border-color: var(--bu-rot); background: var(--bu-rot-hell); }
.bue .bue-lo__feld.bu-eingabe--konflikt { border-color: var(--bu-gelb-rand); background: var(--bu-gelb); }
.bue-fuss__knoepfe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 599px) {
  .bue-fuss { grid-template-columns: minmax(0, 1fr); }
  .bue-kopf { flex-direction: column; }
  .bue-kasten { width: 100%; flex-basis: auto; }
}

/* Popover «Max angleichen» und Menü (liegen im Container, nicht im Blatt) */
.bue-wahl { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.bue-wahl input { width: 22px; height: 22px; margin: 0; }
.bue-warnung { min-height: 2.6em; margin: 4px 0 0; color: var(--bu-rot); }
.bue-menue { display: block; width: 100%; margin: 0 0 6px; text-align: left; }

@media print { .bue { display: none !important; } }