/* <cw-widget-designer-overlay> — Port WidgetDesignerView.vue (SPEC-0132).
   Drei-Spalten-Designersicht, read-only. Token-only (--core-*), Light DOM,
   kein Shadow DOM. */
/* Der Designer ist ein normales Overlay IN der Shell-Inhaltsfläche, kein
   frei schwebender Kasten. Der Bestand konnte `position: absolute; inset:
   16px 24px 24px 88px` verwenden, weil dort ein positionierter Container
   unterhalb der Kopfleiste und rechts der 88px-Werkzeugleiste lag. Hier ist
   der nächste positionierte Vorfahre die App-Wurzel (position: fixed), die
   Maße bezogen sich also auf das FENSTER: der Dialog legte sich über die
   Kopfleiste und wurde unten abgeschnitten. Die Shell setzt Rand und
   Scrollverhalten bereits (.vc-shell-view), hier genügt volle Höhe. */
.cw-widget-designer-overlay {
  height: 100%;
  min-width: 0;
  background: var(--core-surface, var(--surface));
  color: var(--core-text, var(--text));
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--core-radius-lg, 8px);
  box-shadow: var(--core-shadow-card, var(--shadow-card));
  /* HÖHENKETTE: die Zeilenliste setzte voraus, dass Fehler-, Meldungs- und
     Ladezeile immer Rasterkinder stellen. Sie sind bedingt — ohne sie rutscht
     `.wd-body` in die zweite `auto`-Zeile und schrumpft auf Inhaltshöhe,
     während die `1fr`-Zeile leer darunter steht. Derselbe Fund wie im
     3D-Baukasten (asset3d-baukasten.css). Flex-Spalte statt Positionsraster:
     die Höhe hängt an der Struktur, nicht an der Anzahl sichtbarer Zeilen. */
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ---- Kopfzeile --------------------------------------------------------- */
.wd-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--core-border, var(--border));
}
.wd-header__title { display: flex; align-items: center; gap: 8px; }
.wd-header__title h2 { margin: 0; font-size: 17px; }
.wd-header__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.wd-metrics { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-metric {
  display: grid;
  gap: 2px;
  min-width: 82px;
  padding: 6px 10px;
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--core-radius-md, 6px);
  background: var(--core-surface-elevated, var(--surface-elevated));
}
.wd-metric__label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--core-text-muted, var(--text-muted));
}
.wd-metric__value { font-size: 16px; font-weight: 700; }

/* ---- Drei-Spalten-Körper ----------------------------------------------
   Spaltenmaße GEMESSEN aus dem Bestand (WidgetDesignerView.vue:747-748 und
   die Vorlage aus Zeile 921): 300px links, 360px rechts, dazwischen
   `minmax(520px, 1fr)`. Prozentbreiten wie zuvor (24 %/32 %) fressen auf
   breiten Schirmen die Designfläche — genau das Gegenteil der Absicht, denn
   der Bestand sichert der Fläche ausdrücklich mindestens 520px zu.
   Das Einklappen der Seitenspalten ist portiert — die Spaltenmaße kommen dann
   aus `panelGridStyle()` als Inline-Stil (eingeklappt 52px, Regeln weiter
   unten bei `.wd-column.is-collapsed`); die Werte hier sind der Ausgangs-
   zustand vor der ersten Zustellung dieses Inline-Stils. */
.wd-body {
  flex: 1;
  min-height: 0;
  display: grid;
  /* SPEC-0724 Etappe 6: die Masse kommen als --wd-left/--wd-right aus
     panelGridStyle() (vorher ein fertiges grid-template-columns als Inline-
     Stil, gegen das keine Media-Query ankam); die Rueckfallwerte sind die
     Bestandsmasse 300/360. Das Gitter selbst gehoert damit dem Stylesheet. */
  grid-template-columns: var(--wd-left, 300px) minmax(520px, 1fr) var(--wd-right, 360px);
  gap: 12px;
  padding: 12px;
}

/* ---- Tablet (SPEC-0724 Etappe 6, B7) ------------------------------------
 *
 * GEMESSEN (2026-08-20, iPad Pro hoch 1024 px und iPad quer 1194 px): drei
 * Spalten 300 + 520 + 360 plus Abstaende sind 1232 px — die Eigenschaften-
 * Spalte wurde rechts abgeschnitten (bei 1024 px waren 168 von 360 px
 * sichtbar). Unter 1180 px traegt das Gitter deshalb ZWEI Spalten (Katalog |
 * Designflaeche), und die Eigenschaften-Spalte liegt als LADE rechts ueber der
 * Designflaeche; der vorhandene Klapp-Knopf (») faehrt sie auf 52 px ein.
 * Zeichenflaeche 1280x720 und Formulare bleiben unveraendert; ab 1200 px
 * greift nichts davon (SPEC-0724 Etappe 7: dieselbe Schwelle wie Seitenleiste
 * und Kopfleiste — EINE Tablet-Zone; Waechter ShellBreakpointTest). */
@media (max-width: 1199px) {
  .cw-widget-designer-overlay .wd-body {
    position: relative;
    grid-template-columns: var(--wd-left, 300px) minmax(0, 1fr);
  }

  .cw-widget-designer-overlay .wd-column--right {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: min(360px, calc(100% - 24px));
    z-index: 5;
    background: var(--core-surface, var(--surface));
    border-left: 1px solid var(--core-border, var(--border));
    box-shadow: var(--shadow-overlay, var(--shadow-card));
  }

  .cw-widget-designer-overlay .wd-column--right.is-collapsed {
    width: 52px;
  }
}
.wd-column {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 12px;
}

.wd-section {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--core-radius-lg, 8px);
  background: var(--core-surface-elevated, var(--surface-elevated));
}
.wd-section__head { display: flex; align-items: center; gap: 8px; }
.wd-section__head h3 { margin: 0; font-size: 13px; }
.wd-section__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-accent {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--core-accent, var(--accent));
}
.wd-hint { margin: 0; font-size: 12px; color: var(--core-text-muted, var(--text-muted)); }

/* ---- Listen ------------------------------------------------------------ */
.wd-catalog-row { display: flex; align-items: center; gap: 6px; }
.wd-catalog-row .wd-list-item { flex: 1; }
.wd-list-item {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 6px 8px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--core-radius-md, 6px);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.wd-list-item:hover { background: var(--core-surface-hover, var(--surface-hover)); }
.wd-list-item.is-active,
.wd-catalog-row.is-active .wd-list-item {
  border-color: var(--core-accent, var(--accent));
  background: var(--core-surface-hover, var(--surface-hover));
}
.wd-list-item__name { font-size: 13px; font-weight: 600; }
.wd-list-item__meta { font-size: 11px; color: var(--core-text-muted, var(--text-muted)); }

.wd-layer-group { display: grid; gap: 2px; }
.wd-layer-child {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  padding-left: 20px;
  cursor: default;
}
.wd-layer-child .material-icons { font-size: 14px; color: var(--core-text-muted, var(--text-muted)); }

/* ---- Formulare / Eigenschaften ---------------------------------------- */
.wd-form,
.wd-prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.wd-field { display: grid; gap: 3px; min-width: 0; }
.wd-field--wide { grid-column: 1 / -1; }
.wd-field > span {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--core-text-muted, var(--text-muted));
}
.wd-field input,
.wd-field select,
.wd-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 7px;
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--core-radius-sm, 4px);
  background: var(--core-surface, var(--surface));
  color: var(--core-text, var(--text));
  font: inherit;
  font-size: 12px;
}
.wd-field input[readonly],
.wd-field textarea[readonly] { color: var(--core-text-muted, var(--text-muted)); }
.wd-field textarea { font-family: var(--core-font-mono, monospace); resize: vertical; }

.wd-prop-group {
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--core-radius-md, 6px);
  padding: 6px 8px;
}
.wd-prop-group > summary { cursor: pointer; font-size: 12px; font-weight: 600; }
.wd-prop-group > .wd-prop-grid { margin-top: 8px; }

.wd-part-styles { margin-top: 8px; display: grid; gap: 4px; }
.wd-part-styles h5 { margin: 0; font-size: 11px; color: var(--core-text-muted, var(--text-muted)); }
.wd-part-row {
  display: grid;
  grid-template-columns: 70px repeat(4, 1fr);
  gap: 6px;
  font-size: 11px;
  color: var(--core-text-muted, var(--text-muted));
}
.wd-part-row__label { font-weight: 600; color: var(--core-text, var(--text)); }

/* ---- Canvas ------------------------------------------------------------ */
.wd-section--canvas { min-height: 0; }
/* Die linke Gruppe der Werkzeugleiste (Breakpoints, Clean-Preview-Schalter,
 * Hinweis). Sie darf SCHRUMPFEN und intern umbrechen — sonst schiebt der
 * Hinweistext die Zoom-/Aktionsknoepfe rechts aus der Zeile. */
.wd-breakpoints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 1 auto;
}
.wd-canvas-wrap {
  min-height: 220px;
  overflow: auto;
  padding: 12px;
  border: 1px dashed var(--core-border, var(--border));
  border-radius: var(--core-radius-lg, 8px);
  background: var(--core-surface, var(--surface));
}

.wd-rules { display: grid; gap: 6px; }
.wd-rules h4 { margin: 0; font-size: 12px; }
.wd-rule-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr) auto;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

/* ---- Legende / Platzhalter --------------------------------------------- */
.wd-legend { display: grid; gap: 4px; font-size: 12px; }
.wd-legend__item { display: flex; align-items: center; gap: 8px; }
.wd-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--core-border, var(--border));
}
.wd-legend__swatch--object { background: var(--core-accent, var(--accent)); }
.wd-legend__swatch--slot { background: var(--core-info, var(--info)); }
.wd-legend__swatch--technical { background: var(--core-text-muted, var(--text-muted)); }

.wd-placeholder-group { display: grid; gap: 3px; margin-bottom: 6px; }
.wd-placeholder-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.wd-placeholder-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.wd-placeholder-row__label { color: var(--core-text, var(--text)); }
.wd-placeholder-row code {
  font-family: var(--core-font-mono, monospace);
  color: var(--core-text-muted, var(--text-muted));
}

/* ---- Preview / Validierung -------------------------------------------- */
.wd-preview-bindings > summary { cursor: pointer; font-size: 12px; font-weight: 600; }
.wd-preview-item { display: grid; gap: 2px; margin-top: 6px; font-size: 11px; }
.wd-preview-field { color: var(--core-text-muted, var(--text-muted)); }

.wd-validation { display: grid; gap: 4px; font-size: 12px; }
.wd-validation__errors { margin: 0; color: var(--core-danger, var(--danger)); }
.wd-validation__warnings { margin: 0; color: var(--core-warning, var(--warning)); }

/* ---- Kontrollpfad: Templates, Diff, KI-Assist (SPEC-0144) ------------- */
.wd-template-industries { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }

/* ---- Template-Thumbnail (SPEC-0514) -----------------------------------
 *
 * Das Kastenmass 208x124 ist Vertrag mit `TEMPLATE_THUMBNAIL_BOX`
 * (app/widget-designer.js): dort wird der Skalierungsfaktor daraus gerechnet.
 * Wer hier eine Zahl ändert, ändert sie dort mit — sonst ragt die Leinwand
 * heraus oder steht zu klein im Kasten.
 */
.wd-template-thumb {
  display: grid;
  gap: 4px;
  justify-items: center;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--core-radius-md, 6px);
  background: var(--core-surface-sunken, var(--control-bg));
}
.wd-template-thumb__stage {
  display: grid;
  place-items: center;
  width: 208px;
  max-width: 100%;
  height: 124px;
  overflow: hidden;
  border-radius: var(--core-radius-sm, 4px);
  /* Die Vorschau ist ein Bild, kein Bedienelement — sie faengt keine Klicks. */
  pointer-events: none;
}
/* Custom Elements sind display:inline — ohne diese Zeile kollabiert der Kasten. */
.wd-template-thumb__canvas { display: block; }
.wd-template-thumb__empty {
  font-size: 11px;
  color: var(--core-text-muted, var(--text-muted));
}
.wd-template-thumb__caption {
  display: grid;
  gap: 1px;
  justify-items: center;
  text-align: center;
  max-width: 100%;
}
.wd-template-thumb__name {
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.wd-template-thumb__meta {
  font-size: 10px;
  color: var(--core-text-muted, var(--text-muted));
}

.wd-diff { display: grid; gap: 4px; margin-top: 8px; }
.wd-diff h4 { margin: 0; font-size: 12px; }
.wd-diff-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.wd-diff-row code { font-family: var(--core-font-mono, monospace); }
.wd-diff-row--added { background: var(--core-success-soft, rgba(46, 160, 67, 0.12)); }
.wd-diff-row--removed { background: var(--core-danger-soft, rgba(207, 34, 46, 0.12)); }
.wd-diff-row--changed { background: var(--core-warning-soft, rgba(210, 153, 34, 0.12)); }

.wd-ai-suggestion {
  display: grid;
  gap: 2px;
  font-size: 11px;
  padding: 4px 0;
  border-bottom: 1px solid var(--core-border, var(--border));
}
.wd-ai-suggestion code { font-family: var(--core-font-mono, monospace); }

/* ===================================================== Editor-Laufzeit =====
 * Palette, editierbare Designfläche, Auswahl-/Größenanfasser und die
 * Regelzeilen. Diese Regeln kamen mit der Editor-Welle dazu; vorher war der
 * Designer eine reine Anzeige und brauchte sie nicht.
 */

/* --- Komponenten-Palette (Bestand: zwei Spalten) ------------------------- */
.wd-palette-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.wd-palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: grab;
  color: var(--core-text, var(--text));
  background: var(--core-surface, var(--surface));
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--radius-control, 8px);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
}

.wd-palette-item:hover:not(:disabled) {
  border-color: var(--core-color-accent-blue, var(--primary));
  background: var(--primary-soft);
}

.wd-palette-item:disabled { opacity: 0.45; cursor: not-allowed; }
.wd-palette-item:active:not(:disabled) { cursor: grabbing; }

.wd-palette-icon {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--core-surface-elevated, var(--surface-elevated));
  border: 1px solid var(--core-border, var(--border));
  font-size: 0.72rem;
  font-weight: 700;
}

/* --- Werkzeugleiste der Designfläche ------------------------------------ */
.wd-canvas-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
}

.wd-toolbar-spacer { flex: 1 1 auto; }

/* Rechte Gruppe der Werkzeugleiste (Zoom, Historie, Ausrichten, Loeschen) —
 * Gegenstueck zu .panel-actions im Bestand. Sie bleibt zusammen und wandert
 * als Block in die naechste Zeile, statt einen einzelnen Knopf abzuhaengen. */
.wd-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Hinweistext neben dem Clean-Preview-Schalter (Bestand .toolbar-hint). */
.wd-toolbar-hint {
  font-size: 12px;
  color: var(--core-text-muted, var(--text-muted));
}

/* `.wd-toolbar-sep` ist ENTFALLEN: der Bestand hat in dieser Leiste keinen
 * Trenner, er gruppiert die Zoom-Knoepfe stattdessen in `.zoom-controls`. */

/* Zoom-Gruppe der Werkzeugleiste (Bestand .zoom-controls). */
.wd-zoom-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wd-chip {
  padding: 4px 10px;
  cursor: pointer;
  color: var(--core-text, var(--text));
  background: var(--core-surface, var(--surface));
  border: 1px solid var(--core-border, var(--border));
  border-radius: 999px;
  font: inherit;
  font-size: 0.78rem;
}

.wd-chip.is-on {
  border-color: var(--core-color-accent-blue, var(--primary));
  background: var(--primary-soft);
}

.wd-chip:disabled { opacity: 0.45; cursor: not-allowed; }

.wd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  cursor: pointer;
  color: var(--core-text, var(--text));
  background: var(--core-surface, var(--surface));
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--radius-control, 8px);
  font: inherit;
  line-height: 1;
}

.wd-icon-btn:hover:not(:disabled) {
  border-color: var(--core-color-accent-blue, var(--primary));
  background: var(--primary-soft);
}

.wd-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wd-icon-btn--danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.wd-zoom-value { min-width: 52px; font-variant-numeric: tabular-nums; }

/* Symbolgroesse der Werkzeugleiste — ohne diese Regel rendert material-icons
 * in seiner Vorgabegroesse (24px) und sprengt den 30px-Knopf. */
.wd-icon-btn .material-icons { font-size: 18px; line-height: 1; }

/* --- Designfläche -------------------------------------------------------- */
.wd-canvas-wrap {
  position: relative;
  overflow: auto;
  min-height: 420px;
  max-height: 62vh;
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--radius-card, 12px);
  background: var(--core-surface, var(--surface));
}

/* Rasterhintergrund wie im Bestand; die Knoten liegen absolut darauf. */
.wd-canvas {
  position: relative;
  width: 1280px;
  height: 720px;
  background-image:
    linear-gradient(to right, var(--core-border, var(--border)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--core-border, var(--border)) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: -1px -1px;
}

/* Der echte Renderer als Unterlage; die Klickziele liegen darueber. */
.wd-canvas-underlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.wd-canvas-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  pointer-events: none;
}

/* Knoten = DURCHSICHTIGES Klickziel. Kein Hintergrund, keine Farbe: der
   Inline-Stil traegt hier nur Geometrie (siehe nodeGeometryStyle), sonst
   verdeckt das Ziel die Unterlage. */
.wd-node {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  border: 1px dashed transparent;
  border-radius: 4px;
  cursor: move;
}

.wd-node:hover { border-color: var(--core-color-accent-blue, var(--primary)); }

.wd-node.is-selected {
  border-style: solid;
  border-color: var(--core-color-accent-blue, var(--primary));
  box-shadow: 0 0 0 2px var(--primary-soft);
}

/* `.wd-node-tag` ist ENTFALLEN: die Fahne blendete beim Ueberfahren oder
 * Auswaehlen den Knotennamen ueber die WYSIWYG-Unterlage. Auf Klickzielen, die
 * ueber leeren Stellen der Flaeche liegen, las sich das wie ein Platzhalter des
 * Widgets, ohne einer zu sein. Der Bestand haelt `.canvas-node` leer; der Name
 * steht jetzt im `title` des Klickziels und in der Layer-Liste. */

/* Größenanfasser an den vier Ecken. */
.wd-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--core-color-accent-blue, var(--primary));
  border: 1px solid var(--core-surface, var(--surface));
  border-radius: 2px;
}

.wd-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }
.wd-handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }
.wd-handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.wd-handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }

/* --- Regeln -------------------------------------------------------------- */
.wd-rules-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wd-rule-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}

.wd-rule-row select,
.wd-rule-row input {
  min-width: 0;
  padding: 4px 6px;
  color: var(--control-text, inherit);
  background: var(--control-bg, transparent);
  border: 1px solid var(--control-border, currentColor);
  border-radius: var(--radius-control, 6px);
  font: inherit;
  font-size: 0.8rem;
}

/* --- Eigenschaften ------------------------------------------------------- */
.wd-style-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 0.78rem;
  color: var(--core-text-muted, var(--text-muted));
}

.wd-field--check {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.wd-part-row input {
  min-width: 0;
  padding: 3px 5px;
  color: var(--control-text, inherit);
  background: var(--control-bg, transparent);
  border: 1px solid var(--control-border, currentColor);
  border-radius: var(--radius-control, 6px);
  font: inherit;
  font-size: 0.76rem;
}

/* --- Bewegung nachgezogen (Bestand widgetDesignerView.styles.css:47/234) ---
 *
 * BEFUND (2026-08-04): diese Datei enthielt KEINEN Übergang; `.wd-list-item`
 * sprang beim Überfahren hart um. Der Bestand blendet weich.
 */
.wd-list-item {
  transition: border-color 120ms ease, background-color 120ms ease;
}

.wd-icon-btn {
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
}

/* --- Panel-Klapper links und rechts ----------------------------------------
 *
 * BEFUND (Nutzerhinweis 2026-08-06: „sehr haessliche Aktionsschaltflaechen"):
 * `.designer-panel-toggle` war im GESAMTEN Stylesheet-Bestand nirgends
 * definiert. Die beiden Knoepfe waren damit unformatierte Browser-Vorgaben —
 * grauer Kasten, Systemschrift, kein Rahmen zur Umgebung. Kein Gestaltungs-
 * fehler, sondern eine fehlende Regel: wieder der Fall „das Markup ist da,
 * die Regel fehlt".
 *
 * Uebernommen wird die Anmutung des Area-Abbilds (`builder-panel-toggle`,
 * area-builder.css:95) — auf ausdruecklichen Wunsch, damit beide Flaechen
 * gleich aussehen. BEWUSST DIESELBEN TOKEN, nicht nachgebaute Werte: so
 * teilen sich beide EINE Gestalt und spaeter EINEN Fix, statt auseinander zu
 * laufen.
 *
 * BENANNT, nicht verschwiegen: `--area-builder-*` stehen mit festen Werten in
 * `core-design/tokens/colors.css` und folgen damit KEINEM Thema. Das ist eine
 * Eigenschaft der uebernommenen Vorlage, die ich hier nicht neu einfuehre,
 * aber auch nicht stillschweigend weitertrage — sie gehoert in dieselbe Welle
 * wie die 19 uebrigen festen Farb-Token (SPEC-0363).
 */
.cw-widget-designer-overlay .designer-panel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--area-builder-border-icon-button, rgba(96, 165, 250, 0.34));
  border-radius: 8px;
  background: var(--area-builder-icon-button-bg, rgba(15, 38, 77, 0.86));
  color: var(--area-builder-text-button, #e0f2fe);
  cursor: pointer;
}

.cw-widget-designer-overlay .designer-panel-toggle .material-icons {
  font-size: 20px;
}

/* Der Pfeil zeigt nach aussen — der Knopf sitzt an der Kante seines Panels,
 * wie im Area-Abbild (:113/:118).
 *
 * FALSCHE ACHSE: dort ist `.builder-panel` ein FLEX-Spalten-Container, da
 * schiebt `align-self` (Querachse = waagerecht) den Knopf an die Kante. Hier
 * ist `.wd-column` ein GRID — `align-self` wirkt in der Blockachse und hat
 * senkrecht nichts zu verschieben, der Knopf blieb links kleben. In einem
 * Grid heisst dieselbe Absicht `justify-self`. */
.cw-widget-designer-overlay .designer-panel-toggle--left {
  justify-self: end;
}

.cw-widget-designer-overlay .designer-panel-toggle--right {
  justify-self: start;
}

/* ---- Eingeklappter Zustand ------------------------------------------------
 *
 * BEFUND: `is-collapsed` wurde am `.wd-column` gesetzt, hatte aber im GESAMTEN
 * Stylesheet-Bestand KEINE Regel. Sichtbar war deshalb nur die halbe Wirkung —
 * `panelGridStyle()` schnuerte die Spalte auf 52px, der Inhalt blieb gerendert
 * und quetschte sich hinein. Dieselbe Fehlerklasse wie beim Knopf oben: das
 * Markup ist da, die Regel fehlt.
 *
 * Uebernommen wird das Verhalten des Area-Abbilds (area-builder.css:83-93):
 * ein schmaler Streifen, in dem NUR der Klapp-Knopf stehen bleibt. Dort
 * rendert die Vorlage den Inhalt im eingeklappten Zustand gar nicht erst; hier
 * bleibt er im Markup und wird per Regel ausgeblendet — gleiche Wirkung,
 * gleiche Breite, ohne den Renderpfad des Ports umzubauen. */
.cw-widget-designer-overlay .wd-column.is-collapsed {
  overflow: hidden;
  padding: 10px 8px;
  justify-items: center;
}

.cw-widget-designer-overlay .wd-column.is-collapsed > :not(.designer-panel-toggle) {
  display: none;
}

.cw-widget-designer-overlay .wd-column.is-collapsed .designer-panel-toggle {
  justify-self: center;
}