/* ============================================================
   KOSPOLO · 3D-Konfigurator — in die Website integriert
   Alle Regeln unter .konf3d gescopt (kein Leak ins Site-CSS).
   Theme folgt dem kospolo Dark/Light-Toggle ([data-theme]);
   --bg/--muted/--line/--accent werden bewusst von kospolo geerbt
   → Gold-Akzent + Theme-Umschaltung ohne Extra-Code.
   © 2026 KOSPOLO · kospolo.de
   ============================================================ */

/* ---------- Design-Tokens (Dark = kospolo-Default) ---------- */
.konf3d{
  --panel: var(--surface);
  --ink: var(--text);
  --accent-soft: rgba(201,169,106,.16);
  --radius: 14px;
  --plate:#232a35; --frame:#3a4658; --seam:#5b74b0;
  --port:#2dd4bf; --zapfen:#f0a94a; --rail:#5a6572;
  --warn:#ff8a7a; --warn-bg:rgba(255,122,107,.13);
  --ok:#5fd08a;  --ok-bg:rgba(95,208,138,.13);
  --info-bg:rgba(201,169,106,.10);
  --shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.28);
  color:var(--ink);
  font:15px/1.5 var(--sans);
}
:root[data-theme="light"] .konf3d{
  --accent-soft:rgba(201,169,106,.16);
  --plate:#eef1f5; --frame:#c9d3e0; --seam:#9db0e0;
  --port:#0d9488; --zapfen:#e08a1e; --rail:#9aa4b1;
  --warn:#c23a2b; --warn-bg:#fdecea;
  --ok:#1f8a4c;  --ok-bg:#e8f6ee;
  --info-bg:#f5efe1;
  --shadow:0 1px 2px rgba(20,30,45,.06), 0 8px 24px rgba(20,30,45,.08);
}

/* ---------- Layout ---------- */
.konf3d .layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:start}
@media (max-width:900px){ .konf3d .layout{grid-template-columns:1fr} }
.konf3d .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.konf3d .controls{padding:6px 0}
.konf3d details.grp{border-bottom:1px solid var(--line)}
.konf3d details.grp:last-child{border-bottom:0}
.konf3d details.grp>summary{cursor:pointer;list-style:none;padding:12px 16px;font-weight:600;font-size:14px;
  display:flex;justify-content:space-between;align-items:center;user-select:none}
.konf3d details.grp>summary::-webkit-details-marker{display:none}
.konf3d details.grp>summary::after{content:"›";transform:rotate(90deg);transition:transform .15s;color:var(--muted);font-size:18px}
.konf3d details.grp[open]>summary::after{transform:rotate(-90deg)}
.konf3d .grp .body{padding:2px 16px 14px}
.konf3d .ctl{padding:8px 0;border-top:1px dashed var(--line)}
.konf3d .ctl:first-child{border-top:0}
.konf3d .ctl label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600;gap:8px}
.konf3d .ctl label .unit{color:var(--muted);font-weight:500;font-size:12px}
.konf3d .ctl .row{display:flex;gap:10px;align-items:center;margin-top:6px}
.konf3d .ctl input[type=range]{flex:1;accent-color:var(--accent);min-width:0}
.konf3d .ctl .numbox{width:78px;padding:5px 7px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-size:13px;text-align:right}
.konf3d .ctl select{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-size:13px;margin-top:6px}
.konf3d .ctl small{display:block;color:var(--muted);font-size:11.5px;margin-top:5px;line-height:1.35}
.konf3d .stick{position:sticky;top:80px;display:flex;flex-direction:column;gap:14px}
@media (max-width:900px){ .konf3d .stick{position:static;top:auto} }

/* ---------- Vorschau / Panels ---------- */
.konf3d .svgbox{padding:10px 12px 4px}
.konf3d .svgbox svg{width:100%;height:auto;display:block}
.konf3d .cap{color:var(--muted);font-size:12px;padding:0 14px 12px;text-align:center}
.konf3d .sect{padding:14px 16px}
.konf3d .sect h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.konf3d .kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.konf3d .kpi{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.konf3d .kpi b{display:block;font-size:17px;letter-spacing:-.01em}
.konf3d .kpi span{font-size:11.5px;color:var(--muted)}
.konf3d ul.parts{margin:0;padding-left:18px}
.konf3d ul.parts li{margin:3px 0;font-size:13px}
.konf3d .msg{border-radius:10px;padding:8px 11px;font-size:12.8px;margin:7px 0;display:flex;gap:8px;line-height:1.4}
.konf3d .msg.warn{background:var(--warn-bg);color:var(--warn)}
.konf3d .msg.ok{background:var(--ok-bg);color:var(--ok)}
.konf3d .msg.info{background:var(--info-bg)}
.konf3d .msg .ic{font-weight:700}

/* ---------- Export / Buttons ---------- */
.konf3d .export{display:flex;flex-direction:column;gap:9px}
.konf3d .export .name{display:flex;gap:8px;align-items:center}
.konf3d .export .name input{flex:1;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-size:13px}
.konf3d .btns{display:grid;grid-template-columns:1fr;gap:8px}
.konf3d a.act,
.konf3d button.act{appearance:none;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  border-radius:9px;padding:10px 12px;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;text-decoration:none;
  display:flex;justify-content:space-between;align-items:center;gap:10px;transition:border-color .15s,background .15s}
.konf3d a.act:hover,
.konf3d button.act:hover{border-color:var(--accent)}
.konf3d a.act.primary,
.konf3d button.act.primary{background:var(--accent);border-color:var(--accent);color:#1a1205}
.konf3d .act small{font-weight:500;opacity:.75;font-size:11px}
.konf3d .act.primary small{opacity:.85}
.konf3d .hint{font-size:12px;color:var(--muted);padding:0 2px;line-height:1.5}

/* ---------- Legende / Gitter-Galerie ---------- */
.konf3d .legend{display:flex;flex-wrap:wrap;gap:10px 16px;padding:2px 14px 12px;font-size:11.5px;color:var(--muted)}
.konf3d .legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.konf3d .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}
.konf3d .gthumb{cursor:pointer;border:2px solid var(--line);border-radius:10px;padding:6px 4px 4px;text-align:center;background:var(--bg);transition:border-color .15s,background .15s}
.konf3d .gthumb:hover{border-color:var(--accent)}
.konf3d .gthumb.active{border-color:var(--accent);background:var(--accent-soft)}
.konf3d .gthumb svg{width:100%;height:auto;display:block}
.konf3d .gthumb span{font-size:10.5px;color:var(--muted);display:block;margin-top:3px;line-height:1.15}
.konf3d .gthumb.active span{color:var(--accent);font-weight:600}
.konf3d a{color:var(--accent)}

/* ---------- Toast ---------- */
.konf3d .toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--text);color:var(--bg);padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;
  transition:.25s;pointer-events:none;z-index:60}
.konf3d .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   Übersichtsseite /3d — Projekt-Karten (matcht kospolo-Look)
   ============================================================ */
.d3-intro{max-width:70ch;margin:.5rem 0 1.8rem;color:var(--muted)}
.d3-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:1rem 0 1.4rem}
.d3-card{display:flex;flex-direction:column;gap:.5rem;padding:22px 20px;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);text-decoration:none;color:var(--text);
  transition:transform .2s var(--ease),border-color .2s,background .2s}
.d3-card:hover{transform:translateY(-3px);border-color:var(--accent);background:var(--surface-2)}
.d3-card-icon{font-size:1.9rem;line-height:1}
.d3-card-eyebrow{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.d3-card-title{font-family:var(--serif);font-size:1.16rem;line-height:1.25;margin:.05rem 0}
.d3-card-teaser{font-size:.9rem;color:var(--muted);flex:1}
.d3-card-cta{margin-top:.5rem;font-size:.85rem;font-weight:600;color:var(--accent)}
.d3-card.has-cover{padding-top:0}
.d3-card-cover{width:calc(100% + 40px);margin:0 -20px 6px;aspect-ratio:16/9;object-fit:cover;
  border-radius:15px 15px 0 0;display:block}
.d3-hero-cover{width:100%;max-height:340px;object-fit:cover;border-radius:16px;
  border:1px solid var(--line);margin:0 0 1.1rem;display:block}
.d3-card.d3-soon{border-style:dashed;cursor:default;pointer-events:none}
.d3-card.d3-soon:hover{transform:none;border-color:var(--line);background:var(--surface)}
.d3-card.d3-soon .d3-card-eyebrow{color:var(--muted)}

/* Breadcrumb + Sub-Header auf der Produkt-Unterseite */
.d3-breadcrumb{font-size:.82rem;color:var(--muted);margin:.1rem 0 .5rem}
.d3-breadcrumb a{color:var(--muted);text-decoration:none}
.d3-breadcrumb a:hover{color:var(--accent)}
.d3-sep{opacity:.5;margin:0 .4rem}
.konf3d .foot{margin-top:22px;color:var(--muted);font-size:12px;text-align:center;line-height:1.6}
.d3-copyright{max-width:72ch;margin:1.6rem 0 .4rem;font-size:.8rem;color:var(--muted);line-height:1.6}