/* Einzelglas im bestehenden Architektur-System. Alle Flächen und Abstände gelten nur für den Pilot. */
.gc-page{--gc-line:#cbd0d7;--gc-muted:#485364;--gc-paper:#f4f6f9;--gc-ink:#142a4c}
.gc-heading{margin:24px 0 32px}.gc-heading h1{font-size:clamp(28px,3.2vw,45px);letter-spacing:-.045em;line-height:1.12;margin:12px 0}.gc-heading h1 span{display:block;font-size:17px;line-height:1.5;letter-spacing:0;font-weight:500;margin-top:12px}.gc-heading>p:last-child{max-width:720px;color:var(--gc-muted)}
.gc{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:40px;align-items:start;padding-bottom:48px}.gc *{box-sizing:border-box}.gc-stage{position:sticky;top:14px;background:#e9ecf0;border:1px solid var(--gc-line);min-width:0}.gc-controls{min-width:0}.gc-tabs{display:flex;gap:2px;padding:10px;border-bottom:1px solid var(--gc-line);background:var(--gc-paper)}.gc button{font:600 13px/1.3 Manrope,Arial,sans-serif;cursor:pointer;min-height:44px;color:var(--gc-ink);border:1px solid var(--gc-line);background:transparent;padding:10px 12px}.gc button:hover{background:#dce1e9}.gc button[aria-pressed=true]{background:var(--gc-ink);color:white;border-color:var(--gc-ink)}.gc button:focus-visible,.gc a:focus-visible,.gc input:focus-visible,.gc select:focus-visible,.gc textarea:focus-visible{outline:3px solid #495f7f;outline-offset:3px}.gc-tabs button{border-color:transparent}.gc-tabs button:last-child{margin-left:auto;width:44px;flex-shrink:0}.gc-canvas-wrap{position:relative;aspect-ratio:10/7;min-height:240px;background:#e5e8ec}.gc-canvas-wrap canvas,.gc-canvas-wrap>svg{position:absolute;inset:0;width:100%;height:100%;display:block}.gc-canvas-wrap canvas{touch-action:pan-y}.gc-canvas-wrap>svg{overflow:visible}.gc-canvas-wrap [hidden]{display:none}.gc #gc-handles{pointer-events:none}.gc #gc-handles [data-corner],.gc #gc-handles [data-hole]{pointer-events:all;cursor:pointer;touch-action:none}.gc #gc-handles [data-hole]{cursor:grab}.gc #gc-handles [role=button]:focus{outline:none}.gc #gc-handles [role=button]:focus circle{stroke:#0e1e36;stroke-width:4}.gc-hint{font-size:12px;text-align:center;padding:0 16px;color:var(--gc-muted);margin:6px 0 14px}.gc-facts{display:flex;flex-wrap:wrap;gap:6px 18px;border-top:1px solid var(--gc-line);padding:14px 20px;font-size:12px}.gc-price{padding:18px 20px;background:white;border-top:1px solid var(--gc-line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.gc-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em}.gc-price strong{display:block;font-size:27px;line-height:1.3;letter-spacing:-.035em}.gc-price small{font-size:11px;display:block}.gc .button{background:var(--gc-ink);color:white;min-height:50px;padding:14px 18px;border:0}.gc .button:hover{background:#283b57}.gc .button:disabled{opacity:.55;cursor:not-allowed}.gc-price #gc-cart-status{margin:0;font-size:12px;flex-basis:100%}.gc-price #gc-cart-status:empty{display:none}.gc-breakdown{background:var(--gc-paper);padding:0 20px;font-size:12px}.gc-breakdown summary{padding:16px 0;min-height:48px;cursor:pointer;font-weight:650}.gc-breakdown dl{margin:0}.gc-breakdown dl>div{display:flex;gap:14px;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--gc-line)}.gc-breakdown dt{max-width:78%}.gc-breakdown dd{margin:0;white-space:nowrap}.gc-breakdown p{font-size:12px}.gc-jump{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--gc-line);padding-bottom:16px;margin-bottom:20px}.gc-jump a{min-height:44px;display:flex;align-items:center;padding:9px 13px;text-decoration:none;background:#dde2ea;font-size:12px;font-weight:650}.gc fieldset{border:0;border-bottom:1px solid var(--gc-line);padding:0 0 24px;margin:0 0 26px;min-width:0;scroll-margin-top:24px}.gc legend{font-size:21px;line-height:1.3;letter-spacing:-.03em;font-weight:600;padding:0 0 18px}.gc legend span{font-size:11px;letter-spacing:.08em;vertical-align:middle;color:var(--gc-muted);margin-right:14px}.gc label{font-size:13px;font-weight:600;display:block;min-width:0}.gc input,.gc select,.gc textarea{font:500 16px/1.3 Manrope,Arial,sans-serif;min-height:48px;border:1px solid #afb6c0;border-radius:0;background:#fff;color:var(--gc-ink);padding:12px;width:100%;margin:6px 0 0;min-width:0}.gc input[type=checkbox]{width:20px;height:20px;min-height:20px;margin:0 10px 0 0;accent-color:var(--gc-ink)}.gc .gc-check{display:flex;align-items:center;min-height:44px;font-weight:500}.gc textarea{resize:vertical}.gc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:15px 0}.gc-options{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}.gc-options button{flex:1;min-width:68px}.gc-shapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:20px}.gc-shapes button{padding:8px 3px;min-width:0;font-size:10px;display:flex;align-items:center;flex-direction:column;gap:5px;min-height:77px}.gc-shapes svg{width:46px;height:29px;fill:none;stroke:currentColor;stroke-width:1.5}.gc-help{font-size:12px;color:var(--gc-muted);margin:10px 0;line-height:1.6}.gc-error,.gc [role=status]{overflow-wrap:anywhere}.gc-error{font-size:12px;color:#923e25;display:block;font-weight:500;margin-top:6px;min-height:0}.gc-error:empty{display:none}.gc-note{border-left:3px solid #758399;padding:10px 12px;background:#dfe4ec;font-size:12px}.gc-edges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gc-edges button{text-align:left;padding:0;overflow:hidden}.gc-edge-image{display:block;width:100%;height:84px;object-fit:cover;background:#e2e6eb}.gc-edge-label{display:block;padding:10px 12px}.gc-edge-label small{display:block;font-size:11px;font-weight:400;margin-top:4px}.gc-corner-picker{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}.gc-corner-picker button{min-width:44px}.gc-hole{padding:14px;background:#e2e7ee;margin:12px 0}.gc-hole header{display:flex;justify-content:space-between;align-items:center;gap:12px}.gc-hole header strong{font-size:13px}.gc-hole header button{background:var(--gc-paper)}.gc-hole .gc-grid{margin:10px 0}.gc-add{width:100%;background:white!important;text-align:left}.gc-pill{font-size:12px;font-weight:500}.gc-invalid{border-color:#923e25!important}.gc #gc-error:empty{margin:0}.gc #gc-error{font-size:13px;color:#923e25}.gc-view-fallback #gc-canvas{display:none}.gc-view-fallback .gc-tabs button[data-view=scene]{display:none}.gc-stage:has(.gc-breakdown[open]){max-height:calc(100dvh - 28px);overflow-y:auto}
@media(max-width:1100px) and (min-width:851px){.gc{gap:24px}.gc-price{padding:15px}.gc-price strong{font-size:23px}.gc .button{padding:12px}.gc-canvas-wrap{min-height:220px}.gc-shapes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.gc{display:block;padding-bottom:24px}.gc-heading{margin:10px 0 20px}.gc-stage{position:sticky;top:0;z-index:8;margin-bottom:22px;border-bottom:2px solid #abb3bf}.gc-canvas-wrap{height:200px;min-height:0;aspect-ratio:auto}.gc-tabs{padding:3px 8px}.gc-tabs button{min-height:44px;font-size:12px;padding:8px}.gc-hint{margin:3px 0 6px;font-size:11px}.gc-facts{padding:5px 12px;gap:4px 14px;font-size:11px}.gc-facts span:last-child{display:inline;flex-basis:100%}.gc-stage .gc-price{position:fixed;bottom:0;left:0;right:0;z-index:30;padding:10px max(12px,calc((100vw - 700px)/2));border-top:1px solid #a5adba;box-shadow:0 -3px 14px #142a4c10;flex-wrap:nowrap;min-height:88px;padding-bottom:max(10px,env(safe-area-inset-bottom))}.gc-price strong{font-size:22px}.gc-price small{font-size:10px}.gc-price .button{font-size:12px;padding:12px;max-width:46%}.gc-price #gc-cart-status{position:absolute;bottom:100%;left:0;right:0;background:white;padding:8px 12px;border-top:1px solid var(--gc-line)}.gc-stage .gc-breakdown{position:absolute;right:0;top:100%;width:100%;padding:0 12px;box-shadow:0 6px 12px #142a4c12}.gc-breakdown summary{padding:9px 0;min-height:40px}.gc-breakdown[open]{max-height:calc(100dvh - 365px);overflow:auto}.gc-controls{padding-top:40px}.gc-stage:has(.gc-breakdown[open]){max-height:none;overflow:visible}.gc fieldset{scroll-margin-top:380px}.gc-page{padding-bottom:100px!important}.gc-shapes{grid-template-columns:repeat(4,minmax(0,1fr))}.gc-jump{gap:5px}.gc-jump a{padding:8px 11px}.gc-grid{gap:12px}}
@media(max-width:380px){.gc-shapes{grid-template-columns:repeat(3,minmax(0,1fr))}.gc-canvas-wrap{height:175px}.gc-price strong{font-size:19px}.gc .button{font-size:11px}.gc-heading h1{font-size:28px}.gc-options{gap:6px}.gc-options button{min-width:62px;padding:9px}.gc-edges{gap:8px}.gc-edge-label{padding:9px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.gc *{scroll-behavior:auto!important}}

.gc-heading{background:transparent;border:0;padding:0}.gc-edges button{display:block}.gc-canvas-wrap svg[hidden],.gc-canvas-wrap canvas[hidden]{display:none}

.gc [aria-pressed=true] small{color:inherit}.gc .gc-edge-label small{color:var(--gc-muted)}.gc [aria-pressed=true] .gc-edge-label small{color:inherit}

.gc-detail{display:flex;gap:14px;align-items:center;padding:8px 16px;border-top:1px solid var(--gc-line);background:#e9edf2}.gc-detail img{width:120px;height:62px;object-fit:cover;flex-shrink:0}.gc-detail strong{display:block;font-size:12px}.gc-detail .gc-hint{text-align:left;padding:0;margin:4px 0;font-size:11px}.gc-detail [hidden]{display:none}@media(max-width:850px){.gc-breakdown summary{min-height:44px}.gc-detail{padding:6px 10px;gap:10px}.gc-detail img{width:90px;height:52px}.gc-detail strong{font-size:11px}.gc-detail .gc-hint{font-size:10px}.gc fieldset{scroll-margin-top:420px}}

.gc-measurements[hidden]{display:none}.gc-measurements{padding:18px;background:#dfe4ec;margin-bottom:26px;border:1px solid var(--gc-line)}.gc-measurements h3,.gc-downloads h3{margin:0 0 12px;font-size:20px;line-height:1.3}.gc-measurements dl{margin:0}.gc-measurements dl>div{padding:10px 0;border-top:1px solid var(--gc-line)}.gc-measurements dt{font-size:12px;font-weight:650;margin-bottom:4px}.gc-measurements dd{margin:0;display:flex;gap:6px;flex-wrap:wrap;font-size:13px}.gc-measurements button{background:#fff;font-size:12px}.gc-downloads{margin:24px 0;border-top:1px solid var(--gc-line);padding-top:24px}.gc-downloads .gc-grid{gap:10px}.gc-downloads button{background:#dde2ea}.gc-downloads [role=status]{font-size:12px}

.gc-measurements{scroll-margin-top:24px}@media(max-width:850px){.gc-measurements{scroll-margin-top:420px}}

/* Produkt im Mittelpunkt: Informationen rechts, gemeinsamer Abschluss am Bildschirmrand. */
.gc-heading{margin:0 0 26px}.gc-heading h1{font-size:clamp(27px,2.6vw,39px)}
.gc-stage{height:max(480px,calc(100dvh - 174px));overflow:hidden}.gc-canvas-wrap{height:100%;min-height:0;aspect-ratio:auto}
.gc-tabs{position:absolute;top:8px;left:8px;right:auto;z-index:3;border:1px solid var(--gc-line);padding:2px;max-width:calc(100% - 16px)}.gc-tabs button:last-child{margin:0;width:auto;flex-shrink:1}
.gc-toolbar{position:absolute;right:10px;bottom:10px;display:flex;gap:4px;z-index:3}.gc-toolbar button{width:44px;height:44px;padding:8px;background:#f4f6f9;font-size:23px;font-weight:500}
.gc-detail{position:absolute;bottom:10px;left:10px;padding:0;border:1px solid var(--gc-line);display:block;max-width:calc(100% - 170px);pointer-events:none}.gc-detail img{width:126px;height:60px;display:block}.gc-detail strong{font-size:9px;padding:4px 6px;max-width:126px;font-weight:500}.gc-detail img[hidden]{display:none}
.gc-hint{position:absolute;left:12px;right:12px;bottom:102px;background:#f4f6f9;border:1px solid var(--gc-line);padding:12px;margin:0;z-index:4;text-align:left}.gc-hint{pointer-events:none}.gc-hint[hidden]{display:none}
.gc-quote{position:fixed;bottom:0;left:0;right:0;background:#fff;z-index:30;border-top:1px solid #a5adba;box-shadow:0 -3px 14px #142a4c10;padding:8px max(20px,calc((100vw - 1296px)/2));padding-bottom:max(8px,env(safe-area-inset-bottom))}.gc-quote-inner{display:flex;gap:26px;align-items:center;justify-content:space-between}.gc-summary{min-width:0;flex:1}.gc-facts{padding:0;border:0;gap:4px 16px}.gc-price{padding:0;border:0;flex-wrap:nowrap;gap:24px;flex-shrink:0}.gc-price #gc-cart-status{position:absolute;bottom:100%;left:0;right:0;background:#fff;border-top:1px solid var(--gc-line);padding:10px 20px}.gc-breakdown{padding:0;background:transparent}.gc-breakdown summary{padding:9px 0;min-height:44px;width:max-content}.gc-breakdown-content{position:absolute;bottom:100%;left:0;background:#f4f6f9;width:min(540px,100%);padding:20px;border:1px solid var(--gc-line);max-height:55dvh;overflow:auto}.gc-page{padding-bottom:150px!important}
.gc-stage:fullscreen{width:100vw;height:100dvh;border:0}.gc-stage:fullscreen .gc-canvas-wrap{height:100dvh}
@media(max-width:850px){.gc-stage{height:min(42dvh,390px);margin-bottom:22px;top:0}.gc-canvas-wrap{height:100%}.gc-controls{padding-top:0}.gc-heading{margin:0 0 24px}.gc-tabs{padding:2px}.gc-tabs button{font-size:11px}.gc-toolbar{right:8px;bottom:8px}.gc-detail{left:8px;bottom:8px}.gc-detail img{width:102px;height:48px}.gc-detail strong{font-size:8px;max-width:102px}.gc-quote{z-index:40;padding:6px 12px max(8px,env(safe-area-inset-bottom))}.gc-quote-inner{display:block}.gc-summary{display:flex;gap:10px;align-items:center;justify-content:space-between}.gc-facts{font-size:10px;gap:1px 10px;max-width:calc(100% - 95px)}.gc-facts span:last-child{flex-basis:100%}.gc-breakdown summary{font-size:10px;white-space:nowrap}.gc-breakdown[open]{max-height:none;overflow:visible}.gc-price{gap:12px;justify-content:space-between;min-height:68px}.gc-price .button{max-width:48%}.gc-price strong{font-size:23px}.gc fieldset,.gc-measurements{scroll-margin-top:calc(min(42dvh,390px) + 16px)}}

.gc #gc-hole-detail{z-index:2;inset:58px 10px 60px;width:calc(100% - 20px);height:calc(100% - 118px);pointer-events:none;overflow:hidden;background:#f4f6f9;animation:gc-detail-in .3s ease-out}.gc #gc-close-hole{position:absolute;left:10px;bottom:10px;z-index:4;background:#f4f6f9}.gc #gc-close-hole[hidden]{display:none}.gc-hole-focused .gc-detail,.gc-hole-focused #gc-handles{visibility:hidden}.gc-hole-focused .gc-hint{display:none}.gc-hole-focused #gc-close-hole{max-width:calc(100% - 166px);font-size:11px}@keyframes gc-detail-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.gc #gc-hole-detail{animation:none}}

/* Bemaßte Zeichnung in eigener, scrollbarerer Fläche. Werkzeugleisten liegen außerhalb. */
.gc-diagram{position:absolute;inset:64px 0 64px;overflow:auto;overscroll-behavior:contain;background:#f4f6f9}.gc-diagram[hidden]{display:none}.gc #gc-diagram-surface{position:relative;width:100%}.gc #gc-diagram-surface>svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden}.gc-drawing-mode .gc-detail{display:none}.gc .gc-controls>.gc-hint{position:static;margin:0 0 14px;background:#dfe4ec;font-size:12px;pointer-events:auto}.gc-hole-focused .gc-diagram{visibility:hidden}.gc-storage{margin:20px 0}.gc-storage p{font-size:12px}

/* Kantenwahl: dieselbe Oberfläche in der Nahaufnahme und in den Auswahlkacheln. */
.gc-edge-focused #gc-handles,.gc-edge-focused .gc-detail,.gc-edge-focused .gc-diagram{visibility:hidden}
.gc #gc-edge-info{position:absolute;left:14px;right:14px;top:70px;z-index:2;color:#142a4c;pointer-events:none;max-width:430px;background:#f4f6f9;padding:10px;border:1px solid var(--gc-line)}
.gc #gc-edge-info strong{display:block;font-size:19px}.gc #gc-edge-info span{display:block;font-size:13px;line-height:1.5;margin:5px 0}.gc #gc-edge-info small{font-size:11px}
.gc #gc-close-edge{position:absolute;left:10px;bottom:10px;z-index:4;background:#f4f6f9;max-width:calc(100% - 166px);font-size:11px}
.gc #gc-edge-fallback{position:absolute;inset:145px 12px 58px;background:#f4f6f9}.gc #gc-edge-fallback svg{width:100%;height:100%}
.gc #gc-edge-info[hidden],.gc #gc-edge-fallback[hidden],.gc #gc-close-edge[hidden]{display:none}
@media(max-width:850px){.gc #gc-edge-info{top:62px;left:12px;right:12px}.gc #gc-edge-info strong{font-size:15px}.gc #gc-edge-info span{font-size:12px;line-height:1.35}.gc #gc-edge-info small{font-size:10px}.gc #gc-edge-fallback{inset:155px 12px 58px}}
@media(max-width:850px) and (max-height:700px){.gc #gc-edge-info span{display:none}.gc #gc-edge-info{padding:7px 10px}}

/* Fragenleiste: Antworten aus dem Konfigurationszustand, eine mitlaufende Zeile. */
.gc{--gc-question-top:14px;--gc-question-height:94px}
.gc-jump{position:sticky;top:var(--gc-question-top);z-index:9;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(94px,1fr);gap:5px;align-items:stretch;width:100%;max-width:100%;margin:0 0 24px;padding:7px 0;background:var(--gc-paper);border-top:1px solid var(--gc-line);border-bottom:1px solid var(--gc-line);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#697587 #dde2ea}
.gc-jump a{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px;min-width:0;min-height:78px;padding:9px 8px;line-height:1.35;border:1px solid transparent;white-space:normal}
.gc-jump strong{font-size:12px}.gc-answer{font-size:11px;font-weight:400;overflow-wrap:anywhere}
.gc-jump a[aria-current=location]{background:var(--gc-ink);border-color:var(--gc-ink);color:#fff}
.gc fieldset,.gc-measurements{scroll-margin-top:calc(var(--gc-question-top) + var(--gc-question-height) + 18px)}
@media(max-width:850px){.gc{--gc-question-top:min(42dvh,390px)}.gc-jump{grid-auto-columns:112px;margin-bottom:22px;padding:5px 0}.gc-jump a{min-height:76px}.gc-jump strong{font-size:12px}}

.gc fieldset:focus{outline:none}

/* Die mitlaufende Leiste deckt auch den schmalen Abstand zum Fensterrand ab. */
@media(min-width:851px){.gc-jump{box-shadow:0 -16px 0 var(--gc-paper)}}
.gc-options button[data-thickness]{flex-direction:column;justify-content:center;align-items:center;gap:1px;overflow-wrap:normal;line-height:1.2}.gc-options button[data-thickness] small{white-space:nowrap;font-size:11px}
@media(max-width:850px) and (max-height:700px){.gc-jump{grid-auto-columns:200px}}

.gc-unit-question{display:block;font-size:12px;font-weight:400;line-height:1.5;background:#dfe4ec;padding:10px;margin-top:6px}.gc-unit-question button{display:block;width:100%;margin-top:6px}.gc [data-add-cutout]{flex-basis:calc(50% - 8px)}

.gc-overview{scroll-margin-top:calc(var(--gc-question-top,14px) + var(--gc-question-height,80px) + 24px);padding:28px 0;border-top:1px solid #c4c8ce;min-width:0}.gc-overview h2{font-size:24px}.gc-summary-row{display:flex;gap:18px;justify-content:space-between;padding:10px 0;border-bottom:1px solid #dbdde1}.gc-summary-row span{min-width:0;overflow-wrap:anywhere}.gc-summary-row a{flex-shrink:0;min-height:44px;display:flex;align-items:center}.gc-completion-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gc-overview button,.gc-overview input,.gc-overview textarea{max-width:100%;min-height:44px}.gc-overview label{display:grid;gap:6px;margin:14px 0}.gc-overview input,.gc-overview textarea{width:100%;box-sizing:border-box}.gc-overview [data-bookmark-box]{margin:20px 0}.gc-overview [data-bookmark-mail]{display:inline-flex;min-height:44px;align-items:center}.gc-direct-inquiry{margin-top:24px}.gc-direct-inquiry summary{min-height:44px;cursor:pointer;font-weight:600}.gc-print{display:none}
@media(max-width:480px){.gc-overview{padding:20px 0}.gc-completion-actions{gap:8px}.gc-completion-actions button{padding:10px;font-size:14px}.gc-summary-row{gap:10px}}
@media print{body:has(#gc-print)>:not(#gc-print){display:none!important}body:has(#gc-print){background:white!important;margin:0!important;padding:0!important}.gc-print{display:block!important;background:white!important;color:#17212f;font:10pt Arial,sans-serif}.gc-print header{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #45566f;padding-bottom:8px}.gc-print h1{font-size:18pt;margin:10px 0}.gc-print svg{width:100%;height:auto;display:block;break-inside:avoid}.gc-print ul{padding-left:18px;line-height:1.4}.gc-print li{break-inside:avoid}.gc-print p{line-height:1.35;overflow-wrap:anywhere}.gc-print a{color:inherit}.gc-print a::after{content:none!important}@page{size:A4;margin:12mm}}

.gc-overview button:hover,.gc-overview button:focus{color:var(--gc-ink)}

@media print{html:has(#gc-print){background:white!important}.gc-print-diagram-page{break-inside:avoid}.gc-print-diagram-page+.gc-print-diagram-page{break-before:page}}

@media print{.gc-print header{break-inside:avoid;align-items:flex-start}.gc-print-qr{width:45mm;flex:0 0 45mm;margin:0;text-align:center}.gc-print-qr svg{width:45mm;height:45mm}.gc-print-qr figcaption{font-size:9pt;margin-top:2mm}.gc-print header h1{margin-top:8mm}}

@media(max-width:699px){.gc.gc-overview-active{--gc-question-top:0px}.gc-overview-active .gc-stage:not(:fullscreen){position:relative;top:auto}}
.gc-quote #gc-cart-status{position:static;margin:0;padding:8px 0 0;border:0;background:transparent;font-size:12px;line-height:1.5}.gc-quote #gc-cart-status:empty{display:none}.gc-breakdown-content{left:max(20px,calc((100vw - 1296px)/2));width:min(540px,calc(100% - 40px));max-height:min(55dvh,var(--gc-panel-height,55dvh));box-shadow:0 -8px 28px #142a4c20;border:1px solid #a5adba;overscroll-behavior:contain}.gc #gc-close-breakdown{display:block;margin:0 0 14px auto;background:white}.gc-page{padding-bottom:var(--gc-bottom-space,150px)!important}.gc #gc-why{min-height:30px;padding:3px 0;border:0;text-decoration:underline;font-size:12px}.gc #gc-why[hidden]{display:none}.gc-section-feedback,.gc-choice-explanation{border-left:3px solid #956640;background:#faf3e9;padding:12px 14px;margin:12px 0;font-size:13px;line-height:1.5;scroll-margin-top:calc(var(--gc-question-height,80px) + 16px)}.gc-section-feedback p,.gc-choice-explanation p{margin:0 0 10px;font-size:13px}.gc-section-feedback p:last-child{margin:0}.gc-choice-explanation>div{display:flex;flex-wrap:wrap;gap:8px}.gc-choice-explanation button{background:#fff}.gc button.gc-choice-unavailable{border-style:dashed;background:#eaecf0;color:#585e66}.gc-choice-reason{display:block;font-size:10px;line-height:1.25;padding:3px;max-width:100%;font-weight:500}.gc #gc-corner-detail{position:absolute;inset:58px 10px 10px;pointer-events:none;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px}.gc #gc-corner-detail[hidden]{display:none}.gc #gc-corner-detail svg{display:none;width:100%;min-height:0;flex:1;background:#f4f6f9}.gc #gc-corner-detail p{background:#f4f6f9;padding:8px 12px;margin:0;font-size:13px}.gc #gc-close-corner{background:#f4f6f9;pointer-events:auto}.gc-corner-focused .gc-detail,.gc-corner-focused #gc-handles,.gc-corner-focused .gc-diagram{visibility:hidden}.gc-view-fallback #gc-corner-detail svg,.gc-drawing-mode #gc-corner-detail svg{display:block}.gc #gc-corner-detail button{font-size:12px}.gc-corner-focused #gc-corner-detail{right:62px}
@media(max-width:850px){.gc-breakdown-content{left:12px;width:calc(100% - 24px)}.gc-page{padding-bottom:var(--gc-bottom-space,150px)!important}}
@media(max-width:699px){.gc.gc-feedback-active{--gc-question-top:0px}.gc-feedback-active .gc-stage:not(:fullscreen){position:relative;top:auto}.gc #gc-corner-detail{inset:50px 62px 8px 8px}.gc #gc-corner-detail p{font-size:12px;padding:5px 8px}.gc #gc-corner-detail svg text{font-size:15px}}
.gc-summary #gc-why{margin-left:14px;white-space:nowrap}.gc-summary .gc-breakdown{display:inline-block}.gc #gc-corner-measure{pointer-events:none;z-index:2}.gc #gc-corner-measure:empty{display:none}
@media(max-width:850px){.gc-summary{flex-wrap:wrap;gap:0 8px}.gc-summary #gc-why{margin-left:auto;min-height:28px}.gc-summary:has(#gc-why:not([hidden])) .gc-facts{max-width:100%;flex:1}.gc-summary:has(#gc-why:not([hidden])) .gc-breakdown{flex-basis:auto}}
.gc-page{padding-bottom:48px!important}body:has(.gc-quote){padding-bottom:var(--gc-bottom-space,150px)}
@media(max-width:850px){.gc-summary{display:grid;grid-template-columns:1fr auto;gap:0 8px}.gc-summary .gc-facts,.gc-summary:has(#gc-why:not([hidden])) .gc-facts{grid-column:1/-1;max-width:none;display:flex}.gc-summary .gc-breakdown{grid-column:1}.gc-summary #gc-why{grid-column:2;grid-row:2;margin:0}.gc-summary .gc-breakdown summary{padding:4px 0;min-height:30px}.gc-quote #gc-cart-status{padding-top:4px}.gc-price strong{font-size:21px}.gc-price .button{min-height:48px}.gc-breakdown-content{max-height:min(45dvh,var(--gc-panel-height,45dvh))}}
@media(max-width:850px){.gc-facts span:last-child{flex-basis:auto}.gc-price strong[data-cents=""]{font-size:17px;letter-spacing:-.02em}.gc-quote #gc-cart-status{font-size:11px}.gc-quote #gc-cart-status a{white-space:nowrap}}
.gc #gc-corner-detail>svg>text{display:none}

.gc-breakdown:not([open]) .gc-breakdown-content{display:none}.gc #gc-close-breakdown{min-width:44px;min-height:44px}

.gc-summary .gc-breakdown summary,.gc-summary #gc-why{min-height:44px}.gc-summary #gc-why{min-width:44px}

.gc #gc-open-issues{max-width:420px;min-width:0}.gc #gc-open-issues a{display:block;color:#913b24;text-decoration:underline;text-underline-offset:3px;font-size:13px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:24px;line-height:24px}.gc .gc-question-open{box-shadow:inset 0 -3px #ad492d}.gc .gc-question-open .gc-answer{color:#913b24;font-weight:700}.gc [aria-invalid="true"]{border-color:#ad492d!important;outline-color:#ad492d}.gc-has-issues .gc-price>div>small{display:none}.gc-has-issues .gc-price #gc-total{font-size:19px}.gc-has-issues .gc-price>div{min-width:0}.gc #gc-open-issues[hidden]{display:none}
@media(max-width:850px){.gc-has-issues .gc-price{grid-template-columns:1fr;gap:5px}.gc-has-issues .gc-price>div{width:100%}.gc-has-issues .gc-price>div>.gc-label{display:none}.gc-has-issues #gc-open-issues{max-width:100%;display:flex;flex-wrap:wrap;gap:0 8px}.gc-has-issues #gc-open-issues a{max-width:100%;flex:0 1 auto}.gc-has-issues #gc-open-issues a:nth-child(2){max-width:calc(100% - 90px)}.gc-has-issues .gc-price #gc-cart{width:100%;padding:8px 12px;min-height:44px}.gc-has-issues .gc-facts{display:none!important}.gc-has-issues #gc-open-issues{max-height:48px;overflow:hidden}}

@media(max-width:850px){.gc-has-issues .gc-price{display:grid!important}.gc-has-issues .gc-summary #gc-why{grid-row:1}.gc-has-issues .gc-summary{min-height:44px}.gc-has-issues .gc-summary .gc-breakdown{grid-row:1}}

.gc [data-question][aria-current].gc-question-open .gc-answer{color:#ffe0c6}@media(max-width:850px){.gc-has-issues .gc-price #gc-cart{max-width:none}}

.gc-summary-open{display:block;min-height:44px;padding:10px 0;overflow-wrap:anywhere}.gc-summary-open:focus-visible{outline:2px solid currentColor;outline-offset:2px}

.sheet-price-details{overflow-wrap:anywhere}.sheet-price-details ul{padding-left:20px}.sheet-price-details li{margin:5px 0}
@media print{.gc-print ul{font-size:9pt;line-height:1.2;margin-top:5px;margin-bottom:5px}.gc-print li{margin:1px 0}.gc-print .sheet-price-details{font-size:9pt}.gc-print .sheet-price-details p{margin:6px 0}.gc-print .sheet-price-details ul{columns:2;column-gap:8mm}.gc-print .sheet-price-details li{break-inside:avoid}}

@media print{.gc-print-summary{columns:2;column-gap:8mm}.gc-print-summary li{break-inside:avoid}}
@media print{.gc-print>p,.gc-print-price-block>p{font-size:9pt;line-height:1.2;margin:5px 0}.gc-print header p{margin:4px 0}}

@media print{.gc-print-price-block{break-inside:avoid}}

.gc[data-material-family] .gc-answer{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:699px) and (max-height:700px){.gc[data-material-family]:not(.gc-overview-active){--gc-question-top:34dvh}.gc[data-material-family] .gc-stage:not(:fullscreen){height:34dvh}}

.gc button:is(:hover,:focus-visible,:active){color:var(--gc-ink)}
.gc button:is(:hover,:focus-visible,:active):is([aria-pressed=true],.button){color:#fff;background:var(--gc-ink)}
@media(max-width:699px) and (max-height:700px){.gc[data-material-family]:has(#gc-edge-fallback:not([hidden])) #gc-edge-info{top:62px;left:8px;right:auto;width:43%;padding:6px}.gc[data-material-family]:has(#gc-edge-fallback:not([hidden])) #gc-edge-info strong{font-size:13px}.gc[data-material-family] #gc-edge-fallback{inset:62px 8px 54px 48%}}
/* N16: Hinweis zur Maßanfertigung vor "In den Warenkorb" (gc-note) und Knopf "Noch ein Glas" in der Warenkorbbestätigung (gc-Knopf). */
.gc-overview .gc-custom-made{margin:18px 0;line-height:1.6}.gc-quote #gc-next-glass{display:block;margin:6px 0 0;max-width:100%;background:#fff;text-align:left}
/* N15: Datei-Einstieg DXF als breite Kachel unter den Formkacheln; Bericht als Hinweiszeile (gc-note) oder Rückmeldung (gc-section-feedback). */
.gc-shapes .gc-dxf-tile{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 12px;min-height:56px;padding:10px 12px;font-size:13px;background:#fff;text-align:center}
.gc-shapes .gc-dxf-tile svg{flex:none}
.gc-dxf-label{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.gc-dxf-label small{font-size:12px;font-weight:500;color:var(--gc-muted)}
.gc-shapes .gc-dxf-tile.gc-dxf-over{background:#dce1e9;outline:3px dashed #495f7f;outline-offset:2px}
#gc-dxf-hint{margin:-8px 0 16px}
.gc-dxf-report{margin:0 0 20px;line-height:1.5;overflow-wrap:anywhere}
.gc-dxf-report p{margin:0 0 8px}
.gc-dxf-report:focus-visible{outline:3px solid #495f7f;outline-offset:3px}
.gc-dxf-file{font-weight:400;margin-left:6px}
.gc-dxf-units{margin:6px 0 4px}
.gc-dxf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.gc-dxf-actions .gc-help{margin:0}
/* V7 (02.10.2026), Prüfbericht troas-a11y A11Y-1 (WCAG 1.4.10, 2.4.11): Zoom 200 % und 400 % am Laptop und das quer gehaltene Handy
   ergeben ein niedriges Fenster. Klebende Ansicht und Abschnittsleiste würden dort das Formular verdecken und laufen deshalb mit der Seite;
   unter 431 px Höhe steht auch die Preisleiste am Ende des Konfigurators statt fest am Rand. Vorbild: Regel für niedrige Fenster der
   anderen Glasfamilien (oben, data-material-family). app.mjs (quoteSpace, coverTop) und question-nav.mjs lesen die Lage aus dem Stil. */
@media(max-width:850px) and (max-height:560px){.gc{--gc-question-top:0px}.gc .gc-stage:not(:fullscreen),.gc .gc-jump{position:relative;top:auto}.gc fieldset,.gc .gc-measurements,.gc .gc-overview{scroll-margin-top:16px}}
@media(max-width:850px) and (max-height:430px){.gc .gc-quote{position:relative;z-index:auto;box-shadow:none}}
/* A11Y-5 (WCAG 2.4.11): Tastaturfokus hält Abstand zur festen Preisleiste, auch im Fuß. Die Höhe misst app.mjs (--gc-bottom-space). */
body:has(.gc-quote) :is(a[href],button,input,select,textarea,summary,[tabindex]){scroll-margin-bottom:var(--gc-bottom-space,150px)}
.gc .gc-quote *,.gc .gc-stage *{scroll-margin-bottom:0}
/* A11Y-3: Während des Speicherns bleibt "In den Warenkorb" fokussierbar (aria-disabled statt disabled), Aussehen wie gesperrt. */
.gc .button[aria-disabled=true],.gc-overview button[aria-disabled=true]{opacity:.55;cursor:progress}
/* A11Y-8: Überschrift einer Knopfgruppe (vorher ein Label ohne Feld), gleiche Schrift wie die Feldbeschriftungen. */
.gc .gc-group-label{font-size:13px;font-weight:600;margin:12px 0}
/* A11Y-7: Fehlertext und Einheitenfrage stehen jetzt hinter dem Label statt darin; Abstände wie vorher (6 px unter dem Feld, 12 px danach). */
.gc label:has(+ :is(.gc-error,.gc-unit-question):not(:empty)){margin-bottom:0}
.gc label+:is(.gc-error,.gc-unit-question):not(:empty):not(:has(+ :is(.gc-error,.gc-unit-question):not(:empty))),.gc label+:is(.gc-error,.gc-unit-question)+:is(.gc-error,.gc-unit-question):not(:empty){margin-bottom:12px}

/* V42 Rahmen am Handy: auf kleinen Bildschirmen war der Konfigurator schwer zu bedienen. Vorher blieben bei 375 × 667 zum
   Arbeiten rund 140 px, weil oben Ansicht und Abschnittsleiste (98 px) klebten und unten die Preisleiste 160 px hoch war.
   Jetzt: Abschnittsleiste als eine Zeile (die Antworten stehen in der Übersicht und in der Preisleiste), Preisleiste in zwei
   Zeilen, und am Handy eine niedrigere Ansicht. Lage (klebend/fest) bleibt wie bisher. */
@media(max-width:850px){
.gc{--gc-question-height:52px}
.gc-jump{grid-auto-columns:max-content;gap:4px;padding:4px 0;margin-bottom:16px}
.gc-jump a{min-height:44px;flex-direction:row;align-items:center;gap:0;padding:0 14px;white-space:nowrap}
.gc-jump .gc-answer{display:none}
.gc fieldset,.gc .gc-measurements,.gc .gc-overview{scroll-margin-top:calc(var(--gc-question-top) + var(--gc-question-height) + 12px)}
.gc-quote{padding:6px 12px max(8px,env(safe-area-inset-bottom))}
.gc-summary,.gc-summary:has(#gc-why:not([hidden])){display:flex;flex-wrap:nowrap;align-items:center;gap:0 10px}
.gc-summary .gc-facts,.gc-summary:has(#gc-why:not([hidden])) .gc-facts{flex:1;min-width:0;max-width:none;display:flex;flex-wrap:wrap;gap:0 10px;padding:0;font-size:11px;line-height:16px}
.gc-summary .gc-breakdown summary,.gc-summary #gc-why{min-height:36px;padding:0;display:flex;align-items:center}
.gc-price{min-height:0;gap:12px}
.gc-price .gc-label{font-size:10px;line-height:12px}
.gc-price strong{line-height:26px}
.gc-price small{line-height:14px}
}
@media(max-width:699px){
.gc-facts #gc-area,.gc-facts #gc-perimeter,.gc-facts #gc-weight{display:none}
.gc{--gc-stage-h:clamp(200px,34dvh,290px)}
.gc .gc-stage:not(:fullscreen),.gc[data-material-family] .gc-stage:not(:fullscreen){height:var(--gc-stage-h)}
.gc:not(.gc-overview-active):not(.gc-feedback-active),.gc[data-material-family]:not(.gc-overview-active):not(.gc-feedback-active){--gc-question-top:var(--gc-stage-h)}
.gc[data-material-family].gc-overview-active,.gc[data-material-family].gc-feedback-active{--gc-question-top:0px}
/* Weniger Leerraum über dem Konfigurator, damit Ansicht und Überschrift früher im Bild stehen. */
main.gc-page{padding-top:12px}
main.gc-page>.t-krumen{margin-bottom:12px}
/* Zeichnung mit Maßen gewählt: Ansicht höher, sonst ließ sich die Zeichnung nur innerhalb der Ansicht verschieben und die Breitenmaße fehlten. */
.gc.gc-drawing-mode,.gc[data-material-family].gc-drawing-mode{--gc-stage-h:clamp(300px,56dvh,460px)}
}

/* V42 Abschnitte: Formauswahl, Kantenkarten, Hilfe und Übersicht. */
.gc .gc-shape-options{margin:18px 0 0;padding:0;border:1px solid var(--gc-line);background:var(--gc-paper)}
.gc .gc-shape-options>summary{min-height:48px;padding:12px;font-size:14px;font-weight:650;cursor:pointer;overflow-wrap:normal;hyphens:manual}
.gc .gc-shape-options>summary span{display:block;margin-top:3px;font-size:12px;font-weight:500;color:var(--gc-muted)}
.gc .gc-shape-options[open]>summary{border-bottom:1px solid var(--gc-line);margin-bottom:14px}
.gc .gc-shape-options>.gc-shapes,.gc .gc-shape-options>.gc-help,.gc .gc-shape-options>.gc-note{margin-inline:12px}
.gc .gc-shapes{grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr))}
.gc .gc-shapes button{font-size:12px;line-height:1.4;hyphens:manual;overflow-wrap:normal;word-break:normal;padding:9px 6px;min-height:82px}
@media(max-width:850px){
 .gc .gc-edges{gap:8px}
 .gc .gc-edge-image{height:46px}
 .gc .gc-edge-label{padding:8px;font-size:13px;line-height:1.4;hyphens:manual;overflow-wrap:normal}
 .gc .gc-edge-label small{font-size:12px}
 .gc .gc-help{font-size:13px;line-height:1.5}
 .gc .gc-hole{padding:12px}
 .gc .gc-hole .gc-grid{gap:10px}
 .gc .gc-completion-actions button{min-height:48px;line-height:1.4}
 .gc .gc-overview h2{font-size:22px}
}
@media(max-width:380px){
 .gc .gc-shape-options>.gc-shapes{margin-inline:8px;gap:6px}
 .gc .gc-shapes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .gc .gc-shapes button{font-size:12px}
}
/* V44 Ecken (Troas-Rückmeldung 05.10.2026): alle Ecken mit ihrer Einstellung in der Auswahl, Übersicht des ganzen Glases beim Heranzoomen. */
.gc .gc-corner-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px}
.gc .gc-corner-picker button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;text-align:left;padding:8px 10px;min-width:0}
.gc .gc-corner-picker small{font-size:11px;font-weight:500;line-height:1.3}
.gc .gc-corner-mode{display:flex;align-items:center;margin:4px 0 0;padding:0 2px;border:0;text-decoration:underline;text-underline-offset:3px;font-size:13px}
.gc .gc-corner-mode[aria-expanded=false]::before{content:"+";margin-right:6px;font-size:18px;font-weight:400;text-decoration:none}
.gc #gc-corner-detail svg.gc-corner-overview{display:block;position:absolute;top:0;right:0;flex:none;width:112px;height:auto;max-height:96px;background:#f4f6f9;border:1px solid var(--gc-line);padding:4px;pointer-events:auto;overflow:visible}
.gc #gc-corner-detail svg.gc-corner-overview text{font:700 11px/1 Manrope,Arial,sans-serif}
.gc #gc-corner-detail svg.gc-corner-overview [data-overview-corner]{cursor:pointer}
.gc #gc-corner-detail svg.gc-corner-overview [data-overview-corner]:focus{outline:none}
.gc #gc-corner-detail svg.gc-corner-overview [data-overview-corner]:focus circle{stroke:#495f7f;stroke-width:3}
.gc-view-fallback #gc-corner-detail svg.gc-corner-overview,.gc-drawing-mode #gc-corner-detail svg.gc-corner-overview{display:none}
@media(max-width:699px){.gc #gc-corner-detail svg.gc-corner-overview{top:8px;width:84px;max-height:70px;padding:3px}}
.gc .gc-shape-label{min-width:0}
@media(max-width:850px){
 .gc #gc-shape .gc-shapes{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:4px 6px;margin:0 0 8px}
 .gc #gc-shape [data-shape]{display:grid;grid-template-columns:24px minmax(0,1fr);min-height:44px;padding:4px;gap:4px;text-align:left;font-size:12px;line-height:1.2}
 .gc #gc-shape [data-shape] .gc-choice-reason{grid-column:1/-1}
 .gc #gc-shape [data-shape] svg{flex:0 0 24px;width:24px;height:18px}
 .gc #gc-shape .gc-dxf-tile{min-height:44px;padding:4px 8px;gap:4px 8px}
 .gc #gc-shape .gc-dxf-label small{display:none}
 .gc .gc-jump [data-question="shape"]{gap:6px}
 .gc .gc-jump [data-question="shape"] strong::after{content:":"}
 .gc .gc-jump [data-question="shape"] .gc-answer{display:block;max-width:none;font-size:12px}
}

/* Auswahlprotokoll unmittelbar unter der Vorschau. Geöffnet liest es sich im normalen Seitenfluss. */
.gc-preview{min-width:0;align-self:start;position:sticky;top:14px}
.gc-preview .gc-stage:not(:fullscreen){position:relative;top:0;height:max(420px,calc(100dvh - 242px));margin-bottom:0}
.gc-selection{border:1px solid var(--gc-line);border-top:0;background:var(--gc-paper);padding:0 16px}
.gc-selection>summary{min-height:52px;cursor:pointer;padding:12px 0;font-size:14px;font-weight:650}
.gc-selection>summary span{font-size:12px;font-weight:400;margin-left:10px}
.gc-selection dl{margin:0 0 16px}
.gc-selection dl>div{display:grid;grid-template-columns:minmax(90px,.8fr) minmax(0,1.5fr);gap:8px 14px;padding:9px 0;border-top:1px solid var(--gc-line);font-size:13px;line-height:1.5}
.gc-selection dt{font-weight:650}.gc-selection dd{margin:0;overflow-wrap:anywhere}
@media(max-height:720px){.gc-selection-open .gc-preview{position:relative;top:0}}
.gc #gc-view-purpose{position:absolute;top:57px;left:12px;right:12px;margin:0;font-size:11px;line-height:16px;pointer-events:none;z-index:1;color:var(--gc-muted)}
.gc.gc-drawing-mode.gc-bore-focused #gc-hole-detail,.gc.gc-drawing-mode.gc-bore-focused #gc-close-hole{display:none}
.gc.gc-drawing-mode.gc-bore-focused #gc-handles,.gc.gc-drawing-mode.gc-bore-focused .gc-diagram{visibility:visible}
@media(max-width:850px){
 .gc-preview{display:contents}
 .gc-preview .gc-stage:not(:fullscreen){position:sticky;top:0;height:var(--gc-stage-h,min(42dvh,390px));margin-bottom:0}
 .gc-selection{margin:0 0 22px;padding:0 12px}
 .gc-selection>summary{min-height:48px;padding:10px 0}
 .gc-selection dl>div{grid-template-columns:minmax(106px,.9fr) minmax(0,1.5fr);gap:8px;font-size:13px}
 .gc-selection-open .gc-stage:not(:fullscreen){position:relative;top:auto}
 .gc.gc-selection-open{--gc-question-top:0px}
 .gc #gc-view-purpose{top:55px;font-size:11px}
 .gc .gc-tabs button{font-size:11px;padding:8px 9px}
}
@media(max-width:850px) and (max-height:560px){.gc-preview .gc-stage:not(:fullscreen){position:relative;top:auto}}

.gc-edge-focused #gc-view-purpose,.gc-corner-focused #gc-view-purpose{visibility:hidden}

/* Lackflächen bleiben im Maßabschnitt; vorhandene Felder und Zweispaltenraster. */
.gc-lackierung{margin-top:24px;padding-top:20px;border-top:1px solid var(--gc-line)}
.gc-lackierung h3{font-size:18px;line-height:1.4;margin:0 0 12px}
.gc-lackierung [role=status]{font-size:13px;overflow-wrap:anywhere}

/* Eckenart als Symbolkachel mit eigener Beschriftung. */
.gc .gc-options.gc-corner-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:420px;margin:12px 0 18px}
.gc .gc-corner-types button.gc-corner-tile{display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;min-height:44px;padding:0;border:0;background:transparent;color:var(--gc-ink);font-size:13px;line-height:1.35;text-align:center}
.gc .gc-corner-symbol{display:grid;place-items:center;aspect-ratio:1;min-height:44px;border:1px solid var(--gc-line);background:var(--gc-paper);color:var(--gc-ink)}
.gc .gc-corner-symbol svg{display:block;width:84%;height:84%;fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:square;stroke-linejoin:miter;pointer-events:none}
/* 19.10.2026 (Schrift im Eckknopf mittig): Gewählt färbt .gc-layout-49 den ganzen Knopf blau; der Abstand zum Symbol lag als gap
   über dem Text in der Fläche. Jetzt gleiches Polster oben und unten, Lage im ungewählten Zustand fast gleich (vorher 8 px Abstand, jetzt 7). */
.gc .gc-corner-label{display:block;min-width:0;padding:7px 4px;font-weight:600}
.gc .gc-corner-types button.gc-corner-tile:hover .gc-corner-symbol{background:#dce1e9;border-color:#798494}
.gc .gc-corner-types button.gc-corner-tile[aria-pressed=true]{background:transparent;color:var(--gc-ink)}
.gc .gc-corner-types button.gc-corner-tile[aria-pressed=true] .gc-corner-symbol{background:var(--gc-ink);color:var(--gc-paper);border-color:var(--gc-ink);box-shadow:inset 0 0 0 2px var(--gc-ink)}
.gc .gc-corner-types button.gc-corner-tile[aria-pressed=true] .gc-corner-label{font-weight:800}
@media(max-width:380px){.gc .gc-options.gc-corner-types{gap:8px}.gc .gc-corner-types button.gc-corner-tile{font-size:12px}.gc .gc-corner-label{padding:6px 3px}}

/* Maßliste und Auswahl sind unter der Zeichnung im normalen Seitenfluss erreichbar. */
.gc-preview>.gc-measurements{margin:0;border-top:0}
.gc-preview>#gc-edge-info{position:static;max-width:none;margin:0;padding:14px 18px;border-top:0;pointer-events:auto}
.gc-preview>#gc-edge-info span{display:block}
.gc.gc-drawing-mode.gc-edge-focused #gc-handles,.gc.gc-drawing-mode.gc-edge-focused .gc-diagram,.gc.gc-drawing-mode.gc-edge-focused #gc-view-purpose{visibility:visible}
.gc-preview>#gc-edge-info[hidden]{display:none}

@media(min-width:851px){
 .gc-preview>.gc-measurements{max-height:240px;overflow-y:auto;overscroll-behavior:contain}
}
@media(min-width:851px) and (max-height:720px){.gc-drawing-mode .gc-preview{position:relative;top:0}}

/* K19: Über ein Produkt ist die Glasart vorbelegt, die Wahl öffnet sich erst auf Wunsch. */
.gc .gc-family-fixed{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin:0 0 6px}
.gc .gc-family-fixed span{font-size:13px;color:var(--gc-muted)}
.gc .gc-family-fixed strong{font-size:15px}
.gc .gc-family-fixed button{border:0;padding:0 2px;text-decoration:underline;text-underline-offset:3px;font-size:13px}

/* Bohrungsmaße gehören zur ganzen Zeichnung. Eine umfangreiche Maßkette wächst
   im Seitenfluss, statt hinter dem unteren Rand einer klebenden Vorschau zu verschwinden.
   Am Desktop klebt die Vorschau trotzdem: Wird sie samt Maßliste und Befestigung höher als
   das Fenster über der Preisleiste, scrollt sie in sich, statt aus dem Blick zu laufen.
   Geöffnete "Deine Auswahl" und Fenster bis 720 px Höhe bleiben im Seitenfluss wie ohne Bohrung. */
@media(min-width:851px) and (min-height:721px){.gc.gc-drawing-mode:has([data-kind="hole"]) .gc-preview,.gc.gc-selection-open .gc-preview{position:sticky;top:14px;max-height:calc(100dvh - var(--gc-bottom-space,150px));overflow-y:auto;scrollbar-width:thin;scrollbar-color:#697587 #dde2ea}}
/* 46-p4a (Rückmeldung 10.10., A1b): Am Handy klebt die Zeichnung auch mit Bohrungen oben; die Maßkette scrollt in der
   Zeichenfläche (wie ohne Bohrung) bzw. wird klein eingepasst. Die Regel gilt nur noch ab 851 px. */
@media(min-width:851px){.gc.gc-drawing-mode:has([data-kind="hole"]) .gc-stage:not(:fullscreen){height:auto!important;position:relative;top:auto}
.gc.gc-drawing-mode:has([data-kind="hole"]) .gc-stage:not(:fullscreen) .gc-canvas-wrap{height:auto;min-height:0;aspect-ratio:auto}
.gc.gc-drawing-mode:has([data-kind="hole"]) .gc-stage:not(:fullscreen) .gc-diagram{position:relative;inset:auto;overflow:visible;padding:84px 0 64px}
.gc.gc-drawing-mode:has([data-kind="hole"]){--gc-question-top:0px}}

/* K13/K10: Hinweis an der Senkbohrung im Formular. Die Zubehörkarte selbst steht im Block "Variante B vollständig" am Ende. */
.gc .gc-zubehoer-hinweis button{display:inline-flex;align-items:center;min-height:44px;border:0;padding:0 2px;background:none;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gc .gc-zubehoer-hinweis[hidden]{display:none}


/* K05: Große Bildschirme geben der Zeichnung mehr Raum. Eingaben bleiben
   begrenzt, darunter gelten weiterhin die vorhandenen Tablet- und Handyregeln. */
@media screen and (min-width:1561px){
 main.wrap.gc-page{max-width:1920px}
 .gc-page .gc{grid-template-columns:minmax(0,1fr) minmax(420px,560px)}
 .gc-page .gc-quote{padding-inline:max(5vw,calc((100vw - 1920px)/2 + 5vw))}
 .gc-page .gc-breakdown-content{left:max(5vw,calc((100vw - 1920px)/2 + 5vw))}
}
/* K15: isolierter Freihandentwurf unter den Formen. */
.gc-skizzen-editor{min-width:0;width:100%;max-width:100%;margin-block:12px;overflow-wrap:anywhere}
.gc-skizzen-editor .gc-skizzen-editor{padding:12px;border:1px solid var(--gc-line);background:var(--gc-paper)}
.gc-skizzen-editor canvas{display:block;min-width:0;width:100%;max-width:100%;height:auto;touch-action:none;border:1px solid var(--gc-line);background:#fff}
.gc-skizzen-editor .gc-skizzen-aktionen{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;min-width:0}
.gc-skizzen-editor button{min-width:44px;min-height:44px;max-width:100%;white-space:normal}
.gc-skizzen-editor .gc-skizzen-hinweis,.gc-skizzen-editor .gc-skizzen-fehler{font-size:13px;line-height:1.5;margin-block:8px;max-width:100%}
.gc-skizzen-editor .gc-skizzen-fehler{color:#923e25}
@media(max-width:375px){.gc-skizzen-editor .gc-skizzen-aktionen button{flex:1 1 100%}}
@media(min-width:376px) and (max-width:768px){.gc-skizzen-editor .gc-skizzen-aktionen button{flex:1 1 calc(50% - 8px)}}
@media(min-width:769px) and (max-width:1024px){.gc-skizzen-editor .gc-skizzen-aktionen{gap:6px}}
@media(min-width:1025px){.gc-skizzen-editor .gc-skizzen-aktionen button{flex:1 1 auto}}
/* K04: Übersicht kompakt. Die Liste aller Angaben ist eingeklappt, "Deine Auswahl" unter der Zeichnung zeigt dasselbe. */
.gc-summary-details{margin:12px 0 18px;border-top:1px solid #c4c8ce;border-bottom:1px solid #c4c8ce}
.gc-summary-details>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600}
.gc-summary-details>summary{list-style:none}
.gc-summary-details>summary::-webkit-details-marker{display:none}
.gc-summary-details>summary::after{content:"+";margin-left:auto;padding-left:12px;font-size:20px;line-height:1}
.gc-summary-details[open]>summary::after{content:"−"}
/* Lackiertes Glas: Auswahl aus allen RAL-CLASSIC-Farben mit Suche. */
.gc .gc-ral{display:grid;gap:8px;margin:0 0 12px}
.gc .gc-ral-aktuell{display:flex;align-items:center;gap:10px;margin:0;font-weight:600}
.gc .gc-ral-liste{max-height:340px;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;padding:4px;border:1px solid var(--gc-line);border-radius:8px;background:#fff}
.gc .gc-ral-gruppe{grid-column:1/-1;margin:6px 4px 0;font-size:13px;font-weight:600;color:#4d525a}
.gc .gc-ral-gruppe[hidden],.gc-ral-farbe[hidden]{display:none}
.gc .gc-ral-farbe{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 8px;border:1px solid transparent;border-radius:6px;cursor:pointer;min-width:0}
.gc .gc-ral-farbe:hover{border-color:var(--gc-line)}
.gc .gc-ral-farbe:has(input:checked){border-color:#1d2a3d;background:#eceef2}
.gc .gc-ral-farbe:has(input:focus-visible){outline:2px solid #1d2a3d;outline-offset:1px}
.gc .gc-ral-farbe input{flex:0 0 20px;width:20px;height:20px;min-height:20px;margin:0}
.gc .gc-ral-feld{flex:0 0 28px;width:28px;height:28px;border-radius:4px;border:1px solid rgba(0,0,0,.25)}
.gc .gc-ral-name{display:grid;min-width:0;font-size:14px;line-height:1.25}
.gc .gc-ral-name small{font-size:12px;color:#4d525a;overflow-wrap:anywhere}
/* Glasstärken in festen Spalten: keine Stärke steht allein breit unter einer anderen (Rückmeldung Troas 06.10.). */
.gc .gc-options.gc-staerken{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.gc .gc-options.gc-staerken button{min-width:0}
/* Desktop: "Deine Auswahl" startet offen und bleibt mit der Zeichnung stehen (Rückmeldung Troas 06.10.).
   Die Liste scrollt in sich, damit Zeichnung und Maße sichtbar bleiben. */
@media(min-width:851px) and (min-height:721px){.gc .gc-selection[open] dl{max-height:min(30dvh,300px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.gc.gc-selection-open .gc-preview>.gc-measurements{max-height:110px;overflow-y:auto;overscroll-behavior:contain}}
/* Lackfläche in der Zeichnung verschieben und aufziehen. */
.gc #gc-handles [data-lack-move],.gc #gc-handles [data-lack-size]{pointer-events:all;touch-action:none}
#gc-handles [data-lack-move]{cursor:move}
#gc-handles [data-lack-size]{cursor:nesw-resize}
#gc-handles [data-lack-move]:focus{stroke:#0e1e36;stroke-width:3;stroke-dasharray:4 3}
#gc-handles [data-lack-size]:focus rect{stroke:#0e1e36;stroke-width:3}
/* O2-57 Punkt 3: Randausschnitt ziehen (Fläche verschiebt entlang der Kante, Enden verlängern), wie Bohrung und Lackfläche. */
.gc #gc-handles [data-cutout-move],.gc #gc-handles [data-cutout-end]{pointer-events:all;touch-action:none}
#gc-handles [data-cutout-move]{cursor:grab}
#gc-handles [data-cutout-end][data-richtung=x]{cursor:ew-resize}
#gc-handles [data-cutout-end][data-richtung=y]{cursor:ns-resize}
#gc-handles [data-cutout-move]:focus{stroke:#0e1e36;stroke-width:3;stroke-dasharray:4 3}
#gc-handles [data-cutout-end]:focus rect[rx]{stroke:#0e1e36;stroke-width:3}
/* Formen: drei sichtbar, Rest hinter "Weitere Formen" (Rückmeldung 06.10.). */
.gc .gc-shapes button[hidden]{display:none}
.gc .gc-shapes .gc-shape-more{border-style:dashed}
/* 45j: DXF und "Selber zeichnen" stehen hinter "Weitere Formen"; die Unterzeile sagt das, gestaltet wie die Unterzeile der DXF-Kachel. */
.gc .gc-shape-more small{display:block;margin-top:2px;font-size:12px;font-weight:500;color:var(--gc-muted)}
.gc-shape-more-plus{font-size:24px;line-height:30px;height:30px;font-weight:400}
/* Konfigurator einfacher (Auftrag 06.10.2026): Beschriftung und Notiz hinter einem Knopf, Hinweis aufklappbar, feste Glasangaben als eine Zeile. */
.gc #gc-extras-felder[hidden]{display:none}
.gc .gc-extras-mehr{margin-top:14px;border-style:dashed}
.gc .gc-mehr-info{margin:-4px 0 10px}
.gc .gc-mehr-info summary{min-height:44px;display:flex;align-items:center;width:max-content;max-width:100%;cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px;color:var(--gc-ink)}
.gc .gc-mehr-info summary:focus-visible{outline:3px solid #495f7f;outline-offset:3px}
.gc .gc-mehr-info p{margin-top:0}
.gc .gc-fest{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;margin:0 0 6px}
.gc .gc-fest-angabe span{font-size:13px;color:var(--gc-muted)}
.gc .gc-fest-angabe strong{font-size:15px}
.gc .gc-fest-angabe+.gc-fest-angabe::before{content:"·";padding:0 8px;color:var(--gc-muted)}
/* Kanten: drei sichtbar, Rest hinter "Weitere Kanten", Facettenbreiten nach Wahl der Kachel "Facette" (Rückmeldung 06.10.). */
.gc .gc-edges button[hidden],.gc .gc-edges .gc-facetten[hidden]{display:none}
.gc .gc-edges .gc-edge-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 12px;text-align:center;border-style:dashed}
.gc-edge-more-plus{font-size:24px;line-height:30px;height:30px;font-weight:400}
.gc .gc-edges .gc-edge-gewaehlt{background:var(--gc-ink);color:#fff;border-color:var(--gc-ink)}
.gc .gc-edges .gc-edge-gewaehlt .gc-edge-label small{color:inherit}
.gc .gc-edges .gc-facetten{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media(max-width:480px){.gc .gc-edges .gc-facetten{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gc .gc-facetten p{grid-column:1/-1;margin:4px 0 0;font-size:13px;font-weight:600}
.gc .gc-edges .gc-facetten button{padding:8px 10px;text-align:center;min-height:48px}
.gc .gc-facetten button small{display:block;font-size:12px;font-weight:400;margin-top:2px}
/* Bohrungen und Ausschnitte als ein Schritt (Auftrag 06.10.2026, Konfigurator einfacher): zwei Knöpfe nebeneinander,
   Ausschnittarten erst nach "+ Ausschnitt", zugeklappte Bohrungen und Ausschnitte als eine Zeile. */
.gc .gc-bearbeitung-neu{display:flex;gap:8px;margin:12px 0}
.gc .gc-bearbeitung-neu .gc-add{flex:1 1 0;width:auto;min-width:0;text-align:center}
.gc .gc-cutout-kinds{margin:0 0 12px}
.gc .gc-cutout-kinds[hidden]{display:none}
/* O2-57 Punkt 5: Flächenausschnitte als Formenraster wie Schritt 1 (gc-shapes), drei Kacheln je Zeile ab 321 px. */
.gc .gc-flaechen-formen{flex:1 1 100%;min-width:0}
.gc .gc-flaechen-formen>.gc-group-label{display:block;margin:6px 0}
.gc .gc-cutout-shapes{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 8px}
.gc .gc-cutout-shapes button{min-width:0}
.gc .gc-cutout-more{margin:0}
.gc .gc-cutout-more[hidden]{display:none}
.gc .gc-cutout-more p{margin:0 0 8px}
@media(max-width:340px){.gc .gc-cutout-shapes{grid-template-columns:repeat(2,minmax(0,1fr))}.gc .gc-cutout-shapes .gc-shape-more{grid-column:1/-1}}
.gc .gc-hole.gc-zu{padding:0;margin:6px 0}
.gc .gc-kurz{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;border:0;background:transparent;text-align:left;font-weight:400}
.gc .gc-kurz strong{font-size:13px;font-weight:700}
.gc .gc-kurz-text{flex:1;min-width:0;overflow-wrap:anywhere}
.gc .gc-kurz-aendern{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.gc .gc-hole.gc-zu>.gc-error{display:block;padding:0 12px 10px}
/* Handy: Zeichnung beim Ausfüllen klein (Auftrag 06.10.2026, handy-zeichnung.mjs). Die Klasse gc-zeichnung-klein gibt es nur
   bis 850 px Breite und nur, solange die Zeichnung oben klebt. Klein bleibt die Scheibe mit ihren Maßen, rechts daneben der
   Knopf "Zeichnung groß"; Ansichtswahl, Werkzeuge und Schließen-Knöpfe kommen mit der großen Zeichnung zurück.
   Abschnittsleiste und Sprungziele rücken über --gc-stage-h mit nach oben. */
.gc .gc-zeichnung-knopf[hidden]{display:none}
@media(max-width:850px){
 .gc{--gc-stage-klein:clamp(120px,22dvh,160px)}
 .gc.gc-zeichnung-klein,.gc.gc-drawing-mode.gc-zeichnung-klein,.gc[data-material-family].gc-zeichnung-klein,.gc[data-material-family].gc-drawing-mode.gc-zeichnung-klein{--gc-stage-h:var(--gc-stage-klein)}
 .gc.gc-zeichnung-klein .gc-tabs,.gc.gc-zeichnung-klein #gc-view-purpose,.gc.gc-zeichnung-klein .gc-toolbar,.gc.gc-zeichnung-klein .gc-detail,.gc.gc-zeichnung-klein #gc-close-hole,.gc.gc-zeichnung-klein #gc-close-edge,.gc.gc-zeichnung-klein #gc-close-corner,.gc.gc-zeichnung-klein .gc-stage #gc-edge-info{display:none}
 .gc.gc-zeichnung-klein .gc-diagram{inset:0 72px 0 0;overflow:hidden}
 .gc.gc-zeichnung-klein #gc-diagram-surface{height:100%!important}
 .gc.gc-zeichnung-klein .gc-canvas-wrap canvas,.gc.gc-zeichnung-klein .gc-canvas-wrap>svg{width:auto;right:72px}
 .gc.gc-zeichnung-klein #gc-hole-detail,.gc.gc-zeichnung-klein #gc-corner-detail,.gc.gc-zeichnung-klein #gc-edge-fallback{inset:4px 76px 4px 4px;width:auto;height:auto}
 .gc.gc-zeichnung-klein #gc-corner-detail p{font-size:11px;padding:2px 6px}
 /* Antippen der kleinen Zeichnung macht sie groß; Marken bleiben greifbar, groß wird sie nach dem Loslassen. */
 .gc.gc-zeichnung-klein .gc-canvas-wrap{cursor:zoom-in}
 .gc .gc-zeichnung-knopf{position:absolute;top:4px;right:4px;bottom:4px;z-index:6;width:68px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px;background:var(--gc-paper);border:1px solid #9fa7b3;font-size:11px;line-height:1.25;text-align:center;hyphens:manual;overflow-wrap:normal}
 .gc .gc-zeichnung-knopf span{font-size:20px;line-height:1;font-weight:500}
}
@media(min-width:700px) and (max-width:850px){.gc.gc-zeichnung-klein:not(.gc-selection-open){--gc-question-top:var(--gc-stage-h)}}
/* Bis 699 px bleibt die Abschnittsleiste auch in Übersicht und Hinweis unter der Zeichnung, ob klein oder groß. Gedacht war
   dort eine mitlaufende Zeichnung mit der Leiste an der Oberkante (oben gc-overview-active/gc-feedback-active), die Zeichnung
   klebt aber über .gc-preview .gc-stage weiter. So lag die Leiste über der Zeichnung, und beim Verlassen der Übersicht schob
   question-nav.mjs den Inhalt um die ganze Zeichnungshöhe nach unten: Was gerade angetippt wurde, sprang weg. Mit der Leiste
   an derselben Stelle ändert sich beim Wechsel nichts. */
@media(max-width:699px){.gc.gc-overview-active,.gc.gc-feedback-active,.gc[data-material-family].gc-overview-active,.gc[data-material-family].gc-feedback-active{--gc-question-top:var(--gc-stage-h)}}
/* Wunsch aus dem Projekt, 07.10.2026: passendes Zubehör gut sichtbar als kompakte Karte direkt am
   geöffneten Bohrungsfeld (zubehoer-ui.mjs nahMarkup). Weiße Fläche auf dem Salbeigrund des Feldes, Knopf in Glasgrün wie
   die übrigen Hauptknöpfe; Ausführung und Herstellerangaben bleiben im Bereich unter der Zeichnung. */
.gc .gc-zubehoer-nah{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--gc-line);container-type:inline-size}
.gc .gc-zubehoer-nah[hidden]{display:none}
.gc .gc-zubehoer-nah-titel{margin:0 0 8px;font-size:11px;font-weight:650;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--gc-muted)}
.gc .gc-zubehoer-nah-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gc .gc-zubehoer-nah-karte{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px 14px;align-items:center;padding:10px;background:#fff;border:1px solid var(--gc-line)}
.gc .gc-zubehoer-nah-karte img,.gc .gc-zubehoer-nah-ohne-bild{display:block;width:64px;height:64px;object-fit:contain;background:#f3f5f7}
.gc .gc-zubehoer-nah-text{min-width:0}
.gc .gc-zubehoer-nah-text strong{display:block;font-size:14px;font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.gc .gc-zubehoer-nah-zeile{display:block;font-size:12px;line-height:1.5;color:var(--gc-muted)}
.gc .gc-zubehoer-nah-preis{display:block;margin-top:2px;font-size:13px;font-weight:650;line-height:1.4;font-variant-numeric:tabular-nums}
.gc .gc-zubehoer-nah-aktion{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:0}
.gc .gc-zubehoer-nah-aktion [data-zubehoer-add]{background:var(--gc-ink);color:#fff;border-color:var(--gc-ink);white-space:nowrap}
.gc .gc-zubehoer-nah-aktion [data-zubehoer-add]:is(:hover,:focus-visible,:active){background:#283b57;color:#fff;border-color:#283b57}
.gc .gc-zubehoer-nah-aktion [data-zubehoer-add][aria-disabled=true]{opacity:.55;cursor:progress}
.gc .gc-zubehoer-nah .gc-zubehoer-nah-mehr{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:0;padding:0 2px;background:none;font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.gc .gc-zubehoer-nah .gc-zubehoer-nah-mehr:hover{background:none}
.gc .gc-zubehoer-nah>.gc-zubehoer-nah-mehr{margin-top:4px}
.gc .gc-zubehoer-nah .gc-zubehoer-status{font-size:12px}
@container (max-width:439px){.gc .gc-zubehoer-nah-karte{grid-template-columns:64px minmax(0,1fr);align-items:start}.gc .gc-zubehoer-nah-aktion{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px}.gc .gc-zubehoer-nah-aktion [data-zubehoer-add]{flex:1 1 auto}}

/* Variante B, 07.10.2026: Zeichnung links, ein offener Abschnitt rechts.
   Felder, IDs und gespeicherte Daten bleiben in ihren ursprünglichen Modulen. */
.gc-layout-b .gc-jump{display:block;position:static;overflow:visible;margin:0;padding:0;border:0;background:transparent;box-shadow:none;max-height:none;white-space:normal}
.gc-layout-b .gc-accordion{margin:0;background:#fff;border:1px solid var(--gc-line);border-bottom:0;min-width:0}
.gc-layout-b .gc-accordion:last-child{border-bottom:1px solid var(--gc-line)}
.gc-layout-b .gc-accordion>h2{font:inherit;margin:0;padding:0}
.gc-layout-b .gc-accordion-button{display:grid;grid-template-columns:auto minmax(0,1fr) 14px;gap:12px;align-items:center;width:100%;min-height:64px;padding:14px 18px;border:0;background:#fff;text-align:left;border-radius:0;color:#142a4c}
.gc-layout-b .gc-accordion-button strong{font-size:14px;line-height:1.35;max-width:160px}
.gc-layout-b .gc-accordion-button .gc-answer{display:block;min-width:0;text-align:right;font-size:12px;font-weight:500;line-height:1.45;color:#5a6678;overflow-wrap:anywhere;white-space:normal}
.gc-layout-b .gc-accordion-arrow{font-size:20px;line-height:1}
.gc-layout-b .gc-accordion-open{box-shadow:inset 3px 0 0 #142a4c}
.gc-layout-b .gc-accordion-open .gc-accordion-arrow{transform:rotate(180deg)}
.gc-layout-b .gc-accordion-button:focus-visible{outline:3px solid #a2480a;outline-offset:-3px}
.gc-layout-b .gc-accordion-content{padding:2px 18px 20px;min-width:0}
.gc-layout-b .gc-accordion-content[hidden]{display:none}
.gc-layout-b .gc-accordion-content>fieldset,.gc-layout-b .gc-accordion-content>.gc-overview{border:0;margin:0;padding:0;min-width:0}
.gc-layout-b .gc-accordion-content>fieldset>legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;margin:0}
.gc-layout-b #gc-format{margin-top:20px}
.gc-layout-b .gc-accordion-content #gc-overview>h2{font-size:19px;margin:0 0 16px}
.gc-layout-b :is(fieldset,.gc-overview,.gc-accordion-button){scroll-margin-top:16px}
.gc-layout-b .gc-stage{position:sticky;top:14px}
@media(min-width:851px){.gc-layout-b{grid-template-columns:minmax(0,1fr) minmax(380px,460px);gap:32px}}
@media(max-width:1100px) and (min-width:851px){.gc-layout-b{grid-template-columns:minmax(0,1fr) 380px;gap:24px}}
@media(max-width:850px){.gc-layout-b .gc-stage{top:0}.gc-layout-b .gc-accordion-button{padding:12px 14px;min-height:60px}.gc-layout-b .gc-accordion-content{padding:2px 14px 20px}.gc-layout-b :is(fieldset,.gc-overview,.gc-accordion-button){scroll-margin-top:calc(var(--gc-stage-klein,120px) + 12px)}}
@media(max-width:400px){.gc-layout-b .gc-accordion-button{grid-template-columns:minmax(0,1fr) 14px;gap:4px 10px}.gc-layout-b .gc-accordion-button strong{max-width:none}.gc-layout-b .gc-accordion-button .gc-answer{text-align:left;grid-column:1;grid-row:2}.gc-layout-b .gc-accordion-arrow{grid-column:2;grid-row:1/3}}


.gc-layout-b .gc-measurements-disclosure{border:1px solid var(--gc-line);border-top:0;background:var(--gc-paper);padding:0 16px}
.gc-layout-b .gc-measurements-disclosure>summary{min-height:48px;padding:12px 0;font-size:14px;font-weight:650;cursor:pointer}
.gc-layout-b .gc-measurements-disclosure .gc-measurements{padding:10px 0;border:0;margin:0;max-height:240px;overflow:auto}
.gc-layout-b .gc-measurements-disclosure .gc-measurements>h3{display:none}
.gc-layout-b .gc-preview{align-self:start}
@media(min-width:851px){.gc-layout-b .gc-preview{position:sticky;top:14px}}

/* 09.10.2026: Seitenkopf wie auf den Kategorieseiten (seiten.css .lp-archiv-kopf, gleiche Werte; background
   transparent gegen die alte Regel header{background:white} aus /shop/style.css; overflow-wrap wie .lp-body,
   weil Glasnamen wie "Drahtornamentglas" bei 320 px sonst über den Rand laufen):
   Kicker und Überschrift oben links über die ganze Breite, Erklärtext rechts, Linie darunter, dann der Konfigurator. */
.gc-seitenkopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,620px);gap:24px 72px;align-items:end;padding:28px 0 44px;border-bottom:0;margin:0 0 28px;background:transparent;overflow-wrap:anywhere}
.gc-seitenkopf .t-eyebrow{margin:0}
.gc-seitenkopf h1{position:relative;font-size:clamp(46px,5vw,96px);font-weight:800;letter-spacing:-.055em;line-height:.95;margin:0;color:var(--k-tinte);text-wrap:balance}
.gc-seitenkopf h1.gc-titel-lang{font-size:clamp(28px,2.6vw,40px);line-height:1.1}
.gc-seitenkopf-text{font-size:17.5px;line-height:1.6;max-width:62ch;color:#33415a;margin:0}
@media(max-width:860px){.gc-seitenkopf{grid-template-columns:1fr;gap:14px}}
@media(max-width:699px){.gc-seitenkopf-text{font-size:16px}}
/* Variante B vollständig, 08.10.2026 (Vorlage landingpage-varianten-2026-10-06/.../konfigurator-varianten/b).
   Links eine weiße Zeichenkarte mit Kopf (Maßzeile; Kicker und Titel stehen seit 09.10. im Seitenkopf darüber),
   darunter Zeichnung und Zubehörkarte.
   Rechts die Abschnitte ab oben, darunter Preis und Warenkorb klebend am unteren Rand der Spalte, darunter Widerruf und
   weitere Aktionen. Am Handy bleibt die Preisleiste unten (wie in der Vorlage bis 860 px), die Zubehörkarte steht dort
   unter den Abschnitten. */
.gc .gc-karte-kopf{background:transparent;display:flex;align-items:flex-end;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--gc-line);min-width:0}
.gc .gc-masse{margin:0;font-size:13px;font-weight:600;line-height:1.5;color:var(--gc-muted);font-variant-numeric:tabular-nums}
.gc .gc-masse:empty{display:none}
/* Weiter-Knopf am Ende jedes Abschnitts. */
/* 46-p4a (Rückmeldung 10.10., K3): "Weiter: <Abschnitt>" und "Weiter zur Übersicht" als gefüllter Knopf in voller Breite,
   Akzentfarbe Kupfer (#a2480a, weiße Schrift 6,1:1). Am Desktop klebt er über dem unten klebenden Richtwert-Kasten
   (--gc-weiter-unten setzt question-nav.mjs aus dessen Höhe), damit der Kasten ihn nicht verdeckt. */
.gc .gc-weiter{display:block;margin:16px 0 0}
.gc .gc-weiter .gc-weiter-knopf{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 16px;border:0;border-radius:4px;background:#a2480a;color:#fff;font-size:15px;font-weight:700;text-align:center}
.gc .gc-weiter .gc-weiter-knopf:is(:hover,:active,:focus-visible){background:#7f3807;color:#fff;text-decoration:none}
.gc .gc-weiter .gc-weiter-knopf:focus-visible{outline:3px solid var(--gc-ink);outline-offset:3px}
/* Integration 46: Klebender Weiter-Knopf am Desktop siehe Block 46-ruhe2 am Ende (klebt wieder, Fokus und Nachscrollen rechnen ihn mit ab). */
/* Zubehörkarte wie in der Vorlage: Bild, Text, darunter Preis und Aktion. */
.gc .gc-zubehoer{min-width:0;container-type:inline-size}
.gc .gc-zubehoer[hidden]{display:none}
.gc .gc-zubehoer-liste{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gc .gc-zubehoer-karte,.gc .gc-zb-hinweis-karte{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"bild text" "aktion aktion";gap:12px 16px;margin:0;padding:16px;background:#fff;border:1px solid var(--gc-ink);border-left:4px solid var(--gc-ink);border-radius:4px;min-width:0}
.gc .gc-zb-hinweis-karte{grid-template-areas:"bild text";border-color:var(--gc-line);border-left-color:#8a909a}
.gc .gc-zubehoer-liste+.gc-zb-hinweis-karte,.gc .gc-zb-hinweis-karte+h3+.gc-zubehoer-liste,.gc .gc-zubehoer-liste+h3+.gc-zubehoer-liste{margin-top:12px}
.gc .gc-zubehoer-karte>.gc-zubehoer-abbildungen,.gc .gc-zubehoer-karte>.gc-zubehoer-ohne-bild,.gc .gc-zb-hinweis-karte>.gc-zubehoer-ohne-bild{grid-area:bild;display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0;background:#e4e7ec;border-radius:4px;overflow:hidden}
.gc .gc-zubehoer-abbildungen figure{margin:0;width:100%;height:100%}
.gc .gc-zubehoer-abbildungen a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:44px}
.gc .gc-zubehoer-abbildungen img{display:block;width:64px;height:64px;object-fit:contain;background:#f3f5f7}
.gc .gc-zubehoer-ohne-bild svg{width:46px;height:46px}
.gc .gc-zb-a{fill:#f6f7f9;stroke:#8a909a;stroke-width:1.5}.gc .gc-zb-b{fill:#e2e5e9;stroke:#8a909a;stroke-width:1.2}.gc .gc-zb-c{fill:#8a909a}
.gc .gc-zubehoer-karte>.gc-zb-text,.gc .gc-zb-hinweis-karte>.gc-zb-text{grid-area:text;display:block;min-width:0}
.gc .gc-zb-eyebrow{margin:0;font-size:11px;font-weight:700;line-height:1.45;letter-spacing:.12em;text-transform:uppercase;color:var(--gc-muted);overflow-wrap:anywhere}
.gc .gc-zb-name{display:block;margin-top:2px;font-size:16px;font-weight:800;line-height:1.35;letter-spacing:-.01em;overflow-wrap:anywhere}
.gc .gc-zb-text p{margin:2px 0 0;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.gc .gc-zb-info{color:var(--gc-muted)}
/* Ausführungen: Spalten erst ab 160 px, damit Wörter wie "edelstahlfarbig" ganz bleiben; schmaler eine Option je Zeile. */
.gc .gc-zubehoer-variante{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:8px;max-width:340px;margin:10px 0 0;padding:0;border:0;min-width:0}
/* Die Ausführung liest der Screenreader als Gruppenname (legend.visually-hidden); sichtbar sind wie in der Vorlage nur die Umschalter. */
.gc .gc-zubehoer-variante legend{padding:0;margin:0}
.gc .gc-zubehoer-variante label{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:6px 12px;border:1px solid var(--gc-line);background:#fff;font-size:13px;font-weight:600;line-height:1.3;text-align:center;cursor:pointer;overflow-wrap:break-word;hyphens:manual}
.gc .gc-zubehoer-variante label:has(input:checked){background:var(--gc-ink);border-color:var(--gc-ink);color:#fff}
.gc .gc-zubehoer-variante label:has(input:focus-visible){outline:3px solid #a2480a;outline-offset:2px}
.gc .gc-zubehoer-variante input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer}
.gc .gc-zubehoer-zeichnungen{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0;min-width:0}
.gc .gc-zubehoer-zeichnungen figure{margin:0;width:96px;min-width:0}
.gc .gc-zubehoer-zeichnungen a{display:block;min-height:44px}
.gc .gc-zubehoer-zeichnungen img{display:block;width:96px;height:auto;max-width:100%}
.gc .gc-zubehoer-zeichnungen figcaption{margin-top:4px;font-size:11px;line-height:1.35}
.gc .gc-zubehoer-karte>.gc-zubehoer-aktion{grid-area:aktion;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin:0;min-width:0}
.gc .gc-zubehoer-aktion>p{margin:0;font-size:13px;line-height:1.5}
.gc .gc-zubehoer-preis{flex:1 1 140px;min-width:0;color:var(--gc-muted);font-variant-numeric:tabular-nums}
.gc .gc-zb-menge{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600}
.gc .gc-zb-menge input{width:72px;min-height:44px;padding:6px 8px;font-size:15px;text-align:right}
.gc .gc-zb-einheit{font-weight:500;color:var(--gc-muted)}
.gc .gc-zb-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-left:auto}
.gc .gc-zubehoer-aktion button,.gc .gc-zb-zu-bohrungen{min-height:44px;padding:0 16px;background:#fff;border:1px solid var(--gc-ink);color:var(--gc-ink);font-size:14px;font-weight:600}
.gc .gc-zubehoer-aktion .gc-zb-dazu[aria-pressed=true]{background:var(--gc-ink);color:#fff}
.gc .gc-zubehoer-aktion button:is(:hover,:focus-visible),.gc .gc-zb-zu-bohrungen:is(:hover,:focus-visible){background:#e4e7ec;color:var(--gc-ink)}
.gc .gc-zubehoer-aktion .gc-zb-dazu[aria-pressed=true]:is(:hover,:focus-visible){background:#283b57;color:#fff}
.gc .gc-zubehoer-aktion button[aria-disabled=true]{opacity:.55;cursor:progress}
.gc .gc-zb-link{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:var(--gc-ink)}
.gc .gc-zb-zu-bohrungen{margin-top:10px}
.gc .gc-zubehoer-offen{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.gc .gc-zubehoer-offen li{margin:0;padding:0;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.gc .gc-zubehoer-offen button{display:flex;align-items:center;min-height:44px;margin-top:6px;padding:0 12px}
.gc .gc-zb-fuss{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--gc-muted)}
.gc .gc-zubehoer-status{margin:10px 0 0;font-size:13px}
.gc .gc-zubehoer-status:empty{display:none}
.gc #gc-zubehoer-summe{margin:2px 0 0;font-size:12px;line-height:1.4;color:var(--gc-ink);font-weight:600;overflow-wrap:anywhere}
.gc #gc-zubehoer-summe[hidden]{display:none}
@container (max-width:420px){.gc .gc-zubehoer-karte{grid-template-columns:48px minmax(0,1fr);padding:12px;gap:10px 12px}.gc .gc-zubehoer-karte>.gc-zubehoer-abbildungen,.gc .gc-zubehoer-karte>.gc-zubehoer-ohne-bild,.gc .gc-zb-hinweis-karte>.gc-zubehoer-ohne-bild{width:48px;height:48px}.gc .gc-zubehoer-abbildungen img{width:48px;height:48px}.gc .gc-zubehoer-ohne-bild svg{width:34px;height:34px}.gc .gc-zb-knoepfe{margin-left:0;width:100%}.gc .gc-zb-knoepfe .gc-zb-dazu{flex:1 1 auto}.gc .gc-zb-hinweis-karte{grid-template-columns:48px minmax(0,1fr);padding:12px}}
/* Weitere Aktionen und Widerruf unter der rechten Spalte. */
.gc .gc-neben{display:grid;gap:6px;padding:0 4px;min-width:0}
.gc .gc-neben-widerruf{margin:0;font-size:12px;line-height:1.5;color:var(--gc-muted)}
.gc .gc-neben-widerruf a{color:inherit}
.gc .gc-nebenaktionen{display:flex;flex-wrap:wrap;gap:0 16px}
.gc .gc-nebenaktionen button{min-height:44px;padding:0;border:0;background:none;color:var(--gc-ink);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.gc .gc-nebenaktionen button:is(:hover,:focus-visible,:active){background:none;color:var(--gc-ink);text-decoration-thickness:2px}
@media(min-width:851px){
 .gc.gc-layout-b{grid-template-columns:minmax(0,1fr) minmax(380px,460px);gap:32px}
 /* Runde 2: Die Karte klebt oben (14 px). Kopf, Zeichnung und Zubehörkarte passen ins Fenster (app.mjs kartenBudget);
    Maßtextliste, "Alle Maße" und "Deine Auswahl" darunter scrollen innerhalb der Karte, die Zeichnung bleibt stehen.
    !important gegen die ältere Bohrungsregel (.gc-drawing-mode:has(...) .gc-preview) mit Preisleistenabstand. */
 .gc.gc-layout-b .gc-preview{position:sticky;top:14px;padding:22px 24px 20px;background:#fff;border:1px solid var(--gc-line);border-radius:4px;max-height:calc(100dvh - 28px)!important;overflow-y:auto!important;scrollbar-width:thin;scrollbar-color:#697587 #dde2ea}
 /* Zeichnung: Höhe aus dem Inhalt (app.mjs kartenBudget), Reiter und Werkzeuge in einer Zeile darüber. */
 .gc.gc-layout-b.gc-drawing-mode .gc-preview .gc-stage:not(:fullscreen){height:auto!important;position:relative;top:auto}
 .gc.gc-layout-b.gc-drawing-mode .gc-preview .gc-stage:not(:fullscreen) .gc-canvas-wrap{height:auto;min-height:0;aspect-ratio:auto}
 .gc.gc-layout-b.gc-drawing-mode .gc-preview .gc-stage:not(:fullscreen) .gc-diagram{position:relative;inset:auto;overflow:visible;padding:48px 0 4px}
 .gc.gc-layout-b .gc-preview .gc-stage:not(:fullscreen) .gc-tabs{top:0;left:0}
 .gc.gc-layout-b .gc-preview .gc-stage:not(:fullscreen) .gc-toolbar{top:0;right:0;bottom:auto}
 .gc.gc-layout-b .gc-preview .gc-stage:not(:fullscreen) #gc-view-purpose{top:48px;left:0}
 .gc.gc-layout-b .gc-preview .gc-stage:not(:fullscreen){margin-top:8px;background:#fff;border:0}
 .gc.gc-layout-b .gc-preview .gc-diagram{background:#fff}
 .gc.gc-layout-b .gc-tabs{background:transparent;border-bottom:0;padding:6px 0}
 .gc.gc-layout-b .gc-preview>#gc-edge-info{padding:12px 0;border:0;border-top:1px solid var(--gc-line);background:transparent}
 .gc.gc-layout-b .gc-preview>.gc-zubehoer{margin:12px 0 0;padding:0;border:0;background:transparent}
 .gc.gc-layout-b .gc-preview>:is(.gc-measurements-disclosure,.gc-selection){margin:0;padding:0;border:0;border-top:1px solid var(--gc-line);background:transparent}
 .gc.gc-layout-b .gc-preview>.gc-selection+.gc-zubehoer{margin-top:16px}
 .gc.gc-layout-b .gc-controls{display:flex;flex-direction:column;gap:20px;min-width:0}
 .gc.gc-layout-b .gc-controls>.gc-jump{order:0}
 /* Leere Meldezeilen bleiben im Barrierefreiheitsbaum (A11Y-6), nehmen aber keinen Abstand in der Spalte ein. */
 .gc.gc-layout-b .gc-controls>#gc-error:empty{position:absolute}
 .gc.gc-layout-b .gc-quote{position:sticky;bottom:0;left:auto;right:auto;z-index:20;margin:0;padding:16px 18px;background:#fff;border:1px solid var(--gc-ink);border-top:1px solid var(--gc-ink);border-radius:4px;box-shadow:0 -10px 24px #f4f6f9e6}
 .gc.gc-layout-b .gc-quote-inner{display:flex;flex-direction:column;align-items:stretch;gap:10px}
 .gc.gc-layout-b .gc-price{order:-1;position:static;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;min-height:0;padding:0;border:0;box-shadow:none;background:transparent}
 .gc.gc-layout-b .gc-price>div{min-width:0;flex:1 1 160px}
 .gc.gc-layout-b .gc-price .gc-label{display:block;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--gc-muted)}
 .gc.gc-layout-b .gc-price strong{font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
 .gc.gc-layout-b .gc-price strong[data-cents=""]{font-size:19px}
 .gc.gc-layout-b .gc-price small{display:block;font-size:12px;line-height:1.5}
 .gc.gc-layout-b .gc-price #gc-cart{flex:none;max-width:100%;min-height:52px;padding:0 24px}
 .gc.gc-layout-b .gc-summary{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;padding-top:8px;border-top:1px solid var(--gc-line)}
 .gc.gc-layout-b .gc-summary .gc-facts{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:0 12px;padding:0;border:0;font-size:12px;line-height:1.6;color:var(--gc-muted)}
 .gc.gc-layout-b .gc-summary .gc-breakdown summary,.gc.gc-layout-b .gc-summary #gc-why{min-height:44px;font-size:12px}
 .gc.gc-layout-b .gc-summary .gc-breakdown{position:static;display:inline-block;width:auto;box-shadow:none}
 .gc.gc-layout-b .gc-breakdown-content{position:absolute;left:-1px;right:-1px;bottom:calc(100% + 8px);width:auto;max-height:min(60dvh,var(--gc-panel-height,60dvh))}
 .gc.gc-layout-b .gc-quote #gc-cart-status{position:static;padding:8px 0 0;border:0;border-top:1px solid var(--gc-line);background:transparent}
 .gc.gc-layout-b .gc-quote #gc-cart-status:empty{display:none}
 .gc.gc-layout-b #gc-open-issues{max-width:100%}
}
@media(min-width:851px) and (max-width:1100px){
 .gc.gc-layout-b{grid-template-columns:minmax(0,1fr) 380px;gap:24px}
 .gc.gc-layout-b .gc-preview{padding:16px}
 .gc.gc-layout-b .gc-quote{padding:12px 14px}
 .gc.gc-layout-b .gc-price #gc-cart{padding:0 16px}
}
/* Offene "Deine Auswahl" am Desktop: Der Platzhalter "Passendes Zubehör erscheint, sobald du eine Bohrung setzt" tritt zurück,
   damit die Liste neben der Zeichnung steht (Rückmeldung Troas 06.10.). Mit Bohrung bleibt die Zubehörkarte stehen. */
@media(min-width:851px) and (min-height:721px){.gc.gc-layout-b.gc-selection-open .gc-preview>.gc-zubehoer:has([data-zubehoer-leer="ohne-bohrung"]){display:none}}
/* Niedrige Fenster: kein eigener Scrollbereich in der Karte (Vertrag "wie ohne Bohrung"); sie klebt oben, der Rest folgt am Ende. */
@media(min-width:851px) and (max-height:720px){.gc.gc-layout-b .gc-preview{max-height:none!important;overflow:visible!important}}
@media screen and (min-width:1561px){.gc-page .gc.gc-layout-b{grid-template-columns:minmax(0,1fr) minmax(420px,560px)}}
@media(max-width:850px){
 .gc.gc-layout-b .gc-karte-kopf{padding:4px 0 10px;margin-bottom:12px}
 .gc.gc-layout-b #gc-zubehoer-platz-mobil{margin:16px 0 0}
 .gc.gc-layout-b #gc-zubehoer-platz-mobil:empty{display:none}
 .gc.gc-layout-b .gc-neben{margin:20px 0 0}
 .gc.gc-layout-b .gc-quote #gc-zubehoer-summe{display:none}
}
@media(max-width:560px){
 .gc.gc-layout-b .gc-karte-kopf{padding-bottom:8px}
 .gc.gc-layout-b .gc-masse{font-size:12px}
}
.gc .gc-zb-dazu>span[aria-hidden]{margin-right:6px}
/* Runde 2: Maßtextliste der Zeichnung unter der Zubehörkarte (app.mjs renderMasstexte). */
.gc .gc-masstexte{margin:12px 0 0;padding:12px 0 4px;border-top:1px solid var(--gc-line);min-width:0}
.gc .gc-masstexte[hidden]{display:none}
.gc .gc-masstexte-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 16px;font-size:13px;line-height:1.5;color:var(--gc-ink)}
.gc .gc-masstext{margin:0;min-width:0;overflow-wrap:anywhere}
.gc .gc-masstext>span{display:block}
.gc .gc-masstext:not(.gc-masstext-hole){grid-column:1/-1}
.gc .gc-masstext-origin,.gc .gc-masstext-hole-reference{font-size:12px;color:var(--gc-muted)}
@media(max-width:850px){.gc.gc-layout-b .gc-masstexte{margin:0 0 16px;padding:10px 0 0;border-top:0}}
/* 45h: Maßtextliste zugeklappt im Aufklapper "Legende zur Zeichnung", gestaltet wie "Alle Maße zur Zeichnung". */
.gc .gc-masstexte-disclosure[hidden]{display:none}
.gc.gc-layout-b .gc-masstexte-disclosure .gc-masstexte{margin:0;padding:2px 0 14px;border-top:0}
/* Runde 2: Bohrungen und Ausschnitte als Karten wie in Variante B (app.mjs bohrungKarte, processing-ui.mjs cutoutForm). */
.gc .gc-hole.gc-hole-karte{margin:0 0 10px;padding:0 14px 14px;background:#fff;border:1px solid var(--gc-line);border-radius:4px;min-width:0}
.gc .gc-hole.gc-hole-karte.gc-offen{border:2px solid var(--gc-ink)}
.gc .gc-hole.gc-hole-karte.gc-zu{padding:0;background:#f5f7f9}
.gc .gc-hole-karte .gc-hole-kopf{display:flex;align-items:center;gap:12px;min-height:56px;margin:0;padding:10px 0;min-width:0}
.gc .gc-hole-karte.gc-zu .gc-hole-kopf{width:100%;padding:8px 14px;border:0;background:transparent;text-align:left;color:var(--gc-ink)}
.gc .gc-hole-karte.gc-zu .gc-hole-kopf:is(:hover,:focus-visible){background:#eaedf2}
.gc .gc-hole-marke{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:34px;height:34px;padding:0 6px;background:var(--gc-ink);color:#fff;font-size:12px;font-weight:800;border-radius:4px}
.gc .gc-hole-karte.gc-zu .gc-hole-marke{background:#dce1e9;color:var(--gc-ink)}
.gc .gc-hole-kopftext{flex:1;display:flex;flex-direction:column;min-width:0}
.gc .gc-hole-kopftext strong{font-size:14px;font-weight:700;line-height:1.35}
.gc .gc-hole-kopftext .gc-kurz-text{font-size:12.5px;font-weight:500;line-height:1.45;color:var(--gc-muted);overflow-wrap:anywhere}
.gc .gc-hole-karte .gc-kurz-aendern{flex:none;font-size:12.5px}
.gc .gc-hole-karte .gc-hole-weg{flex:none;width:44px;height:44px;min-height:44px;padding:0;border:0;background:none;color:var(--gc-ink);font-size:22px;font-weight:400;line-height:1}
.gc .gc-hole-karte .gc-hole-weg:is(:hover,:focus-visible){background:#eaedf2;color:var(--gc-ink)}
.gc .gc-hole-art .gc-group-label{display:block;margin:4px 0 6px}
.gc .gc-hole-arten{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:0 0 12px}
.gc .gc-hole-arten button{min-height:48px;padding:6px 8px;font-size:13px;font-weight:600;background:#fff;border:1px solid var(--gc-line)}
.gc .gc-hole-arten button[aria-pressed=true]{background:var(--gc-ink);border-color:var(--gc-ink);color:#fff}
.gc .gc-hole-karte .gc-hole-masse{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:4px 0 8px}
.gc .gc-einheit{position:relative;display:flex;align-items:center;margin-top:6px}
.gc .gc-einheit input{margin:0;padding-right:46px}
.gc .gc-einheit-mm{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:700;color:#923e25;pointer-events:none}
/* O-49 C13: Einheit mm an Eingaben in der Fehlerfarbe der Seite, Hinweis im Schritt Maße gut sichtbar. */
.gc .gc-mm{color:#923e25;font-weight:700;white-space:nowrap}
.gc .gc-mm-hinweis{margin:0 0 12px;padding:8px 12px;border-left:4px solid #923e25;background:#ffffff;color:#923e25;font-size:15px;font-weight:700}
.gc .gc-ergebnis{color:#142a4c;font-weight:600}
.gc .gc-lesefeld input{background:#e4e7ec;border-color:#e4e7ec;font-weight:600}
.gc .gc-bezug-kopf{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;min-height:24px;font-size:13px;font-weight:600}
.gc .gc-bezug-kopf label{display:inline}
.gc .gc-hole-karte .gc-bezug{width:auto;min-height:44px;margin:0;padding:0 6px;border:0;background:transparent;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gc .gc-einheit-label.gc-ohne-text{display:block}
@media(max-width:400px){.gc .gc-hole-karte .gc-hole-masse{grid-template-columns:minmax(0,1fr)}}
/* 45i: Infoblöcke unter dem Konfigurator zugeklappt (server/seo.mjs zugeklappt), Zeilen wie bei Fragen und Antworten */
.gc-page :is(.p1-daten,.p1-text):has(>.p1-zu){display:block;margin:0;padding:0;border:0}
.gc-page .gc+:is(.p1-daten,.p1-text):has(>.p1-zu){margin-top:16px;border-top:1px solid var(--t-line)}
.gc-page .p1-zu{padding:0;border-bottom:1px solid var(--t-line)}
.gc-page .p1-zu>summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;padding-block:18px;cursor:pointer;list-style:none}
.gc-page .p1-zu>summary::-webkit-details-marker{display:none}
.gc-page .p1-zu>summary h2{margin:0;font-size:22px;line-height:1.25}
.gc-page .p1-zu>summary span{flex-shrink:0;font-size:25px;line-height:1;transition:transform .15s}
.gc-page .p1-zu[open]>summary span{transform:rotate(45deg)}
.gc-page .p1-zu-inhalt{padding:4px 0 40px}
.gc-page .p1-text .p1-zu-inhalt{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:64px}
@media(max-width:860px){.gc-page .p1-text .p1-zu-inhalt{grid-template-columns:minmax(0,1fr);gap:28px}}
@media(max-width:480px){.gc-page .p1-zu>summary{min-height:64px;padding-block:14px}.gc-page .p1-zu>summary h2{font-size:19px}}
@media(prefers-reduced-motion:reduce){.gc-page .p1-zu>summary span{transition:none}}
/* 46-p1: Pflichtangaben am Ort (Cleantec-Seite unter der Beschichtung, Sichtseite und Heißlagerungstest direkt nach der Glaswahl) und erklärte Abschlussknöpfe. Keine Freifläche: Hinweistext und Knopf nebeneinander, solange Platz ist; Knopfraster nach eigener Breite (schmal 1, am Rand 2, breit 3 Spalten); Sperrmeldung als volle Zeile unter der Knopfreihe. */
.gc .gc-cleantec-seite{margin:4px 0 14px}
.gc .gc-hst-hinweis{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0;font-size:13px}
.gc .gc-hst-hinweis span{flex:1 1 140px;min-width:0}
.gc .gc-hst-hinweis button{flex:0 0 auto;min-height:44px;background:#fff;text-align:left}
.gc-overview .gc-completion-actions{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.gc-overview .gc-abschluss-aktion{display:flex;flex-direction:column;gap:4px;min-width:0}
.gc-overview .gc-abschluss-aktion>button{width:100%}
.gc-overview .gc-abschluss-aktion>button[aria-disabled=true]{cursor:pointer}
.gc-overview .gc-abschluss-zweck{font-size:12px;line-height:1.45;color:var(--gc-muted);overflow-wrap:anywhere}
.gc-overview .gc-abschluss-sperre{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:8px 12px;border-left:3px solid #923e25;background:#fbf1ec}
.gc-overview .gc-abschluss-sperre[hidden],.gc-overview .gc-abschluss-sperre button[hidden]{display:none}
.gc-overview .gc-abschluss-sperre p{flex:1 1 200px;min-width:0;margin:0;font-size:13px;line-height:1.45;font-weight:500;color:#923e25;overflow-wrap:anywhere}
.gc-overview .gc-abschluss-sperre button{flex:0 0 auto;min-height:44px;background:#fff}

/* 46-p4a (Rückmeldung 10.10., A1k): Schrittstatus in den Abschnittsköpfen statt einer eigenen Leiste (kein zusätzlicher
   Platz): Marke links mit Nummer, Häkchen (besucht, nichts offen) oder "!" (offen, orange), aktueller Schritt gefüllt und
   mit "Schritt n von m" unter dem Titel. */
.gc-layout-b .gc-accordion-button{grid-template-columns:26px auto minmax(0,1fr) 14px}
.gc-layout-b .gc-schritt-marke{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1.5px solid #8a94a2;color:#485364;font-size:12px;font-weight:700;line-height:1}
.gc-layout-b [data-schritt=erledigt] .gc-schritt-marke{border-color:#2f476b;background:#e3e8ef;color:#1f375a}
.gc-layout-b [data-schritt=offen] .gc-schritt-marke{border-color:#ad492d;background:#fbeee7;color:#913b24}
.gc-layout-b [data-schritt=aktuell] .gc-schritt-marke{border-color:var(--gc-ink);background:var(--gc-ink);color:#fff}
.gc-layout-b .gc-accordion-button strong[data-schritt-von]:not([data-schritt-von=""])::after{content:attr(data-schritt-von);display:block;font-size:11px;font-weight:600;color:var(--gc-muted);letter-spacing:.02em}
@media(max-width:400px){.gc-layout-b .gc-accordion-button{grid-template-columns:26px minmax(0,1fr) 14px}.gc-layout-b .gc-schritt-marke{grid-column:1;grid-row:1/3}.gc-layout-b .gc-accordion-button strong{grid-column:2;grid-row:1}.gc-layout-b .gc-accordion-button .gc-answer{grid-column:2;grid-row:2}.gc-layout-b .gc-accordion-arrow{grid-column:3;grid-row:1/3}}

/* 46-platz: Inhalt und Aktionen nutzen die verfügbare Bauteilbreite. */
.gc #gc-shape{container-type:inline-size;container-name:gc-formen}
.gc #gc-shape .gc-shapes{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.gc #gc-shape .gc-shapes>button{grid-column:span 3}
/* Rückmeldung 18.10.2026: Schrift im Knopf "Weitere Formen" linksbündig, direkt hinter dem Plus statt an den rechten Rand geschoben. */
.gc #gc-shape .gc-shapes>.gc-shape-more{flex-direction:row;justify-content:flex-start;flex-wrap:wrap;min-height:44px;gap:4px 10px;text-align:left}
.gc #gc-shape .gc-shape-more .gc-shape-label{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 12px;text-align:left}
.gc #gc-shape .gc-shape-more small{margin:0}
/* 54-BLAU: DXF bleibt im vollständigen Formenraster, ohne Zeichnen-Kachel und ohne freie Restspalten. */
.gc #gc-shape .gc-shapes>.gc-dxf-tile{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:4px 12px;min-height:60px;font-size:13px;padding:10px 12px}
.gc .gc-skizzen-einstieg:has(>#gc-skizzen-editor-host:empty){display:none}
@container gc-formen (width < 380px){
 .gc #gc-shape .gc-shapes>button{grid-column:span 3}
 .gc #gc-shape .gc-shapes>button:nth-child(2n+1 of button:not([hidden])):nth-last-child(1 of button:not([hidden])){grid-column:span 6}
}
@container gc-formen (min-width:380px){
 .gc #gc-shape .gc-shapes>button{grid-column:span 2}
 .gc #gc-shape .gc-shapes>button:nth-child(3n+1 of button:not([hidden])):nth-last-child(1 of button:not([hidden])){grid-column:span 6}
 .gc #gc-shape .gc-shapes>button:nth-child(3n+1 of button:not([hidden])):nth-last-child(2 of button:not([hidden])),
 .gc #gc-shape .gc-shapes>button:nth-child(3n+2 of button:not([hidden])):nth-last-child(1 of button:not([hidden])){grid-column:span 3}
}
@container (min-width:640px){
 .gc .gc-zb-hinweis-karte:has(.gc-zb-zu-bohrungen)>.gc-zb-text{display:grid;grid-template-columns:minmax(0,1fr) 180px;column-gap:16px}
 .gc .gc-zb-hinweis-karte:has(.gc-zb-zu-bohrungen)>.gc-zb-text>:not(.gc-zb-zu-bohrungen){grid-column:1}
 .gc .gc-zb-hinweis-karte .gc-zb-zu-bohrungen{grid-column:2;grid-row:1/span 3;align-self:stretch;justify-self:stretch}
 .gc .gc-zubehoer-karte{grid-template-columns:64px minmax(0,1fr) 180px;grid-template-areas:"bild text aktion";align-items:start}
 .gc .gc-zubehoer-karte>.gc-zubehoer-aktion{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px}
 .gc .gc-zubehoer-aktion>.gc-zubehoer-preis{flex:none}
 .gc .gc-zubehoer-aktion .gc-zb-menge{display:grid;grid-template-columns:auto 72px;gap:4px 8px}
 .gc .gc-zb-menge .gc-zb-einheit{grid-column:1/-1}
 .gc .gc-zubehoer-aktion .gc-zb-knoepfe{flex-direction:column;align-items:flex-start;margin-left:0;gap:0}
}
@media(min-width:851px){
 .gc.gc-layout-b .gc-summary{display:block}
 .gc.gc-layout-b .gc-summary .gc-facts{display:inline}
 .gc.gc-layout-b .gc-summary .gc-breakdown{vertical-align:middle}
 .gc.gc-layout-b .gc-summary .gc-facts>span{font-size:12px;line-height:1.6;color:var(--gc-muted);margin-right:12px}
 .gc.gc-layout-b .gc-summary .gc-facts span:last-child{flex-basis:auto}
}
.gc #gc-extras .gc-grid:has(>:only-child){grid-template-columns:minmax(0,1fr)}
/* 46-platz B (Rückmeldung 11.10., keine Freiflächen): Richtwert-Kasten am Desktop als Raster. Preis links, Warenkorb rechts,
   "Was steckt drin?" unter dem Knopf statt in einer eigenen Linkzeile, Fakten als eigene Zeile über die volle Breite.
   Zahl und Einheit bleiben zusammen. Handy unverändert. */
@media(min-width:851px){
 .gc.gc-layout-b .gc-quote-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:0;align-items:start}
 .gc.gc-layout-b .gc-quote-inner>.gc-price,.gc.gc-layout-b .gc-quote-inner>.gc-summary{display:contents}
 .gc.gc-layout-b .gc-quote-inner>.gc-price>div{grid-column:1;grid-row:1/span 2;min-width:0}
 .gc.gc-layout-b .gc-quote-inner>.gc-price>#gc-cart{grid-column:2;grid-row:1}
 .gc.gc-layout-b .gc-quote-inner>.gc-summary>.gc-breakdown{grid-column:2;grid-row:2;justify-self:end}
 .gc.gc-layout-b .gc-quote-inner>.gc-summary>#gc-why{grid-column:1/-1;grid-row:3;justify-self:end;margin:0}
 .gc.gc-layout-b .gc-quote-inner>.gc-summary>.gc-facts{grid-column:1/-1;grid-row:4;display:flex;flex-wrap:wrap;gap:0 12px;margin:2px 0 0;padding-top:6px;border-top:1px solid var(--gc-line)}
 .gc.gc-layout-b .gc-quote-inner .gc-facts>span{margin-right:0}
 .gc.gc-layout-b .gc-quote-inner .gc-facts>span:not(:last-child){white-space:nowrap}
 .gc.gc-layout-b .gc-quote-inner>.gc-price>#gc-cart-status{grid-column:1/-1;grid-row:5}
}

/* 46-kr: Küchenrückwand. Ausführungen in Gruppen nebeneinander, Crashglas-Knopf neben dem Text (kein Leerraum),
   Wandansicht mit Motiv. Breiten über die Container-Abfrage der eigenen Spalte. */
#gc-anwendung-ausfuehrungen{container-type:inline-size}
.kr-gruppen{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:10px}
.kr-gruppe{flex:0 1 auto;min-width:0}
.kr-gruppe-titel{margin:0;font-size:12px;letter-spacing:.06em;color:var(--t-muted)}
.kr-gruppe ul{margin-top:6px}
.kr-verweis{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:14px}
.kr-verweis p{margin:0;flex:1 1 220px}
.kr-verweis ul{margin:0}
@container (max-width:420px){.kr-gruppen{gap:10px 14px}.kr-gruppe ul{gap:6px}.kr-gruppe a{padding:0 11px}}
/* 46-kr Wandansicht: liegt als Ebene über der Zeichenfläche und füllt sie ganz (die SVG zeigt dafür mehr Wand). */
.kr-wand{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;background:var(--t-paper,#fff)}
.kr-wand[hidden]{display:none}
.kr-wand-aktiv #gc-handles{visibility:hidden}
.kr-wand-bild{flex:1 1 auto;min-height:0}
.kr-wand-bild svg{display:block;width:100%;height:100%}
.kr-wand-legende{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0;padding:6px 2px 2px;font-size:13px;line-height:1.35}
.kr-wand-tipp{color:var(--t-muted)}
.kr-w-wand{fill:#ECE7DF}
.kr-w-schrank{fill:#DCD5C9;stroke:#B9B0A2;stroke-width:1;vector-effect:non-scaling-stroke}
.kr-w-unter{fill:#D3CBBE;stroke:#B0A697;stroke-width:1;vector-effect:non-scaling-stroke}
.kr-w-fuge{stroke:#A79D8E;stroke-width:1;vector-effect:non-scaling-stroke}
.kr-w-platte{fill:#5E5045}
.kr-w-kante{stroke:#3f434a;stroke-width:1.5;vector-effect:non-scaling-stroke}
.kr-w-glanz{fill:none;stroke:#fff;stroke-opacity:.7;stroke-width:2;vector-effect:non-scaling-stroke}
.kr-w-dose rect{fill:#FAFAF8;stroke:#6E7572;stroke-width:1;vector-effect:non-scaling-stroke}
.kr-w-dose circle{fill:#e3e5e7;stroke:#6E7572;stroke-width:1;vector-effect:non-scaling-stroke}
.kr-w-dose .kr-w-pol{fill:#3F4442;stroke:none}
.kr-w-hahn{cursor:grab;fill:#A0A7AC;stroke:#59626A;stroke-width:1;vector-effect:non-scaling-stroke;touch-action:none}
.kr-w-hahn .kr-w-griff{fill:transparent;stroke:none}
.kr-w-hahn:focus{outline:none}
.kr-w-hahn:focus-visible .kr-w-griff{stroke:var(--t-ink,#1d293b);stroke-width:2;stroke-dasharray:5 4}
/* 46-kr eigenes Motiv: Kopfzeile mit Titel, Info und Knopf in einer Zeile, Regler nebeneinander. */
.kr-motiv{container-type:inline-size;margin-top:12px;padding-top:12px;border-top:1px solid var(--t-line)}
.kr-motiv[hidden]{display:none}
.kr-motiv-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.kr-motiv-kopf h3{margin:0;font-size:16px}
.kr-motiv-kopf [data-kr-motiv-info]{margin:0;flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.kr-motiv .kr-knopf{display:inline-flex;align-items:center;width:auto;min-height:44px;margin:0;padding:0 14px;border:1px solid var(--t-line);background:var(--t-paper);color:inherit;font:inherit;font-size:14px;cursor:pointer}
.kr-motiv .kr-knopf[hidden]{display:none}
.kr-motiv .kr-knopf:hover{background:var(--t-ink);color:var(--t-paper)}
.kr-motiv-wahl{position:relative}
.kr-motiv-wahl input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.kr-motiv-wahl:focus-within{outline:2px solid var(--t-ink,#1d293b);outline-offset:2px}
.kr-motiv-regler{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 18px;margin-top:8px}
.kr-motiv-regler[hidden]{display:none}
.kr-motiv-regler label{display:grid;grid-template-columns:7.5em minmax(0,1fr);align-items:center;gap:8px;margin:0;min-height:0;padding:0;font-size:13px}
.kr-motiv-regler input[type=range]{width:100%;height:32px;min-height:32px;margin:0;padding:0;border:0;background:none}
.kr-motiv-warnung{margin:8px 0 0;font-size:14px}
.kr-motiv-warnung.kr-warn{color:#8A4B00}
.kr-motiv-mail{margin:8px 0 0}
/* 46-ruhe2: "Weiter: <Abschnitt>" klebt am Desktop wieder über dem unten klebenden Richtwert-Kasten (K3, sonst trifft ein Klick
   den Kasten). Damit er kein fokussiertes Feld verdeckt (A11Y-1), rechnet question-nav.mjs (bereich) seine Oberkante als
   Unterkante des sichtbaren Bereichs mit ab, und der native Fokus-Abstand nach unten umfasst Kasten und Knopf
   (--gc-weiter-unten: Kastenhöhe aus question-nav.mjs; 80 px: Knopf 48 px, Abstand 8 px, Verlauf 8 px, Luft 16 px). */
@media(min-width:851px){
 .gc-layout-b .gc-accordion-content>.gc-weiter{position:sticky;bottom:calc(var(--gc-weiter-unten,0px) + 8px);z-index:19;padding-top:8px;background:linear-gradient(#fff0,#fff 8px)}
 body:has(.gc-quote) .gc-layout-b .gc-accordion-content :is(a[href],button,input,select,textarea,summary,[tabindex]){scroll-margin-bottom:calc(var(--gc-weiter-unten,0px) + 80px)}
 body:has(.gc-quote) .gc-layout-b .gc-accordion-content>.gc-weiter .gc-weiter-knopf{scroll-margin-bottom:calc(var(--gc-weiter-unten,0px) + 16px)}
}
/* 46-ruhe3: Live-Abnahme 11.10., Punkt e. Seit Variante B steht die Übersicht in der Abschnittsleiste (.gc-jump); deren Regel
   ".gc-jump a" (white-space:nowrap) traf auch die Links offener Angaben in der Übersicht. Ein langer Grund ("Cleantec-Seite: Bitte
   wählen, ob Cleantec vorn oder hinten liegt.") machte die Seite bei 375 px 422 px breit; am Handy verschob sich dadurch die
   Ansicht, ein Fingertipp auf "PDF" traf daneben und die Sperrmeldung erschien nicht. Links in der Übersicht brechen um. */
.gc-jump .gc-overview a{white-space:normal}

/* a-47-konfig: feste Orientierung, dauerhafte Auswahl und stabile Formularhöhe. */
.gc.gc-layout-b{overflow-anchor:none;--gc-steps-height:64px}
.gc .gc-steps{grid-column:1/-1;position:sticky;top:0;z-index:35;display:flex;align-items:stretch;gap:0;background:var(--gc-paper);border-block:1px solid var(--gc-line);padding:6px 0;margin:0;min-width:0}
.gc .gc-steps button{flex:1 1 0;min-width:0;min-height:50px;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px;color:var(--gc-ink);background:transparent;font-size:12px;line-height:1.25;text-align:left}
.gc .gc-step-number{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid #929ba9;border-radius:50%;font-size:12px}
.gc .gc-steps [aria-current=step]{background:#dce0e7;font-weight:750}
.gc .gc-steps [aria-current=step] .gc-step-number,.gc .gc-steps [data-schritt=erledigt] .gc-step-number{color:#fff;background:var(--gc-ink);border-color:var(--gc-ink)}
.gc .gc-steps [data-schritt=offen] .gc-step-number{color:#923e25;border-color:#923e25}
.gc .gc-selection{container-type:inline-size;container-name:auswahl}
.gc .gc-selection h2{font-size:15px;margin:12px 0 6px;line-height:1.4;letter-spacing:0}
.gc .gc-selection dl{display:grid;grid-template-columns:minmax(0,1fr);margin:0 0 8px;gap:0 20px;max-height:none!important;overflow:visible!important}
.gc .gc-selection dl>div{position:relative;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:8px;padding:4px 0;min-height:40px;align-items:center;font-size:12px;line-height:1.3}
.gc .gc-selection dd button{min-height:32px;min-width:0;width:100%;padding:4px 0;border:0;background:transparent;font:inherit;text-align:left;color:inherit;overflow-wrap:anywhere}
.gc .gc-selection dd button:after{content:'';position:absolute;inset:0}
.gc .gc-selection dl>div:has(button:hover){background:#ebeef2}
@container auswahl (min-width:520px){.gc .gc-selection dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gc.gc-layout-b .gc-controls #gc-edge-info{padding:12px 0;margin:12px 0 0;border-top:1px solid var(--gc-line);font-size:12px}
.gc.gc-layout-b .gc-controls #gc-edge-info span,.gc.gc-layout-b .gc-controls #gc-edge-info small{display:block}
.gc.gc-layout-b .gc-controls #gc-edge-info[hidden]{display:none}
.gc.gc-layout-b #gc-zubehoer-platz-mobil{margin:0}
@media(min-width:851px){
 .gc.gc-layout-b{row-gap:16px}
 .gc.gc-layout-b .gc-preview{top:80px;max-height:none!important;overflow:visible!important;padding:14px 20px}
 .gc.gc-layout-b .gc-preview>.gc-selection{margin:0;padding:0}
 .gc.gc-layout-b .gc-karte-kopf{padding-bottom:8px}
 .gc.gc-layout-b .gc-measurements-disclosure>summary{min-height:40px;padding-block:8px}
}
@media(max-width:850px){
 .gc.gc-layout-b{--gc-steps-height:56px}
 .gc .gc-steps{margin:0 0 16px;padding:4px 0}
 .gc .gc-steps button{flex:1 1 0;min-height:46px;padding:3px;gap:4px}
 .gc .gc-steps .gc-step-name{display:none}
 .gc.gc-layout-b .gc-preview .gc-stage:not(:fullscreen){position:relative;top:auto;height:350px}
 .gc.gc-layout-b .gc-selection{margin:0;padding:0 12px 8px}
 .gc.gc-layout-b .gc-preview>.gc-measurements-disclosure{margin-bottom:0}
 .gc.gc-layout-b .gc-controls{margin-top:20px}
 .gc .gc-steps [aria-current=step] .gc-step-name{display:block;position:absolute;bottom:0;left:0;right:0;background:var(--gc-paper);font-size:12px;padding:2px 6px;border-bottom:1px solid var(--gc-line);line-height:18px}
 .gc .gc-steps{padding-bottom:24px;margin-bottom:12px}
}
@media print{.gc .gc-steps{display:none}}

/* Kurze Zoom-Fenster: genügend Platz zwischen Schrittleiste und Preis für Tastaturfokus. */
@media(max-width:850px) and (max-height:400px){
 .gc .gc-steps{padding-bottom:0}
 .gc .gc-steps button{min-height:40px}
 .gc .gc-steps [aria-current=step] .gc-step-name{display:none}
}
/* Schmale Formkarten behalten auch lange Formnamen vollständig. */
@media(max-width:340px){.gc #gc-shape .gc-shapes>button{padding-inline:2px}}

/* 47b: Ecken in der Zeichnung mit Maßen. Die ganze Zeichnung bleibt stehen, die gewählte Ecke ist dort markiert.
   Die Eckenlupe ersetzte vorher die Zeichnung und blieb leer, wenn an der Ecke ein Eckausschnitt sitzt.
   In der Glasansicht bleiben Kamerafahrt, Übersicht und "Ganzes Glas" wie bisher. */
.gc.gc-drawing-mode #gc-corner-detail{display:none}
.gc.gc-drawing-mode.gc-corner-focused :is(.gc-diagram,#gc-handles,#gc-view-purpose){visibility:visible}
/* 47b: Mit Bohrung in der Zeichnung klebte die Karte nach einer älteren Regel bei 14 px und damit unter der Schrittleiste. */
@media(min-width:851px){.gc.gc-layout-b.gc-drawing-mode:has([data-kind="hole"]) .gc-preview,.gc.gc-layout-b.gc-selection-open .gc-preview{top:80px}}

/* 47b: eine kompakte Preiszeile, vollständige Maß- und Lieferdaten im Kopf der Zeichnung.
   Containerbreite entscheidet über die Knopfbreite, nicht die Fensterbreite. Handy bleibt unverändert. */
.gc-quote-notes:empty,.gc-quote-notes:not(:has(>:not([hidden]))){display:none}
@media(min-width:851px){
 .gc.gc-layout-b .gc-quote{padding:6px 8px;container:preisleiste / inline-size}
 .gc.gc-layout-b .gc-quote-inner{grid-template-columns:minmax(0,1fr) 90px 132px;gap:8px;align-items:center}
 .gc.gc-layout-b .gc-quote-inner>.gc-price>div{grid-column:1;grid-row:1}
 .gc.gc-layout-b .gc-quote-inner>.gc-summary>.gc-breakdown{grid-column:2;grid-row:1;justify-self:stretch}
 .gc.gc-layout-b .gc-summary .gc-breakdown summary{width:auto;white-space:normal;font-size:11px;line-height:1.3;padding:8px 0;min-height:44px;display:flex;align-items:center}
 .gc.gc-layout-b .gc-quote-inner>.gc-price>#gc-cart{grid-column:3;grid-row:1;width:100%;min-height:44px;padding:8px;font-size:12px;line-height:1.3}
 .gc.gc-layout-b .gc-price .gc-label{font-size:10px;line-height:12px;letter-spacing:.06em}
 .gc.gc-layout-b .gc-price strong{font-size:24px;line-height:26px}
 .gc.gc-layout-b .gc-price small{font-size:11px;line-height:14px}
 .gc.gc-layout-b .gc-price strong[data-cents=""]{font-size:16px;line-height:20px}
 .gc.gc-layout-b .gc-karte-kopf #gc-masse{display:none}
 .gc.gc-layout-b .gc-karte-kopf .gc-facts{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:12px;line-height:1.5;color:var(--gc-muted)}
 .gc.gc-layout-b .gc-karte-kopf .gc-facts>span{white-space:nowrap}
 .gc.gc-layout-b .gc-karte-kopf .gc-facts>span:last-child{white-space:normal;flex-basis:100%}
 .gc.gc-layout-b .gc-quote-notes{font-size:12px;margin:8px 0}
 .gc.gc-layout-b .gc-quote-notes #gc-open-issues a{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.5;min-height:24px}
 .gc.gc-layout-b .gc-quote #gc-cart-status:not(:empty){position:absolute;bottom:calc(100% + 8px);left:0;right:0;padding:10px;background:#fff;border:1px solid var(--gc-line)}
 @container preisleiste (max-width:370px){
  .gc.gc-layout-b .gc-quote-inner{grid-template-columns:minmax(0,1fr) 76px 104px;gap:6px}
  .gc.gc-layout-b .gc-price small{font-size:10px;line-height:13px}
  .gc.gc-layout-b .gc-quote-inner>.gc-price>#gc-cart{font-size:11px;padding:6px}
 }
}

/* A-48: geführter Desktop. Bis 850 px bleibt die vorhandene Akkordeonoberfläche. */
.gc-a-heading,.gc-a-back,.gc-a-next{display:none}
@media(min-width:851px){
 .gc-seitenkopf{padding-block:8px 12px;margin-bottom:16px;grid-template-columns:1fr}
 .gc-seitenkopf h1,.gc-seitenkopf h1.gc-titel-lang{font-size:28px;line-height:1.15;margin-top:6px}
 .gc-seitenkopf .gc-seitenkopf-text{display:none}
 .gc.gc-layout-a{--gc-steps-height:72px;grid-template-columns:minmax(0,1fr) minmax(360px,460px);gap:16px 32px;padding-bottom:32px}
 .gc.gc-layout-a .gc-steps{height:72px;padding:8px 0 0;gap:6px;border:0;align-items:stretch}
 .gc.gc-layout-a .gc-steps button{border-top:3px solid var(--gc-line);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;padding:8px 0;background:transparent;min-height:0;font-size:13px}
 .gc.gc-layout-a .gc-steps [aria-current=step]{border-color:var(--gc-ink)}
 .gc.gc-layout-a .gc-steps [data-schritt=erledigt]{border-color:#7f8997}
 .gc.gc-layout-a .gc-steps [data-schritt=offen]{border-color:#a2480a}
 .gc.gc-layout-a .gc-step-number{display:block;width:auto;height:auto;border:0;border-radius:0;background:transparent!important;color:inherit!important;font-size:11px;letter-spacing:.12em}
 .gc.gc-layout-a .gc-step-name{font-weight:600}
 .gc.gc-layout-a .gc-steps [aria-current=step] .gc-step-name{font-weight:800}
 .gc.gc-layout-a .gc-preview{top:88px!important;height:calc(100dvh - 176px);max-height:none!important;display:flex;flex-direction:column;padding:16px 20px;overflow:visible!important}
 .gc.gc-layout-a .gc-preview .gc-stage:not(:fullscreen){order:0;flex:1 1 auto;min-height:0;background:#fff;border:0}
 .gc.gc-layout-a .gc-karte-kopf{order:1;padding:10px 0 0;margin:8px 0 0;border-top:1px solid var(--gc-line);border-bottom:0}
 .gc.gc-layout-a .gc-karte-kopf .gc-facts{line-height:1.4}
 .gc.gc-layout-a .gc-preview>#gc-zubehoer{order:2;flex:0 0 auto;margin:12px 0 0;max-height:200px;overflow:auto}
 .gc.gc-layout-a #gc-zubehoer:not(:has(.gc-zubehoer-karte)){display:none}
 .gc.gc-layout-a .gc-controls{height:calc(100dvh - 176px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;gap:12px;padding:0 2px 12px 0}
 .gc.gc-layout-a .gc-accordion{border:0;background:transparent;box-shadow:none;margin:0}
 .gc.gc-layout-a .gc-accordion:not(.gc-accordion-open){display:none}
 .gc.gc-layout-a .gc-accordion>h2,.gc.gc-layout-a .gc-accordion-content>.gc-weiter{display:none}
 .gc.gc-layout-a .gc-a-heading{display:block;margin:0 0 20px}
 .gc.gc-layout-a .gc-a-heading .t-eyebrow{margin:0 0 6px;font-size:11px}
 .gc.gc-layout-a .gc-a-heading h2{margin:0;font-size:26px;line-height:1.15;letter-spacing:-.025em}
 .gc.gc-layout-a .gc-a-heading h2:focus{outline:none}
 .gc.gc-layout-a .gc-accordion-content{padding:0}
 .gc.gc-layout-a .gc-quote{position:fixed;inset:auto 0 0;margin:0;padding:8px max(24px,5vw);height:80px;z-index:40;border:0;border-top:1px solid var(--gc-line);border-radius:0;box-shadow:none;container:none}
 .gc.gc-layout-a .gc-quote-inner{display:grid;grid-template-columns:max-content 1fr auto minmax(180px,auto);gap:20px;align-items:center;height:100%}
 .gc.gc-layout-a .gc-quote-inner>.gc-price>div{grid-column:1;grid-row:1}
 .gc.gc-layout-a .gc-quote-inner>.gc-summary>.gc-breakdown{grid-column:2;grid-row:1;justify-self:start}
 .gc.gc-layout-a .gc-a-back{display:block;grid-column:3;grid-row:1;min-height:48px;padding:0 20px;border:0;background:transparent;color:var(--gc-ink)}
 .gc.gc-layout-a .gc-a-next,.gc.gc-layout-a .gc-quote-inner>.gc-price>#gc-cart{display:block;grid-column:4;grid-row:1;width:100%;min-height:48px;padding:10px 20px;font-size:14px;line-height:1.3;background:var(--gc-ink);color:#fff}
 .gc.gc-layout-a .gc-a-back[hidden],.gc.gc-layout-a .gc-a-next[hidden],.gc.gc-layout-a:not(.gc-overview-active) .gc-quote-inner>.gc-price>#gc-cart{display:none}
 .gc.gc-layout-a .gc-price strong{font-size:26px;line-height:28px}
 .gc.gc-layout-a .gc-price small{font-size:11px;line-height:14px}
 .gc.gc-layout-a .gc-breakdown-content{left:5vw;right:auto;width:min(540px,90vw)}
 .gc.gc-layout-a:not(.gc-overview-active) :is(.gc-neben,.gc-storage,.gc-downloads){display:none}
 .gc.gc-layout-a [data-complete=cart]{display:none}
 .gc.gc-layout-a .gc-overview>.gc-selection{margin-top:24px}
 .gc.gc-layout-a .gc-overview>.gc-measurements-disclosure{margin-top:12px}
 .gc.gc-layout-a .gc-preview .gc-stage:not(:fullscreen) .gc-diagram{background:#fff;padding-top:48px}
 .gc.gc-layout-a #gc-view-purpose{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .gc.gc-layout-a .gc-preview .gc-stage:not(:fullscreen) .gc-canvas-wrap{background:#fff}
 .gc.gc-layout-a .gc-quote-notes{margin:0}
}
@media(min-width:851px){
 .gc.gc-layout-a .gc-a-heading{background:transparent;border:0;padding:0;box-shadow:none}
 .gc.gc-layout-a #gc-live.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%)}
 .gc.gc-layout-a .gc-steps [data-step=holes] .gc-step-name{max-width:100%;overflow-wrap:normal}
 .gc.gc-layout-a [data-zubehoer-nah]{display:none}
 .gc.gc-layout-a .gc-hole .gc-field{margin:0;padding:0}
 .gc.gc-layout-a .gc-hole label{margin:0;min-height:0}
 .gc.gc-layout-a .gc-hole .gc-hole-masse{gap:10px;margin:8px 0}
 .gc.gc-layout-a .gc-hole .gc-help{font-size:11px;line-height:1.4;margin:6px 0}
 .gc.gc-layout-a .gc-preview>#gc-zubehoer{max-height:190px}
 .gc.gc-layout-a .gc-zubehoer-karte{grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:'bild text aktion';gap:12px;padding:12px;align-items:start}
 .gc.gc-layout-a .gc-zubehoer-karte>.gc-zubehoer-abbildungen{width:48px}
 .gc.gc-layout-a .gc-zubehoer-abbildungen img{width:48px;height:48px}
 .gc.gc-layout-a .gc-zubehoer-karte>.gc-zubehoer-aktion{display:flex;flex-direction:row;max-width:240px;gap:8px;justify-content:flex-end}
 .gc.gc-layout-a .gc-zubehoer-preis{flex:1 1 100%;text-align:right}
 .gc.gc-layout-a .gc-zb-menge{gap:4px;flex-wrap:nowrap;white-space:nowrap;font-size:11px}
 .gc.gc-layout-a .gc-zb-menge input{width:52px}
 .gc.gc-layout-a .gc-zb-knoepfe{margin:0}
 .gc.gc-layout-a .gc-zb-knoepfe .gc-zb-link{display:none}
 .gc.gc-layout-a .gc-zb-details summary{font-size:12px;cursor:pointer;min-height:32px;padding:6px 0}
 .gc.gc-layout-a .gc-zb-details[open]{padding-top:0}
 .gc.gc-layout-a .gc-zb-details p{font-size:12px;line-height:1.4}
 .gc.gc-layout-a .gc-zb-details .gc-zubehoer-variante{margin:6px 0}
 .gc.gc-layout-a .gc-zb-name{font-size:15px}
 .gc.gc-layout-a .gc-zb-eyebrow{font-size:10px}
}
@media(min-width:851px){
 .gc.gc-layout-a.gc-a-started #gc-bookmark-status[data-restored=true]{display:none}
 .gc.gc-layout-a .gc-a-heading{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px}
 .gc.gc-layout-a .gc-a-heading .t-eyebrow{flex-basis:100%}
 .gc.gc-layout-a .gc-a-heading h2{flex:1;min-width:0}
 .gc.gc-layout-a .gc-a-help{position:relative;flex:none;background:transparent}
 .gc.gc-layout-a .gc-a-help>summary{display:grid;place-items:center;list-style:none;min-width:44px;min-height:44px;cursor:pointer;font-size:13px;border:1px solid var(--gc-line);border-radius:50%}
 .gc.gc-layout-a .gc-a-help>summary::-webkit-details-marker{display:none}
 .gc.gc-layout-a .gc-a-help>p{position:absolute;z-index:10;right:0;top:100%;width:300px;margin:4px 0;padding:12px;background:#fff;border:1px solid var(--gc-line);font-size:13px;line-height:1.5}
 .gc.gc-layout-a .gc-zb-menge .gc-zb-einheit{grid-column:auto;flex:none;width:auto}
}
@media(min-width:851px){
 .gc.gc-layout-a .gc-zubehoer-aktion .gc-zb-menge{display:flex;gap:5px}
 .gc.gc-layout-a .gc-zb-details{padding:0}
 .gc.gc-layout-a .gc-zb-details>summary{min-height:44px;padding-block:12px}
 .gc.gc-layout-a .gc-zubehoer-karte>.gc-zubehoer-aktion{max-width:265px}
 @container (max-width:620px){
  .gc.gc-layout-a .gc-zubehoer-karte{grid-template-columns:40px minmax(0,1fr);grid-template-areas:'bild text' 'aktion aktion';gap:6px 10px}
  .gc.gc-layout-a .gc-zubehoer-karte>.gc-zubehoer-abbildungen{width:40px}
  .gc.gc-layout-a .gc-zubehoer-abbildungen img{width:40px;height:40px}
  .gc.gc-layout-a .gc-zubehoer-karte>.gc-zubehoer-aktion{max-width:none;justify-content:flex-start}
  .gc.gc-layout-a .gc-zubehoer-preis{flex:1 1 100px;text-align:left}
 }
}
@media(min-width:851px){
 .gc.gc-layout-a .gc-a-help{padding:0}
 .gc.gc-layout-a .gc-zb-knoepfe{width:auto}
 @container (max-width:620px){
  .gc.gc-layout-a .gc-zb-knoepfe{width:auto;margin-left:auto}
  .gc.gc-layout-a .gc-zb-knoepfe .gc-zb-dazu{flex:none}
  .gc.gc-layout-a .gc-zubehoer-aktion .gc-zb-menge{gap:4px}
 }
}
@media(min-width:851px) and (max-width:1100px){
 .gc.gc-layout-a{grid-template-columns:minmax(0,1fr) 360px;column-gap:24px}
 .gc.gc-layout-a .gc-a-heading h2{font-size:24px}
}
@media(min-width:851px){
 .gc.gc-layout-a .gc-a-heading{display:grid;grid-template-columns:minmax(0,max-content) 44px;justify-content:start;gap:6px}
 .gc.gc-layout-a .gc-a-heading .t-eyebrow{grid-column:1/-1}
 .gc.gc-layout-a .gc-a-heading h2{grid-column:1;grid-row:2}
 .gc.gc-layout-a .gc-a-help{grid-column:2;grid-row:2}
}

/* A-48 Serie: kurze Kopfzeile, gleich hohe Bezugsköpfe und erreichbare Hinzufügen-Aktionen. */
@media(min-width:851px){
 main.gc-page:has(.gc-layout-a){padding-top:8px}
 .gc.gc-layout-a .gc-hole-masse{align-items:end}
 .gc.gc-layout-a .gc-bezug-kopf{min-height:44px;align-content:center}
 .gc.gc-layout-a .gc-hole-kopftext{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0}
 .gc.gc-layout-a .gc-hole-kopftext strong{white-space:nowrap;font-size:12px}
 .gc.gc-layout-a .gc-hole-kopftext .gc-kurz-text{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .gc.gc-layout-a .gc-hole-karte.gc-zu .gc-hole-kopf{padding-block:4px;min-height:44px}
 .gc.gc-layout-a #gc-holes{display:flex;flex-direction:column}
 .gc.gc-layout-a .gc-bearbeitung-neu{position:sticky;bottom:0;order:2;background:var(--gc-paper);z-index:2;padding-block:8px;margin:0}
 .gc.gc-layout-a #gc-cutout-kinds{order:3}
 .gc.gc-layout-a #gc-holes>.gc-note{order:4;font-size:11px;margin-block:4px}
 .gc.gc-layout-a .gc-jump .gc-custom-made a{display:inline;min-height:0;padding:0;background:transparent;font:inherit;text-decoration:underline;color:inherit;white-space:normal}
}

@media(min-width:851px){body:has(.gc-layout-a) .t-krumen{margin-bottom:4px;padding-block:0}.gc.gc-layout-a .gc-bezug-kopf{flex-wrap:nowrap;font-size:11px;gap:3px}.gc.gc-layout-a .gc-bezug-kopf label{white-space:nowrap;font-size:11px}.gc.gc-layout-a .gc-bezug-kopf select{font-size:11px;min-width:0;padding-inline:4px}}

/* A-49 Pilot: getrennte Schritte, klar benannter Status und gemeinsame Legende. */
.gc.gc-layout-49{--gc-active:#154e8a;--gc-open:#d7e1f0;--gc-muted:#343d4b}
.gc-layout-49 .gc-step-state{font-size:11px;line-height:1.25;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-layout-49 .gc-steps-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;font-size:11px;line-height:16px;color:var(--gc-ink);font-weight:500}
.gc-layout-49 .gc-steps-legend>span{display:inline-flex;align-items:center;gap:6px}
.gc-layout-49 .gc-steps-legend i{display:inline-block;width:10px;height:10px;border:1px solid #657080}
.gc-layout-49 .gc-key-open{background:var(--gc-open)}
.gc-layout-49 .gc-steps-legend .gc-key-current{background:var(--gc-active);border-color:var(--gc-active)}
.gc.gc-layout-49 .gc-controls button[aria-pressed=true]{background:var(--gc-active);border-color:var(--gc-active);color:#fff}
.gc.gc-layout-49 #gc-cutouts{display:flex;flex-direction:column}
@media(min-width:851px){
 .gc.gc-layout-49{--gc-steps-height:112px}
 .gc.gc-layout-49 .gc-steps{height:var(--gc-steps-height);display:grid;grid-template-columns:repeat(var(--gc-step-count,9),minmax(0,1fr));grid-template-rows:1fr 20px;padding:8px 0 0;gap:6px;align-items:stretch}
 .gc.gc-layout-49 .gc-steps button{padding:7px 9px;gap:3px;min-height:44px;border-top:3px solid #707987;background:#fff;color:var(--gc-ink);font-size:12px;line-height:1.2}
 .gc.gc-layout-49 .gc-steps [data-schritt=offen]{background:var(--gc-open);border-color:#92a2bb}
 .gc.gc-layout-49 .gc-steps [data-schritt=erledigt]{background:#fff;border-color:#38475d}
 .gc.gc-layout-49 .gc-steps [aria-current=step]{background:var(--gc-active);border-color:var(--gc-active);color:#fff}
 .gc.gc-layout-49 .gc-steps .gc-step-number{font-size:11px;color:inherit}
 .gc.gc-layout-49 .gc-steps .gc-step-name{min-height:15px}
 .gc.gc-layout-49 .gc-steps-legend{grid-column:1/-1;align-self:end}
 .gc.gc-layout-49 .gc-preview{top:calc(var(--t-kopf-h,79px) + var(--gc-steps-height) + 16px)!important;height:calc(100dvh - var(--t-kopf-h,79px) - var(--gc-steps-height) - 104px)}
 .gc.gc-layout-49 .gc-controls{height:calc(100dvh - var(--t-kopf-h,79px) - var(--gc-steps-height) - 104px)}
 .gc.gc-layout-49 #gc-cutouts .gc-bearbeitung-neu{width:100%}
}
@media(min-width:851px) and (max-width:1100px){
 .gc.gc-layout-49{--gc-steps-height:126px}
 .gc.gc-layout-49 .gc-steps button{padding-inline:5px;font-size:11px}
}
@media(max-width:850px){
 .gc.gc-layout-49 .gc-step-state,.gc.gc-layout-49 .gc-steps-legend{display:none}
}

/* A-49 Serie: unbestätigte Vorgaben sind hell, fachliche Fehler bleiben rot. */
.gc.gc-layout-49{--gc-muted:#343e4e;--gc-open:#d4dfef}
.gc-shop-return{display:none}
.gc.gc-layout-49 [hidden]{display:none!important}
.gc.gc-layout-49 .gc-stamp-hst{border:1px solid var(--gc-line);padding:16px;margin-block:12px;display:grid;gap:8px}
.gc.gc-layout-49 .gc-stamp-hst h3{margin:0;font-size:16px}
.gc.gc-layout-49 .gc-stamp-hst label,.gc.gc-layout-49 .gc-stamp-hst .gc-help{margin:0}
.gc.gc-layout-49 .gc-format-limits{font-size:12px;line-height:1.5;color:var(--gc-muted);margin:8px 0}
.gc.gc-layout-49 :is(.gc-help,.gc-note,.t-eyebrow,.gc-answer,.gc-abschluss-zweck,.gc-step-state){color:var(--gc-muted)}
.gc.gc-layout-49 .gc-steps [aria-current=step] .gc-step-state{color:#fff}
.gc.gc-layout-49 .gc-step-state{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
.gc.gc-layout-49 .gc-steps [data-schritt=fehler]{background:#fff0ed;color:#812c22;border-color:#812c22}
.gc.gc-layout-49 .gc-accordion-button[data-schritt=offen]{background:var(--gc-open);color:var(--gc-ink)}
.gc.gc-layout-49 .gc-accordion-button[data-schritt=offen] .gc-schritt-marke{background:var(--gc-open);color:var(--gc-ink);border-color:#6b7b93}
.gc.gc-layout-49 .gc-accordion-button[data-schritt=fehler]{background:#fff0ed;color:#812c22}
.gc.gc-layout-49 .gc-accordion-button[data-schritt=fehler] .gc-schritt-marke{background:#812c22;color:#fff}
.gc.gc-layout-49 .gc-accordion-button[data-schritt=aktuell]{background:var(--gc-active);color:#fff}
.gc.gc-layout-49 .gc-accordion-button[data-schritt=aktuell] :is(.gc-answer,.gc-schritt-marke){color:#fff;background:var(--gc-active)}
.gc.gc-layout-49 .gc-selection dd button{color:var(--gc-active)}
.gc.gc-layout-49 #gc-overview>.gc-selection{margin:12px 0}
.gc.gc-layout-49 .gc-neben{display:none}
.gc.gc-layout-49[data-open-steps~=edges] [data-diagram-geometry]{stroke:#8699b5;stroke-width:3}
.gc.gc-layout-49[data-current-step=edges] [data-diagram-geometry]{stroke:var(--gc-active);stroke-width:3}
.gc.gc-layout-49[data-open-steps~=corners] [data-corner]>circle[r="13"]{fill:var(--gc-open);stroke:#6b7b93}
.gc.gc-layout-49[data-current-step=corners] [data-corner]>circle[r="13"]{fill:var(--gc-active);stroke:var(--gc-active)}
.gc.gc-layout-49[data-current-step=corners] [data-corner]>text{fill:#fff}
.gc.gc-layout-49[data-open-steps~=corners]:not([data-current-step=corners]) [data-corner]>text{fill:var(--gc-ink)}
@media(min-width:851px){
 /* Runde 55: Kontaktleiste und Kategorienzeile bleiben auch hier fest oben; nur Hauptzeile, Fuß und Krümelpfad weichen. */
 body:has(.gc-layout-49) :is(.t-footer,.t-krumen,header.t-header>.t-header-inner,header.t-header>.t-handywege){display:none}
 /* Ersatzwert 79 px = Kontaktleiste 33 + Kategorienzeile 46, bis kopf.mjs die gemessene Höhe setzt. */
 body:has(.gc-layout-49) main.gc-page{padding-top:0}
 .gc-shop-return{display:flex;align-items:center;gap:20px;min-height:48px;color:#202c3e;font-size:12px}
 .gc-shop-return>a{display:flex;align-items:center;min-height:44px;color:inherit;font-weight:700}
 .gc-shop-return>span{flex:1;min-width:0}
 /* Karte 86: "ab"-Preis direkt neben dem Artikelnamen, der Rückweg bleibt rechts. */
 .gc-shop-return:has(>.gc-ab-preis:not([hidden]))>span{flex:0 1 auto}
 .gc-shop-return>.gc-ab-preis{flex:1;min-width:0;font-size:inherit;color:var(--gc-muted)}
 .gc-shop-return>a.gc-shop-logo img{display:block;height:24px;width:auto}
 .gc.gc-layout-49 .gc-steps{top:var(--t-kopf-h,79px)}
 .gc.gc-layout-49 .gc-controls{padding-top:0}
 .gc.gc-layout-49 .gc-a-heading{margin-bottom:12px}
 .gc.gc-layout-49 .gc-steps [aria-current=step]{color:#fff;background:var(--gc-active)}
 .gc.gc-layout-49 .gc-selection dd button{min-height:32px}
}
@media(max-width:850px){
 .gc.gc-layout-49 .gc-steps [data-schritt=offen]{background:var(--gc-open);color:var(--gc-ink)}
 .gc.gc-layout-49 .gc-steps [data-schritt=offen] .gc-step-number{background:var(--gc-open);color:var(--gc-ink);border-color:#6b7b93}
 .gc.gc-layout-49 .gc-steps [aria-current=step],.gc.gc-layout-49 .gc-steps [aria-current=step] .gc-step-number{background:var(--gc-active);color:#fff}
 .gc.gc-layout-49 .gc-steps-legend{display:flex;font-size:10px;gap:6px;flex-wrap:wrap}
 .gc.gc-layout-49 .gc-step-state{display:none}
}

@media(min-width:851px){
 .gc.gc-layout-49{--gc-steps-height:160px}
 .gc.gc-layout-49 .gc-steps{grid-template-rows:40px 1fr 20px}
 .gc.gc-layout-49 .gc-shop-return{grid-column:1/-1;min-height:40px;margin-top:-8px}
 .gc.gc-layout-49 .gc-steps .gc-shop-return a{font-size:12px;padding:0;min-height:40px;color:var(--gc-ink);background:transparent}
}
@media(min-width:851px) and (max-width:1100px){.gc.gc-layout-49{--gc-steps-height:174px}}
/* A-48: Die Kartenbreite entscheidet, ob Ansichten und Werkzeuge eine zweite Zeile brauchen. */
@media(min-width:851px){
 .gc.gc-layout-a .gc-preview .gc-stage:not(:fullscreen){container:glasansicht / inline-size}
 .gc.gc-layout-a .gc-preview .gc-stage:not(:fullscreen) .gc-tabs{padding:0;border:0}
 .gc.gc-layout-a .gc-preview .gc-stage:not(:fullscreen) .gc-diagram{padding-top:48px}
 @container glasansicht (max-width:420px){
  .gc.gc-layout-a .gc-preview .gc-stage:not(:fullscreen) .gc-toolbar{top:52px}
  /* O-49: mit .gc-drawing-mode, sonst gewinnt die Zeichnungsregel der Variante B (padding 48px) und Maßtext läuft unter die Werkzeuge. */
  .gc.gc-layout-a.gc-drawing-mode .gc-preview .gc-stage:not(:fullscreen) .gc-diagram,.gc.gc-layout-a .gc-preview .gc-stage:not(:fullscreen) .gc-diagram{padding-top:100px}
 }
}

/* Bohrungsdurchmesser als eigene Zeile, das Koordinatenpaar bleibt zusammen. */
.gc.gc-layout-49 .gc-hole-karte .gc-hole-masse{grid-template-columns:repeat(2,minmax(0,1fr))}
.gc.gc-layout-49 .gc-hole-karte .gc-hole-masse>.gc-field:first-child{grid-column:1/-1}
/* E1: Die Lage eines Ausschnitts bleibt während der Eingabe am ganzen Glas sichtbar. */
.gc.gc-layout-49.gc-drawing-mode[data-current-step=cutouts] :is(#gc-hole-detail,#gc-close-hole){display:none}
.gc.gc-layout-49.gc-drawing-mode[data-current-step=cutouts] :is(.gc-diagram,#gc-handles){visibility:visible}

@media(min-width:851px){
 body:has(.gc-layout-49) .f-fuss,main.gc-page:has(.gc-layout-49)>#glas-konfigurator~*{display:none}
 /* O-49: gleiche Spezifität wie die 40-px-Regel in der Schrittleiste, damit die spätere 44-px-Höhe gilt. */
 .gc.gc-layout-49 .gc-steps .gc-shop-return a,.gc.gc-layout-49 .gc-shop-return a{min-height:44px}
}
/* O-49: Schrittnamen brechen nicht mitten im Wort (body bricht überall). Eine Spalte wird mindestens so breit wie ihr längstes Wort, die übrigen teilen sich den Rest. */
@media(min-width:851px){
 .gc.gc-layout-49 .gc-steps{grid-template-columns:repeat(var(--gc-step-count,9),minmax(min-content,1fr))}
 .gc.gc-layout-49 .gc-steps .gc-step-name{overflow-wrap:normal}
}
@media(max-width:850px){
 .gc.gc-layout-49 .gc-steps{display:grid;grid-template-columns:repeat(var(--gc-step-count,9),minmax(0,1fr));grid-template-rows:46px 22px auto;padding:4px 0;gap:0}
 .gc.gc-layout-49 .gc-steps .gc-steps-legend{grid-column:1/-1;grid-row:3;margin:2px 0 0;padding:0 4px;font-size:10px;line-height:16px;min-width:0}
 .gc.gc-layout-49 .gc-steps [aria-current=step] .gc-step-name{bottom:auto;top:50px;padding:2px 6px;color:var(--gc-active)}
 .gc.gc-layout-49 .gc-weiter .gc-weiter-knopf{background:var(--gc-active)}
}
/* Bedien- und Fehlerschrift mindestens 7:1 auf den hellen Formularflächen. */
.gc.gc-layout-49 :is(.gc-error,.gc-mm,.gc-einheit-mm){color:#812c22}
.gc.gc-layout-49 .gc-staerken [aria-pressed=true] .gc-mm{color:#fff}

.gc.gc-layout-49 .gc-family-fixed a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0;margin-left:auto;font-size:13px;background:transparent;text-decoration:underline;text-underline-offset:3px;color:var(--gc-active)}

@media(min-width:851px){body:has(.gc-layout-49) .gc-seitenkopf{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}}

.gc.gc-layout-49 .gc-accordion-button[data-schritt=aktuell] strong[data-schritt-von]::after{color:#fff}

.gc.gc-layout-49 #gc-material .gc-seitenkopf-spalte{margin:0 0 20px;padding:0 0 16px;border-bottom:1px solid var(--gc-line)}
.gc.gc-layout-49 #gc-anwendung-hinweis{font-size:13px;line-height:1.5;color:var(--gc-muted)}
.gc.gc-layout-49 #gc-anwendung-ausfuehrungen .kr-gruppe-titel{color:var(--gc-muted)}
.gc.gc-layout-49 #gc-anwendung-ausfuehrungen a{min-height:44px;padding:8px 12px}
.gc.gc-layout-49 #gc-anwendung-ausfuehrungen a[aria-current=page]{background:var(--gc-active);border-color:var(--gc-active);color:#fff}

/* A49-Abnahme: Bei starkem Zoom mit höchstens 300 px Höhe scrollt die Schrittleiste mit,
   damit die Tastaturfelder vollständig ins Fenster passen. */
@media(max-width:850px) and (max-height:300px){
 .gc.gc-layout-49 .gc-steps{position:relative;top:auto}
}

/* R50-M: Fünf Spalten auf schmalen Handys halten alle Schritte gleichzeitig erreichbar.
   Die zweite Reihe ersetzt die zu kleinen Ziele; ab 480 px reicht die bestehende einzelne Reihe.
   R50-M-Freiraum: beide Reihen füllen die Breite, neun Schritte 5 + 4, acht Schritte 4 + 4. */
@media(max-width:850px){
 .gc.gc-layout-49 .gc-steps button{min-width:44px;min-height:44px}
 .gc.gc-layout-49 .gc-summary .gc-breakdown>summary{min-height:44px}
}
@media(max-width:479px){
 .gc.gc-layout-49 .gc-steps{grid-template-columns:repeat(20,minmax(0,1fr));grid-template-rows:46px 46px 22px auto}
 .gc.gc-layout-49 .gc-steps .gc-steps-legend{grid-row:4}
 .gc.gc-layout-49 .gc-steps [aria-current=step] .gc-step-name{top:96px}
 .gc.gc-layout-49 .gc-steps>button{grid-column:span 5}
 .gc.gc-layout-49 .gc-steps:has(>button:nth-of-type(9))>button{grid-column:span 4}
 .gc.gc-layout-49 .gc-steps:has(>button:nth-of-type(9))>button:nth-of-type(n+6){grid-column:span 5}
}

/* R50-T: Der mobile Hinweis endet bei 71 px. Das Diagramm beginnt darunter;
   renderDrawing passt die Zeichnung in das verbleibende Fenster. Mit Bohrungen erhält
   die große Zeichnung stattdessen ihre Inhaltshöhe, damit Tippflächen nicht zusammenfallen. */
@media(max-width:850px){
 .gc.gc-layout-49:not(.gc-zeichnung-klein) .gc-stage:not(:fullscreen) .gc-diagram{top:80px}
 .gc.gc-layout-49.gc-drawing-mode:not(.gc-zeichnung-klein):has([data-kind="hole"]) .gc-stage:not(:fullscreen){height:auto}
 .gc.gc-layout-49.gc-drawing-mode:not(.gc-zeichnung-klein):has([data-kind="hole"]) .gc-stage:not(:fullscreen) .gc-canvas-wrap{height:auto;min-height:0;aspect-ratio:auto}
 .gc.gc-layout-49.gc-drawing-mode:not(.gc-zeichnung-klein):has([data-kind="hole"]) .gc-stage:not(:fullscreen) .gc-diagram{position:relative;inset:auto;padding:80px 0 64px;overflow:hidden}
}

/* R50-F: Eine noch offene Pflichtwahl steht in der Preisleiste in Bedienfarbe, nur fachliche Fehler bleiben rot. */
.gc #gc-open-issues a[data-wahl]{color:var(--gc-ink)}

/* R50-Z: Bei höchstens 300 px Höhe klebt oben nichts mehr (A49-Abnahme), der Abschnittsknopf braucht keinen Abstand für die Leiste. */
@media(max-width:850px) and (max-height:300px){
 .gc.gc-layout-49 :is(fieldset,.gc-overview,.gc-accordion-button){scroll-margin-top:12px}
}

/* A-51: Seitenprofil im Kanten-Schritt, ohne feste Höhe oder leere Zusatzkarte. */
.gc .gc-edge-profile{display:flex;align-items:center;gap:12px;margin:14px 0;padding:10px 0;border-block:1px solid var(--gc-line);min-width:0;flex-wrap:wrap}
.gc .gc-edge-profile svg{display:block;width:230px;max-width:100%;height:auto;flex:0 1 230px}
.gc .gc-edge-profile figcaption{flex:1 1 140px;min-width:0;font-size:13px;line-height:1.5}
.gc .gc-edge-profile figcaption span,.gc .gc-edge-profile figcaption small{display:block}
.gc [data-copy-hole]{min-height:44px;max-width:100%;white-space:normal;text-align:left}
/* R50-Nachtrag Werkzeuge: Mit Bohrungen ist die große Zeichnung so hoch wie ihr Inhalt (R50-T). Unten in der Ansicht
   lagen die drei Ansichtswerkzeuge dann bei 850 × 900 unter der festen Preisleiste, obwohl die Ansichtsknöpfe oben frei
   waren. Ab 480 px stehen sie rechts in der Zeile der Ansichtsknöpfe wie am Desktop; schmaler reicht die Zeile nicht. */
@media(min-width:480px) and (max-width:850px){
 .gc.gc-layout-49.gc-drawing-mode:not(.gc-zeichnung-klein):has([data-kind="hole"]) .gc-stage:not(:fullscreen) .gc-toolbar{top:8px;bottom:auto}
}

/* R50-Nachtrag Zoom: Der 44-px-Öffner der Preisdetails (R50-M) ist für Fingerbedienung da. Bei vergrößerter Desktopansicht
   mit Maus und niedrigem Fenster (1280 × 1024 bei 200 % sind 640 × 512 px) machte er die feste Preisleiste 8 px höher und
   nahm dem Formular den Platz (A11Y-1). Dort bleibt der Öffner 36 px hoch wie vor Runde 50; Touchgeräte behalten 44 px. */
@media(max-width:850px) and (max-height:560px) and (pointer:fine){
 .gc.gc-layout-49 .gc-summary .gc-breakdown>summary{min-height:36px}
}

/* 52-J: Rückmeldung 12.10. Das gerade bearbeitete Maß einer Bohrung steht rot im Feld und in der Zeichnung (eigene Farbe,
   nicht das Fehlerrot), "Ihre Auswahl" steht feststehend unter der Zeichnung: kompakt, feste Höhe, kein leerer Kasten, so breit wie
   sein Inhalt (keine Freifläche daneben); der Wert hat eine Mindestbreite, damit längere Zahlen den Kasten nicht springen lassen. */
.gc{--gc-aktiv:#c8102e}
.gc input[data-hole-field]:focus{border-color:var(--gc-aktiv)!important;box-shadow:inset 0 0 0 1px var(--gc-aktiv)!important;color:var(--gc-aktiv)!important}
.gc #gc-drawing .gc-aktiv-linie{stroke:var(--gc-aktiv)}
.gc #gc-drawing .gc-aktiv-marke rect{stroke:var(--gc-aktiv)}
.gc #gc-drawing .gc-aktiv-zahl{fill:var(--gc-aktiv)}
.gc .gc-ihre-auswahl{order:0;flex:0 0 auto;align-self:flex-start;width:fit-content;box-sizing:border-box;display:flex;align-items:center;gap:2px 12px;flex-wrap:wrap;height:44px;margin:8px 0 0;padding:4px 14px 4px 12px;border:1px solid var(--gc-line,#ccd1d8);border-left:3px solid var(--gc-aktiv);background:#fff;overflow:hidden;max-width:100%}
.gc .gc-ihre-auswahl[hidden]{display:none}
.gc .gc-ihre-auswahl h3{margin:0;font-size:12px;line-height:1.3;font-weight:700;white-space:nowrap}
.gc .gc-ihre-auswahl p{margin:0;font-size:13px;line-height:1.3;display:flex;gap:2px 10px;align-items:baseline;min-width:0;flex:0 1 auto}
.gc .gc-ihre-auswahl .gc-ia-was{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.gc .gc-ihre-auswahl .gc-ia-wert{color:var(--gc-aktiv);font-size:15px;white-space:nowrap;min-width:5.6em}
@media(max-width:520px){.gc .gc-ihre-auswahl{height:52px;align-content:center}.gc .gc-ihre-auswahl h3{flex-basis:100%}}

/* 52-JS: Das gerade bearbeitete Ausschnittmaß verwendet dieselbe rote Feldmarkierung wie Bohrungen. */
.gc input[data-cutout-field]:focus{border-color:var(--gc-aktiv)!important;box-shadow:inset 0 0 0 1px var(--gc-aktiv)!important;color:var(--gc-aktiv)!important}

/* 52-JS: Auf schmalen Handys bleibt die Beschriftung vollständig in der zweiten Zeile.
   Der Wert steht neben dem Titel; die feste Höhe verhindert Sprünge beim Feldwechsel. */
@media(max-width:520px){
 .gc .gc-ihre-auswahl{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto}
 .gc .gc-ihre-auswahl h3{grid-column:1;grid-row:1}
 .gc .gc-ihre-auswahl p{display:contents}
 .gc .gc-ihre-auswahl .gc-ia-was{grid-column:1/-1;grid-row:2;overflow:visible;text-overflow:clip}
 .gc .gc-ihre-auswahl .gc-ia-wert{grid-column:2;grid-row:1}
}

/* 52-JS: Scheiben- und Eckmaße verwenden die gemeinsame Fokusfarbe. */
.gc input:is([data-field="widthMm"],[data-field="heightMm"],[data-field="width1Mm"],[data-field="width2Mm"],[data-field="height1Mm"],[data-field^="gkt"],[data-field="radiusMm"],[data-field="cornerX"],[data-field="cornerY"]):focus{border-color:var(--gc-aktiv)!important;box-shadow:inset 0 0 0 1px var(--gc-aktiv)!important;color:var(--gc-aktiv)!important}

/* 53: Am Computer hält "Ihre Auswahl" ihren Platz schon vor dem ersten Feld frei. Sonst schrumpft die Zeichnung beim ersten
   Antippen eines Maßfeldes um die Höhe des Kastens (feste Orientierung, handy-zeichnung-browser 1440 px). Erst ab 1024 px:
   darunter ist die Zeichnung schon so klein, dass sich die Griffflächen zweier Bohrungsmarken überdecken (a48-schritte 851 px). */
@media(min-width:1024px){.gc.gc-layout-a .gc-preview>.gc-ihre-auswahl[hidden]{display:flex!important;visibility:hidden}}

/* 55: Im Schritt Ecken zeigt die Zeichnung, welche Ecke gerade bearbeitet wird. Einzeln: nur die gewählte Marke voll blau,
   die übrigen weiß mit blauem Ring. Alle Ecken gleich (keine Marke gewählt): alle blau wie bisher. */
.gc.gc-layout-49[data-current-step=corners] #gc-handles:has([data-corner][data-gewaehlt]) [data-corner]:not([data-gewaehlt])>circle[r="13"]{fill:#fff;stroke:var(--gc-active);stroke-width:1.5}
.gc.gc-layout-49[data-current-step=corners] #gc-handles:has([data-corner][data-gewaehlt]) [data-corner]:not([data-gewaehlt])>text{fill:var(--gc-active)}
.gc.gc-layout-49[data-current-step=corners] #gc-handles [data-corner][data-gewaehlt]>circle[r="13"]{stroke:#0c2f55;stroke-width:3}

/* Runde 55: Am Handy scrollt der Shopkopf im Glas-Konfigurator mit; Zeichnung und Schrittleiste kleben dort selbst oben. */
@media(max-width:850px){
 html.t-kopf-klebt body:has(.gc-layout-49) .t-top{position:relative}
 html.t-kopf-klebt body:has(.gc-layout-49) header.t-header{position:relative;top:auto}
 html.t-kopf-klebt:has(.gc-layout-49){scroll-padding-top:0}
}
/* Runde 55: Am Tablet quer gibt es sonst keine Kategorienzeile (die Schublade sitzt in der ausgeblendeten Hauptzeile). */
@media(min-width:851px) and (max-width:1099px){
 body:has(.gc-layout-49) header.t-header>.t-nav{display:block}
 body:has(.gc-layout-49) header.t-header>.t-nav .t-nav-rechts{display:none}
}
/* Runde 55: Am Computer passen Zeichnung und Fragen genau in den Bildschirm (Höhen oben: 100dvh minus Kopf, Schrittleiste
   und 104 px für Preisleiste). Der zusätzliche Fußabstand für die Preisleiste ließ die Seite trotzdem um gut 100 px weiter
   scrollen, dann rutschte die Zeichnungskarte unter die Schrittleiste. Jetzt scrollt nur noch der Vorschauhinweis weg. */
@media(min-width:851px){
 html body:has(.gc.gc-layout-49){padding-bottom:0}
 body:has(.gc.gc-layout-49) main.gc-page{padding-bottom:0!important}
 .gc.gc-layout-49{padding-bottom:88px}
 /* 55b: Die Vorschauzeile (p.t-preview, gibt es nur in der Vorschau, der Server nimmt sie im Shop heraus) schob Schrittleiste
    und Zeichnung beim Laden 45 px tiefer als angeheftet. Die Höhen oben rechnen mit der angehefteten Lage, deshalb lagen die
    unteren 37 px der Zeichnungskarte mit der Lieferzeit hinter der Preisleiste. Im Konfigurator am Computer steht sie deshalb
    nicht, die Vorschau sieht dort aus wie der Shop. Ein Mitwachsen der Zeichnung beim ersten Scrollen widerspräche A47
    (feste Größe ohne Sprung). */
 body:has(.gc.gc-layout-49) p.t-preview{display:none}
}

/* Runde 55: Platz für die Zeichnung trotz fester Leisten. Gemessen 13.10.: ohne diesen Block
   blieb der Zeichnung 131 px weniger als live, bei 1440 x 800 nur 187 statt 318 px, bei 1280 x 720 nur 51 px. "Ihre Auswahl" hält
   ihren Platz nur auf Bildschirmen ab 1000 px Höhe frei; darunter erscheint sie wie in Runde 52 erst beim Antippen eines Feldes.
   Der Rückweg-Streifen bleibt bei 40 px: seine Links brauchen 44 px Klickhöhe (O-49, kopfleiste-320-browser). */
@media(min-width:1024px) and (max-height:999px){.gc.gc-layout-a .gc-preview>.gc-ihre-auswahl[hidden]{display:none!important}}

/* 54-BLAU: Vorwärts-Knöpfe bei allen Breiten im gemeinsamen Leitblau. */
:is(.gc.gc-layout-49 .gc-weiter .gc-weiter-knopf,.gc.gc-layout-a .gc-a-next,.gc.gc-layout-a .gc-quote-inner>.gc-price>#gc-cart,.gc-quote #gc-cart,.gc [data-complete="cart"],.gc #gc-inquiry button[type=submit],.gc #gc-next-glass,.gc .gc-zb-dazu:not([aria-pressed=true])){background:var(--gc-active);border-color:var(--gc-active);color:#fff}
:is(.gc.gc-layout-49 .gc-weiter .gc-weiter-knopf,.gc.gc-layout-a .gc-a-next,.gc.gc-layout-a .gc-quote-inner>.gc-price>#gc-cart,.gc-quote #gc-cart,.gc [data-complete="cart"],.gc #gc-inquiry button[type=submit],.gc #gc-next-glass,.gc .gc-zb-dazu:not([aria-pressed=true])):is(:hover,:active):not(:disabled):not([aria-disabled=true]){background:color-mix(in srgb,var(--gc-active),#000 15%);border-color:color-mix(in srgb,var(--gc-active),#000 15%);color:#fff}
:is(.gc.gc-layout-49 .gc-weiter .gc-weiter-knopf,.gc.gc-layout-a .gc-a-next,.gc.gc-layout-a .gc-quote-inner>.gc-price>#gc-cart,.gc-quote #gc-cart,.gc [data-complete="cart"],.gc #gc-inquiry button[type=submit],.gc #gc-next-glass,.gc .gc-zb-dazu:not([aria-pressed=true])):focus-visible{outline:3px solid var(--gc-active);outline-offset:3px}
:is(.gc.gc-layout-49 .gc-weiter .gc-weiter-knopf,.gc.gc-layout-a .gc-a-next,.gc.gc-layout-a .gc-quote-inner>.gc-price>#gc-cart,.gc-quote #gc-cart,.gc [data-complete="cart"],.gc #gc-inquiry button[type=submit],.gc #gc-next-glass,.gc .gc-zb-dazu:not([aria-pressed=true])):is(:disabled,[aria-disabled=true]){background:var(--gc-active);border-color:var(--gc-active);border-style:dashed;color:#fff;opacity:1;cursor:not-allowed}

/* O2-58 (13.10.2026, Auftrag kleine Bildschirme): Im Glas-Konfigurator am Computer kleben keine
   Shop-Kopfleisten mehr. Kontaktleiste und Kategorienzeile scrollen beim Arbeiten heraus wie am Handy (Runde 55), die
   einzige feste Leiste oben ist die Schrittleiste mit dem kompakten Shop-Rückweg. Schrittleiste, Karte, Fragen und das
   Höhenbudget (app.mjs kartenBudget liest top der Schrittleiste) rechnen deshalb ab dem Fensterrand statt ab --t-kopf-h.
   Vorher gemessen: 1366 x 768 Scheibe beim Tippen 100 x 40 px, 1024 x 600 Zeichnungsfläche 0 px. */
@media(min-width:851px){
 html.t-kopf-klebt body:has(.gc-layout-49) .t-top{position:relative}
 html.t-kopf-klebt body:has(.gc-layout-49) header.t-header{position:relative;top:auto}
 .gc.gc-layout-49 .gc-steps{top:0}
 .gc.gc-layout-49 .gc-preview{top:calc(var(--gc-steps-height) + 16px)!important;height:calc(100dvh - var(--gc-steps-height) - 104px - var(--gc-kopf-rest,0px))}
 .gc.gc-layout-49 .gc-controls{height:calc(100dvh - var(--gc-steps-height) - 104px - var(--gc-kopf-rest,0px))}
 /* Den gekürzten Teil als Außenabstand zurückgeben: Im Konfigurator endet die Seite mit ihm (Fuß verborgen), sonst würde die
    Seite um den Rest kürzer und der Kopf ließe sich nicht mehr ganz wegscrollen (Scrollweg = Rest, Stillstand). */
 .gc.gc-layout-49 :is(.gc-preview,.gc-controls){margin-bottom:var(--gc-kopf-rest,0px)}
 /* Am Seitenanfang ist die Schrittleiste noch nicht angeheftet: Karte und Fragenspalte sind um den sichtbaren Rest der
    Kopfzeile kürzer (app.mjs kopfRestSetzen), die Zeichnung behält ihre Höhe, der übrige Karteninhalt scrollt in der Karte. */
 .gc.gc-layout-49.gc-kopf-sichtbar .gc-preview{overflow:hidden auto!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#697587 #dde2ea}
 .gc.gc-layout-49.gc-kopf-sichtbar .gc-preview>*,.gc.gc-layout-49.gc-kopf-sichtbar .gc-preview .gc-stage:not(:fullscreen){flex-shrink:0}
 /* Zeichnungsfläche so hoch wie ohne Rest. ID und !important gegen height:auto!important der Zeichnungsansicht (Runde 2). */
 #glas-konfigurator.gc-layout-49.gc-drawing-mode.gc-kopf-gehalten .gc-preview .gc-stage:not(:fullscreen){flex:0 0 var(--gc-kopf-zeichnung)!important;height:var(--gc-kopf-zeichnung)!important;min-height:var(--gc-kopf-zeichnung)!important;max-height:none!important}
}
/* O2-58: Bei wenig Fensterhöhe ist die Schrittleiste kompakt. Die Zusammenfassung unter dem Schrittnamen bleibt für
   Vorlesesoftware im Knopf, sichtbar stehen Nummer und Name (bis zwei Zeilen, mindestens 44 px Klickhöhe).
   Shop-Rückweg und Farblegende bleiben. Vorher 160 px (ab 1101 px Breite) beziehungsweise 174 px. */
@media(min-width:851px) and (max-height:800px){
 .gc.gc-layout-49{--gc-steps-height:136px}
 .gc.gc-layout-49 .gc-steps button{padding-block:4px;gap:2px}
 .gc.gc-layout-49 .gc-steps .gc-step-state{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* O2-58: Großansicht (Vollbild der Zeichnung über den Knopf Großansicht öffnen) mit beschriftetem Rückweg zu den Feldern.
   Außerhalb des Vollbilds steht der Knopf nicht da. */
.gc-zurueck-eingabe{display:none}
/* O2-58 Nachtrag (16.10.2026, a48-851-werkzeuge): Rechts unten stehen in der Großansicht die Ansichtswerkzeuge (.gc-toolbar
   right/bottom 10px, 44 px hoch). Der Rückweg steht deshalb darüber statt auf Ansicht zurücksetzen. */
.gc-stage:fullscreen .gc-zurueck-eingabe{display:flex;align-items:center;position:absolute;right:10px;bottom:64px;z-index:30;min-height:44px;padding:0 18px;border:1px solid var(--gc-active);border-radius:4px;background:#fff;color:var(--gc-active);font:700 15px/1.2 Arial,sans-serif;cursor:pointer}
.gc-stage:fullscreen .gc-zurueck-eingabe:focus-visible{outline:3px solid var(--gc-active);outline-offset:3px}
/* O2-58: Reicht die Kartenhöhe neben Auswahl, Maßen und Zubehör nicht mehr für eine lesbare Zeichnung (1024 x 600), hat die
   Zeichnung Vorrang: app.mjs kartenBudget setzt .gc-karte-eng und die Höhe der Zeichnungsfläche, die Karte scrollt selbst.
   Nichts schrumpft oder fällt weg, Kartenkopf und Zubehör stehen vollständig im Scrollbereich darunter. */
@media(min-width:851px){
 .gc.gc-layout-49.gc-karte-eng .gc-preview{overflow:hidden auto!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#697587 #dde2ea}
 .gc.gc-layout-49.gc-karte-eng .gc-preview>*,.gc.gc-layout-49.gc-karte-eng .gc-preview .gc-stage:not(:fullscreen){flex-shrink:0}
}

/* SOL-56Z: Die geschlossene Zubehörkarte lässt am Computer Platz für die Zeichnung.
   Die eigene Kartenbreite entscheidet über eine oder zwei Zeilen. */
@media(min-width:851px){
 .gc.gc-layout-a:not(.gc-layout-selection) #gc-zubehoer{container-name:gc-zubehoer}
 .gc.gc-layout-a:not(.gc-layout-selection) #gc-zubehoer [data-zubehoer-status]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte{grid-template-columns:40px minmax(0,1fr);grid-template-areas:'bild text' 'aktion aktion';gap:4px 8px;padding:6px;align-items:center}
 .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte>:is(.gc-zubehoer-abbildungen,.gc-zubehoer-ohne-bild){width:40px;height:40px}
 .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zubehoer-abbildungen img{width:40px;height:40px}
 .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zubehoer-abbildungen a{min-height:40px}
 .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zubehoer-ohne-bild svg{width:32px;height:32px}
 .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte>.gc-zubehoer-aktion{max-width:none;flex-wrap:nowrap;gap:8px;align-items:center;justify-content:space-between}
 .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zubehoer-preis{flex:none;white-space:nowrap;font-size:12px;text-align:left}
 .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zb-menge{flex:none;gap:4px;font-size:11px}
 .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zb-menge input{width:48px;margin:0;padding-inline:4px}
 .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zb-knoepfe{flex:none;flex-direction:row;flex-wrap:nowrap;width:auto;margin:0}
 .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zb-dazu{flex:none;padding-inline:12px;white-space:nowrap;font-size:13px}
 @container gc-zubehoer (min-width:700px){
  .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:'bild text aktion';gap:8px}
  /* Kurze Texte bleiben einzeilig; was nicht passt, bricht in der Textspalte um, statt über Preis und Menge zu laufen. */
  .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zb-eyebrow{margin:0;font-size:10px;line-height:14px;letter-spacing:.04em;overflow-wrap:break-word}
  .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zb-name{display:block;margin:0;font-size:13px;line-height:18px;overflow-wrap:break-word}
  /* Der 44-px-Klickbereich umfasst auch die nicht interaktiven Titelzeilen.
     Die sichtbare Zusammenfassung belegt nur die dritte Textzeile. */
  .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zb-details>summary{min-height:44px;margin-top:-28px;padding:28px 0 0;font-size:12px;line-height:16px;white-space:nowrap}
 }
 @container gc-zubehoer (max-width:699.99px){
  .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte{padding:5px 6px;row-gap:0}
  /* Zeilenhöhen so hoch wie die Schrift selbst (gemessen 14/18/17 px), sonst berühren sich Eyebrow, Name und Details-Zeile.
     Der 44-px-Klickbereich der Details-Zeile reicht weiter genau über Eyebrow und Name (14 + 18 = 32 px). */
  .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zb-eyebrow{margin:0;font-size:10px;line-height:14px;letter-spacing:.04em}
  .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zb-name{margin:0;font-size:13px;line-height:18px}
  .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zb-details>summary{min-height:44px;margin-top:-32px;padding:32px 0 0;font-size:12px;line-height:17px}
  /* Passen Preis, Menge mit Packungsangabe und Knopf nicht in eine Zeile (lange Packungspreise), bricht die Aktionszeile
     zwischen den Gruppen um. Jede Gruppe bleibt ganz, nichts wird abgeschnitten. Den Restplatz verteilt weiter
     justify-content:space-between auf alle Lücken (keine automatische Knopfmarge, sonst eine große Freifläche vor dem Knopf);
     steht der Knopf allein in der zweiten Zeile, beginnt er links. */
  .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte>.gc-zubehoer-aktion{flex-wrap:wrap;row-gap:4px}
 }
 @container gc-zubehoer (max-width:439.99px){
  .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte>.gc-zubehoer-aktion{gap:4px}
  .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zubehoer-preis{font-size:11px}
  .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zb-menge{font-size:10px}
  .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zb-menge input{width:44px;font-size:14px}
  .gc.gc-layout-a:not(.gc-layout-selection) .gc-zubehoer-karte .gc-zb-dazu{padding-inline:8px;font-size:12px}
 }
}
/* O2-58 (13.10.2026): Handy bis 850 px, bewusster Wechsel zwischen Eingabe und Zeichnung (shop/glas/handy-ansicht.mjs).
   "Zeichnung ansehen" steht unter der bearbeiteten Feldzeile im Seitenfluss, keine feste Leiste. Die Zeichnungsansicht legt
   die Zeichenkarte über den ganzen Bildschirm, ohne Fullscreen-API; oben steht "Zurück zur Eingabe". ID-Selektoren und
   !important nur hier, weil die Kartenregeln je Layout Höhe und Lage mit !important setzen. Die Zeichenfläche füllt
   mindestens den Bildschirm (ohne Bohrung liegt die Zeichnung absolut darin). Ab 851 px bleibt alles wie bisher. */
.gc .gc-zeichnung-ansehen{display:none}
@media(max-width:850px){
 .gc .gc-zeichnung-ansehen{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:10px 0 4px;padding:8px 16px;border:1px solid var(--gc-active);border-radius:4px;background:#fff;color:var(--gc-active);font:700 15px/1.2 Arial,sans-serif;cursor:pointer;grid-column:1/-1}
 .gc .gc-zeichnung-ansehen[hidden]{display:none}
 .gc .gc-zeichnung-ansehen:focus-visible{outline:3px solid var(--gc-active);outline-offset:3px}
 #glas-konfigurator.gc-zeichnung-ansicht .gc-preview{z-index:1000}
 #glas-konfigurator.gc-zeichnung-ansicht .gc-stage{position:fixed!important;inset:0!important;width:auto!important;height:100dvh!important;max-height:none!important;margin:0!important;padding:52px 0 calc(16px + env(safe-area-inset-bottom))!important;z-index:1000;overflow:auto!important;overscroll-behavior:contain;background:#fff;border:0!important;border-radius:0!important}
 #glas-konfigurator.gc-zeichnung-ansicht .gc-stage .gc-canvas-wrap{height:auto!important;min-height:calc(100dvh - 68px)!important}
 #glas-konfigurator.gc-zeichnung-ansicht .gc-zurueck-eingabe{display:flex;position:fixed;top:0;left:0;right:0;z-index:1001;align-items:center;justify-content:center;min-height:48px;margin:0;padding:0 16px;border:0;border-bottom:1px solid var(--gc-line);border-radius:0;background:#fff;color:var(--gc-active);font:700 16px/1.2 Arial,sans-serif;cursor:pointer}
 #glas-konfigurator.gc-zeichnung-ansicht .gc-zurueck-eingabe:focus-visible{outline:3px solid var(--gc-active);outline-offset:-4px}
 #glas-konfigurator.gc-zeichnung-ansicht .gc-zeichnung-knopf{display:none}
}

/* Freigegebenes Layout 14.10.: Zeichnung und Auswahl in einem gemeinsamen linken Bereich. */
.gc.gc-layout-selection .gc-workview{min-width:0;position:relative}
.gc.gc-layout-selection .gc-selection{display:block!important}
.gc.gc-layout-selection .gc-selection-active{background:#edf3f8;box-shadow:inset 3px 0 var(--gc-active)}
.gc.gc-layout-selection .gc-selection dl>div{min-height:44px}
.gc.gc-layout-selection .gc-selection dd button{min-height:44px}
@media(min-width:851px){
 .gc-page .gc.gc-layout-selection{grid-template-columns:minmax(0,7fr) minmax(300px,3fr);column-gap:20px}
 .gc.gc-layout-selection .gc-workview{flex:0 0 auto;padding-right:max(30%,220px)}
 .gc.gc-layout-selection .gc-workview>.gc-stage{width:100%;min-width:0;margin:0}
 .gc.gc-layout-selection .gc-workview>.gc-selection{position:absolute;inset:0 0 0 auto;width:max(30%,220px);margin:0;padding:0 10px 8px;border-left:1px solid var(--gc-line);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;max-height:none;background:#fff}
 .gc.gc-layout-selection .gc-selection h2{position:sticky;top:0;margin:0;padding:8px 0;background:#fff;z-index:1;font-size:15px}
 .gc.gc-layout-selection .gc-selection dl{display:block}
 .gc.gc-layout-selection .gc-selection dl>div{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:5px;font-size:11px;padding:2px 4px}
 .gc.gc-layout-selection .gc-selection dd button{font-size:11px;text-align:right;line-height:1.3}
 .gc.gc-layout-selection .gc-selection :is(dt,dd){min-width:0;overflow-wrap:anywhere}
 .gc.gc-layout-selection .gc-workview .gc-stage:fullscreen{width:100%}
 .gc.gc-layout-selection .gc-quote-inner>.gc-price>#gc-cart{display:block}
 .gc.gc-layout-selection:has(.gc-a-next:not([hidden])) .gc-quote-inner>.gc-price>#gc-cart{display:none}
 .gc.gc-layout-selection #gc-overview{margin-top:24px}
 .gc.gc-layout-selection .gc-workview .gc-stage .gc-tabs{max-width:calc(100% - 8px);flex-wrap:wrap}
}
@media(min-width:851px) and (max-width:1100px){
 .gc-page .gc.gc-layout-selection{grid-template-columns:minmax(0,1fr) 290px;column-gap:14px}
 .gc.gc-layout-selection .gc-workview{padding-right:200px}
 .gc.gc-layout-selection .gc-workview>.gc-selection{width:200px}
}
/* O2-58 (16.10.2026): In schmalen Computerfenstern nahm die Auswahl neben der Zeichnung so viel Breite, dass die Scheibe
   bei 1024 x 600 von 66 auf 40 px Höhe schrumpfte. Grenze gemessen (Fokus 180, 600 und 768 px hoch): neben der Auswahl erreicht die
   Scheibe die 66 px erst ab 1226 beziehungsweise 1238 px Fensterbreite. Bis 1237 px steht die Auswahl deshalb unter der Zeichnung, offen und vollständig, ohne eigene Scrollfläche. Die Zeichnung behält ihre Höhe (app.mjs kartenBudget zählt die Auswahl nicht
   mit), die Karte scrollt selbst, Bedienleiste und Preisleiste bleiben, wo sie sind. */
@media(min-width:851px) and (max-width:1237px){
 /* Die Auswahl steht am Ende der Karte (order 3, nach Kartenkopf 1 und Zusatzprodukten 2 aus .gc-layout-a): Zeile "Ihre
    Auswahl", Maße, Lieferzeit und Zusatzprodukte folgen der Zeichnung wie bisher. Ihre Überschrift klebt hier nicht. */
 .gc.gc-layout-selection .gc-workview{display:contents;padding-right:0}
 .gc.gc-layout-selection .gc-workview>.gc-selection{order:3;position:static;inset:auto;width:auto;margin:12px 0 0;padding:0 4px 8px;border-left:0;border-top:1px solid var(--gc-line);overflow:visible;max-height:none}
 .gc.gc-layout-selection .gc-workview>.gc-selection h2{position:static}
 .gc.gc-layout-selection .gc-preview{overflow:hidden auto!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#697587 #dde2ea}
 .gc.gc-layout-selection .gc-preview>*,.gc.gc-layout-selection .gc-preview .gc-stage:not(:fullscreen){flex-shrink:0}
}
@media(max-width:850px){
 .gc.gc-layout-selection .gc-workview{display:block}
 .gc.gc-layout-selection .gc-selection{margin:0;padding:10px;max-height:280px;overflow:auto;border-top:1px solid var(--gc-line)}
 .gc.gc-layout-selection .gc-selection h2{font-size:15px;margin:0 0 8px}
 .gc.gc-layout-selection .gc-selection dl{grid-template-columns:minmax(0,1fr)}
}

/* Begriffshilfen: kleines Symbol mit 44-px-Tippfläche; Erklärung unter der Auswahl. */
.gc .gc-begriff-zeile,.gc .gc-begriff-wahl{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;column-gap:4px;row-gap:0;align-items:start;min-width:0}
.gc .gc-begriff-zeile{margin:8px 0;min-height:44px}
.gc .gc-begriff-zeile>:first-child,.gc .gc-begriff-wahl>button{grid-column:1;grid-row:1;align-self:center;min-width:0;margin:0}
/* 16.10.2026 (Befund P014, Schritt 08): Auswahlhinweis aus choice-feedback.mjs steht hinter dem Feld in dieser Zeile und
   bekam sonst die 44-px-Spalte der Begriffshilfe. Er nimmt die ganze Zeile unter Feld und Info-Symbol ein. */
.gc .gc-begriff-zeile>.gc-choice-explanation{grid-column:1/-1}
.gc .gc-begriff-wahl{flex:1 1 190px}
.gc .gc-begriff-wahl>button{min-height:54px;width:100%}
.gc .gc-begriff{grid-column:1/-1;grid-row:2;min-width:0;padding:0;background:transparent}
.gc .gc-begriff>summary{position:absolute;right:0;top:0;display:grid;place-items:center;list-style:none;width:44px;height:44px;min-height:44px;margin:0;padding:0;cursor:pointer;border:0;border-radius:4px;color:var(--gc-muted);background:transparent}
.gc .gc-begriff-wahl .gc-begriff>summary{top:5px}
.gc .gc-begriff>summary::-webkit-details-marker{display:none}
.gc .gc-begriff[open]>summary{color:var(--gc-active);background:#e6eaf0}
/* Hover-Farbe nur mit echtem Zeiger, auf Touch bliebe sie nach dem Antippen hängen. */
@media(hover:hover){.gc .gc-begriff>summary:hover{color:var(--gc-active);background:#e6eaf0}}
.gc .gc-begriff>summary:focus-visible{outline:2px solid var(--gc-active);outline-offset:-2px}
.gc .gc-begriff-text{margin-top:8px;padding:12px 14px;border:1px solid var(--gc-line);border-left:3px solid #738197;background:#fff;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.gc .gc-begriff-text p{margin:0}
.gc .gc-begriff-text a,.gc .gc-a-help a{display:inline-flex;align-items:center;min-height:44px;color:var(--gc-active);font-size:12px;font-weight:600;text-underline-offset:3px}
.gc.gc-layout-a .gc-a-help>summary{width:44px;height:44px;min-width:44px;min-height:44px;border:0;border-radius:4px;color:var(--gc-muted);background:transparent}
.gc.gc-layout-a .gc-a-help[open]>summary{background:#e6eaf0;color:var(--gc-active)}
@media(hover:hover){.gc.gc-layout-a .gc-a-help>summary:hover{background:#e6eaf0;color:var(--gc-active)}}
.gc.gc-layout-a .gc-a-help>summary:focus-visible{outline:2px solid var(--gc-active);outline-offset:-2px}
.gc.gc-layout-a .gc-a-help>p{border-left:3px solid #738197}
@media(min-width:851px){
 /* Die Schritthilfe belegt die ganze Formularbreite; ihr Text bleibt im Seitenfluss. */
 .gc.gc-layout-a .gc-a-heading{grid-template-columns:minmax(0,1fr);justify-content:stretch}
 .gc.gc-layout-a .gc-a-heading h2{grid-column:1;grid-row:2;align-self:start;display:flex;align-items:center;min-height:44px;width:calc(100% - 50px);margin:0;z-index:1}
 .gc.gc-layout-a .gc-a-help{grid-column:1;grid-row:2;width:100%;min-width:0;margin:0}
 .gc.gc-layout-a .gc-a-help>summary{margin-left:auto}
 .gc.gc-layout-a .gc-a-help>p{position:static;width:auto;max-width:100%;margin:8px 0 12px;padding:12px 14px;background:#fff;overflow-wrap:anywhere;box-shadow:none}
}
/* Ruhige Themenblöcke statt einer durchgehend blau markierten Tabelle. */
.gc.gc-layout-selection .gc-selection h2{font-size:15px;line-height:1.4;padding:14px 4px 12px;border-bottom:1px solid var(--gc-line)}
.gc.gc-layout-selection .gc-selection #gc-selection-list{display:block;margin:0}
.gc.gc-layout-selection .gc-selection dl>.gc-selection-group{display:block;min-height:0;padding:14px 4px 10px;border:0;border-bottom:1px solid var(--gc-line);background:transparent;box-shadow:none}
.gc.gc-layout-selection .gc-selection .gc-selection-heading{font-size:12px;line-height:1.5;font-weight:700;color:var(--gc-ink);margin:0 0 5px;max-width:none}
.gc.gc-layout-selection .gc-selection .gc-selection-group>dd{margin:0}
.gc.gc-layout-selection .gc-selection .gc-selection-group dl{display:block;margin:0}
.gc.gc-layout-selection .gc-selection dl>.gc-selection-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;font-size:11px;line-height:1.4}
.gc.gc-layout-selection .gc-selection .gc-selection-row>dt{hyphens:auto;color:var(--gc-muted);font-weight:400;max-width:none}
.gc.gc-layout-selection .gc-selection .gc-selection-row>dd{margin:0;min-width:0}
.gc.gc-layout-selection .gc-selection .gc-selection-row button{display:flex;align-items:center;justify-content:flex-end;gap:5px;width:100%;min-height:44px;padding:5px 0 5px 4px;border:0;background:transparent;color:var(--gc-ink);font-size:11px;font-weight:500;text-align:right;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
.gc.gc-layout-selection .gc-selection .gc-selection-edit{flex:none;color:var(--gc-muted);font-size:12px}
.gc.gc-layout-selection .gc-selection .gc-selection-row.gc-selection-active button{color:var(--gc-active)}
.gc.gc-layout-selection .gc-selection .gc-selection-row button:hover{background:#f4f6f9;text-decoration:underline;text-underline-offset:3px}
@media(max-width:850px){.gc.gc-layout-selection .gc-selection .gc-selection-row,.gc.gc-layout-selection .gc-selection .gc-selection-row button{font-size:12px}}

.gc .gc-product-images{position:absolute;inset:110px 0 0;display:flex;flex-direction:column;gap:8px;padding:8px;background:#fff;z-index:12;overflow:auto}
.gc .gc-product-images[hidden]{display:none}
.gc #gc-product-image{display:block;width:100%;height:0;min-height:100px;flex:1 1 auto;object-fit:contain}
.gc .gc-product-images p{font-size:12px;line-height:1.4;margin:0}
.gc .gc-product-thumbs{display:flex;gap:6px;flex-wrap:wrap}
.gc .gc-product-thumbs button{width:48px;height:48px;padding:2px;border:1px solid var(--gc-line);background:#fff}
.gc .gc-product-thumbs button[aria-pressed=true]{border:2px solid var(--gc-active)}
.gc .gc-product-thumbs img{width:100%;height:100%;object-fit:contain}
.gc.gc-product-mode :is(#gc-handles,.gc-detail,#gc-corner-measure,#gc-hole-detail,#gc-edge-fallback,#gc-edge-info,#gc-close-hole,#gc-close-edge,#gc-corner-detail){display:none!important}
.gc.gc-product-mode .gc-canvas-wrap{min-height:320px}
/* O2-57 Punkt 6: Bohrung passt nicht zum Ausschnitt. Hinweis direkt unter der Zeichnung (linker Bereich), Farbe wie die
   Fehlertexte im Formular (#923e25 auf Weiß 7:1), Kästchen zum Bestätigen mit 44 px Tippfläche. */
.gc .gc-konflikt{order:0;flex:0 0 auto;width:100%;align-self:stretch;box-sizing:border-box;margin:8px 0 0;padding:10px 12px;border:1px solid #923e25;border-left-width:5px;background:#fff;color:#923e25;font-size:13px;line-height:1.45}
.gc .gc-konflikt[hidden]{display:none}
.gc .gc-konflikt h3{margin:0 0 4px;font-size:14px;line-height:1.3;font-weight:700;color:#923e25}
.gc .gc-konflikt ul{margin:0 0 4px;padding-left:18px}
.gc .gc-konflikt p{margin:0 0 4px}
.gc .gc-konflikt .gc-konflikt-ok{display:flex;align-items:center;gap:10px;min-height:44px;margin:4px 0 0;color:#142a4c;font-weight:600;cursor:pointer}
.gc .gc-konflikt .gc-konflikt-ok input{flex:none;width:22px;height:22px;margin:0;accent-color:#923e25}
.gc .gc-konflikt[data-bestaetigt="true"]{border-left-color:#142a4c}

/* Direkte Bedienung der Zeichnung: Flächen ziehen und Maßzahlen bearbeiten. */
.gc #gc-handles [data-cutout-free],.gc #gc-handles [data-measure]{pointer-events:all;touch-action:none}
.gc #gc-handles [data-cutout-free]{cursor:grab}
.gc #gc-handles [data-cutout-free]:focus{stroke:var(--gc-active);stroke-width:2;stroke-dasharray:4 3}
.gc [data-measure]{cursor:text}
.gc [data-measure]:focus [data-measure-hit],.gc [data-measure]:hover [data-measure-hit]{fill:#1c548218;stroke:var(--gc-active);stroke-width:1}
.gc .gc-mass-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:24px;border:1px solid var(--gc-line);background:var(--gc-paper);color:var(--gc-ink)}
.gc .gc-mass-dialog::backdrop{background:#142a4c55}
.gc .gc-mass-dialog h2{margin:0 0 8px;font-size:23px}
.gc .gc-mass-dialog p{font-size:13px}
.gc .gc-mass-dialog label{margin:12px 0}
.gc .gc-mass-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.gc .gc-mass-actions button{flex:1;min-height:44px}
.gc [data-mass-error]{color:#923e25}
.gc .gc-options button[data-thickness] small{white-space:normal;overflow-wrap:anywhere;max-width:100%}
.gc.gc-drawing-mode #gc-handles{touch-action:none}
/* Lange Wissenslinks bleiben auch in schmalen Begriffshilfen vollständig lesbar. */
.gc .gc-begriff-text a{max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere}
/* Begriffshilfen schweben in der obersten Browserebene, ohne Formularverschiebung. */
.gc .gc-begriff-text[popover]{position:fixed;inset:auto;margin:0;width:min(320px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;box-sizing:border-box;padding:14px 16px;border:1px solid var(--gc-line);border-radius:6px;background:#fff;color:var(--gc-ink,#142a4c);box-shadow:0 8px 28px #142a4c2b;z-index:10000}
.gc .gc-begriff-text[popover]::backdrop{background:transparent;pointer-events:none}
.gc .gc-begriff-text[popover] a{display:flex;width:fit-content;margin-top:8px;padding:0;background:transparent;text-decoration:underline}

/* 14.10.2026: Zusätzliche Listen unter der Zeichnung entfallen. */
.gc #gc-masstexte-details,
.gc #gc-measurements-details{display:none}

/* Auswahlkarten: Inline-Inhalte nutzen die Kartenbreite; native Desktopdetails
   teilen die Kopfzeile mit dem Titel. Offene Inhalte wachsen ohne Höhenbegrenzung. */
.gc.gc-layout-selection #gc-zubehoer{container-name:gc-zubehoer}
.gc.gc-layout-selection #gc-zubehoer .gc-produkte-titel{margin:0 0 12px;font-size:16px;line-height:1.4;color:var(--gc-ink)}
.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-karte{grid-template-columns:44px minmax(0,1fr);grid-template-areas:'bild text' 'aktion aktion';gap:6px 8px;padding:6px 8px;align-items:start}
.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-abbildungen,.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-ohne-bild{width:44px;height:44px}
.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-abbildungen a{width:44px;height:44px;min-height:44px}
.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-abbildungen img,.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-ohne-bild svg{width:40px;height:40px}
.gc.gc-layout-selection #gc-zubehoer .gc-zb-name{display:block;margin:0;font-size:14px;line-height:20px;overflow-wrap:anywhere}
.gc.gc-layout-selection #gc-zubehoer .gc-zb-eyebrow{margin:0;font-size:10px;line-height:12px;letter-spacing:.03em}
.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-variante{max-width:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))}
.gc.gc-layout-selection #gc-zubehoer .gc-zb-details{min-width:0;padding:0}
.gc.gc-layout-selection #gc-zubehoer .gc-zb-details>summary{box-sizing:border-box;min-height:44px;margin:0;padding:0;font-size:12px;line-height:16px;white-space:normal;cursor:pointer}
.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-aktion{display:flex;max-width:none;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 8px}
.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-preis{flex:0 1 auto;white-space:normal;font-size:11px;text-align:left}
.gc.gc-layout-selection #gc-zubehoer .gc-zb-knoepfe{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;width:auto}
.gc.gc-layout-selection #gc-zubehoer .gc-zb-knoepfe .gc-zb-link{display:inline-flex;align-items:center;min-height:44px;padding:6px 0;font-size:12px}
.gc.gc-layout-selection #gc-zubehoer .gc-zb-menge{display:inline-flex;flex:0 1 auto;align-items:center;font-size:11px;flex-wrap:wrap;gap:4px;white-space:normal}
.gc.gc-layout-selection #gc-zubehoer .gc-zb-menge input{width:44px;min-height:44px;margin:0;padding:6px 4px;font-size:15px}
.gc.gc-layout-selection #gc-zubehoer .gc-zb-dazu{font-size:12px;min-height:44px;padding-inline:8px}
/* Ohne Desktopdetails bleiben alle Angaben inline. Breite Karten verteilen
   die erklärenden Absätze auf zwei Spalten statt einer schmalen linken Säule. */
@container gc-zubehoer (min-width:560px){
 .gc.gc-layout-selection #gc-zubehoer .gc-zb-text:not(:has(>.gc-zb-details)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
 .gc.gc-layout-selection #gc-zubehoer .gc-zb-text:not(:has(>.gc-zb-details))>*{grid-column:1/-1}
 .gc.gc-layout-selection #gc-zubehoer .gc-zb-text:not(:has(>.gc-zb-details))>.gc-zb-info,.gc.gc-layout-selection #gc-zubehoer .gc-zb-text:not(:has(>.gc-zb-details))>[data-partnerhinweis]{grid-column:auto;margin:0}
}
/* Nur vorhandene native Details werden umgeordnet. Titel und Details bleiben
   getrennte Rasterzellen; kein negativer Rand und keine Titelüberlagerung. */
.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-karte:has(.gc-zb-details){grid-template-columns:44px minmax(0,1fr) minmax(100px,1fr);grid-template-areas:none;grid-template-rows:auto auto auto;row-gap:0}
.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-karte:has(.gc-zb-details)>.gc-zb-text{display:contents}
.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-karte:has(.gc-zb-details)>:is(.gc-zubehoer-abbildungen,.gc-zubehoer-ohne-bild){grid-area:1/1/3/2;align-self:center}
.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-karte:has(.gc-zb-details) .gc-zb-eyebrow{grid-area:1/2/2/3;margin-bottom:3px}
.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-karte:has(.gc-zb-details) .gc-zb-name{grid-area:2/2/3/3;font-size:13px;line-height:16px}
.gc.gc-layout-selection #gc-zubehoer .gc-zb-details{grid-area:1/3/3/4;align-self:start}
.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-karte:has(.gc-zb-details)>.gc-zubehoer-aktion{grid-area:3/1/4/-1;padding-top:3px}
.gc.gc-layout-selection #gc-zubehoer .gc-zb-details[open]{display:contents}
.gc.gc-layout-selection #gc-zubehoer .gc-zb-details[open]>summary{grid-area:1/3/3/4}
.gc.gc-layout-selection #gc-zubehoer .gc-zb-details[open]::details-content{grid-area:4/1/5/-1;min-width:0;margin-top:6px}
.gc.gc-layout-selection #gc-zubehoer .gc-zb-details[open] p{margin:4px 0}
.gc.gc-layout-selection #gc-zubehoer .gc-zb-details[open]>.gc-zb-info,.gc.gc-layout-selection #gc-zubehoer .gc-zb-details[open]>[data-partnerhinweis]{display:inline-block;vertical-align:top;width:calc(50% - 8px);margin:4px 8px 4px 0}
/* Einzeilige Zubehörzeile im Auswahl-Layout erst ab 740 px Kartenbreite (vorher 700): mit den Orange-Keil-Knöpfen brach das
   Etikett zwischen 700 und 739 px um, Karte 73 statt höchstens 64 px (gemessen 19.10.2026, mess-test.mjs). */
@container gc-zubehoer (min-width:740px){
 /* Fester Platz für den Dazulegen-Knopf: "Dazugelegt" machte ihn 79 -> 99 px breit, "Ausführung und Details" brach daneben um und
    die Karte sprang von 58 auf 62 px. Eine Mindesthöhe 64 px hätte das verdeckt, nahm aber der Zeichnung bei 1440 px die Höhe (O2-58). */
 .gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-karte:has(.gc-zb-details):not(:has([data-zubehoer-anfrage])) .gc-zb-dazu{flex:none;box-sizing:border-box;inline-size:100px}
 .gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-karte:has(.gc-zb-details):not(:has([data-zubehoer-anfrage])){grid-template-columns:44px fit-content(230px) minmax(72px,1fr) max-content;grid-template-rows:auto auto}
 .gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-karte:has(.gc-zb-details):not(:has([data-zubehoer-anfrage]))>.gc-zubehoer-aktion{grid-area:1/4/3/5;align-self:center;flex-wrap:nowrap;padding-top:0}
 .gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-karte:has(.gc-zb-details):not(:has([data-zubehoer-anfrage])) .gc-zb-menge,.gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-karte:has(.gc-zb-details):not(:has([data-zubehoer-anfrage])) .gc-zb-knoepfe{flex-wrap:nowrap}
 .gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-karte:has(.gc-zb-details):not(:has([data-zubehoer-anfrage])) .gc-zubehoer-preis{flex-basis:60px;width:60px}
 .gc.gc-layout-selection #gc-zubehoer .gc-zubehoer-karte:not(:has([data-zubehoer-anfrage])) .gc-zb-details[open]::details-content{grid-area:3/1/4/-1}
}
.gc.gc-layout-selection .gc-preview>#gc-zubehoer-platz-mobil:empty{display:none}
.gc.gc-layout-selection .gc-preview>#gc-zubehoer-platz-mobil:not(:empty){margin:12px 0 0;min-width:0}
/* Preis auf Anfrage (18.10.2026): ohne Beträge (preise.json mit betraege_gesperrt) gibt es nichts aufzuschlüsseln, public/shop/glas/app.mjs markierePreisAnfrage. */
.gc.gc-preis-anfrage .gc-summary details.gc-breakdown{display:none}
/* Zubehör-Hinweis Orange Keil (19.10.2026, Variante 2): weiße Karte mit Orangekante, "Passt zu Bohrung" als Keil wie der Warenkorbzähler im Kopf, "Zum Artikel" als orangener Keilknopf. Nur Farbe, Rahmen und Keil, das Raster der Karte bleibt. */
.gc #gc-zubehoer{--zb-orange:#f2884b;--zb-tinte:#142a4c}
.gc #gc-zubehoer .gc-produkte-titel::before{content:"";display:inline-block;width:28px;height:.62em;margin-right:12px;background:var(--zb-orange);clip-path:polygon(0 0,100% 0,calc(100% - .62em * .325) 100%,0 100%)}
.gc #gc-zubehoer .gc-zubehoer-karte{border:1px solid var(--zb-tinte);border-left:6px solid var(--zb-orange);box-shadow:0 6px 18px rgba(20,42,76,.08)}
.gc #gc-zubehoer .gc-zubehoer-karte .gc-zb-eyebrow{display:inline-block;padding:2px 14px 2px 8px;background:var(--zb-orange);color:var(--zb-tinte);font-weight:800;clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%)}
/* Kompakte Zubehörzeile (Layout A und Auswahl-Layout): Keil als eigener Block in Textbreite, ohne Polster oben und unten; die
   Zeilenhöhe der Kompaktfassung (12 bzw. 14 px) gibt der 10-px-Schrift genug Luft. Mit Polster wird die Karte höher als 64 px. */
.gc:is(.gc-layout-a,.gc-layout-selection) #gc-zubehoer .gc-zubehoer-karte .gc-zb-eyebrow{display:block;width:fit-content;max-width:100%;padding-block:0}
.gc #gc-zubehoer .gc-zb-link,.gc.gc-layout-selection #gc-zubehoer .gc-zb-knoepfe .gc-zb-link{padding:0 18px 0 14px;background:var(--zb-orange);color:var(--zb-tinte);font-weight:800;text-decoration:none;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.gc #gc-zubehoer .gc-zb-link:is(:hover,:focus-visible),.gc.gc-layout-selection #gc-zubehoer .gc-zb-knoepfe .gc-zb-link:is(:hover,:focus-visible){background:#f59a64;color:var(--zb-tinte)}
/* Kompakte Zubehörzeile: schmalerer Keil für "Zum Artikel" und das Etikett, Schrift 700 statt 800. Mit 32 px Polster war
   die Aktion 29 px breiter als vorher, bei 700 px Kartenbreite brach das Etikett dreizeilig um (Karte 85 statt 62 px). */
.gc:is(.gc-layout-a,.gc-layout-selection) #gc-zubehoer .gc-zubehoer-karte .gc-zb-link{padding:0 12px 0 6px;font-weight:700;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.gc:is(.gc-layout-a,.gc-layout-selection) #gc-zubehoer .gc-zubehoer-karte .gc-zb-eyebrow{padding-inline:6px 10px;font-weight:700;clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%)}
/* Fotos zur gewählten Option (18.10.2026, public/shop/glas/konfigurator-fotos.mjs): ruhige Fläche unter den Auswahlflächen, Linie wie
   das Kantenprofil, Seitenverhältnis aus width/height der echten Bildmaße (kein Springen). Ohne belegtes Foto gibt es die Fläche nicht. */
/* Karte #17 (20.10.2026): Das Foto stand gut 500 px hoch zwischen Auswahl und nächstem Feld und schob es weg. Jetzt ein Vorschaubild
   rechts neben der Beschreibung (Standardantwort der Karte), feste Breite, alle Fotos 3:2, also überall dieselbe feste Höhe; die
   Beschreibung füllt den Platz daneben. Vergrößern über den Knopf am Bild (Großansicht unten). */
.gc .gc-foto{display:grid;grid-template-columns:minmax(0,1fr) min(168px,42%);grid-template-areas:"text bild";column-gap:14px;align-items:start;margin:12px 0 6px;padding:0;min-width:0}
.gc button.gc-foto-knopf{grid-area:bild;display:block;width:100%;min-height:0;padding:0;border:1px solid var(--gc-line);background:var(--gc-paper);color:var(--gc-ink);line-height:0;cursor:zoom-in}
.gc button.gc-foto-knopf:is(:hover,:focus-visible){border-color:var(--gc-ink)}
.gc button.gc-foto-knopf:focus-visible{outline:3px solid #154e8a;outline-offset:2px}
.gc .gc-foto img{display:block;width:100%;height:auto;max-width:100%}
.gc .gc-foto-lupe{display:block;padding:5px 8px;border-top:1px solid var(--gc-line);font-size:13px;font-weight:600;line-height:1.4;text-align:center}
.gc .gc-foto figcaption{grid-area:text;margin:0;font-size:13px;line-height:1.5;color:var(--gc-muted);overflow-wrap:anywhere}
.gc .gc-hole-karte .gc-foto{margin:10px 0}
@media(max-width:480px){.gc .gc-foto{grid-template-columns:minmax(0,1fr) min(132px,42%);column-gap:10px}}
/* Karte #17: Fällt unter der gewählten Option etwas weg, während der Formularbereich ganz unten steht, fehlt Scrollweg, um die Option
   an ihrer Stelle zu halten. app.mjs (scrollUm) setzt dann --gc-halt-platz; beim nächsten Neuzeichnen fällt der Platz wieder weg. */
.gc.gc-halt .gc-controls::after{content:"";display:block;flex:none;height:var(--gc-halt-platz,0px)}
.gc .gc-foto-dialog{width:min(1000px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:16px;border:1px solid var(--gc-line);background:var(--gc-paper);color:var(--gc-ink)}
.gc .gc-foto-dialog::backdrop{background:#142a4c99}
.gc .gc-foto-dialog figure{margin:0}
.gc .gc-foto-dialog img{display:block;width:100%;height:auto;max-height:calc(100dvh - 160px);object-fit:contain}
.gc .gc-foto-dialog figcaption{margin:8px 0 12px;font-size:14px;line-height:1.5}
.gc .gc-foto-dialog .gc-foto-zu{min-width:120px}
/* Hilfe je Option (J02 bis J04, begriffs-hilfe.mjs WAHL_HILFEN): jede Wahl mit kleinem Foto links, Name und Text rechts; ohne Foto nur Text. */
.gc-begriff-text .gc-begriff-wahlen{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.gc-begriff-wahlen li{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:10px;align-items:start;min-width:0}
.gc-begriff-wahlen li>img{grid-row:1/3;display:block;width:96px;height:auto;border:1px solid var(--gc-line)}
.gc-begriff-wahlen li>strong{grid-column:2;font-size:13px;line-height:1.4}
.gc-begriff-wahlen li>span{grid-column:2;min-width:0}
.gc-begriff-wahlen li:not(:has(>img))>*{grid-column:1/-1}
/* Kantenwahl mit Werkstattfoto (19.10.2026, kanten-auswahl.mjs): Ausschnitt je Foto auf die Kante gelegt, die Kacheln sind flach. */
.gc .gc-edge-foto{object-fit:cover;object-position:50% 50%;background:#e2e6eb}
.gc .gc-edge-foto[data-foto="kante-gesaeumt"]{object-position:50% 66%}
.gc .gc-edge-foto[data-foto="kante-poliert"]{object-position:50% 24%}
.gc .gc-edge-foto:is([data-foto="kante-matt"],[data-foto="kante-geschnitten"]){object-position:50% 30%}
/* Steht eine Kachel neben einer höheren (Facette mit Breitenzeile), beginnt das Foto oben an der Kachel statt mittig mit Rand darüber. */
.gc .gc-edges>button:is([data-edge],[data-edge-facette]):not([hidden]){display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;text-align:left}
.gc .gc-edges>button:is([data-edge],[data-edge-facette])>.gc-edge-image{flex:none}
/* Warenkorb-Rückmeldung (19.10.2026: sichtbare Bestätigung nach "In den Warenkorb"). Nach dem Speichern
   wird die Statuszeile zur Karte: Wagen, in den eine Scheibe fällt, Haken im Orange des Kopfes, darunter die zwei Wege.
   "Warenkorb öffnen" ist ein Vorwärts-Knopf und steht in Leitblau mit weißer Schrift (Karte 26); Orange bleibt Markierung (Haken, linker Rand).
   Grundzustand ist das Endbild; die Bewegung läuft nur rückwärts aus dem Startbild (fill backwards), ohne Bewegung bleibt das Endbild stehen. */
.gc #gc-cart-status:has(>.gc-korb-bild){display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-areas:"bild text" "bild wege";align-items:center;gap:4px 14px;padding:14px 16px;background:#fff;border:1px solid #142a4c;border-left:6px solid #f2884b;box-shadow:0 10px 28px rgba(20,42,76,.18);color:#142a4c;font-size:13px;line-height:1.45;animation:gc-korb-auf .32s cubic-bezier(.2,.8,.2,1) backwards}
.gc #gc-cart-status>.gc-korb-bild{grid-area:bild;display:block;width:56px;height:49px;align-self:center}
.gc #gc-cart-status>.gc-korb-text{grid-area:text;min-width:0}
.gc #gc-cart-status>.gc-korb-text strong{display:block;font-size:15px;font-weight:800;line-height:1.35}
.gc #gc-cart-status>.gc-korb-wege{grid-area:wege;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0}
.gc #gc-cart-status>.gc-korb-wege>a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px 0 14px;background:#154e8a;color:#fff;font-weight:800;text-decoration:none;white-space:nowrap;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.gc #gc-cart-status>.gc-korb-wege>a:is(:hover,:focus-visible){background:#0f3d6e}
.gc #gc-cart-status>.gc-korb-wege>a:focus-visible{outline:3px solid #142a4c;outline-offset:2px}
.gc #gc-cart-status>.gc-korb-wege>#gc-next-glass{min-height:44px;padding:0 14px;background:#fff;border:1px solid #142a4c;color:#142a4c;font-weight:650;white-space:normal;text-align:left}
.gc #gc-cart-status>.gc-korb-wege>#gc-next-glass:is(:hover,:focus-visible){background:#e4e7ec}
.gc-korb-bild .gc-korb-wagen{fill:#fff;stroke:#142a4c;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.gc-korb-bild .gc-korb-rad{fill:#142a4c}
.gc-korb-bild .gc-korb-glas{fill:#d7e8ee;stroke:#5f8798;stroke-width:1.5}
.gc-korb-bild .gc-korb-glanz{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.gc-korb-bild .gc-korb-haken-kreis{fill:#f2884b}
.gc-korb-bild .gc-korb-haken{fill:none;stroke:#142a4c;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.gc-korb-bild .gc-korb-scheibe{transform-box:view-box;animation:gc-korb-fall .5s cubic-bezier(.5,0,.75,0) .15s backwards}
.gc-korb-bild .gc-korb-ganz{transform-box:fill-box;transform-origin:50% 100%;animation:gc-korb-stoss .34s ease-out .62s backwards}
.gc-korb-bild .gc-korb-marke{transform-box:fill-box;transform-origin:50% 50%;animation:gc-korb-plopp .36s cubic-bezier(.3,1.6,.5,1) .8s backwards}
@keyframes gc-korb-auf{from{opacity:0;transform:translateY(10px)}}
@keyframes gc-korb-fall{from{transform:translateY(-26px);opacity:0}30%{opacity:1}}
@keyframes gc-korb-stoss{0%{transform:none}35%{transform:translateY(2px) scaleY(.95)}70%{transform:translateY(-1px)}100%{transform:none}}
@keyframes gc-korb-plopp{from{transform:scale(0);opacity:0}}
@media(prefers-reduced-motion:reduce){.gc #gc-cart-status:has(>.gc-korb-bild),.gc-korb-bild :is(.gc-korb-scheibe,.gc-korb-ganz,.gc-korb-marke){animation:none}}
/* Schmal: Die Leiste ist so breit wie das Fenster. Die zwei Wege laufen unter Bild und Text über die volle Breite,
   sonst bleibt links neben den Knöpfen eine leere Spalte unter dem Wagen. */
@media(max-width:560px){.gc #gc-cart-status:has(>.gc-korb-bild){grid-template-columns:44px minmax(0,1fr);grid-template-areas:"bild text" "wege wege";gap:10px 12px;padding:12px}.gc #gc-cart-status>.gc-korb-bild{width:44px;height:39px}.gc #gc-cart-status>.gc-korb-wege>:is(a,#gc-next-glass){flex:1 1 auto;justify-content:center;text-align:center}}
/* "Deine Auswahl" im Shopdesign (19.10.2026: an das Shopdesign angeglichen).
   Kopf wie der Zubehör-Titel mit orangem Keil und Tintenlinie, Gruppen als kleine fette Zeile in Grau,
   Werte fett in Tinte, Zeilen durch feine Linien statt Leerraum getrennt. Maße, Zeilenhöhe 44 px und Breite der Spalte bleiben. */
.gc.gc-layout-selection .gc-selection{--sel-orange:#f2884b;--sel-tinte:#142a4c}
.gc.gc-layout-selection .gc-selection h2{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--sel-tinte);border-bottom:2px solid var(--sel-tinte)}
.gc.gc-layout-selection .gc-selection h2::before{content:"";flex:none;width:22px;height:10px;background:var(--sel-orange);clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.gc.gc-layout-selection .gc-selection dl>.gc-selection-group{padding:12px 4px 4px;border-bottom:0}
.gc.gc-layout-selection .gc-selection dl>.gc-selection-group+.gc-selection-group{border-top:1px solid var(--gc-line)}
/* Ohne Großbuchstaben: "Form & Maße" würde sonst zu "FORM & MASSE". */
.gc.gc-layout-selection .gc-selection .gc-selection-heading{margin:0 0 2px;font-size:12px;line-height:1.5;font-weight:800;letter-spacing:.02em;text-transform:none;color:var(--gc-muted)}
.gc.gc-layout-selection .gc-selection dl>.gc-selection-row+.gc-selection-row{border-top:1px solid #e4e7ec}
.gc.gc-layout-selection .gc-selection .gc-selection-row>dt{font-size:12px;color:var(--gc-muted)}
.gc.gc-layout-selection .gc-selection .gc-selection-row button{font-size:12px;font-weight:700;color:var(--sel-tinte)}
.gc.gc-layout-selection .gc-selection .gc-selection-edit{font-size:11px;color:#8a94a3;transition:color .15s,transform .15s}
.gc.gc-layout-selection .gc-selection .gc-selection-row button:hover{background:transparent;text-decoration:none}
.gc.gc-layout-selection .gc-selection dl>.gc-selection-row:has(button:is(:hover,:focus-visible)){background:var(--gc-paper);box-shadow:inset 3px 0 var(--sel-orange)}
.gc.gc-layout-selection .gc-selection .gc-selection-row button:is(:hover,:focus-visible) .gc-selection-edit{color:var(--sel-orange);transform:translate(1px,-1px)}
.gc.gc-layout-selection .gc-selection .gc-selection-row.gc-selection-active button{color:var(--gc-active)}
@media(prefers-reduced-motion:reduce){.gc.gc-layout-selection .gc-selection .gc-selection-edit{transition:none}}
/* Desktop: Die Spalte scrollt. Ein weicher Auslauf unten zeigt, dass es weitergeht, statt dass die letzte Gruppe hart abgeschnitten wirkt. */
@media(min-width:851px){
 .gc.gc-layout-selection .gc-workview>.gc-selection{background:#fff}
 .gc.gc-layout-selection .gc-workview>.gc-selection #gc-selection-list{padding-bottom:24px}
 .gc.gc-layout-selection .gc-workview>.gc-selection::after{content:"";position:sticky;bottom:-8px;display:block;height:28px;margin:-28px -10px -8px;background:linear-gradient(rgba(255,255,255,0),#fff 80%);pointer-events:none}
}

/* Karte 50: Schritt auf Anfrage (Maß außerhalb der Preisliste) mit "!" und "auf Anfrage" statt Haken, im Fehlerton der A-49-Serie
   (keine eigene Orange-Warnfarbe: Orange ist laut CLAUDE.md für Kontaktkasten, Logo-Strich, Markierung und Zähler reserviert). */
.gc.gc-layout-49 .gc-steps [data-schritt=anfrage]{background:#fff0ed;color:#812c22;border-color:#812c22}
.gc.gc-layout-49 .gc-accordion-button[data-schritt=anfrage]{background:#fff0ed;color:#812c22}
.gc.gc-layout-49 .gc-accordion-button[data-schritt=anfrage] .gc-schritt-marke{background:#812c22;color:#fff}

/* Gespräch 21.10.: vier Ecken mit Ausschnitt-Sperre als lesbare 2x2-Auswahl. */
.gc .gc-corner-picker-ausschnitt{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Rückmeldung 24.10.2026: Gewicht gut sichtbar unter "Deine Auswahl". */
.gc .gc-gewicht-gross{position:sticky;bottom:0;z-index:1;box-shadow:0 -6px 10px -8px rgba(20,42,76,.35);display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:12px 0 0;padding:12px 14px;background:var(--k-flaeche,#eef1f5);border-left:3px solid var(--k-blau,#154e8a);font:600 14px/1.4 Manrope,Arial,sans-serif;color:var(--k-tinte,#142a4c)}
.gc .gc-gewicht-gross strong{font:800 20px/1.2 Manrope,Arial,sans-serif;color:var(--k-tinte,#142a4c)}

/* Spiegelbefestigung (Rückmeldung 24.10.2026): drei gleichrangige Arten als Knöpfe, darunter die Auswahl und das Zubehör der Art. */
.gc .gc-options.gc-befestigungsarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gc .gc-options.gc-befestigungsarten button{min-width:0;overflow-wrap:anywhere;hyphens:auto}
@media(max-width:400px){.gc .gc-options.gc-befestigungsarten{grid-template-columns:minmax(0,1fr)}}
.gc .gc-befestigung-auswahl{margin:0 0 16px;padding-left:12px;border-left:2px solid var(--gc-line);min-width:0}
.gc .gc-zubehoer-spiegel{margin-top:12px;min-width:0}
.gc .gc-zubehoer-spiegel[hidden]{display:none}
.gc .gc-zubehoer-variante-wahl{display:block;margin:8px 0 0;min-width:0}
.gc .gc-zubehoer-variante-wahl select{width:100%;max-width:100%;min-height:44px}
/* Im Formular ist die Spalte schmal: Zubehörkarten der Befestigung immer zweizeilig (Bild und Text, darunter Preis und Knöpfe),
   auch wo die Karten unter der Zeichnung am Rechner dreispaltig stehen. */
.gc.gc .gc-zubehoer-spiegel .gc-zubehoer-liste>.gc-zubehoer-karte{grid-template-columns:64px minmax(0,1fr);grid-template-areas:"bild text" "aktion aktion";gap:12px 16px;padding:12px;align-items:start}
.gc.gc .gc-zubehoer-spiegel .gc-zubehoer-liste>.gc-zubehoer-karte>.gc-zubehoer-aktion{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;max-width:none;gap:8px 16px}
.gc.gc .gc-zubehoer-spiegel .gc-zb-knoepfe .gc-zb-link{display:inline-flex;flex-direction:row;align-items:center;gap:4px;min-height:44px;padding:0 12px;white-space:nowrap}
.gc .gc-zb-seite-zeile{margin-top:4px}
.gc .gc-zb-seite{display:inline-flex;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:4px;max-width:100%;min-height:44px;padding:0;background:none;font-size:13px;font-weight:650;line-height:1.4;white-space:normal;color:var(--gc-ink)}
/* Feinschliff vor dem Start (Sebastian 25.10.2026, Responsive-Abnahme Punkte 1 und 2): am Handy Preisleiste und
   Schrittlegende mindestens 12 px, Vorwärtsknopf 13 px; Hilfetexte, Hinweise und Fotounterschriften 14 px. */
@media(max-width:850px){
 .gc.gc .gc-quote :is(.gc-facts,.gc-facts span,.gc-breakdown summary,#gc-cart-status,#gc-why){font-size:12px}
 .gc.gc .gc-price .gc-label{font-size:12px;line-height:14px}
 .gc.gc .gc-price small{font-size:12px;line-height:15px}
 .gc.gc .gc-quote :is(#gc-cart,.gc-a-next){font-size:13px}
 .gc.gc .gc-steps .gc-steps-legend{font-size:12px}
 .gc.gc :is(.gc-help,.gc-note,.gc-note p,.gc-vb-hilfe,.gc-vb-hilfe p,.gc-foto figcaption,.gc-edge-profile figcaption){font-size:14px}
}