/* =====================================================================
   lab - werkzeuge/bildbearbeitung/app.css
   LabImageEdit: Leisten, Werkzeugleiste, Arbeitsflaeche, Panel,
   Ausschnitt-Rahmen, Lupe, Dialoge (Stapel, Hilfe, Neu), Toast.

   Konventionen (AGENTS.md 5):
     - Alle Klassen mit Prefix lab_bb_ (nur dieses Werkzeug nutzt sie)
     - Farben ausschliesslich als Variablen aus css/colors.css
     - Ausnahme: der Schachbrett-Alpha-Untergrund hinter dem Bild und
       die gelbe Ausschnitt-Verstaerkung sind Ansichts-Farben der
       Zeichenflaeche (dort dokumentiert).
   ===================================================================== */

/* ---------------------------------------------------------------
   Menüleiste (Photoshop/Krita-Konvention): schmale Leiste mit
   Menü-Titeln, Klick öffnet ein Dropdown, Klick außerhalb schließt
   --------------------------------------------------------------- */
.lab_bb_menueleiste {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin: 0 0 0.4rem;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 10px;
  padding: 0.25rem 0.45rem;
  box-shadow: var(--lab-shadow-1);
}

.lab_bb_menu { position: relative; }

/* lab-Marke: Kolben + Schriftzug, Verweis zurück zur Werkzeug-Übersicht
   (der Plattform-Kopf ist auf dieser Seite ausgeblendet) */
.lab_bb_marke {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem 0.22rem 0.35rem;
  margin-right: 0.35rem;
  border-right: 1px solid var(--lab-border-color);
  border-radius: 7px 0 0 7px;
  color: var(--blk-color);
  text-decoration: none;
}
.lab_bb_marke img { display: block; }
.lab_bb_marke_text {
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}
.lab_bb_marke:hover { background: var(--alt-div-hover-color); }
.lab_bb_marke:hover .lab_bb_marke_text { color: var(--link-color); }

.lab_bb_menu_titel {
  font: inherit;
  font-size: 0.88rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--blk-color);
  cursor: pointer;
  white-space: nowrap;
}

.lab_bb_menu_titel:hover,
.lab_bb_menu_titel.lab_bb_menu_offen {
  background: var(--alt-div-hover-color);
}

.lab_bb_menu_liste {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 0;
  z-index: 40;
  min-width: 15rem;
  display: flex;
  flex-direction: column;
  padding: 0.3rem;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 10px;
  box-shadow: var(--lab-shadow-2, var(--lab-shadow-1));
}

.lab_bb_menu_eintrag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--blk-color);
  cursor: pointer;
  white-space: nowrap;
}

.lab_bb_menu_eintrag:hover:not(:disabled) { background: var(--alt-div-hover-color); }
.lab_bb_menu_eintrag:disabled { opacity: 0.45; cursor: default; }

/* Menü-Einträge als Verweise (lab-Werkzeuge, Impressum) und Gruppen */
a.lab_bb_menu_eintrag { text-decoration: none; }
.lab_bb_menu_gruppe { display: contents; }

.lab_bb_menu_kuerzel {
  font-family: var(--lab-mono);
  font-size: 0.74rem;
  color: var(--grey600-color);
}

.lab_bb_menu_trenner {
  height: 1px;
  margin: 0.25rem 0.4rem;
  background: var(--lab-border-color);
}

@media (max-width: 48rem) {
  .lab_bb_menueleiste { flex-wrap: wrap; }
  .lab_bb_status_feld { margin-left: 0; flex-basis: 100%; }
  /* Die Optionsleiste bleibt hoehenfest, damit die Bildflaeche beim
     Werkzeugwechsel nicht springt. */
  .lab_bb_optionen { gap: 0.25rem 0.4rem; }
  /* Auf dem Handy soll die Leiste nicht den halben Bildschirm fressen:
     hoechstens 38 Prozent der Hoehe, darueber wird im Block gescrollt. */
  .lab_bb_optionen { max-height: 38vh; }
  .lab_bb_optionen_flaeche {
    height: 100%;
    overflow-y: auto;
    align-content: flex-start;
    scrollbar-width: thin;
  }
}

/* ---------------------------------------------------------------
   Leisten ueber der Werkzeugleiste
   --------------------------------------------------------------- */
.lab_bb_leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
}

.lab_bb_leiste_abstand { flex: 1 1 auto; }

.lab_bb_trenner_leiste {
  flex: 0 0 auto;
  width: 1px;
  height: 2rem;
  background: var(--lab-border-color);
  margin: 0 0.25rem;
}

.lab_bb_feld { font-size: 0.82rem; color: var(--grey600-color); white-space: nowrap; }

.lab_bb_status_feld { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; }

/* Untere Statusleiste: Meldung links, Zoom rechts (wie in Photoshop unten) */
.lab_bb_fusszeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0 0.2rem;
}
.lab_bb_fusszeile .lab_bb_status_feld { margin-left: 0; margin-right: auto; }

/* Zeigerposition in Bildpunkten (wie in Paint.NET) */
.lab_bb_zeigerposition {
  margin-left: 0.6rem;
  font-family: var(--lab-mono);
  font-size: 0.72rem;
  color: var(--grey600-color);
  font-variant-numeric: tabular-nums;
}

/* Hinweis, wenn der schwebende Teil der Auswahl über den Bildrand ragt:
   er ist noch da (blass auf dem Schreibtisch) und laesst sich zurueck
   ins Bild holen. */
.lab_bb_auswahl_aussen {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
  padding: 0.1rem 0.3rem 0.1rem 0.5rem;
  border: 1px solid var(--lab-border-color);
  border-radius: 999px;
  background: var(--div-color);
  font-size: 0.74rem;
  color: var(--blk-color);
}
.lab_bb_auswahl_aussen[hidden] { display: none; }
.lab_bb_auswahl_aussen .lab_bb_mini { padding: 0 0.45rem; font-size: 0.74rem; height: 1.35rem; }

.lab_bb_zoom { display: inline-flex; align-items: center; gap: 0.2rem; }

.lab_bb_speicherbadge {
  font-family: var(--lab-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lab-aktiv-fg);
  background: var(--lab-aktiv-bg);
  border: 1px solid var(--lab-aktiv-bd);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

/* ---------------------------------------------------------------
   Werkzeugspalte links (Stil klassischer Bildbearbeiter): schmale
   Icon-Leiste, Namen als Tooltip, Gruppen mit Trennlinien
   (Die Knöpfe setzt app.js ein.)
   --------------------------------------------------------------- */
.lab_bb_werkzeuge {
  flex: 0 0 auto;
  position: sticky;
  top: 0.6rem;
  /* Größere Zeichen bleiben in kurzen Fenstern über die Leiste erreichbar. */
  max-height: calc(100dvh - 9rem);
  /* gleiche Hoehe wie die Arbeitsflaeche (Stretch in lab_bb_haupt),
     langer Spalteninhalt laeuft innen */
  overflow-y: auto;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 12px;
  box-shadow: var(--lab-shadow-1);
  scrollbar-width: thin;
}

.lab_bb_werkzeug_liste {
  display: grid;
  grid-template-columns: repeat(2, auto);   /* zwei Werkzeuge je Reihe */
  justify-content: center;
  gap: 0.1rem 0.3rem;
  padding: 0.4rem 0.4rem;
}

.lab_bb_werkzeug {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font: inherit;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--blk-color);
  cursor: pointer;
}

.lab_bb_werkzeug svg { width: 24px; height: 24px; flex: 0 0 auto; }

.lab_bb_werkzeug:focus-visible {
  outline: 2px solid var(--bt-color);
  outline-offset: 1px;
}

@media (pointer: coarse) {
  .lab_bb_werkzeug { width: 2.75rem; height: 2.75rem; }
}

.lab_bb_werkzeug:hover { background: var(--alt-div-hover-color); }

.lab_bb_werkzeug_aktiv {
  background: var(--green50-color);
  border-color: var(--green300-color);
  color: var(--link-color);
}

/* Trennlinie zwischen Werkzeuggruppen */
.lab_bb_werkzeug_trenner {
  grid-column: 1 / -1;               /* Trennlinie über beide Spalten */
  height: 1px;
  margin: 0.2rem 0.2rem;
  background: var(--lab-border-color);
}

/* ---------------------------------------------------------------
   Werkzeugleiste andockbar: links (Voreinstellung), rechts, oben
   oder unten - das Ansicht-Menü setzt die Klasse auf lab_bb_haupt.
   Oben/unten läuft die Leiste als eigene Zeile über/unter der
   Arbeitsfläche (flex-wrap), die Werkzeugreihe wird horizontal.
   --------------------------------------------------------------- */
.lab_bb_haupt { flex-wrap: nowrap; }

/* Nur oben/unten angedockte Werkzeuge brauchen eine eigene Zeile. */
.lab_bb_haupt.lab_bb_leiste_oben,
.lab_bb_haupt.lab_bb_leiste_unten { flex-wrap: wrap; }

.lab_bb_haupt.lab_bb_leiste_rechts .lab_bb_werkzeuge { order: 4; }

.lab_bb_haupt.lab_bb_leiste_oben .lab_bb_werkzeuge,
.lab_bb_haupt.lab_bb_leiste_unten .lab_bb_werkzeuge {
  flex: 1 1 100%;
  position: static;
  max-height: none;
  overflow: visible;
}
.lab_bb_haupt.lab_bb_leiste_oben .lab_bb_werkzeuge { order: -1; }
.lab_bb_haupt.lab_bb_leiste_unten .lab_bb_werkzeuge { order: 4; }

.lab_bb_leiste_oben .lab_bb_werkzeug_liste,
.lab_bb_leiste_unten .lab_bb_werkzeug_liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1rem 0.3rem;
}

.lab_bb_leiste_oben .lab_bb_werkzeug_trenner,
.lab_bb_leiste_unten .lab_bb_werkzeug_trenner {
  grid-column: auto;
  width: 1px;
  height: 1.9rem;
  margin: 0.1rem 0.2rem;
}

/* Werkzeug-Tooltip: Name, Kürzel und Kurzbeschreibung in einer Blase
   rechts neben der Spalte (app.js setzt Inhalt und Lage; position:fixed
   am body, damit die Spalte mit ihrem Scrollbalken nichts abschneidet) */
.lab_bb_werkzeug_tip {
  position: fixed;
  z-index: 46;                       /* über Lupe (45) und Menü (40), unter Modals (50) */
  max-width: 21rem;
  padding: 0.55rem 0.75rem;
  background: var(--ct-color);
  color: var(--blk-color);
  border: 1px solid var(--lab-border-color);
  border-radius: 10px;
  box-shadow: var(--lab-shadow-2);
  pointer-events: none;              /* die Blase fängt den Zeiger nie ab */
}

.lab_bb_werkzeug_tip_kopf {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.lab_bb_werkzeug_tip_name {
  font-weight: 600;
  font-size: 0.86rem;
}

.lab_bb_werkzeug_tip_kuerzel {
  font-family: var(--lab-mono);
  font-size: 0.72rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--lab-border-color);
  border-radius: 5px;
  color: var(--grey600-color);
  white-space: nowrap;
}

.lab_bb_werkzeug_tip_text {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--grey600-color);
}

/* ---------------------------------------------------------------
   Arbeitsflaeche: Bild links, Panel rechts
   --------------------------------------------------------------- */

/* Anwendungen haben keine Fusszeile (AGENTS.md 5.6) - die gewonnene
   Hoehe gehoert der Arbeitsflaeche. Main und Shell werden zu Flex-
   Spalten, die Arbeitsflaeche fuellt den Rest exakt aus: kein Leerraum
   unter der Statuszeile, egal wie hoch das Fenster ist. min-height: 0
   bricht die Automatik-Mindestgroesse, sonst wuerde jede Stufe den
   Inhalt als Untergrenze weiterreichen und die Seite scrollen. */
.lab_main {
  display: flex;
  flex-direction: column;
  /* Basis 0 (statt "auto" aus layout.css): der Body kennt seine Hoehe
     nur ueber min-height:100vh - mit Basis 0 wird der Rest exakt
     verteilt, mit "auto" wuerde der Inhalt die Seite aufblasen */
  flex: 1 1 0;
  min-height: 0;
  padding-top: 0.4rem;
  padding-bottom: 0.8rem;
}

/* Volle Fensterbreite: kein 108rem-Limit der gemeinsamen Huelle.
   Gleiche Spezifitaet wie .lab_shell.lab_shell_breit in layout.css -
   dieses Stylesheet laedt danach und gewinnt damit in der Kaskade.
   touch-action: scrollen bleibt erlaubt, Pinch-Zoom und Doppel-Tipp-
   Zoom des Browsers sind aus - das Zoomen gehoert allein dem Bild
   (App-Gesten) bzw. der Oberflaechen-Skalierung im Ansicht-Menue. */
.lab_shell.lab_shell_breit {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  touch-action: pan-x pan-y;
}

.lab_bb_haupt {
  display: flex;
  align-items: stretch;              /* Spalten gleichen ihre Hoehe an */
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.lab_bb_buehne {
  /* Die Leinwandbreite darf keine neue Flex-Zeile erzwingen.
     Große Blätter scrollen innerhalb der verfügbaren Arbeitsfläche. */
  flex: 1 1 0;
  min-width: 0;
  min-height: 20rem;                 /* kurze Fenster scrollen die Seite */
  display: flex;
  overflow: auto;                    /* gezoomtes Bild laesst sich scrollen */
  touch-action: none;                /* Finger gehoeren der App: Zeichnen, Pinch-Zoom; Scroll ueber Rad/Leiste */
  position: relative;
  --lab_bb_pad: 1.25rem;             /* Rand um das Bild; die Leinwand
                                        richtet sich an derselben Kante aus */
  --lab_bb_lineal_breite: 0px;       /* 0 = Lineal aus. Mit Lineal braucht
                                        die Buehne oben und links Platz:
                                        die Leinwand rutscht ein Stueck nach
                                        rechts und unten (wie in Photoshop) */
  padding: var(--lab_bb_pad);
  padding-top: calc(var(--lab_bb_pad) + var(--lab_bb_lineal_breite));
  padding-left: calc(var(--lab_bb_pad) + var(--lab_bb_lineal_breite));
  background: var(--grey200-color);  /* "Schreibtisch" um das Bild */
  border: var(--lab-border);
  border-radius: 12px;
  box-shadow: var(--lab-shadow-1);
  /* Ameisen-Farben der Auswahl, Pixelraster beim weiten Reinzoomen und
     der Schachbrett-Untergrund transparenter Bildstellen: Ansicht-Farben
     ueber dem Bild und damit vom Hell/Dunkel-Modus unabhaengig
     (dokumentierte Ausnahme; app.js liest sie hier aus). */
  --lab_bb_ameisen_hell: #FFFFFF;
  --lab_bb_ameisen_dunkel: #14171A;
  --lab_bb_pixel_gitter: rgba(128, 128, 128, 0.5);
  --lab_bb_schach_a: rgba(120, 128, 124, 0.22);
  /* Schnellmaske: rote Markierung der geschützten Bildstellen (wie in
     Photoshop) - ebenso eine Ansicht-Farbe ueber dem Bild. */
  --lab_bb_schnellmaske: #E43F3F;
}

/* Hülle für das Bild: trägt die gezoomte Groesse (Scrollbalken) und den
   Schatten des Blattes; das Schachbrett hinter transparenten Bildstellen
   zeichnet app.js in die Leinwand (es gilt nur im Bild, nicht im
   Rand der Arbeitsfläche) */
.lab_bb_wrap {
  flex: none;
  margin: auto;                      /* zentriert, bleibt beim Zoomen scrollbar */
  position: relative;
  line-height: 0;
  box-shadow: var(--lab-shadow-1);
}

/* Die Leinwand ist ein Fenster in Buehnengroesse: sie liegt absolut in
   der Arbeitsflaeche - an der Inhalts-Kante (dieselbe Kante, an der
   ansicht_flaeche_anpassen misst) - und wird beim Scrollen mit dem
   Inhalt mitgezogen (translate aus app.js); gezeichnet wird nur der
   Ausschnitt, den man sieht. Der Platzhalter (wrap) schenkt die
   gezoomte Groesse. */
.lab_bb_buehne > #lab_bb_canvas {
  position: absolute;
  top: calc(var(--lab_bb_pad) + var(--lab_bb_lineal_breite));
  left: calc(var(--lab_bb_pad) + var(--lab_bb_lineal_breite));
  display: block;
  touch-action: none;
}

/* ---------------------------------------------------------------
   Lineal am Bildrand (Photoshop, Krita, Paint.NET): oben die
   waagrechte, links die senkrechte Leiste mit den Bildkoordinaten.
   Beide liegen an derselben Kante wie die Leinwand und werden beim
   Scrollen mitgezogen (app.js). Aus dem Lineal laesst sich eine
   Hilfslinie ziehen.
   --------------------------------------------------------------- */
.lab_bb_buehne.is_lineal { --lab_bb_lineal_breite: 22px; }

.lab_bb_buehne > .lab_bb_lineal {
  position: absolute;
  display: block;
  background: var(--div-color);
  border: var(--lab-border);
  z-index: 3;
  cursor: crosshair;
  touch-action: none;
}
.lab_bb_buehne > #lab_bb_lineal_oben {
  top: var(--lab_bb_pad);
  left: calc(var(--lab_bb_pad) + var(--lab_bb_lineal_breite));
  border-width: 0 1px 1px 0;
}
.lab_bb_buehne > #lab_bb_lineal_links {
  top: calc(var(--lab_bb_pad) + var(--lab_bb_lineal_breite));
  left: var(--lab_bb_pad);
  border-width: 1px 0 0 1px;
}
.lab_bb_buehne > .lab_bb_lineal_ecke {
  position: absolute;
  top: var(--lab_bb_pad);
  left: var(--lab_bb_pad);
  width: var(--lab_bb_lineal_breite);
  height: var(--lab_bb_lineal_breite);
  background: var(--div-color);
  border: var(--lab-border);
  border-width: 0 1px 1px 0;
  z-index: 4;
}
/* Ohne Bild (oder wenn das Lineal aus ist) bleibt kein Platz reserviert */
.lab_bb_buehne:not(.is_lineal) > .lab_bb_lineal,
.lab_bb_buehne:not(.is_lineal) > .lab_bb_lineal_ecke { display: none; }

/* ---------------------------------------------------------------
   Leerer Zustand
   --------------------------------------------------------------- */
.lab_bb_leer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  padding: 2rem;
}

.lab_bb_leer_titel { font-weight: 600; margin: 0; }

.lab_bb_leer_text {
  max-width: 34rem;
  font-size: 0.88rem;
  color: var(--grey600-color);
  margin: 0 0 0.6rem;
}

/* ---------------------------------------------------------------
   Vollbild: die Seite ohne Seiten-Rahmen, die Arbeitsfläche füllt alles
   --------------------------------------------------------------- */
:fullscreen .lab_shell { padding: 0.4rem 0.8rem; max-width: none; }
:fullscreen .lab_main { padding: 0; }
:fullscreen .lab_bb_buehne { height: auto; }   /* Flex-Regel fuellt den Rest */
:fullscreen .lab_bb_werkzeuge,
:fullscreen .lab_bb_seiten,
:fullscreen .lab_bb_ebenen { max-height: none; position: static; }

/* ---------------------------------------------------------------
   Ausschnitt-Rahmen (Werkzeug "Zuschneiden")
   --------------------------------------------------------------- */
.lab_bb_rahmen {
  position: absolute;
  border: 2px solid var(--lab_bb_rahmen_farbe, var(--bt-color));
  box-shadow: 0 0 0 9999px rgba(16, 24, 20, 0.45);
  cursor: move;
}

.lab_bb_rahmen_fl { position: absolute; inset: 0; }

.lab_bb_griff {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--ct-color);
  border: 2px solid var(--bt-color);
  border-radius: 3px;
}

.lab_bb_griff[data-griff="nw"] { left: -7px;  top: -7px;    cursor: nwse-resize; }
.lab_bb_griff[data-griff="n"]  { left: 50%;   top: -7px;    margin-left: -6px; cursor: ns-resize; }
.lab_bb_griff[data-griff="ne"] { right: -7px; top: -7px;    cursor: nesw-resize; }
.lab_bb_griff[data-griff="w"]  { left: -7px;  top: 50%;     margin-top: -6px;  cursor: ew-resize; }
.lab_bb_griff[data-griff="o"]  { right: -7px; top: 50%;    margin-top: -6px;  cursor: ew-resize; }
.lab_bb_griff[data-griff="sw"] { left: -7px;  bottom: -7px; cursor: nesw-resize; }
.lab_bb_griff[data-griff="s"]  { left: 50%;   bottom: -7px; margin-left: -6px; cursor: ns-resize; }
.lab_bb_griff[data-griff="so"] { right: -7px; bottom: -7px; cursor: nwse-resize; }

/* ---------------------------------------------------------------
   Lupe (Pinsel, Pipette) und Pinsel-Vorschaukreis
   --------------------------------------------------------------- */
.lab_bb_lupe {
  position: fixed;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 10px;
  box-shadow: var(--lab-shadow-2);
  pointer-events: none;
}

.lab_bb_lupe canvas {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  border: 1px solid var(--lab-border-color);
  border-radius: 6px;
}

.lab_bb_lupe_text {
  font-family: var(--lab-mono);
  font-size: 0.68rem;
  color: var(--grey600-color);
  white-space: nowrap;
}

.lab_bb_stift_vorschau {
  position: fixed;
  z-index: 44;
  border: 1.5px solid var(--blk-color);
  outline: 1px solid var(--ct-color);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* ---------------------------------------------------------------
   Schwebender Text-Editor (Werkzeug "Text"): erscheint neben dem
   Klickpunkt auf der Arbeitsflaeche; die Live-Vorschau des Textes
   liegt als Canvas direkt im Bild (app.js)
   --------------------------------------------------------------- */
.lab_bb_texteditor {
  position: absolute;
  z-index: 42;
  width: 19rem;
  padding: 0.5rem;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 10px;
  box-shadow: var(--lab-shadow-2);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lab_bb_texteditor_titel {
  font-size: 0.74rem;
  color: var(--grey600-color);
}

.lab_bb_texteditor textarea {
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.35;
  padding: 0.4rem 0.5rem;
  width: 100%;
  min-height: 3.6rem;
  resize: vertical;
  background: var(--bd-color);
  color: var(--blk-color);
  border: var(--lab-border);
  border-radius: 7px;
}

.lab_bb_texteditor_fuss {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.lab_bb_texteditor_tip {
  margin-left: auto;
  font-family: var(--lab-mono);
  font-size: 0.68rem;
  color: var(--grey600-color);
}

/* ---------------------------------------------------------------
   Protokoll (Verlauf-Palette): benannte Arbeitsschritte, ein Klick
   springt zu diesem Stand
   --------------------------------------------------------------- */
.lab_bb_protokoll {
  list-style: none;
  margin: 0.35rem 0 0.4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 11rem;
  overflow-y: auto;
}

.lab_bb_protokoll_zeile {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--blk-color);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab_bb_protokoll_zeile:hover { background: var(--alt-div-hover-color); }

.lab_bb_protokoll_aktuell {
  background: var(--green50-color);
  border-color: var(--green300-color);
  color: var(--link-color);
}

.lab_bb_protokoll_zukunft {
  color: var(--grey600-color);
  font-style: italic;
}

/* ---------------------------------------------------------------
   Aktionen: aufgezeichnete Befehlsfolgen (wie das Aktionen-Fenster
   in Photoshop). Die Aufnahme zeigt den roten Punkt der Schnellmaske.
   --------------------------------------------------------------- */
.lab_bb_aktionen_leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.lab_bb_aktion_knopf {
  font: inherit;
  font-size: 0.72rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--lab-border-color);
  border-radius: 7px;
  background: var(--div-color);
  color: var(--blk-color);
  cursor: pointer;
}

.lab_bb_aktion_knopf:hover:not(:disabled) { background: var(--alt-div-hover-color); }

.lab_bb_aktion_knopf:disabled {
  opacity: 0.45;
  cursor: default;
}

.lab_bb_aktion_aufnahme_aktiv {
  border-color: var(--lab_bb_schnellmaske);
  color: var(--lab_bb_schnellmaske);
  font-weight: 600;
}

.lab_bb_aktionen_liste {
  margin-top: 0.45rem;
  max-height: 13rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.lab_bb_aktionen_leer {
  margin: 0.1rem 0;
  font-size: 0.74rem;
  color: var(--grey600-color);
}

.lab_bb_aktion_zeile {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.lab_bb_aktion_zeile.lab_bb_aktion_gewaehlt .lab_bb_aktion_name {
  background: var(--green50-color);
  border-color: var(--green300-color);
  color: var(--link-color);
}

.lab_bb_aktion_zeile.lab_bb_aktion_nimmt_auf .lab_bb_aktion_name {
  font-weight: 600;
}

.lab_bb_aktion_klapp {
  flex: none;
  width: 1.4rem;
  padding: 0.18rem 0;
  font: inherit;
  font-size: 0.72rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--grey600-color);
  cursor: pointer;
}

.lab_bb_aktion_name {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font: inherit;
  font-size: 0.78rem;
  padding: 0.28rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--blk-color);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab_bb_aktion_name:hover { background: var(--alt-div-hover-color); }

.lab_bb_aktion_punkt {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--lab_bb_schnellmaske);
}

.lab_bb_aktion_schritt {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.2rem 0.1rem 1.7rem;
}

.lab_bb_aktion_haken {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  accent-color: var(--bt-color);
}

.lab_bb_aktion_schritt_name {
  font-size: 0.76rem;
  color: var(--blk-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   Werkzeug-Optionen unterhalb der Arbeitsflaeche (breite Zeile;
   die Zeichenflaeche bekommt so die volle Hoehe und Breite)
   --------------------------------------------------------------- */
/* Werkzeug-Optionen als horizontale Options-Leiste oben (wie in Photoshop).
   WICHTIG: Die Leiste hat eine FESTE, vorher berechnete Hoehe - der Platz
   fuer die Werkzeug-Einstellungen ist immer reserviert, damit die
   Bildflaeche beim Werkzeugwechsel nicht wandert. Die Hoehe richtet sich
   nach dem Werkzeug mit den meisten Optionen (gemessen in app.js), damit
   nichts abgeschnitten wird und nichts durchgescrollt werden muss.
   Die Bloecke brechen als Einheit auf die naechste Zeile um. */
.lab_bb_optionen {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.3rem 0.6rem;
  margin: 0 0 0.35rem;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 12px;
  padding: 0.25rem 0.6rem;
  box-shadow: var(--lab-shadow-1);
  height: var(--lab_bb_optionen_hoehe, auto);
  min-height: 2.6rem;
  overflow: hidden;
}

.lab_bb_optionen .lab_bb_panel_titel {
  margin: 0;
  font-size: 0.8rem;
  white-space: nowrap;
  align-self: center;
  flex: 0 0 auto;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--blk-color);
}

.lab_bb_optionen_flaeche {
  display: flex;
  flex-wrap: wrap;              /* Bloecke brechen als Einheit um */
  align-items: center;
  align-content: center;
  gap: 0.3rem 0.7rem;
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
}

/* Die verschobenen Bloecke stehen nebeneinander und bleiben flach:
   Labels und Regler inline wie in Photoshop/Krita. */
.lab_bb_optionen_flaeche [id^='lab_bb_opt_'] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* Paare brechen um, Paare selbst bleiben ganz */
  gap: 0.2rem 0.4rem;
  flex: 0 1 auto;           /* der Block darf schrumpfen */
  min-width: 0;
  max-width: 100%;
}
/* Label und Regler sind ein Paar: sie trennen sich nie. */
.lab_bb_optionen_flaeche .lab_bb_paar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}
/* Knopfgruppen brechen notfalls um, statt ueber die Leiste zu ragen. */
.lab_bb_optionen_flaeche .lab_bb_reihe { flex-wrap: wrap; }
.lab_bb_optionen_flaeche .lab_bb_zeile { margin: 0; font-size: 0.72rem; white-space: nowrap; }
/* Regler mit Zahlfeld und Einheit (Wert ablesen und eintippen) */
.lab_bb_regler_paar { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
/* Der Regler fuellt den Rest, das Zahlenfeld bekommt eine feste Breite.
   Vorher fraess das Zahlenfeld (Standardbreite 20 Zeichen) die ganze
   Zeile - der Regler blieb bei 0 Pixel und war nicht mehr zu sehen. */
.lab_bb_regler_paar .lab_bb_regler { flex: 1 1 auto; min-width: 3.5rem; }
/* Zahlenfeld am Regler: rechtsbuendig, damit die Ziffern nicht zappeln */
input.lab_bb_regler_zahl { flex: 0 0 auto; width: 4rem; min-width: 0; text-align: right; padding: 0.1rem 0.25rem; }
.lab_bb_regler_einheit { flex: 0 0 auto; font-size: 0.7rem; color: var(--grey600-color); }
.lab_bb_optionen_flaeche #lab_bb_opt_farbe  { flex: 0 0 auto; }
.lab_bb_optionen_flaeche #lab_bb_opt_filter { flex: 0 0 auto; }
.lab_bb_optionen_flaeche #lab_bb_opt_text   { flex: 0 0 auto; }
/* Die Muster-Kacheln in der Optionsleiste sind kleiner als im Dialog, damit
   die Leiste eine Zeile bleibt (feste Hoehe). */
.lab_bb_optionen_flaeche .lab_bb_muster_kachel { width: 1.75rem; height: 1.75rem; padding: 2px; }

/* ---------------------------------------------------------------
   Die Optionsleiste ist dicht: alle Bedienelemente bekommen dieselbe
   Hoehe (1.5rem) und feste Breiten. Dadurch steht jede Werkzeugleiste
   bei normalem Laptop-Vollbild in einer bis zwei Zeilen, statt ueber
   den Bildschirm zu laufen - die Zeichenflaeche gewinnt die Hoehe.
   --------------------------------------------------------------- */
.lab_bb_optionen_flaeche .lab_bb_mini,
.lab_bb_optionen_flaeche .lab_bb_auswahl,
.lab_bb_optionen_flaeche .lab_bb_textfeld,
.lab_bb_optionen_flaeche .lab_bb_regler_zahl,
.lab_bb_optionen_flaeche .lab_bb_farbe_wahl { height: 1.5rem; }
.lab_bb_optionen_flaeche .lab_bb_feld { font-size: 0.78rem; }
.lab_bb_optionen_flaeche .lab_bb_mini {
  font-size: 0.8rem;
  padding: 0 0.5rem;
  border-radius: 6px;
}
.lab_bb_optionen_flaeche .lab_bb_auswahl { font-size: 0.8rem; padding: 0 0.35rem; max-width: 6.5rem; }
/* Ausnahme Text-Werkzeug: die Schrift braucht mehr Platz als ein
   Linienstil oder eine Fuellung. */
.lab_bb_optionen_flaeche #lab_bb_opt_text .lab_bb_auswahl { max-width: 9rem; }
.lab_bb_optionen_flaeche .lab_bb_textfeld { font-size: 0.82rem; padding: 0 0.4rem; width: 6.2rem; }
.lab_bb_optionen_flaeche input.lab_bb_regler_zahl { width: 2.9rem; font-size: 0.78rem; }
.lab_bb_optionen_flaeche .lab_bb_regler { width: 5rem; flex: 0 0 auto; }
.lab_bb_optionen_flaeche #lab_bb_opt_filter .lab_bb_regler { flex: 1 1 auto; width: auto; min-width: 5rem; }

/* Histogramm der Tonwertkorrektur: 256 Helligkeitsspalten unter den
   Reglern. Die Balkenfarbe steht als Variable am Element (app.js liest
   sie aus) - dokumentierte Ansichts-Farbe wie die Ameisen-Farben. */
.lab_bb_histogramm {
  display: block;
  width: 100%;
  height: 3.5rem;
  background: var(--div-color);
  border: var(--lab-border);
  border-radius: 6px;
  --lab_bb_hist_balken: var(--grey600-color);
}

.lab_bb_panel_titel { font-size: 1rem; margin: 0 0 0.4rem; }

.lab_bb_zeile {
  font-size: 0.82rem;
  color: var(--grey600-color);
  margin: 0.75rem 0 0.3rem;
}

.lab_bb_wert { font-family: var(--lab-mono); font-size: 0.75rem; color: var(--blk-color); }

.lab_bb_reihe { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.lab_bb_reihe_abstand { margin-top: 0.8rem; }

/* ---------------------------------------------------------------
   Farbe: ein Knopf in der Werkzeugleiste, der die aktuelle Farbe
   zeigt und den Dialog oeffnet. Alles Weitere (Palette, eigene
   Farbe, Hex-Wert) liegt im Dialog - in der Leiste steht kein
   Feld doppelt.
   --------------------------------------------------------------- */
.lab_bb_farbe_wahl {
  width: 3rem;
  padding: 0;
  border: var(--lab-border);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
}
.lab_bb_farbe_wahl:hover { border-color: var(--bt-color); }

.lab_bb_farbe_fl { display: block; width: 100%; height: 100%; }

.lab_bb_hex {
  font-family: var(--lab-mono);
  font-size: 0.85rem;
  width: 7.5rem;
  text-transform: lowercase;
}

/* Im Dialog: eigene Farbe etwas groesser, der Browserregler ist hier
   das Hauptfeld neben der Palette. */
.lab_bb_farbe_zeile { gap: 0.5rem; }
.lab_bb_modal .lab_bb_farbwahl { width: 4rem; height: 2.1rem; margin-top: 0; }

/* ---------------------------------------------------------------
   Ebenen-Panel (rechts, wie im klassischen Bildbearbeiter) - bewusst
   kompakt gehalten: schmale Spalte, kleine Vorschaukacheln, enge
   Zeilen; die Arbeitsfläche bekommt so den Platz.
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   Panel-Spalte rechts: Ebenen und Protokoll (jedes einzeln lösbar,
   dann position:fixed und frei ziehbar - siehe lab_bb_geloest)
   --------------------------------------------------------------- */
.lab_bb_seiten {
  flex: 0 0 13.5rem;
  width: 13.5rem;
  position: sticky;
  top: 0.6rem;
  max-height: calc(100vh - 1.2rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 0;
}

.lab_bb_ebenen {
  flex: 1 0 auto;
  /* langer Spalteninhalt laeuft in der Panel-Spalte innen */
  overflow-y: visible;
  position: static;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 12px;
  padding: 0.75rem 0.75rem 0.9rem;
  box-shadow: var(--lab-shadow-1);
}

/* Kopfzeile des Panels: Titel links, Zähler/Knopf rechts; die Zeile
   ist beim gelösten Panel zugleich Griff zum Verschieben */
.lab_bb_ebenen_kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.lab_bb_panel_kopf { cursor: default; }

.lab_bb_geloest .lab_bb_panel_kopf {
  cursor: grab;
  touch-action: none;
}
.lab_bb_geloest .lab_bb_panel_kopf:active { cursor: grabbing; }

/* Navigation: Miniatur mit Ausschnittkasten; Ziehen verschiebt die
   Ansicht, der Kasten folgt dem Fenster (touch-action none, damit der
   Finger beim Ziehen nicht die Seite scrollt) */
.lab_bb_navi_panel { flex: 0 0 auto; }
.lab_bb_navigation {
  display: block;
  width: 100%;
  margin-top: 0.55rem;
  border: 1px solid var(--lab-border-color);
  border-radius: 8px;
  background-color: var(--div-color);
  touch-action: none;
  cursor: crosshair;
}
.lab_bb_navigation:focus-visible {
  outline: 2px solid var(--bt-color);
  outline-offset: 2px;
}

.lab_bb_panel_knopf {
  flex: 0 0 auto;
  align-self: center;
  font: inherit;
  font-size: 0.68rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--lab-border-color);
  border-radius: 6px;
  background: transparent;
  color: var(--grey600-color);
  cursor: pointer;
}
.lab_bb_panel_knopf:hover {
  background: var(--alt-div-hover-color);
  color: var(--blk-color);
}
.lab_bb_panel_knopf[aria-pressed="true"] {
  border-color: var(--bt-color);
  color: var(--link-color);
}

/* Gelöstes Panel: schwebt über der Arbeitsfläche, frei ziehbar */
.lab_bb_panel.lab_bb_geloest {
  position: fixed;
  z-index: 47;                      /* über Lupe (45), unter Modals (50) */
  width: 13.5rem;
  max-height: calc(100vh - 1rem);
  overflow-y: auto;
  margin: 0;
  box-shadow: var(--lab-shadow-2);
}

.lab_bb_ebenen_zaehler {
  font-family: var(--lab-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  color: var(--grey600-color);
}

.lab_bb_ebenen_liste {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.3rem;
}

/* Ebenen-Filter: Suchfeld ueber der Ebenenliste (wie im Krita) */
.lab_bb_ebenen_suche_zeile { margin-top: 0.4rem; }
.lab_bb_ebenen_suche { font-size: 0.85rem; padding: 0.3rem 0.4rem; }

/* Mischmodus direkt im Ebenen-Panel (wie im Krita) */
.lab_bb_ebenen_modus_zeile { margin-top: 0.4rem; }
.lab_bb_ebene_modus_wahl { width: 100%; }

.lab_bb_ebene {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.3rem;
  border: 1px solid var(--lab-border-color);
  border-radius: 7px;
  cursor: grab;
  background: var(--ct-color);
}

.lab_bb_ebene:hover { background: var(--alt-div-hover-color); }

.lab_bb_ebene_aktiv {
  border-color: var(--bt-color);
  background: var(--green50-color);
}

/* Zieh-Zustände: Quelle halbtransparent, Einfügelinie am Ziel,
   Ablage AUF einem Gruppen-Ordner = in die Gruppe ziehen */
.lab_bb_ebene_zieht { opacity: 0.45; }
.lab_bb_ebene_ablage_oben { box-shadow: inset 0 2px 0 0 var(--bt-color); }
.lab_bb_ebene_ablage_unten { box-shadow: inset 0 -2px 0 0 var(--bt-color); }
.lab_bb_ebene_ablage_in {
  border-color: var(--bt-color);
  box-shadow: inset 0 0 0 1px var(--bt-color);
  background: var(--green50-color);
}

/* Gruppen-Ordner: Zeile mit färbigem Hintergrund, Klapplinke schmal */
.lab_bb_ebene_gruppe { background: var(--div-color); }
.lab_bb_ebene_gruppe .lab_bb_ebene_name_text { font-weight: 600; }
.lab_bb_gruppe_klapp {
  width: 1.1rem;
  font-size: 0.7rem;
  color: var(--grey600-color);
}

.lab_bb_ebene_augen {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--blk-color);
  cursor: pointer;
}

.lab_bb_ebene_augen:hover { background: var(--alt-div-hover-color); }

.lab_bb_ebene_vorschau {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--lab-border-color);
  border-radius: 4px;
  background-image:
    linear-gradient(45deg, rgba(120, 128, 124, 0.22) 25%, transparent 25%, transparent 75%, rgba(120, 128, 124, 0.22) 75%),
    linear-gradient(45deg, rgba(120, 128, 124, 0.22) 25%, transparent 25%, transparent 75%, rgba(120, 128, 124, 0.22) 75%);
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;
}

/* Masken-Vorschaubild in der Ebenenzeile: Klick wechselt zwischen
   Bildpunkten und Masken-Bearbeitung (wie das Maskenbild in Photoshop) */
.lab_bb_ebene_maskenbild {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--lab-border-color);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.lab_bb_ebene_maskenbild:hover { border-color: var(--grey600-color); }

.lab_bb_ebene_maskenbild canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
}

.lab_bb_ebene_maskenbild_aktiv {
  border-color: var(--bt-color);
  box-shadow: 0 0 0 1px var(--bt-color);
}

.lab_bb_ebene_name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.74rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.lab_bb_ebene_name_text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sperren-Kennzeichen in der Zeile: Schloss (ganz gesperrt) und
   Schachbrett (nur Transparenz gesperrt) */
.lab_bb_ebene_zeichen {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: var(--grey600-color);
}

.lab_bb_ebene_zeichen_schach {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--lab-border-color);
  background-image:
    linear-gradient(45deg, var(--grey600-color) 25%, transparent 25%, transparent 75%, var(--grey600-color) 75%),
    linear-gradient(45deg, var(--grey600-color) 25%, transparent 25%, transparent 75%, var(--grey600-color) 75%);
  background-position: 0 0, 3px 3px;
  background-size: 6px 6px;
  opacity: 0.55;
}

.lab_bb_ebene_deckkraft {
  flex: 0 0 auto;
  font-family: var(--lab-mono);
  font-size: 0.7rem;
  color: var(--grey600-color);
}

/* Steuerung der aktiven Ebene: der Knopf, der das Mischungs-Fenster
   öffnet, und der Stand der gewählten Ebene */
.lab_bb_ebenen_steuerung {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: var(--lab-border);
}
.lab_bb_ebenen_steuerung .lab_bb_zeile { margin-top: 0.2rem; }

.lab_bb_mischung_knopf {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  padding: 0.3rem 0.45rem;
  background: transparent;
  border: var(--lab-border);
  border-radius: 8px;
  color: var(--blk-color);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lab_bb_mischung_knopf:hover { border-color: var(--bt-color); background: var(--div-color); }
.lab_bb_mischung_knopf:focus-visible { outline: 2px solid var(--bt-color); outline-offset: 2px; }
.lab_bb_mischung_knopf .lab_bb_zeile { margin: 0; flex: 0 0 auto; }
.lab_bb_mischung_anzeige {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mischungs-Fenster: Bildvorschau über den beiden Reglern */
dialog.lab_bb_mischung_dialog { width: min(34rem, calc(100vw - 2rem)); }
.lab_bb_mischung_vorschau { width: 100%; max-height: 15rem; margin: 0.4rem auto; }
.lab_bb_mischung_dialog .lab_bb_einstellung_feld select { min-width: 12rem; }

/* Verlaufseditor: Vorschau im Optionsknopf, Balken und Kachel-Galerie
   im Dialog (Muster der anderen Einstellungs-Dialoge) */
.lab_bb_verl_vorschau {
  display: block;
  flex: 1 1 auto;
  align-self: center;
  min-width: 0;
  height: 22px;
  border: var(--lab-border);
  border-radius: 6px;
  pointer-events: none;   /* der Knopf bekommt den Klick */
}

.lab_bb_verl_balken {
  display: block;
  width: 100%;
  height: 42px;
  margin: 0.4rem 0 0.6rem;
  border: var(--lab-border);
  border-radius: 8px;
  cursor: crosshair;
  touch-action: none;     /* Ziehen gehört dem Stopp, nicht dem Scrollen */
}
.lab_bb_verl_balken:focus-visible { outline: 2px solid var(--bt-color); outline-offset: 2px; }

.lab_bb_verlauf_dialog .lab_bb_reihe { margin: 0.4rem 0 0.8rem; }

.lab_bb_verl_galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.4rem;
  margin: 0.3rem 0 0.6rem;
}
.lab_bb_verl_kachel {
  height: 2.2rem;
  padding: 0;
  border: var(--lab-border);
  border-radius: 8px;
  cursor: pointer;
}
.lab_bb_verl_kachel:hover { border-color: var(--bt-color); }
.lab_bb_verl_kachel:focus-visible { outline: 2px solid var(--bt-color); outline-offset: 2px; }

/* Namensfeld in der Aktionsreihe des Verlaufseditors */
.lab_bb_verlauf_dialog .lab_bb_verl_name { flex: 1 1 8rem; width: auto; min-width: 6rem; }

/* Leinwandgröße: Felder nebeneinander, Anker als 3 × 3-Raster */
.lab_bb_leinwand_dialog { width: min(30rem, calc(100vw - 2rem)); }
.lab_bb_leinwand_felder { gap: 1rem; }
.lab_bb_leinwand_felder input { width: 7rem; }
.lab_bb_leinwand_anker {
  display: grid;
  grid-template-columns: repeat(3, 3rem);
  grid-template-rows: repeat(3, 2rem);
  gap: 0.35rem;
  width: max-content;
  margin: 0.3rem 0 0.8rem;
}
.lab_bb_leinwand_anker_knopf {
  padding: 0;
  border: var(--lab-border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.lab_bb_leinwand_anker_knopf:hover { border-color: var(--bt-color); }
.lab_bb_leinwand_anker_knopf[aria-pressed="true"] {
  background: var(--bt-color);
  border-color: var(--bt-color);
}
.lab_bb_leinwand_anker_knopf:focus-visible { outline: 2px solid var(--bt-color); outline-offset: 2px; }

/* Text-Fenster: Musterzeile über den Stil-Reglern */
dialog.lab_bb_text_dialog { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.lab_bb_text_vorschau {
  display: block;
  width: 100%;
  height: 8.25rem;
  margin: 0.3rem 0 0.8rem;
  border: var(--lab-border);
  border-radius: 8px;
  background: var(--div-color);
}
.lab_bb_text_breit { width: 100%; }

/* Werkzeugleiste unten im Panel: Icon-Knöpfe für die häufigsten Aktionen
   (Breite inkl. Panel-Scrollbalken rechnen - 7 Knöpfe müssen passen) */
.lab_bb_ebenen_leiste {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: var(--lab-border);
}

.lab_bb_ebene_knopf {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  font: inherit;
  border: var(--lab-border);
  border-radius: 6px;
  background: var(--ct-color);
  color: var(--blk-color);
  cursor: pointer;
}

.lab_bb_ebene_knopf:hover { background: var(--alt-div-hover-color); border-color: var(--bt-color); color: var(--bt-color); }

.lab_bb_ebene_knopf_gefahr:hover {
  border-color: var(--red600-color);
  color: var(--red600-color);
}

.lab_bb_ebenen_leiste_abstand { flex: 1 1 auto; }

.lab_bb_ebenen_leiste .lab_bb_ebene_knopf:last-child { font-size: 1rem; line-height: 1; }

/* Aufklapp-Menü der Leiste (öffnet nach oben, die Leiste sitzt unten).
   Schmaler als das Panel, sonst clippt der Panel-Scroll es links. */
.lab_bb_ebenen_mehr_liste {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 40;
  min-width: 12.5rem;
  padding: 0.3rem;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 10px;
  box-shadow: var(--lab-shadow-2);
}

.lab_bb_ebenen_mehr_liste .lab_bb_menu_eintrag {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 0.78rem;
  padding: 0.35rem 0.45rem;
}

.lab_bb_swatches { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }

/* Wahlzeile der Farbpaletten im Dialog "Farbe wählen": Auswahlfeld und
   Raster darunter. Der Dialog ist schmaler als der Standard und die Felder
   sind kleiner als sonst - zwei Dutzend Reihen (Material, Tailwind) sollen
   ohne grosses Scrollen hineinpassen. Bei Paletten mit mehreren Reihen stehen
   die Farben eines Farbtons nebeneinander und die Farbtone untereinander -
   app.js setzt die Spaltenzahl. Der Dialog fasst zusätzlich Farbkreis und
   Helligkeitsbalken nebeneinander. */
#lab_bb_modal_farbe .lab_bb_modal { max-width: 26rem; padding: 0.85rem 0.9rem; }
#lab_bb_modal_farbe .lab_bb_zeile { margin: 0.45rem 0 0.25rem; }
.lab_bb_palette_wahl { width: 100%; }
.lab_bb_palette_gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1.25rem);
  justify-content: start;
  gap: 0.18rem;
  margin-top: 0.35rem;
}
.lab_bb_palette_gitter .lab_bb_sw { width: 1.25rem; height: 1.25rem; border-radius: 4px; }

/* Farbkreis und Helligkeitsbalken: Kreis = Farbton und Saettigung,
   Balken = Helligkeit - so wie das Farbrad in Paint.NET und der
   HSV-Waehler in Krita. Auf kleinen Schirmen stapeln sich beide.
   Der Block heisst bewusst NICHT "lab_bb_farbe_wahl" - das ist der
   kleine Farbknopf in der Werkzeugleiste (3rem breit, mit
   overflow:hidden). */
.lab_bb_farbe_kreis {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0.55rem;
}

.lab_bb_farbe_rad {
  width: 11rem;
  height: 11rem;
  flex: none;
  border-radius: 50%;
  cursor: crosshair;
  touch-action: none;          /* Ziehen im Kreis soll nicht scrollen */
}

.lab_bb_farbe_wert_spalte { flex: 1 1 9rem; min-width: 9rem; }

.lab_bb_farbe_wert {
  display: block;
  width: 100%;
  max-width: 11rem;
  height: 1rem;
  border-radius: 5px;
  cursor: ew-resize;
  touch-action: none;
  margin-top: 0.15rem;
}

.lab_bb_farbe_kreis .lab_bb_hinweis { margin: 0.4rem 0 0; }

.lab_bb_sw {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--lab-border-color);
  border-radius: 6px;
  cursor: pointer;
}
.lab_bb_sw:hover { transform: scale(1.08); }

.lab_bb_sw_aktiv { outline: 2px solid var(--bt-color); outline-offset: 1px; }

.lab_bb_farbwahl {
  width: 2.4rem;
  height: 1.6rem;
  padding: 0;
  margin-top: 0.4rem;
  border: 1px solid var(--lab-border-color);
  border-radius: 6px;
  background: var(--ct-color);
  cursor: pointer;
}

.lab_bb_regler { width: 100%; accent-color: var(--bt-color); }

.lab_bb_textfeld { font-size: 0.9rem; padding: 0.4rem 0.5rem; width: 100%; }

.lab_bb_auswahl { width: auto; font-size: 0.85rem; padding: 0.3rem 0.4rem; }

/* Zahlenfelder: der Element-Selektor in layout.css (input[type=number],
   width:100 %) hat gleiche/hoehere Spezifitaet als eine Klasse - deshalb
   hier mit Element qualifizieren, sonst bleiben die Felder seitenbreit. */
input.lab_bb_zahl { width: 5rem; }
input.lab_bb_zahl_klein { width: 4.2rem; }
input.lab_bb_hex { width: 7.5rem; }

.lab_bb_mini {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.6rem;
  border: var(--lab-border);
  border-radius: 8px;
  background: var(--ct-color);
  color: var(--blk-color);
  cursor: pointer;
}
.lab_bb_mini:hover { background: var(--alt-div-hover-color); }

.lab_bb_mini_aktiv {
  background: var(--green50-color);
  border-color: var(--green300-color);
  color: var(--link-color);
}

.lab_bb_mini_prim {
  background: var(--bt-color);
  border-color: var(--bt-color);
  color: var(--bt-f-color);
}
.lab_bb_mini_prim:hover { background: var(--bt-h-color); border-color: var(--bt-h-color); }

.lab_bb_gefahr {
  border-color: var(--red600-color);
  color: var(--red600-color);
}
.lab_bb_gefahr:hover { background: var(--red600-color); color: var(--bt-f-color); }

.lab_bb_versteckt { display: none !important; }

.lab_bb_hinweis { font-size: 0.88rem; color: var(--grey600-color); }

.lab_bb_merk {
  font-size: 0.88rem;
  border-left: 3px solid var(--lab-border-color);
  padding: 0.15rem 0 0.15rem 0.6rem;
  margin: 0.5rem 0;
}

/* ---------------------------------------------------------------
   Dialoge und Fortschritt (Stapel)
   --------------------------------------------------------------- */
.lab_bb_modalfilter {
  position: fixed;
  inset: 0;
  z-index: 50;               /* ueber Lupe (45) und Pinsel-Vorschau (44) */
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.lab_bb_modal {
  position: relative;        /* Anker fuer den Schliessen-Knopf */
  width: 100%;
  max-width: 38rem;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--ct-color);
  color: var(--blk-color);
  border: var(--lab-border);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--lab-shadow-2);
}
.lab_bb_modal h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }

.lab_bb_einstellung_leiste { padding: 0.45rem; border-top: var(--lab-border); }
.lab_bb_einstellung_leiste > label { display: block; margin-bottom: 0.25rem; }
.lab_bb_einstellung_leiste .lab_bb_reihe { flex-wrap: wrap; margin-top: 0.3rem; }

/* Fenster "Ebenen-Effekte": sammelt die Aktionen, die frueher zwei Zeilen
   unter der Ebenenliste standen. Schmal, damit es nicht ueber den
   Bildschirm liegt. */
.lab_bb_effekte_dialog { max-width: 26rem; }
.lab_bb_effekte_dialog .lab_bb_einstellung_feld { flex-wrap: wrap; }
.lab_bb_effekte_dialog .lab_bb_einstellung_feld select { flex: 1 1 12rem; min-width: 0; }
.lab_bb_effekte_dialog .lab_bb_reihe { flex-wrap: wrap; }
.lab_bb_effekte_dialog .lab_bb_menu_trenner { display: block; margin: 0.6rem 0; }
dialog.lab_bb_einstellung_dialog { position: fixed; inset: 0; margin: auto; width: min(38rem, calc(100vw - 2rem)); }
.lab_bb_einstellung_dialog::backdrop { background: var(--lab-toolbar-bg); }
.lab_bb_einstellung_vorschau { display: block; max-width: 100%; max-height: 12rem; width: auto; height: auto; margin: 0.5rem auto; border: var(--lab-border); }
.lab_bb_einstellung_feld { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0.4rem 0; }
.lab_bb_einstellung_feld[hidden] { display: none; }
.lab_bb_einstellung_feld input { width: 6rem; }
.lab_bb_einstellung_punkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); gap: 0.4rem; }
.lab_bb_einstellung_punkte input { width: 100%; min-width: 0; }
/* Farben ersetzen: Toleranz-Regler mit Wertangabe in einer Zeile */
.lab_bb_farbersatz_span,
.lab_bb_regler_span { display: flex; align-items: center; gap: 0.5rem; }
.lab_bb_farbersatz_span output,
.lab_bb_regler_span output { min-width: 2rem; text-align: right; font-variant-numeric: tabular-nums; }
.lab_bb_farbersatz_span input[type="range"],
.lab_bb_regler_span input[type="range"] { flex: 1; min-width: 12rem; }

/* Auswahl transformieren: Vorschau mit fester Groesse (app.js zeichnet
   hinein), Regler und Drehwert untereinander (je eine Zeile) */
.lab_bb_einstellung_vorschau.lab_bb_auswahl_transform_vorschau {
  width: 100%;
  max-width: 22rem;
  height: 12rem;
  margin: 0.5rem auto 0.8rem;
}
.lab_bb_auswahl_transform_felder { display: flex; flex-direction: column; }
.lab_bb_auswahl_transform_felder .lab_bb_einstellung_feld { flex-wrap: wrap; }
.lab_bb_auswahl_transform_felder .lab_bb_regler_span { flex: 1 1 12rem; justify-content: flex-end; }
/* Filter-Dialog: Vorschau links, Regler rechts. Schlanker als die
   Optionsleiste war der Block nicht - er steht jetzt in einem Fenster
   mit eigener Vorschau und rollt bei Bedarf. */
dialog.lab_bb_filter_dialog { width: min(56rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; }
/* Drei Kaesten im Raster: Vorschau oben links, Gradationskurve darunter,
   Regler und Farbstimmung in der rechten Spalte. */
.lab_bb_filter_raster {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(17rem, 1fr);
  gap: 0.5rem 1.4rem;
  align-items: start;
}
.lab_bb_filter_seite { grid-column: 1; grid-row: 1; min-width: 0; }
.lab_bb_filter_kurven { grid-column: 1; grid-row: 2; min-width: 0; }
.lab_bb_filter_regler { grid-column: 2; grid-row: 1 / span 2; min-width: 0;
  display: grid; align-content: start; column-gap: 0.8rem; }
.lab_bb_filter_seite .lab_bb_histogramm { margin-top: 0.5rem; }
.lab_bb_filter_vorschau { width: 100%; max-height: 18rem; margin: 0; }
.lab_bb_filter_regler .lab_bb_zeile { margin: 0.5rem 0 0.15rem; }
.lab_bb_filter_regler .lab_bb_regler { margin-bottom: 0.15rem; }
.lab_bb_filter_modi { margin-top: 0.9rem; }
.lab_bb_filter_modi .lab_bb_zeile { margin: 0 0.2rem 0 0; }
/* Schmale Fenster stapeln alles untereinander: Vorschau, dann die Regler,
   die Kurven zuletzt - so liegen Festigen und Abbrechen nicht so tief,
   dass man lange scrollen muss. */
@media (max-width: 46rem) {
  .lab_bb_filter_raster { grid-template-columns: 1fr; }
  .lab_bb_filter_seite, .lab_bb_filter_kurven, .lab_bb_filter_regler {
    grid-column: 1;
    grid-row: auto;
  }
  .lab_bb_filter_vorschau { max-height: 12rem; }
}
.lab_bb_stile_dialog { max-height: calc(100dvh - 2rem); overflow-y: auto; }
.lab_bb_stile_felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.5rem; }
.lab_bb_stile_gruppe { min-width: 0; padding: 0.5rem; border: var(--lab-border); border-radius: 8px; }
.lab_bb_stile_gruppe legend { padding: 0 0.3rem; }
.lab_bb_stile_gruppe legend label { display: flex; align-items: center; gap: 0.4rem; }
.lab_bb_stile_dialog > .lab_bb_reihe { position: sticky; bottom: -1rem; padding: 0.6rem 0; background: var(--ct-color); }

/* Schliessen-Knopf rechts oben, bleibt beim Scrollen am Dialog-Start */
.lab_bb_modal_x {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.4rem;
  border: var(--lab-border);
  border-radius: 8px;
  background: var(--div-color);
  color: var(--blk-color);
  font-size: 1.15rem;
  line-height: 1;
}
.lab_bb_modal_x:hover { border-color: var(--bt-color); color: var(--bt-color); }

.lab_bb_modal_fuss {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

/* In hohen Dialogen (Filter, Einstellungs-Ebene, Text) bleibt die
   Knopfzeile am unteren Rand stehen - sonst liegt "Festigen" unterhalb
   des Sichtbaren und man muss im Dialog hoch- und herunterschieben. */
.lab_bb_einstellung_dialog .lab_bb_modal_fuss {
  position: sticky;
  bottom: -1.1rem;
  margin-left: -1.2rem;
  margin-right: -1.2rem;
  padding: 0.5rem 1.2rem 1.1rem;
  background: var(--ct-color);
  border-top: var(--lab-border);
}

.lab_bb_fortschritt { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }

.lab_bb_fortschritt_balken {
  height: 0.7rem;
  border: var(--lab-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--grey100-color);
}

.lab_bb_fortschritt_balken span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--bt-color);
  transition: width 0.15s ease;
}

.lab_bb_stapel_liste {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--grey600-color);
  max-height: 12rem;
  overflow-y: auto;
}
.lab_bb_stapel_liste li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--lab-border-color);
}
.lab_bb_stapel_liste li:last-child { border-bottom: none; }
.lab_bb_stapel_liste .ok  { color: var(--link-color); }
.lab_bb_stapel_liste .mgl { color: var(--lab-beta-fg); }

/* ---------------------------------------------------------------
   Toast
   --------------------------------------------------------------- */
.lab_bb_toast {
  position: fixed;
  left: 50%;
  bottom: 3.2rem;              /* ueber der Statuszeile - dort stehen
                                   Meldungen wie "Auswahl ragt über den
                                   Bildrand" mit Knopf, die nicht verdeckt
                                   werden duerfen */
  transform: translateX(-50%) translateY(14px);
  max-width: 92vw;
  padding: 0.55rem 1rem;
  border: var(--lab-border);
  border-radius: 999px;
  background: var(--div-color);
  color: var(--blk-color);
  box-shadow: var(--lab-shadow-2);
  font-size: 0.9rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 60;
}
.lab_bb_toast_zeigen { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------
   Schmale Schirme: Panel unter das Bild
   --------------------------------------------------------------- */
@media (max-width: 62rem) {
  /* nowrap ist Pflicht: das flex-wrap der Andock-Leiste wuerde in der
     Spaltenrichtung in eine ZWEITE Spalte umbrechen, sobald der Stapel
     hoeher als der Schirm ist - die Panels stunden dann seitlich hinaus */
  .lab_bb_haupt { flex-direction: column; flex-wrap: nowrap; }
  /* In der Spaltenrichtung ist die Flex-Basis die Höhe statt der Breite. */
  .lab_bb_buehne { flex: 1 1 auto; }
  /* Hoehe freigeben: die Seite waechst und scrollt, statt das Bild
     zusammenzupressen (Desktop >62rem behaelt die Fensterfuellung) */
  .lab_main { flex: 0 0 auto; }
  .lab_bb_seiten {
    position: static;
    flex: 1 1 auto;
    width: 100%;
    max-height: none;
  }
  .lab_bb_ebenen {
    position: static;
    flex: 1 1 auto;
    width: 100%;
    max-height: none;
  }
  /* Werkzeugspalte wird horizontale Leiste ueber dem Bild */
  .lab_bb_werkzeuge {
    position: static;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
  }
  .lab_bb_werkzeug_liste {
    grid-template-columns: none;      /* schmale Schirme: eine Reihe, horizontal laufend */
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    justify-content: start;
  }
  .lab_bb_werkzeug_trenner { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lab_bb_sw:hover { transform: none; }
  .lab_bb_fortschritt_balken span { transition: none; }
  .lab_bb_toast { transition: none; }
}

/* ------------------------------------------------------------------
   Muster-Wahl: Kachel-Vorschau statt Select (Muster-Stempel und
   Muster-Füllen) - die Knöpfe zeigen das Muster wirklich, gerendert
   in der Werkzeugfarbe (Hintergrundbild kommt aus app.js)
   ------------------------------------------------------------------ */
.lab_bb_muster_wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.lab_bb_muster_kachel {
  width: 2.2rem;
  height: 2.2rem;
  padding: 3px;
  font: inherit;
  border: var(--lab-border);
  border-radius: 6px;
  background: var(--div-color);
  cursor: pointer;
}
.lab_bb_muster_kachel:hover { background: var(--alt-div-hover-color); }
.lab_bb_muster_kachel[aria-pressed="true"] {
  outline: 2px solid var(--bt-color);
  outline-offset: 1px;
}
.lab_bb_muster_probe {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: repeat;   /* natürliche Kachelgröße, wie auf dem Blatt */
}

/* Eigene Pinsel-Kacheln: die Spitze ganz zeigen statt zu kacheln */
.lab_bb_pinsel_probe {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ------------------------------------------------------------------
   Gradationskurven-Editor (Filter-Werkzeug)
   ------------------------------------------------------------------ */
.lab_bb_kurven {
  display: block;
  width: 100%;
  max-width: 184px;
  background: var(--div-color);
  border: var(--lab-border);
  border-radius: 8px;
  touch-action: none;
  cursor: crosshair;
}

/* ------------------------------------------------------------------
   Kontextmenü (rechte Maustaste): fix am Zeiger, ein Satz je Lage
   (Bild / Markierung / Element); Untermenüs öffnen sich per JS
   (Hovern oder Eingabe), Einträge wie in den Menüs der Leiste
   ------------------------------------------------------------------ */
.lab_bb_kontext {
  position: fixed;
  z-index: 48;              /* über gelösten Panels (47), unter Modals (50) */
  min-width: 12.5rem;
  padding: 0.25rem;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 10px;
  box-shadow: var(--lab-shadow-2, var(--lab-shadow-1));
}

.lab_bb_kontext .lab_bb_menu_eintrag {
  gap: 1rem;
  padding: 0.36rem 0.5rem;
  font-size: 0.84rem;
}

.lab_bb_kontext .lab_bb_menu_kuerzel { font-size: 0.7rem; }

.lab_bb_kontext_teil { display: flex; flex-direction: column; }

/* Zeile mit Untermenü. Der Knopf muss die Zeile füllen, damit der
   Pfeil am rechten Rand steht (gleiche Falle wie in der Menüleiste) */
.lab_bb_kontext_unter {
  position: relative;
  display: flex;
  flex-direction: column;
}

.lab_bb_kontext_liste {
  position: absolute;
  top: -0.25rem;
  left: calc(100% - 0.25rem);
  z-index: 1;
  min-width: 11.5rem;
  padding: 0.25rem;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 10px;
  box-shadow: var(--lab-shadow-2, var(--lab-shadow-1));
}

/* Passt das Untermenü nach unten nicht, klappt es nach oben auf;
   am rechten Rand nach links (entscheidet app.js beim Öffnen) */
.lab_bb_kontext_liste.lab_bb_kontext_hoch { top: auto; bottom: -0.25rem; }
.lab_bb_kontext_liste.lab_bb_kontext_links { left: auto; right: calc(100% - 0.25rem); }

/* Sprach-Wahl im Kopf der Menüleiste (Plattform-Schema:
   Formular mit ?sprache=xx, Auswahl im Cookie lab_sprache) */
.lab_bb_sprache { margin-left: auto; padding-right: 0.2rem; }
.lab_bb_sprache select {
  font: inherit;
  font-size: 0.84rem;
  padding: 0.22rem 0.4rem;
  border: var(--lab-border);
  border-radius: 7px;
  background: transparent;
  color: var(--blk-color);
  cursor: pointer;
}
.lab_bb_sprache select:focus-visible {
  outline: 2px solid var(--bt-color);
  outline-offset: 1px;
}

/* Pfeil der Untermenü-Einträge (reine Deko) */
.lab_bb_kontext_auf::after {
  content: "";
  width: 0;
  height: 0;
  border: 0.26rem solid transparent;
  border-right-width: 0;
  border-left-color: currentColor;
  margin-left: auto;
}