/* Ein Katalog (Konzept v3) - Katalog-Ansicht und Blatt "Neue Hardware". Scoped auf .eec. */
.eec { --eec-ink: var(--ee-text-primary); --eec-sub: #6e6e73; --eec-line: var(--ee-border-light); --eec-bg: var(--ee-bg-elevated-2); --eec-accent: #0a7d3c; --eec-warn: #b26a00;
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; color: var(--eec-ink); }
.eec h2 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.eec h3 { font-size: 17px; font-weight: 600; margin: 0; }
.eec h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--eec-sub); margin: 18px 0 8px; }
.eec h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.eec p { margin: 4px 0; }
.eec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.eec-head p { color: var(--eec-sub); }
.eec-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.eec-search { border: 1px solid var(--eec-line); border-radius: 10px; padding: 7px 12px; min-width: 220px; background: var(--ee-bg-elevated); }
.eec-seg { display: inline-flex; background: var(--eec-bg); border-radius: 9px; padding: 2px; }
.eec-seg button { border: 0; background: transparent; padding: 5px 11px; border-radius: 7px; color: var(--eec-ink); cursor: pointer; font: inherit; }
.eec-seg button.on { background: var(--ee-bg-elevated); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.eec-seg.wide { display: flex; flex-wrap: wrap; margin: 12px 0; }
.eec-btn { border: 1px solid var(--eec-line); background: var(--ee-bg-elevated); border-radius: 10px; padding: 7px 14px; font: inherit; cursor: pointer; }
.eec-btn.primary { background: var(--eec-accent); border-color: var(--eec-accent); color: var(--ee-text-on-accent); }
/* E60 (Till 26.10.2026): Details sind kein festes drittes Raster mehr - sie öffnen als
   Slide-over von rechts (eigene Scrollfläche, Esc/Backdrop schließt), auf schmalen
   Bildschirmen als Vollbild-Sheet. Die Tabelle bekommt dadurch die volle Breite. */
.eec-body { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; }
.eec-side { position: sticky; top: 12px; }
.eec-side h4 { margin: 14px 8px 4px; }
.eec-nav { display: flex; justify-content: space-between; width: 100%; border: 0; background: transparent; padding: 6px 8px; border-radius: 8px; font: inherit; color: var(--eec-ink); cursor: pointer; text-align: left; }
.eec-nav span { color: var(--eec-sub); }
.eec-nav.on { background: var(--eec-bg); font-weight: 600; }
.eec-list table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.eec-list col.eec-col-price { width: 128px; }
.eec-list col.eec-col-origin { width: 150px; }
.eec-list col.eec-col-date { width: 96px; }
.eec-list th { text-align: left; font-size: 12px; font-weight: 500; color: var(--eec-sub); padding: 8px; border-bottom: 1px solid var(--eec-line); }
.eec-list td { padding: 10px 8px; border-bottom: 1px solid var(--eec-line); vertical-align: top; overflow: hidden; }
.eec-list tr[data-id] { cursor: pointer; }
.eec-list tr[data-id]:hover, .eec-list tr.on { background: var(--eec-bg); }
.eec-list td small { display: block; color: var(--eec-sub); }
.eec .num { text-align: right; white-space: nowrap; }
/* Vorschaubild (Platzhalter je Kategorie, bis Bilder je Position kommen) + einzeiliger Name */
.eec-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.eec-thumb { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .01em; }
.eec-name-col { min-width: 0; flex: 1 1 auto; }
.eec-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* Preis rechtsbündig, Betrag und "Richtpreis"-Hinweis untereinander statt mitten im Betrag umgebrochen */
.eec-price-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.eec-price-amt { white-space: nowrap; }
.eec-price-hint { font-size: 11px; white-space: nowrap; }
.eec-empty, .eec-muted { color: var(--eec-sub); }
.eec-chip { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 20px; margin: 0 4px 2px 0; background: var(--eec-bg); color: var(--eec-sub); white-space: nowrap; }
.eec-chip.ee { background: var(--ee-bg-tertiary); color: var(--eec-accent); }
.eec-chip.own { background: var(--ee-bg-elevated-2); color: var(--ee-status-info); }
.eec-chip.warn { background: color-mix(in srgb, var(--ee-status-warning) 14%, transparent); color: var(--eec-warn); }
.eec-chip.tpl { background: var(--ee-bg-elevated-2); color: var(--eec-ink); }
.eec-backdrop { position: fixed; inset: 0; background: rgba(var(--ee-fg-rgb), .28); z-index: 2000; animation: eec-fade .15s ease; }
.eec-backdrop[hidden] { display: none; }
@keyframes eec-fade { from { opacity: 0; } to { opacity: 1; } }
.eec-card { background: var(--ee-bg-elevated); border: 0; border-left: 1px solid var(--eec-line); border-radius: 0; padding: 18px 22px 24px;
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); max-height: none; overflow: auto;
  z-index: 2001; box-shadow: -14px 0 32px rgba(0,0,0,.14); animation: eec-slide-in .18s ease; }
.eec-card[hidden] { display: none; }
@keyframes eec-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.eec-card header { position: relative; padding-right: 24px; }
.eec-card header p { color: var(--eec-sub); margin-top: 4px; }
.eec-x { position: absolute; top: -4px; right: -4px; border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--eec-sub); cursor: pointer; }
.eec-kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; }
.eec-kv dt { color: var(--eec-sub); }
.eec-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.eec-kv.small { font-size: 13px; margin-top: 8px; }
.eec details { margin: 8px 0; }
.eec summary { cursor: pointer; color: var(--eec-accent); list-style: none; }
.eec summary::before { content: "▸ "; }
.eec details[open] summary::before { content: "▾ "; }
.eec-price strong { font-size: 24px; font-weight: 600; }
.eec-price span { color: var(--eec-sub); margin-left: 4px; }
.eec-history { list-style: none; padding: 0; margin: 10px 0; font-size: 13px; }
.eec-history li { padding: 4px 0; border-top: 1px solid var(--eec-line); }
.eec-history span { color: var(--eec-sub); }
.eec-hint { color: var(--eec-sub); font-size: 13px; }
.eec-error { color: var(--ee-status-error); font-size: 13px; }
.eec-form label, .eec-field { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--eec-sub); margin: 8px 0; }
.eec-form input, .eec-field input, .eec-field select { border: 1px solid var(--eec-line); border-radius: 8px; padding: 7px 10px; font: inherit; color: var(--eec-ink); background: var(--ee-bg-elevated); }
/* E30: Labelzeile = Text + "i" in EINER Zeile; im Raster teilen sich die Felder einer Zeile die
   Spuren (subgrid: Label | Eingabe | Zusatz), damit Eingaben nebeneinander immer auf gleicher Höhe stehen. */
.eec-lab { display: block; min-width: 0; }
.eec-lab label { color: inherit; }
.eec-grid > .eec-field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 3px; align-content: start; }
.eec-grid > .eec-field > .eec-lab { align-self: end; }
.eec-extra { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.eec-field.ok input, .eec-field.ok select { border-color: color-mix(in srgb, var(--ee-status-success) 40%, transparent); background: var(--ee-bg-elevated-2); }
.eec-field.warn input, .eec-field.warn select { border-color: color-mix(in srgb, var(--ee-status-warning) 40%, transparent); background: var(--ee-bg-elevated-2); }
.eec-field small { color: var(--eec-sub); }
/* E27: "i"-Erklärung neben einem Feldlabel (Zellaufbau, Bypassdioden) - nativer Tooltip via title. */
.eec-info { cursor: help; color: var(--eec-sub); font-size: 12px; margin-left: 2px; }
.eec-confirm { align-self: flex-start; border: 0; background: color-mix(in srgb, var(--ee-status-warning) 14%, transparent); color: var(--eec-warn); border-radius: 6px; font: inherit; font-size: 12px; padding: 2px 8px; cursor: pointer; }
.eec-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.eec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.eec-check { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
/* E30: Blatt passt immer in den Bildschirm - Kopf (Titel + ×) und Fuß (Abbrechen/Speichern) fest, nur der Inhalt scrollt.
   max-height erst vh (Fallback), dann dvh (mobile Leisten). 1366×768: Blatt ≤ 736 px, 1920×1080: ≤ 1048 px. */
.eec-sheet-wrap { position: fixed; inset: 0; background: rgba(var(--ee-fg-rgb), .28); display: flex; justify-content: center; align-items: center; z-index: 100000; overflow: hidden; padding: 16px 12px; box-sizing: border-box; }
.eec-sheet { background: var(--ee-bg-elevated); border-radius: 16px; width: min(640px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.2); display: flex; flex-direction: column; overflow: hidden; outline: none;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.eec-sheet > header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px 22px; border-bottom: 1px solid var(--eec-line); }
.eec-sheet > header .eec-x { position: static; width: 30px; height: 30px; border-radius: 50%; font-size: 20px; }
.eec-sheet > header .eec-x:hover, .eec-sheet > header .eec-x:focus-visible { background: var(--eec-bg); color: var(--eec-ink); outline: none; }
.eec-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px 16px; }
.eec-sheet > footer { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--eec-line); background: var(--ee-bg-elevated); }
.eec-sheet > footer .eec-error { flex: 1 0 100%; margin: 0; }
.eec-why { flex: 1 1 200px; color: var(--eec-sub); font-size: 12px; min-width: 0; }
.eec-btn.primary.off { opacity: .45; cursor: not-allowed; }
.eec-discard { flex: 1 0 100%; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--eec-line); margin-bottom: 4px; }
.eec-discard span { flex: 1; color: var(--eec-ink); }
/* "i"-Popover (E30): Klick/Tastatur statt nur title-Tooltip */
.eec-pop { position: fixed; z-index: 100001; background: var(--ee-bg-elevated); color: var(--eec-ink); border: 1px solid var(--eec-line); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
/* Preis: Betrag + Einheiten-Umschalter in einer Zeile, Umrechnung darunter */
.eec-inunit { display: flex; gap: 6px; align-items: center; }
.eec-inunit input { flex: 1 1 auto; min-width: 0; }
.eec-seg.eec-unit button { padding: 4px 8px; font-size: 12px; white-space: nowrap; }
.eec-derived { margin-top: -2px; font-variant-numeric: tabular-nums; }
/* Ost/West-Skizze (E30): neutral, nur Variablen der Ansicht */
.eec-sketch { margin: 4px 0 6px; padding: 10px 12px 6px; background: var(--eec-bg); border-radius: 12px; }
.eec-sketch-row { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; align-items: end; }
.eec-sketch small { color: var(--eec-sub); font-size: 11px; }
.eec-sketch svg { display: block; width: 100%; height: auto; overflow: visible; }
.eec-sketch svg text { font: 10px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; fill: var(--eec-sub); }
.eec-sketch svg .v { fill: var(--eec-ink); font-weight: 600; }
.eec-sketch svg .mod { stroke: var(--eec-ink); stroke-width: 4; stroke-linecap: butt; }
.eec-sketch svg .post { stroke: var(--eec-sub); stroke-width: 1.2; }
.eec-sketch svg .gnd { stroke: var(--eec-sub); stroke-width: 1; opacity: .5; }
.eec-sketch svg .dim { stroke: var(--eec-sub); stroke-width: .8; fill: none; }
.eec-sketch svg .roof { fill: var(--ee-text-primary); stroke: var(--eec-ink); stroke-width: 1; }
.eec-sketch svg .roof.ghost { opacity: .35; }
.eec-sketch svg .ridge { stroke: var(--eec-sub); stroke-width: .8; stroke-dasharray: 3 2; }
.eec-sketch-note { display: block; margin-top: 2px; }
/* E32: Skizzen aller Bauarten - 2,10-m-Grenze, Streifen, Blühstreifen, Draufsicht, Hinweise */
.eec-sketch svg .ghost { opacity: .35; }
.eec-sketch svg .mod.ghost { stroke-dasharray: 3 2; stroke-width: 2; opacity: .45; }
.eec-sketch svg .axis { fill: var(--ee-text-primary); stroke: var(--eec-ink); stroke-width: 1; }
.eec-sketch svg .lim { stroke: var(--eec-warn); stroke-width: .8; stroke-dasharray: 4 3; }
.eec-sketch svg .lim-t { fill: var(--eec-warn); }
.eec-sketch svg .strip { fill: var(--eec-sub); opacity: .25; }
.eec-sketch svg .bloom { fill: var(--eec-accent); opacity: .35; }
.eec-sketch svg .cell { fill: var(--ee-text-primary); stroke: var(--eec-ink); stroke-width: .8; }
.eec-sketch svg .pline { stroke: var(--eec-sub); stroke-width: .7; stroke-dasharray: 3 2; }
.eec-sketch svg .pole { fill: var(--eec-ink); }
.eec-sketch-hints { list-style: none; margin: 6px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--eec-sub); }
.eec-sketch-hints li { display: flex; align-items: center; gap: 4px; }
.eec-sketch-hints li.miss, .eec-sketch-hints li.warn { color: var(--eec-warn); }
.eec-sketch-hints li.miss::before { content: "–"; font-weight: 600; margin-right: 2px; }
.eec-drop { border: 1.5px dashed var(--eec-line); border-radius: 12px; padding: 18px; text-align: center; display: flex; flex-direction: column; gap: 4px; cursor: pointer; margin: 8px 0; }
.eec-drop.over { border-color: var(--eec-accent); background: var(--ee-bg-elevated-2); }
.eec-drop span { color: var(--eec-sub); font-size: 13px; }
.eec-loading { color: var(--eec-sub); padding: 20px 0; }
.eec-bar { display: block; height: 3px; border-radius: 2px; margin-bottom: 8px; background: linear-gradient(90deg, var(--eec-accent) 30%, var(--eec-line) 30%); background-size: 200% 100%; animation: eec-load 1.2s linear infinite; }
@keyframes eec-load { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (max-width: 900px) {
  .eec-sketch-row { grid-template-columns: 1fr; }
  .eec-body { grid-template-columns: 1fr; }
  .eec-side { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .eec-side h4 { width: 100%; }
  .eec-nav { width: auto; gap: 6px; }
  .eec-grid { grid-template-columns: 1fr; }
  /* Details als Vollbild-Sheet statt Slide-over */
  .eec-card { width: 100vw; max-width: 100vw; border-left: 0; }
  @keyframes eec-slide-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
}
/* Artikelkarte: Pflege (Umbenennen, Bearbeiten, Auslaufen) und Projektpreis-Blatt */
.eec-manage .eec-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.eec-btn.danger { color: var(--ee-status-error); }
.eec-sheet.small { width: min(480px, 100%); }
.eec-form textarea { width: 100%; font: inherit; }
.ee-proj-price-btn { margin-left: .4rem; font-size: .75rem; padding: .1rem .45rem; border: 1px solid var(--border, var(--ee-border-medium)); border-radius: 999px; background: transparent; cursor: pointer; }
.ee-proj-price-chip { margin-left: .4rem; font-size: .7rem; padding: .05rem .4rem; border-radius: 999px; background: var(--ee-bg-elevated-2); color: var(--ee-status-info); }
/* E25: "i" mit Erklaerung (Ost/West-Felder), wie .ees-info im Inspektor */
.eec-i { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin: 0 0 0 5px; padding: 0; border-radius: 50%;
  border: 1px solid var(--eec-line); background: transparent; font: italic 600 9px/1 Georgia, serif; color: var(--eec-sub); cursor: pointer; vertical-align: 1px;
  position: relative; }
/* Trefferfläche 28 px, ohne die Zeile höher zu machen */
.eec-i::after { content: ""; position: absolute; inset: -7px; }
.eec-i:hover, .eec-i:focus-visible, .eec-i[aria-expanded="true"] { color: var(--eec-accent); border-color: var(--eec-accent); outline: none; }
.eec-field[hidden] { display: none; }

/* E34: Aktionen oben in der Artikelkarte - "Bearbeiten" + "…"-Menü */
.eec-toolbar { display: flex; align-items: center; gap: .5rem; margin: 10px 0 4px; }
.eec-more { position: relative; }
.eec-more > [data-act="more"] { min-width: 2.5rem; }
.eec-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 180px; background: var(--ee-bg-elevated); border: 1px solid var(--eec-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; }
.eec-menu[hidden] { display: none; }
.eec-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; font: inherit; }
.eec-menu button:hover, .eec-menu button:focus-visible { background: var(--ee-bg-elevated-2); }
.eec-sheet .eec-grid.one { grid-template-columns: 1fr; }
.eec-sheet textarea { width: 100%; font: inherit; }

/* E37: Hardware-Dialog in Gruppen (Mockup UK bearbeiten Ost/West) - links Formular, rechts Skizze + "Berechnet" */
.eec-sheet.wide { width: min(1180px, 100%); }
.eec-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); gap: 22px; align-items: start; }
.eec-aside { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.eec-group { border-top: 1px solid var(--eec-line); padding-top: 4px; margin-top: 10px; }
.eec-group:first-child { border-top: 0; margin-top: 0; }
.eec-group > h4 { display: flex; align-items: center; gap: 8px; }
.eec-gn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--eec-bg); color: var(--eec-ink); font-size: 11px; letter-spacing: 0; }
.eec-grid > .eec-field.span2 { grid-column: 1 / -1; }
/* Einheit als Suffix im Feld */
.eec-sfx { position: relative; display: flex; align-items: center; min-width: 0; }
.eec-sfx > input { flex: 1 1 auto; min-width: 0; width: 100%; padding-right: 44px; }
.eec-u { position: absolute; right: 10px; color: var(--eec-sub); font-size: 12px; pointer-events: none; }
.eec-pair { display: flex; align-items: center; gap: 6px; min-width: 0; }
.eec-pair > .eec-sfx { flex: 1 1 0; }
/* Fehler direkt am Feld */
.eec-ferr { color: var(--ee-status-error); font-size: 12px; }
.eec-ferr[hidden] { display: none; }
.eec-field.bad input, .eec-field.bad select { border-color: #e57373; background: var(--ee-bg-elevated-2); }
/* Segment (Modullage, Pfostenstellung) und Schnellwahl Bearbeitungsbreite */
.eec-segf { display: flex; width: 100%; box-sizing: border-box; }
.eec-segf button { flex: 1 1 0; }
.eec-segf button[disabled] { cursor: default; opacity: .6; }
.eec-quick { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; }
.eec-quick button { border: 1px solid var(--eec-line); background: var(--ee-bg-elevated); border-radius: 7px; padding: 2px 8px; font: inherit; cursor: pointer; color: var(--eec-ink); }
.eec-quick button.on { border-color: var(--eec-accent); color: var(--eec-accent); background: var(--ee-bg-elevated-2); }
/* berechnete Werte im Formular: nicht editierbar */
.eec-field.calc .eec-out { display: block; border: 1px dashed var(--eec-line); border-radius: 8px; padding: 7px 10px; color: var(--eec-ink); background: var(--eec-bg); font-variant-numeric: tabular-nums; }
.eec-field.calc small { font-weight: 400; }
/* Karte "Berechnet (mit Referenzmodul …)" */
.eec-calc { background: var(--ee-bg-elevated); border: 1px solid var(--eec-line); border-radius: 12px; padding: 4px 14px 10px; }
.eec-calc > h4 { margin-top: 10px; }
.eec-calc-kv { font-size: 13px; }
.eec-calc-kv dd { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.eec-amp { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--eec-line); flex: none; }
.eec-amp.green { background: #34a853; }
.eec-amp.amber { background: #f0a020; }
.eec-amp.red { background: #d93025; }
.eec-warnline { color: var(--ee-status-error); background: var(--ee-bg-elevated-2); border-radius: 8px; padding: 6px 10px; font-size: 13px; margin: 6px 0; }
.eec-warnline[hidden] { display: none; }
.eec-hstatus { margin-left: auto; }
.eec-hstatus:empty { display: none; }
/* Grundriss Trafo / Übergabestation / Batterie */
.eec-plan { display: block; width: 100%; height: auto; }
.eec-plan .eec-plan-rect { fill: var(--ee-text-primary); stroke: var(--eec-ink); stroke-width: 1.2; }
.eec-plan text { font: 11px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; fill: var(--eec-sub); }
.eec-legacy, .eec-more-vals { margin-top: 12px; }
/* E38 (Till 23.10.2026: "Skizze viel größer"): im Dialog volle Breite der rechten Spalte,
   Querschnitt und Draufsicht untereinander, Beschriftung lesbar - für alle Hardware-Arten */
.eec-aside .eec-sketch { margin: 0; padding: 12px 14px 8px; }
.eec-aside .eec-sketch-row { grid-template-columns: 1fr; gap: 14px; align-items: start; }
.eec-aside .eec-sketch-row > div > small, .eec-aside .eec-plan-cap { display: block; font-size: 12px; font-weight: 600; color: var(--eec-ink); margin-bottom: 4px; }
.eec-aside .eec-sketch svg { width: 100%; max-height: 300px; }
.eec-aside .eec-sketch svg text { font-size: 11px; }
.eec-aside .eec-sketch-hints, .eec-aside .eec-sketch-note { font-size: 12px; }
@media (max-width: 900px) {
  .eec-cols { grid-template-columns: 1fr; }
  .eec-aside { position: static; }
}

/* Bauantragsplan: Zeichnungen der Station (Grundriss/Schnitt/Ansicht) */
.eec-drawings { display: flex; flex-direction: column; gap: 6px; }
.eec-dr-row { display: grid; grid-template-columns: 110px 70px minmax(120px, 1fr) minmax(120px, 1fr) auto auto auto; gap: 6px; align-items: center; }
.eec-dr-row select, .eec-dr-row input:not([type="checkbox"]) { min-width: 0; }
.eec-dr-lic { white-space: nowrap; margin: 0; }
.eec-dr-del { border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--ee-text-muted); }
.eec-dr-del:hover { color: var(--ee-status-error); }
.eec-dr-add { align-self: flex-start; margin-top: 6px; }
@media (max-width: 720px) { .eec-dr-row { grid-template-columns: 1fr 1fr; } }

/* Trafo-Familie (Konzept Trafo-Automatik T1, 26.10.2026) */
.eec-fams { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--eec-line); border-radius: 12px; background: var(--ee-bg-elevated); }
.eec-fams-h { display: flex; align-items: center; gap: 8px; }
.eec-fams-h h4 { margin: 0; }
.eec-fams-h .eec-btn { margin-left: auto; }
.eec-fam { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--eec-line); margin-top: 10px; }
.eec-fam small { display: block; color: var(--eec-sub); }
.eec-sizes { display: flex; flex-wrap: wrap; gap: 4px; }
.eec-size { font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--eec-line); background: var(--ee-bg-elevated); color: var(--eec-sub); }
button.eec-size { cursor: pointer; }
.eec-size.on { background: var(--ee-bg-tertiary); border-color: color-mix(in srgb, var(--ee-status-success) 40%, transparent); color: var(--eec-accent); font-weight: 600; }
button.eec-size:disabled { cursor: default; opacity: 1; }
.eec-est { font-style: italic; color: var(--eec-warn) !important; }
input.eec-est { background: var(--ee-bg-elevated-2); }
.eec-famsheet { max-width: 860px; }
.eec-famtbl { width: 100%; border-collapse: collapse; margin: 10px 0; }
.eec-famtbl th { font-size: 12px; font-weight: 500; color: var(--eec-sub); text-align: left; padding: 4px; }
.eec-famtbl tbody th { color: var(--eec-ink); font-weight: 600; white-space: nowrap; }
.eec-famtbl td { padding: 2px; }
.eec-famtbl input { width: 100%; min-width: 64px; box-sizing: border-box; border: 1px solid var(--eec-line); border-radius: 8px; padding: 5px 7px; font: inherit; font-variant-numeric: tabular-nums; }
.eec-famsheet textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--eec-line); border-radius: 10px; padding: 8px; font: 12px/1.4 ui-monospace, Menlo, monospace; }
@media (max-width: 720px) { .eec-fam { grid-template-columns: 1fr; } .eec-famtbl { display: block; overflow-x: auto; } }
/* K1–K5 Leittechnik (26.10.2026): WR-Schnittstellen als Mehrfachauswahl, Badge an der Gruppe, Kabel-Einheit nur lesbar */
.eec-multi { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.eec-multi .eec-check { margin: 2px 0; font-size: 13px; }
.eec-group > h4 [data-group-badge] { margin: 0 0 0 auto; font-weight: 500; letter-spacing: 0; text-transform: none; }
.eec-group > h4 [data-group-badge][hidden] { display: none; }
.eec-field [data-cable-unit] { display: block; border: 1px dashed var(--eec-line); border-radius: 8px; padding: 7px 10px; color: var(--eec-sub); background: var(--eec-bg); }
.eec-field [data-cable-fallback], .eec-field [data-cable-guess] { display: block; margin-top: 4px; font-size: 12px; }

/* Trafo-Familie: Zeichnungen & Bild je Größe, Vorschaubild, Hersteller-Zeichnungen (26.10.2026) */
.eec-thumb { position: relative; overflow: hidden; }
.eec-thumb.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ee-bg-elevated); }
.eec-btn.s { padding: 4px 10px; font-size: 13px; margin: 4px 6px 0 0; }
.eec-media { display: flex; flex-direction: column; gap: 10px; }
.eec-mpick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 10px; border-radius: 10px; background: var(--ee-bg-elevated-2); }
.eec-mpick .eec-field { min-width: 170px; }
.eec-mlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.eec-mfile { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto 28px; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--ee-border-light); border-radius: 10px; }
.eec-mkind { font-size: 12px; font-weight: 600; color: #344054; }
.eec-mname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.eec-mname .eec-warnline { white-space: normal; display: inline-block; margin: 4px 0 0; }
.eec-mconflict { padding: 6px 10px; border-left: 3px solid #b42318; }
.eec-error-text { color: var(--ee-status-error); }
@media (max-width: 640px) { .eec-mfile { grid-template-columns: 1fr 28px; } .eec-mfile .eec-sizes { grid-column: 1 / -1; } }

/* Hersteller-Zeichnungen (DXF): Vorschau je Ansicht, Upload-Status mit Fortschritt */
.eec-dxf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.eec-dxf-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 1px solid var(--eec-line); border-radius: 12px; padding: 8px; background: var(--ee-bg-elevated); }
.eec-dxf-item.busy { border-color: var(--eec-accent); }
.eec-dxf-thumb { aspect-ratio: 4 / 3; border-radius: 8px; background: var(--eec-bg); color: var(--eec-ink); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.eec-dxf-thumb[data-empty] { color: var(--eec-sub); font-size: 12px; }
.eec-dxf-thumb svg { width: 100%; height: 100%; display: block; padding: 6px; box-sizing: border-box; }
.eec-dxf-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.eec-dxf-meta a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eec-dxf-acts { display: flex; flex-wrap: wrap; }
.eec-btn.disabled { opacity: .5; pointer-events: none; }
.eec-upstate { font-size: 12px; color: var(--eec-sub); }
.eec-upstate.busy::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border: 2px solid var(--eec-line); border-top-color: var(--eec-accent); border-radius: 50%; animation: eec-spin .8s linear infinite; }
.eec-upstate.ok { color: var(--eec-accent); font-weight: 600; }
.eec-upstate.err { color: var(--ee-status-error); }
.eec-progress { width: 100%; height: 4px; accent-color: var(--eec-accent); }
.eec-spin { width: 18px; height: 18px; border: 2px solid var(--eec-line); border-top-color: var(--eec-accent); border-radius: 50%; animation: eec-spin .8s linear infinite; }
@keyframes eec-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .eec-spin, .eec-upstate.busy::before { animation: none; } }

/* v2 (Till 29.10.2026, mockup-hardware-einstellungen-v2): Klick auf einen Eintrag öffnet EIN Overlay (92 % × 92 %,
   Handy: Vollbild) - Ansicht, „Bearbeiten“ schaltet dasselbe Overlay in den Bearbeitungsmodus. Kopf und Fuß fest,
   links Abschnitts-Navigation (Handy: Tabs), Abschnitte aufklappbar, ab 900 px zweispaltig. Nur bestehende Tokens. */
.eec-ov { position: fixed; inset: 0; background: rgba(var(--ee-fg-rgb), .28); z-index: 100000; display: flex; align-items: center; justify-content: center; animation: eec-fade .15s ease; }
.eec-ov[hidden] { display: none; }
.eec-ov .eec-card.eec-ovp { position: relative; inset: auto; width: 92vw; height: 92vh; height: 92dvh; max-width: none; max-height: none; padding: 0; border: 0; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2); overflow: hidden; animation: none; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; outline: none; }
.eec-ovp > .eec-loading, .eec-ovp > .eec-ovb { grid-row: 2; }
.eec-ovh { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--eec-line); min-width: 0; }
.eec-ovh .eec-ov-ico { width: 44px; height: 44px; flex: 0 0 44px; }
.eec-ovt { flex: 1 1 auto; min-width: 0; }
.eec-ovt h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eec-ovsub { color: var(--eec-sub); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 0; }
.eec-chip.eec-editing { background: color-mix(in srgb, var(--ee-status-warning) 14%, transparent); color: var(--eec-warn); }
.eec-ovh .eec-x { position: static; flex: none; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; }
.eec-ovh .eec-x:hover, .eec-ovh .eec-x:focus-visible { background: var(--eec-bg); color: var(--eec-ink); outline: none; }
.eec-ovmain { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 0; }
.eec-ovnav { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--eec-line); overflow-y: auto; background: var(--eec-bg); }
.eec-ovnav button { border: 0; background: transparent; text-align: left; padding: 7px 10px; border-radius: 8px; font: inherit; color: var(--eec-ink); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.eec-ovnav button:hover, .eec-ovnav button:focus-visible { background: var(--ee-bg-elevated); outline: none; }
.eec-ovnav button.on { background: var(--ee-bg-elevated); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.eec-ovnav .eec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--eec-warn); margin-left: auto; visibility: hidden; }
.eec-ovnav button.chg .eec-dot { visibility: visible; }
.eec-ovb { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 6px 22px 18px; min-height: 0; }
.eec-ovsec { border-top: 1px solid var(--eec-line); }
.eec-ovsec:first-of-type { border-top: 0; }
.eec-ovsec > summary { list-style: none; display: flex; align-items: baseline; gap: 10px; padding: 12px 0 8px; cursor: pointer; }
.eec-ovsec > summary::-webkit-details-marker { display: none; }
.eec-ovsec > summary::before { content: "›"; color: var(--eec-sub); transition: transform .15s ease; display: inline-block; }
.eec-ovsec[open] > summary::before { transform: rotate(90deg); }
.eec-ovst { font-weight: 600; }
.eec-ovst h4 { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.eec-ovsum { color: var(--eec-sub); font-size: 13px; margin-left: auto; text-align: right; }
.eec-ovsb { padding: 0 0 12px 16px; }
.eec-ovsec.eec-group { margin-top: 0; padding-top: 0; }
.eec-kv.eec-kv2 dd { text-align: left; }
.eec-kv .span2 { grid-column: 1 / -1; }
.eec-kv dd[data-desc] { white-space: pre-line; }
.eec-ov-fig, .eec-ov-img { margin: 10px 0 0; }
.eec-ov-fig svg { max-width: 360px; width: 100%; height: auto; }
.eec-ov-img img { max-width: 260px; max-height: 200px; border-radius: 10px; border: 1px solid var(--eec-line); object-fit: contain; background: var(--ee-bg-elevated); }
.eec-flagview { color: var(--eec-sub); }
.eec-subh { font-weight: 600; margin-top: 10px; }
.eec-ovb .eec-aside { position: static; padding-top: 0; }
.eec-ovb .eec-flags { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.eec-ovf { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--eec-line); background: var(--ee-bg-elevated); }
.eec-ovf .eec-error { flex: 1 0 100%; margin: 0; }
.eec-ovinfo, .eec-chgc { flex: 1 1 auto; min-width: 0; color: var(--eec-sub); font-size: 13px; }
.eec-chgc.on { color: var(--eec-warn); font-weight: 600; }
.eec-ovf .eec-more { position: relative; }
.eec-ovf .eec-menu { bottom: calc(100% + 6px); top: auto; right: 0; }
.eec-btn.busy { opacity: .6; cursor: progress; }
/* geänderte Felder: gelb, „geändert“ + „vorher …“ */
.eec-ovb .chg[data-f] { background: color-mix(in srgb, var(--ee-status-warning) 14%, transparent); border-radius: 8px; box-shadow: 0 0 0 4px #fff4e0; }
.eec-ovb .eec-dxf-item.chg { border-color: var(--eec-warn); }
.eec-was { display: block; color: var(--eec-warn); font-size: 12px; }
.eec-chgtag { font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 10px; margin-right: 4px; }
/* „Änderungen verwerfen?“ über dem Overlay */
.eec-dlg-wrap { position: fixed; inset: 0; background: rgba(var(--ee-fg-rgb), .28); z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.eec-dlg { background: var(--ee-bg-elevated); border-radius: 14px; width: min(440px, 100%); padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.eec-dlg-list { margin: 8px 0 0; padding-left: 18px; max-height: 40vh; overflow: auto; font-size: 13px; color: var(--eec-sub); }
.eec-dlg-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.eec-dlg .eec-btn.danger { border-color: #b42318; }
@media (min-width: 900px) {
  .eec-ovb .eec-kv.eec-kv2 { grid-template-columns: minmax(140px, max-content) minmax(0, 1fr) minmax(140px, max-content) minmax(0, 1fr); column-gap: 18px; }
  .eec-ovb .eec-kv.eec-kv2 .span2 { grid-column: span 3; }
  .eec-ovb .eec-kv.eec-kv2 dt.span2 { grid-column: 1; }
}
@media (max-width: 899px) {
  .eec-ov .eec-card.eec-ovp { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .eec-ovmain { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .eec-ovnav { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--eec-line); padding: 6px 8px; white-space: nowrap; }
  .eec-ovnav button { flex: none; }
  .eec-ovnav .eec-dot { margin-left: 2px; }
  .eec-ovb { padding: 4px 14px 16px; }
  .eec-ovsb { padding-left: 0; }
}