.spiLaunchCard {
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, white), #fff 58%);
}
.spiKicker {
  display: inline-block;
  margin-bottom: 7px;
  color: var(--primary-dark);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.spiLaunchMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.spiLaunchMeta span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
}
body.spiModalOpen { overflow: hidden; }
.spiModal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  padding: 4px;
  background: rgba(8, 18, 22, .78);
  backdrop-filter: blur(7px);
}
.spiModal.open { display: block; }
.spiShell {
  width: min(1920px, 100%);
  height: calc(100vh - 8px);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 28px 90px rgba(0,0,0,.35);
}
.spiHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 15px;
  border-bottom: 1px solid var(--line);
}
.spiHeader h2 { margin: 0; font-size: 1.2rem; }
.spiHeader p { margin: 5px 0 0; color: var(--muted); font-size: .86rem; }
.spiHeaderActions { display: flex; align-items: center; gap: 9px; }
.spiClose {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: #eef2f1;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
}
.spiToolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #f8faf9;
}
.spiToolGroup {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 9px;
  border-right: 1px solid var(--line);
}
.spiToolGroup:last-child { border-right: 0; }
.spiToolbar button {
  border: 1px solid #cbd7d4;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  padding: 7px 9px;
  font-size: .76rem;
  font-weight: 800;
}
.spiToolbar button:hover { border-color: var(--primary); }
.spiToolbar button.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary-dark);
}
.spiToolbar button:disabled { opacity: .4; cursor: default; }
.spiToolbar span { min-width: 72px; text-align: center; color: var(--muted); font-size: .76rem; font-weight: 800; }
.spiWorkspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(320px, .62fr);
}
.spiPlanPane {
  min-width: 0;
  min-height: 0;
  padding: 14px;
  background: #dfe5e3;
}
.spiCanvasHost {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: grid;
  place-items: start center;
  padding: 12px;
  border-radius: 12px;
  background:
    linear-gradient(45deg, #eef2f1 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(-45deg, #eef2f1 25%, transparent 25%) 0 10px / 20px 20px,
    linear-gradient(45deg, transparent 75%, #eef2f1 75%) 10px -10px / 20px 20px,
    linear-gradient(-45deg, transparent 75%, #eef2f1 75%) -10px 0 / 20px 20px,
    #f8faf9;
}
.spiCanvasWrap { position: relative; line-height: 0; box-shadow: 0 6px 24px rgba(21,36,32,.15); background:#fff; }
#spiCanvas { display: block; max-width: none; background: white; }
.spiOverlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: auto;
  touch-action: none;
}
.spiOverlay.drawing { cursor: crosshair; }
.spiMark { fill: rgba(54,166,47,.09); stroke: #36a62f; stroke-width: 2; vector-effect: non-scaling-stroke; }
.spiMarkWindow { fill: rgba(52,135,214,.09); stroke: #3487d6; }
.spiMarkDoor { fill: rgba(232,153,45,.10); stroke: #e8992d; }
.spiMarkElement { fill: rgba(142,84,185,.08); stroke: #8e54b9; }
.spiPlanEmpty {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
}
.spiResultsPane {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  border-left: 1px solid var(--line);
  background: #fff;
}
.spiSummaryGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.spiSummaryGrid > div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8faf9;
}
.spiSummaryGrid small { display: block; color: var(--muted); font-size: .69rem; font-weight: 800; }
.spiSummaryGrid strong { display: block; margin-top: 3px; font-size: .96rem; }
.spiResultHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 8px;
}
.spiResultHead h3 { margin: 0; font-size: .94rem; }
.spiResultList { display: grid; gap: 7px; }
.spiResultRow,
.spiElementRow {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.spiElementRow { grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; }
.spiPick { width: 17px; height: 17px; margin-top: 8px; }
.spiRoomFields { min-width: 0; display: grid; gap: 6px; }
.spiRoomFields > input,
.spiMiniGrid input,
.spiMiniGrid select { padding: 7px 8px; border-radius: 8px; font-size: .78rem; }
.spiRoomFields > input { font-weight: 850; }
.spiMiniGrid { display: grid; grid-template-columns: 1.2fr .7fr .7fr; gap: 5px; }
.spiMeta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; color: var(--muted); font-size: .67rem; font-weight: 750; }
.spiElementRow strong { display: block; font-size: .78rem; }
.spiElementRow small { display: block; margin-top: 2px; color: var(--muted); font-size: .67rem; }
.spiConfidence {
  display: inline-flex;
  align-items: center;
  min-width: 47px;
  justify-content: center;
  padding: 4px 6px;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 900;
}
.spiConfidence.good { background: #e7f5e5; color: #277124; }
.spiConfidence.medium { background: #fff2dc; color: #8c5a0c; }
.spiConfidence.low { background: #fde9e9; color: #a43a3a; }
.spiIconButton {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: #f1f4f3;
  color: #7b8985;
  font-size: 1.1rem;
  line-height: 1;
}
.spiEmpty {
  padding: 12px;
  border: 1px dashed #c8d4d1;
  border-radius: 10px;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.45;
}
.spiNotes {
  margin-top: 13px;
  padding: 10px;
  border-radius: 10px;
  background: #fff7e8;
  color: #745016;
  font-size: .74rem;
  line-height: 1.45;
}
.spiNotes strong { display: block; margin-bottom: 4px; }
.spiFooter {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.spiImportOptions { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.spiImportOptions label { font-size: .75rem; }
.spiImportOptions select { min-width: 230px; padding: 8px 9px; }
.spiCheck { display: flex; grid-template-columns: none; align-items: center; gap: 7px; padding-bottom: 8px; }
.spiCheck input { width: 17px; height: 17px; }
.spiFooterActions { display: flex; gap: 8px; }

@media (max-width: 1080px) {
  .spiModal { padding: 8px; }
  .spiShell { height: calc(100vh - 16px); }
  .spiWorkspace { grid-template-columns: 1fr; overflow: auto; }
  .spiPlanPane { min-height: 52vh; }
  .spiResultsPane { border-left: 0; border-top: 1px solid var(--line); }
  .spiFooter { align-items: stretch; flex-direction: column; }
  .spiFooterActions { justify-content: flex-end; }
}

@media (max-width: 700px) {
  .spiHeader { padding: 12px; }
  .spiHeaderActions .secondary { display: none; }
  .spiToolbar { padding: 8px; }
  .spiToolGroup { width: 100%; overflow-x: auto; border-right: 0; padding-right: 0; }
  .spiPlanPane { padding: 8px; min-height: 45vh; }
  .spiResultsPane { padding: 10px; }
  .spiMiniGrid { grid-template-columns: 1fr 1fr; }
  .spiMiniGrid select { grid-column: 1 / -1; }
  .spiFooterActions { display: grid; grid-template-columns: 1fr 1fr; }
}
.spiElementFields { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 5px; align-items: center; }
.spiElementFields input, .spiElementFields select { padding: 6px 7px; border-radius: 7px; font-size: .72rem; }
.spiElementFields small { grid-column: 1 / -1; color: var(--muted); }
@media (max-width: 700px) { .spiElementFields { grid-template-columns: 1fr; } .spiElementFields small { grid-column: 1; } }


/* Grundrissimport V2: verständliche Texterkennung und mehrere Geschosspläne */
.spiSourceFiles {
  padding: 8px 16px 0;
  background: #fff;
}
.spiSourceFiles:empty { display: none; }
.spiSourceFiles small { display: block; margin-bottom: 5px; color: #64736f; font-weight: 800; }
.spiSourceFiles > div { display: flex; flex-wrap: wrap; gap: 6px; }
.spiSourceFiles span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #d6e1de; border-radius: 999px; background: #f7faf9; font-size: .76rem; color: #33433f; }
.spiSourceFiles span strong { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e8f5e7; color: #247521; font-size: .7rem; }
.spiRecognitionButtons { flex-wrap: wrap; }
.spiRecognitionButtons button { white-space: normal; line-height: 1.2; }
.spiRecognitionHelp { display: flex; gap: 10px; align-items: flex-start; padding: 9px 16px; border-top: 1px solid #e4ebe8; border-bottom: 1px solid #e4ebe8; background: #f7faf9; font-size: .78rem; line-height: 1.45; color: #53635f; }
.spiRecognitionHelp strong { color: #247521; white-space: nowrap; }
.spiRecognitionHelp b { color: #26322f; }
@media (max-width: 900px) {
  .spiRecognitionHelp { flex-direction: column; gap: 3px; }
  .spiRecognitionHelp strong { white-space: normal; }
}

/* Grundrissimport V3: zuschneidbare Analysebereiche für große Einreichpläne */
.spiMarkCrop {
  fill: rgba(36, 117, 33, .035);
  stroke: #247521;
  stroke-width: 3;
  stroke-dasharray: 10 6;
}
.spiCropLabel {
  fill: #1f5f1d;
  font-size: 13px;
  font-weight: 900;
  paint-order: stroke;
  stroke: rgba(255,255,255,.95);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}
.spiRegionRecognition {
  border-color: color-mix(in srgb, var(--primary) 58%, #cbd7d4) !important;
  background: color-mix(in srgb, var(--primary) 9%, white) !important;
  color: var(--primary-dark) !important;
}
.spiRegionPanel {
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 3%, white);
}
.spiRegionPanel .spiResultHead { margin: 0 0 8px; }
.spiRegionHeadActions {
  display: flex;
  align-items: center;
  gap: 7px;
}
.spiRegionHeadActions > span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
}
.spiRegionList { display: grid; gap: 7px; }
.spiRegionRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}
.spiRegionFields { min-width: 0; display: grid; gap: 5px; }
.spiRegionFields > input {
  padding: 7px 8px;
  border-radius: 7px;
  font-size: .75rem;
  font-weight: 850;
}
.spiRegionFields > div {
  display: flex;
  align-items: end;
  gap: 8px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 750;
}
.spiRegionFields label {
  width: 95px;
  gap: 3px;
  color: var(--muted);
  font-size: .65rem;
}
.spiRegionFields label input {
  padding: 5px 6px;
  border-radius: 7px;
  font-size: .72rem;
}
@media (max-width: 700px) {
  .spiRegionHeadActions { align-items: flex-end; flex-direction: column; }
  .spiRegionRow { grid-template-columns: 1fr auto; }
  .spiRegionRow .spiRegionFields { grid-column: 1 / -1; }
}

/* Grundrissimport V4: echter Ausschnitt, bessere Analyse und einklappbarer Startbereich */
.spiLaunchHead { margin-bottom: 0; align-items: center; }
.spiLaunchToggle { white-space: nowrap; }
.spiLaunchBody { margin-top: 14px; }
.spiLaunchIntroRow { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.spiLaunchIntroRow > p { margin: 0; max-width: 850px; color: var(--muted); line-height: 1.5; }
.spiLaunchCard.collapsed { padding-top: 18px; padding-bottom: 18px; }
.spiLaunchCard.collapsed .spiLaunchBody { display: none; }
.spiCropViewBadge { min-width: 0 !important; padding: 5px 8px; border-radius: 999px; background: #e8f5e7; color: #247521 !important; font-size: .7rem !important; font-weight: 900 !important; white-space: nowrap; }
#spiShowFullPage { border-color: color-mix(in srgb, var(--primary) 35%, #cbd7d4); }
.spiCanvasHost.isCropped { place-items: start center; }
@media (max-width: 850px) {
  .spiLaunchIntroRow { flex-direction: column; }
  .spiLaunchIntroRow .inline-buttons { width: 100%; }
}


/* V5 geführter Grundriss Import */
.spiRecognitionButtons { display: none !important; }
.spiGuide {
  padding: 14px 16px 15px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.spiGuideSteps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 12px;
}
.spiGuideSteps span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: #f8faf9;
  font-size: .72rem;
  font-weight: 800;
}
.spiGuideSteps b {
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8efed;
  color: #53635f;
  font-size: .7rem;
}
.spiGuideSteps span.active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  background: color-mix(in srgb, var(--primary) 8%, white);
  color: var(--primary-dark);
}
.spiGuideSteps span.active b,
.spiGuideSteps span.done b {
  background: var(--primary);
  color: #fff;
}
.spiGuideSteps span.done { color: var(--primary-dark); }
.spiGuideMain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 13px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, white), #fff 60%);
}
.spiGuideCopy { min-width: 0; }
.spiGuideCopy small {
  display: block;
  margin-bottom: 4px;
  color: var(--primary-dark);
  font-weight: 900;
}
.spiGuideCopy h3 { margin: 0; font-size: 1.08rem; }
.spiGuideCopy p { margin: 5px 0 0; max-width: 900px; color: var(--muted); line-height: 1.45; }
.spiGuideActions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.spiGuideActions button { white-space: nowrap; }
.spiGuideResult {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: .78rem;
}
.spiGuideResult[hidden] { display: none !important; }
.spiGuideResult.success { background: #eaf7e8; color: #246c22; }
.spiGuideResult.warning { background: #fff3df; color: #84540b; }
.spiGuideResult strong { font-size: .84rem; }
.spiGuideResult span { color: inherit; }
.spiLaunchCard.collapsed .spiLaunchHead { margin-bottom: 0; }
.spiLaunchCard.collapsed .spiLaunchToggle { background: color-mix(in srgb, var(--primary) 8%, white); }
#spiImportRooms:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 980px) {
  .spiGuideSteps { grid-template-columns: 1fr; }
  .spiGuideSteps span { display: none; }
  .spiGuideSteps span.active { display: flex; }
  .spiGuideMain { flex-direction: column; align-items: stretch; }
  .spiGuideActions { justify-content: flex-start; }
}

/* V6: klarer Ablauf, sichtbare Auswahl, Punktmarkierung, Zoom und Referenzmaßstab */
.spiLaunchIntroRow .spiLaunchActions {
  margin-left: auto;
  width: auto;
  min-width: 300px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  align-self: flex-start;
}
.spiLaunchIntroRow .spiLaunchActions button { width: 100%; }
.spiLaunchIntroRow > p { flex: 1 1 auto; max-width: 940px; }

.spiMarkCropDraft {
  fill: rgba(54,166,47,.12);
  stroke: #2a9c2d;
  stroke-width: 4;
  stroke-dasharray: 12 7;
}
.spiGeometry { stroke-width: 3; vector-effect: non-scaling-stroke; }
.spiGeometry.spiMarkRoom { fill: rgba(54,166,47,.12); }
.spiGeometry.spiMarkDoor,
.spiGeometry.spiMarkWindow { fill: none; }
.spiVertex {
  fill: #fff;
  stroke: #26322f;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.spiLiveGeometry {
  fill: rgba(54,166,47,.10);
  stroke: #1f8f2d;
  stroke-width: 3;
  stroke-dasharray: 8 5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.spiLiveGeometry.line { fill: none; }
.spiLiveVertex {
  fill: #fff;
  stroke: #1f8f2d;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.spiVertexNumber {
  fill: #155c1e;
  font-size: 13px;
  font-weight: 900;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
  pointer-events: none;
}
.spiScaleLine {
  stroke: #d17b00;
  stroke-width: 4;
  stroke-dasharray: 9 5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.spiScaleLabel {
  fill: #9b5c00;
  font-size: 13px;
  font-weight: 900;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
  pointer-events: none;
}

.spiDrawingBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid #b8d9b6;
  background: #eef8ec;
}
.spiDrawingBar[hidden] { display: none !important; }
.spiDrawingBar > div:first-child { display: grid; gap: 2px; min-width: 0; }
.spiDrawingBar strong { color: #1f7024; font-size: .82rem; }
.spiDrawingBar span { color: #53635f; font-size: .76rem; line-height: 1.35; }
.spiDrawingActions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.spiDrawingActions button { white-space: nowrap; }

.spiZoomGroup { gap: 7px; }
.spiZoomGroup .spiToolLabel {
  min-width: auto;
  color: #26322f;
  font-weight: 900;
}
#spiZoomRange {
  width: 130px;
  min-width: 90px;
  padding: 0;
  accent-color: var(--primary);
}
#spiZoomStatus { min-width: 48px; }

.spiMainTools { flex-wrap: wrap; }

@media (max-width: 980px) {
  .spiLaunchIntroRow .spiLaunchActions { min-width: 260px; }
  .spiDrawingBar { align-items: stretch; flex-direction: column; }
  .spiDrawingActions { justify-content: flex-start; }
}
@media (max-width: 850px) {
  .spiLaunchIntroRow .spiLaunchActions { width: 100%; min-width: 0; margin-left: 0; }
}
.spiShell { grid-template-rows: auto auto auto auto auto 1fr auto; }
/* In den ersten Schritten nur die Werkzeuge zeigen, die wirklich gebraucht werden. */
.spiModal[data-guide-step="1"] .spiMainTools [data-spi-tool]:not([data-spi-tool="select"]),
.spiModal[data-guide-step="2"] .spiMainTools [data-spi-tool="room"],
.spiModal[data-guide-step="2"] .spiMainTools [data-spi-tool="door"],
.spiModal[data-guide-step="2"] .spiMainTools [data-spi-tool="window"],
.spiModal[data-guide-step="2"] .spiMainTools [data-spi-tool="element"],
.spiModal[data-guide-step="2"] .spiMainTools [data-spi-tool="scale"],
.spiModal[data-guide-step="3"] .spiMainTools [data-spi-tool="room"],
.spiModal[data-guide-step="3"] .spiMainTools [data-spi-tool="door"],
.spiModal[data-guide-step="3"] .spiMainTools [data-spi-tool="window"],
.spiModal[data-guide-step="3"] .spiMainTools [data-spi-tool="element"] {
  display: none;
}
.spiScaleSummary button {
  margin-top: 7px;
  width: 100%;
  padding: 6px 7px;
  font-size: .68rem;
}

/* Smart Home Planer Pro: vereinfachte Plan-Auswertung und gemeinsame Gebäudebasis */
.spiPanelTitle { margin: 2px 0 12px; }
.spiPanelTitle h3 { margin: 3px 0 4px; font-size: 1.05rem; }
.spiPanelTitle p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.spiSummaryGrid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.spiSummaryWide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 8px; }
.spiSummaryWide small { grid-column: 1 / -1; }
.spiQuickAddGrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 7px; margin: 10px 0 12px; }
.spiQuickAddGrid button { padding: 9px 10px; border-radius: 9px; }
.spiInspectorCard { padding: 12px; border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--primary) 5%, white); box-shadow: 0 7px 20px rgba(20,46,40,.07); }
.spiInspectorTitle { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.spiInspectorTitle small { display: block; color: var(--muted); font-size: .66rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.spiInspectorTitle strong { display: block; margin-top: 2px; font-size: .96rem; }
.spiInspectorCard label { font-size: .72rem; }
.spiInspectorCard input, .spiInspectorCard select { padding: 7px 8px; border-radius: 8px; font-size: .78rem; }
.spiInspectorGrid { display: grid; grid-template-columns: 1.25fr .72fr .75fr; gap: 6px; margin-top: 7px; }
.spiInspectorActions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.spiInspectorHint { margin: 8px 0 0; color: var(--muted); font-size: .69rem; line-height: 1.4; }
.spiInspectorEmpty { padding: 12px; border: 1px dashed var(--line); border-radius: 11px; background: #fafcfb; }
.spiInspectorEmpty strong, .spiInspectorEmpty span { display:block; }
.spiInspectorEmpty span { margin-top: 3px; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.spiRoomListItem { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text); text-align:left; }
.spiRoomListItem:hover { border-color: color-mix(in srgb, var(--primary) 58%, var(--line)); background: color-mix(in srgb, var(--primary) 3%, white); }
.spiRoomListItem.active { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 12%, transparent); background: color-mix(in srgb, var(--primary) 6%, white); }
.spiRoomListMain { min-width:0; display:grid; gap:2px; }
.spiRoomListMain strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8rem; }
.spiRoomListMain small { color:var(--muted); font-size:.68rem; }
.spiElementCompact { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 9px; border:1px solid var(--line); border-radius:9px; }
.spiElementCompact span { min-width:0; }
.spiElementCompact strong, .spiElementCompact small { display:block; }
.spiElementCompact strong { font-size:.76rem; }
.spiElementCompact small { color:var(--muted); font-size:.66rem; margin-top:2px; }
.spiDetails { margin-top:12px; border-top:1px solid var(--line); padding-top:9px; }
.spiDetails summary { cursor:pointer; font-size:.76rem; font-weight:850; color:#3c4a47; }
.spiDetails[open] summary { margin-bottom:8px; }
.spiHelpText { color:var(--muted); font-size:.68rem; font-weight:750; }
.danger-lite { color:#9b3838 !important; border-color:#ecc7c7 !important; }
.spiToolbar .primary-soft { border-color: color-mix(in srgb, var(--primary) 50%, #cbd7d4); background: color-mix(in srgb, var(--primary) 9%, white); color:var(--primary-dark); }
.spiMarkRoom { fill: rgba(54,166,47,.12); stroke: #36a62f; stroke-width:2.2; cursor:pointer; }
.spiMarkRoom:hover { fill: rgba(54,166,47,.20); }
.spiMarkActive { fill: rgba(54,166,47,.24) !important; stroke-width:3.2 !important; filter: drop-shadow(0 2px 3px rgba(20,80,35,.18)); }
.spiMarkEditing { stroke-dasharray:8 5; }
.spiRoomLabel { fill:#173d20; font-size:12px; font-weight:900; paint-order:stroke; stroke:rgba(255,255,255,.96); stroke-width:3.5px; stroke-linejoin:round; pointer-events:auto; cursor:pointer; }
.spiEditableVertex { fill:#fff; stroke:#247521; stroke-width:3; cursor:grab; vector-effect:non-scaling-stroke; }
.spiEditableVertex:active { cursor:grabbing; }
.spiLiveGeometry.area { fill: rgba(54,166,47,.15); }
.spiDrawingBar { position:relative; z-index:8; }
.spiMainTools button { white-space:nowrap; }

@media (max-width: 1250px) {
  .spiSummaryGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .spiQuickAddGrid { grid-template-columns: 1fr 1fr; }
  .spiQuickAddGrid .primary { grid-column:1 / -1; }
  .spiInspectorGrid { grid-template-columns:1fr 1fr; }
  .spiInspectorGrid label:first-child { grid-column:1 / -1; }
}
@media (max-width: 700px) {
  .spiSummaryGrid { grid-template-columns:1fr 1fr; }
  .spiInspectorGrid, .spiQuickAddGrid { grid-template-columns:1fr; }
  .spiQuickAddGrid .primary, .spiInspectorGrid label:first-child { grid-column:auto; }
}

/* V48: sichtbare Planungsgenauigkeit und einfachere Zeichenbedienung */
.spiAccuracyCard {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #d7e4de;
  border-radius: 14px;
  background: #f8fbf9;
}
.spiAccuracyHead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.spiAccuracyHead strong { font-size: .98rem; }
.spiAccuracyLevel {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: #edf3f0;
  color: #52635e;
  font-size: .72rem;
  font-weight: 800;
}
.spiAccuracyCard p { margin: 8px 0 10px; color: #596b65; line-height: 1.45; }
.spiAccuracyCard small { display: block; margin-top: 9px; color: #64736f; line-height: 1.45; }
.spiAccuracyFacts { display: flex; gap: 7px; flex-wrap: wrap; }
.spiAccuracyFacts span {
  padding: 5px 8px;
  border: 1px solid #d7e0dd;
  border-radius: 999px;
  background: #fff;
  color: #77827f;
  font-size: .74rem;
  font-weight: 800;
}
.spiAccuracyFacts span::before { content: "○ "; }
.spiAccuracyFacts span.ok { border-color: #a9d5ad; background: #eef8ef; color: #2c7a32; }
.spiAccuracyFacts span.ok::before { content: "✓ "; }
.spiShortcutHint {
  align-self: center;
  color: #64736f;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .spiAccuracyLevel { margin-left: 0; }
  .spiShortcutHint { width: 100%; white-space: normal; }
}

/* unsichere geometrische Treffer klar kennzeichnen */
.spiMarkRoom.spiMarkUncertain { fill: rgba(240, 160, 32, .12) !important; stroke: #d58a16 !important; stroke-dasharray: 8 5; }


/* Raumbezogene Fenster und Türzuordnung */
.spiRoomOpeningSummary{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 8px}.spiRoomOpeningSummary span{display:inline-flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid #d7e4df;border-radius:9px;background:#f7faf9;font-size:.78rem}.spiRoomOpeningActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0}.spiElementAssignable{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.spiElementMain{min-width:0}.spiElementRoomAssign{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;font-size:.76rem;font-weight:800;color:#62706c}.spiElementRoomAssign select{padding:7px 9px;font-size:.78rem}.spiQuickAddGrid .secondary{white-space:normal}@media(max-width:760px){.spiRoomOpeningActions{grid-template-columns:1fr}.spiElementAssignable{grid-template-columns:1fr}.spiElementRoomAssign{grid-template-columns:1fr}}


/* Maßstab zuerst, aufgeräumte Planelemente und technische Kennungen */
.spiElementNameEdit {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 8px;
  align-items: center;
  color: #62706c;
  font-size: .74rem;
  font-weight: 800;
}
.spiElementNameEdit input { padding: 7px 9px; font-size: .78rem; }
.spiUnassignedDetails { margin-top: 16px; }
.spiUnassignedDetails > summary { color: #7a6240; }
.spiUnassignedDetails .spiHelpText { margin-bottom: 8px; line-height: 1.4; }
.spiTechnicalIdList { display: grid; gap: 8px; }
.spiIdRoom {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafcfb;
}
.spiIdRoomHead { display: grid; gap: 3px; }
.spiIdRoomHead strong { font-size: .78rem; }
.spiIdRoomHead small, .spiTechnicalIdList li small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .64rem;
  overflow-wrap: anywhere;
}
.spiTechnicalIdList code {
  padding: 2px 5px;
  border-radius: 5px;
  background: #edf3f0;
  color: #27453d;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .7rem;
  font-weight: 800;
}
.spiTechnicalIdList details { margin-top: 7px; }
.spiTechnicalIdList summary { font-size: .7rem; }
.spiTechnicalIdList ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 5px; }
.spiTechnicalIdList li { color: #465650; font-size: .72rem; }
.spiIdMaster {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #b8d9b6;
  border-radius: 10px;
  background: #eef8ec;
}
.spiIdMaster strong { color: #256d28; font-size: .78rem; }
.spiIdMaster span, .spiIdMaster small { color: #52635e; font-size: .69rem; }
@media (max-width: 1250px) {
  .spiGuideSteps { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .spiElementNameEdit { grid-template-columns: 1fr; }
}
.spiModal[data-guide-step="1"] #spiQuickRoom,
.spiModal[data-guide-step="1"] #spiQuickWindow,
.spiModal[data-guide-step="1"] #spiQuickDoor,
.spiModal[data-guide-step="2"] #spiQuickRoom,
.spiModal[data-guide-step="2"] #spiQuickWindow,
.spiModal[data-guide-step="2"] #spiQuickDoor,
.spiModal[data-guide-step="3"] #spiQuickRoom,
.spiModal[data-guide-step="3"] #spiQuickWindow,
.spiModal[data-guide-step="3"] #spiQuickDoor,
.spiModal[data-guide-step="4"] #spiQuickRoom,
.spiModal[data-guide-step="4"] #spiQuickWindow,
.spiModal[data-guide-step="4"] #spiQuickDoor { display: none; }
.spiOpeningLabel {
  fill: #334640;
  font-size: 10px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(255,255,255,.96);
  stroke-width: 3px;
  pointer-events: none;
}


/* Fenster und Türen direkt je Raum gruppiert */
.spiRoomListGroup{border:1px solid transparent;border-radius:11px;padding:2px;transition:border-color .15s ease,background .15s ease}
.spiRoomListGroup.active{border-color:color-mix(in srgb,var(--primary) 28%,var(--line));background:color-mix(in srgb,var(--primary) 3%,white)}
.spiRoomListGroup .spiRoomListItem{width:100%}
.spiRoomInlineOpenings{margin:6px 7px 7px;padding:7px 8px;border:1px solid #dce7e3;border-radius:9px;background:#fff}
.spiRoomInlineOpenings summary{cursor:pointer;font-size:.72rem;font-weight:850;color:#41504c;user-select:none}
.spiRoomInlineOpenings[open] summary{margin-bottom:7px}
.spiRoomInlineOpeningList{display:grid;gap:6px}
.spiRoomOpeningItem{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.9fr);gap:8px;align-items:end;padding:7px;border:1px solid #e1eae7;border-radius:8px;background:#fafcfb}
.spiRoomOpeningItem>span strong,.spiRoomOpeningItem>span small{display:block}
.spiRoomOpeningItem>span strong{font-size:.74rem}.spiRoomOpeningItem>span small{margin-top:2px;color:var(--muted);font-size:.64rem}
.spiRoomOpeningItem label{font-size:.66rem}.spiRoomOpeningItem input{padding:6px 7px;font-size:.74rem}
.spiRoomInlineEmpty{margin-top:6px;padding:8px}
@media(max-width:760px){.spiRoomOpeningItem{grid-template-columns:1fr}}


/* Grundriss Notizen und Ausgabe */
.spiAnnotationGroup { cursor: pointer; }
.spiAnnotationBg { fill: rgba(255,255,255,.94); stroke: #247521; stroke-width: 1.5; filter: drop-shadow(0 2px 4px rgba(20,32,29,.12)); }
.spiAnnotationText { fill: #14201d; font-weight: 800; pointer-events: all; }
.spiPlanPrintModal { position: fixed; inset: 0; z-index: 10080; display: none; place-items: center; padding: 24px; background: rgba(10,25,30,.66); backdrop-filter: blur(7px); }
.spiPlanPrintModal.open { display: grid; }
.spiPlanPrintShell { width: min(700px, 96vw); border-radius: 22px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.25); overflow: hidden; border: 1px solid #d6e1de; }
.spiPlanPrintShell header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:24px 26px 18px; border-bottom:1px solid #e4ebe8; }
.spiPlanPrintShell h3 { margin:4px 0 4px; font-size:1.35rem; }
.spiPlanPrintShell p { margin:0; color:#64736f; }
.spiPlanPrintOptions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:22px 26px; }
.spiPlanPrintOptions label { display:flex; gap:10px; align-items:center; padding:14px 15px; border:1px solid #d6e1de; border-radius:13px; background:#f8fbfa; font-weight:750; }
.spiPlanPrintOptions input { width:auto; }
.spiPlanPrintShell footer { display:flex; justify-content:flex-end; gap:10px; padding:18px 26px 24px; border-top:1px solid #e4ebe8; }
@media (max-width: 720px){ .spiPlanPrintOptions{grid-template-columns:1fr}.spiPlanPrintShell footer{flex-direction:column}.spiPlanPrintShell footer button{width:100%} }


/* raumbezogene Texte und planproportionale Darstellung */
.spiAnnotationRoom .spiAnnotationBg { stroke: #247521; }
.spiAnnotationGeneral .spiAnnotationBg { stroke: #64748b; stroke-dasharray: 5 3; }
.spiRoomObjectActions { grid-template-columns: repeat(3, minmax(0,1fr)); }
.spiRoomInlineNotes { margin-top: 8px; border: 1px solid #d9e4e1; border-radius: 11px; background: #fbfdfc; overflow: hidden; }
.spiRoomInlineNotes > summary { cursor: pointer; padding: 9px 11px; font-size: .78rem; font-weight: 850; color: #29433c; list-style: none; }
.spiRoomInlineNotes > summary::-webkit-details-marker { display:none; }
.spiRoomInlineNotes > summary::before { content:"▸"; margin-right: 6px; color:#36a62f; }
.spiRoomInlineNotes[open] > summary::before { content:"▾"; }
.spiRoomInlineNoteList { display:grid; gap:8px; padding:0 9px 9px; }
.spiRoomNoteItem { display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:8px; align-items:end; padding:8px; border:1px solid #e0e8e6; border-radius:9px; background:#fff; }
.spiRoomNoteItem label { gap:4px; font-size:.7rem; color:#60736d; }
.spiRoomNoteItem input,.spiRoomNoteItem select { padding:7px 8px; font-size:.78rem; }
.spiAnnotationListItem { grid-template-columns:minmax(0,1fr); }
@media (max-width: 900px) {
  .spiRoomObjectActions { grid-template-columns:1fr; }
  .spiRoomNoteItem { grid-template-columns:1fr; }
}

/* Plan Darstellung und verschiebbare Hinweise */
.spiAnnotationGroup { cursor: grab; }
.spiAnnotationGroup:active { cursor: grabbing; }
.spiAnnotationSelected .spiAnnotationBg { stroke-width: 2.6px; filter: drop-shadow(0 4px 8px rgba(36,117,33,.22)); }
.spiDisplayShell { width:min(760px,96vw); }
.spiDisplaySettings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:24px 26px; }
.spiDisplaySettings label,.spiPlanPrintDisplay label { display:grid; gap:7px; padding:15px; border:1px solid #d6e1de; border-radius:14px; background:#f8fbfa; font-weight:800; }
.spiDisplaySettings small,.spiPlanPrintDisplay p { color:#64736f; font-weight:500; line-height:1.45; margin:0; }
.spiPlanPrintDisplay { display:grid; grid-template-columns:minmax(260px,.8fr) 1.2fr; gap:14px; padding:0 26px 22px; align-items:start; }
.spiPlanOutputShell { width:min(760px,96vw); }
@media (max-width:760px){.spiDisplaySettings{grid-template-columns:1fr}.spiPlanPrintDisplay{grid-template-columns:1fr}}

/* Raumfilter und Projektdokumentation */
.spiRoomMask { pointer-events:none; }
.shpExportConfigGrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:16px;margin-top:14px}.shpExportConfigGrid>section{border:1px solid var(--line);border-radius:14px;background:#f8fbfa;padding:15px}.shpExportConfigGrid h3{margin:0 0 10px;font-size:.92rem}.shpExportMiniOptions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px}.shpExportMiniOptions+ h3{margin-top:18px}.shpExportMiniOptions label{display:flex;align-items:center;gap:8px;padding:8px 9px;border:1px solid #dfe8e4;border-radius:9px;background:#fff;font-weight:700;font-size:.82rem}.shpExportMiniOptions input{width:auto}.shpExportSections{grid-template-columns:repeat(2,minmax(0,1fr))}.shpSavedTemplate{display:inline-flex;gap:4px;margin:3px 4px 3px 0}@media(max-width:900px){.shpExportConfigGrid{grid-template-columns:1fr}.shpExportMiniOptions,.shpExportSections{grid-template-columns:1fr}}
/* Zeichenhilfen */
.spiDrawingActions button.active{background:#e9f6e7;border-color:#54ad48;color:#246f20;box-shadow:0 0 0 2px rgba(83,173,72,.12)}

/* schnelle Plan-Navigation */
.spiCanvasHost.spiSpacePanReady,.spiCanvasHost.spiSpacePanReady .spiOverlay{cursor:grab!important}
.spiCanvasHost.spiPanning,.spiCanvasHost.spiPanning .spiOverlay{cursor:grabbing!important}
.spiCanvasHost.spiPanning{user-select:none}

.spiPanHint{font-size:.72rem;color:#64736f;white-space:nowrap;padding:4px 7px;border-radius:999px;background:#eef4f2}
.spiFloorSelect{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:.68rem;font-weight:800;color:#566a63}
.spiFloorSelect select{min-width:64px;padding:5px 7px;border:1px solid #cbd9d5;border-radius:8px;background:#fff;color:#17372f;font:inherit}

/* einklappbare Grundrissanleitung */
.spiShell.spiUpperCollapsed #spiSourceFiles,.spiShell.spiUpperCollapsed #spiGuide{display:none!important}
.spiShell.spiUpperCollapsed .spiHeader .spiKicker,.spiShell.spiUpperCollapsed .spiHeader p{display:none}
.spiShell.spiUpperCollapsed .spiHeader{padding-block:6px}
@media(max-width:700px){.spiHeaderActions #spiUpperToggle{display:inline-flex!important}}