/* GartenRender Studio — Editor-UI. Alle Werte aus DESIGN_TOKENS.md abgeleitet. */
:root{
  --nacht:#0C0F0C; --torf:#151A15; --torf2:#1B211B; --linie:#232B23;
  --leinen:#E8E5DC; --mulch:#8D948A; --salbei:#9BAB8F; --messing:#C2A878;
  --warn:#B0563F; --papier:#F4F3EE;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  background:var(--nacht);color:var(--leinen);
  font:400 13px Inter,system-ui,sans-serif;
  height:100vh;display:flex;flex-direction:column;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* ---------------- Kopf: Marke + Ribbon-Tabs ---------------- */
.kopf{background:var(--torf);border-bottom:1px solid var(--linie);flex:none}
.marke-zeile{display:flex;align-items:center;gap:14px;padding:10px 16px 0}
.marke{font:560 16.5px Fraunces,serif;color:var(--leinen);letter-spacing:.012em;
  display:flex;align-items:center;gap:9px}
.marke-logo{height:22px;width:auto;display:block;flex:none;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.marke b{font-weight:420;font-style:italic;color:var(--salbei)}
.projekt{font:500 12px Inter;color:var(--mulch);display:flex;align-items:center;gap:8px}
.projekt .akte{color:var(--messing);font-weight:600;letter-spacing:.4px}
.projekt input{
  font:420 14px Fraunces,serif;font-style:italic;color:var(--leinen);
  background:transparent;border:none;border-bottom:1px solid transparent;
  padding:2px 2px;min-width:140px;outline:none;
}
.projekt input:hover{border-bottom-color:var(--linie)}
.projekt input:focus{border-bottom-color:var(--messing)}
.kopf-rechts{margin-left:auto;display:flex;gap:8px;padding-right:16px}
.kbtn{font:600 11px Inter;color:var(--mulch);border:1px solid var(--linie);border-radius:9px;padding:6px 12px}
.kbtn:hover{border-color:#2E382E;color:var(--leinen)}
.kbtn.prim{background:var(--leinen);color:var(--nacht);border-color:var(--leinen)}
.kbtn.prim:hover{background:#fff}

.tabs{display:flex;gap:2px;padding:8px 12px 0}
.tab{font:600 12px Inter;color:var(--mulch);padding:8px 14px;border-radius:10px 10px 0 0;position:relative}
.tab:hover:not(.aus){color:var(--leinen)}
.tab.an{color:var(--leinen);background:var(--nacht)}
.tab.an::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--messing);border-radius:2px}
.tab.aus{opacity:.35;cursor:not-allowed}

/* ---------------- Ribbon ---------------- */
.ribbon{display:flex;gap:4px;align-items:stretch;background:var(--nacht);padding:8px 12px;border-bottom:1px solid var(--linie);flex:none;min-height:64px}
.ribbon-gruppe{display:none;gap:4px;align-items:stretch}
.ribbon-gruppe.an{display:flex}
.wz{display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 10px;border-radius:10px;border:1.5px solid transparent;min-width:58px;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,transform .15s ease}
.wz svg{width:20px;height:20px;stroke:var(--mulch);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s ease}
.wz span{font:500 10px Inter;color:var(--mulch);white-space:nowrap;transition:color .15s ease}
.wz:hover:not(.aus){border-color:var(--linie)}
.wz:active:not(.aus){transform:scale(.95)}
.wz.an{border-color:var(--messing);background:var(--messing)}
.wz.an svg{stroke:var(--nacht);animation:wzpop .18s ease} .wz.an span{color:var(--nacht);font-weight:600}
.wz.aus{opacity:.35;cursor:not-allowed}
@keyframes wzpop{from{transform:scale(.85)}to{transform:scale(1)}}
.rtrenn{width:1px;background:var(--linie);margin:4px 6px;flex:none}
.rsub{display:flex;flex-direction:column;align-items:center;gap:2px}
.rsub-wz{display:flex;gap:4px}
.rsub-titel{font:600 9px Inter;letter-spacing:1.2px;text-transform:uppercase;color:var(--mulch);opacity:.65}
.ribbon-select{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:4px 6px}
.ribbon-select span{font:600 9px Inter;letter-spacing:1px;text-transform:uppercase;color:var(--mulch)}
.ribbon-select select{font:500 12px Inter;color:var(--leinen);background:var(--torf2);border:1px solid var(--linie);border-radius:8px;padding:7px 10px;cursor:pointer;outline:none}
.ribbon-select select:hover{border-color:var(--messing)}

/* ---------------- Hauptbereich ---------------- */
.haupt{flex:1;display:flex;min-height:0}
.wzleiste{width:48px;background:var(--torf);border-right:1px solid var(--linie);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:6px;flex:none}
.wzl{width:34px;height:34px;border-radius:9px;border:1.5px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,transform .15s ease}
.wzl svg{width:17px;height:17px;stroke:var(--mulch);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s ease}
.wzl:active{transform:scale(.92)}
.wzl.an{border-color:var(--messing);background:var(--messing)}
.wzl.an svg{stroke:var(--nacht);animation:wzpop .18s ease}
.wzl:hover:not(.an){border-color:var(--linie)}

.canvas-wrap{flex:1;position:relative;background:var(--papier);overflow:hidden;min-width:0}
/* Rundgang-Steuerkreuz (Touch) */
#zurueckPlan{position:absolute;left:14px;top:14px;z-index:25;display:none;align-items:center;gap:8px;font:600 13px Inter;color:var(--leinen);background:rgba(12,15,12,.72);border:1px solid var(--linie);border-radius:12px;padding:11px 16px;cursor:pointer;backdrop-filter:blur(6px);-webkit-user-select:none;user-select:none}
#zurueckPlan span{font-size:17px;line-height:1}
#zurueckPlan:hover{background:rgba(12,15,12,.9);border-color:var(--messing)}
#rundgangCtrl{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:none;align-items:center;gap:10px;z-index:20;touch-action:none}
#rundgangCtrl .rgmid{display:flex;flex-direction:column;gap:10px}
.rgbtn{width:52px;height:52px;border-radius:14px;border:1px solid var(--linie);background:rgba(12,15,12,.62);color:var(--leinen);font-size:20px;line-height:1;cursor:pointer;backdrop-filter:blur(4px);-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}
.rgbtn:hover{background:rgba(12,15,12,.82);border-color:var(--messing)}
.rgbtn:active{background:var(--messing);color:var(--nacht)}
/* touch-action:none → iPad/Touch scrollt/zoomt die Seite NICHT; Gesten steuert die App
   selbst (Pencil zeichnet, zwei Finger schieben/zoomen). user-select verhindert Text-Markierung. */
#cv{display:block;position:absolute;inset:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.canvas-wrap.pan{cursor:grab}
.canvas-wrap.panning{cursor:grabbing}
.canvas-wrap.zeichnen{cursor:crosshair}
/* Starthilfe (leerer Plan) — brutal einfach */
.starthilfe{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:15;pointer-events:none}
.starthilfe.aus{display:none}
.sh-box{pointer-events:auto;background:rgba(21,26,21,.94);border:1px solid var(--linie);border-radius:18px;padding:26px 28px 22px;max-width:560px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.sh-titel{font:560 20px Fraunces,serif;font-style:italic;color:var(--leinen);margin-bottom:18px}
.sh-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sh-karte{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px 15px;background:var(--torf2);border:1.5px solid var(--linie);border-radius:14px;cursor:pointer;text-align:center;transition:border-color .15s ease,transform .15s ease}
.sh-karte svg{width:26px;height:26px;stroke:var(--salbei);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s ease}
.sh-karte b{font:600 13px Inter;color:var(--leinen)}
.sh-karte small{font:500 11px Inter;color:var(--mulch);line-height:1.45}
.sh-karte:hover{border-color:var(--messing);transform:translateY(-2px)}
.sh-karte:hover svg{stroke:var(--messing)}
.sh-karte:active{transform:translateY(0) scale(.98)}
.sh-fuss{margin-top:14px;font:500 12px Inter;color:var(--mulch)}
.sh-fuss b{color:var(--leinen)}

/* ---------------- Eigenschaften-Panel ---------------- */
.panel{width:272px;background:var(--torf);border-left:1px solid var(--linie);padding:20px 18px 24px;overflow-y:auto;flex:none}
.panel h2{font:560 17px Fraunces,serif;font-style:italic;margin-bottom:3px;line-height:1.2}
.panel .bot{font:420 12px Fraunces,serif;font-style:italic;color:var(--salbei);margin-bottom:20px}
.aug{font:600 9px Inter;letter-spacing:2px;color:var(--mulch);margin:26px 0 10px;text-transform:uppercase}
.aug:first-child{margin-top:0}
.zeile{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:12px;gap:12px}
.zeile .l{color:var(--mulch)} .zeile .w{color:var(--leinen);font-weight:500;text-align:right}
.zeile .w.messing{color:var(--messing)}
.leer-hinweis{color:var(--mulch);font-size:12px;line-height:1.6;padding:8px 0}

.slider-wrap{margin:12px 0 6px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--torf2);border-radius:2px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--leinen);cursor:pointer;border:none}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--leinen);cursor:pointer;border:none}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px}

.thumb{width:100%;aspect-ratio:1;border-radius:11px;background:var(--torf2);border:1px solid var(--linie);display:flex;align-items:center;justify-content:center;margin-bottom:10px;overflow:hidden}
.thumb img{width:82%;height:82%;object-fit:contain}

/* Textur-Swatches */
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.swatch{aspect-ratio:1;border-radius:10px;border:1.5px solid var(--linie);overflow:hidden;position:relative;background-size:cover;background-position:center}
.swatch.an{border-color:var(--salbei);box-shadow:0 0 0 2px rgba(155,171,143,.25)}
.swatch span{position:absolute;left:0;right:0;bottom:0;font:600 9px Inter;color:var(--leinen);background:rgba(12,15,12,.62);padding:2px 4px;text-align:center;letter-spacing:.3px}

/* Bibliothek */
.bib-such{width:100%;background:var(--torf2);border:1px solid var(--linie);border-radius:10px;padding:8px 10px;color:var(--leinen);font:500 12px Inter;outline:none;margin-bottom:10px}
.bib-such:focus{border-color:var(--messing)}
.bib-liste{display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 320px);overflow-y:auto;margin:0 -6px}
.bib-item{display:flex;align-items:center;gap:10px;padding:6px;border-radius:9px;border:1.5px solid transparent}
.bib-item:hover{background:var(--torf2)}
.bib-item.an{border-color:var(--salbei);background:#1c241c}
.bib-item .bthumb{width:34px;height:34px;border-radius:7px;background:var(--torf2);flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bib-item .bthumb img{width:100%;height:100%;object-fit:contain}
.bib-item .btxt{min-width:0}
.bib-item .bde{font:500 12px Inter;color:var(--leinen);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bib-item .bbot{font:420 11px Fraunces,serif;font-style:italic;color:var(--mulch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.num-input{width:72px;background:var(--torf2);border:1px solid var(--linie);border-radius:8px;padding:5px 8px;color:var(--leinen);font:500 12px Inter;outline:none;text-align:right}
.num-input:focus{border-color:var(--messing)}

/* Zahlenfeld mit +/− Steppern */
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:28px;height:28px;flex:none;border:1px solid var(--linie);border-radius:8px;background:var(--torf2);color:var(--leinen);font:600 15px Inter;line-height:1;display:flex;align-items:center;justify-content:center}
.stepper button:hover{border-color:var(--messing)}
.stepper .num-input{flex:1;width:auto}
.stepper .einh{font:500 11px Inter;color:var(--mulch)}

/* „Länge + Winkel"-Dialog */
.md-back{position:fixed;inset:0;background:rgba(6,7,8,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:55}
.md-box{width:280px;background:var(--torf);border:1px solid var(--linie);border-radius:16px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
/* Fotoreal-Render-Bühne */
.fr-buehne{margin:8px 0 4px;border:1px solid var(--linie);border-radius:12px;background:var(--nacht);min-height:340px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fr-buehne img{width:100%;height:100%;object-fit:contain;display:block}
.fr-lade{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--mulch);font:500 12.5px Inter;text-align:center;padding:20px}
.fr-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--linie);border-top-color:var(--salbei);animation:frspin 0.9s linear infinite}
@keyframes frspin{to{transform:rotate(360deg)}}
.fr-fehler{color:var(--warn);font:500 12.5px Inter;text-align:center;padding:24px;line-height:1.5}
/* Varianten-Raster */
.fr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;height:100%;padding:8px}
.fr-zelle{position:relative;border:1px solid var(--linie);border-radius:8px;background:var(--nacht);display:flex;align-items:center;justify-content:center;overflow:hidden}
.fr-zelle img{width:100%;height:100%;object-fit:cover;display:block}
.fr-zelle.waehlbar{cursor:pointer}
.fr-zelle.waehlbar:hover{border-color:var(--salbei);box-shadow:0 0 0 2px var(--salbei) inset}
.md-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.md-zeile label{font:500 12px Inter;color:var(--mulch)}
.md-kompass{display:flex;align-items:center;justify-content:space-between;background:var(--torf2);border:1px solid var(--linie);border-radius:10px;padding:8px 10px;margin:4px 0 10px}
.md-kompass span{font:600 9px Inter;letter-spacing:2px;color:var(--mulch);text-transform:uppercase}
.md-kompass b{font:560 15px Fraunces,serif;font-style:italic;color:var(--salbei)}
.md-hint{font:400 10.5px Inter;line-height:1.6;color:var(--mulch);margin-bottom:12px}
.md-hint .chip{background:var(--torf2);border:1px solid var(--linie);border-radius:6px;padding:1px 6px;font-weight:600;color:var(--leinen);font-size:10px}
.md-btns .panel-btn{margin-top:0;background:var(--leinen);color:var(--nacht);border-color:var(--leinen)}
.md-btns .panel-btn:hover{background:#fff}
.panel-btn{width:100%;border:1px solid var(--linie);border-radius:10px;padding:9px;font:600 12px Inter;color:var(--leinen);margin-top:18px;transition:border-color .15s ease}
.panel-btn:hover{border-color:#2E382E}
.panel-btn.warn{color:var(--warn);border-color:rgba(176,86,63,.4)}
.panel-btn.warn:hover{border-color:var(--warn)}
/* Segmentierter Umschalter (z. B. Skizzen-Modus) */
.seg{display:flex;gap:6px;margin-top:4px}
.seg button{flex:1;border:1px solid var(--linie);border-radius:9px;padding:8px 6px;font:600 11.5px Inter;color:var(--mulch);background:transparent;cursor:pointer}
.seg button:hover{border-color:#2E382E;color:var(--leinen)}
.seg button.an{background:var(--salbei);border-color:var(--salbei);color:var(--nacht)}

/* ---------------- Statuszeile ---------------- */
.status{display:flex;align-items:center;gap:8px;background:var(--torf);border-top:1px solid var(--linie);padding:7px 14px;font:400 11px Inter;color:var(--mulch);flex:none;flex-wrap:wrap}
.status .chip{background:var(--torf2);border:1px solid var(--linie);border-radius:6px;padding:2px 7px;font-weight:600;color:var(--leinen);font-size:10px}
.status .obj{color:var(--salbei);font-weight:500}
.status .hintgrp{display:flex;align-items:center;gap:4px}
.status .rechts{margin-left:auto;display:flex;gap:10px;align-items:center}
.ansicht{display:flex;gap:2px;background:var(--torf2);border:1px solid var(--linie);border-radius:9px;padding:2px}
.ansicht span{padding:4px 12px;border-radius:7px;font:600 11px Inter;color:var(--mulch);cursor:pointer;transition:color .15s ease,background-color .15s ease}
.ansicht span.an{background:var(--messing);color:var(--nacht)}
.ansicht span.aus{opacity:.5;cursor:not-allowed}
.layer{font:500 11px Inter;color:var(--mulch)}
.zoomlbl{font:500 11px Inter;color:var(--mulch);min-width:52px;text-align:right}

/* Reduzierte Bewegung: Feedback-Animationen abschalten */
@media (prefers-reduced-motion:reduce){
  .wz,.wzl,.wz svg,.wzl svg,.ansicht span,.sh-karte,.sh-karte svg{transition:none;animation:none}
  .wz.an svg,.wzl.an svg{animation:none}
}