/* Panelo v4: bestehende Metallseite verfeinern, Bewegung und Gerät erhalten. */
:root{--v4-rail:max(1rem,calc((100% - 1200px)/2))}

/* Die vorhandene Aufklappbühne wird als zentraler Produktmoment gesetzt. */

/* Auf der Startseite führt die dunkle Bühne auch die bestehende Kopfzeile fort. */

/* Nach der Bühne folgt eine ruhige, einheitliche Lesebreite. */
.sicher,.szenen,.flaeche,.masse,.anschluss,.wege,.fragen,.brief{padding-inline:var(--v4-rail)}
.sicher ul{max-width:1200px;margin-inline:auto}
.sicher ul{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.sicher li>span{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.szenen,.flaeche,.fragen{column-gap:clamp(2.5rem,5vw,4.5rem)}
.szenen{padding-block:clamp(4.5rem,8vw,7rem)}
.szenen-titel{max-width:11ch;font-size:clamp(2.25rem,3.15vw,2.75rem);line-height:1.02}
.szenen-bild{top:max(calc(var(--nav-h) + 24px),calc(50dvh + var(--nav-h)/2 - min(190px,15vw)))}
.szenen-text article{padding-left:clamp(1rem,2vw,1.5rem)}
.szenen-text article h3{position:relative;max-width:14ch;margin-bottom:1rem;font-size:clamp(2.25rem,3.15vw,2.75rem);line-height:1.02;letter-spacing:-.04em}
.szenen-text article h3::before{content:"";position:absolute;top:.08em;bottom:.08em;left:calc(-1 * clamp(1rem,2vw,1.5rem));width:2px;background:var(--rauch)}
.szenen-text article.aktiv h3::before{background:var(--blau)}
.szenen-text article.aktiv h3{color:var(--text)}
.szenen-text article p{max-width:34ch;font-size:clamp(1.1rem,1.5vw,1.25rem);line-height:1.65}
.flaeche{padding-block:clamp(4.5rem,8vw,7rem);border-block:1px solid var(--rauch)}
.masse{padding-block:clamp(4.5rem,8vw,6.5rem)}
.anschluss{padding-block:clamp(4.5rem,8vw,6.5rem)}
.wege{padding-block:clamp(4.5rem,8vw,6.5rem);border-top:1px solid var(--rauch)}

/* Die Folgeabschnitte lesen sich als eine zusammenhängende Produktstrecke. */
.flaeche h2,.masse h2,.anschluss h2,.wege>h2,.fragen>div>h2,.kauf h2,.brief h2,
.p-daten h2,.p-karton h2,.p-zubehoer h2{max-width:19ch;font-size:clamp(2rem,3vw,2.65rem);line-height:1.06}
.flaeche-text>p,.masse-notiz,.anschluss>p,.fragen details p,.kauf-zusatz,.brief>p,
.p-daten-kopf p,.p-masse p,.p-karton p{max-width:36ch;line-height:1.65}
.flaeche-text>.quelle,.masse-notiz,.p-daten-kopf p,.p-masse p{font-size:.94rem}
.wahl{margin-top:2rem}.anschluss>h2,.wege>h2{margin-bottom:1.5rem}

/* Bestehende Informationsflächen erhalten nur einen feinen Rahmen und Rhythmus. */
.werte{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:0;border-top:1px solid color-mix(in srgb,var(--dunkel-text) 20%,transparent)}
.werte>div{padding:1rem 1.25rem 1rem 0;border-bottom:1px solid color-mix(in srgb,var(--dunkel-text) 20%,transparent)}
.werte>div+div{padding-left:1.25rem}.werte dd{overflow-wrap:anywhere;hyphens:auto}
.werte dt{letter-spacing:.02em;text-transform:uppercase}
.werte dd{font-size:clamp(1.2rem,2vw,1.65rem);line-height:1.2}
.masse img{margin:2rem 0;border:1px solid color-mix(in srgb,var(--dunkel-text) 16%,transparent)}
.tabelle{border:1px solid var(--rauch);box-shadow:0 12px 28px -24px var(--schatten)}
.anschluss table{max-width:none}.anschluss th,.anschluss td{padding:1.1rem 1.25rem}
.fragen{padding-bottom:clamp(4.5rem,8vw,6.5rem)}
.fragen details:first-child{border-top-color:var(--rauch)}
.fragen summary{min-height:60px}
.fragen>div:first-child{padding-top:.3rem}.fragen .link-tipp{color:var(--leise)}

/* Wegweiser und Kaufabschluss nutzen dieselbe zurückhaltende Kante. */
.wege ul{margin-top:2.4rem}.wege a{border:1px solid var(--rauch);box-shadow:0 14px 30px -28px var(--schatten)}
.wege li:first-child a{border-color:var(--dunkel)}
.wege h3{font-size:1.45rem}.wege p{max-width:30ch;line-height:1.55}
.kauf{width:min(1200px,calc(100% - 2 * var(--v4-rail)));margin-inline:auto;box-shadow:0 18px 42px -34px var(--schatten)}
.kauf img{border:1px solid var(--rauch)}
.kauf .knopf,.p-kauf .knopf{max-width:100%;white-space:normal;text-align:center}
.kauf-text,.p-kauf,.brief,.fuss{overflow-wrap:anywhere;hyphens:auto}
.brief{max-width:800px;margin-inline:auto;padding:clamp(4rem,7vw,5.5rem) 1.5rem;text-align:center}
.brief>h2,.brief>p,.brief-form,.brief-form .hilfe{max-width:640px;margin-inline:auto}.brief-form label{text-align:left}
.brief-form>div{max-width:640px;margin-inline:auto}.brief-form input{box-shadow:0 8px 20px -22px var(--schatten)}

/* Produktseite: dieselbe Rail, ohne Struktur oder Reihenfolge zu ändern. */
.p-kopf,.p-daten,.p-masse,.p-karton,.p-zubehoer{padding-inline:var(--v4-rail)}
.p-kopf{max-width:none;margin-inline:0;padding-bottom:clamp(3.5rem,7vw,5.5rem)}
.p-haupt{border:1px solid var(--rauch);box-shadow:0 18px 42px -34px var(--schatten)}
.p-leiste{padding-bottom:.35rem}.p-leiste button{background:var(--flaeche-2)}
.p-kauf{align-self:start}.p-kauf .knopf{box-shadow:0 12px 24px -18px var(--schatten)}
.p-kauf h1{font-size:clamp(2.35rem,3.3vw,3.1rem);line-height:1.03}
.p-kauf>p:first-of-type{max-width:34ch;font-size:1.08rem;line-height:1.6}
.p-daten{border-block:1px solid var(--rauch)}
.p-gruppen{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem}
.p-gruppe{border:1px solid var(--rauch);box-shadow:0 12px 28px -26px var(--schatten)}
.p-gruppe h3{font-size:1.35rem}.p-gruppe dd{line-height:1.45}
.p-masse{max-width:none;margin-inline:0}.p-masse img{border:1px solid var(--rauch)}
.p-karton{max-width:none;margin-inline:0;padding-bottom:clamp(3.5rem,7vw,5.5rem)}
.p-zubehoer{max-width:none;margin-inline:0}

/* Der Abschluss trägt die gleiche, unaufgeregte Struktur. */
.fuss{padding:3.5rem var(--v4-rail) 5rem;margin-top:0;background:var(--flaeche-2)}
.fuss-raster{max-width:1200px;margin-inline:auto}.fuss>.klein{max-width:1200px;margin-inline:auto}
.fuss-raster>*{min-width:0}.fuss a{max-width:100%;overflow-wrap:anywhere;hyphens:auto}

/* Lange deutsche Wörter und Formfelder bleiben in ihrer tatsächlichen Spalte. */
.sicher,.szenen,.flaeche,.masse,.anschluss,.wege,.fragen,.kauf,.brief,
.p-kopf,.p-daten,.p-masse,.p-anschluss,.p-karton,.p-zubehoer{hyphens:auto;overflow-wrap:anywhere}
.brief-form input{min-width:0;max-width:100%}
.brief-form .knopf{max-width:100%;white-space:normal;padding-block:.5rem}
.liste-haken li>span{min-width:0}
.kaufleiste{flex-wrap:wrap;border-radius:24px}
.kaufleiste .knopf{flex:1 1 auto;max-width:100%;white-space:normal;text-align:center}

/* Der vorhandene Menümodus erhält am skalierenden Desktop früher Raum. */
.nav{gap:clamp(8px,2vw,24px);padding-inline:clamp(16px,4vw,48px)}
@media (max-width:1100px){
  .nav>nav{display:none}.menue{display:block}.korb{margin-left:auto}
  .korb span:not(.korb-zahl){display:none}.korb{width:44px;padding:0;justify-content:center}
  .korb .korb-zahl{position:absolute;top:-4px;right:-6px}
}

@media (max-width:900px){
  .szenen-titel,.szenen-text article h3{font-size:clamp(1.9rem,8.5vw,2.15rem)}
  .szenen-text article{padding-left:1rem}
  .szenen-text article h3::before{left:-1rem}
  .szenen-text article p{font-size:1.05rem}
  .flaeche h2,.masse h2,.anschluss h2,.wege>h2,.fragen>div>h2,.kauf h2,.brief h2,
  .p-daten h2,.p-karton h2,.p-zubehoer h2{font-size:clamp(1.8rem,7.5vw,2.15rem)}
  .szenen,.flaeche,.fragen{row-gap:2.5rem}
  .werte>div{padding:1rem 0}.werte>div+div{padding-left:0}
  .anschluss th,.anschluss td{padding:.9rem .75rem}
  .p-kopf{padding-top:calc(var(--nav-h) + 1.5rem)}
  .p-karton{row-gap:3rem}.brief{text-align:left}.brief>h2,.brief>p,.brief-form,.brief-form .hilfe{margin-inline:0}
}

@media (min-width:901px) and (max-height:700px){
}