/* =====================================================================
   lab - werkzeuge/svgeditor/app.css
   LabVectorDraw: Menueleiste (Konvention von LabImageEdit), Leinwand-
   Leiste, Werkzeug-Leiste andockbar (Inkscape-Vorbild), Zeichenblatt,
   loesbare Panels rechts, Statuszeile, Dialoge, Toast.

   Konventionen (AGENTS.md 5):
     - Alle Klassen mit Prefix lab_ed_ (nur der Editor verwendet sie)
     - App-Oberflaeche nutzt ausschliesslich Variablen aus css/colors.css
     - Ausnahme: die Farben der ZEICHENFLAECHE (--lab_ed_raster,
       --lab_ed_hilfs, --lab_ed_markierung) stehen hier fest, weil das
       Blatt immer weiss ist und Hilfslinien in beiden Modi gleich
       aussehen muessen (in AGENTS.md 5.1 als Ausnahme vermerkt).
   ===================================================================== */

/* ---------------------------------------------------------------
   Volle Fensterbreite: der Editor kennt keine maximale Seitenbreite
   mehr - Menueleiste, Werkzeugleiste, Arbeitsflaeche und Panels
   laufen ueber die ganze Seite. Damit die Leisten am Fensterrand
   nicht direkt ankleben, bleibt links und rechts ein schmaler Rand
   stehen (gilt nur hier und ueberschreibt .lab_shell_breit aus
   css/layout.css; Aenderungen an der Grundschale gehoeren in die
   Plattform-Quelle, nicht in diese Kopie).
   --------------------------------------------------------------- */
.lab_shell.lab_shell_breit {
  max-width: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ---------------------------------------------------------------
   Menueleiste (wie in LabImageEdit): schmale Leiste mit
   Menue-Titeln, Klick oeffnet ein Dropdown, Klick ausserhalb schliesst
   --------------------------------------------------------------- */
.lab_ed_menueleiste {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin: 0.2rem 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_ed_menu { position: relative; }

/* lab-Marke (Kolben + Schriftzug) mit Trennstrich zur ersten Menuegruppe
   (der Plattform-Kopf ist auf dieser Seite ausgeblendet) */
.lab_ed_menueleiste .lab_marke {
  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;
}

.lab_ed_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_ed_menu_titel:hover,
.lab_ed_menu_titel.lab_ed_menu_offen {
  background: var(--alt-div-hover-color);
}

.lab_ed_menu_liste {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 0;
  z-index: 45;
  min-width: 16rem;
  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_ed_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_ed_menu_eintrag:hover:not(:disabled) { background: var(--alt-div-hover-color); }

/* Menue-Eintraege als Verweise (lab-Werkzeuge, Impressum) und Gruppen */
a.lab_ed_menu_eintrag { text-decoration: none; }
.lab_ed_menu_gruppe { display: contents; }

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

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

/* Deaktivierte Eintraege (z. B. Einfuegen bei leerer Zwischenablage) */
.lab_ed_menu_eintrag:disabled {
  color: var(--grey600-color);
  cursor: default;
}

/* ---------------------------------------------------------------
   Kontextmenü (rechte Maustaste): fix am Zeiger, ein Satz fuer das
   leere Blatt, einer fuer die Markierung; Untermenues oeffnen sich
   per JS (Hovern oder Eingabe), Eintraege wie in den Hauptmenues
   --------------------------------------------------------------- */
.lab_ed_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));
}

/* Etwas enger als die Menueleiste: kleinere Luecke zwischen Beschriftung
   und Kuerzel, schmalere Polsterung - das Menue bleibt so bei rund 240 px */
.lab_ed_kontext .lab_ed_menu_eintrag {
  gap: 1rem;
  padding: 0.36rem 0.5rem;
  font-size: 0.84rem;
}

.lab_ed_kontext .lab_ed_menu_kuerzel { font-size: 0.7rem; }

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

/* Zeile mit Untermenue. Der Knopf muss die Zeile fuellen: ein <button> mit
   display:flex schrumpft im Block-Container auf seinen Inhalt, der Pfeil
   klebte sonst am Text statt am rechten Rand zu stehen */
.lab_ed_kontext_unter {
  position: relative;
  display: flex;
  flex-direction: column;
}

.lab_ed_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_ed_kontext_liste.lab_ed_kontext_hoch { top: auto; bottom: -0.25rem; }
.lab_ed_kontext_liste.lab_ed_kontext_links { left: auto; right: calc(100% - 0.25rem); }

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

/* ---------------------------------------------------------------
   Leinwand-Leiste: Blattgroesse, Blattfarbe, Rasterdichte
   --------------------------------------------------------------- */
.lab_ed_leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.2rem;
}

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

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

.lab_ed_dichte { flex: 0 0 auto; width: auto; font-size: 0.85rem; padding: 0.3rem 0.4rem; }

/* Formulare in den Seiten-Dialogen */
.lab_ed_seite_breit { width: 100%; }
.lab_ed_eingabe {
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.4rem 0.55rem;
  border: var(--lab-border);
  border-radius: 8px;
  background: var(--div-color);
  color: var(--blk-color);
}
.lab_ed_eingabe:focus-visible { outline: 2px solid var(--bt-color); outline-offset: 1px; }
.lab_ed_seiten_ausrichtung { grid-template-columns: 1fr 1fr; }

/* ---------------------------------------------------------------
   Werkzeug-Leiste (wie der Werkzeugkasten in Inkscape): Spalten
   nebeneinander; Gruppen bleiben beim Spaltenwechsel zusammen und
   werden mit Trennlinien gegliedert. Die Knoepfe setzt app.js in
   Spalten-Wrapper ein, die Spaltenzahl richtet sich nach der
   vorhandenen Hoehe (werkzeugspaltenMessen).
   --------------------------------------------------------------- */
.lab_ed_werkzeugleiste {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.4rem 0.3rem;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 12px;
  box-shadow: var(--lab-shadow-1);
  /* gleiche Hoehe wie die Buehne; reicht die Hoehe nicht, passt
     werkzeugspaltenMessen() (app.js) die Spaltenzahl an */
  height: 78vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--lab-border-color) transparent;
  position: sticky;
  top: 0.6rem;
}

.lab_ed_werkzeugspalte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.lab_ed_leistentrenner {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1px;
  background: var(--lab-border-color);
  margin: 0.15rem 0;
}

.lab_ed_werkzeug {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 9px;
  border: var(--lab-border);
  background: var(--ct-color);
  color: var(--blk-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.lab_ed_werkzeug svg { width: 1.5rem; height: 1.5rem; display: block; }
.lab_ed_werkzeug:hover { border-color: var(--bt-color); }
.lab_ed_werkzeug:focus-visible { outline: 2px solid var(--bt-color); outline-offset: 2px; }

.lab_ed_werkzeug_aktiv {
  background: var(--green50-color);
  border-color: var(--bt-color);
  color: var(--link-color);
  box-shadow: inset 0 0 0 1px var(--bt-color);
}

/* Werkzeug-Tooltip: Name, Kürzel und Kurzbeschreibung in einer Blase
   neben der Leiste (app.js setzt Inhalt und Lage; position:fixed am
   body, damit die Leiste mit ihrem Scrollbalken nichts abschneidet) */
.lab_ed_werkzeug_tip {
  position: fixed;
  z-index: 46;                       /* über Menü (45), 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_ed_werkzeug_tip_kopf {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

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

.lab_ed_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_ed_werkzeug_tip_text {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--grey600-color);
}

/* ---------------------------------------------------------------
   Werkzeugleiste andockbar: links (Voreinstellung), rechts, oben
   oder unten - das Ansicht-Menü setzt die Klasse auf lab_ed_haupt.
   Oben/unten läuft die Leiste als eigene Zeile über/unter der
   Arbeitsfläche, die Werkzeugspalten loesen sich auf (display:
   contents) und die Knoepfe laufen als eine Zeile.
   --------------------------------------------------------------- */
.lab_ed_haupt {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.6rem;
}

.lab_ed_haupt.lab_ed_leiste_rechts .lab_ed_werkzeugleiste { order: 4; }

.lab_ed_haupt.lab_ed_leiste_oben .lab_ed_werkzeugleiste,
.lab_ed_haupt.lab_ed_leiste_unten .lab_ed_werkzeugleiste {
  flex: 1 1 100%;
  position: static;
  height: auto;
  max-height: none;
  overflow-y: hidden;
  overflow-x: auto;
  padding: 0.4rem 0.5rem;
  align-items: center;
}
.lab_ed_haupt.lab_ed_leiste_oben .lab_ed_werkzeugleiste { order: -1; }
.lab_ed_haupt.lab_ed_leiste_unten .lab_ed_werkzeugleiste { order: 4; }

.lab_ed_leiste_oben .lab_ed_werkzeugspalte,
.lab_ed_leiste_unten .lab_ed_werkzeugspalte { display: contents; }

.lab_ed_leiste_oben .lab_ed_leistentrenner,
.lab_ed_leiste_unten .lab_ed_leistentrenner {
  width: 1px;
  height: 1.8rem;
  margin: 0 0.15rem;
}

/* ---------------------------------------------------------------
   Arbeitsflaeche: Blatt, Panels rechts
   --------------------------------------------------------------- */
.lab_ed_buehne {
  /* Basis 0 (statt Inhaltsbreite): mit flex-wrap (fuer die Andock-Lagen)
     wuerde die Buehne sonst ihre eigene Inhaltsbreite als Zeilen-Sollmass
     nehmen und die Panel-Spalte in die naechste Zeile drängen. */
  flex: 1 1 0;
  min-width: 0;
  /* Nie breiter als die Zeile, in der sie steht. Sonst misst blattAnzeigen()
     beim Verkleinern des Fensters eine zu breite Flaeche, das Blatt bleibt
     zu gross, die Flaeche bleibt zu gross - und auf dem Handy stand ein
     waagerechter Balken am Rand (AGENTS.md 8.1). */
  max-width: 100%;
  height: 78vh;                        /* feste Arbeitsflaeche - das Blatt passt sich an */
  display: flex;
  overflow: auto;                      /* beim Zoomen laesst sich das Blatt scrollen */
  padding: 1.25rem;
  /* Nichts markieren: die Flaeche ist ein Zeichenblatt, kein Textfeld. Ohne das
     zieht der Browser beim Verschieben eine Textmarkierung ueber die
     Beschriftungen auf dem Blatt - und manchmal bis in die Panels hinein.
     Texte bearbeitet man ohnehin im Feld "Text in oder auf der Form". */
  -webkit-user-select: none;
  user-select: none;
  background: var(--grey200-color);      /* Arbeitsflaeche ("Schreibtisch") um das Blatt */
  border: var(--lab-border);
  border-radius: 12px;
  box-shadow: var(--lab-shadow-1);
  --lab_ed_blatt: #FFFFFF;             /* Raster/Blatt: dokumentierte Ausnahme (siehe oben) */
  --lab_ed_raster: #CFD8DC;
  --lab_ed_hilfs: #FF4081;
  --lab_ed_markierung: #8E24AA;
  --lab_ed_randlinie: #90A4AE;         /* Blattrand-Fuehrung (Seite einrichten) */
}

/* Das Blatt selbst: Groesse und Farbe setzt app.js aus Format und Zoom */
.lab_ed_blatthalter {
  flex: none;
  margin: auto;                        /* zentriert und bleibt beim Zoomen scrollbar */
  background: #FFFFFF;
  border: 1px solid var(--lab-border-color);
  box-shadow: var(--lab-shadow-2);
}

.lab_ed_blatthalter svg {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;                  /* Finger-Ziehen ohne Seiten-Scroll */
}

.lab_ed_buehne svg.zeichnen { cursor: crosshair; }

/* Blatt schieben: Leertaste gehalten oder mittlere Maustaste */
.lab_ed_buehne.lab_ed_pan_bereit { cursor: grab; }
.lab_ed_buehne.lab_ed_pan_bereit svg { cursor: grab; }
.lab_ed_buehne.lab_ed_pan_laeuft { cursor: grabbing !important; }
.lab_ed_buehne.lab_ed_pan_laeuft svg { cursor: grabbing !important; }

/* Zoom-Bedienung in der Statuszeile unten rechts */
.lab_ed_zoom { display: inline-flex; align-items: center; gap: 0.25rem; }
.lab_ed_zoom .lab_ed_mini { min-width: 2.1rem; }
.lab_ed_zoom_breit { min-width: 5.5rem; }

.lab_ed_rasterlinie { stroke: var(--lab_ed_raster); stroke-width: 1; }
.lab_ed_rasterlinie_haupt { stroke: var(--lab_ed_raster); stroke-width: 1.8; }
.lab_ed_randlinie_rechteck { stroke: var(--lab_ed_randlinie); stroke-width: 1; stroke-dasharray: 7 5; fill: none; }
.lab_ed_hilfslinie { stroke: var(--lab_ed_hilfs); stroke-width: 1.6; }

/* Mess-Werkzeug: Masslinie und Beschriftung auf dem Blatt
   (Blatt-Farben sind die dokumentierte Ausnahme in AGENTS.md 5.1) */
.lab_ed_messlinie { stroke: var(--lab_ed_hilfs); stroke-width: 1.6; stroke-dasharray: 6 4; fill: none; }
.lab_ed_messpunkt { fill: var(--lab_ed_hilfs); }
.lab_ed_messtext {
  fill: var(--lab_ed_markierung);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  pointer-events: none;
}
.lab_ed_marke {
  fill: rgba(142, 36, 170, 0.16);
  stroke: var(--lab_ed_markierung);
  stroke-width: 1.4;
  stroke-dasharray: 5 3;
}

/* ---------------------------------------------------------------
   Panel-Spalte rechts: Objekte und Einstellungen (jedes einzeln
   loesbar, dann position:fixed und frei ziehbar - siehe lab_ed_geloest)
   --------------------------------------------------------------- */
.lab_ed_seiten {
  flex: 0 0 19rem;
  width: 19rem;
  position: sticky;
  top: 0.6rem;
  /* Genau so hoch wie die Arbeitsflaeche (gleiche Rechnung): die Spalte
     endet mit dem Blatt und laeuft nie darunter weiter. Reicht der Platz
     fuer beide Panels nicht, scrollt die Spalte in sich selbst - die
     Panels behalten dabei ihre natuerliche Hoehe. */
  height: 78vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--lab-border-color) transparent;
}

.lab_ed_panel {
  /* Natuerliche Hoehe: die Spalte scrollt, nicht das einzelne Panel -
     ein hohes Panel haette sonst eine leere Flaeche unter seinem Inhalt */
  flex: 0 0 auto;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 12px;
  padding: 0.75rem 1rem 1.1rem;
  box-shadow: var(--lab-shadow-1);
}

/* Kopfzeile des Panels: Titel links, Zaehler/Knopf rechts; die Zeile
   ist beim geloesten Panel zugleich Griff zum Verschieben */
.lab_ed_panel_kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  margin: 0 0 0.3rem;
}

.lab_ed_panel_kopf .lab_ed_panel_titel { margin: 0; font-size: 1rem; }

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

.lab_ed_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_ed_panel_knopf:hover {
  background: var(--alt-div-hover-color);
  color: var(--blk-color);
}
.lab_ed_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_ed_geloest .lab_ed_panel_kopf {
  cursor: grab;
  touch-action: none;
}
.lab_ed_geloest .lab_ed_panel_kopf:active { cursor: grabbing; }

.lab_ed_panel.lab_ed_geloest {
  position: fixed;
  z-index: 47;                      /* über Tooltip (46) und Menü (45), unter Modals (50) */
  width: 19rem;
  max-height: calc(100vh - 1rem);
  overflow-y: auto;
  margin: 0;
  box-shadow: var(--lab-shadow-2);
}

.lab_ed_panel_leer {
  margin: 0.4rem 0 0.2rem;
}

/* ---------------------------------------------------------------
   Seiten-Panel: Vorschaubilder der Seiten (wie das Folien-Panel in
   LibreOffice Draw). Klick wechselt, Doppelklick benennt um; app.js
   setzt die Karten neu, sobald sich Seiten oder Blatt aendern.
   --------------------------------------------------------------- */
.lab_ed_seiten_liste {
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  border: var(--lab-border);
  border-radius: 8px;
  max-height: 15rem;
  overflow-y: auto;
  background: var(--div-color);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.lab_ed_seiten_wahl {
  display: block;
  width: 100%;
  padding: 0.3rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--blk-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lab_ed_seiten_wahl:hover { background: var(--alt-div-hover-color); }
.lab_ed_seiten_karte.is_aktiv .lab_ed_seiten_wahl {
  border-color: var(--bt-color);
  background: var(--green50-color);
}

/* Vorschau: das Blatt im Kleinen - weisser Grund kommt aus dem Blatt-Rechteck
   im SVG selbst (Papier bleibt hell, wie auf der Arbeitsflaeche) */
.lab_ed_seiten_mini {
  display: block;
  width: 100%;
  max-height: 5.4rem;
  margin: 0 auto 0.25rem;
  border: 1px solid var(--lab-border-color);
  border-radius: 4px;
  background: var(--lab_ed_blatt);
}

.lab_ed_seiten_fuss {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.lab_ed_seiten_nummer {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-family: var(--lab-mono, monospace);
  color: var(--grey600-color);
  border: 1px solid var(--lab-border-color);
  border-radius: 6px;
  padding: 0 0.28rem;
  background: var(--ct-color);
}

.lab_ed_seiten_name {
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab_ed_seiten_aktionen { grid-template-columns: repeat(3, 1fr); }

/* ---------------------------------------------------------------
   Objektliste (oben = ganz vorn)
   --------------------------------------------------------------- */
.lab_ed_obj_zaehler { color: var(--grey600-color); font-weight: 400; }

.lab_ed_obj_liste {
  list-style: none;
  margin: 0;
  padding: 0.15rem;
  border: var(--lab-border);
  border-radius: 8px;
  max-height: 11rem;
  overflow-y: auto;
  background: var(--div-color);
}

.lab_ed_obj {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.15rem;
  border-radius: 6px;
}

.lab_ed_obj.is_gewaehlt { background: var(--green50-color); }

.lab_ed_obj_knopf {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--grey600-color);
  cursor: pointer;
}
.lab_ed_obj_knopf:hover { background: var(--alt-div-hover-color); color: var(--blk-color); }
.lab_ed_obj_knopf:focus-visible { outline: 2px solid var(--bt-color); outline-offset: 1px; }
.lab_ed_obj_knopf svg { display: block; }

/* Zustand: Auge zu (ausgeblendet), Schloss zu (gesperrt) */
.lab_ed_obj.ist_aus .lab_ed_obj_knopf[data-akt="sichtbar"],
.lab_ed_obj.ist_aus .lab_ed_obj_name { opacity: 0.45; }
.lab_ed_obj.ist_gesperrt .lab_ed_obj_knopf[data-akt="gesperrt"] { color: var(--blk-color); }
.lab_ed_obj.ist_gesperrt .lab_ed_obj_knopf[data-akt="gesperrt"] svg { opacity: 1; }
.lab_ed_obj.ist_gesperrt .lab_ed_obj_name { font-style: italic; }

.lab_ed_obj_name {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  padding: 0.1rem 0.25rem;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--blk-color);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lab_ed_obj_name:hover { background: var(--alt-div-hover-color); }
.lab_ed_obj_name:focus-visible { outline: 2px solid var(--bt-color); outline-offset: 1px; }

.lab_ed_obj_farbe {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  border: 1px solid var(--lab-border-color);
}

.lab_ed_obj_leer {
  font-size: 0.8rem;
  color: var(--grey600-color);
  padding: 0.25rem;
}

/* Auswahl-Befehle unter der Objektliste (2x2-Raster wie lab_ed_aktionen) */
.lab_ed_obj_aktionen { margin-top: 0.4rem; }
.lab_ed_obj_aktionen .lab_ed_mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.3rem;
  font-size: 0.78rem;
}

/* ---------------------------------------------------------------
   Formular-Bausteine im Panel
   --------------------------------------------------------------- */
.lab_ed_zeile {
  font-size: 0.82rem;
  color: var(--grey600-color);
  margin: 0.75rem 0 0.3rem;
}

.lab_ed_reihe { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

.lab_ed_swatches { display: flex; flex-wrap: wrap; gap: 0.3rem; }

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

.lab_ed_sw_ohne {
  background: var(--ct-color);
  position: relative;
}
.lab_ed_sw_ohne::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: linear-gradient(to bottom right, transparent 45%, var(--red600-color) 45%, var(--red600-color) 55%, transparent 55%);
}

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

/* ---------------------------------------------------------------
   Farbwahl: ein Knopf zeigt die aktuelle Farbe und oeffnet den
   Farb-Dialog (Paletten, eigene Farbe, Hex-Wert). Ohne Farbe bleibt
   das Feld leer - der Knopf daneben (durchgestrichen) nimmt sie weg.
   --------------------------------------------------------------- */
.lab_ed_farbe_wahl {
  width: 2.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--lab-border-color);
  border-radius: 6px;
  background: var(--ct-color);
  cursor: pointer;
}
.lab_ed_farbe_wahl:hover { border-color: var(--bt-color); }
.lab_ed_farbe_wahl_ohne {
  background: var(--ct-color);
  position: relative;
}
.lab_ed_farbe_wahl_ohne::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: linear-gradient(to bottom right, transparent 45%, var(--red600-color) 45%,
                              var(--red600-color) 55%, transparent 55%);
}
/* Fuer die Zeilen der Verlaufsstopps: quadratisch wie die Felder daneben */
.lab_ed_farbe_wahl_klein { width: 1.6rem; height: 1.6rem; }

/* Die gewaehlte Farbe im Raster und in den Abstufungen hervorheben */
.lab_ed_sw_aktiv {
  outline: 2px solid var(--bt-color);
  outline-offset: 1px;
}

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

/* Regler mit Zahlfeld daneben (ziehen oder eintippen, wie in Inkscape) */
.lab_ed_regler_zeile {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lab_ed_regler_zeile .lab_ed_regler { flex: 1 1 auto; width: auto; min-width: 0; }

input.lab_ed_zahl_klein {
  flex: 0 0 4.2rem;
  width: 4.2rem;
  font-size: 0.85rem;
  padding: 0.25rem 0.3rem;
  text-align: right;
}

/* Position-und-Groesse-Felder (X/Y/Breite/Hoehe) im Panel */
.lab_ed_lage {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 0.3rem 0.45rem;
  align-items: center;
}
.lab_ed_lage_beschriftung { font-size: 0.82rem; color: var(--grey600-color); }
.lab_ed_lage .lab_ed_zahl_klein { width: 100%; flex: none; }

/* Felder der Leinwand-Leiste */
input.lab_ed_zahl { width: 5.5rem; }   /* input[type=number] aus layout.css ueberschreiben */
input.lab_ed_zahl:focus { border-color: var(--bt-color); outline: 2px solid var(--lab-ring); }

.lab_ed_textfeld {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.5rem;
  width: 100%;
  resize: vertical;
  min-height: 2.6rem;
  line-height: 1.35;
}

.lab_ed_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_ed_mini:hover { background: var(--alt-div-hover-color); }
.lab_ed_mini:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.lab_ed_mini_aktiv {
  background: var(--green50-color);
  border-color: var(--green300-color);
  color: var(--link-color);
  font-weight: 600;
}

.lab_ed_aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }

/* ---------------------------------------------------------------
   Kompakter: die Panel-Spalte rechts (Objekte, Seiten, Einstellungen)
   fasst mehr Inhalt ohne langes Scrollen - kleinere Abstaende,
   niedrigere Bedienelemente, eine Zeile fuer die Abschnitts-
   ueberschriften. Gilt nur fuer diese Spalte: Menue-, Leinwand-
   und Dialogleisten behalten ihre groessere Bedienung. Die
   Beruehrungsgeraete bekommen unten wieder grosse Ziele.
   --------------------------------------------------------------- */
.lab_ed_seiten .lab_ed_panel { padding: 0.5rem 0.6rem 0.65rem; border-radius: 10px; }
.lab_ed_seiten .lab_ed_panel_kopf { margin: 0 0 0.2rem; }
.lab_ed_seiten .lab_ed_panel_titel { font-size: 0.9rem; margin: 0 0 0.25rem; }
.lab_ed_seiten .lab_ed_zeile { margin: 0.4rem 0 0.15rem; font-size: 0.76rem; }
.lab_ed_seiten .lab_ed_reihe { gap: 0.25rem; }
.lab_ed_seiten .lab_ed_mini { padding: 0.18rem 0.45rem; font-size: 0.8rem; border-radius: 6px; }
.lab_ed_seiten input.lab_ed_zahl_klein {
  flex-basis: 3.5rem;
  width: 3.5rem;
  font-size: 0.8rem;
  padding: 0.12rem 0.25rem;
}
.lab_ed_seiten .lab_ed_lage { gap: 0.15rem 0.3rem; }
.lab_ed_seiten .lab_ed_lage_beschriftung { font-size: 0.76rem; }
.lab_ed_seiten .lab_ed_farbe_wahl { width: 2.2rem; height: 1.45rem; }
.lab_ed_seiten .lab_ed_farbe_wahl_klein { width: 1.45rem; height: 1.45rem; }
.lab_ed_seiten .lab_ed_sw { width: 1.45rem; height: 1.45rem; }
.lab_ed_seiten .lab_ed_stops_leiste { height: 0.9rem; margin-bottom: 0.2rem; }
.lab_ed_seiten .lab_ed_stop { gap: 0.25rem; margin-bottom: 0.15rem; }
.lab_ed_seiten .lab_ed_stop .lab_ed_zahl_klein { flex-basis: 3.2rem; width: 3.2rem; }
.lab_ed_seiten .lab_ed_obj_liste { max-height: 8.5rem; }
.lab_ed_seiten .lab_ed_obj_aktionen { margin-top: 0.25rem; }
.lab_ed_seiten .lab_ed_seiten_liste { max-height: 11rem; padding: 0.2rem; gap: 0.2rem; }
.lab_ed_seiten .lab_ed_seiten_mini { max-height: 4.4rem; margin-bottom: 0.15rem; }
.lab_ed_seiten .lab_ed_hinweis { font-size: 0.82rem; }
.lab_ed_seiten .lab_ed_merk { margin: 0.3rem 0; }

/* ---------------------------------------------------------------
   Knoepfe nur mit Symbol: gleiche Zeilenhoehe wie die Textknoepfe
   daneben, quadratisch, das Symbol mittig. Der Name bleibt im Titel
   und als Text fuer Screenreader (lab_sr_only) erhalten.
   --------------------------------------------------------------- */
.lab_ed_mini.lab_ed_symbol,
.lab_ed_panel_knopf.lab_ed_symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;             /* im Raster bleibt das Feld quadratisch */
  flex: 0 0 auto;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0;
}
.lab_ed_mini.lab_ed_symbol svg,
.lab_ed_panel_knopf.lab_ed_symbol svg { display: block; }

/* ---------------------------------------------------------------
   Seitenleiste links: schmale Spalte neben der Werkzeugleiste.
   Eingeklappt (ist_zu) bleibt nur der Reiter mit der Seitenzahl -
   dann gehört die Breite dem Blatt (lab_ed_haupt ist eine Zeile).
   --------------------------------------------------------------- */
.lab_ed_seitenleiste {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  height: 78vh;
  min-height: 0;
}
.lab_ed_seitenleiste .lab_ed_panel_seitenpanel {
  width: 7.5rem;
  padding: 0.5rem 0.45rem 0.55rem;
  /* Als Flex-Spalte fuellt die Liste den Rest, die Knoepfe bleiben unten -
     mit einer Prozent-Hoehe der Liste lag der Fuss der Spalte darueber. */
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.lab_ed_seitenleiste .lab_ed_seiten_liste {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

/* Reiter: schmale senkrechte Lasche am Rand */
.lab_ed_seitenreiter {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  height: 100%;
  padding: 0.5rem 0.2rem;
  font: inherit;
  font-size: 0.68rem;
  border: var(--lab-border);
  border-radius: 8px;
  background: var(--ct-color);
  color: var(--grey600-color);
  box-shadow: var(--lab-shadow-1);
  cursor: pointer;
}
.lab_ed_seitenreiter:hover { background: var(--alt-div-hover-color); color: var(--blk-color); }
.lab_ed_seitenreiter svg { display: block; }
.lab_ed_seitenreiter_zahl {
  font-family: var(--lab-mono, monospace);
  font-size: 0.66rem;
  border: 1px solid var(--lab-border-color);
  border-radius: 5px;
  padding: 0 0.22rem;
}

/* Eingeklappt: der Reiter bleibt, die Liste verschwindet */
.lab_ed_seitenleiste.ist_zu { width: 1.7rem; }
.lab_ed_seitenleiste.ist_zu .lab_ed_panel_seitenpanel { display: none; }
.lab_ed_seitenleiste.ist_zu .lab_ed_seitenreiter { width: 100%; padding: 0.5rem 0.15rem; }

/* Optik: Vorschauleiste des Verlaufs, Farbstopp-Zeilen, Muster-Proben.
   Die Farben in Leiste und Probe kommen aus der Form (app.js) - hier
   steht nur die Form der Bedienelemente (AGENTS.md 5.1). */
.lab_ed_stops_leiste {
  height: 1.15rem;
  border: 1px solid var(--lab-border-color);
  border-radius: 5px;
  margin-bottom: 0.35rem;
}

.lab_ed_stop {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}
.lab_ed_stop .lab_ed_farbwahl { width: 2.2rem; }
.lab_ed_stop .lab_ed_zahl_klein { flex: 0 0 3.6rem; width: 3.6rem; }
.lab_ed_stop .lab_ed_mini { padding: 0.2rem 0.5rem; line-height: 1.2; }

.lab_ed_muster_knopf { padding: 0.2rem; line-height: 0; }
.lab_ed_muster_bild {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  background: var(--ct-color);
  border: 1px solid var(--lab-border-color);
  border-radius: 4px;
}

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

.lab_ed_versteckt { display: none !important; }

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

.lab_ed_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;
}

/* Hilfe-Dialog: Untergruppen zum Auf- und Zuklappen */
.lab_ed_hilfe_gruppe { margin: 0.15rem 0; }

.lab_ed_hilfe_gruppe > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  list-style-position: inside;
}

.lab_ed_hilfe_gruppe > summary:hover { color: var(--link-color); }
.lab_ed_hilfe_gruppe > summary:focus-visible {
  outline: 2px solid var(--bt-color);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Statuszeile unter dem Blatt: Werkzeug + naechster Schritt links,
   Zoom rechts (wie die Fusszeile in LabImageEdit)
   --------------------------------------------------------------- */
.lab_ed_statuszeile {
  display: flex;
  align-items: baseline;
  gap: 0.3rem 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  padding: 0.4rem 0.9rem;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 10px;
  box-shadow: var(--lab-shadow-1);
}

.lab_ed_status_name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blk-color);
  white-space: nowrap;
}

.lab_ed_status_hinweis { font-size: 0.82rem; color: var(--grey600-color); }

.lab_ed_status_seite {
  font-size: 0.82rem;
  color: var(--grey600-color);
  white-space: nowrap;
  font-family: var(--lab-mono, monospace);
}

.lab_ed_status_abstand { flex: 1 1 auto; }

/* ---------------------------------------------------------------
   Farb-Dialog: Raster der gewaehlten Palette. Paletten mit mehreren
   Farbton-Reihen stehen als Spalten buendig untereinander (app.js
   setzt die Spaltenzahl), flache Saetze laufen einfach weiter.
   --------------------------------------------------------------- */
.lab_ed_palette_gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1.25rem);
  justify-content: start;
  gap: 0.18rem;
  margin-top: 0.35rem;
}
.lab_ed_palette_gitter .lab_ed_sw { width: 1.25rem; height: 1.25rem; border-radius: 4px; }
.lab_ed_hex { font-family: var(--lab-mono); text-transform: lowercase; }
#lab_ed_modal_farbe .lab_ed_modal { max-width: 21rem; }
#lab_ed_modal_farbe .lab_ed_zeile { margin: 0.45rem 0 0.25rem; }
#lab_ed_modal_farbe .lab_ed_farbwahl { width: 4rem; height: 2.1rem; }
/* Das Hex-Feld behält seine Breite - .lab_ed_eingabe ist sonst 100 % breit */
#lab_ed_modal_farbe .lab_ed_hex { width: 7.5rem; flex: 0 0 auto; }
#lab_ed_modal_farbe .lab_ed_reihe { gap: 0.5rem; }

/* ---------------------------------------------------------------
   Dialoge und Hinweismeldung
   --------------------------------------------------------------- */
.lab_ed_modalfilter {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.lab_ed_modal {
  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_ed_modal h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }

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

/* Auswahl im Dialog (Umfang beim PDF-Export) */
.lab_ed_wahlgruppe {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.15rem 0 0.2rem;
}
.lab_ed_wahl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  cursor: pointer;
}
.lab_ed_wahl input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--bt-color);
}

.lab_ed_toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  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_ed_toast_zeigen { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------
   Schmale Schirme: Werkzeugleiste als Reihe, Panels unter das Blatt
   --------------------------------------------------------------- */
@media (max-width: 62rem) {
  .lab_ed_haupt {
    flex-direction: column;
    /* stretch, nicht flex-start: die Breite der Buehne muss fest stehen,
       sonst haengt ihre Hoehe an der Breite und die am Inhalt - die
       Flaeche pendelt zwischen zwei Groessen (siehe blattAnzeigen). */
    align-items: stretch;
  }
  .lab_ed_menueleiste { flex-wrap: wrap; }
  /* gespeicherte Leisten-Lagen gelten auf schmalen Schirmen nicht:
     die Werkzeug-Reihe liegt immer ueber dem Blatt, die Panels unten */
  .lab_ed_haupt.lab_ed_leiste_rechts .lab_ed_werkzeugleiste,
  .lab_ed_haupt.lab_ed_leiste_unten .lab_ed_werkzeugleiste { order: 0; }
  /* Werkzeug-Leiste wird auf schmalen Schirmen zur Reihe ueber dem Blatt:
     die Spalten-Wrapper loesen sich auf (display: contents), die Knoepfe
     laufen als eine scrollbare Reihe, die Gruppentrenner werden zu
     senkrechten Strichen */
  .lab_ed_werkzeugleiste {
    position: static;
    height: auto;
    width: 100%;
    flex-direction: row;
    align-items: center;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 0.4rem 0.5rem;
  }
  .lab_ed_werkzeugspalte { display: contents; }
  .lab_ed_leistentrenner {
    width: 1px;
    height: 1.8rem;
    margin: 0 0.15rem;
  }
  /* Panels stehen unter dem Blatt: dort gibt es keine Spaltenhoehe,
     die Seite scrollt wie ueberall */
  .lab_ed_seiten {
    position: static;
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  /* In der Spalte ist die flex-Basis die HOEHE: die Buehne
     (flex: 1 1 0 vom Desktop-Zeilen-Layout) kollabierte sonst auf ihr
     Padding (42 px) und das Blatt schrumpfte auf einen Fleck. */
  .lab_ed_buehne {
    /* Keine feste Hoehe: im Hochformat ist das Blatt breitenbegrenzt, eine
       feste Hoehe lieesse daneben ein grosses leeres Feld stehen. app.js
       setzt die Hoehe passend zum Blattformat (siehe blattAnzeigen). */
    flex: 0 0 auto;
    min-height: 0;
    /* Derselbe Innenabstand frisst auf dem Handy sonst ein Zehntel der
       Breite - das Blatt wird dadurch messbar groesser. */
    padding: 0.5rem;
    border-radius: 10px;
  }
  /* Leinwand-Leiste als wischbare Reihe: dreizeilig umbrechend fraß
     sie den halben Schirm, bevor das Werkzeug kommt. */
  .lab_ed_leiste {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0.2rem;
  }
  /* Seitenleiste: unter dem Blatt liegt sie quer - der Reiter steht links,
     die Liste laeuft waagerecht. So nimmt die Liste nur eine Zeile Hoehe
     ein und der Finger wischt durch die Seiten. */
  .lab_ed_seitenleiste { height: auto; width: 100%; align-items: stretch; }
  .lab_ed_seitenleiste .lab_ed_panel_seitenpanel {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    display: block;                /* wieder normale Hoehe aus dem Inhalt */
  }
  .lab_ed_seitenleiste .lab_ed_seiten_liste {
    flex: none;
    height: auto;
    max-height: none;
    flex-direction: row;           /* waagerechte Reihe wie die Werkzeugleiste */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding: 0.25rem;
  }
  .lab_ed_seitenleiste .lab_ed_seiten_liste > li { flex: 0 0 auto; width: 4.2rem; }
  .lab_ed_seitenleiste .lab_ed_seiten_mini { max-height: 3.4rem; }
  /* Die Seitenknoepfe als eine kompakte Reihe statt als Raster ueber die
     ganze Breite - sonst stuenden sie auseinandergezogen an beiden Raendern. */
  .lab_ed_seitenleiste .lab_ed_seiten_aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.25rem;
    margin-top: 0.35rem;
  }
  .lab_ed_seitenleiste .lab_ed_seitenreiter { height: auto; align-self: stretch; }
  .lab_ed_seitenleiste.ist_zu { width: auto; }
  .lab_ed_seitenleiste.ist_zu .lab_ed_seitenreiter { width: auto; }
}

/* ---------- Beruehrungsgeraete: groessere Ziele ----------
   Werkzeug- und Menue-Knoepfe sind am Finger knapp bemessen. */
@media (pointer: coarse) {
  .lab_ed_werkzeug {
    width: 2.6rem;
    height: 2.6rem;
  }
  .lab_ed_menu_titel {
    padding: 0.5rem 0.8rem;
  }
  .lab_ed_menu_eintrag {
    padding: 0.55rem 0.75rem;
  }
  .lab_ed_mini {
    padding: 0.5rem 0.75rem;
  }
  .lab_ed_zoom .lab_ed_mini {
    min-width: 2.4rem;
  }
  .lab_ed_panel_knopf {
    padding: 0.5rem 0.7rem;
  }
  /* Die verdichteten Regeln fuer die Panel-Spalte sind genauer
     benannt - am Finger gelten wieder die grossen Ziele */
  .lab_ed_seiten .lab_ed_mini { padding: 0.45rem 0.7rem; }
  .lab_ed_seiten .lab_ed_zeile { font-size: 0.82rem; }
  .lab_ed_seiten input.lab_ed_zahl_klein {
    flex-basis: 4.2rem;
    width: 4.2rem;
    padding: 0.25rem 0.3rem;
  }
  .lab_ed_seiten .lab_ed_farbe_wahl { width: 2.6rem; height: 1.9rem; }
  .lab_ed_seiten .lab_ed_farbe_wahl_klein { width: 1.9rem; height: 1.9rem; }
  .lab_ed_seiten .lab_ed_sw { width: 1.9rem; height: 1.9rem; }
  /* Symbol-Knoepfe und der Reiter der Seitenleiste: am Finger groesser */
  .lab_ed_mini.lab_ed_symbol,
  .lab_ed_panel_knopf.lab_ed_symbol { min-width: 2.3rem; height: 2.3rem; }
  .lab_ed_seitenreiter { font-size: 0.76rem; padding: 0.7rem 0.3rem; }
  .lab_ed_seitenleiste.ist_zu { width: 2.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lab_ed_sw:hover { transform: none; }
}