/* leitstand.css — Oberflaeche des Konfigurators. Bewusst eigenstaendig und nicht die
   Gestaltung der Kundenseite: hier ist Werkzeug, dort ist Laden. */
:root{
  --grund:#14161a; --karte:#1d2027; --hoch:#262a33; --tinte:#eef0f4; --leise:#a2a9b6;
  --linie:#333844; --akzent:#e8f75a; --akzent-tinte:#14161a; --warn:#ffb454; --gut:#7fd48b;
  --serif:'Zilla Slab',Georgia,serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme:light){:root{
  --grund:#f6f6f4; --karte:#ffffff; --hoch:#eceCe8; --tinte:#191b1f; --leise:#5a6170;
  --linie:#d8dae0; --akzent:#1a29ab; --akzent-tinte:#ffffff;
}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--tinte);font:400 15px/1.55 var(--sans)}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.15;font-weight:700;letter-spacing:-.01em}
h1{font-size:1.32rem}
h2{font-size:1.05rem}
button,input,select,textarea{font:inherit;color:inherit}
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--akzent);outline-offset:2px}

/* ---------- Kundenansicht: Leiste oben, Panel links, Vorschau rechts ---------- */
.werkbank{display:grid;grid-template-rows:auto 1fr;height:100vh;height:100dvh}
.leiste{display:flex;align-items:center;gap:.9rem;padding:.6rem 1rem;background:var(--karte);
  border-bottom:1px solid var(--linie);flex-wrap:wrap}
.leiste .wer{font-weight:700}
.leiste .wo{color:var(--leise);font-size:.86rem}
.leiste .rest{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}
.tafel{display:grid;grid-template-columns:322px 1fr;min-height:0}
@media (max-width:900px){.tafel{grid-template-columns:1fr;grid-template-rows:auto 1fr}}

.panel{overflow-y:auto;background:var(--karte);border-right:1px solid var(--linie);padding:1rem 1rem 3rem}
.panel section{margin-bottom:1.35rem}
.panel h2{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--leise);
  margin-bottom:.5rem;padding-bottom:.35rem;border-bottom:1px solid var(--linie)}

.buehne{position:relative;background:var(--hoch);min-height:0}
.buehne iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.buehne.laedt::after{content:'baut auf …';position:absolute;inset:auto 1rem 1rem auto;
  background:var(--karte);padding:.4rem .8rem;border-radius:6px;font-size:.8rem;color:var(--leise)}

/* Auswahlknoepfe */
.wahl{display:flex;flex-wrap:wrap;gap:.4rem}
.wahl button{background:var(--hoch);border:1px solid var(--linie);border-radius:7px;
  padding:.42rem .68rem;cursor:pointer;font-size:.86rem;display:flex;align-items:center;gap:.42rem}
.wahl button:hover{border-color:var(--akzent)}
.wahl button[aria-pressed="true"]{background:var(--akzent);color:var(--akzent-tinte);border-color:var(--akzent);font-weight:700}
.tupfen{width:.85rem;height:.85rem;border-radius:50%;border:1px solid rgba(128,128,128,.45);flex:0 0 auto}

.bauarten{display:grid;gap:.5rem}
.bauarten button{text-align:left;display:block;background:var(--hoch);border:1px solid var(--linie);
  border-radius:9px;padding:.6rem .75rem;cursor:pointer}
.bauarten button:hover{border-color:var(--akzent)}
.bauarten button[aria-pressed="true"]{border-color:var(--akzent);box-shadow:inset 3px 0 0 var(--akzent)}
.bauarten .name{font-weight:700;display:block}
.bauarten .was{color:var(--leise);font-size:.79rem;display:block;margin-top:.15rem}

/* Abschnittsliste mit Umsortieren */
.stapel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.stapel li{display:flex;align-items:center;gap:.45rem;background:var(--hoch);border:1px solid var(--linie);
  border-radius:7px;padding:.35rem .5rem;font-size:.87rem}
.stapel li.weg{opacity:.45}
.stapel .griff{margin-left:auto;display:flex;gap:.15rem}
.stapel .griff button,.stapel .schalter{background:none;border:1px solid var(--linie);border-radius:5px;
  width:1.7rem;height:1.7rem;cursor:pointer;line-height:1;padding:0}
.stapel .schalter[aria-pressed="true"]{background:var(--akzent);color:var(--akzent-tinte);border-color:var(--akzent)}
.stapel .titel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Bausteine und Summe */
.bausteine{display:flex;flex-direction:column;gap:.4rem}
.baustein{display:flex;gap:.55rem;align-items:flex-start;background:var(--hoch);border:1px solid var(--linie);
  border-radius:8px;padding:.55rem .65rem;cursor:pointer;font-size:.87rem}
.baustein[aria-pressed="true"]{border-color:var(--akzent)}
.baustein[data-fest="ja"]{cursor:default;opacity:.9}
.baustein .kaestchen{width:1.05rem;height:1.05rem;border:1.5px solid var(--leise);border-radius:4px;
  flex:0 0 auto;margin-top:.15rem;position:relative}
.baustein[aria-pressed="true"] .kaestchen{background:var(--akzent);border-color:var(--akzent)}
.baustein[aria-pressed="true"] .kaestchen::after{content:'';position:absolute;left:.32rem;top:.06rem;
  width:.28rem;height:.58rem;border:solid var(--akzent-tinte);border-width:0 2px 2px 0;transform:rotate(42deg)}
.baustein .b-titel{font-weight:600;display:block}
.baustein .b-preis{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.baustein.gesperrt{opacity:.5;cursor:not-allowed}
.summe{position:sticky;bottom:0;background:var(--karte);border-top:1px solid var(--linie);
  padding:.7rem 0 0;margin-top:.7rem;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.summe .zahl{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.summe .lab{color:var(--leise);font-size:.76rem;text-transform:uppercase;letter-spacing:.07em}

/* Knoepfe */
.knopf{display:inline-flex;align-items:center;gap:.4rem;background:var(--akzent);color:var(--akzent-tinte);
  border:1px solid var(--akzent);border-radius:7px;padding:.45rem .85rem;font-weight:700;font-size:.87rem;
  text-decoration:none;cursor:pointer;white-space:nowrap}
.knopf.leise{background:transparent;color:var(--tinte);border-color:var(--linie)}
.knopf.leise:hover{border-color:var(--akzent)}
.knopf:disabled{opacity:.5;cursor:not-allowed}

/* Meldungen */
.meldung{padding:.55rem .8rem;border-radius:7px;font-size:.87rem;margin-bottom:.8rem}
.meldung.gut{background:rgba(127,212,139,.16);border:1px solid var(--gut)}
.meldung.warn{background:rgba(255,180,84,.14);border:1px solid var(--warn)}
.gespeichert{font-size:.78rem;color:var(--leise);min-height:1.1em}

/* Dialog */
dialog{background:var(--karte);color:var(--tinte);border:1px solid var(--linie);border-radius:12px;
  padding:1.2rem;max-width:min(520px,92vw);width:100%}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog label{display:block;margin:.7rem 0 .2rem;font-size:.83rem;color:var(--leise)}
dialog input,dialog textarea{width:100%;background:var(--hoch);border:1px solid var(--linie);
  border-radius:7px;padding:.5rem .6rem}
dialog textarea{min-height:6rem;resize:vertical}
dialog .reihe{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}

/* Schlichte Seiten (Nachfrage, Admin, Login) */
.blatt{max-width:940px;margin:0 auto;padding:2rem 1.25rem 5rem}
.blatt.eng{max-width:430px}
table.liste{width:100%;border-collapse:collapse;font-size:.9rem}
table.liste th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--leise);
  padding:.45rem .6rem .45rem 0;border-bottom:1px solid var(--linie);white-space:nowrap}
table.liste td{padding:.5rem .6rem .5rem 0;border-bottom:1px solid var(--linie);vertical-align:top}
table.liste td.z{text-align:right;font-variant-numeric:tabular-nums;padding-right:0}
.marke{font-weight:700;letter-spacing:-.02em}
.marke span{color:var(--akzent)}
.fussnote{color:var(--leise);font-size:.83rem;margin-top:2rem;border-top:1px solid var(--linie);padding-top:.9rem}
.fahne{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  padding:.13rem .45rem;border-radius:4px;border:1px solid var(--linie);color:var(--leise)}
.fahne.gut{color:var(--gut);border-color:var(--gut)}
.fahne.warn{color:var(--warn);border-color:var(--warn)}