/* Kaminplatte (04.11.2026): Teile der Anwendung ?anwendung=kaminplatte in der Werkbank (public/shop/glas/kaminplatte-ui.mjs).
   Lädt nach werkbank.css nur mit dieser Anwendung (server/konfigurator-layout.mjs ANWENDUNG_STILE). Schritt Maße: Maßbild der Form
   über den Feldern, Brandschutz-Hinweis (orange wie die übrigen Hinweise, Bausteine fe-rat aus werkbank.css) mit Draufsicht darunter.
   Zeichnungen aus public/kaminplatte-bilder.mjs. Keine Inline-Stile. */
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-massbild{display:grid;gap:6px;margin:10px 0 14px;padding:10px 12px 12px;border:1px solid var(--line,#d5dfe7);border-radius:10px;background:#fff}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-massbild-svg{display:block;width:100%;max-width:220px;height:auto;margin:0 auto}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-massbild figcaption{font-size:13px;line-height:1.45;color:#3c4f66}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-massbild strong{display:block;margin:0 0 2px;font-size:14px;color:#162c4b}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-brand{margin:12px 0 4px}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-brand .fe-rat{margin-top:0}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-plan{margin:10px 0 0;max-width:320px}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-plan-svg{display:block;width:100%;height:auto;border:1px solid var(--line,#d5dfe7);border-radius:8px;background:#fff}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-plan figcaption{margin-top:6px;font-size:12px;line-height:1.45;color:#586b81}
/* Rückmeldung 09.11.2026 (Frage einfacher): "Wo kommt die Platte hin?" mit zwei Bildkacheln wie die Formkacheln (werkbank.css
   .gc-shapes), Seitenansicht aus kaminplatte-bilder.mjs. Solange nichts gewählt ist, steht orange "Bitte wählen" an der Frage; die
   Meldung unter den Kacheln bleibt für Screenreader (aria-describedby), sichtbar wäre sie doppelt. */
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-aufstellung{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:6px 0 10px}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-kachel{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-height:132px;width:100%;min-width:0;padding:10px 8px 12px;border:1px solid #9dabbc;border-radius:8px;background:#fff;color:var(--ink,#162c4b);font-size:14px;line-height:1.3;text-align:center;cursor:pointer}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-kachel-bild{display:block;width:100%;max-width:150px;height:auto;margin:0 auto 4px}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-kachel-titel{font-weight:700}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-kachel small{font-size:12px;font-weight:400;color:#586b81}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-kachel[aria-pressed=true]{border:2px solid var(--blue,#154e8a);background:#eaf2fa;color:var(--blue,#154e8a)}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-kachel[aria-pressed=true] small{color:var(--blue,#154e8a)}
@media(hover:hover){main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-kachel:not([aria-pressed=true]):hover{border-color:var(--blue,#154e8a);background:#f5f9fc}}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-bitte{display:inline-block;margin-left:6px;padding:1px 8px;border:1px solid var(--wb-orange-rand,#f5c3a0);border-radius:99px;background:var(--wb-orange-flaeche,#fff3e8);color:var(--wb-orange-text,#a64b0d);font-size:12px;font-weight:700;vertical-align:1px}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin[data-kamin="offen"] .gc-kamin-aufstellung~.gc-error{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Leeres Gewichtsfeld direkt nach "steht auf der Platte" ist noch kein Fehler: kein roter Rahmen, Meldung nur für Screenreader. Steht etwas
   Ungültiges darin (etwa 0), zeigt das Feld beides wie sonst (input-issues.mjs). */
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator #gc-kamin-gewicht[aria-invalid=true]:placeholder-shown{border-color:#9dabbc!important;background:#fff}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator #gc-kamin-gewicht[aria-invalid=true]:placeholder-shown:focus{border-color:var(--blue,#154e8a)!important}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin label:has(#gc-kamin-gewicht:placeholder-shown)+.gc-error{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* 10.11.2026: Fotos der Bildstellen (public/bildstellen/kaminplatte/) in den Kacheln der Aufstellung und der Formen. */
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-kachel-foto{max-width:none;aspect-ratio:3/2;object-fit:cover;border-radius:8px}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-form-foto{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:8px}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-form-mit-foto svg[hidden]{display:none}

/* 10.11.2026, Farbregel (CLAUDE.md, REGEL-aufbau.md Abschnitt 5): Orange nur für Probleme und Upsells. Der Brandschutz-Hinweis und der
   50-cm-Hinweis bei "liegt davor" sind Hinweise ohne Problem und stehen in dezentem Blau; die empfohlene dickere Stärke (Upsell) und
   "Auf Anfrage" (Prüfung nötig) bleiben orange. Die Bausteine fe-rat lesen ihre Farben aus den Variablen. */
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .fe-rat:is([data-kamin-brand],[data-kamin-tipp="rand"]){--wb-orange-rand:#c5d8ee;--wb-orange-linie:#154e8a;--wb-orange-flaeche:#eef4fb;--wb-orange-text:#154e8a;border-color:#c5d8ee;border-left-color:#154e8a;background:#eef4fb}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .fe-rat:is([data-kamin-brand],[data-kamin-tipp="rand"]) .fe-rat-text>span{color:#1d2a44}
/* Verweis unter den Kanten: blendet die Schritte Ausschnitte und Bohrungen ein (Aufbau wie das Glasvordach, question-nav.mjs SELTENE_SCHRITTE). */
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-selten{margin:12px 0 0;padding:10px 12px;border:1px solid #c5d8ee;border-radius:8px;background:#eef4fb;color:#1d2a44;font-size:14px;line-height:1.45}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-selten-knopf{display:inline;min-height:0;width:auto;margin:0;padding:0;border:0;border-radius:0;background:none;color:#154e8a;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-selten-knopf::after{content:"";position:absolute;inset:-12px 0}
main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator .gc-kamin-selten-knopf{position:relative}

/* Die Raumansicht liegt über der weiter vermessenen Zeichenfläche. */
#glas-konfigurator .kamin-ansichten{display:flex;gap:3px;align-self:flex-start;width:fit-content;margin:8px 0 4px;padding:3px;background:#eef2f5;border-radius:9px;max-width:100%}
#glas-konfigurator .kamin-ansichten button{min-height:44px;padding:6px 12px;border:0;border-radius:6px;background:transparent;color:#42556a;font-size:14px;line-height:1.2;font-family:inherit;font-weight:600;cursor:pointer}
#glas-konfigurator .kamin-ansichten button[aria-pressed=true]{background:white;color:#174b79;box-shadow:0 1px 4px #102c4c28}
#glas-konfigurator .kamin-raum{position:absolute;inset:0;z-index:5;display:grid;place-items:center;container-type:size;overflow:hidden;background:#fff}
#glas-konfigurator .kamin-raum[hidden]{display:none}
#glas-konfigurator .kamin-raum svg{display:block}
#glas-konfigurator .kamin-raum>svg{display:block;width:min(100cqw,calc(100cqh * 52 / 35));height:auto;aspect-ratio:52/35;border-radius:8px;overflow:hidden}
#glas-konfigurator .kamin-im-raum .gc-canvas-wrap>:not(.kamin-raum){visibility:hidden!important}
#glas-konfigurator:has(.kamin-im-raum) .design-drawtitle .wb-zeichnung-legende{display:none!important}
@media(max-width:600px){
 main.wb-seite #glas-konfigurator#glas-konfigurator#glas-konfigurator#glas-konfigurator#glas-konfigurator .design-drawing-dialog[open] .gc-stage.kamin-im-raum{height:clamp(178px,64vw,340px)!important;min-height:0!important}
}

#glas-konfigurator .kamin-masslinien{stroke:#314b51;stroke-width:.85;opacity:.85}
#glas-konfigurator .kamin-masse text{font-family:inherit;font-size:12px;font-weight:650;fill:#213c40;stroke:#fbf7ef;stroke-width:4px;stroke-linejoin:round;paint-order:stroke}
@media(max-width:600px){
 #glas-konfigurator .kamin-masse text{font-size:20px;stroke-width:5px}
}

/* Abschluss der Kaminplatte nach der letzten bestätigten Auswahl. */
#glas-konfigurator .kamin-geschafft{position:relative;display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 16px;border:1px solid #9fd3b4;border-radius:10px;background:#e9f7ef;color:#0f4a2a}
#glas-konfigurator .kamin-geschafft svg{flex:none;width:46px;height:46px}
#glas-konfigurator .kamin-geschafft circle{fill:#1f8a4c}
#glas-konfigurator .kamin-geschafft path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
#glas-konfigurator .kamin-geschafft p{margin:0;font-size:15px;line-height:1.4}
#glas-konfigurator .kamin-geschafft strong{display:block;font-size:18px;font-weight:800}
#glas-konfigurator .kamin-geschafft-funken{position:absolute;left:39px;top:50%;width:0;height:0;pointer-events:none}
#glas-konfigurator .kamin-geschafft-funken i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:2px;background:#1f8a4c;opacity:0}
#glas-konfigurator .kamin-geschafft-funken i:nth-child(odd){background:#154e8a}
#glas-konfigurator .kamin-geschafft-funken i:nth-child(3n){width:6px;height:12px;background:#6fbf8f}
#glas-konfigurator .kamin-geschafft-funken i:nth-child(1){--kamin-w:0deg}#glas-konfigurator .kamin-geschafft-funken i:nth-child(2){--kamin-w:30deg}#glas-konfigurator .kamin-geschafft-funken i:nth-child(3){--kamin-w:60deg}#glas-konfigurator .kamin-geschafft-funken i:nth-child(4){--kamin-w:90deg}
#glas-konfigurator .kamin-geschafft-funken i:nth-child(5){--kamin-w:120deg}#glas-konfigurator .kamin-geschafft-funken i:nth-child(6){--kamin-w:150deg}#glas-konfigurator .kamin-geschafft-funken i:nth-child(7){--kamin-w:180deg}#glas-konfigurator .kamin-geschafft-funken i:nth-child(8){--kamin-w:210deg}
#glas-konfigurator .kamin-geschafft-funken i:nth-child(9){--kamin-w:240deg}#glas-konfigurator .kamin-geschafft-funken i:nth-child(10){--kamin-w:270deg}#glas-konfigurator .kamin-geschafft-funken i:nth-child(11){--kamin-w:300deg}#glas-konfigurator .kamin-geschafft-funken i:nth-child(12){--kamin-w:330deg}
@media (prefers-reduced-motion:no-preference){
  #glas-konfigurator .kamin-geschafft:not([hidden]){animation:kamin-geschafft-ein .55s cubic-bezier(.2,1.3,.4,1) both}
  #glas-konfigurator .kamin-geschafft:not([hidden]) svg{animation:kamin-geschafft-haken .7s .1s cubic-bezier(.2,1.5,.4,1) both}
  #glas-konfigurator .kamin-geschafft:not([hidden]) path{stroke-dasharray:40;stroke-dashoffset:40;animation:kamin-geschafft-strich .45s .5s ease-out forwards}
  #glas-konfigurator .kamin-geschafft:not([hidden]) .kamin-geschafft-funken i{animation:kamin-geschafft-funke 1s .45s cubic-bezier(.1,.7,.3,1) both}
  #glas-konfigurator .kamin-geschafft:not([hidden]) .kamin-geschafft-funken i:nth-child(even){animation-duration:1.25s}
  #glas-konfigurator[data-kamin-fertig] .design-purchase{animation:kamin-bereit-leiste 1.6s ease-out}
  @keyframes kamin-geschafft-ein{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes kamin-geschafft-haken{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
  @keyframes kamin-geschafft-strich{to{stroke-dashoffset:0}}
  @keyframes kamin-geschafft-funke{0%{opacity:1;transform:rotate(var(--kamin-w)) translateX(18px) scale(1)}100%{opacity:0;transform:rotate(var(--kamin-w)) translateX(96px) scale(.3)}}
  @keyframes kamin-bereit-leiste{0%{box-shadow:0 -8px 0 0 #1f8a4c,0 -30px 40px -10px rgba(31,138,76,.45)}100%{box-shadow:0 0 0 0 rgba(31,138,76,0),0 0 0 0 rgba(31,138,76,0)}}
}
#glas-konfigurator .kamin-geschafft[hidden]{display:none}
/* Abschluss in der Kaufleiste: breit in der Mitte der Leiste, schmal als Streifen über der Leiste. translate statt transform, damit die Einblendung (transform) frei bleibt. */
#glas-konfigurator .design-purchase>.kamin-geschafft{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:1;margin:0;padding:8px 16px 8px 10px;gap:10px;max-width:min(420px,calc(100vw - 24px));box-sizing:border-box;pointer-events:none}
#glas-konfigurator .design-purchase>.kamin-geschafft svg{width:36px;height:36px}
#glas-konfigurator .design-purchase>.kamin-geschafft p{font-size:14px;line-height:1.35}
#glas-konfigurator .design-purchase>.kamin-geschafft strong{font-size:16px}
#glas-konfigurator .design-purchase>.kamin-geschafft .kamin-geschafft-funken{left:28px}
@media (max-width:1199px){#glas-konfigurator .design-purchase>.kamin-geschafft{top:auto;bottom:calc(100% + 8px);translate:-50% 0;width:max-content;box-shadow:0 6px 18px rgba(15,35,60,.16)}
  /* Schmal liegt der Streifen über dem Inhalt: nach fünf Sekunden blendet er aus, der Knopf in der Leiste bleibt. */
  #glas-konfigurator .design-purchase>.kamin-geschafft:not([hidden]){animation:kamin-geschafft-weg .4s 5s forwards}
  @keyframes kamin-geschafft-weg{to{opacity:0;visibility:hidden}}}
/* Laden: der Konfigurator bleibt unsichtbar, bis alle Module ihn fertig aufgebaut haben (start.mjs setzt data-wb-bereit). Diese Datei
   bindet der Server nur an der Kaminglasplatte ein. Ohne das Merkmal zeigt sich die Seite nach zehn Sekunden von selbst. */
#glas-konfigurator[data-layout="werkbank"]:not([data-wb-bereit]){position:relative;min-height:60vh}
#glas-konfigurator[data-layout="werkbank"]:not([data-wb-bereit])>:not(dialog){visibility:hidden;animation:kamin-laden-zeigen 0s 10s forwards}
#glas-konfigurator[data-layout="werkbank"]:not([data-wb-bereit])::before{content:"Konfigurator wird geladen";position:absolute;left:0;right:0;top:120px;text-align:center;font-size:16px;font-weight:600;color:#3c4f66;animation:kamin-laden-weg 0s 10s forwards}
@keyframes kamin-laden-zeigen{to{visibility:visible}}
@keyframes kamin-laden-weg{to{visibility:hidden}}