/* Funktionsleiste links, Platten und ihre Details rechts (Stefan 30.09.2026: "am linken Rand die Uebersicht der
   Funktionen, rechts die Details bezogen auf die Platten"). leiste.js haengt die vorhandenen Bausteine um;
   dieser Stil gilt nur, wenn das geschehen ist (body.mit-leiste).                                            */
:root{--fn-breite:216px}
body.mit-leiste .app{grid-template-columns:var(--fn-breite) 1fr 420px}

.fn-leiste{display:flex;flex-direction:column;gap:16px;min-height:0;overflow-y:auto;scrollbar-width:thin;
  padding:14px 10px 8px;background:var(--bg2);border-right:1px solid var(--line)}
.fn-gruppe h2{margin:0 6px 6px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.fn-knopf{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;width:100%;text-align:left;
  border:1px solid transparent;border-radius:11px;background:transparent;padding:6px 8px;margin-bottom:2px;
  font:inherit;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s}
.fn-knopf:hover{background:var(--bg);border-color:var(--line2)}
.fn-knopf.an{background:var(--bg);border-color:var(--clay)}
.fn-knopf .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--ink);color:#fff}
.fn-knopf .ic svg{width:19px;height:19px}
.fn-knopf.kasten .ic{background:var(--clay)}
.fn-knopf b{display:block;font-size:13px;line-height:1.2}
.fn-knopf small{display:block;font-size:10.5px;line-height:1.3;color:var(--muted)}

/* die Bereiche (Form, Ausschnitte, Kanten …) stehen jetzt untereinander statt als Reihe von Kreisen */
.fn-leiste .rail{flex-direction:column;gap:2px;padding:0;overflow:visible}
.fn-leiste .step-btn{flex:none;flex-direction:row;justify-content:flex-start;gap:10px;padding:5px 8px;border-radius:11px;border:1px solid transparent}
.fn-leiste .step-btn:hover{background:var(--bg);border-color:var(--line2)}
.fn-leiste .step-btn .ic{width:36px;height:36px;border-radius:10px;flex:none}
.fn-leiste .step-btn .ic svg{width:18px;height:18px}
.fn-leiste .step-btn .lb{font-size:13px;color:var(--ink2);text-align:left;white-space:nowrap}
.fn-leiste .step-btn.active{background:var(--bg);box-shadow:inset 3px 0 0 var(--clay)}
.fn-leiste .step-btn.active .ic{box-shadow:none}
.fn-leiste .step-btn.active .lb{font-weight:700;color:var(--ink)}
.fn-sp{flex:1 1 auto;min-height:8px}
.fn-leiste .rail-sp{display:none}
.fn-leiste .rail-admin{padding:10px 0 4px}

/* schmale Fenster: wie bisher alles untereinander – Funktionen, Zeichnung, Platten und Details */
@media (max-width:1100px){
  body.mit-leiste .app{grid-template-columns:1fr}
  .fn-leiste{border-right:0;border-bottom:1px solid var(--line);overflow:visible}
  .detail>.teile{max-height:none}
}

/* rechts: oben die Platten des Projekts, darunter die Details der aktiven Platte */
.detail>.teile{flex:0 0 auto;max-height:34%;border-right:0;border-bottom:1px solid var(--line);background:var(--bg2)}
.detail>.teile>.rail-sp{display:none}
.detail>.teile .teile-kopf{padding:10px 20px 4px}
.detail>.teile .teile-bar{padding:4px 16px 10px;background:transparent}
.detail .detail-h{padding-top:12px}