/* =====================================================================
   Aufmaß V4 — Positions-Editoren (Slide-over über abgedunkeltem Detail)
   ===================================================================== */
.editor-backdrop { position: fixed; inset: 0; background: rgba(20, 24, 28, .42); z-index: 40; }
/* Panel am rechten Rand (NICHT über die volle Breite). Volle Viewport-Höhe; die Safe-Area wird
   als PADDING abgezogen, damit Kopf- und Fußzeile frei von Statusleiste und Home-Indicator
   bleiben. KEIN lvh — siehe #app in app.css: darunter wird abgeschnitten. */
.editor-panel {
  position: fixed; top: 0; right: 0; height: var(--vvh, 100dvh); width: 86%; max-width: 1040px;   /* gleiche Breite wie das Messen-Fenster (.pm-mov), alle Editoren einheitlich (User 20.10.2026) · --vvh = sichtbarer Bereich (iPad-Tastatur), siehe js/viewport.js */
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface-1); box-shadow: -18px 0 50px rgba(0, 0, 0, .20);
  display: flex; flex-direction: column; z-index: 41;
}
.editor-head { flex: none; height: 64px; border-bottom: 1px solid var(--line-light); display: flex; align-items: center; justify-content: space-between; padding: 0 22px; }
.editor-head .pill { font-size: 12px; font-family: var(--font-mono); font-weight: 700; color: var(--on-accent); background: var(--brand); padding: 6px 11px; border-radius: 8px; }
.editor-head .ttl { font-size: 17px; font-weight: 700; }
.editor-head .sub { font-size: 11.5px; color: var(--muted); }
.editor-x { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--txt2); }

.editor-body { flex: 1; display: flex; min-height: 0; }
.editor-preview { width: 200px; flex: none; border-right: 1px solid var(--line-light); background: var(--panel-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 14px; }
.editor-preview .pv { width: 100%; max-width: 172px; display: flex; align-items: center; justify-content: center; }
.editor-preview .pv svg, .editor-preview .pv img { max-width: 100%; height: auto; }
.editor-preview .pv-label { font-size: 16.5px; font-weight: 700; margin-top: 14px; text-align: center; line-height: 1.2; }
.editor-preview .pv-sub { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); margin-top: 5px; text-align: center; }
.editor-fields { flex: 1; overflow-y: auto; padding: 14px; background: var(--app-bg); }

.editor-foot { flex: none; height: 70px; border-top: 1px solid var(--line-light); display: flex; align-items: center; gap: 11px; padding: 0 22px; }
.editor-foot .cancel { flex: 1; height: 46px; border-radius: 12px; border: 1px solid var(--line); color: var(--txt2); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.editor-foot .apply { flex: 1.4; height: 46px; border-radius: 12px; background: var(--brand); color: var(--on-accent); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(161, 28, 28, .26); }

/* Karten (Karten-Cockpit 1c) — .ed-section bleibt als Alias kartengestylt (Haustür-Editor, Bestandscode) */
.ed-card, .ed-section { background: var(--surface-1); border: 1px solid var(--line-light); border-radius: 14px; padding: 11px 16px 13px; }
.ed-section { margin-top: 12px; }
.ed-section:first-child { margin-top: 0; }
.ed-sh { display: flex; align-items: center; gap: 9px; }
.ed-sh > span:first-child, .ed-ct > span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--brand); white-space: nowrap; }
.ed-sh > .line { display: none; }
.ed-ct { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; flex-wrap: wrap; }
.ed-ct .ed-pills { flex-wrap: nowrap; flex: none; }
.ed-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.ed-cards-grid > .span2 { grid-column: 1 / -1; }
.ed-cards-3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
.ed-cards-3 > .span3 { grid-column: 1 / -1; }
.ed-cols { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: start; }
.ed-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ed-lbl { font-size: 11px; font-weight: 700; letter-spacing: .07em; color: var(--muted); }

.ed-segs { display: flex; gap: 7px; margin-top: 11px; }
.ed-seg { flex: 1; height: 42px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 4px; border-radius: 11px; font-size: 13.5px; font-weight: 600; cursor: pointer; background: var(--surface-1); border: 1px solid var(--line); color: var(--txt2); }
.ed-seg.active { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }
.ed-segs.inline { margin-top: 9px; }
.ed-segs.inline .ed-seg { flex: none; padding: 0 18px; }

/* Häkchen-Chip: ein Tap-Chip statt Nein/Ja-Doppel (Bool-Felder) */
.ed-check { height: 44px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-1); color: var(--txt2); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; padding: 0 10px; text-align: center; user-select: none; }
.ed-check .ck { font-weight: 700; }
.ed-check.active { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }

/* „+"-Button: zeigt versteckte Optionalfelder erst bei Klick */
.ed-add { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border: 1px dashed var(--line-strong); border-radius: 10px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--txt2); cursor: pointer; }
.ed-add .plus { font-size: 16px; color: var(--brand); line-height: 1; }

/* Karten-interne Spalten (BEDIENUNG quer, 3 Spalten) */
.ed-bed-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 11px; }
.ed-bed-cols > div { min-width: 0; }

/* Pills als 2×2-Raster (Antrieb) */
.ed-pills.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.ed-pills.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); }   /* Dreier-Auswahl in schmalen Karten, statt 2 + 1 umzubrechen */
.ed-pills.grid2 .ed-pill, .ed-pills.grid3 .ed-pill { justify-content: center; padding: 0 8px; }
.ed-pills.nowrap { flex-wrap: nowrap; }

/* ===== Rollladen-Maske „Karten-Cockpit" (js/rollladen.js) ===== */
.ed-typ-grid.four { grid-template-columns: repeat(4, 1fr); }
.rl-bfrow { display: grid; gap: 8px; margin-top: 9px; }
.rl-bfcard { border-radius: 11px; cursor: pointer; background: var(--surface-1); border: 1.5px solid var(--line); padding: 7px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rl-bfcard svg { width: 36px; height: 26px; }
.rl-bfcard .t { font-size: 11px; font-weight: 600; color: var(--txt2); }
.rl-bfcard.active { background: var(--brand); border-color: var(--brand); }
.rl-bfcard.active .t { color: var(--on-accent); }
.rl-bfcard.active svg rect, .rl-bfcard.active svg line { opacity: .9; }
.rl-k3row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.rl-k3card { border-radius: 11px; cursor: pointer; background: var(--surface-1); border: 1.5px solid var(--line); padding: 8px 6px 7px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 56px; justify-content: center; }
.rl-k3card.active { background: var(--danger-bg); border-color: var(--brand); }
.rl-k3card .t { font-size: 11.5px; font-weight: 700; color: var(--txt2); text-align: center; line-height: 1.15; }
.rl-k3card .s { font-size: 9.5px; color: var(--disabled); text-align: center; line-height: 1.2; }
.rl-k3card.active .t { color: var(--brand); }
.rl-bedrow { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 11px; align-items: flex-start; }
.rl-bedgrp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rl-bedgrp.end { align-self: flex-end; }
.rl-rows { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.rl-rows > .w-full { width: 100%; }   /* K3-Kacheln + Zwischenlabels: volle Zeile im Flex-Raster (sonst Schrumpf auf Inhaltsbreite) */
.rl-cell { min-width: 0; }
.rl-cell.w-full, .rl-note.w-full, .rl-warn.w-full { width: 100%; }
.rl-cell.w-half { width: calc(50% - 5px); }
.rl-cell.w-third { width: calc(33.333% - 6px); }
.rl-cell.w-int1 { width: calc(25% - 7px); } .rl-cell.w-int2 { width: calc(43% - 6px); } .rl-cell.w-int3 { width: calc(32% - 5px); }   /* Intego auf Seite 2: Breite nach Knopfanzahl */
.rl-cell.w-b1 { width: calc(38% - 6px); } .rl-cell.w-b2 { width: calc(30% - 6px); } .rl-cell.w-b3 { width: calc(32% - 6px); }   /* Vorbau Seite 2: Bauart · Intego-Basis · Führungsschiene */
.rl-cell.w-b4 { width: calc(64% - 5px); } .rl-cell.w-b5 { width: calc(36% - 5px); }   /* Vorbau Seite 2: Kastenhöhe · Montage */
.rl-note { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.rl-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 10px; padding: 9px 11px; line-height: 1.45; }
.rl-linkb { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; padding: 4px 2px; }
.rl-mb { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 560px; }
.rl-mb .opt { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; background: var(--surface-1); }
.rl-mb .opt.active { border-color: var(--brand); background: var(--danger-bg); }
.rl-mb .opt b { display: block; font-size: 13px; }
.rl-mb .opt small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.rl-mb .opt.active b { color: var(--brand); }
.ed-lbl .soft, .ed-ct .soft { font-weight: 400; letter-spacing: 0; color: var(--disabled); }

/* Teilungsverhältnis-Schnellauswahl (½·½, ⅓·⅔, …) */
.teil-ratio { margin: 2px 0 14px; }
.teil-ratio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.teil-rbtn { height: 42px; padding: 0 18px; border-radius: 11px; border: 1.5px solid var(--line); background: var(--surface-1); font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--txt2); cursor: pointer; }
.teil-rbtn.active { border-color: var(--brand); background: var(--brand); color: var(--on-accent); }

/* Sonderform-Auswahlkarten: kleinere, umbrechende Labels (lange Wörter) */
.sf-grid .ed-opt .t { font-size: 10.5px; line-height: 1.12; overflow-wrap: anywhere; }

/* Sprossenbild-Auswahl: nur Bild, kein Text */
/* 5 statt 6 Spalten: die Sprossen-Karte teilt sich die Breite jetzt mit Typ/Breite/Hinweis
   links, in 6 Spalten würden die Bilder dort zu schmal. 10 Bilder → zwei volle Reihen. */
.sprbild-grid { grid-template-columns: repeat(5, 1fr); }
.sprbild-grid .ed-opt.sprbild { padding: 10px 8px; min-height: 0; justify-content: center; }
.sprbild-grid .ed-opt.sprbild .ic { margin: 0; }

.ed-pills { display: flex; gap: 7px; margin-top: 0; flex-wrap: wrap; }
.ed-pill { height: 42px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; background: var(--surface-1); border: 1px solid var(--line); color: var(--txt2); }
.ed-pill.active { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }

/* Flügel-Reihe: Label links neben den Kacheln (spart je Flügel eine Zeile) */
.ed-fluegel { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.ed-fluegel > .ed-lbl { flex: none; width: 84px; line-height: 1.3; }   /* breit genug für OBERLICHT / UNTERLICHT */
.ed-fluegel > .ed-opt-grid { flex: 1; min-width: 0; }
.ed-opt-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ed-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 3px; border-radius: 10px; cursor: pointer; background: var(--surface-1); border: 1.5px solid var(--line); min-width: 0; }
.ed-opt.active { background: var(--brand); border-color: var(--brand); }
.ed-opt .ic { display: flex; align-items: center; justify-content: center; height: 32px; }
.ed-opt .t { font-size: 11px; font-weight: 600; color: var(--txt2); text-align: center; line-height: 1.15; }
.ed-opt.active .t { color: var(--on-accent); }

/* Chip-Zeile (An/Aus-Chips statt Nein/Ja-Paaren) */
.ed-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.ed-chips .ed-check { padding: 0 12px; }   /* schmal genug, damit Oberlicht/Kipp/Unterlicht in EINE Zeile passen */
/* Chips rechts in der Kartentitel-Zeile — kompakter als eine eigene Feldgruppe */
.ed-ct-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ed-ct-chips .ed-check { height: 38px; font-size: 12.5px; padding: 0 14px; }
.ed-notiz-add { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border: 1px dashed var(--line-strong); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--txt2); cursor: pointer; }
.ed-notiz-add .plus { font-size: 16px; color: var(--brand); line-height: 1; }
.ed-notiz { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 16px; line-height: 1.4; resize: vertical; min-height: 56px; outline: none; }   /* ab 16 px zoomt das iPad beim Antippen nicht hinein */
.ed-notiz:focus { border-color: var(--brand); }
.sketch-canvas { width: 100%; height: auto; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface-1); cursor: crosshair; display: block; }   /* Aspekt kommt aus der Canvas-Bitmap (Foto-Verhältnis!); touch-action setzt setupSketch inline */

/* Rollladen-Typ-Karten + Feld-Reihen — 6 kompakte Kacheln in EINER Zeile */
.ed-typ-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px; }
.ed-typ-card { border-radius: 12px; cursor: pointer; background: var(--surface-1); border: 2px solid var(--line-light); padding: 8px 4px 7px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ed-typ-card.active { background: var(--danger-bg); border-color: var(--brand); }
.ed-typ-card .ic { display: flex; align-items: center; justify-content: center; height: 29px; }
.ed-typ-card .ic svg { width: 40px; height: 29px; }
.ed-typ-card .t { font-size: 11px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.1; }
.ed-typ-card.active .t { color: var(--brand); }

.ed-none { margin-top: 18px; background: var(--surface-3); border: 1px solid var(--line-light); border-radius: 12px; padding: 16px 18px; font-size: 14px; color: var(--txt2); line-height: 1.5; }
.ed-cards-grid .ed-none { margin-top: 0; grid-column: 1 / -1; }
.ed-rows { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.ed-input { height: 46px; border: 1px solid var(--line); border-radius: 11px; display: flex; align-items: center; padding: 0 13px; background: var(--surface-1); }
.ed-input input { border: 0; outline: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; flex: 1; min-width: 0; color: var(--ink); }
.ed-input.mono input { font-family: var(--font-mono); }
.ed-input .unit { font-size: 12px; color: var(--disabled); margin-left: 6px; }
.ed-input.with-kbd { padding-right: 5px; }
.ed-input.with-kbd input { cursor: pointer; }
.ed-kbd { flex: none; width: 36px; height: 36px; margin-left: 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-1); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ed-kbd:active { background: var(--surface-4); border-color: var(--brand); color: var(--brand); }

/* App-internes Zahlen-Keypad (Popover für Maßfelder) */
.np-layer { background: rgba(22, 24, 28, .45); }
.np-pop { box-sizing: border-box; width: min(380px, 92vw); background: var(--surface-1); border: 1.5px solid var(--line); border-radius: 20px; box-shadow: var(--sh-pop, 0 18px 54px rgba(0, 0, 0, .26)); padding: 18px 18px 16px; animation: dd-in .12s ease; }
.np-lbl { font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--muted); text-transform: uppercase; text-align: center; }
.np-val { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 6px; font-family: var(--font-mono); }
.np-val b { font-size: 44px; line-height: 1.1; font-weight: 700; color: var(--ink); }
.np-val b.alt { color: var(--disabled); }
.np-val i { font-style: normal; font-size: 17px; color: var(--muted); }
.np-alt { text-align: center; font-size: 12.5px; color: var(--muted); margin: 2px 0 12px; min-height: 16px; }
.np-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.np-pop .mk { height: 64px; font-size: 27px; border-radius: 14px; }
.np-pop .mk-fn { font-size: 22px; }
.np-foot { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 12px; }
.np-cancel { height: 56px; border-radius: 14px; background: var(--surface-1); color: var(--txt2); font-size: 15px; font-weight: 600; border: 1.5px solid var(--line); cursor: pointer; }
.np-done { height: 56px; border-radius: 14px; background: var(--brand); color: var(--on-accent); font-size: 17px; font-weight: 700; border: none; cursor: pointer; }
.np-done:active, .np-cancel:active { filter: brightness(.94); }

/* Maße-Editor */
.masse-left { width: 300px; flex: none; border-right: 1px solid var(--line-light); background: var(--panel-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 18px; }
.masse-diagram { width: 100%; display: flex; align-items: center; justify-content: center; }
.masse-fertig { margin-top: 16px; width: 100%; background: var(--surface-1); border: 1px solid var(--line-light); border-radius: 12px; padding: 13px 15px; }
.masse-fertig .v { font-size: 21px; font-weight: 700; font-family: var(--font-mono); }
.masse-fertig .sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.masse-right { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.masse-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.masse-chip { padding: 11px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; background: var(--surface-4); border: 1px solid var(--surface-4); color: var(--txt2); display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.masse-chip.active { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }
.masse-chip .cv { font-family: var(--font-mono); font-size: 13px; color: var(--disabled); }
.masse-chip.active .cv { color: rgba(255, 255, 255, .8); }
.masse-active { margin-top: 22px; border: 2px solid var(--brand); border-radius: 14px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; }
.masse-active .grp { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--brand); }
.masse-active .nm { font-size: 30px; font-weight: 700; margin-top: 1px; }
.masse-active .num { font-size: 54px; font-weight: 700; font-family: var(--font-mono); line-height: 1; color: var(--ink); }
.masse-active .unit { font-size: 20px; font-weight: 600; color: var(--muted); }
.masse-pad { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 10px; min-height: 0; }
.masse-pad .key { border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 25px; font-weight: 600; font-family: var(--font-mono); cursor: pointer; user-select: none; }
.masse-abzug { flex: none; display: flex; align-items: center; gap: 12px; }
.masse-abzug-box { height: 38px; width: 70px; border: 1px solid var(--line); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 14px; font-weight: 600; }

/* Combobox (Select-Optik, später Stammdaten-Dropdown) */
.ed-combo { height: 46px; border: 1px solid var(--line); border-radius: 11px; display: flex; align-items: center; padding: 0 13px; background: var(--surface-1); }
.ed-combo input { border: 0; outline: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600; flex: 1; min-width: 0; color: var(--ink); }
.ed-combo input::placeholder { color: var(--disabled); font-weight: 600; }
.ed-combo .caret { font-size: 11px; color: var(--disabled); margin-left: 6px; }

/* Fensterdetails: Standard-Zusammenfassung + Fensterbänke */
.fd-std-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }
.fd-std-row { display: flex; align-items: center; justify-content: space-between; height: 42px; background: var(--surface-3); border: 1px solid var(--line-light); border-radius: 10px; padding: 0 13px; }
.fd-std-row .v { font-size: 14px; font-weight: 600; }
.fd-fb { display: flex; gap: 14px; margin-top: 11px; }
.fd-fb > div { flex: 1; }
.fd-fb .segs { display: flex; gap: 7px; }
.fd-fb .seg { flex: 1; text-align: center; padding: 9px 0; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--surface-1); border: 1px solid var(--line); color: var(--txt2); }
.fd-fb .seg.active { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }

/* Öffnungsschema (User 20.10.2026): Zusatz-Zeile Balkontür/Kopplung · Aufbau-Karte mit Ober-/Unterlicht */
.ed-zusatz { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-light); }
.ed-zgrp { flex: 1; min-width: 190px; max-width: 300px; }
.ed-zgrp > .ed-lbl { margin-bottom: 6px; }
.ed-cols.one { grid-template-columns: 1fr; }
.ed-licht-c { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: center; }
.ed-licht-c > .ed-segs { flex: 1.6; min-width: 0; }
.ed-licht-h { flex: 1; min-width: 110px; }

/* ===== ELEMENT (früher Öffnungsschema, User 20.10.2026): Vorlagen + Skizze zum Antippen + Seitenleiste ===== */
.editor-panel.no-preview .editor-preview { display: none; }
.el-root { display: flex; flex-direction: column; gap: 12px; }
.el-vorlagen { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 56px) / 8); gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.el-vorlagen::-webkit-scrollbar { display: none; }
.el-vorlage:nth-child(8n + 1) { scroll-snap-align: start; }   /* zwei Seiten à 8 Vorlagen */
.el-vl-dots { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 6px; }
.el-vl-dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; }
.el-vl-dots button.on { background: var(--brand); width: 20px; border-radius: 4px; }
.el-vl-dots span { font-size: 11px; color: var(--muted); margin-left: 6px; }
.el-vorlage { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); color: var(--txt2); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; line-height: 1.2; text-align: center; }
.el-vorlage:active { background: var(--surface-4); }
.el-main { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; align-items: start; }
.el-card { position: relative; background: var(--surface-1); border: 1px solid var(--line-light); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.el-hint { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.el-hint span:last-child { font-family: var(--font-mono); }
.el-svgbox { display: flex; justify-content: center; }
.el-svg { width: 100%; max-width: 600px; max-height: 470px; height: auto; user-select: none; -webkit-user-select: none; }
.el-hit { cursor: pointer; }
.el-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); border-top: 1px solid var(--line-light); padding-top: 9px; margin-top: 4px; }
.el-foot span { color: var(--muted); }
.el-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.el-zgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 10px; }
.el-box { background: var(--surface-1); border: 1px solid var(--line-light); border-radius: 14px; padding: 11px 12px; }
.el-lbl { font-size: 11px; font-weight: 700; letter-spacing: .07em; color: var(--brand); margin-bottom: 8px; }
.el-sub { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--txt2); margin: 9px 0 5px; }
.el-box .ed-seg { padding-left: 4px; padding-right: 4px; }
.el-etagen { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.el-etagen .ed-seg { font-size: 15.5px; font-weight: 700; height: 44px; }   /* Stockwerk gut lesbar (User 22.10.2026), 2 Reihen à 3 */
.el-pop { position: absolute; z-index: 5; width: 320px; background: var(--surface-1); border: 1.5px solid var(--line); border-radius: 16px; box-shadow: var(--sh-pop, 0 16px 44px rgba(0, 0, 0, .22)); padding: 12px; }
.el-pop-t { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.el-pop-t button { border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; width: 32px; height: 32px; }
.el-pop-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.el-pop-l { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt2); margin: 10px 0 5px; }
.el-pop-l:first-child { margin-top: 0; }
.el-pop-n { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
.el-pop-rm { margin-top: 10px; width: 100%; min-height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-1); color: var(--brand); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }

/* ===== ROLLLADEN in zwei Seiten (User 20.10.2026): links Symbol · Seiten · Übersicht, rechts eine Seite ===== */
.rl-lay { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 12px; align-items: stretch; min-height: 100%; }
.rl-nav { background: var(--surface-1); border: 1px solid var(--line-light); border-radius: 14px; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rl-nav-sym { display: flex; gap: 10px; align-items: center; padding: 0 4px 10px; border-bottom: 1px solid var(--line-light); margin-bottom: 4px; }
.rl-nav-sym .ic { width: 58px; flex: none; }
.rl-nav-sym .ic svg { width: 58px; height: auto; display: block; }
.rl-nav-sym b { display: block; font-size: 15px; } .rl-nav-sym span { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); }
.rl-nav-ph { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); padding: 6px 6px 2px; }
.rl-ni { text-align: left; font: inherit; border: 0; background: none; border-radius: 10px; padding: 10px; cursor: pointer; color: var(--ink); display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: baseline; }
.rl-ni .n { font-family: var(--font-mono); color: var(--muted); font-size: 13px; }
.rl-ni .t { font-weight: 600; font-size: 15px; }
.rl-ni.cur { background: color-mix(in srgb, var(--brand) 10%, transparent); } .rl-ni.cur .t { color: var(--brand); }
.rl-ni:disabled { opacity: .4; cursor: default; }
.rl-pill { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, #2F7D4F 13%, transparent); color: #2F7D4F; }
.rl-pill.open { background: color-mix(in srgb, #B45309 13%, transparent); color: #B45309; }
.rl-ov { margin: 2px 0 0; padding: 0 6px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; font-size: 12.5px; }
.rl-ov dt { color: var(--muted); white-space: nowrap; }
.rl-ov dd { margin: 0; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-ov dd.leer { color: #B45309; font-weight: 500; }
.rl-page { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rl-page > .ed-cards-grid.rl-teil-a, .rl-page > .ed-cards-grid.rl-teil-b { grid-template-columns: 1fr; gap: 8px; }   /* beide Seiten: Karten untereinander */
.rl-typ2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.rl-pager { margin-top: auto; padding-top: 10px; display: flex; }
.rl-pager button { flex: 1; font: inherit; font-weight: 600; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); cursor: pointer; }
.rl-teil-a .rl-k3row { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }   /* Seite 1: System-Kacheln in einer Reihe */
.rl-teil-a .rl-mb .opt { padding: 7px 12px; }
.rl-pager button.go { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }

/* Gekoppelte Elemente: gemeinsame Teile (User 20.10.2026) */
.kop-box { margin-top: 8px; border-top: 1px solid var(--line-light); padding: 8px 4px 0; }
.kop-ttl { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; color: var(--muted); margin: 4px 2px 6px; }
.kop-row { display: flex; flex-wrap: wrap; gap: 6px; }
.kop-chip { font: inherit; font-size: 13px; font-weight: 600; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-1); color: var(--txt2); cursor: pointer; }
.kop-chip.on { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }
.kop-box.kompakt { margin-top: 0; border-top: 0; padding: 0; width: 100%; display: flex; gap: 6px; flex-wrap: wrap; }
.kop-box.kompakt .kop-chip { min-height: 32px; font-size: 12.5px; padding: 0 10px; }
.ed-check.rl-lock { cursor: default; background: var(--surface-3); border-style: dashed; color: var(--muted); flex-direction: column; gap: 0; line-height: 1.2; }
.ed-check.rl-lock .rl-lock-v { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.rl-teil-b .ed-pill { padding: 0 10px; }   /* Seite 2 in Messen-Breite: Knopfreihen bleiben einzeilig (Höhe 44 px unverändert) */
.so-card .ed-pill, .ed-cards-3 .ed-ct > .ed-pills .ed-pill { padding-left: 8px; padding-right: 8px; }
.ed-cards-3 .ed-ct { flex-wrap: nowrap; gap: 6px; }
.ed-cards-3 .ed-ct > span { letter-spacing: .04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* Messen-Breite: Fensterbank-Status und Ja/Nein bleiben einzeilig */
.rl-ni { grid-template-columns: 18px 1fr; } .rl-ni .t { white-space: nowrap; } .rl-ni .rl-pill { grid-column: 2; justify-self: start; margin-top: 2px; }   /* schmale Übersicht (Messen-Breite): Status unter dem Titel */
.kop-card { border-color: color-mix(in srgb, var(--brand) 40%, var(--line-light)); background: color-mix(in srgb, var(--brand) 4%, var(--surface-1)); }
.kop-grid { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.kop-grp { display: flex; align-items: center; gap: 12px; }
.kop-lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--brand); line-height: 1.25; }
.kop-lbl small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; color: var(--muted); text-transform: none; }
.kop-pills { margin: 0; flex-wrap: nowrap; }
.kop-grid.in-bed { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-light); }   /* Kopplung im Feld Bedienung */
.rl-mb-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.rl-mb-row > .ed-lbl { flex: none; width: 130px; line-height: 1.3; }
.rl-mb-row > .ed-lbl .soft { display: block; letter-spacing: .02em; text-transform: none; }
.rl-mb-row > .rl-mb { flex: 1; max-width: none; }
.el-box.el-inline, .el-inline-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.el-box.el-inline > .el-lbl, .el-inline-row > .el-lbl { margin: 0; flex: none; }
.el-box.el-inline > .ed-segs, .el-inline-row > .ed-segs { width: 132px; flex: none; }
.el-inline-row + .el-inline-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-light); }
.el-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.el-card-head > .ed-segs { width: 400px; max-width: 100%; margin-top: 0; }
.el-card-head .el-mass { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.el-svg { max-height: 420px; }
.el-hint { display: block; text-align: center; margin-top: 2px; }

/* Ausstattung & Zubehör wie die Element-Seite (User 20.10.2026): Kachelreihe statt Vorlagen, Skizze links, Einstellungen rechts */
.editor-foot .back { flex: .8; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.editor-foot .mid { flex: 1.2; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.ag-tiles { display: grid; gap: 8px; height: 100px; }   /* so hoch wie Vorlagen + Punkte im Element → Skizze steht beim Wechsel an derselben Stelle */
.ag-tile { font: inherit; text-align: left; cursor: pointer; background: var(--surface-1); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 10px 9px; color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; gap: 2px; min-width: 0; }
.ag-ti svg { width: 28px; height: 28px; }
.ag-ti { display: flex; align-items: center; justify-content: space-between; color: var(--txt2); }
.ag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.ag-nm { font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-vl { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-tile.an .ag-vl { color: var(--brand); font-weight: 600; }
.ag-tile.offen .ag-vl { color: #B45309; font-weight: 600; }
.ag-tile.cur { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.ag-tile.cur .ag-ti { color: var(--brand); }
.ag-main .el-card-head { min-height: 42px; }   /* gleiche Höhe wie die Bauform-Zeile im Element */
.ag-box { display: flex; flex-direction: column; gap: 4px; }
.ag-bh { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.ag-rows { margin-top: 6px; }
.ag-sub2 { font-weight: 500; letter-spacing: 0; color: var(--muted); }
.ag-fp .ed-pill { padding-left: 12px; padding-right: 12px; }
.ag-bilder { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ag-bilder .ed-opt.sprbild { padding: 5px 4px; }
.ag-bilder .ed-opt.sprbild svg { width: 30px; height: 37px; }
.ag-main .el-svgbox { position: relative; }
.ag-note { position: absolute; top: 4px; left: 12%; right: 12%; font-size: 12px; color: var(--muted); line-height: 1.4; text-align: center; }
.ag-lager { margin-top: 6px; min-height: 200px; }

/* Fensterdetails der Position (User 21.10.2026): Frage oben, bei „Ja" der Rundgang wie im Reiter */
.pf-root { display: flex; flex-direction: column; gap: 12px; }
.pf-frage { padding: 12px 16px; }
.pf-q { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-q b { font-size: 16px; }
.pf-q span { font-size: 12.5px; color: var(--muted); }
.pf-jn { width: 180px; flex: none; }
.pf-std { padding: 14px 16px; }
.pf-dl { margin: 4px 0 0; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px 16px; font-size: 15px; }
.pf-dl dt { color: var(--muted); }
.pf-dl dd { margin: 0; font-weight: 600; }
.pf-root .oe-wrap { grid-template-columns: 240px minmax(0, 1fr); }

/* Notizen: bis zu 6 Fotos als Raster, Antippen = groß ansehen (User 21.10.2026) */
.foto-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.foto-th { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-light); background: var(--surface-2, #F7F8FA); }
.foto-th img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.foto-th .foto-del { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 8px; border: none; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; font-size: 13px; }
.foto-th .foto-anno { position: absolute; bottom: 6px; right: 6px; width: 30px; height: 30px; border-radius: 8px; border: none; background: rgba(192, 57, 43, .9); color: #fff; cursor: pointer; display: grid; place-items: center; }
.fv-layer { position: fixed; inset: 0; z-index: 220; background: rgba(20, 22, 26, .94); display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px calc(env(safe-area-inset-bottom, 0px) + 14px); gap: 10px; }
.fv-top { display: flex; align-items: center; justify-content: space-between; color: #E6E9EE; font-weight: 600; }
.fv-x { width: 42px; height: 42px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; font-size: 16px; cursor: pointer; }
.fv-stage { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: safe center; justify-content: safe center; -webkit-overflow-scrolling: touch; }
.fv-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; background: #fff; }
.fv-bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.fv-bar button { height: 44px; padding: 0 16px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.fv-bar button:disabled { opacity: .35; cursor: default; }
.fv-bar .fv-anno { background: var(--brand); border-color: var(--brand); }
.fv-z { min-width: 86px; text-align: center; color: #B9C0CA; font-size: 13px; font-family: var(--font-mono); }
/* Hebeschiebetür: gewähltes Schema in der Vorlagen-Reihe rot umrandet (Symbole bleiben lesbar, 21.10.2026) */
.el-vorlage.on { border: 2px solid var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface-1)); color: var(--brand); }

/* Rollladen wie Element und Ausstattung (User 22.10.2026): Kacheln oben, Live-Skizze, rechts die Maske der Kachel */
.rl-typbtn { font: inherit; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; min-height: 34px; padding: 0 10px; border-radius: 9px; border: 1px dashed var(--muted); background: var(--surface-1); color: var(--ink); cursor: pointer; white-space: nowrap; }
.rl-typbtn.on { border: 1.5px solid var(--brand); color: var(--brand); }
.rlk .ed-card { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; }
.rlk .ed-card > .ed-ct { display: none; }   /* Titel steht im Kopf der Spalte */
.rlk-body { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.rlk .rl-rows { margin-top: 0; gap: 8px; }
.rlk .ed-pill { height: 40px; padding: 0 9px; font-size: 13px; }
.rlk .rl-k3row:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* sechs Systeme: zwei Reihen statt drei */
.rlk .rl-k3row:has(> :nth-child(5)) .s { display: none; }   /* Untertitel nur in der Auswahl in der Skizze */
.rlk .rl-bfrow { grid-template-columns: repeat(3, 1fr) !important; }
.rlk .rl-k3row, .rl-pop-k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.rlk .rl-k3row:has(svg), .rl-pop-k3:has(svg) { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* Kastenform mit Profil: eine Reihe */
.rlk .rl-k3card, .rl-pop-k3 .rl-k3card { min-height: 48px; padding: 6px 4px; }
.rlk .rl-bedrow { gap: 10px; margin-top: 0; }
.rlk .rl-bedgrp { width: 100%; }
.rlk .rl-mb { grid-template-columns: 1fr; }
.rlk .ed-typ-card .t { font-size: 10.5px; }
.rl-popw { width: 320px; }
.rl-pop { display: flex; flex-direction: column; }
.rl-pop .ed-pills { gap: 6px; }
.rl-pop .ed-pill { height: 40px; padding: 0 11px; }
.rl-pop .ed-pills.grid2 .ed-pill, .rl-pop .ed-pills.grid3 .ed-pill { padding: 0 6px; justify-content: center; }
.rl-pop-typ .ed-pill { font-size: 12.5px; }
.rl-pop .rl-bfrow { gap: 6px; }
.rl-pop-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rl-pop-chips.one { grid-template-columns: 1fr; }
.rl-pop-add { margin-top: 10px; width: 100%; }
.rl-pop-ok { margin-top: 10px; width: 100%; min-height: 44px; border-radius: 10px; border: 0; background: var(--brand); color: var(--on-accent); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rl-popw { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.rl-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; max-height: 196px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.rl-swb { font: inherit; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); cursor: pointer; text-align: left; min-width: 0; }
.rl-swb i { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, .18); }
.rl-swb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-swb.on { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand); }
/* Rollladen-Spalte dichter, damit auch Aufsatz/Intego auf dem iPad ohne Scrollen passen */
.rlk .ag-bh { min-height: 22px; }
.rlk-body { gap: 8px; margin-top: 2px; }
.rlk .rl-rows { gap: 7px; }
.rlk .rl-cell > .ed-lbl, .rlk .w-full > .ed-lbl { margin-bottom: 4px !important; }
.rlk .ed-pill { height: 38px; }
.rlk .ed-check { height: 40px; }
.rlk .rl-k3card { min-height: 44px; }
.rlk .ed-pills.nowrap { flex-wrap: wrap; }   /* Wickler-Bohrabstände u. a. brechen in der schmalen Spalte um (User 22.10.2026) */
.rlk .kop-grp { flex-wrap: wrap; gap: 8px; }
.rlk .kop-pills { flex-wrap: wrap; }   /* Kopplungs-Knöpfe in der schmalen Spalte umbrechen */
.rlk .rl-bedrow { gap: 8px; } .rlk .rl-bedgrp { gap: 4px; }
.rlk .kop-grid.in-bed { margin-top: 4px; padding-top: 8px; gap: 6px; }

/* Feste Fußleiste in allen Positionsfenstern und im Messen (User 22.10.2026): drei Plätze, feste Breiten —
   links Zurück, Mitte Weiter (nächste Kachel / nächstes Maß), rechts Übernehmen (schließt das Kapitel ab) */
.fuss3 { display: grid !important; grid-template-columns: 1fr 1.45fr 1.45fr; gap: 10px; }
.fuss3 > button { width: 100%; min-width: 0; height: 48px; padding: 0 12px; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; flex: none; }
.fuss3 > .back, .fuss3 > .pm-back, .fuss3 > .pm-close { border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); }
.fuss3 > .mid, .fuss3 > .pm-next { border: 1.5px solid var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface-1)); color: var(--brand); font-weight: 700; box-shadow: none; }
.fuss3 > .apply, .fuss3 > .pm-ok { border: 0; background: var(--brand); color: var(--on-accent); font-weight: 700; }
.fuss3 > button:disabled { opacity: .32; cursor: default; border-color: var(--line); background: var(--surface-1); color: var(--muted); }
.pm-mov-foot.fuss3 { height: 70px; padding: 0 22px; }   /* gleiche Höhe/Ränder wie .editor-foot → Knöpfe stehen pixelgleich */
/* Element rechts: Raum & Lage als eine große Zeile (User 22.10.2026) */
.rlz { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface-1); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.rlz-t { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.rlz-t b { font-size: 18px; line-height: 1.2; }
.rlz-e { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--brand); }
.rlz-c { font-size: 13px; font-weight: 600; color: var(--txt2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; flex: none; }
.rlz.leer { border-color: var(--brand); } .rlz.leer b { color: var(--brand); }
.rlz.lock { cursor: default; flex-direction: column; align-items: flex-start; border-style: dashed; background: var(--surface-3); }
.rlz-n { font-size: 12px; color: var(--muted); }
/* Antriebe mit Symbol */
.rl-aps { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rlk .rl-aps, .rl-pop .rl-aps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.rlk .ed-pill.rl-ap, .rl-pop .ed-pill.rl-ap { min-height: 52px; font-size: 12px; }
.rlk .rl-aps:has(> :nth-child(3):last-child), .rl-pop .rl-aps:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* Raffstore/ZIP: nur Motoren */
.rlk .rl-k3card svg { width: 36px; height: 34px; }
.ed-pill.rl-ap { height: auto !important; min-height: 58px; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 4px !important; font-size: 12.5px; text-align: center; line-height: 1.15; }
.ed-pill.rl-ap svg { width: 26px; height: 26px; }
.rl-k3card svg { width: 44px; height: 41px; }
/* Symbole größer (User 22.10.2026: „zu klein bei Bedienung und Kastenformen"): füllen die Kachel aus */
.ed-pill.rl-ap svg { width: 36px; height: 36px; }
.rlk .ed-pill.rl-ap, .rl-pop .ed-pill.rl-ap { min-height: 62px; padding: 5px 2px !important; }
.rlk .ed-pill.rl-ap svg, .rl-pop .ed-pill.rl-ap svg { width: 38px; height: 38px; }
.rl-k3card svg { width: 64px; height: 59px; }
.rlk .rl-k3card svg, .rl-pop-k3 .rl-k3card svg { width: 100%; max-width: 64px; height: auto; aspect-ratio: 80 / 74; }
.rlk .rl-k3row:has(svg) .rl-k3card, .rl-pop-k3 .rl-k3card { padding: 4px 3px 6px; gap: 2px; }
.rlk .rl-k3row:has(svg) .rl-k3card .s { display: none; }   /* Untertitel weg, das Bild sagt es */
.rlk .rl-k3card svg, .rl-pop-k3 .rl-k3card svg { aspect-ratio: 66 / 60; }
.rlk .rl-k3row:has(svg) { gap: 5px; }
.rlk .rl-k3row:has(svg) .rl-k3card { padding: 3px 2px 5px; }
.rl-pop-k3:has(svg) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }   /* Auswahl in der Skizze: Kastenformen groß */
.rl-pop-k3:has(svg) .rl-k3card svg { max-width: 118px; }
.rl-pop-k3:has(svg) .rl-k3card .t { font-size: 14px; }
/* Antriebe groß in zwei Reihen (User 22.10.2026): Gurt · Motor · Funk / Solar · Kurbel */
.rlk .rl-aps, .rl-pop .rl-aps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px; }
.rlk .ed-pill.rl-ap, .rl-pop .ed-pill.rl-ap { min-height: 76px; font-size: 14px; font-weight: 700; gap: 4px; }
.rlk .ed-pill.rl-ap svg, .rl-pop .ed-pill.rl-ap svg { width: 44px; height: 44px; }
.rlk .rl-aps.klein { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 5px; }   /* 2. Antrieb: eine Reihe */
.rlk .rl-aps.klein .ed-pill.rl-ap { min-height: 56px; font-size: 12px; }
.rlk .rl-aps.klein .ed-pill.rl-ap svg { width: 32px; height: 32px; }
/* Typ-Kachel groß: Produkte 2×2, Bauformen 3 pro Reihe mit großen Bildern */
.rlk .ed-typ-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px !important; }
.rlk .ed-typ-card { padding: 10px 6px 9px; gap: 6px; }
.rlk .ed-typ-card .ic { height: 62px; }
.rlk .ed-typ-card .ic svg { width: 86px; height: 62px; }
.rlk .ed-typ-card .t { font-size: 14px; }
.rlk .rl-bfrow { gap: 8px; }
.rlk .rl-bfcard { padding: 9px 4px 8px; gap: 5px; }
.rlk .rl-bfcard svg { width: 72px; height: 52px; }
.rlk .rl-bfcard .t { font-size: 13px; }
/* Seite + Wickler-Bohrabstand in der schmalen Spalte je EINE Reihe (gleich breite Knöpfe) */
.rlk .ed-pills.nowrap { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; flex-wrap: nowrap; }
.rlk .ed-pills.nowrap .ed-pill { padding: 0 2px; justify-content: center; font-size: 13px; }

/* Sonderform als Form des Elements (User 23.10.2026): neun Formen passen in eine Reihe, kein Wischen */
.el-vorlagen.sf { grid-auto-columns: calc((100% - 64px) / 9); overflow: visible; }
.el-vorlagen.sf .el-vorlage svg { width: 40px; height: 40px; }
/* Kopplung im Element: kurze Übersicht rechts */
.el-kopbox .el-kop-t { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.el-kopbox .el-kop-n { font-size: 12px; color: var(--muted); line-height: 1.35; }

/* Haustür (24.10.2026): Auswahlknöpfe für Hersteller, Serie, Modell, Oberfläche, Zubehör */
.ht-box { min-height: 0; max-height: calc(100vh - 285px); overflow-y: auto; overflow-x: hidden; }   /* rechte Spalte nie höher als die Skizze, sonst scrollt das Fenster */
.ht-knoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
.ht-knoepfe.fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ht-knoepfe.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ht-knoepfe.modelle { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 168px; overflow-y: auto; }
.ht-knoepfe.zubehoer { grid-template-columns: 1fr; max-height: 230px; overflow-y: auto; }
.ht-knopf { font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; padding: 8px 9px; min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); cursor: pointer; line-height: 1.25; }
.ht-knopf small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.ht-knopf.on { border: 1.5px solid var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--surface-1)); color: var(--brand); }
.ht-knoepfe.fuenf .ht-knopf { text-align: center; font-size: 11.5px; padding: 8px 2px; overflow-wrap: anywhere; }
/* Trend-Modellauswahl: nachgezeichnete Türen (js/haustuer-trend.js) */
.ht-modellbilder { flex: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; max-height: 248px; overflow-y: auto; margin-bottom: 4px; }
.ht-mb { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 5px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); cursor: pointer; }
.ht-mb svg { height: 92px; width: auto; display: block; }
.ht-mb span { font-size: 11.5px; font-weight: 700; font-family: 'IBM Plex Mono', monospace; }
.ht-mb.on { border: 1.5px solid var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--surface-1)); color: var(--brand); }
.ht-hinweise { flex: none; margin: 8px 0 2px; padding: 9px 11px 9px 26px; border-radius: 10px; background: var(--surface-3); color: var(--txt2); font-size: 11.5px; line-height: 1.45; }
.ht-hinweise li + li { margin-top: 3px; }

/* Haustür-Fenster wie Entwurf FRu3zs6dP88NZTRoSiEPJ4: Schritte oben, Tür links groß, rechts halbe Breite mit großen Knöpfen */
.editor-fields.htx-host { overflow: hidden; display: flex; flex-direction: column; }
.htx { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.htx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.htx-step { text-align: left; border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); border-radius: 12px; padding: 9px 12px; font: inherit; min-width: 0; cursor: pointer; }
.htx-step .n { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.htx-step .t { font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; gap: 6px; }
.htx-step .v { font-size: 12.5px; color: var(--txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.htx-step .dot { width: 9px; height: 9px; border-radius: 50%; background: #B45309; flex: none; margin-top: 5px; }
.htx-step .dot.ok { background: #15803D; }
.htx-step.cur { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.htx-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 0; background: var(--surface-1); border: 1px solid var(--line-light); border-radius: 14px; overflow: hidden; }
.htx-pv { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--line-light); min-height: 0; min-width: 0; }
.htx-seg { display: flex; justify-content: center; }
.htx-seg .ed-segs { width: 340px; max-width: 100%; }
.htx-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.htx-stage svg { width: 100%; height: 100%; display: block; }
.htx-stage [data-z] { cursor: pointer; }
.htx-cap { text-align: center; font-size: 13.5px; color: var(--txt2); line-height: 1.45; }
.htx-cap b { display: block; color: var(--ink); font-size: 16px; }
.htx-pane { overflow-y: auto; padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 16px; min-height: 0; min-width: 0; }
.htx-q { display: grid; gap: 8px; flex: none; }
.htx-ql { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.htx-btns { display: grid; gap: 8px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.htx-b { border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); border-radius: 12px; min-height: 52px; padding: 8px 10px; font: inherit; font-weight: 600; font-size: 15px; text-align: center; line-height: 1.25; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.htx-b.klein { font-size: 14px; font-weight: 500; }
.htx-b small { font-size: 12px; font-weight: 500; color: var(--muted); }
.htx-b svg { width: 34px; height: 44px; flex: none; }
.htx-b[aria-pressed="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface-1)); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.htx-b[aria-pressed="true"] small { color: var(--brand); }
.htx-felder { margin: 0; }
.htx-hint { font-size: 13px; color: var(--txt2); background: var(--surface-3); border-radius: 10px; padding: 9px 12px; line-height: 1.45; margin: 0; }
.htx-hint.warn { color: #8A5200; background: #FFF7E6; border: 1px solid #F2D9A0; }
.htx-hint.liste { padding-left: 28px; }
.htx-hint.liste li + li { margin-top: 3px; }
.htx-models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: 288px; overflow-y: auto; padding: 2px; border-radius: 12px; }
.htx-mc { border: 1px solid var(--line); background: #fff; color: #16181C; border-radius: 12px; padding: 8px 6px 6px; cursor: pointer; display: grid; gap: 4px; justify-items: center; font: inherit; min-width: 0; }
.htx-mc svg { height: 92px; width: auto; display: block; }
.htx-mc span { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.htx-mc[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.htx-klapp { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--surface-3); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; min-height: 52px; cursor: pointer; }
.htx-klapp b { display: block; font-size: 15px; }
.htx-klapp small { display: block; font-size: 12.5px; color: var(--txt2); margin-top: 2px; }
.htx-klapp i { font-style: normal; font-size: 22px; font-weight: 600; color: var(--brand); flex: none; }
.htx-klapp.auf { border-color: var(--brand); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.htx-klappbox { flex: none; display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--brand); border-top: 0; border-radius: 0 0 12px 12px; padding: 14px; margin-top: -16px; }
/* Haustür im Fenster-Gerüst (Element + Ausstattung, 26.10.2026): etwas breitere rechte Spalte, große Knöpfe */
.el-main.htw { grid-template-columns: minmax(0, 1fr) 340px; }
.el-main.htw > .el-card { position: sticky; top: 0; }
.el-vl-wrap.ht { height: 100px; }   /* so hoch wie die Kacheln der Ausstattung → Skizze steht beim Wechsel pixelgenau an derselben Stelle (wie beim Fenster) */
.el-vl-wrap.ht .el-vorlage { padding: 5px 4px 4px; gap: 2px; }
.el-vl-wrap.ht .el-vorlage svg { width: 34px; height: 37px; }   /* Haustür-Element: Skizze bleibt stehen, während rechts gescrollt wird (live mitsehen) */
.hte-box { min-width: 0; }   /* scrollt mit der rechten Spalte (siehe „Seite fest“ unten) */
.hte-btns { display: grid; gap: 6px; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); margin-bottom: 2px; }
.hte-b { border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); border-radius: 10px; min-height: 44px; padding: 7px 8px; font: inherit; font-weight: 600; font-size: 13.5px; line-height: 1.25; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.hte-b.links { text-align: left; align-items: flex-start; font-weight: 500; }
.hte-b small { font-size: 11px; font-weight: 500; color: var(--muted); }
.hte-b[aria-pressed="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--surface-1)); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.hte-b[aria-pressed="true"] small { color: var(--brand); }
.hte-hint { font-size: 12px; color: var(--txt2); background: var(--surface-3); border-radius: 9px; padding: 8px 10px; line-height: 1.45; margin: 8px 0 2px; }
.hte-hint.warn { color: #8A5200; background: #FFF7E6; border: 1px solid #F2D9A0; }
.hte-hint.liste { padding-left: 24px; }
.hte-hint.liste li + li { margin-top: 3px; }
.hte-inline + .hte-inline { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-light); }
.hte-inline > .ed-segs { width: 150px; flex: none; }
/* Zweiter Flügel: selten → klein und ruhig ganz unten im Element (User 30.10.2026) */
.el-box.ht-zweit { background: transparent; border-style: dashed; padding-top: 8px; padding-bottom: 8px; }
.ht-zweit .el-lbl { color: var(--muted); }
.ht-zweit .hte-inline > .ed-segs { width: 204px; }
.ht-zweit .ed-seg { height: 36px; font-size: 12.5px; font-weight: 500; border-radius: 9px; }
.ht-zweit .hte-hint { margin-top: 6px; font-size: 11.5px; padding: 6px 9px; }
.hte-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hte-models .htx-mc svg { height: 80px; }
/* FENNEN: Beispieltüren als Fotos (Preisliste) — Antippen übernimmt die Tür */
.htf-fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.htf-foto { border: 1px solid var(--line); background: #fff; color: #16181C; border-radius: 12px; padding: 5px 5px 6px; cursor: pointer; display: grid; gap: 2px; justify-items: center; font: inherit; min-width: 0; text-align: center; }
.htf-foto img { width: 100%; aspect-ratio: 1 / 2; object-fit: cover; border-radius: 7px; display: block; background: var(--surface-3); }
.htf-foto span { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.htf-foto small { font-size: 10.5px; color: var(--muted); line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htf-foto[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.el-vorlage span small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.el-vorlage.on span small { color: var(--brand); }
/* Aufklappbare Gruppen (Extras, Montage): erst antippen, dann Auswahl */
.hte-breite { margin-bottom: 4px; }
.hte-breite .ed-input { max-width: 240px; }
.hte-breite small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.hte-gk { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--surface-1); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; min-height: 48px; margin-top: 6px; cursor: pointer; }
.hte-gk b { display: block; font-size: 13.5px; }
.hte-gk small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.hte-gk.an small { color: var(--brand); }
.hte-gk i { font-style: normal; font-size: 20px; font-weight: 600; color: var(--brand); flex: none; }
.hte-gk.auf { border-color: var(--brand); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hte-gi { border: 1px solid var(--brand); border-top: 0; border-radius: 0 0 10px 10px; padding: 8px; }
/* Griff: außen und innen als getrennte Felder */
.hte-teil { border: 1px solid var(--line); border-radius: 12px; padding: 4px 10px 10px; margin-top: 8px; }
.hte-th { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--ink); padding: 6px 0 0; }
.hte-sw { display: block; width: 26px; height: 12px; border-radius: 4px; border: 1px solid rgba(0,0,0,.25); }
/* Zubehör frei: Eingabe + Knopf in der aufgeklappten Gruppe (User 28.10.2026) */
.hte-frei { display: flex; gap: 8px; margin-top: 8px; }
.hte-frei input { flex: 1; min-width: 0; height: 48px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 16px; background: var(--surface-1); color: var(--ink); outline: none; }
.hte-frei input:focus { border-color: var(--brand); }
.hte-frei .hte-b { flex: none; width: auto; padding: 0 16px; }

/* ===== Seite fest, nur die rechte Spalte scrollt (User 30.10.2026) =====
   Gilt für alle Editor-Fenster mit Skizze links und Auswahl rechts (Element, Ausstattung, Glas, Rollladen, Haustür):
   Das Fenster selbst scrollt nicht mehr. Die rechte Spalte ist genau so hoch wie die Karte links und scrollt allein;
   die letzte Box wächst bis unten, damit beide Spalten bündig abschließen. Die Skizze passt sich der Höhe an. */
.editor-fields:has(> .el-root) { overflow: hidden; display: flex; flex-direction: column; }
.editor-fields > .el-root { flex: 1; min-height: 0; }
.el-root > .el-main { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.el-root > .el-main > .el-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.el-root > .el-main > .el-card > .el-svgbox { flex: 1; min-height: 0; align-items: center; }
.el-root > .el-main > .el-card > .el-svgbox > .el-svg { max-height: 100%; }
.el-root > .el-main > .el-side { min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.el-root > .el-main > .el-side > .el-box:last-child { flex-grow: 1; }
.kbd-open .editor-fields:has(> .el-root) { padding-bottom: 14px; }   /* Tastatur: Platz unten in der Spalte statt im Fenster */
.kbd-open .el-root > .el-main > .el-side { padding-bottom: 45vh; }