/* ══════════════════════════════════════════════════════════════════════════════════════════════
   3.1.0/A — Menüführung des Betreiberbereichs (Nr. 244, Entwurf `docs/entwurf-menuefuehrung.html`)

   Drei Dinge, an EINER Stelle:
   1. Der BAUM in der linken Spalte: Bereich › Blatt › Unterpunkt. Die Blatt-Knöpfe sind die von
      jeher vorhandenen `nav button[data-blatt]` — jede Rollenregel in `zeichne()` greift weiter.
      Ein verborgenes Blatt nimmt seine Unterpunkte mit (`button.verborgen + .mb-unter`).
   2. Die ANSICHT eines Unterpunkts im Blatt: Was hinter einem zugeklappten Kopf lag, steht offen da
      und allein (`section.mb-ansicht`, `.ansicht-an`, `.ansicht-pfad`). Die Klappköpfe selbst
      bleiben im Markup — sie sind in der Liste ausgeblendet (`.mb-nur-ansicht`) und in der Ansicht
      ohne Pfeil und ohne Klappen.
   3. Das DETAIL rechts neben der Liste: `#ovl` ist weiter der eine Behälter, in den die Öffner
      rendern — nur liegt er in `main` als Spalte neben der Liste (`main.mb-geteilt`) statt als
      Schleier darüber. Unter 1000 px Fensterbreite (3.2.0/M) ersetzt er die Liste (Vollseite mit „Zurück").
      Kurze Rückfragen bleiben Dialoge (`ovlAuf(…, { dialog:true })`).

   ⚠ Die Tokens kommen aus `oberflaeche.html` (`:root`), hier steht keine eigene Farbe.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Spalte: 248 statt 212 px (F1) — drei Ebenen brauchen Einzug ─────────────────────────── */
@media (min-width:901px) { aside { width:248px; } }

/* ── Suche in der Spalte ─────────────────────────────────────────────────────────────────── */
.mb-suche { margin:10px 12px 0; position:relative; flex:none; }
.mb-suche input { width:100%; height:34px; padding:0 30px 0 30px; border:1px solid var(--linie2);
                  border-radius:8px; font:inherit; font-size:13px; background:#fff; color:var(--tinte); }
.mb-suche input:focus { outline:2px solid var(--akzent); outline-offset:1px; }
.mb-suche > svg { position:absolute; left:9px; top:10px; color:var(--tinte3); pointer-events:none; }
.mb-suche-weg { position:absolute; right:4px; top:4px; width:26px; height:26px; border:0; border-radius:6px;
                background:none; color:var(--tinte3); font-size:14px; }
.mb-suche-weg:hover { background:var(--flaeche2); color:var(--tinte); }
.mb-treffer { flex:none; margin:6px 12px 0; border:1px solid var(--linie2); border-radius:8px; background:#fff;
              box-shadow:var(--schatten); overflow:hidden; max-height:46vh; overflow-y:auto; }
.mb-treffer .tg { font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
                  color:var(--tinte4); padding:8px 10px 2px; }
.mb-treffer button { display:flex; width:100%; gap:8px; align-items:center; border:0; background:none;
                     text-align:left; padding:7px 10px; font-size:12.5px; color:var(--tinte); min-height:34px; }
.mb-treffer button:hover, .mb-treffer button:focus-visible { background:var(--akzent-weich); outline:none; }
.mb-treffer button .mono { color:var(--tinte3); flex:none; }
.mb-treffer button .t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mb-treffer .leer { padding:10px; font-size:12.5px; color:var(--tinte3); line-height:1.4; }

/* ── Baum ────────────────────────────────────────────────────────────────────────────────── */
nav button[data-blatt] { position:relative; }
/* Der Pfeil rechts am Blatt mit Unterpunkten: zugeklappt nach rechts, aufgeklappt nach unten. */
nav button > svg.mb-pf { width:12px; height:12px; color:var(--tinte4); transition:transform .15s; margin-left:auto; }
nav button[aria-expanded="true"] > svg.mb-pf { transform:rotate(90deg); }
@media (prefers-reduced-motion:reduce) { nav button > svg.mb-pf { transition:none; } }
/* ⚠ Der Text trägt die Marke — mit dem Pfeil dahinter darf sie sich nicht mehr nach ganz rechts
   schieben, sonst stünde die Zahl zwischen Text und Pfeil ohne Abstand. */
nav button[aria-expanded] > .nav-txt { flex:1 1 auto; margin-right:6px; }
.mb-unter { display:none; flex:none; flex-direction:column; gap:1px; margin:1px 0 5px 17px; padding-left:12px;
            border-left:1px solid var(--linie); }
.mb-unter.offen { display:flex; }
/* ⚠ Ein verborgenes Blatt nimmt seine Unterpunkte mit — ohne JS, ohne zweite Regel. */
nav button.verborgen + .mb-unter { display:none !important; }
/* Die eingeklappte Bereichsgruppe (`navAufbauen`) nimmt den Unterbaum mit. */
nav .mb-unter.gruppe-zu { display:none !important; }
nav .mb-unter button { height:30px; font-size:12.5px; padding:0 8px; border-left:3px solid transparent;
                       color:var(--tinte2); }
nav .mb-unter button > svg { display:none; }        /* ein verschobener Blatt-Knopf („Anmeldung") bringt sein Symbol mit */
nav .mb-unter button.an { background:var(--akzent-weich); color:var(--akzent-tief); font-weight:600;
                          border-left-color:var(--akzent); padding-left:5px; }
nav .mb-unter button .nav-txt { display:flex; align-items:center; justify-content:space-between; gap:8px;
                                flex:1 1 auto; min-width:0; }
nav .mb-unter button .t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
nav .mb-unter button.neu { color:var(--akzent-tief); }
nav .mb-unter button.neu .t::before { content:'+ '; font-weight:700; color:var(--akzent); }
nav .mb-unter .z { font-size:11px; font-weight:700; padding:0 7px; border-radius:999px; background:var(--flaeche2);
                   color:var(--tinte2); flex:none; line-height:18px; }
nav .mb-unter .z:empty { display:none; }
nav .mb-unter .z.warn { background:var(--warten-weich); color:var(--warten); }
nav .mb-unter .z.stopp { background:var(--stopp-weich); color:var(--stopp); }
/* Die Zahl am Blatt („(3)") bleibt, wie `navZahl` sie schreibt — nur nicht mehr in Klammern gequetscht. */
@media (max-width:900px) {
  nav .mb-unter button { height:44px; font-size:14px; flex-shrink:0; }
  .mb-treffer button { min-height:44px; }
}

/* ── Brotkrumen im Kopf ──────────────────────────────────────────────────────────────────── */
#blattTitel { display:none; }
.mb-krumen { display:flex; align-items:center; gap:4px; min-width:0; flex:0 1 auto; overflow:hidden; /* 3.1.1 (B19); 3.3.1 (B4): 0 1 auto — nimmt, was er braucht, statt die Hälfte mit `.wachs` zu teilen */
             white-space:nowrap; font-size:13px; color:var(--tinte3); }
.mb-krumen > * { flex:none; }
.mb-krumen > :last-child { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.mb-krumen .krume { border:0; background:none; padding:4px 6px; border-radius:6px; font:inherit; font-size:13px;
                    font-weight:600; color:var(--tinte); max-width:260px; overflow:hidden; text-overflow:ellipsis; }
.mb-krumen .krume:hover { background:var(--flaeche2); color:var(--akzent-tief); }
.mb-krumen .krume:focus-visible { outline:2px solid var(--akzent); outline-offset:1px; }
.mb-krumen .krume[aria-current="page"] { color:var(--tinte); cursor:default; }
.mb-krumen .krume[aria-current="page"]:hover { background:none; color:var(--tinte); }
.mb-krumen .bereich { padding:0 4px; }
.mb-krumen i { font-style:normal; color:var(--tinte4); }
.mb-krumen .satz { font-weight:600; color:var(--tinte); padding:0 4px; }
.mb-wer { font-size:12px; color:var(--tinte3); white-space:nowrap; }
@media (max-width:900px) { .mb-wer { display:none; } .mb-krumen .bereich, .mb-krumen .bereich + i { display:none; } }

/* ── Ansicht eines Unterpunkts im Blatt ──────────────────────────────────────────────────── */
/* Was einen Unterpunkt hat, steht nicht mehr in der Liste — nur in seiner Ansicht. */
main .mb-nur-ansicht:not(.ansicht-an) { display:none !important; }
main section.mb-ansicht > :not(h2):not(p.unter):not(.ansicht-pfad):not(.ansicht-an) { display:none !important; }
main section.mb-ansicht .ansicht-pfad > :not(.ansicht-pfad):not(.ansicht-an) { display:none !important; }
/* Das Formular steht OFFEN da: kein Pfeil, kein Klappen — der Kopf bleibt als Überschrift. */
main .ansicht-an .kk-knopf { pointer-events:none; cursor:default; }
main .ansicht-an .kk-knopf > svg { display:none; }
main .ansicht-an .kk-rumpf { display:block !important; }
main section.mb-ansicht > h2 + p.unter { margin-bottom:12px; }
.mb-ansicht-hinweis { font-size:12.5px; color:var(--tinte3); margin:0 0 12px; }
#nzUeberwachungHalter .mb-ohne-netz { display:none; }
#nzUeberwachungHalter:has(> .karte.verborgen) .mb-ohne-netz { display:block; }

/* Die Reiterleiste der Abrechnung lebt im Baum weiter — hier ist sie nur noch Zustand (`.an`, `.verborgen`). */
#abrReiter { display:none !important; }

/* ── Detailblatt rechts neben der Liste ──────────────────────────────────────────────────── */
/* ⚠ KEINE Container-Abfrage an `.rechts`: `container-type:inline-size` bringt Layout-Containment mit,
   und dann hingen alle `position:fixed`-Dialoge in `main` (`#zuDialog`, `#kuFenster`, `#abrFenster`)
   an `.rechts` statt am Fenster. 3.2.0/M: Die Schwelle ist seit 3.2.0 die FENSTERbreite 1000 px (unten). */
/* `#ovl` liegt jetzt IN `main`. Als Dialog (`.mb-dialog`) verhält es sich wie bisher — fixed, Schleier. */
#ovl.auf.mb-detail { position:static; display:block; padding:0; background:none; z-index:1; overflow:visible;
                     inset:auto; width:100%; }
#ovl.auf.mb-detail .ovl-blatt { --ovl-breite:100%; width:100%; max-height:none; box-shadow:var(--schatten);
                                 border-radius:12px; }
#ovl.auf.mb-detail .ovl-rumpf { max-height:calc(100vh - 210px); }
/* 3.2.0/M: Im geteilten Bild begrenzt das BLATT seine Höhe (Kopf + Anker + Rumpf), nicht der Rumpf mit einer
   geschätzten Zahl — sonst ragte der klebende Fuss bei umbrechender Ankerleiste unter den Fensterrand
   (gemessen 1000 px: 4 px, 1280 px: 35 px zu tief). 74 px = `top` des klebenden Blatts, 16 px Luft unten. */
@media (min-width:1000px) {
  main.mb-geteilt > #ovl.auf.mb-detail .ovl-blatt { max-height:calc(100vh - 90px); }
  main.mb-geteilt > #ovl.auf.mb-detail .ovl-rumpf { max-height:none; min-height:0; }
}
.ovl-kopf .mb-dt-titel { min-width:0; flex:1 1 auto; }
.ovl-kopf .mb-dt-titel b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mb-dt-nav { display:flex; gap:4px; flex:none; }
.mb-dt-nav button { width:32px; height:32px; padding:0; border-radius:8px; border:1px solid var(--linie2);
                    background:#fff; color:var(--tinte2); font-size:16px; line-height:1; display:inline-flex;
                    align-items:center; justify-content:center; }
.mb-dt-nav button:hover:not([disabled]) { border-color:var(--akzent); color:var(--tinte); }
.mb-dt-nav button[disabled] { color:var(--tinte4); cursor:not-allowed; }
.mb-dt-nav button:focus-visible { outline:2px solid var(--akzent); outline-offset:1px; }
#ovl:not(.mb-detail) .mb-dt-nav, #ovl:not(.mb-detail) .mb-zurueck { display:none; }
/* 3.2.0/M: `#ovl .ovl-kopf` davor — `.knopf { display:inline-flex }` steht im Stilblock der Seite NACH dieser Datei und
   gewann bei gleicher Spezifität: „‹ Zurück zur Liste" stand auch im geteilten Bild (gemessen 1000/1280 px). */
#ovl .ovl-kopf .mb-zurueck { display:none; }
/* Anker statt Reiter (F5): alle Abschnitte stehen untereinander, der Anker rollt nur hin. */
.mb-anker { display:none; gap:4px; flex-wrap:wrap; padding:8px 18px; border-bottom:1px solid var(--linie);
            background:var(--flaeche2); flex:none; }
.mb-anker.da { display:flex; }
.mb-anker button { font-size:12px; font-weight:600; color:var(--tinte2); padding:4px 9px; border-radius:999px;
                   border:0; background:none; white-space:nowrap; }
.mb-anker button:hover, .mb-anker button.an { background:#fff; color:var(--akzent-tief); }
.mb-anker button:focus-visible { outline:2px solid var(--akzent); outline-offset:1px; }
#ovlRumpf h3, #ovlRumpf h4, #ovlRumpf .lbl { scroll-margin-top:8px; }
/* Die gewählte Zeile in der Liste. */
main tbody tr.gewaehlt td { background:var(--akzent-weich) !important; }
main tbody tr.gewaehlt td:first-child { box-shadow:inset 3px 0 0 var(--akzent); }

/* 3.2.0/M: Master-Detail ab 1000 px FENSTERbreite (F3, Ansage 24.09.2026 — vorher 1300 px). Die Zahl steht
   noch einmal als `MB_GETEILT_AB` im Skript (Rollen an die Spitze beim Öffnen); beide gemeinsam ändern. */
@media (min-width:1000px) {
  main.mb-geteilt { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; max-width:none; }
  main.mb-geteilt > #testband, main.mb-geteilt > #uebAblauf { flex:1 1 100%; }
  /* 3.3.1 (Befund E1): Die Liste wächst mit dem Fenster — ein gutes Drittel, mindestens 420, höchstens 640 px
     (vorher fest 340 px: bei 2000 px Fenster 270 zu 1.530 px). Der Datensatz bekommt den Rest, höchstens 1.200 px —
     ein fast leeres Blatt über 1.500 px Breite liest sich nicht (E2). */
  main.mb-geteilt > section.mb-liste { flex:0 0 clamp(420px, 34%, 640px); width:auto; min-width:0; }
  main.mb-geteilt > #ovl.mb-detail { flex:1 1 0; width:auto; min-width:0; max-width:1200px; position:sticky; top:74px; }
  /* Die schmale Liste zeigt nur, was zum Wiederfinden nötig ist; die Spalten stehen alle im Detail. */
  main.mb-geteilt > section.mb-liste .tab-halter { overflow-x:auto; }
  main.mb-geteilt > section.mb-liste table { font-size:12.5px; }
  main.mb-geteilt > section.mb-liste .zahlen { grid-template-columns:1fr; }
}
/* 3.2.0/M: Zwischen 1000 und 1299 px rückt die Liste auf 260 px (Entwurf: `.liste { width:260px }` unter
   1000 px Inhaltsbreite) — sonst bliebe dem Detail neben 248 px Spalte und 340 px Liste zu wenig. */
@media (min-width:1000px) and (max-width:1299px) {
  /* 3.3.1 (E1): mit der Kurzform genügt hier ein gutes Drittel, 300–420 px (vorher fest 260 px). */
  main.mb-geteilt > section.mb-liste { flex-basis:clamp(300px, 36%, 420px); width:auto; }
}
/* Darunter: das Detail ersetzt die Liste — Vollseite mit „‹ Zurück zur Liste". */
@media (max-width:999px) {
  main.mb-geteilt > section.mb-liste { display:none !important; }
  #ovl.auf.mb-detail .ovl-kopf .mb-zurueck { display:inline-flex; }
  #ovl.auf.mb-detail .ovl-rumpf { max-height:none; }
  #ovl.auf.mb-detail .ovl-kopf { flex-wrap:wrap; }
}
@media (max-width:640px) {
  .mb-dt-nav button { width:44px; height:44px; }
  .mb-anker { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .mb-anker button { min-height:36px; }
  #ovl.auf.mb-detail .ovl-blatt { border-radius:12px; border:1px solid var(--linie); height:auto; }
  #ovl.auf.mb-detail .ovl-kopf { border-radius:12px 12px 0 0; }
}

/* Das aufgeklappte Blatt steht fett (Entwurf `.kn.offen`); die Markierung `.an` trägt der Unterpunkt. */
nav button[aria-expanded="true"] { color:var(--tinte); font-weight:600; }
nav button[aria-expanded="true"].an { background:none; border-left-color:transparent; padding-left:10px; }
nav button[aria-expanded="true"].an > svg:first-child { color:var(--akzent); }

/* 3.1.1 (Durchklick B16): Zeilen mit Fenster-Knopf sind als Ganzes klickbar. */
main tbody tr:has(button.zico-p) { cursor:pointer; }
/* 3.1.1 (Durchklick B31): die angesprungene Karte kurz hervorheben — dieselbe Farbe wie `tr.zeile-treffer`. */
.karte-treffer { outline:3px solid var(--akzent); outline-offset:2px; transition:outline-color .6s; }

/* 3.1.1 Nachprüfung (B58): In der 340-px-Liste neben dem Detail klebt die Aktionsspalte nicht mehr rechts — sie lag über dem
   Flächennamen. Die Zeile selbst öffnet das Detail (B16), die Knöpfe stehen am Ende der rollbaren Tabelle. */
main.mb-geteilt > section.mb-liste #schirmTabelle th:last-child,
main.mb-geteilt > section.mb-liste #schirmZeilen td.zico-zelle { position:static; box-shadow:none; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   3.2.0/M — Speichern-Leiste und die vier Fenster im Detail (Nr. 244, Entwurf `docs/entwurf-menuefuehrung.html`)
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* (1) **Speichern klebt unten am Blatt** (Entwurf `.dt-fuss`). Der Öffner markiert seinen Fuss mit `.mb-fuss`;
   `.bs-fuss` und `.gr-fuss` kleben schon seit 3.0.0 — hier gilt für alle drei DIESELBE Regel. Im geteilten Bild
   rollt der Rumpf (`max-height`), der Fuss klebt an dessen Unterkante; die negativen Ränder heben das Polster des
   Rumpfs (16/18/20 px) auf. */
#ovl.mb-detail .mb-fuss, #ovl.mb-detail .bs-fuss, #ovl.mb-detail .gr-fuss {
  position:sticky; bottom:-20px; z-index:2; margin:18px -18px -20px; padding:12px 18px 14px;
  background:var(--flaeche); border-top:1px solid var(--linie); box-shadow:0 -6px 16px -10px rgba(28,25,23,.25);
  border-radius:0 0 12px 12px; }
.mb-fuss-knoepfe { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.mb-fuss .mb-fuss-meldung:not(:empty) { margin-top:10px; font-size:13px; white-space:pre-line; }

/* (2) **Die vier Fenster** (`#zuDialog`, `#kuFenster`, `#abrFenster`, das Entscheidungsfenster `fpFenster`)
   stehen rechts neben der Liste wie ein Datensatz (`mbFensterAn`) — kein Schleier, nichts verdeckt die Liste.
   ⚠ Die Karte behält ihre Bauart (Kopf · rollender Rumpf · Fuss); nur Lage, Breite und Höhe ändern sich.
   ⚠ Spezifität: `.zu-blatt.ku-blatt .karte` (1020 px) und `.zu-blatt .fp-fenster.vk-kontoblatt` (780 px) müssen
   hier verlieren — deshalb `main > … > .karte`. */
main > .zu-blatt.mb-im-detail { position:static; inset:auto; z-index:1; padding:0; background:none; display:block;
                                 width:100%; order:2; }
main > .zu-blatt.mb-im-detail > .karte { width:100%; max-width:none; max-height:calc(100vh - 96px); height:auto;
                                         border:1px solid var(--linie); border-radius:12px; box-shadow:var(--schatten); }
main > .zu-blatt.mb-im-detail.verborgen { display:none; }
/* Ein zweites Fenster über einem ersten (Guthabenkonto › Einzahlung zurücknehmen) oder ein Fenster über einem
   offenen Datensatz (Werbekunde › Vorab-Prüfung): das untere wartet unsichtbar, bis das obere zu ist. */
main > .zu-blatt.mb-pausiert, main > #ovl.mb-pausiert { display:none !important; }
main.mb-geteilt > #ovl.mb-detail { order:2; }
/* ⚠ Dieselbe Spezifitätsfalle wie `.mb-zurueck` (`.knopf` steht später) — deshalb mit Pfad. */
main > .zu-blatt .karte > .mb-fenster-zurueck { display:none; align-self:flex-start; margin:12px 18px 0; flex:none; }
@media (min-width:1000px) {
  main.mb-geteilt > .zu-blatt.mb-im-detail { flex:1 1 0; width:auto; min-width:0; max-width:1200px; position:sticky; top:74px; }
}
/* Unter 1000 px ersetzt das Fenster die Liste (wie das Detail): die Seite rollt, nicht die Karte — deshalb
   klebt der Fuss dann am Fensterrand (`bottom:0`), sonst stünde „Speichern" unter einer langen Liste. */
@media (max-width:999px) {
  /* ⚠ Die Karte darf nicht abschneiden (`overflow:hidden` machte sie zum Rollbehälter, der klebende Fuss hinge an
     ihr statt am Fenster). Die Inhalte darin behalten ihr `overflow:auto` — ohne Höhengrenze rollen sie nur noch
     WAAGERECHT, und eine breite Tabelle (Preisumrechnung) schiebt so nicht die ganze Seite quer. */
  main > .zu-blatt.mb-im-detail > .karte { max-height:none; overflow:visible; border-radius:12px; }
  main > .zu-blatt.mb-im-detail .zu-fuss, main > .zu-blatt.mb-im-detail .ku-fuss {
    position:sticky; bottom:0; z-index:2; border-radius:0 0 12px 12px; }
  main > .zu-blatt.mb-im-detail .karte > .mb-fenster-zurueck { display:inline-flex; }
  #ovl.auf.mb-detail .ovl-blatt, #ovl.auf.mb-detail .ovl-rumpf { overflow:visible; }
  #ovl.mb-detail .mb-fuss, #ovl.mb-detail .bs-fuss, #ovl.mb-detail .gr-fuss { bottom:0; }
}
@media (max-width:640px) {
  main > .zu-blatt.mb-im-detail .zu-fuss .knopf, main > .zu-blatt.mb-im-detail .ku-fuss .knopf,
  #ovl.mb-detail .mb-fuss .knopf { min-height:44px; }
  main > .zu-blatt.mb-im-detail .fp-x { width:44px; height:44px; }
}
/* Die neuen Unterpunkte (4): Netze › Rechnungssteller, Werbekunden › Branchensperren. */
.mb-sperrmarken { display:flex; gap:6px; flex-wrap:wrap; }

/* ── 3.3.1 · Durchklick 3.3.0 Etappe A ─────────────────────────────────────────────────────── */
/* B8: Der Pfeil lag über dem letzten Buchstaben („Belegungseinheiten") — der Text weicht ihm jetzt aus und
   kürzt mit „…" statt darunter zu laufen; Unterpunkte („Exklusivität je Kategorie") brechen um statt zu kürzen. */
nav button > .nav-txt > .nt { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
nav button > svg.mb-pf { flex:none; }
nav .mb-unter button { height:auto; min-height:30px; padding-top:5px; padding-bottom:5px; }
nav .mb-unter button .t { white-space:normal; line-height:1.3; }
/* B4: Bei 1000–1299 px reichte der Kopf nicht für Bereich, Blatt, Unterpunkt und „portalbetreiber · kamo" — die Krumen
   endeten in „Verwalt…". Der Bereich (steht links im Baum) und der Name (steht unten links) weichen bis 1299 px. */
@media (min-width:1000px) and (max-width:1299px) {
  .mb-wer { display:none; }
  .mb-krumen .bereich, .mb-krumen .bereich + i { display:none; }
}
@media (max-width:999px) {
  .mb-wer { display:none; }
  .mb-krumen .bereich, .mb-krumen .bereich + i { display:none; }
}
/* B40: Auf schmalen Schirmen standen „‹ Zurück zur Liste" und „Schließen" nebeneinander und taten dasselbe. */
@media (max-width:999px) {
  #ovl.auf.mb-detail .ovl-kopf .mb-schliessen { display:none; }
}
/* B38: Häkchen (Filter, Netze) und der Verweis auf die API-Doku am Finger grösser. */
@media (pointer:coarse), (max-width:640px) {
  main input[type="checkbox"], main input[type="radio"] { width:22px; height:22px; }
  aside a { display:inline-flex; align-items:center; min-height:44px; }
}

/* ── 3.3.1 · Befunde des Betreibers E1 · E6 — die Liste neben dem Detail ─────────────────────────────────────────
   Gesetzt von `tabelleKompakt` / `mbListeVerdichten` in `oberflaeche.html`, nur im geteilten Bild ab 1000 px. */
@media (min-width:1000px) {
  /* E6: Werkzeuge und Einleitung klappen hinter einen Knopf — die Liste steht oben. */
  main.mb-geteilt > section.mb-liste:not(.mb-werkzeuge-auf) > .mb-werkzeug,
  main.mb-geteilt > section.mb-liste:not(.mb-werkzeuge-auf) > p.unter { display:none !important; }
  main.mb-geteilt > section.mb-liste > .mb-werkzeug-knopf { margin:0 0 12px; min-height:36px; font-size:12.5px; }
  main.mb-geteilt > section.mb-liste > h2 { margin-bottom:8px; }
  /* E1: Kurzform — Häkchen · Name/Ort/Kennzeichen untereinander · Zeilenknöpfe; keine Spalte, die abgeschnitten wird. */
  main table.kompakt, main table.kompakt tbody { display:block; width:100%; }
  main table.kompakt thead tr { display:flex; }
  main table.kompakt thead th:not(.gr-wahl) { display:none; }
  main table.kompakt tbody tr { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:10px;
                                align-items:start; padding:9px 10px; border-top:1px solid var(--linie); }
  main table.kompakt tbody tr.verborgen { display:none; }
  main table.kompakt tbody tr.zebra { background:var(--flaeche2); }
  main table.kompakt tbody tr.gewaehlt { background:var(--akzent-weich); box-shadow:inset 3px 0 0 var(--akzent); }
  main table.kompakt tbody td { display:none; padding:0; border:0; background:none !important; box-shadow:none !important; }
  main table.kompakt tbody td.gr-wahl { display:block; grid-column:1; grid-row:1 / span 6; width:auto; min-width:max-content; }
  /* Die Zeilenknöpfe stehen UNTER den Angaben — rechts daneben nähmen vier Knöpfe dem Namen 150 px. */
  main table.kompakt tbody td.zico-zelle { display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-start;
                                           grid-column:2; width:auto; position:static; margin-top:6px; }
  main table.kompakt tbody td.zico-zelle .zico { margin-left:0; }
  main table.kompakt tbody td.kz { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; grid-column:2;
                                   min-width:0; overflow-wrap:anywhere; text-align:left; font-size:12.5px;
                                   color:var(--tinte2); margin-top:2px; }
  main table.kompakt tbody td.kz1 { display:block; color:var(--tinte); font-size:13px; margin-top:0; }
  main table.kompakt tbody td.kz .mono { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  main table.kompakt tbody td.kz-voll { display:block; grid-column:1 / -1; }
  /* 3.3.4: Flächenliste in Kurzform — gleich hohe Zeilen (vorher 158–223 px). Jede Angabe EINE Zeile (abgeschnitten
     mit …), die Knöpfe als 2×2-Raster RECHTS daneben statt darunter. Kennung, Umfeldnummer und alles Weitere stehen
     im Datensatz rechts. */
  main table#schirmTabelle.kompakt tbody tr { grid-template-columns:auto minmax(0,1fr) auto; padding:8px 14px 8px 10px; } /* 3.3.5: Innenrand rechts */
  main table#schirmTabelle.kompakt tbody td.kz { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
                                                 line-height:24px; height:24px; margin-top:0; }
  main table#schirmTabelle.kompakt tbody td.kz .mono,
  main table#schirmTabelle.kompakt tbody td.kz:not(.kz1) div.mono { display:none !important; } /* 3.3.5: auch die Umfeldnummer */
  main table#schirmTabelle.kompakt tbody td.kz:not(.kz1) div { display:inline !important; margin:0 0 0 6px !important; }
  main table#schirmTabelle.kompakt tbody td.kz1 > div { flex-wrap:nowrap; }
  main table#schirmTabelle.kompakt tbody td.kz1 > div > div { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  main table#schirmTabelle.kompakt tbody td.zico-zelle { grid-column:3; grid-row:1 / span 3; display:grid;
                                                          grid-template-columns:repeat(2, 32px); gap:4px; margin-top:0; align-self:start;
                                                          justify-self:end; width:auto; }
}

/* 3.3.4: Datensatz-Liste im Detail rechts (Buchung, Motiv) — Beschriftung links, Wert rechts; schmal untereinander. */
#ovlRumpf dl.mbd { margin:0; display:grid; gap:0; }
#ovlRumpf .mbd-zeile { display:grid; grid-template-columns:minmax(120px, 34%) 1fr; gap:4px 14px; padding:8px 0;
                       border-top:1px solid var(--linie); font-size:13px; }
#ovlRumpf .mbd-zeile:first-child { border-top:0; }
#ovlRumpf .mbd-zeile dt { color:var(--tinte3); font-size:12.5px; }
#ovlRumpf .mbd-zeile dd { margin:0; min-width:0; overflow-wrap:anywhere; }
@media (max-width:560px) { #ovlRumpf .mbd-zeile { grid-template-columns:1fr; } }