/* ─────────────────────────────────────────────
   Montique — Konfigurator (/konfigurator)
   Design & Development · siondesign.de

   Nutzung: <main id="main" class="konfig"> — links die Stage (3D, sticky),
   rechts das Panel (Bedienfläche, scrollt mit). Nur Tokens aus shared.css;
   die einzigen Farbliterale sind die fünf Eloxal-Töne (inline aus model.js)
   und die Ringe/Ränder der Swatches (Vorbild .mq-swatches in home.css).
   ───────────────────────────────────────────── */

.konfig{padding-bottom:clamp(72px,9vw,120px)}

/* ── Kopf ── */
.konfig-head{max-width:var(--wrap);margin:0 auto;padding:calc(84px + clamp(40px,6vw,72px)) var(--pad) clamp(28px,4vw,44px)}
.konfig-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.6vw,60px);line-height:1.04;letter-spacing:-.02em;color:var(--ink);margin:0 0 20px;max-width:18ch}
.konfig-head .lead{max-width:58ch}

/* ── Arbeitsfläche: mobil ein Block (damit die Stage kleben kann), ab 1020 px zwei Spalten ──
   Mobil ist die Bühne flach (40vh; Tom, 3.9.2026: „Höhe reduzieren, damit man mehr von den
   Einstellungen sieht“); die Tab-Leiste darunter klebt bei derselben Höhe. */
.konfig-work{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* z-index 1: das Panel scrollt unter der Stage durch — auch der skalierte Swatch */
.konfig-stage{position:sticky;top:84px;z-index:1;height:40vh;min-height:260px;margin:0 0 clamp(28px,4vw,40px);background:var(--panel);overflow:hidden}
.konfig-stage canvas{display:block;width:100%;height:100%;touch-action:none}

@media (min-width:1020px){
  .konfig-work{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(28px,3vw,48px);align-items:start}
  .konfig-stage{margin:0;height:calc(100vh - 84px - 24px)}
}

/* Status, Fehler, Ansicht-Chips und Bedien-Hinweis liegen über dem Canvas */
.konfig-status{position:absolute;left:clamp(16px,2vw,24px);top:clamp(16px,2vw,24px);margin:0;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.konfig-stage .konfig-error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(40ch,calc(100% - 2 * clamp(16px,2vw,24px)));box-sizing:border-box;margin:0;background:var(--bg)}
.konfig-hint{position:absolute;left:clamp(16px,2vw,24px);bottom:clamp(16px,2vw,24px);margin:0;max-width:30ch;pointer-events:none}
/* Schmal: Hinweis über die Ansicht-Chips, sonst überlappen sich beide am unteren Rand */
@media (max-width:640px){
  .konfig-hint{right:clamp(16px,2vw,24px);max-width:none;bottom:calc(clamp(16px,2vw,24px) + 56px)}
}

.konfig-views{position:absolute;right:clamp(16px,2vw,24px);bottom:clamp(16px,2vw,24px);gap:8px}
.konfig-views:not([hidden]){display:flex}   /* [hidden] darf nicht überschrieben werden */
.konfig-views button{font-family:inherit;font-size:12.5px;letter-spacing:.06em;color:var(--body);background:var(--bg);border:1px solid var(--hairline);padding:9px 16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.konfig-views button:hover{border-color:var(--ink);color:var(--ink)}
.konfig-views button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ── Bemaßung und Flügel-Längen (Zusatz 2 §4.7, §4.8) ── */
/* Die Linien stehen in der Szene, die Zahlen als Schilder darüber: dims.js
   projiziert bei jedem Bild und schiebt sie per transform an ihren Platz.
   Der helle Grund hält sie über dem Modell lesbar. */
.k-dims{position:absolute;inset:0;pointer-events:none;overflow:hidden;transition:opacity .15s ease}
.k-dims[hidden]{display:none}
/* Solange ein Geist unter dem Zeiger liegt, weichen die Maßzahlen (Tom, 3.9.) */
.k-dims.is-dim{opacity:0}
.k-dim{position:absolute;left:0;top:0;font-size:11.5px;line-height:1.2;letter-spacing:.06em;color:var(--ink);background:var(--panel);padding:2px 6px;white-space:nowrap}
.k-dim[hidden]{display:none}
.k-wing{font-size:11px;background:var(--bg)}

/* ── Präsentationsmodus ── */
/* Die Stage legt sich über die ganze Seite; Header und Panel bleiben darunter.
   100dvh, wo es der Browser kennt — sonst wandert die Fußleiste auf dem Handy
   durchs Bild. */
body.is-present{overflow:hidden}
.konfig-stage.is-present{position:fixed;inset:0;z-index:100;height:100vh;min-height:0;margin:0}
@supports (height:100dvh){ .konfig-stage.is-present{height:100dvh} }
.konfig-stage.is-present .konfig-views,
.konfig-stage.is-present .konfig-hint,
.konfig-stage.is-present .konfig-status,
.konfig-stage.is-present .k-dims{display:none}   /* Bemaßung gehört in die Werkstatt */
.konfig-present[hidden]{display:none}
.konfig-present-back{position:absolute;left:clamp(16px,2vw,24px);top:clamp(16px,2vw,24px);font-size:11px;padding:12px 22px;border:0;cursor:pointer}
.konfig-present-bg{position:absolute;left:clamp(16px,2vw,24px);bottom:clamp(16px,2vw,24px)}
.konfig-present-bg .kicker{margin:0 0 10px}
.konfig-present-bg .k-swatch{width:18px;height:18px}

/* ── Panel ── */
/* eigener Stapelkontext unter der Stage: der skalierte Swatch bleibt im Panel */
.konfig-panel{min-width:0;position:relative;z-index:0}
.konfig-panel section{margin:0 0 clamp(30px,3.4vw,40px)}
/* nur der letzte Abschnitt des Panels endet bündig — Abschnitte in einem
   Tab-Bereich sind zwar auch :last-child, brauchen den Abstand aber */
.konfig-panel > section:last-child{margin-bottom:0}
.konfig-panel .kicker{margin:0 0 14px}

/* Tabs „Aufbau · Zubehör · Farbe" und die Einstellungs-Reihen in Zubehör und
   Farbe: alle in der Optik von .seg (page.css), aber aus Knöpfen — es sind
   keine Formularfelder. */
.k-tabs,.k-seg{gap:8px}
.k-tabs button,.k-seg button{font-family:inherit;font-size:14px;line-height:1.3;color:var(--body);background:transparent;border:1px solid #8A857A;padding:11px 18px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.k-tabs button:hover,.k-seg button:hover{border-color:var(--ink);color:var(--ink)}
.k-seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.k-tabs{margin:0 0 clamp(26px,3vw,34px)}
/* Mobil klebt die Tab-Leiste direkt unter der klebenden Bühne (Tom, 3.9.2026:
   „Aufbau, Zubehör und Farbe sollen stehen bleiben") — nur der Inhalt darunter
   scrollt. Der Grund deckt den Inhalt ab, der unter die Leiste läuft; die
   Bühne verliert dafür ihren unteren Abstand, sonst bliebe ein Spalt. */
@media (max-width:1019px){
  /* Beide randlos über die volle Breite: sonst bleibt neben ihnen der Seitenrand
     frei, und dort lugen die Ringe der Farbkreise hervor, wenn der Inhalt
     darunter durchläuft (Tom, 3.9.2026). */
  .konfig-stage{margin:0 calc(-1 * var(--pad))}
  .k-tabs{position:sticky;top:calc(84px + max(40vh, 260px));z-index:1;background:var(--bg);margin:0 calc(-1 * var(--pad)) 14px;padding:16px var(--pad) 12px}
  body.is-present .k-tabs{position:static}
}
.k-tabs button{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:12px 20px}
.k-tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.k-tabpanel:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
/* Der inaktive Bereich ist sofort weg — ohne diese Zeile blieb der
   Auswahlring des Eloxal-Swatches (box-shadow + transform) beim Wechsel noch
   einen Moment hinter dem Zubehör stehen (Tom, 3.9.2026). */
.k-tabpanel[hidden]{display:none!important}
/* … und der Swatch animiert im Moment des Wechsels gar nicht erst */
.konfig-panel.is-switching .k-swatch{transition:none}
.k-tabpanel .cap{margin-top:12px;max-width:42ch}

/* 2D-Raster: Notfall-Editor ohne WebGL. main.js klappt das <details> dann auf;
   im Normalfall bleibt es verborgen (Zusatz 1 §1). */
.k-fallback{margin:0 0 clamp(30px,3.4vw,40px)}
.k-fallback summary{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--muted);cursor:pointer;margin:0 0 14px}

/* 13 × 13 Spuren — Fach 34 px, Kante 7 px (Reihe 0 unten, Spiegelung in ui.js) */
.k-grid{display:grid;grid-template-columns:7px repeat(6,34px 7px);grid-template-rows:7px repeat(6,34px 7px);width:max-content;margin:0 0 14px}
.k-grid button{-webkit-appearance:none;appearance:none;border:0;padding:0;margin:0;background:transparent;font-size:0;cursor:pointer}
.k-grid button:focus-visible{outline:2px solid var(--ink);outline-offset:1px;position:relative;z-index:2}
.k-cell[data-state="on"]{background:var(--ink)}
.k-cell[data-state="cand"]{border:1px dashed var(--hairline)}
.k-cell[data-state="cand"]:hover{border-color:var(--accent)}
.k-cell[data-state="on"]:hover{background:var(--accent)}
.k-cell[disabled]{cursor:default}
.k-cell[data-state="off"]{cursor:default}
.k-edge{background:var(--hairline)}
.k-edge[aria-pressed="true"]{background:var(--ink)}
.k-edge:hover{background:var(--accent)}
.k-cell.hot[data-state="cand"]{border-color:var(--accent)}
.k-cell.hot[data-state="on"],.k-edge.hot{background:var(--accent)}

@media (max-width:480px){
  .k-grid{grid-template-columns:6px repeat(6,30px 6px);grid-template-rows:6px repeat(6,30px 6px)}
}

/* Eloxal-Töne */
.k-swatches{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.k-swatch{width:26px;height:26px;padding:0;border-radius:50%;border:1px solid rgba(23,20,14,.18);cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.k-swatch:hover{transform:scale(1.1)}
.k-swatch[aria-checked="true"]{transform:scale(1.12);box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px rgba(23,20,14,.55)}

/* Hauptton und Akzentton (Zusatz 4 §2): die Swatch-Reihe und daneben der Name
   des gewählten Tons — eine Zeile, die auf schmalen Panels umbrechen darf. */
.k-tone-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.k-tone-row .k-swatches{margin:0}
.k-tone-row .k-tone{margin:0 0 0 6px}
/* „Keiner": derselbe Ring, nur leer, mit diagonalem Strich */
.k-swatch-none{display:flex;align-items:center;justify-content:center;background:transparent;border-color:rgba(23,20,14,.35);color:var(--muted)}
.k-swatch-none svg{display:block;width:100%;height:100%}

/* Stückliste, Maße, Preis */
.k-bill{margin:0;font-variant-numeric:tabular-nums}
.k-bill > div[hidden]{display:none}          /* Flügel/Holzablagen/Rückwände nur bei > 0 */
.k-bill > div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 20px;padding:9px 0;border-bottom:1px solid var(--hairline)}
.k-bill dt{font-size:13.5px;color:var(--muted)}
.k-unit{color:var(--muted);font-size:12.5px}   /* Stückpreis hinter dem Bauteil (Zusatz 2 §4.6) */
/* Der Wert darf umbrechen — „2 × 220 mm, 1 × 180 mm, 1 × 110 mm" wird lang */
.k-bill dd{margin:0;font-size:15px;color:var(--ink);max-width:60%;text-align:right}
/* Aufschlüsselung nach Ton (Zusatz 4 §2): ein zweites <dd> unter der Zeile,
   über die volle Breite und in der Optik einer Bildunterschrift. */
.k-bill dd.k-tally{flex:0 0 100%;max-width:none;text-align:left;margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.k-bill dd.k-tally[hidden]{display:none}
.k-price{margin:22px 0 10px;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3vw,40px);line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.k-empty{margin:0 0 10px;font-size:15.5px;line-height:1.64;color:var(--soft);max-width:38ch}

/* Aktionen */
.k-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.k-mini{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0}
.k-mini button{font-family:inherit;font-size:13px;color:var(--body);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .2s}
.k-mini button:hover:not([disabled]){color:var(--accent)}
.k-mini button[disabled]{color:var(--muted);opacity:.45;text-decoration:none;cursor:default}
.k-sharefield{width:100%}
.k-sharefield:not([hidden]){display:block}   /* [hidden] darf nicht überschrieben werden */
.k-sharefield .in{font-size:14px}
.k-toast{width:100%;box-sizing:border-box;margin:0;transition:opacity .25s ease}

/* Intern (nur mit Zugangsdaten) — zwei schlichte Links, kein eigener Look */
.k-intern{display:flex;flex-wrap:wrap;gap:14px 26px;margin:0 0 14px}
.k-intern button{font-family:inherit;background:none;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:0 0 3px;color:var(--ink);font-size:15px;cursor:pointer}
.k-intern button[disabled]{color:var(--muted);border-bottom-color:var(--muted);cursor:default}

@media (prefers-reduced-motion: reduce){
  .k-toast,.k-swatch,.konfig-views button,.k-tabs button,.k-seg button,.k-price,.k-stab a{transition:none}
}

/* ── Preishinweis (Zusatz 3 §1.2) ── */
/* Eine Zeile direkt unter dem Preis, mehr nicht (Tom, 3.9.2026). */
.k-vat{margin:0}
.k-vat[hidden]{display:none}

/* ── Standsicherheit (Zusatz 3 §1.9) ── */
/* Nur der Chip, und nur wenn die Regel greift: er steht unter den Maßen und
   führt in die FAQ-Antwort. Sachlich, kein Warnschild, kein Absatz im Panel. */
.k-stab{margin:12px 0 0}
.k-stab[hidden]{display:none}
.k-stab a{display:inline-flex;font-size:12.5px;line-height:1.35;letter-spacing:.06em;color:var(--accent);border:1px solid var(--accent);padding:7px 13px;text-decoration:none;transition:background .2s,color .2s}
.k-stab a:hover{background:var(--accent);color:var(--bg)}

/* ── Vormerken: Knopf, Formular, Erfolgszustand (Zusatz 3 §1.1) ── */
.k-cta-wrap{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.k-cta{width:100%;box-sizing:border-box;justify-content:center;border:0;cursor:pointer;font-family:inherit;padding:19px 24px}
.k-cta[disabled]{opacity:.35;cursor:default}
.k-cta[hidden]{display:none}
/* Honeypot: für Menschen unsichtbar, für Bots ein Feld wie jedes andere */
.k-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.k-owners{margin:8px 0 0}
.k-form{width:100%}
.k-form[hidden],.k-done[hidden],.k-formerr[hidden]{display:none}
.k-form .field{margin:0 0 20px}
.k-form .check{margin-top:22px}
.k-form .k-cta{margin-top:26px}
.k-form .in{font-size:16px}
.k-formerr{margin:16px 0 0}
/* Der zweite Weg steht im geöffneten Formular, nicht im Grundzustand */
.k-alt{margin:18px 0 0;font-size:13.5px}
.k-alt a{color:var(--body);text-decoration:underline;text-underline-offset:3px}
.k-done{width:100%}
.k-done h3{margin:0;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.15;color:var(--ink)}
.k-done p{margin:12px 0 0;font-size:15px;line-height:1.62;color:var(--body)}
.k-done .k-sharefield{margin-top:18px}

/* Zwei stille Zeilen unter dem Knopf (Tom, 3.9.2026): erst die Leistungen,
   dann das Sekundäre — beides tritt hinter Preis und Knopf zurück. */
.k-trust{margin:0;max-width:46ch}
.k-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;margin:0;font-size:14px;color:var(--muted)}
.k-links a,.k-links button{font-family:inherit;font-size:14px;line-height:1.5;color:var(--body);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .2s}
.k-links a:hover,.k-links button:hover:not([disabled]){color:var(--accent)}
.k-links button[disabled]{color:var(--muted);opacity:.45;text-decoration:none;cursor:default}

/* Preis-Änderungen kurz hervorheben (Zusatz 3 §1.8) */
.k-price{transition:color .2s ease}
.k-price.is-hot{color:var(--accent)}

/* ── Mobile Leiste mit Preis und CTA (Zusatz 3 §1.7) ── */
.konfig-sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;align-items:center;justify-content:space-between;gap:16px;
  background:var(--bg);border-top:1px solid var(--hairline);
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom))}
.konfig-sticky:not([hidden]){display:flex}
.konfig-sticky-price{margin:0;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.konfig-sticky-vat{font-family:var(--sans);font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.konfig-sticky .btn-dark{border:0;cursor:pointer;font-family:inherit;padding:15px 26px}
.konfig-sticky .btn-dark[disabled]{opacity:.35;cursor:default}
/* Ab zwei Spalten steht der CTA im Panel — und die Bühne gehört der Bühne */
@media (min-width:1020px){ .konfig-sticky:not([hidden]){display:none} }
body.is-present .konfig-sticky:not([hidden]){display:none}
/* Platz für die Leiste, damit sie die letzte Footer-Zeile nicht verdeckt */
@media (max-width:1019px){ main.konfig ~ footer{padding-bottom:64px} }

/* ── Unter dem Werkzeug: Galerie, kleines FAQ, Abschluss (Zusatz 3 §2) ── */
/* Tom, 3.9.2026: „Konfigurator, dann eine kleine, coole Produktgalerie,
   vielleicht ein kleines FAQ, fertig." Kein Fließtext, keine Argumentblöcke.
   landing.css liefert .faq und .related; ihre Textregeln hängen an
   .landing — diese Rolle übernimmt hier .konfig-prod. */
.konfig-prod{max-width:1200px;margin:clamp(64px,9vw,110px) auto 0;padding:0 var(--pad)}
.konfig-prod > section{margin-top:clamp(56px,8vw,96px)}
.konfig-prod > section:first-child{margin-top:0}
.konfig-prod h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin:0 0 18px;max-width:26ch}
.konfig-prod p{color:var(--body);line-height:1.66;max-width:62ch;margin:0 0 16px}
.konfig-prod figure{margin:0}
.konfig-prod .cap{margin-top:14px}
.konfig-prod .faq h2{margin-bottom:clamp(18px,2.4vw,28px)}

/* Produktgalerie: ruhiges 2 × 2, mobil eine Spalte. Die Bilder behalten ihr
   eigenes Seitenverhältnis, die Bildunterschrift steht direkt darunter. */
.konfig-gallery .kicker{margin:0 0 clamp(20px,2.6vw,30px)}
.k-gallery{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (min-width:760px){ .k-gallery{grid-template-columns:1fr 1fr} }   /* ruhiges 2 × 2, nie drei nebeneinander */

/* Querverweis-Leiste — Vorbild .related aus landing.css, hier etwas enger */
.related{margin-top:clamp(32px,5vw,48px);padding-top:24px;border-top:1px solid var(--hairline);font-size:14.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px 28px}
.related a{color:var(--body);text-decoration:underline;text-underline-offset:3px}

/* Abschlusszeile statt zentriertem Band (Tom, 3.9.2026: h2, Zeile und Knopf
   standen auf drei Achsen, weil .konfig-prod h2/p die Band-Regeln schlugen). */
.konfig-close{border-top:1px solid var(--hairline);padding-top:clamp(28px,4vw,40px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:32px 48px}
.konfig-close h2{margin-bottom:12px}
.konfig-close p{margin:0}
.konfig-close-act{display:flex;flex-direction:column;align-items:flex-start;gap:16px;flex:none}
.konfig-close-act .btn-dark{cursor:pointer}
.konfig-close-act .lnk-underline{font-size:14px}