.interactive-badge{font-size:.75rem;line-height:1;letter-spacing:.02em;padding:5px 6px;margin-left:13px;background:#ffffff20;border:1px solid #ffffff55;border-radius:3px}.header{transition:box-shadow .25s}.header.has-scrolled{box-shadow:0 4px 26px #080f1a0d}.navigation a.is-current::after{width:100%}.hero-image{animation:hero-settle 1.4s ease-out both}.hero-content>h1,.hero-intro,.hero-eyebrow{animation:hero-appear .8s ease-out both}.hero-intro{animation-delay:.08s}.hero-content>h1{animation-delay:.15s}.button{box-shadow:0 3px 0 transparent}.button:active{transform:translateY(0)}.service-row{transition:background .25s,padding .25s}.service-row:hover{background:#eef3f770;padding-left:14px;padding-right:14px}.project-image{border-radius:5px}.project figcaption{transition:transform .25s}.project:hover figcaption{transform:translateY(-3px)}.reveal-enabled .will-reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}.reveal-enabled .will-reveal.is-visible{opacity:1;transform:none}.systems-grid{grid-template-columns:1.15fr 1fr;gap:6%;align-items:center}.model-card{background:linear-gradient(150deg,#172431,#0d1621);border:1px solid #344252;border-radius:8px;overflow:hidden;color:#fff;box-shadow:0 20px 55px #0b152420;min-width:0}.model-top{padding:22px 24px 0;display:flex;justify-content:space-between;gap:12px;align-items:start}.model-top p{font-size:.8125rem;color:#c8dbea;line-height:1.6}.model-top p span{display:block;font-size:.9375rem;color:white;font-weight:600;margin-top:3px}.model-badge{border:1px solid #6faacb80;padding:5px 8px;font-size:.8125rem;letter-spacing:.08em;border-radius:3px;color:#d3eaf7}.model-stage{height:365px;width:100%;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#45556b55,transparent 65%);cursor:grab;touch-action:pan-y;outline-offset:-5px!important}.model-stage:active{cursor:grabbing}.model-stage canvas,.model-stage>svg{display:block;position:absolute;inset:0;width:100%;height:100%;outline:none;z-index:1}.model-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#b9cfe0;font-size:.875rem;padding:30px;text-align:center;z-index:3}.model-spinner{width:28px;height:28px;border:2px solid #8fc9e833;border-top-color:#8fc9e8;border-radius:50%;animation:model-spin .8s linear infinite}.model-axis{position:absolute;bottom:15px;left:24px;font-size:.65rem;letter-spacing:.16em;color:#83a4bf;pointer-events:none;z-index:2}.model-instructions{padding:0 24px 18px;text-align:center;color:#b5cfe3;font-size:.8125rem;line-height:1.6}.model-controls{padding:20px 24px 24px;border-top:1px solid #ffffff18;background:#ffffff03}.layer-toggles{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:21px}.layer-toggles button{display:inline-flex;align-items:center;gap:7px;background:#ffffff0c;color:#fff;border:1px solid #6f8ba45c;padding:9px 10px;border-radius:4px;min-height:41px;font-size:.8125rem;line-height:1.4;transition:background .2s,border-color .2s}.layer-toggles button:hover{background:#ffffff20;border-color:#8fc9e8}.layer-toggles button[aria-pressed=false]{color:#99aebf;background:transparent;border-style:dashed}.layer-toggles button[aria-pressed=false] .layer-dot{opacity:.2}.layer-dot{display:inline-block;width:8px;height:8px;border-radius:2px;flex-shrink:0}.concrete-dot{background:#b8c5d0}.insulation-dot{background:#ded4b0}.fixing-dot{background:#8fc9e8}.explode-label{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:.875rem;margin-bottom:8px;color:#dae6ef}.explode-label output{font-size:.8125rem;color:#a9c9df}#model-explode{display:block;width:100%;height:26px;margin:0;cursor:pointer;accent-color:#8fc9e8;border:0;background:none}.model-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:17px}.model-actions button{font-size:.8125rem;padding:8px 12px;border:1px solid #ffffff30;background:transparent;color:#d4e3ef;border-radius:3px;min-height:39px}.model-actions button:hover,.model-actions button[aria-pressed=true]{color:#0b1524;background:#b8d9ed;border-color:#b8d9ed}.model-detail{margin-top:21px;border-left:2px solid #8fc9e8;padding-left:14px;min-height:65px}.model-detail strong{font-size:.875rem;font-weight:600}.model-detail p{font-size:.8125rem;color:#b9cfe0;margin-top:4px;line-height:1.75}.model-note{font-size:.75rem;color:#9fb8cc;padding:0 24px 21px;line-height:1.7}.systems-content .system-tab{transition:color .2s,border-color .2s}.system-panel{animation:panel-enter .25s ease-out}.systems-content>.text-link{font-size:.9375rem}.inquiry-dialog{width:min(720px,calc(100% - 32px));padding:32px}.inquiry-dialog .dialog-top{align-items:start;margin-bottom:24px}.inquiry-dialog .eyebrow{font-size:.75rem;margin-bottom:8px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}.field{min-width:0}.field-wide{grid-column:1/-1}.field label{display:block;font-size:.875rem;font-weight:600;margin-bottom:7px;color:var(--navy)}.field label span{font-size:.75rem;font-weight:400;color:var(--muted)}.field input,.field select,.field textarea,.inquiry-copy textarea{font:inherit;line-height:1.5;font-size:1rem;width:100%;padding:11px 12px;min-height:46px;border:1px solid #c8d4de;border-radius:4px;background:#f9fbfc;color:var(--ink);transition:border-color .2s,box-shadow .2s}.field input::placeholder,.field textarea::placeholder{font-size:.875rem;color:#697989}.field textarea,.inquiry-copy textarea{resize:vertical;max-height:35vh}.field input:focus,.field select:focus,.field textarea:focus,.inquiry-copy textarea:focus{outline:none;box-shadow:0 0 0 3px #288dbd20;border-color:#2b749e}.form-note{font-size:.8125rem;line-height:1.8;color:var(--muted);margin:20px 0 18px}.inquiry-status{font-size:.875rem;color:var(--navy);margin-top:17px}.inquiry-copy{border-top:1px solid var(--line);margin-top:22px;padding-top:17px}.inquiry-copy summary{font-size:.875rem;font-weight:600;cursor:pointer;color:var(--navy)}.inquiry-copy textarea{margin-top:14px;font-size:.875rem}.inquiry-copy .button{margin-top:12px;font-size:.875rem;min-height:44px}.mobile-quickbar{display:none}.scroll-meter{position:fixed;top:0;left:0;width:100%;height:2px;z-index:40;transform-origin:left;transform:scaleX(0);background:#347da8;pointer-events:none}
@keyframes model-spin{to{transform:rotate(360deg)}}@keyframes hero-appear{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}@keyframes hero-settle{from{transform:scale(1.035)}to{transform:scale(1)}}@keyframes panel-enter{from{opacity:.45;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.model-stage{height:320px}.model-top{padding:20px 20px 0}.model-controls{padding:18px 20px 22px}.model-note{padding-inline:20px}.layer-toggles{gap:7px}.layer-toggles button{font-size:.75rem;padding:8px}.model-top p span{font-size:.875rem}.systems-grid{gap:5%}.model-instructions{padding-inline:20px;font-size:.75rem}}
@media(max-width:850px){.systems-grid{grid-template-columns:1fr}.model-card{max-width:680px;width:100%}.model-stage{height:395px}.model-top{padding:22px 24px 0}.model-controls{padding:21px 24px}.model-note{padding-inline:24px}.layer-toggles button{font-size:.875rem;padding:10px 13px}.systems-content{max-width:680px}.model-detail{min-height:0}.model-instructions{font-size:.8125rem}}
@media(max-width:600px){body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}.model-stage{height:300px}.model-top{padding:19px 18px 0}.model-top p span{font-size:.8125rem}.model-controls{padding:18px}.model-note{padding-inline:18px;font-size:.75rem}.model-axis{left:18px;font-size:.625rem}.model-instructions{padding:0 18px 15px;font-size:.75rem}.layer-toggles{gap:7px;display:grid;grid-template-columns:1fr 1fr}.layer-toggles button{font-size:.8125rem;padding:10px;justify-content:center;min-height:43px}.layer-toggles button:last-child{grid-column:1/-1}.model-actions{gap:10px;display:grid;grid-template-columns:1fr 1fr}.model-actions button{padding:10px 7px;font-size:.8125rem;min-height:44px}.model-detail p{font-size:.875rem}.model-detail strong{font-size:.9375rem}.hero-actions .button-outline{padding-inline:16px}.interactive-badge{margin-left:10px;font-size:.6875rem}.inquiry-dialog{padding:23px;max-height:calc(100dvh - 40px)}.form-grid{grid-template-columns:1fr;gap:16px}.field-wide{grid-column:1}.inquiry-dialog .dialog-top h2{font-size:1.6rem}.mobile-quickbar{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #d0dce5;box-shadow:0 -5px 22px #0b152412;z-index:21;padding:7px 12px calc(7px + env(safe-area-inset-bottom));gap:4px}.mobile-quickbar a{font-size:.8125rem;font-weight:600;text-align:center;display:flex;align-items:center;justify-content:center;color:var(--navy);min-height:43px;border-radius:3px}.mobile-quickbar a:hover{background:var(--pale)}.mobile-quickbar a:last-child{background:var(--navy);color:#fff}.service-row:hover{padding-left:0;padding-right:0}.footer-bottom{padding-bottom:5px}}
@media(prefers-reduced-motion:reduce){.hero-image,.hero-content>h1,.hero-intro,.hero-eyebrow,.system-panel,.model-spinner{animation:none}.reveal-enabled .will-reveal{opacity:1;transform:none}}
.suspension-dot{background:#adbcc8}.rails-dot{background:#f5f6f5}.facing-dot{background:#f0f1ed}.model-card[data-system=schienen] .layer-toggles button{font-size:.875rem}@media(max-width:600px){.layer-toggles button[data-layer=facing]{grid-column:1/-1}}

.model-top p .model-mount-name{font-size:.8125rem;font-weight:400;color:#c8dbea;margin-top:0}
.model-config{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 24px 6px}
.mount-options{display:inline-flex;padding:3px;border:1px solid #6f8ba45c;border-radius:6px;background:#070d1655;gap:3px}
.mount-options button{padding:9px 16px;min-height:40px;border:0;border-radius:3px;background:transparent;color:#c8dbea;font-size:.875rem;font-weight:600}
.mount-options button[aria-pressed=true]{background:#b8d9ed;color:#0b1524}
.mount-options button:hover{box-shadow:inset 0 0 0 1px #8fc9e8}
.finish-option label{display:flex;align-items:center;gap:9px;min-height:44px;color:#dae6ef;font-size:.875rem;cursor:pointer}
.finish-option input{width:18px;height:18px;accent-color:#b8d9ed;margin:0}
.adhesive-dot{background:#c6bdab}.reinforcement-dot{background:#d5d0be}.mesh-dot{background:#7698ab}.plaster-dot{background:#f7f7f1}
.system-tabs{gap:clamp(12px,2vw,22px);flex-wrap:wrap}
.model-format{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin:8px 24px 0;padding-top:10px;border-top:1px solid #ffffff18;color:#b9cfe0;font-size:.8125rem}
.model-format strong{color:#e5f5ff;font-size:.9375rem;white-space:nowrap;letter-spacing:.025em}
.model-measurement{position:absolute;z-index:2;transform:translate(-50%,-50%);color:#d5f1ff;background:#0d1621ee;border:1px solid #8fd6ff80;border-radius:3px;padding:3px 5px;font-size:.8125rem;font-weight:600;line-height:1.2;white-space:nowrap;pointer-events:none}
.model-actions #model-panels{border-color:#8fc9e880}
#model-explode:disabled,.model-card[data-motion=true] .finish-option{opacity:.4;cursor:default}
@media(max-width:1100px){.model-format{margin-inline:20px}}
@media(max-width:850px){.model-format{margin-inline:24px}}
@media(max-width:600px){.model-format{margin-inline:18px}.model-measurement{font-size:.75rem}.model-actions #model-panels{grid-column:1/-1}.model-card[data-system=tegopor][data-motion=true] .layer-toggles button[data-layer=insulation]{grid-column:1/-1}}
@media(max-width:1100px){.model-config{padding-inline:20px}}
@media(max-width:850px){.model-config{padding-inline:24px}}
@media(max-width:600px){
  .model-config{padding:14px 18px 8px;gap:6px 14px}
  .mount-options button{padding:9px 14px;min-height:42px}
  .finish-option label{font-size:.8125rem}
  .layer-toggles{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}
  .layer-toggles button,.layer-toggles button [data-layer-name]{min-width:0}
  .layer-toggles button [data-layer-name]{hyphens:auto;overflow-wrap:anywhere}
  .layer-toggles button:last-child{grid-column:auto}
  .model-card[data-system=holzwolle] .layer-toggles button[data-layer=fixing],
  .model-card[data-system=tegopor][data-finish=false] .layer-toggles button[data-layer=insulation],
  .model-card[data-system=tegopor][data-finish=true][data-mount=decke] .layer-toggles button[data-layer=plaster]{grid-column:1/-1}
}

.sustainability{background:linear-gradient(135deg,#172431,#0d1621);border-block:1px solid #344252;padding:clamp(42px,5vw,68px) 0;color:#fff}
.sustainability-grid{grid-template-columns:1fr 3fr;gap:28px 7%;align-items:center}
.sustainability-mark svg{stroke:#8dcc72;fill:#70b65516}
.sustainability-mark .eyebrow{color:#a8d890}
.sustainability h2{color:#fff;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.25;overflow-wrap:anywhere}
.sustainability p:not(.eyebrow){color:#c8dbea;font-size:1rem;line-height:1.8}
.dgnb-overview{grid-column:1/-1;min-width:0}
.sustainability p.dgnb-scale-title{font-size:.875rem;font-weight:600;letter-spacing:.045em;margin:0 0 12px;color:#d6e5ef;overflow-wrap:anywhere}
.dgnb-scale{--dgnb-gloss:linear-gradient(180deg,#03070b55 0px,#ffffff18 4px,#ffffffa8 8px,#ffffffd0 11px,#ffffff40 15px,#ffffff10 21px,#ffffff00 45px,#00000000 calc(100% - 20px),#00000018 calc(100% - 10px),#00000055 100%);--dgnb-metal:linear-gradient(90deg,#ae744e 0%,#c88f68 24%,#b6bec5 27%,#c5cdd2 48%,#b99545 52%,#d0ae5b 73%,#465562 78%,#27333f 100%);--dgnb-depth:inset 0 1px 2px #ffffffbb,inset 0 -3px 5px #00000055,inset 0 -12px 14px #00000015,0 14px 22px #00000040,0 3px 5px #00000026;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #ffffff55;border-radius:36px/50%;overflow:hidden;background:var(--dgnb-gloss),var(--dgnb-metal);box-shadow:var(--dgnb-depth)}
.dgnb-level{min-width:0;color:#161008}
.dgnb-level+.dgnb-level{border-left:1px solid #0d162126}
.dgnb-silver{color:#18242e}.dgnb-gold{color:#241b09}.dgnb-platinum{color:#f3f7fa}
.dgnb-level summary{list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 24px 22px;cursor:pointer;min-width:0;position:relative;transition:background .2s}
.dgnb-level summary::-webkit-details-marker{display:none}
.dgnb-level summary:hover{background:linear-gradient(180deg,#ffffff12,#ffffff06)}
.dgnb-level summary:focus-visible{outline:3px solid #0b1524;outline-offset:-6px;background:#ffffff25}
.dgnb-level[open] summary{background:linear-gradient(180deg,#ffffff18,#ffffff08)}
.dgnb-name,.dgnb-value,.dgnb-more{text-shadow:0 1px 0 #ffffff22}
.dgnb-name{font-size:clamp(1.375rem,1.8vw,1.625rem);line-height:1.2;font-weight:700;letter-spacing:-.02em}
.dgnb-name sup{font-size:.6em;vertical-align:top;line-height:1.5;margin-left:3px}
.dgnb-value{display:flex;align-items:baseline;gap:5px;font-size:1rem;line-height:1}
.dgnb-value strong{font-size:clamp(1.875rem,2.6vw,2.375rem);font-weight:700;letter-spacing:-.035em}
.dgnb-more{display:flex;align-items:center;gap:9px;margin-top:4px;font-size:.875rem;font-weight:600;line-height:1.3}
.dgnb-toggle{width:12px;height:12px;position:relative;display:inline-block;flex-shrink:0}
.dgnb-toggle::before,.dgnb-toggle::after{content:'';position:absolute;background:currentColor;top:5px;left:1px;width:10px;height:2px}
.dgnb-toggle::after{transform:rotate(90deg)}
.dgnb-level[open] .dgnb-toggle::after{transform:rotate(0)}
.sustainability .dgnb-level p{color:inherit;font-size:.875rem;line-height:1.65;margin:0;padding:0 24px 24px;overflow-wrap:anywhere}
.sustainability .sustainability-note{color:#aac3d7;font-size:.8125rem!important;line-height:1.75;margin-top:16px!important;max-width:1040px}
.dgnb-actions{display:flex;align-items:center;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;margin-top:24px}
.dgnb-source{font-size:.875rem;line-height:1.6;color:#c8dbea;border-bottom:1px solid #8fc9e880;padding-bottom:3px}
.dgnb-source:hover{color:#fff;border-color:#fff}
@media(max-width:850px){.sustainability-grid{grid-template-columns:1fr;gap:22px}.sustainability-mark{display:flex;align-items:center;gap:16px}.sustainability-mark svg{width:44px;height:44px;margin:0}.dgnb-level summary{padding:23px 18px 20px}.sustainability .dgnb-level p{padding:0 18px 20px}}
@media(max-width:600px){
  .dgnb-scale{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(8rem,calc((100% - 12px)/2))),1fr));gap:14px 12px;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
  .dgnb-level{--dgnb-metal:linear-gradient(120deg,#ae744e,#c88f68);background:var(--dgnb-gloss),var(--dgnb-metal);border:1px solid #ffffff66!important;border-radius:28px/50%;overflow:hidden;box-shadow:var(--dgnb-depth)}
  .dgnb-silver{--dgnb-metal:linear-gradient(120deg,#b6bec5,#c5cdd2)}
  .dgnb-gold{--dgnb-metal:linear-gradient(120deg,#b99545,#d0ae5b)}
  .dgnb-platinum{--dgnb-metal:linear-gradient(120deg,#465562,#27333f)}
  .dgnb-level summary{padding:22px 20px 20px;gap:13px}
  .dgnb-name{font-size:1.375rem}.dgnb-value strong{font-size:2rem}
  .dgnb-actions{align-items:flex-start;gap:20px}
  .dgnb-actions .button{width:100%;font-size:.875rem;padding:14px 18px}
}
@media(prefers-reduced-motion:reduce){.dgnb-level summary{transition:none}}

/* Montagearten, Detailansicht und gemeinsame Decken-/Wandkombination. */
.dgnb-platinum .dgnb-name,.dgnb-platinum .dgnb-value,.dgnb-platinum .dgnb-more{text-shadow:0 1px 2px #00000080}
.model-view-options{display:flex;flex-wrap:wrap;gap:6px;padding:16px 24px 0}
.model-view-options button,.room-zone-options button,.room-wall-options button{font-size:.875rem;line-height:1.4;min-height:44px;padding:9px 13px;border:1px solid #748b9c66;border-radius:4px;background:#ffffff08;color:#e3ebf2}
.model-view-options button[aria-pressed=true],.room-zone-options button[aria-pressed=true],.room-wall-options button[aria-pressed=true]{background:#b8cddd;color:#0b1524;border-color:#b8cddd}
.model-room-options{margin:14px 24px 0;padding:14px;border:1px solid #ffffff20;border-radius:5px;background:#ffffff05}
.model-room-options p{font-size:.875rem;color:#c8d8e3;line-height:1.6}
.room-wall-options,.room-zone-options{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.room-zone-options{padding-top:11px;margin-top:12px;border-top:1px solid #ffffff18}
.profiles-dot{background:#99a9b3}
.model-detail p,.model-controls .layer-toggles button,.model-actions button,.model-top p span,.model-instructions,.model-format{font-size:.875rem}
.system-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:0}
.system-tab{border:1px solid #c4cdd5;padding:12px 8px;line-height:1.5;border-radius:4px;background:#ffffff80;font-size:.875rem;overflow-wrap:anywhere;hyphens:auto;min-height:48px}
.system-tab[aria-selected=true]{border-color:var(--navy);background:var(--navy);color:#fff}
.model-card[data-view=raum] .model-stage{height:425px}
.model-format strong{white-space:normal;text-align:right}
.model-view-options button:hover,.room-zone-options button:hover,.room-wall-options button:hover{border-color:#b8cddd}
#model-profiles{min-height:44px}
@media(max-width:1100px){.model-view-options{padding-inline:20px}.model-room-options{margin-inline:20px}}
@media(max-width:850px){.model-view-options{padding-inline:24px}.model-room-options{margin-inline:24px}.model-card[data-view=raum] .model-stage{height:445px}}
@media(max-width:600px){.model-view-options{padding-inline:18px}.model-room-options{margin-inline:18px;padding:12px}.model-card[data-view=raum] .model-stage{height:350px}.model-view-options button{flex:1}.system-tabs{grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr))}.model-actions{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}.model-actions #model-panels{grid-column:auto}.layer-toggles button[data-layer=profiles]{grid-column:1/-1}}

.field label.planning-support{display:flex;gap:10px;align-items:center;font-weight:400;line-height:1.5}.field .planning-support input{width:18px;height:18px;min-height:18px;margin:0;padding:0;flex-shrink:0;accent-color:var(--navy)}

/* Breite Arbeitsfläche: Systeminformationen oben, 16:9-Modell darunter. */
.systems-grid{grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.systems-content{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:32px 6%;max-width:none;width:100%;align-items:start}
.systems-intro .eyebrow{margin-bottom:18px}
.systems-intro h2{font-size:clamp(2rem,3.2vw,3rem)}
.systems-intro .systems-lead{font-size:1rem;max-width:38ch;margin-top:20px}
.systems-selection{min-width:0}
.systems-selection .system-tabs{margin-top:0}
.systems-selection .system-panel{min-height:0;padding-top:20px}
.systems-selection .system-panel p{font-size:1rem;max-width:70ch}
.systems-selection .check-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 18px;margin-top:17px}
.systems-selection .check-list li{margin:0;line-height:1.7}
.systems-selection>.text-link{margin-top:18px;color:var(--navy)}
.systems-grid .model-card{width:100%;max-width:none}
.model-card .model-stage,.model-card[data-view=raum] .model-stage{width:100%;height:auto;aspect-ratio:16/9}
.model-toolbar{display:flex;justify-content:space-between;align-items:start;gap:12px;flex-wrap:wrap;padding:16px 24px 0}
.model-toolbar .model-view-options{padding:0}
.model-toolbar .model-config{padding:0;gap:12px}
.model-room-options{margin-top:16px}
.model-control-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px 40px}
.model-spread-control{min-width:0}
.model-control-row .model-actions{margin-top:0;display:flex;flex-wrap:wrap}
.model-controls .layer-toggles{margin-bottom:24px}
.model-controls .model-detail p{max-width:90ch}
@media(max-width:850px){
  .systems-content{grid-template-columns:minmax(0,1fr);gap:24px}
  .systems-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-items:start}
  .systems-intro .eyebrow{grid-column:1/-1}
  .systems-intro .systems-lead{margin-top:0;max-width:none}
  .model-control-row{grid-template-columns:minmax(0,1fr);gap:18px}
}
@media(max-width:600px){
  .systems-grid{gap:24px}
  .systems-intro{display:block}
  .systems-intro .systems-lead{margin-top:18px}
  .systems-selection .check-list{grid-template-columns:minmax(0,1fr);gap:7px}
  .model-toolbar{padding-inline:18px;gap:12px}
  .model-toolbar .model-view-options,.model-toolbar .model-config{width:100%}
  .model-control-row .model-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}
  .model-control-row .model-actions button{width:100%}
}

/* Metalloberfläche als Bild; Stufen, Zahlen und Details bleiben native Elemente. */
.dgnb-scale{--dgnb-head-height:14rem;--dgnb-text-shade:linear-gradient(180deg,transparent 16%,#07121c80 20%,#07121c80 31%,transparent 45%);position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:start;padding:0 2.8%;border:0;border-radius:0;overflow:visible;background:none;box-shadow:none}
.dgnb-pipe-visual{position:absolute;inset:0 0 auto;height:var(--dgnb-head-height);background:url('assets/dgnb-metal-pipe.webp') center/100% 100% no-repeat;pointer-events:none;filter:drop-shadow(0 16px 15px #00000055);overflow:hidden}
.dgnb-pipe-visual::before{content:'';position:absolute;inset:0;background:var(--dgnb-text-shade);pointer-events:none}
.dgnb-pipe-visual::after{content:'';position:absolute;inset:12% 3% 13%;border-radius:20px;background:linear-gradient(108deg,transparent 39%,#ffffff00 44%,#ffffff0d 48%,#ffffff17 50%,#ffffff00 55%,transparent 61%);transform:translateX(-110%);animation:dgnb-reflection 14s ease-in-out infinite;pointer-events:none}
.dgnb-level,.dgnb-silver,.dgnb-gold,.dgnb-platinum{position:relative;min-width:0;color:#fff;border:0!important;border-radius:0;background:none;box-shadow:none;overflow:visible}
.dgnb-level+.dgnb-level{border-left:0}
.dgnb-level summary{height:var(--dgnb-head-height);min-height:var(--dgnb-head-height);padding:28px 12px;gap:12px;align-items:center;justify-content:center;text-align:center;background:none;border-radius:0;transition:color .2s}
.dgnb-level summary:hover,.dgnb-level[open] summary{background:none}
.dgnb-level summary:focus-visible{outline:3px solid #b3d68e;outline-offset:-12px;background:none}
.dgnb-heading{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
.dgnb-leaf{width:29px;height:29px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px #00000055)}
.dgnb-name{font-size:clamp(1.25rem,1.8vw,1.625rem);line-height:1.2;letter-spacing:-.025em;overflow-wrap:anywhere}
.dgnb-name,.dgnb-value,.dgnb-more,.dgnb-platinum .dgnb-name,.dgnb-platinum .dgnb-value,.dgnb-platinum .dgnb-more{text-shadow:0 1px 3px #000000aa}
.dgnb-value{justify-content:center;gap:6px;font-size:1rem;line-height:1.2}
.dgnb-value strong{font-size:clamp(2rem,3vw,2.75rem);line-height:1;letter-spacing:-.025em}
.dgnb-more{justify-content:center;gap:12px;margin-top:0;min-height:44px;padding:9px 17px;line-height:1.4;color:#fff;border:1px solid #ffffff38;border-radius:999px;background:#07121cd9;box-shadow:inset 0 1px 0 #ffffff15,0 2px 5px #00000026;transition:background .2s,border-color .2s}
.dgnb-level summary:hover .dgnb-more,.dgnb-level[open] .dgnb-more{background:#142a3a;border-color:#ffffff8c}
.sustainability .dgnb-level p{margin:12px 7px 0;padding:18px;color:#dbe6ef;font-size:.875rem;line-height:1.75;border:1px solid #ffffff26;border-radius:5px;background:#0a1620}
.sustainability .sustainability-note{margin-top:20px!important}
@keyframes dgnb-reflection{0%,15%{transform:translateX(-110%)}45%,100%{transform:translateX(110%)}}
@media(max-width:64rem){
  .dgnb-scale{--dgnb-head-height:13rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(10rem,calc((100% - 16px)/2))),1fr));gap:18px 16px;padding:0}
  .dgnb-pipe-visual{display:none}
  .dgnb-level{--dgnb-position:0%;--dgnb-metal:none}
  .dgnb-silver{--dgnb-position:33.3333%}.dgnb-gold{--dgnb-position:66.6667%}.dgnb-platinum{--dgnb-position:100%}
  .dgnb-level summary{padding:25px 12px;border-radius:20px/45%;box-shadow:0 8px 18px #00000030;overflow:hidden;gap:12px}
  .dgnb-level summary,.dgnb-level summary:hover,.dgnb-level[open] summary,.dgnb-level summary:focus-visible{background-image:var(--dgnb-text-shade),url('assets/dgnb-metal-pipe.webp');background-position:center,var(--dgnb-position) center;background-size:100% 100%,400% 100%;background-repeat:no-repeat}
  .dgnb-level summary:focus-visible{outline-offset:-7px}
  .dgnb-heading{gap:7px}.dgnb-leaf{width:24px;height:24px}
  .dgnb-name{font-size:1.25rem}.dgnb-value strong{font-size:2.25rem}
  .sustainability .dgnb-level p{margin-inline:0}
}
@media(prefers-reduced-motion:reduce){.dgnb-pipe-visual::after{animation:none;display:none}.dgnb-more,.dgnb-level summary{transition:none}}

/* Ruhige, thematische Bewegung der Schutz- und Nachhaltigkeitssymbole. */
.heat-icon path:last-child{transform-box:fill-box;transform-origin:50% 100%;animation:heat-rise 3.6s ease-in-out infinite;stroke-width:3.4}
.sound-icon path{transform-box:fill-box;transform-origin:center;animation:sound-wave 2.4s ease-in-out infinite}
.sound-icon path:nth-child(2){animation-delay:-.4s}.sound-icon path:nth-child(3){animation-delay:-.8s}.sound-icon path:nth-child(4){animation-delay:-1.2s}.sound-icon path:nth-child(5){animation-delay:-1.6s}
.fire-icon{overflow:visible}
.fire-icon path{transform-box:fill-box;transform-origin:50% 100%;animation:flame-flicker 2.2s ease-in-out infinite}
.fire-icon path+path{animation:flame-core 1.7s ease-in-out infinite;animation-delay:-.6s;fill:#f0aa45}
.sustainability-mark svg,.dgnb-leaf{transform-origin:50% 90%;animation:leaf-sway 6s ease-in-out infinite}
.dgnb-silver .dgnb-leaf{animation-delay:-1.5s}.dgnb-gold .dgnb-leaf{animation-delay:-3s}.dgnb-platinum .dgnb-leaf{animation-delay:-4.5s}
@keyframes heat-rise{0%,100%{transform:scaleY(.65);opacity:.7}50%{transform:scaleY(1);opacity:1}}
@keyframes sound-wave{0%,100%{transform:scaleY(.65)}45%{transform:scaleY(1)}70%{transform:scaleY(.8)}}
@keyframes flame-flicker{0%,100%{transform:scale(.98,.94) rotate(-1.2deg);fill:#ef87352b}23%{transform:scale(1.025,1.04) rotate(1.4deg);fill:#ef87354a}48%{transform:scale(.99,.97) rotate(-.8deg);fill:#ef87353b}73%{transform:scale(1.02,1.02) rotate(.6deg);fill:#ef87355c}}
@keyframes flame-core{0%,100%{transform:scale(.9,.9) rotate(1deg);opacity:.82}35%{transform:scale(1.05,1.06) rotate(-2deg);opacity:1}70%{transform:scale(.96,.97) rotate(1.5deg);opacity:.9}}
@keyframes leaf-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

/* Helle Modellfläche, dunkle Bedienelemente und klar lesbare Maßangaben. */
.model-card .model-stage{background:radial-gradient(ellipse at 45% 28%,#ffffff 0%,#edf2f5 50%,#dbe4eb 100%);margin-block:16px;border-block:1px solid #ffffff20}
.model-stage .model-axis{color:#496173}
.model-stage .model-loading{color:#38566b}
.model-stage .model-spinner{border-color:#38566b33;border-top-color:#38566b}
.model-stage .model-measurement{color:#123c57;background:#fffffff2;border-color:#377d9e80;box-shadow:0 2px 6px #14283918}
.model-mounting-options{margin:16px 24px 0;display:flex;flex-wrap:wrap;gap:12px 24px}
.model-mounting-options:has(>.mounting-option:not([hidden])){padding-top:14px;border-top:1px solid #ffffff18}
.mounting-option{display:flex;align-items:center;flex-wrap:wrap;gap:9px 16px;min-width:0}
.mounting-option>span{font-size:.8125rem;color:#c8dbea;line-height:1.5}
.mounting-buttons{display:flex;flex-wrap:wrap;gap:6px}
.mounting-buttons button{font-size:.875rem;font-weight:600;line-height:1.4;min-height:44px;padding:9px 14px;border:1px solid #748b9c66;border-radius:4px;background:#ffffff08;color:#e3ebf2}
.mounting-buttons button[aria-pressed=true]{background:#b8cddd;color:#0b1524;border-color:#b8cddd}
.mounting-buttons button:hover{border-color:#b8cddd}
@media(max-width:600px){.model-mounting-options{margin-inline:18px}.mounting-option{width:100%;justify-content:space-between;gap:9px}.mounting-buttons{flex:1 1 100%}.mounting-buttons button{flex:1}}
@media(prefers-reduced-motion:reduce){.heat-icon path,.sound-icon path,.fire-icon path,.sustainability-mark svg,.dgnb-leaf{animation:none}}