/* Werkstatt-Werkzeug: ruhige Blaugrau-Flächen, der weiße Plan ist das Hellste, Akzent in Bleistift-Gelbocker. */
:root {
  --grund: #e4e8ec;
  --flaeche: #f6f8fa;
  --flaeche2: #ffffff;
  --linie: #c6ced6;
  --text: #1c252e;
  --text2: #55626f;
  --akzent: #8f5e00;
  --akzent-text: #ffffff;
  --gefahr: #b42318;
  --auswahl: #0b7285;
  --kachel-grund: #ffffff;
  --schatten: 0 2px 10px rgba(20, 30, 40, .22);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #12171c; --flaeche: #1b2229; --flaeche2: #252e36; --linie: #38434d;
    --text: #e8edf1; --text2: #a3afba; --akzent: #e0a93a; --akzent-text: #1b1405;
    --gefahr: #ff8a80; --schatten: 0 2px 12px rgba(0, 0, 0, .55); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --grund: #12171c; --flaeche: #1b2229; --flaeche2: #252e36; --linie: #38434d;
  --text: #e8edf1; --text2: #a3afba; --akzent: #e0a93a; --akzent-text: #1b1405;
  --gefahr: #ff8a80; --schatten: 0 2px 12px rgba(0, 0, 0, .55); color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  display: grid;
  grid-template: "kopf kopf" auto "panel stage" minmax(0, 1fr) / 330px minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
  background: var(--grund);
  color: var(--text);
  font: 14px/1.4 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

#kopf {
  grid-area: kopf;
  display: flex; align-items: center; gap: 12px;
  padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.marke { font-size: 15px; white-space: nowrap; }
.dateiname { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.kopf-rechts { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.gruppe { display: flex; align-items: center; gap: 4px; }
.seitentext { padding: 0 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.knopf {
  min-height: 36px; padding: 0 12px;
  background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 6px;
  cursor: pointer; white-space: nowrap; touch-action: manipulation;
}
.knopf:hover:not(:disabled) { border-color: var(--text2); }
.knopf:disabled { opacity: .4; cursor: default; }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.knopf.gefahr { color: var(--gefahr); }
.knopf.klein { min-height: 32px; padding: 0 10px; font-size: 13px; }
.knopf.breit { width: 100%; }
.nur-icon { width: 36px; padding: 0; display: inline-grid; place-items: center; }
.nur-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nur-icon svg .voll { fill: currentColor; stroke: none; }
.nur-handy { display: none; }

/* Planfläche */
#stage {
  grid-area: stage; position: relative; overflow: hidden; touch-action: none;
  background: var(--grund); user-select: none; -webkit-user-select: none; cursor: grab;
}
#stage.setzen { cursor: crosshair; }
#stage.zieht { cursor: grabbing; }
#welt { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #fff; box-shadow: var(--schatten); }
#welt canvas { display: block; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
#overlay [data-item] { cursor: move; }
#stage.setzen #overlay [data-item] { cursor: crosshair; }
[data-griff], [data-mess] { cursor: pointer; }

.chip {
  position: absolute; top: 10px; left: 10px; padding: 5px 10px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px;
  font-size: 13px; cursor: pointer; box-shadow: var(--schatten); font-variant-numeric: tabular-nums;
}
.chip.fehlt { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); font-weight: 600; }

.leiste {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: calc(100% - 16px); padding: 7px 10px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; box-shadow: var(--schatten);
}
#hinweisLeiste { top: 10px; bottom: auto; }
#stage.setzen .chip { display: none; }
.auswahl-name { font-weight: 600; padding: 0 4px; }
.leiste input { width: 90px; min-height: 32px; padding: 0 8px; background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 6px; }

#ablage, #laden { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 600; pointer-events: none; }
#ablage { background: color-mix(in srgb, var(--akzent) 25%, transparent); border: 3px dashed var(--akzent); }
#ablage small { display: block; font-size: 14px; font-weight: 400; text-align: center; }
#laden { background: color-mix(in srgb, var(--grund) 75%, transparent); }

/* Menü */
#panel {
  grid-area: panel; display: flex; flex-direction: column; min-height: 0;
  background: var(--flaeche); border-right: 1px solid var(--linie);
  padding-left: env(safe-area-inset-left);
}
.reiter { display: flex; border-bottom: 1px solid var(--linie); flex-shrink: 0; }
.reiter-knopf { flex: 1; padding: 10px 4px; background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer; color: var(--text2); }
.reiter-knopf.aktiv { color: var(--text); border-bottom-color: var(--akzent); font-weight: 600; }
.reiter-inhalt { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.scroll { overflow-y: auto; padding: 12px; gap: 8px; }
.scroll h3 { margin: 10px 0 0; font-size: 13px; letter-spacing: .03em; }
.scroll h3:first-child { margin-top: 0; }

.gewerke { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; flex-shrink: 0; }
.gewerk-knopf {
  display: flex; align-items: center; gap: 5px; padding: 5px 9px; flex-shrink: 0;
  background: none; border: 1px solid var(--linie); border-radius: 6px; cursor: pointer; font-size: 13px;
}
.gewerk-knopf i { width: 9px; height: 9px; border-radius: 2px; background: var(--farbe); }
.gewerk-knopf.aktiv { background: var(--flaeche2); border-color: var(--text); font-weight: 600; }

.kacheln {
  flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: start;
}
.kachel {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 3px; min-height: 86px; background: #fff; color: #1c252e;
  border: 1px solid var(--linie); border-radius: 6px; cursor: grab;
  font-size: 11.5px; line-height: 1.2; text-align: center; user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
}
.kachel svg { width: 42px; height: 42px; flex-shrink: 0; pointer-events: none; }
.kachel.aktiv { outline: 3px solid var(--akzent); outline-offset: -1px; }
.kachel small { color: #5b6773; font-size: 10.5px; }
#geist { position: fixed; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; z-index: 50; background: rgba(255,255,255,.9); border-radius: 8px; box-shadow: var(--schatten); }
#geist svg { width: 100%; height: 100%; }

.feld { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text2); }
.feld input[type=text], .feld select { min-height: 36px; padding: 0 8px; background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 6px; color: var(--text); font-size: 15px; width: 100%; }
.haken { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.klein-text { margin: 0; font-size: 12.5px; color: var(--text2); }
.stand { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

#details { flex-shrink: 0; border-top: 2px solid var(--linie); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--flaeche); }
.details-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.felder .volle { grid-column: 1 / -1; }

/* Stückliste */
.sl-gruppe { display: flex; flex-direction: column; margin-bottom: 12px; }
.sl-kopf { display: flex; align-items: center; gap: 6px; font-weight: 700; padding-bottom: 4px; border-bottom: 2px solid var(--farbe); }
.sl-zeile { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 5px 0; border-bottom: 1px solid var(--linie); font-variant-numeric: tabular-nums; }
.sl-zeile b { font-weight: 700; text-align: right; }
.sl-zeile small { grid-column: 1 / -1; color: var(--text2); }
.sl-leer { color: var(--text2); }
.sl-summe { font-weight: 700; margin-top: 2px; }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  padding: 9px 14px; max-width: calc(100vw - 32px); border-radius: 8px;
  background: var(--text); color: var(--flaeche); box-shadow: var(--schatten);
}
dialog { background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: 10px; max-width: 360px; }
dialog::backdrop { background: rgba(0,0,0,.45); }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px; }

/* Handy: Menü als Leiste unter dem Plan */
@media (max-width: 820px) {
  body { grid-template: "kopf" auto "stage" minmax(0, 1fr) "panel" auto / minmax(0, 1fr); }
  #kopf { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .marke { display: none; }
  .dateiname { display: none; }
  .kopf-rechts { flex: 1; gap: 5px; justify-content: space-between; }
  .kopf-rechts .gruppe { gap: 2px; }
  .knopf { padding: 0 8px; }
  .nur-icon { width: 34px; padding: 0; }
  #planOeffnen { font-size: 13px; }
  #seitenwahl { position: fixed; top: calc(max(8px, env(safe-area-inset-top)) + 50px); right: 6px; z-index: 5; padding: 2px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; }
  .auswahl-name { display: none; }
  #panel { border-right: 0; border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom); }
  .reiter-knopf { padding: 7px 4px; }
  .gewerke { padding: 6px 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .reiter-inhalt.scroll { max-height: 38dvh; flex: none; }
  .kacheln {
    display: grid; grid-auto-flow: column; grid-auto-columns: 88px;
    grid-template-columns: none; grid-template-rows: 82px;
    overflow-x: auto; overflow-y: hidden; flex: none;
  }
  .kachel { min-height: 0; touch-action: pan-x; }
  .kachel svg { width: 40px; height: 40px; }
  .nur-handy { display: inline-block; }
  #details:not(.offen) { display: none; }
  #details.offen {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    box-shadow: 0 -4px 18px rgba(0,0,0,.3); padding-bottom: max(12px, env(safe-area-inset-bottom));
    max-height: 70dvh; overflow-y: auto;
  }
  #massstabChip { top: 6px; left: 6px; }
  #hinweisLeiste { top: 44px; }
  #toast { bottom: 170px; }
}
@media (prefers-reduced-motion: no-preference) {
  .knopf, .gewerk-knopf { transition: border-color .12s; }
}

/* 1.1: Projekt, Räume, Ebenen, Schnellwahl */
#projektKnopf { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
#projektKnopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#welt canvas { width: 100%; height: 100%; }
#overlay [data-id] { cursor: move; }
#stage.setzen #overlay [data-id] { cursor: crosshair; }

.schritt { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--linie); }
.schritt h3 { display: flex; align-items: center; gap: 8px; }
.schritt h3 b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--akzent); color: var(--akzent-text); font-size: 12px; }
.knopfreihe { display: flex; gap: 6px; }
.knopfreihe .knopf { flex: 1; min-width: 0; white-space: normal; line-height: 1.2; padding-block: 6px; }
.knopf.an { outline: 3px solid var(--akzent); outline-offset: -1px; }
.einstellungen summary { cursor: pointer; padding: 6px 0; color: var(--text2); }
.einstellungen[open] { display: flex; flex-direction: column; gap: 6px; }

.raum-zeile { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; width: 100%; padding: 7px 4px; background: none; border: 0; border-bottom: 1px solid var(--linie); text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.raum-zeile:hover, .raum-zeile.aktiv { background: var(--flaeche2); }
.raum-zeile small { grid-column: 1 / -1; color: var(--text2); }
.raum-summe { display: flex; justify-content: space-between; padding: 8px 4px; font-weight: 700; font-variant-numeric: tabular-nums; }

.ebenen { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.ebenen .haken i { width: 10px; height: 10px; border-radius: 2px; background: var(--farbe); }

.vorlagen { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.vorlagen:empty { display: none; }
.chip-knopf { min-height: 30px; padding: 0 9px; border: 1px solid var(--linie); border-radius: 15px; background: var(--flaeche2); cursor: pointer; font-size: 13px; font-variant-numeric: tabular-nums; touch-action: manipulation; }
.chip-knopf.aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.leiste .groesse { display: flex; align-items: center; gap: 4px; }
.leiste .groesse input { width: 64px; }
.leiste .vorlagen { margin: 0; justify-content: center; width: 100%; }

.projekt-dialog { width: min(440px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); overflow-y: auto; }
.projekt-dialog[open] { display: flex; flex-direction: column; gap: 8px; }
.projekt-dialog h3 { margin: 8px 0 0; font-size: 13px; }
.dialog-kopf { display: flex; justify-content: space-between; align-items: center; }
.projekt-liste { display: flex; flex-direction: column; }
.projekt-eintrag { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.projekt-eintrag span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projekt-eintrag small { display: block; color: var(--text2); }
.projekt-eintrag.aktuell span { font-weight: 700; }
#detailsRaum, #detailsLinie, #detailsItem { display: flex; flex-direction: column; gap: 8px; }
#detailsRaum[hidden], #detailsLinie[hidden], #detailsItem[hidden] { display: none !important; }
@media (max-width: 820px) {
  #projektKnopf span { display: none; }
  #projektKnopf { width: 34px; padding: 0; justify-content: center; }
  #exportPdfSchnell { display: none; }
}

/* Ecken einrasten */
.eingerastet { color: #2b8a3e; white-space: nowrap; }