/* =====================================================================
   lab - werkzeuge/labcad/app.css
   LabCAD: Werkzeugspalte links, 3D-Buehne in der Mitte, Objektliste und
   Eigenschaften rechts, Leiste oben, Statuszeile unten.

   Konventionen (AGENTS.md 5): Prefix .lab_cad_, Farben nur als Variablen
   aus css/colors.css. Ausnahmen: der Schleier hinter den Dialogen
   (halbtransparentes Schwarz) - sonst nirgends.
   ===================================================================== */

/* ---------------------------------------------------------------
   Ganzes Fenster, die App hat keinen Seiten-Scrollbalken
   --------------------------------------------------------------- */
html:has(.lab_cad_app) { height: 100%; }

.lab_cad_app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 30rem;
  padding: 0;
}

.lab_cad_main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

/* ---------------------------------------------------------------
   Menüleiste (Datei, Bearbeiten, Objekt, Skizze, Ansicht, Hilfe)
   --------------------------------------------------------------- */
.lab_cad_menueleiste {
  flex: none;
  display: flex;
  /* backdrop-filter erzeugt einen eigenen Stapelkontext - ohne z-index
     laege die Leiste mit ihren Menues UNTER der positionierten Buehne
     (das Canvas faengt dann die Klicks ab). */
  position: relative;
  /* Ueber den geloesten Panels (46): die aufklappenden Listen muessen
     ueber allem Schwebenden liegen - sonst deckt ein geloestes Objekte-
     Panel die Liste ab und die Klicks landen auf dem Panel. Modals (50)
     und der Werkzeug-Tipp (48) bleiben darueber. */
  z-index: 47;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.1rem;
  padding: 0.25rem 0.5rem;
  background: var(--lab-toolbar-bg);
  backdrop-filter: blur(6px);
  border-bottom: var(--lab-border);
}

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

/* Arbeitsmodus links in der Werkzeugleiste (Objekt/Skizze/…) */
.lab_cad_ribbon_reiter {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding-right: 0.5rem;
  margin-right: 0.4rem;
  border-right: var(--lab-border);
}
.lab_cad_modus_fertig { margin-left: 0.25rem; }

.lab_cad_rechts {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  padding-left: 0.5rem;
  border-left: var(--lab-border);
}

/* Modus-Umschalter (Objekt / Skizze / Fläche / Kante) */
.lab_cad_modus {
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--grey600-color);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lab_cad_modus:hover { background: var(--alt-div-hover-color); color: var(--blk-color); }
.lab_cad_modus.is_aktiv { background: var(--bt-color); color: var(--bt-f-color); }
.lab_cad_modus[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.lab_cad_modus[aria-disabled="true"]:hover { background: transparent; color: var(--grey600-color); }

/* Ein Menü: Titel-Knopf und die aufklappende Liste */
.lab_cad_menu { position: relative; }

.lab_cad_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_cad_menu_titel:hover { background: var(--alt-div-hover-color); }
.lab_cad_menu_titel[aria-expanded="true"] {
  background: var(--bt-color);
  border-color: var(--bt-color);
  color: var(--bt-f-color);
}

.lab_cad_menu_liste {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 45;
  min-width: 17rem;
  max-width: min(24rem, calc(100vw - 1.5rem));
  max-height: min(75vh, 36rem);
  overflow-y: auto;
  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));
}

/* Eintrag: links der Haken-Platz (nur bei gewaehlten Zuständen belegt),
   rechts das Kürzel. Der Platz bleibt immer frei, damit die Beschriftungen
   untereinander stehen. */
.lab_cad_menu_eintrag {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  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_cad_menu_eintrag::before {
  content: "";
  flex: none;
  width: 0.9rem;
  margin-left: -0.2rem;
  font-size: 0.82rem;
  color: var(--bt-color);
}
.lab_cad_menu_eintrag[aria-checked="true"]::before { content: "✓"; }
.lab_cad_menu_eintrag > :first-child { flex: 1 1 auto; }
a.lab_cad_menu_eintrag { text-decoration: none; }
.lab_cad_menu_eintrag:hover { background: var(--alt-div-hover-color); }
.lab_cad_menu_eintrag[aria-disabled="true"],
.lab_cad_menu_eintrag:disabled { opacity: 0.45; cursor: not-allowed; }
.lab_cad_menu_eintrag:disabled:hover { background: transparent; }

.lab_cad_menu_kuerzel {
  flex: none;
  font-family: var(--lab-mono);
  font-size: 0.72rem;
  color: var(--grey600-color);
}

.lab_cad_menu_gruppe {
  margin: 0.4rem 0.6rem 0.15rem;
  font-family: var(--lab-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey600-color);}

.lab_cad_menu_hinweis {
  margin: 0.1rem 0.6rem 0.3rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--grey600-color);
  white-space: normal;
}
.lab_cad_menu_hinweis:empty { display: none; }
.lab_cad_menu_hinweis[hidden] { display: none; }

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

/* ---------------------------------------------------------------
   Werkzeug-Tipp (Blase an der Werkzeugspalte und an den Werkzeugen
   der Skizze) - wie in LabVectorDraw und in LabImageEdit.
   --------------------------------------------------------------- */
.lab_cad_tip {
  position: fixed;
  z-index: 48;
  max-width: 16rem;
  padding: 0.45rem 0.6rem;
  background: var(--ct-color);
  color: var(--blk-color);
  border: var(--lab-border);
  border-radius: 9px;
  box-shadow: var(--lab-shadow-2, var(--lab-shadow-1));
  font-size: 0.82rem;
  line-height: 1.35;
  pointer-events: none;
}
.lab_cad_tip[hidden] { display: none; }
.lab_cad_tip_name { font-weight: 700; }
.lab_cad_tip_kuerzel {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.02rem 0.3rem;
  border: var(--lab-border);
  border-radius: 5px;
  background: var(--alt-div-color);
  font-family: var(--lab-mono);
  font-size: 0.72rem;
  color: var(--grey600-color);
}
.lab_cad_tip_text {
  display: block;
  margin-top: 0.15rem;
  color: var(--grey600-color);
}

/* ---------------------------------------------------------------
   Lösbare Panels
   --------------------------------------------------------------- */

/* Panel-Knopf im Kopf der Seitenleisten-Panels (Lösen/Andocken) */
.lab_cad_panel_knopf {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0.25rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--grey600-color);
  cursor: pointer;
}
.lab_cad_panel_knopf:hover { background: var(--grey100-color); color: var(--blk-color); }
.lab_cad_panel_knopf[aria-pressed="true"] { background: var(--green50-color); color: var(--link-color); }

/* Gelöstes Panel: schwebt über der Seite und lässt sich am Kopf ziehen */
.lab_cad_panel.lab_cad_geloest {
  position: fixed;
  z-index: 46;
  width: 18rem;
  max-height: min(60vh, 32rem);
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 12px;
  box-shadow: var(--lab-shadow-2, var(--lab-shadow-1));
  overflow: hidden;
}
.lab_cad_geloest .lab_cad_panel_kopf { cursor: grab; }
.lab_cad_geloest .lab_cad_panel_kopf:active { cursor: grabbing; }
.lab_cad_geloest .lab_cad_liste { max-height: none; }
.lab_cad_geloest .lab_cad_eig { max-height: calc(min(60vh, 32rem) - 2.4rem); }

/* ---------------------------------------------------------------
   Zoom in der Statuszeile
   --------------------------------------------------------------- */
.lab_cad_zoom {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding-left: 0.3rem;
  border-left: var(--lab-border);
}
.lab_cad_zoom .lab_btn {
  padding: 0.15rem 0.4rem;
  font-size: 0.8rem;
  line-height: 1.2;
}
/* Modus-Umschalter (Objekt / Skizze / Fläche / Kante) */
.lab_cad_modus {
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--grey600-color);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lab_cad_modus:hover { background: var(--alt-div-hover-color); color: var(--blk-color); }
.lab_cad_modus.is_aktiv { background: var(--bt-color); color: var(--bt-f-color); }
.lab_cad_modus[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.lab_cad_modus[aria-disabled="true"]:hover { background: transparent; color: var(--grey600-color); }

/* ---------------------------------------------------------------
   Werkzeugleiste (Fusion-Vorbild): Reiter links, dann Icon-Gruppen
   mit Gruppenname darunter. Ersetzt die fruehere Werkzeugspalte.
   --------------------------------------------------------------- */
.lab_cad_ribbon {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem 0.2rem;
  background: var(--ct-color);
  border-bottom: var(--lab-border);
  overflow-x: auto;
  overflow-y: hidden;
}

/* Reiter wirken wie die Tab-Leiste in Fusion: schlicht, aktiv mit
   Akzentfarbe. Dieselben Knoepfe wie frueher in der Menueleiste. */
.lab_cad_ribbon_reiter { align-items: center; }
.lab_cad_ribbon_reiter .lab_cad_modus { padding: 0.4rem 0.6rem; }

.lab_cad_ribbon_tab {
  display: flex;
  align-items: stretch;
  gap: 0.2rem;
}

.lab_cad_ribbon_gruppe {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.05rem 0.45rem 0;
  border-right: 1px solid var(--lab-border-color);
}
.lab_cad_ribbon_gruppe:last-child { border-right: 0; }

.lab_cad_ribbon_knoepfe {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.lab_cad_ribbon_titel {
  margin: 0.05rem 0 0;
  font-family: var(--lab-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey600-color);
  white-space: nowrap;
}

/* Gruppen-Knopf: Icon auf kleinem Feld, dezent, mit klarer Aktiv- und
   Aus-Zustands-Antwort (AGENTS 2.10: grau statt still). */
.lab_cad_rb {
  width: 2.5rem;
  height: 2.4rem;
  padding: 0.3rem;
  border: 1px solid transparent;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lab_cad_rb:hover { background: var(--alt-div-hover-color); }
.lab_cad_rb.is_aktiv {
  background: var(--bt-color);
  border-color: var(--bt-color);
  color: var(--bt-f-color);
}
.lab_cad_rb[disabled],
.lab_cad_rb[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.lab_cad_rb[disabled]:hover,
.lab_cad_rb[aria-disabled="true"]:hover { background: transparent; }

/* Buehne: nimmt den Rest der Breite, Canvas fuellt sie aus */
.lab_cad_haupt {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  /* Verhindert, dass die Seitenleiste die Buehne unter sich wegdrueckt */
  min-width: 0;
}

/* Buehne: nimmt den Rest der Breite, Canvas fuellt sie aus */
.lab_cad_buehne {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--alt-div-color);
  overflow: hidden;
}

.lab_cad_canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.lab_cad_canvas:focus-visible { outline: 2px solid var(--bt-color); outline-offset: -2px; }

.lab_cad_ladung {
  position: absolute;
  inset: auto 0 50% 0;
  margin: 0;
  text-align: center;
  color: var(--grey600-color);
  pointer-events: none;
}
.lab_cad_ladung[hidden] { display: none; }

/* ---------------------------------------------------------------
   Seitenleiste: Objektliste + Eigenschaften
   --------------------------------------------------------------- */
.lab_cad_seiten {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 17.5rem;
  background: var(--ct-color);
  border-left: var(--lab-border);
  overflow: hidden;
}

/* Die Objektliste waechst mit dem Inhalt, die Eigenschaften bekommen den
   Rest. Sonst schiebt eine lange Liste die Zahlenfelder aus dem Bild. */
.lab_cad_panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: var(--lab-border);
}
.lab_cad_panel:last-child { border-bottom: 0; flex: 1 1 auto; }

.lab_cad_panel_kopf {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-bottom: var(--lab-border);
  background: var(--alt-div-color);
}
.lab_cad_panel_kopf h2 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey600-color);
}
.lab_cad_zahl {
  margin-left: auto;
  font-family: var(--lab-mono);
  font-size: 0.76rem;
  color: var(--grey600-color);
}

.lab_cad_liste {
  list-style: none;
  margin: 0;
  padding: 0.2rem;
  overflow-y: auto;
  max-height: 13rem;
}

/* Reiter der Seitenleiste: nur auf schmalen Fenstern sichtbar, dort
   waerden Objektliste und Eigenschaften nebeneinander zu unbrauchbar. */
.lab_cad_reiter {
  display: none;
  flex: none;
  gap: 0.2rem;
  padding: 0.25rem 0.4rem 0;
  background: var(--alt-div-color);
  border-bottom: var(--lab-border);
}
.lab_cad_reiter_knopf {
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border: 0;
  border-radius: 7px 7px 0 0;
  background: transparent;
  color: var(--grey600-color);
  cursor: pointer;
}
.lab_cad_reiter_knopf.is_aktiv {
  background: var(--ct-color);
  color: var(--blk-color);
  box-shadow: inset 0 -2px 0 var(--bt-color);
}

/* Startknoepfe: wenn noch nichts da ist, geht das Einfuegen auch
   von hier aus - die Werkzeugspalte ist links weit weg. */
.lab_cad_start {
  display: flex;
  gap: 0.25rem;
  padding: 0 0.7rem 0.8rem;
}
.lab_cad_start[hidden] { display: none; }
.lab_cad_start .lab_btn {
  flex: 1 1 0;
  padding: 0.4rem 0.3rem;
  font-size: 0.82rem;
}

/* Vergrößerte Objektliste: die Eigenschaften schrumpfen dann. */
.lab_cad_app.lab_cad_liste_hoch .lab_cad_liste { max-height: 30rem; }
.lab_cad_pane_knopf {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0.25rem;
  margin-left: 0.2rem;
}
.lab_cad_pane_knopf svg { transition: transform 0.15s ease; }
.lab_cad_app.lab_cad_liste_hoch .lab_cad_pane_knopf svg { transform: rotate(180deg); }

.lab_cad_eintrag {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.35rem;
  border-radius: 8px;
  cursor: pointer;
}
.lab_cad_eintrag:hover { background: var(--alt-div-hover-color); }
.lab_cad_eintrag.is_gewaehlt { background: var(--green50-color); }
.lab_cad_eintrag.is_gewaehlt .lab_cad_eintrag_name { color: var(--link-color); font-weight: 600; }

.lab_cad_eintrag_auge {
  flex: none;
  display: inline-flex;
  padding: 0.15rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--grey600-color);
  cursor: pointer;
}
.lab_cad_eintrag_auge:hover { background: var(--grey200-color); color: var(--blk-color); }
.lab_cad_eintrag_auge[aria-pressed="false"] { color: var(--grey400-color); }

.lab_cad_eintrag_symbol { flex: none; color: var(--grey600-color); display: inline-flex; }
.lab_cad_eintrag_name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Gruppen-Marke in der Objektliste: der Koerper haengt an mehreren */
.lab_cad_eintrag_gruppe {
  flex: none;
  padding: 0.05rem 0.32rem;
  border: 1px solid var(--lab-border);
  border-radius: 5px;
  font-family: var(--lab-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey600-color);
  white-space: nowrap;
}
.lab_cad_eintrag.is_gewaehlt .lab_cad_eintrag_gruppe { border-color: var(--link-color); }

.lab_cad_eig {
  padding: 0.5rem 0.7rem 0.9rem;
  overflow-y: auto;
  min-height: 0;
}

.lab_cad_leer {
  margin: 0.3rem 0;
  font-size: 0.85rem;
  color: var(--grey600-color);
}

.lab_cad_namefeld {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  color: var(--grey600-color);
}
.lab_cad_namefeld input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.3rem 0.45rem;
  border: var(--lab-border);
  border-radius: 7px;
  background: var(--div-color);
  color: var(--blk-color);
}

.lab_cad_block_titel {
  margin: 0.7rem 0 0.3rem;
  font-family: var(--lab-mono);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey600-color);
}

.lab_cad_art { margin: 0; font-size: 0.9rem; font-weight: 600; }

.lab_cad_masse { display: flex; flex-direction: column; gap: 0.25rem; }

.lab_cad_achsen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
}
.lab_cad_achsen label,
.lab_cad_masse label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--grey600-color);
}
.lab_cad_achsen label > span { flex: none; width: 0.85rem; font-weight: 600; }
/* Masse-Felder: die Beschriftung braucht ihre natuerliche Breite -
   die alte feste Breite (0,85 rem, fuer X/Y/Z gebaut) liess "Breite"
   bis auf "Bre" verschwinden, und das danebenliegende Eingabefeld
   ueberdeckte den Rest. */
.lab_cad_masse label > span {
  flex: none;
  min-width: 5.3rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Zahlenfelder: feste Spaltenbreite, damit die Dezimalstellen nicht
   abgeschnitten werden und beim Tippen nichts springt. */
.lab_cad_achsen input,
.lab_cad_masse input[type="number"] {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  font: inherit;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  padding: 0.28rem 0.2rem 0.28rem 0.35rem;
  border: var(--lab-border);
  border-radius: 6px;
  background: var(--div-color);
  color: var(--blk-color);
  -moz-appearance: textfield;
}
/* Masse-Felder mit Regler: das Zahlenfeld bekommt eine feste,
   schmale Breite, der Regler nimmt den Rest der Zeile. */
.lab_cad_masse input[type="number"] { flex: 0 0 3.9rem; }
.lab_cad_regler {
  flex: 1 1 2rem;
  min-width: 1.6rem;
  height: 1.15rem;
  margin: 0;
  padding: 0;
  accent-color: var(--bt-color);
}
.lab_cad_achsen input::-webkit-outer-spin-button,
.lab_cad_achsen input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lab_cad_achsen input:focus-visible,
.lab_cad_masse input:focus-visible { border-color: var(--bt-color); }

/* Kombinieren: nur sichtbar, wenn genau zwei Koerper gewaehlt sind */
.lab_cad_rechnen {
  flex: none;
  padding: 0 0.7rem 0.8rem;
  border-top: var(--lab-border);
  background: var(--alt-div-color);
}
.lab_cad_rechnen[hidden] { display: none; }
.lab_cad_knoepfe { display: flex; gap: 0.25rem; }
.lab_cad_knoepfe .lab_btn { flex: 1 1 0; padding: 0.4rem 0.3rem; font-size: 0.82rem; }
.lab_cad_hinweis {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--grey600-color);
}
.lab_cad_hinweis[hidden] { display: none; }

/* Rechnen laeuft: die Knoepfe werden gesperrt, damit niemand
   zweimal klickt und zwei Rechnungen nebeneinander startet. */
.lab_cad_app.is_rechnet .lab_cad_knoepfe { opacity: 0.5; pointer-events: none; }

/* Gesamtgroesse in der Statuszeile - die Zahl, die man vor dem Drucken braucht */
.lab_cad_groesse {
  font-family: var(--lab-mono);
  font-size: 0.78rem;
  color: var(--grey600-color);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   Statuszeile
   --------------------------------------------------------------- */
/* Statuszeile: eine Zeile, links der Werkzeughinweis, rechts Groesse,
   Rasterwahl und Meldung. Die Meldung ist die einzige Stelle, die
   zusaetzlichen Platz braucht - dort steht auch das Ergebnis eines
   Exports. */
.lab_cad_status {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.7rem;
  border-top: var(--lab-border);
  background: var(--ct-color);
  overflow: hidden;
}
.lab_cad_status > p {
  margin: 0;
  flex: 1 1 auto;
  /* Nie auf 0 schrumpfen: sonst verdraengt eine lange Meldung den
     Arbeitshinweis restlos aus der Leiste (Befund 03.10.). */
  min-width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab_cad_status_rechts {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
}

.lab_cad_rasterwahl {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--grey600-color);
}
.lab_cad_rasterwahl select {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.2rem 0.3rem;
  border: var(--lab-border);
  border-radius: 6px;
  background: var(--div-color);
  color: var(--blk-color);
}

/* Die Meldung weicht dem Hinweis: sie ist der kuerzere Text und
   verschwindet nach einigen Sekunden von selbst. */
.lab_cad_meldung {
  font-size: 0.85rem;
  color: var(--link-color);
  white-space: nowrap;
  max-width: 30rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lab_cad_meldung:empty { display: none; }

/* ---------------------------------------------------------------
   Dialoge (Hilfe, Rueckfrage)
   --------------------------------------------------------------- */
.lab_cad_schleier {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--lab-cad-schleier);
}
.lab_cad_versteckt { display: none; }

.lab_cad_dialog {
  width: min(34rem, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 0 0 0.9rem;
  background: var(--ct-color);
  color: var(--blk-color);
  border-radius: 14px;
  box-shadow: var(--lab-shadow-2);
}
.lab_cad_dialog_schmal { width: min(24rem, 100%); }
/* Zeichnungs-Dialog: breiter, Steuerung links und Blatt-Vorschau rechts;
   auf schmalen Schirmen wickelt die Reihe untereinander */
.lab_cad_dialog_zeichnung { width: min(52rem, 100%); }
.lab_cad_zeichnung_gitter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.4rem 0.9rem 0;
}
.lab_cad_zeichnung_steuer {
  flex: 0 1 13.5rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lab_cad_zeichnung_steuer .lab_cad_auswahl { margin: 0; }
.lab_cad_zeichnung_steuer .lab_cad_feld { margin: 0; }
.lab_cad_zeichnung_steuer > label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}
.lab_cad_zeichnung_buehne {
  flex: 1 1 20rem;
  min-width: 0;
  border: 1px solid var(--lab-border);
  border-radius: 8px;
  background: var(--div-color);
  overflow: hidden;
}
.lab_cad_zeichnung_buehne svg {
  display: block;
  width: 100%;
  height: auto;
}
.lab_cad_zeichnung_buehne .lab_cad_leer {
  padding: 2.2rem 1rem;
  text-align: center;
  color: var(--grey600-color);
  font-size: 0.9rem;
}

/* Vorschaubild im Projekt-oeffnen-Dialog */
.lab_cad_vorschau_bild {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.5rem 0 0.2rem;
  border: 1px solid var(--lab-border);
  border-radius: 8px;
  background: var(--div-color);
}

.lab_cad_dialog_kopf {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: var(--ct-color);
  border-bottom: var(--lab-border);
}
.lab_cad_dialog_kopf h2 { margin: 0; font-size: 1.02rem; }
.lab_cad_dialog_kopf .lab_btn { margin-left: auto; }

.lab_cad_dialog > h2 { margin: 0.8rem 0.9rem 0.2rem; font-size: 1.02rem; }

.lab_cad_hilfe_gruppe { border-bottom: var(--lab-border); }
.lab_cad_hilfe_gruppe > summary {
  padding: 0.55rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.lab_cad_hilfe_gruppe > summary::-webkit-details-marker { display: none; }
.lab_cad_hilfe_gruppe > summary::before {
  content: "▸";
  display: inline-block;
  width: 1rem;
  color: var(--grey600-color);
}
.lab_cad_hilfe_gruppe[open] > summary::before { content: "▾"; }

.lab_cad_merk { margin: 0 0.9rem 0.7rem; font-size: 0.9rem; line-height: 1.5; }
.lab_cad_merk strong { color: var(--bt-color); }

.lab_cad_kurztasten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.25rem 0.6rem;
  margin: 0 0.9rem 0.8rem;
  font-size: 0.85rem;
  color: var(--grey600-color);
}
.lab_cad_kurztasten kbd {
  display: inline-block;
  padding: 0.05rem 0.32rem;
  border: var(--lab-border);
  border-radius: 5px;
  background: var(--alt-div-color);
  font-family: var(--lab-mono);
  font-size: 0.8rem;
  color: var(--blk-color);
}

/* Der Fuss bleibt am unteren Rand des Dialogs stehen: in hohen
   Dialogen (Hilfe, Text auf Flaeche) lagen Abbrechen und Anwenden
   sonst unterhalb des sichtbaren Bereichs. */
.lab_cad_dialog_fuss {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem 0.9rem;
  background: var(--ct-color);
  border-top: 1px solid var(--lab-border-color);
}
.lab_cad_dialog_fuss .lab_btn { margin-left: 0.4rem; }
.lab_cad_dialog_fuss .lab_btn:first-child { margin-left: 0; }

/* ---------------------------------------------------------------
   Farben: Palette, freies Feld, Farbpunkt in der Liste
   --------------------------------------------------------------- */
/* Die Felder der Palette werden in app.js aus FARBPALETTE gebaut; jeder
   Punkt traegt seine Farbe in --lab-cad-feld. Die Schachbrettkachel
   darunter zeigt, dass Weiss/Transparent anders ist als "keine Farbe". */
.lab_cad_farbwahl {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.1rem 0 0.2rem;
}

.lab_cad_farbfeld {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--lab-border-color);
  border-radius: 6px;
  background: var(--lab-cad-feld, var(--div-color));
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lab_cad_farbfeld:hover { transform: translateY(-1px); box-shadow: var(--lab-shadow-1); }
.lab_cad_farbfeld.is_aktiv {
  box-shadow: 0 0 0 2px var(--bt-color);
  border-color: var(--bt-color);
}
.lab_cad_farbfeld:focus-visible { outline: 2px solid var(--bt-color); outline-offset: 1px; }

/* Weisses Feld: Schachbrettkanten, damit es nicht wie ein Loch aussieht */
.lab_cad_farbfeld[data-farbe="#FFFFFF"] {
  background:
    linear-gradient(135deg, var(--lab-border-color) 0 50%, transparent 50% 100%)
      0 0 / 8px 8px,
    var(--lab-cad-feld);
}

.lab_cad_farbzeile {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.1rem;
}

.lab_cad_farbfrei {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--grey600-color);
  cursor: pointer;
}
/* Das native Farbfeld: rund und ohne Rahmen, damit es in die Zeile passt */
.lab_cad_farbfrei input[type="color"] {
  width: 2.2rem;
  height: 1.7rem;
  padding: 0;
  border: var(--lab-border);
  border-radius: 7px;
  background: var(--div-color);
  cursor: pointer;
}

.lab_cad_farbzeile .lab_btn {
  margin-left: auto;
  padding: 0.35rem 0.6rem;
  font-size: 0.82rem;
}

/* Farbpunkt in der Objektliste */
.lab_cad_eintrag_farbe {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid var(--lab-border-color);
  border-radius: 50%;
  background: var(--lab-cad-feld, var(--div-color));
}

/* ---------------------------------------------------------------
   Skizzen: Objektliste, Eigenschaften
   --------------------------------------------------------------- */

/* Eckenzahl des Vielecks: kleines Feld in der Zeichnen-Gruppe */
.lab_cad_eckenfeld { display: block; width: 3.4rem; padding: 0 0.1rem; }
.lab_cad_eckenfeld input {
  width: 100%;
  font: inherit;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 0.2rem 0.1rem;
  border: var(--lab-border);
  border-radius: 6px;
  background: var(--div-color);
  color: var(--blk-color);
}

/* Ueberschrift ueber der Skizzenliste */
.lab_cad_liste_titel {
  margin: 0.5rem 0.5rem 0.15rem;
  font-family: var(--lab-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey600-color);
}
.lab_cad_liste_titel[hidden] { display: none; }
.lab_cad_liste_skizzen { max-height: 9rem; }

/* Kleine Zustandszeile rechts in einem Listeneintrag ("2 geschlossen") */
.lab_cad_eintrag_stand {
  flex: none;
  font-family: var(--lab-mono);
  font-size: 0.66rem;
  color: var(--grey600-color);
}
.lab_cad_eintrag.is_gewaehlt .lab_cad_eintrag_stand { color: var(--link-color); }
.lab_cad_eintrag_skizze .lab_cad_eintrag_symbol { color: var(--lab-cad-skizze); }

/* Felder in den Dialogen: Beschriftung, Feld, Einheit in einer Zeile */
.lab_cad_feld {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.9rem 0.5rem;
  font-size: 0.88rem;
  color: var(--grey600-color);
}
.lab_cad_feld > span:first-child { flex: none; width: 6.5rem; }
.lab_cad_feld input,
.lab_cad_feld select {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  padding: 0.32rem 0.45rem;
  border: var(--lab-border);
  border-radius: 7px;
  background: var(--div-color);
  color: var(--blk-color);
}
.lab_cad_einheit { flex: none; font-size: 0.82rem; }

/* Material-Wahl (Gewichtsschaetzung) im Eigenschaften-Panel:
   Beschriftung und Kasten in einer Zeile, wie die Dialogfelder. */
.lab_cad_material_zeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.2rem 0 0.4rem;
  font-size: 0.88rem;
}
.lab_cad_material_beschriftung { flex: none; color: var(--grey600-color); }
.lab_cad_material_zeile select {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.28rem 0.4rem;
  border: var(--lab-border);
  border-radius: 7px;
  background: var(--div-color);
  color: var(--blk-color);
}

/* Auswahl (Radioknoepfe) in den Dialogen */
.lab_cad_auswahl {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.2rem 0.9rem 0.6rem;
  padding: 0.5rem 0.6rem;
  border: var(--lab-border);
  border-radius: 9px;
}
/* Die Flex-Regel oben ueberstimmt das [hidden] des Browsers - ohne diese
   Zeile bliebe ein per hidden ausgeblendetes Feld trotzdem sichtbar. */
.lab_cad_auswahl[hidden] { display: none; }
.lab_cad_auswahl legend {
  padding: 0 0.3rem;
  font-family: var(--lab-mono);
  font-size: 0.64rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey600-color);
}
.lab_cad_auswahl label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
}

/* Ebene und Versatz der Skizze untereinander */
.lab_cad_ebenenfelder {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.lab_cad_ebenenfelder label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--grey600-color);
}
.lab_cad_ebenenfelder label > span:first-child { flex: none; width: 3.6rem; }
.lab_cad_ebenenfelder select,
.lab_cad_ebenenfelder input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  padding: 0.28rem 0.35rem;
  border: var(--lab-border);
  border-radius: 7px;
  background: var(--div-color);
  color: var(--blk-color);
}


/* Datei auf die Buehne ziehen */
.lab_cad_buehne.is_ueber { outline: 2px dashed var(--bt-color); outline-offset: -6px; }

/* Schnittansicht: kleine Bedienleiste oben links auf der Buehne. */
.lab_cad_schnitt_leiste {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  max-width: calc(100% - 1.4rem);
  padding: 0.45rem 0.6rem;
  border: var(--lab-border);
  border-radius: 9px;
  background: var(--lab-toolbar-bg, var(--ct-color));
  box-shadow: var(--lab-shadow-1);
  font-size: 0.82rem;
}
.lab_cad_schnitt_leiste[hidden] { display: none; }
.lab_cad_schnitt_titel {
  font-family: var(--lab-mono);
  font-size: 0.64rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey600-color);
}
.lab_cad_schnitt_achse { display: flex; gap: 2px; }
.lab_cad_schnitt_achsenknopf {
  min-width: 1.7rem;
  padding: 0.16rem 0.3rem;
  border: var(--lab-border);
  border-radius: 6px;
  background: var(--div-color);
  color: var(--blk-color);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.lab_cad_schnitt_achsenknopf.is_aktiv {
  background: var(--bt-color);
  border-color: var(--bt-color);
  color: var(--bt-f-color);
}
.lab_cad_schnitt_lage { display: flex; align-items: center; gap: 0.35rem; color: var(--grey600-color); }
.lab_cad_schnitt_lage input[type="range"] { width: 8rem; }
.lab_cad_schnitt_wert {
  min-width: 2.6rem;
  font-variant-numeric: tabular-nums;
  color: var(--blk-color);
}

/* Die Statuszeile traegt in der Skizze laengere Angaben - sie darf
   umbrechen statt zu verschwinden. */
.lab_cad_status p { min-width: 0; }

/* ---------------------------------------------------------------
   Schmale Fenster: Werkzeugspalte waagerecht ueber der Buehne,
   Seitenleiste unter der Buehne
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   Schmale Fenster (Handy): Werkzeugspalte waagerecht ueber der
   Buehne, Objektliste und Eigenschaften als Reiter darunter.

   Die Seitenleiste wird nicht zweispaltig gestapelt - auf 400 px
   bleiben davon nur noch 200 px je Spalte, die Objektliste wird dann
   unbrauchbar schmal. Stattdessen: ein Reiter, darunter genau ein
   Panel in voller Breite. Das ist auf dem Handy die einzige Variante,
   in der sich Zahlen eintippen lassen.
   --------------------------------------------------------------- */
@media (max-width: 60rem) {
  .lab_cad_haupt { flex-direction: column; }

  /* Die Werkzeugleiste wird zur wischbaren Reihe (der horizontale
     Scrollbalken kommt von .lab_cad_ribbon selbst). */
  .lab_cad_buehne { flex: 1 1 auto; min-height: 14rem; }

  .lab_cad_seiten {
    width: auto;
    flex: none;
    flex-direction: column;
    max-height: 15rem;
    border-left: 0;
    border-top: var(--lab-border);
  }

  /* Reiterzeile: nur auf schmalen Fenstern sichtbar */
  .lab_cad_reiter { display: flex; }
  .lab_cad_seiten .lab_cad_panel { display: none; }
  .lab_cad_seiten .lab_cad_panel.is_zeigen { display: flex; }
  .lab_cad_seiten .lab_cad_panel:last-child { border-bottom: 0; }
  /* Die Panel-Ueberschriften uebernehmen die Reiterzeile - doppelt
     waere nur eine Zeile ohne Nutzen. Der Knopf in der Objektliste
     bleibt sichtbar. */
  .lab_cad_seiten .lab_cad_panel_kopf {
    padding: 0.2rem 0.5rem;
    border-bottom: 0;
    background: transparent;
  }
  .lab_cad_seiten .lab_cad_panel_kopf h2 { display: none; }
  .lab_cad_liste { max-height: none; }
  .lab_cad_achsen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sehr schmale Fenster: die Zahlenfelder brauchen mehr Platz, also
   wieder zwei Spalten statt drei. Die Statuszeile bleibt eine Zeile,
   nur die Gesamtgroesse weicht einer Rasterwahl ohne Text. */
/* ---------------------------------------------------------------
   Die Werkzeugleiste umbrechen statt zu schieben

   Der Inhalt der Leiste ist rund 1470 px breit. Schmaler waere sie nur
   durch Querscrollen zu bedienen - und der Scrollbalken sagt nichts
   davon, dass es weitergeht: bei 390 px Bildschirm war genau 1 von 25
   Knoepfen zu sehen, die Grundkoerper lagen vollstaendig ausserhalb.
   Darum bricht die Leiste unterhalb ihrer Inhaltsbreite um: Reiter in
   eine eigene Zeile, Gruppen darunter, alles erreichbar. Ab 92 rem
   passt sie in eine Zeile und bleibt wie bisher.

   (Eigener Block, weil die Anordnung der Seite erst bei 60 rem
   umbricht - das ist eine andere Frage.)
   --------------------------------------------------------------- */
@media (max-width: 92rem) {
  .lab_cad_ribbon {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 0.15rem;
  }
  .lab_cad_ribbon_reiter { flex: 1 0 100%; }
  .lab_cad_ribbon_tab { flex-wrap: wrap; }
  /* Beim Umbruch steht die Trennlinie am Ende einer Zeile nicht allein */
  .lab_cad_ribbon_gruppe:not(:last-child) { border-right: 1px solid var(--lab-border-color); }
}

@media (max-width: 30rem) {
  .lab_cad_achsen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab_cad_groesse { font-size: 0.7rem; }
  .lab_cad_status { gap: 0.4rem; padding: 0.25rem 0.5rem; }
  .lab_cad_status p { font-size: 0.78rem; }
  .lab_cad_status_rechts { gap: 0.4rem; }
  .lab_cad_rasterwahl select { padding: 0.15rem 0.2rem; font-size: 0.78rem; }
  /* Auf dem Handy bricht die Meldung auf eine eigene Zeile um, statt
     den Hinweis zu verdraengen. */
  .lab_cad_status { flex-wrap: wrap; }
  .lab_cad_status > p { flex: 1 0 100%; }
  .lab_cad_meldung { max-width: 100%; white-space: normal; }
}

/* Groessere Touch-Ziele auf Touch-Geraeten */
@media (pointer: coarse) {
  .lab_cad_rb { width: 2.9rem; height: 2.8rem; }
  .lab_cad_modus { padding: 0.6rem 0.85rem; }
  .lab_cad_achsen input,
  .lab_cad_masse input,
  .lab_cad_namefeld input { min-height: 2rem; font-size: 0.95rem; }
  .lab_cad_masse label > span { min-width: 4.6rem; }
  .lab_cad_masse input[type="number"] { flex: 0 0 3.6rem; }
}

/* ---------------------------------------------------------------------
   Kontextmenue (rechte Maustaste auf der Buehne oder in der Objektliste)

   Es benutzt die Klassen des Menue-Balkens (.lab_cad_menu_eintrag usw.),
   damit beide gleich aussehen. Die Eintraege werden zur Laufzeit aus den
   Menue-Punkten erzeugt - Beschriftung, Kuerzel und Grau-Zustand kommen
   von dort, damit nichts auseinanderlaufen kann.
   --------------------------------------------------------------------- */
.lab_cad_kontext {
  position: fixed;
  z-index: 70;
  min-width: 15rem;
  max-width: min(22rem, calc(100vw - 1rem));
  padding: 0.3rem;
  border: var(--lab-border);
  border-radius: 10px;
  background: var(--ct-color);
  box-shadow: var(--lab-shadow-2, var(--lab-shadow-1));
}
.lab_cad_kontext.lab_cad_versteckt { display: none; }

.lab_cad_kontext_titel {
  margin: 0 0 0.3rem;
  padding: 0.1rem 0.7rem 0.35rem;
  border-bottom: 1px solid var(--lab-border);
  font-family: var(--lab-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey600-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lab_cad_kontext_titel:empty { display: none; }