/* Panelo v5: ruhigere, hochwertigere Folgeabschnitte. Keine Monospace-Schrift mehr:
   Zahlen in Geist mit Tabellenziffern. */
:root{--mono:"Geist",system-ui,sans-serif}
.preis,.h-preis,.kaufleiste span,.summe-box dd{font-variant-numeric:tabular-nums}

/* ---------- Flächenrechner: gezeichnete Geräte auf dunkler Studiofläche ---------- */
.flaeche{background:var(--grund)}
.flaeche h2{max-width:20ch;hyphens:manual}
.flaeche,.masse,.a5,.w5,.brief{hyphens:manual}
.wahl span{font-family:var(--sans);font-weight:500;font-variant-numeric:tabular-nums;background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--rauch);transition:background .25s,color .25s,box-shadow .25s}
.wahl input:checked+span{box-shadow:none}
.flaeche #wahl-modell{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1rem;max-width:1200px}
.flaeche #wahl-modell label{display:flex;min-width:0}
.flaeche #wahl-modell label>span{display:flex;width:100%;height:64px;box-sizing:border-box;align-items:center;justify-content:center;text-align:center;white-space:normal;padding:.5rem;font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1.2}
.plan{padding:clamp(1.5rem,3.5vw,3rem) clamp(1rem,3vw,2.5rem) clamp(1rem,2.5vw,2rem);border-radius:calc(var(--radius) * 1.8);overflow:hidden;
  background:radial-gradient(ellipse 70% 65% at 50% 40%,#1A1F25 0%,#07090B 78%);box-shadow:0 40px 70px -46px rgba(0,0,0,.7)}
#plan .rahmen{fill:#1F2328;stroke:#3A4148;stroke-width:1.5}
#plan .basis{fill:url(#plan-alu)}
#plan text{fill:#AEB6BF;font:500 26px var(--sans);letter-spacing:-.01em}
.flaeche .quelle{font-size:.9rem;color:var(--leise)}

/* ---------- Maße: eigene Maßzeichnung in der Seitenschrift, große leichte Zahlen ---------- */
.m5{background:var(--flaeche);color:var(--text)}
.m5 h2{max-width:18ch}
.m5-zeichnung{max-width:1200px;margin:clamp(2.5rem,5vw,4rem) auto clamp(2.5rem,5vw,4.5rem)}
.m5-zeichnung svg{display:block;width:100%;height:auto;overflow:visible;color:var(--blau)}
.m5-zeichnung img{display:block;width:100%;height:auto;background:transparent}
.m5-geraet rect{fill:#2A2F35}
.m5-geraet .m5-glas{fill:url(#m5-glas)}
.m5-geraet .m5-ruecken{fill:#3A4047}
.m5-staender{fill:none;stroke:#2A2F35;stroke-width:7;stroke-linecap:round}
.m5-mass path{fill:none;stroke:currentColor;stroke-width:1.5}
.m5-mass .m5-hilf{stroke:var(--rauch);stroke-width:1.5}
.m5-mass .m5-innen{stroke-dasharray:6 6}
.m5-text text{fill:var(--text);font:500 21px var(--sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.m5-text .m5-unter{fill:var(--leise);font-size:19px}
.m5-werte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1200px;margin:0 auto;padding:0}
.m5-tafel>.m5-werte{grid-template-columns:repeat(4,minmax(0,1fr))}
.m5-werte>div{display:flex;flex-direction:column-reverse;gap:.5rem;padding:.25rem clamp(1rem,2.5vw,2rem)}
.m5-werte>div+div{border-left:1px solid var(--rauch)}
.m5-werte>div:first-child{padding-left:0}
.m5-werte dt{font-size:.95rem;color:var(--leise)}
.m5-werte dd{margin:0;display:flex;align-items:baseline;gap:.35rem;white-space:nowrap}
.m5-zahl{font-size:clamp(2rem,3.4vw,3.1rem);font-weight:300;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.m5-dd-mass{display:block!important;white-space:normal!important}
.m5-zahl--mass{display:block;font-size:clamp(.8rem,1.35vw,1.25rem);line-height:1.08;letter-spacing:-.055em;white-space:nowrap;font-variant-numeric:tabular-nums}
.m5-einheit{font-size:clamp(1rem,1.4vw,1.25rem);font-weight:500;color:var(--leise)}
.m5-tafel .m5-werte dd,.m5-tafel .m5-werte dd.m5-dd-mass{display:flex!important;align-items:baseline;gap:.35rem;white-space:nowrap!important;min-width:0}
.m5-tafel .m5-werte dd .m5-zahl,.m5-tafel .m5-werte dd .m5-zahl--mass,.m5-tafel .m5-werte dd .m5-einheit{display:inline;font-size:clamp(1rem,1.65vw,1.35rem);font-weight:400;line-height:1.1;letter-spacing:-.035em;white-space:nowrap}
.m5 .masse-notiz{max-width:1200px;margin:2.5rem auto 0;color:var(--leise)!important}
@media (max-width:900px){
  .m5-zeichnung{overflow-x:auto;margin-inline:-1rem;padding:0 1rem}
  .m5-zeichnung svg{min-width:640px}
  .m5-zeichnung img{min-width:640px}
  .m5-werte{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.75rem}
  .m5-werte>div:nth-child(3){padding-left:0;border-left:0}
}

/* ---------- Anschlüsse: zwei Karten statt Tabelle ---------- */
.a5 h2{max-width:14ch}
.a5-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:1200px;margin:2.5rem auto 0}
.a5-karte{padding:clamp(1.6rem,3vw,2.5rem);border-radius:calc(var(--radius) * 1.6);background:var(--flaeche);box-shadow:0 24px 48px -36px var(--schatten)}
.a5-weg{margin:0 0 .75rem;font-size:clamp(2.4rem,4vw,3.5rem);font-weight:600;line-height:1;letter-spacing:-.05em;color:var(--blau)}
.a5-karte h3{margin:0 0 1.75rem;font-size:clamp(1.3rem,1.8vw,1.6rem);letter-spacing:-.025em}
.a5-karte dl{margin:0;display:grid;gap:0}
.a5-karte dl>div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1rem;padding:.9rem 0;border-top:1px solid var(--rauch)}
.a5-karte dt{color:var(--leise)}
.a5-karte dd{margin:0}
.a5-hinweis{font-weight:600;color:var(--blau)}
.a5 .a5-strom{max-width:1200px;display:flex;align-items:center;gap:.75rem;max-width:1200px;margin:1rem auto 0;padding:1.1rem 1.4rem;border-radius:var(--radius);background:var(--flaeche-2);color:var(--leise)}
.a5-strom .icon{flex:none;font-size:1.35rem;color:var(--text)}

/* ---------- Wegweiser: ruhige Zeilen mit Pfeil ---------- */
.w5{border-top:0!important}
.w5 h2{margin-bottom:1.5rem!important}
.w5-liste{list-style:none;max-width:1200px;margin:0!important;padding:0;display:block!important;border-top:1px solid var(--rauch)}
.w5-liste li{border-bottom:1px solid var(--rauch)}
.w5-liste a{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;align-items:center;gap:1.5rem;min-height:0!important;padding:1.6rem .25rem!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;text-decoration:none;transition:padding .35s cubic-bezier(.16,1,.3,1)}
.w5-liste a,.w5-liste li:first-child a{color:var(--text)!important}
.w5-titel{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:600;letter-spacing:-.035em;line-height:1.1}
.w5-text{color:var(--leise)}
.w5-pfeil{display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:999px;background:var(--flaeche);color:var(--blau);font-size:1.15rem;transition:background .3s,color .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.w5-liste a:hover{padding-left:.9rem!important}
.w5-liste a:hover .w5-pfeil{background:var(--blau);color:#fff;transform:translateX(4px)}

@media (max-width:900px){
  .a5-karten{grid-template-columns:minmax(0,1fr)}
  .a5-karte dl>div{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .w5-liste a{grid-template-columns:minmax(0,1fr) auto;gap:.4rem 1rem}
  .w5-text{grid-column:1;grid-row:2;font-size:.95rem}
  .w5-pfeil{grid-column:2;grid-row:1/3}
}

/* ---------- Newsletter: Karte mit großer Zahl, Knopf im Feld ---------- */
.b5{max-width:none!important;padding:clamp(3.5rem,7vw,6rem) var(--v4-rail,1rem)!important;text-align:center!important}
.b5-karte{position:relative;overflow:hidden;max-width:880px;margin:0 auto;padding:clamp(2.5rem,5vw,4rem) clamp(1.25rem,5vw,4rem);border-radius:calc(var(--radius) * 2);
  background:radial-gradient(ellipse 60% 70% at 50% 0%,var(--blau-hell) 0%,transparent 70%),var(--flaeche);box-shadow:0 40px 70px -50px var(--schatten)}
.b5-zahl{margin:0 0 .5rem;font-size:clamp(4.5rem,11vw,8rem);font-weight:300;line-height:.9;letter-spacing:-.07em;color:var(--blau)}
.b5 h2{max-width:none!important;margin:0 auto .75rem!important;font-size:clamp(1.6rem,2.6vw,2.2rem)!important}
.b5-text{max-width:34ch!important;margin:0 auto!important;color:var(--leise)}
.b5 .brief-form{max-width:520px!important;margin:2rem auto 0!important}
.b5 .b5-feld{position:relative;display:block!important;max-width:520px;margin:0 auto}
.b5 .b5-feld input{width:100%;min-height:60px;padding:0 10.5rem 0 1.5rem;border:1px solid var(--rauch);border-radius:999px;background:var(--grund);font-size:1.05rem;box-shadow:none!important;transition:border-color .2s,background .2s}
.b5 .b5-feld input:focus{background:var(--flaeche);border-color:var(--blau);outline:none}
.b5 .b5-feld input:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}
.b5 .b5-feld .knopf{position:absolute;right:6px;top:6px;bottom:6px;min-height:0;padding:0 1.5rem}
.b5 .hilfe{margin-top:1rem;font-size:.9rem;text-align:center}
@media (max-width:900px){
  .b5{text-align:center!important}
  .b5 .b5-feld input{padding-right:1.5rem}
  .b5 .b5-feld .knopf{position:static;width:100%;min-height:52px;margin-top:.6rem}
}

/* ---------- Über uns: großer Einstieg, breites Bild, ruhige Zeilen ---------- */
.u5{max-width:1200px;margin:0 auto;padding-top:calc(var(--nav-h) + clamp(2rem,5vw,4rem))!important;hyphens:manual}
.u5-kopf{max-width:52rem;margin:clamp(1.5rem,4vw,3rem) 0 clamp(2rem,4vw,3.5rem)}
.u5-kopf h1{margin:0 0 1.25rem;font-size:clamp(3rem,7vw,6rem);line-height:.95;letter-spacing:-.06em}
.u5-kopf p{margin:0;max-width:30ch;font-size:clamp(1.35rem,2.2vw,1.9rem);font-weight:500;line-height:1.3;letter-spacing:-.025em;color:var(--leise)}
.u5-bild{width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;object-position:50% 45%;border-radius:calc(var(--radius) * 1.8);box-shadow:0 40px 70px -50px var(--schatten)}
.u5-bildhinweis{margin:.75rem 0 0;font-size:.85rem;color:var(--leise)}
.u5-zeilen{margin-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--rauch)}
.u5-zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(1rem,4vw,4rem);padding:clamp(1.75rem,3.5vw,2.75rem) 0;border-bottom:1px solid var(--rauch)}
.u5-zeile h2{margin:0;font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:-.035em;line-height:1.15}
.u5-zeile p{margin:0 0 .75rem;max-width:56ch;font-size:1.1rem;line-height:1.65;color:var(--leise)}
.u5-zeile p:last-child{margin-bottom:0}
.u5-liste{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.u5-liste li{display:flex;gap:.8rem;align-items:flex-start;font-size:1.1rem;line-height:1.55;color:var(--leise)}
.u5-liste .icon{flex:none;margin-top:.2rem;font-size:1.2rem;color:var(--blau)}
.u5-weiter{margin:clamp(2rem,4vw,3rem) 0 0}
@media (max-width:900px){
  .u5-zeile{grid-template-columns:minmax(0,1fr)}
  .u5-bild{aspect-ratio:4/3}
}

/* ---------- Häufige Fragen: große Zeilen wie zuvor der Wegweiser ---------- */
.fragen{display:block!important;max-width:none;padding-top:clamp(4.5rem,8vw,6.5rem)!important;hyphens:manual}
.fragen>div:first-child{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;max-width:1200px;margin:0 auto 1.5rem;padding-top:0!important}
.fragen>div:first-child h2{margin:0;max-width:none!important}
.fragen>div:first-child p{margin:0}
.fragen .link-tipp{color:var(--blau)!important;font-weight:500}
.fragen-liste{max-width:1200px;margin:0 auto;border-top:1px solid var(--rauch)}
.fragen details{border-bottom:1px solid var(--rauch)}
.fragen details:first-child{border-top:0!important}
.fragen summary{min-height:0!important;padding:1.6rem .25rem!important;font-size:clamp(1.5rem,2.4vw,2.1rem)!important;font-weight:600!important;letter-spacing:-.035em;line-height:1.15;transition:padding .35s cubic-bezier(.16,1,.3,1)}
.fragen summary::after{content:""!important;flex:none;width:3rem;height:3rem;border-radius:999px;
  background:var(--flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D55F0' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/1.15rem no-repeat;
  transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .3s}
.fragen summary:hover{padding-left:.9rem!important}
.fragen summary:hover::after{background-color:var(--blau-hell)}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details p{max-width:62ch;margin:0;padding:0 .25rem 1.75rem!important;font-size:1.1rem;line-height:1.65;color:var(--leise)}

/* Flächenrechner: feste Zeilen, nur die Ziffern wechseln */
@media (min-width:901px){.flaeche{grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr)!important}}
.f5-titel{max-width:none!important;font-size:clamp(1.9rem,2.7vw,2.65rem)!important;line-height:1.08!important}
.f5-zeile{display:block;white-space:nowrap}
.f5-zahl{display:inline-grid;font-variant-numeric:tabular-nums}
.f5-zahl>span{grid-area:1/1;justify-self:end}
.f5-geist{visibility:hidden}
@media (max-width:900px){
  .f5-titel{font-size:clamp(1.8rem,8.4vw,2.2rem)!important}
  .f5-teil{display:block}
}

/* ---------- Einsatzbereiche: ausführlicher, mit Mini-Gerät als Belegung ---------- */
.szenen{hyphens:manual!important}
.szenen-text article p{max-width:38ch!important}
.s5-karte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3px;max-width:24rem;margin-top:2rem;padding:3px;border-radius:9px;background:#1E2226;box-shadow:0 22px 40px -26px rgba(29,33,37,.55)}
/* drei Displays: helles Glas in dunklem Rahmen */
.s5-karte>span:not(.s5-lap){display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;padding:.3rem;border-radius:5px;
  background:linear-gradient(160deg,#F6F8FA 0%,#E2E7EE 100%);font-size:.78rem;font-weight:500;line-height:1.2;text-align:center;color:#2C3238;transition:background .5s,color .5s}
.s5-karte>span:nth-child(2){background:linear-gradient(160deg,#E8EEFE 0%,#C9D6FB 100%);color:#1442C4}
.szenen-text article:not(.aktiv) .s5-karte>span:nth-child(2){background:linear-gradient(160deg,#F6F8FA 0%,#E2E7EE 100%);color:#2C3238}
/* Laptop darunter: Bildschirm plus flache Basis, außerhalb des Monitorrahmens */
.s5-karte .s5-lap{position:relative;grid-column:2;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;margin:14px 8% 12px;padding:.25rem;border:3px solid #2A2F35;border-radius:5px 5px 2px 2px;
  background:linear-gradient(160deg,#F6F8FA,#E2E7EE);font-size:.72rem;font-weight:500;line-height:1.2;text-align:center;color:#4A525A}
.s5-karte .s5-lap::after{content:"";position:absolute;left:-16%;right:-16%;bottom:-10px;height:6px;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#D9DDE2,#AEB4BB)}
/* Monitorrahmen nur um die Displays, nicht um den Laptop */
.s5-karte{background:none;box-shadow:none;padding:0}
.s5-karte>span:not(.s5-lap){border:3px solid #1E2226;border-radius:4px;box-shadow:0 14px 26px -18px rgba(29,33,37,.6)}
@media (max-width:900px){.s5-karte{max-width:none}}

/* ---------- Produktseite: ruhiger Kaufbereich, Datenblatt im Apple-Stil ---------- */
.p-kopf{align-items:start}
.p-haupt{border:0!important;border-radius:calc(var(--radius) * 1.8)!important;box-shadow:0 40px 70px -50px var(--schatten)!important}
.p-leiste{gap:.6rem!important;margin-top:.9rem!important}
.p-leiste button{padding:0;border:2px solid transparent!important;border-radius:12px!important;overflow:hidden;background:var(--flaeche)!important;opacity:.7;transition:opacity .25s,border-color .25s}
.p-leiste button[aria-current="true"],.p-leiste button:hover{opacity:1;border-color:var(--blau)!important}
.p-kauf{position:sticky;top:calc(var(--nav-h) + 1.5rem)}
.p-kauf h1{font-size:clamp(2.2rem,3.2vw,3rem)!important;letter-spacing:-.05em;hyphens:manual}
.p-preis{font-family:var(--sans)!important;font-weight:600!important;font-size:clamp(2rem,2.8vw,2.6rem)!important;letter-spacing:-.04em!important;font-variant-numeric:tabular-nums}
.p-zusatz{font-size:.92rem}
.p-kauf .knopf{min-height:56px;font-size:1.05rem}
.p-punkte{border-top:1px solid var(--rauch);padding-top:1.25rem!important}
.zahlarten li{background:var(--flaeche)!important;box-shadow:inset 0 0 0 1px var(--rauch)}
.p-daten{border-block:0!important}
.p-daten h2,.p-masse h2,.p-karton h2,.p-anschluss h2{font-size:clamp(2rem,3vw,2.65rem)!important;letter-spacing:-.045em}
.p-vorl{font-size:.8rem!important;font-weight:500!important;vertical-align:.5em!important}
.p-gruppen{display:block!important;max-width:1200px;margin-top:2.5rem!important;border-top:1px solid var(--rauch)}
.p-gruppe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:1rem 3rem;padding:2rem 0!important;border:0!important;border-bottom:1px solid var(--rauch)!important;border-radius:0!important;background:none!important;box-shadow:none!important}
.p-gruppe h3{margin:0!important;font-size:clamp(1.4rem,2vw,1.75rem)!important;letter-spacing:-.035em}
.p-gruppe dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2.5rem}
.p-gruppe dl>div{margin:0!important}
.p-gruppe dt{font-size:.92rem!important;color:var(--leise)}
.p-gruppe dd{margin-top:.3rem!important;font-size:1.15rem;font-weight:500;line-height:1.4;letter-spacing:-.01em}
.p-masse.m5{background:none}
.p-masse .m5-zeichnung{margin-top:2.5rem}
@media (max-width:900px){
  .p-kauf{position:static}
  .p-gruppe{grid-template-columns:minmax(0,1fr)}
  .p-gruppe dl{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Über uns: Statement, Metall-Schriftzug, nummerierte Kapitel ---------- */
.u6{max-width:1200px;margin:0 auto;padding:calc(var(--nav-h) + clamp(1.5rem,4vw,3rem)) var(--v4-rail,1rem) clamp(4rem,8vw,7rem)!important;hyphens:manual}
.u6-hinweis{max-width:40rem}
.u6-kopf{margin:clamp(2rem,5vw,4rem) 0 clamp(2.5rem,5vw,4rem)}
.u6-kopf h1{margin:0 0 1rem;font-size:1.1rem;font-weight:500;letter-spacing:0;color:var(--leise)}
.u6-lead{max-width:14ch;margin:0 0 1.75rem;font-size:clamp(3rem,7.4vw,6.5rem);font-weight:600;line-height:.98;letter-spacing:-.06em;color:var(--text)}
.u6-text{max-width:38ch;margin:0;font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.5;letter-spacing:-.015em;color:var(--leise)}
/* dunkle Fläche mit dem Schriftzug aus dem Hero */
.u6-buehne{display:grid;place-items:center;container-type:inline-size;overflow:hidden;padding:clamp(2.5rem,6vw,5rem) 1rem;border-radius:calc(var(--radius) * 2);
  background:radial-gradient(ellipse 62% 70% at 50% 60%,#1B2026 0%,#050608 75%);box-shadow:0 50px 80px -60px rgba(0,0,0,.8)}
.u6-buehne span{font:700 22cqw/.8 var(--sans);letter-spacing:-.05em;color:transparent;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(255,255,255,.14);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),linear-gradient(180deg,#F4F6F8 0%,#D5DADF 30%,#99A1AA 58%,#555C64 80%,#2A2F35 100%)}
.u6-kapitel{list-style:none;margin:clamp(3.5rem,7vw,6rem) 0 0;padding:0;border-top:1px solid var(--rauch)}
.u6-kapitel>li{display:grid;grid-template-columns:5rem minmax(0,1fr) minmax(0,1.5fr);gap:1rem clamp(1.5rem,4vw,4rem);padding:clamp(2rem,4vw,3.25rem) 0;border-bottom:1px solid var(--rauch)}
.u6-nr{font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:300;letter-spacing:-.04em;color:var(--blau);font-variant-numeric:tabular-nums}
.u6-kapitel h2{margin:0;font-size:clamp(1.5rem,2.3vw,2rem);letter-spacing:-.04em;line-height:1.12}
.u6-kapitel p{max-width:52ch;margin:0 0 .9rem;font-size:1.12rem;line-height:1.65;color:var(--leise)}
.u6-kapitel p:last-child{margin-bottom:0}
.u6-platz{padding:.9rem 1.1rem;border:1px dashed var(--rauch);border-radius:12px;font-size:1rem!important}
.u6-versprechen{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.u6-versprechen li{padding-left:1.1rem;border-left:2px solid var(--blau);font-size:1.12rem;line-height:1.6;color:var(--leise)}
.u6-versprechen strong{color:var(--text);font-weight:600}
.u6-schluss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:clamp(3rem,6vw,5rem);padding:clamp(2rem,4vw,3rem);border-radius:calc(var(--radius) * 2);background:var(--flaeche);box-shadow:0 40px 70px -55px var(--schatten)}
.u6-schluss h2{margin:0;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.045em}
.u6-wege{display:flex;flex-wrap:wrap;gap:.75rem}
.u6-zweit{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 1.6rem;border:1px solid var(--blau);border-radius:999px;color:var(--blau);font-weight:500;text-decoration:none;transition:background .2s,color .2s}
.u6-zweit:hover{background:var(--blau);color:#fff}
@media (max-width:900px){
  .u6-kapitel>li{grid-template-columns:minmax(0,1fr)}
  .u6-nr{font-size:1.3rem}
}

/* ---------- Kontakt: großer Einstieg, Formular als Karte, dunkle Infokarte ---------- */
.k5{max-width:1200px;margin:0 auto;padding-top:calc(var(--nav-h) + clamp(2rem,5vw,4rem))!important;hyphens:manual}
.k5-kopf{max-width:46rem!important;margin-bottom:clamp(2.5rem,5vw,4rem)!important}
.k5-kopf h1{margin:0 0 1rem;font-size:1.1rem!important;font-weight:500;letter-spacing:0!important;color:var(--leise)}
.k5-lead{margin:0 0 1.25rem!important;font-size:clamp(3rem,7vw,6rem)!important;font-weight:600;line-height:.98;letter-spacing:-.06em;color:var(--text)!important}
.k5-kopf p:last-child{max-width:40ch;font-size:clamp(1.1rem,1.5vw,1.3rem)!important;line-height:1.55}
.k5 .kontakt-raster{align-items:start}
.k5 .formular{max-width:none!important;padding:clamp(1.5rem,3.5vw,2.75rem);border-radius:calc(var(--radius) * 2);background:var(--flaeche);box-shadow:0 40px 70px -55px var(--schatten);gap:1.4rem!important}
.k5 .feld label{font-size:.95rem;color:var(--leise)}
.k5 .feld input,.k5 .feld textarea{min-height:56px!important;padding:.9rem 1.15rem!important;border:1px solid transparent!important;border-radius:14px!important;background:var(--grund)!important;font-size:1.05rem;transition:background .2s,border-color .2s,box-shadow .2s}
.k5 .feld input:focus,.k5 .feld textarea:focus{background:var(--flaeche)!important;border-color:var(--blau)!important}
.k5 .feld textarea{min-height:180px!important}
.k5 .formular .knopf{min-height:56px;padding:0 2.2rem}
.k5 .kontakt-info{position:sticky;top:calc(var(--nav-h) + 1.5rem);padding:clamp(1.5rem,3vw,2.25rem)!important;border-radius:calc(var(--radius) * 2)!important;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,#1B2026 0%,#0B0D10 80%)!important;color:#F4F6F8;box-shadow:0 40px 70px -50px rgba(0,0,0,.7)}
.k5-info-titel{margin:0 0 1.5rem;font-size:1.5rem;letter-spacing:-.03em;color:#F4F6F8}
.k5 .kontakt-info dt{color:#9AA3AC!important;font-size:.85rem!important;margin-top:1.1rem!important}
.k5 .kontakt-info dt:first-of-type{margin-top:0!important}
.k5 .kontakt-info dd{font-size:1.1rem;color:#F4F6F8}
.k5-faq{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.75rem;padding:1rem 1.1rem;border-radius:14px;background:rgba(255,255,255,.07);color:#F4F6F8;text-decoration:none;font-size:.95rem;line-height:1.4;transition:background .2s}
.k5-faq:hover{background:rgba(255,255,255,.13)}
.k5-faq .icon{flex:none;color:#7C9DFF}
@media (max-width:900px){.k5 .kontakt-info{position:static}}

/* Produktseite: Anschlüsse als vier Zeilen statt Anleitungsgrafik */
.p5-anschluss{max-width:none!important;margin:0!important;padding:clamp(3rem,6vw,5rem) var(--v4-rail,1rem)!important;hyphens:manual}
.p5-anschluss h2,.p5-anschluss-text,.p5-ports{max-width:1200px;margin-left:auto;margin-right:auto}
.p5-anschluss-text{max-width:min(1200px,52ch);margin:0 0 2.25rem;margin-right:auto;font-size:1.1rem;line-height:1.6;color:var(--leise)}
.p5-ports{width:100%;list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.p5-ports li{display:flex;flex-direction:column;gap:.35rem;padding:1.5rem;border-radius:calc(var(--radius) * 1.4);background:var(--flaeche);box-shadow:0 24px 48px -40px var(--schatten)}
.p5-anzahl{font-size:clamp(2rem,3vw,2.6rem);font-weight:300;line-height:1;letter-spacing:-.04em;color:var(--blau);font-variant-numeric:tabular-nums}
.p5-ports strong{margin-top:.6rem;font-size:1.25rem;letter-spacing:-.02em}
.p5-ports li>span:last-child{color:var(--leise);line-height:1.45}
@media (max-width:900px){.p5-anschluss .p5-ports{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.p5-anschluss .p5-ports{grid-template-columns:minmax(0,1fr)}}

/* ---------- Produktseite v6: Galerie bleibt stehen, ruhiger Kaufbereich ---------- */
.p6{max-width:1320px;margin:0 auto!important;padding:calc(var(--nav-h) + clamp(1.5rem,3vw,2.5rem)) var(--v4-rail,1rem) clamp(3rem,6vw,5rem)!important;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)!important;gap:clamp(2rem,4vw,4.5rem)!important;hyphens:manual}
.p6 .p-galerie{align-self:start}
.p6,.p6 *{hyphens:manual!important}
.p6 .p-haupt{background:radial-gradient(ellipse 70% 60% at 50% 45%,#FAFBFB 0%,#E4E7EA 100%)}
.p6 .p-leiste{grid-auto-columns:minmax(0,1fr)!important;max-width:28rem}
.p6 .p-kauf{position:static!important;padding-top:.5rem}
.p6-titel{margin:0 0 1rem!important;font-size:clamp(2.4rem,3.6vw,3.4rem)!important;line-height:1!important;letter-spacing:-.055em!important}
.p6-titel span{display:block;margin-top:.45rem;font-size:.5em;font-weight:500;letter-spacing:-.025em;color:var(--leise)}
.p6-kurz{max-width:34ch;margin:0;font-size:1.12rem!important;line-height:1.55!important}
.p6-preis{margin:2rem 0 0;padding-top:1.5rem;border-top:1px solid var(--rauch)}
.p6-preis .p-preis{margin:0 0 .4rem!important}
.p6-preis .p-zusatz{margin:0}
.p6 .p-kauf .knopf{margin:1.5rem 0 .9rem!important}
.p6-daten-link{display:inline-flex;align-items:center;min-height:44px;color:var(--blau);font-weight:500;text-decoration:none}
.p6-daten-link:hover{text-decoration:underline}
.p6-punkte{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px!important;margin:1.5rem 0 0!important;padding:0!important;border:0!important;border-radius:calc(var(--radius) * 1.4);overflow:hidden;background:var(--rauch);box-shadow:0 24px 48px -40px var(--schatten)}
.p6-punkte li{display:flex!important;flex-direction:column;gap:.5rem!important;margin:0!important;padding:1.15rem 1.2rem!important;background:var(--flaeche);font-size:.92rem;line-height:1.45;color:var(--leise)}
.p6-punkte li .icon{font-size:1.3rem;color:var(--blau)}
.p6-punkte strong{display:block;color:var(--text);font-size:1rem}
.p6-zahlarten{margin:1.25rem 0 0;font-size:.88rem;line-height:1.5;color:var(--leise)}
.p6-zahlarten span{color:var(--text);font-weight:500}
.p6-daten,.p6-daten *{hyphens:manual!important}
.p6-daten{padding-top:clamp(3rem,6vw,5rem)!important}
.p6-daten .p-daten-kopf{max-width:1200px;margin:0 auto}
.p6-daten .p-daten-kopf p{max-width:52ch;font-size:1.05rem}
.p6-vorl{color:var(--blau);font-weight:600}
.p6-daten .p-gruppen{margin-left:auto!important;margin-right:auto!important}
@media (max-width:900px){
  .p6{grid-template-columns:minmax(0,1fr)!important}
  .p6 .p-galerie{position:static}
  .p6-punkte{grid-template-columns:minmax(0,1fr)}
}

/* Galerie: weicher Bildwechsel beim Überfahren */
.p6 .p-haupt{transition:opacity .18s ease}
.p6 .p-haupt.wechselt{opacity:.25}
.p6 .p-leiste button{cursor:pointer}

/* ---------- Vorteile im Kaufbereich: ruhige Zeilen statt Kacheln ---------- */
.p7-vorteile{list-style:none;margin:1.75rem 0 0;padding:0;border-top:1px solid var(--rauch)}
.p7-vorteile li{display:flex;align-items:center;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--rauch)}
.p7-vorteile .icon{flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;padding:.6rem;border-radius:999px;background:var(--flaeche);color:var(--blau);box-sizing:border-box}
.p7-vorteile p{margin:0;display:flex;flex-direction:column;gap:.1rem;line-height:1.35}
.p7-vorteile strong{font-size:1rem;font-weight:600;color:var(--text)}
.p7-vorteile span{font-size:.9rem;color:var(--leise)}

/* ---------- Im Karton und Voraussetzungen ---------- */
.p7-karton{width:100%;max-width:1200px;margin:0 auto;padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(3.5rem,7vw,6rem);hyphens:manual}
.p7-block h2{margin:0 0 1.75rem;font-size:clamp(2rem,3vw,2.65rem);letter-spacing:-.045em}
.p7-kacheln{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.p7-kacheln li{display:flex;flex-direction:column;gap:.3rem;min-height:11rem;padding:1.4rem;border-radius:calc(var(--radius) * 1.4);background:var(--flaeche);box-shadow:0 24px 48px -40px var(--schatten)}
.p7-zahl{margin-bottom:auto;font-size:clamp(2.4rem,3.4vw,3.2rem);font-weight:300;line-height:1;letter-spacing:-.05em;color:var(--blau);font-variant-numeric:tabular-nums}
.p7-offen{color:var(--leise)}
.p7-kacheln strong{margin-top:1.25rem;font-size:1.1rem;letter-spacing:-.02em}
.p7-kacheln li>span:last-child{font-size:.9rem;line-height:1.4;color:var(--leise)}
.p7-notiz{max-width:60ch;margin:1.25rem 0 0;font-size:.95rem;color:var(--leise)}
.p7-schritte{list-style:none;margin:0;padding:0;counter-reset:s;border-top:1px solid var(--rauch)}
.p7-schritte li{counter-increment:s;display:grid;grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1.6fr);align-items:baseline;gap:1rem 2rem;padding:1.4rem 0;border-bottom:1px solid var(--rauch)}
.p7-schritte li::before{content:"0" counter(s);font-size:1.4rem;font-weight:300;letter-spacing:-.03em;color:var(--blau);font-variant-numeric:tabular-nums}
.p7-schritte strong{font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.03em}
.p7-schritte span{font-size:1.05rem;line-height:1.55;color:var(--leise)}
@media (max-width:900px){
  .p7-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p7-kacheln li{min-height:9rem}
  .p7-schritte li{grid-template-columns:2.5rem minmax(0,1fr)}
  .p7-schritte span{grid-column:2}
}

/* v8: Galerie breiter nach links, größere Vorteile, Karton als eine ruhige Leiste */
@media (min-width:901px){
  .p6{max-width:1480px!important;padding-left:clamp(1rem,2.5vw,2.5rem)!important;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr)!important}
  .p6 .p-leiste{max-width:36rem}
}
.p7-vorteile li{gap:1.15rem;padding:1.2rem 0}
.p7-vorteile .icon{width:3.1rem;height:3.1rem;padding:.75rem}
.p7-vorteile strong{font-size:1.15rem}
.p7-vorteile span{font-size:1rem}
.p8-inhalt{list-style:none;margin:0;padding:clamp(1.5rem,3vw,2.25rem) 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-radius:calc(var(--radius) * 1.8);background:var(--flaeche);box-shadow:0 30px 60px -48px var(--schatten)}
.p8-inhalt[hidden]{display:none}
.p-masse :is([data-paneloscreens-masszeichnung="pro"],[data-paneloscreens-masszeichnung="16"]){max-width:1200px;margin:clamp(2.5rem,5vw,4rem) auto}
.p-masse :is([data-paneloscreens-masszeichnung="pro"],[data-paneloscreens-masszeichnung="16"]) img{display:block;width:100%;height:auto}
.masse-pro-zusammenfassung{display:none}
.p8-inhalt li{display:flex;flex-direction:column;gap:.25rem;padding:0 clamp(1rem,2vw,1.75rem)}
.p8-inhalt li+li{border-left:1px solid var(--rauch)}
.p8-menge{margin-bottom:.6rem;font-size:.95rem;font-weight:600;color:var(--blau);font-variant-numeric:tabular-nums}
.p8-inhalt strong{font-size:1.05rem;white-space:nowrap;letter-spacing:-.02em;line-height:1.25}
.p8-inhalt li>span:last-child{font-size:.95rem;line-height:1.4;color:var(--leise)}
@media (max-width:900px){
  .p8-inhalt{grid-template-columns:minmax(0,1fr);padding:.5rem 1.25rem}
  .p8-inhalt li{display:grid;grid-template-columns:4.5rem minmax(0,1fr);column-gap:1rem;padding:1rem 0}
  .p8-inhalt li+li{border-left:0;border-top:1px solid var(--rauch)}
  .p8-menge{grid-row:1/3;margin:0}
  .p-masse :is([data-paneloscreens-masszeichnung="pro"],[data-paneloscreens-masszeichnung="16"]){overflow-x:auto;margin-inline:0;padding-bottom:.5rem}
  .p-masse :is([data-paneloscreens-masszeichnung="pro"],[data-paneloscreens-masszeichnung="16"]) img{width:900px;max-width:none}
  .masse-pro-zusammenfassung{display:block;margin:.75rem 0 0;color:var(--leise);font-size:.95rem;line-height:1.5}
}
/* Mini-Gerät v2: zusammenhängende Displayreihe mit dünnem Rahmen, Kinn, Laptop direkt davor */
.s5-karte{column-gap:0;max-width:25rem;filter:drop-shadow(0 16px 22px rgba(29,33,37,.18))}
.s5-karte>span:not(.s5-lap){border:2px solid #1E2226;border-radius:2px;box-shadow:none;font-size:.74rem}
.s5-karte>span:nth-child(1){border-radius:3px 0 0 3px;transform:perspective(500px) rotateY(9deg);transform-origin:right center}
.s5-karte>span:nth-child(3){border-radius:0 3px 3px 0;transform:perspective(500px) rotateY(-9deg);transform-origin:left center}
.s5-karte>span:nth-child(2){position:relative;border-bottom-width:7px}
.s5-karte .s5-lap{margin:10px 2% 10px;border-width:2px;border-color:#2A2F35;font-size:.7rem}
.s5-karte .s5-lap::after{left:-12%;right:-12%;bottom:-8px;height:5px}
.s5-karte{padding-inline:3%!important;box-sizing:border-box}
/* Einsatzbereiche: „Ideal für“ statt Belegungszeichnung */
.s6-fuer{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1.75rem 0 0!important;max-width:none!important}
.s6-fuer span{margin-right:.35rem;font-size:.9rem;font-weight:500;color:var(--leise)}
.s6-fuer em{padding:.4rem .85rem;border-radius:999px;background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--rauch);font-size:.9rem;font-style:normal;font-weight:500;color:var(--text);transition:background .4s,color .4s,box-shadow .4s}
.szenen-text article.aktiv .s6-fuer em{background:var(--blau-hell);box-shadow:none;color:#1442C4}
/* Schlagworte in eigener Spalte: Umbrüche stehen bündig unter dem ersten */
.s6-fuer{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:.85rem}
.s6-fuer>span:first-child{margin:0!important;line-height:2.15rem}
.s6-gruppen{display:flex;flex-wrap:wrap;gap:.5rem}
/* Schmal: Schlagworte unter „Ideal für“, damit sie nebeneinander passen */
@media(max-width:600px){.s6-fuer{grid-template-columns:minmax(0,1fr);row-gap:.5rem}.s6-fuer>span:first-child{line-height:1.4}}

/* ---------- Handy-Feinschliff ---------- */
@media (max-width:900px){
  /* Hero: Name so groß wie möglich, aber vollständig sichtbar; Gerät größer */
  .h-hero-marke,.h-hero-raum{--m:min(20.5cqw,30svh)!important}
  .h-hero-raum{--b:100cqw!important}
  /* Bühne: zugeklappt deutlich größer, Gerät etwas höher */
  .h-buehne .h-geraet{--zu-zoom:1.15}
  .h-raum{inset:calc(var(--nav-h) + 7rem) 0 9rem!important}
  /* Flächenrechner: Zahl steht am Zeilenanfang, keine Lücke davor */
  .f5-teil .f5-geist{display:none}
  .f5-teil .f5-zahl>span{justify-self:start}
  /* Maßzeichnung bleibt lesbar und lässt sich innerhalb des Bereichs verschieben. */
  .m5-zeichnung{overflow-x:auto!important;overflow-y:hidden;margin-inline:-1rem!important;padding:0 1rem!important}
  .m5-zeichnung svg,.m5-zeichnung img{min-width:640px!important}
  .m5-text text{font-size:44px!important}
  .m5-text .m5-unter{font-size:40px!important}
  .m5-mass path{stroke-width:3}
}

/* Maße: Modellwahl und Zeichnung Panelo Fold */
.m5-wahl{margin:1.6rem 0 0}
.m5-wahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1rem;max-width:1200px}
.m5-wahl label{min-width:0}
.m5-wahl label>span{width:100%;justify-content:center;text-align:center;white-space:normal;padding:.65rem 1rem}
.m5-wahl legend.sr{width:1px}
.m5-tafel[hidden]{display:none}
.m5-tafel[data-modelle="fold-fhd,fold-qhd"][hidden]{display:none}
.m5-fold svg{max-width:900px;margin:0 auto}
.m5-tafel[data-modelle="fold-fhd,fold-qhd"]{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(18rem,1fr);grid-template-areas:"figure values";gap:clamp(1.5rem,3vw,3rem);align-items:center;max-width:1440px;margin:clamp(2rem,4vw,3rem) auto 0}
.m5-tafel[data-modelle="fold-fhd,fold-qhd"]>.m5-zeichnung{grid-area:figure;width:100%;max-width:none;margin:0;min-width:0}
.m5-tafel[data-modelle="fold-fhd,fold-qhd"]>.m5-werte{grid-area:values;grid-template-columns:minmax(0,1fr);width:100%;max-width:none;row-gap:0}
.m5-tafel[data-modelle="fold-fhd,fold-qhd"]>.m5-werte>div,.m5-tafel[data-modelle="fold-fhd,fold-qhd"]>.m5-werte>div:first-child{padding:1rem 0;border-left:0;border-top:1px solid var(--rauch)}
.m5-tafel[data-modelle="fold-fhd,fold-qhd"]>.m5-werte>div:first-child{border-top:0}
@media (max-width:900px){
  .m5-tafel>.m5-werte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m5-tafel[data-modelle="fold-fhd,fold-qhd"]{grid-template-columns:minmax(0,1fr);grid-template-areas:"figure" "values"}
  .m5-tafel[data-modelle="fold-fhd,fold-qhd"]>.m5-werte{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1rem}
  .m5-tafel[data-modelle="fold-fhd,fold-qhd"]>.m5-werte>div:nth-child(3){padding-left:0;border-left:0}
  .m5-tafel[data-modelle="fold-fhd,fold-qhd"]>.m5-werte>div:nth-child(2){border-top:0}
}
@media (max-width:680px){.m5-wahl,.flaeche #wahl-modell{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.m5-tafel>.m5-werte,.m5-tafel[data-modelle="fold-fhd,fold-qhd"]>.m5-werte{grid-template-columns:minmax(0,1fr)}}
.m5-laptop rect,.m5-laptop path{fill:none;stroke:var(--leise);stroke-width:2;stroke-dasharray:8 7}
.m5-scharnier{fill:none;stroke:#6B737C;stroke-width:6;stroke-linecap:round}
.m5-offen{color:var(--leise)}
.m5-geraet .m5f-glas{fill:url(#m5f-glas-verlauf)}

/* Lesbare aktive Schlagworte im vorhandenen dunklen Farbschema. */
@media(prefers-color-scheme:dark){.szenen-text article.aktiv .s6-fuer em{color:var(--text)}}

/* ---------- Modellraster: eine Karte je Ausführung (Startseite, Kollektion, Warenkorb) ---------- */
.reihe,.bildband{padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,3rem)}
.reihe-kopf{max-width:46rem;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.reihe-kopf h2{font-size:clamp(2rem,4vw,3.25rem);font-weight:600;letter-spacing:-.045em;line-height:1.02;margin:0 0 .8rem}
.reihe-kopf p{margin:0;color:var(--leise);font-size:1.15rem}
.raster-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.raster-filter[hidden]{display:none}
.raster-filter button{min-height:44px;padding:0 1.1rem;border:1px solid var(--rauch);border-radius:999px;background:var(--flaeche);color:var(--text);font:500 .95rem var(--sans);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.raster-filter button:hover{border-color:var(--text)}
.raster-filter button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--grund)}
.raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.raster>li[hidden]{display:none}
.rk{position:relative;display:flex;flex-direction:column;height:100%;border-radius:var(--radius);background:var(--flaeche);overflow:hidden;transition:transform .25s,box-shadow .25s}
.rk:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(29,33,37,.12)}
.rk:focus-within{outline:2px solid var(--fokus);outline-offset:2px}
.rk-bild{position:relative;display:block;aspect-ratio:16/10;background:var(--flaeche-2);overflow:hidden}
.rk-bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.rk:hover .rk-bild img{transform:scale(1.04)}
.rk-marke{position:absolute;left:.6rem;bottom:.6rem;padding:.2rem .6rem;border-radius:999px;background:rgba(16,19,22,.78);color:#fff;font-size:.75rem}
.rk-text{display:flex;flex-direction:column;gap:.35rem;flex:1;padding:1.1rem 1.2rem 1.3rem}
.rk-gruppe{margin:0;font:500 .78rem var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--blau)}
.rk-text h2,.rk-text h3{margin:0;font-size:1.15rem;font-weight:600;line-height:1.2;letter-spacing:-.015em}
.rk-text h2 a,.rk-text h3 a{color:inherit;text-decoration:none;outline:0}
/* Die ganze Karte ist klickbar; der Link liegt in der Überschrift. */
.rk-text h2 a::after,.rk-text h3 a::after{content:"";position:absolute;inset:0}
.rk-werte{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.1rem;color:var(--leise);font-size:.9rem}
.rk-preis{margin:auto 0 0;padding-top:.9rem;font-size:1.35rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rk-zusatz{margin:0;color:var(--leise);font-size:.8rem}
.raster-reihe{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 4px 1rem;margin-inline:-4px}
.raster-reihe>li{flex:0 0 min(17rem,72vw);scroll-snap-align:start}
@media (max-width:1100px){.raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}
@media (max-width:520px){
  .rk-text{padding:.85rem .85rem 1rem}.rk-text h2,.rk-text h3{font-size:1rem}.rk-werte{font-size:.82rem}.rk-preis{font-size:1.15rem}
  .rk-marke{font-size:.68rem;left:.4rem;bottom:.4rem}
}
.h-hero-zeile{margin:.8rem auto 0;max-width:44ch;text-wrap:balance;color:#B7BFC7;font-size:1.1rem}

/* ---------- Bildband ---------- */
.bildband-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.bildband-zwei .bildband-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
.bildband-raster li.gross{grid-column:span 2}
.bildband-kachel{position:relative;display:block;height:100%;border-radius:var(--radius);overflow:hidden;background:var(--flaeche-2);color:#fff;text-decoration:none}
.bildband-kachel img{display:block;width:100%;height:100%;min-height:14rem;aspect-ratio:16/10;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
a.bildband-kachel:hover img{transform:scale(1.03)}
.bildband-text{position:absolute;left:0;right:0;bottom:0;display:grid;gap:.1rem;padding:3rem 1.2rem 1rem;background:linear-gradient(180deg,transparent,rgba(8,10,12,.78))}
.bildband-text strong{font-size:1.15rem;font-weight:600;letter-spacing:-.015em}
.bildband-text span{font-size:.92rem;color:#D9DEE3}
.bildband .hinweis-text{margin:1rem 0 0}
@media (max-width:820px){
  .bildband-raster,.bildband-zwei .bildband-raster{grid-template-columns:minmax(0,1fr)}
  .bildband-raster li.gross{grid-column:auto}
}

/* ---------- Warenkorbseite (eigene Kasse) ---------- */
.korb-seite{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.korb-seite[hidden],.korb-leer[hidden]{display:none}
.korb-seite .summe-box{position:sticky;top:calc(var(--nav-h) + 1rem)}
.summe-box h2{margin:0 0 1rem;font-size:1.25rem;letter-spacing:-.015em}
.korb-seite .korb-liste,.lade .korb-liste{display:grid;gap:.8rem;border:0}
.korb-seite .korb-zeile,.lade .korb-zeile{grid-template-columns:168px minmax(0,1fr) auto;grid-template-areas:"bild angaben preis" "bild steuer steuer";gap:.6rem 1.2rem;align-items:start;padding:1rem;border:0;border-radius:var(--radius);background:var(--flaeche)}
.korb-bild{grid-area:bild;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--flaeche-2)}
.korb-zeile .korb-bild img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.korb-angaben{grid-area:angaben;min-width:0}
.korb-angaben h2,.korb-angaben h3{margin:0 0 .25rem;font-size:1.1rem;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.korb-angaben a{text-decoration:none}
.korb-angaben .hinweis-text{margin:0}
.korb-einzel{margin:.25rem 0 0;color:var(--leise);font-size:.9rem}
.korb-einzel:empty{display:none}
.korb-steuer{grid-area:steuer;display:flex;align-items:center;gap:.4rem;align-self:end}
.korb-steuer .menge{background:var(--grund)}
.korb-seite .korb-preis,.lade .korb-preis{grid-area:preis;margin:0;font-size:1.1rem;font-weight:600;white-space:nowrap}
/* Amtlicher Hinweis: kleine Vorschau, vollständiger Inhalt aufklappbar. */
.gewaehrleistung{margin:.75rem 0;font-size:.8rem;line-height:1.4;color:var(--leise)}
.gewaehrleistung>strong{display:block;color:var(--text)}
.gewaehrleistung-kurz{display:flex;align-items:center;gap:.75rem;margin:.4rem 0}
.gewaehrleistung-kurz a{flex:none}
.gewaehrleistung-kurz img{display:block;width:auto;height:64px;max-height:72px}
.gewaehrleistung-kurz p{margin:0}
.gewaehrleistung summary{cursor:pointer;color:var(--text)}
.gewaehrleistung figure{margin:.75rem 0 0}
.gewaehrleistung figure>img{display:block;width:100%;max-width:24rem;height:auto}
.gewaehrleistung figcaption p{margin:.75rem 0}
.korb-mehr{margin-top:clamp(3rem,6vw,5rem)}
.korb-mehr h2{margin:0 0 1.2rem;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.025em}
.korb-leer{display:grid;gap:1rem;justify-items:start}
/* Schmal: Zusammenfassung und Kassenbutton vor der Artikelliste. */
@media (max-width:900px){.korb-seite{grid-template-columns:minmax(0,1fr)}.korb-seite .summe-box{position:static;order:-1}}
@media (max-width:560px){
  .korb-seite .korb-zeile{grid-template-columns:104px minmax(0,1fr);grid-template-areas:"bild angaben" "steuer steuer" "preis preis"}
  .korb-seite .korb-preis{text-align:left}
}

/* ---------- Warenkorb als Seitenleiste ---------- */
.lade{position:fixed;inset:0 0 0 auto;width:min(100vw,27rem);height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;flex-direction:column;overflow:hidden;background:var(--grund);color:var(--text);box-shadow:-20px 0 60px rgba(0,0,0,.25)}
.lade[open]{display:flex;animation:lade-ein .34s cubic-bezier(.2,.8,.2,1)}
.lade::backdrop{background:rgba(10,12,14,.5);animation:lade-blende .34s}
@keyframes lade-ein{from{transform:translateX(100%)}}
@keyframes lade-blende{from{opacity:0}}
.lade-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--rauch)}
.lade-kopf h2{margin:0;font-size:1.25rem;letter-spacing:-.015em}
.lade-zu{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:999px;background:var(--flaeche);color:var(--text);font-size:1.1rem;cursor:pointer}
.lade-neu{display:flex;align-items:center;gap:.5rem;margin:1rem 1.2rem 0;padding:.65rem .9rem;border-radius:10px;background:var(--blau-hell);font-size:.95rem}
.lade-neu[hidden],.lade-leer[hidden],.lade-inhalt[hidden]{display:none}
.lade-meldung{margin:1rem 1.2rem 0}
.lade-leer{display:grid;gap:1rem;justify-items:start;padding:2rem 1.2rem}
.lade-leer p{margin:0;color:var(--leise)}
.lade-inhalt{display:flex;flex-direction:column;flex:1;min-height:0}
.lade .korb-liste{flex:1;min-height:0;overflow-y:auto;align-content:start;margin:0;padding:1rem 1.2rem;list-style:none}
.lade .korb-zeile{grid-template-columns:96px minmax(0,1fr) auto;grid-template-areas:"bild angaben angaben" "steuer steuer preis";padding:.8rem}
.lade .korb-angaben h3{font-size:1rem}
.lade .korb-preis{align-self:center}
.lade .entfernen span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.lade .entfernen{justify-content:center;min-width:44px;margin-left:0}
.lade-fuss{display:grid;gap:.6rem;padding:1rem 1.2rem 1.2rem;border-top:1px solid var(--rauch);background:var(--flaeche)}
.lade-fuss dl{display:flex;justify-content:space-between;margin:0;font-size:1.1rem;font-weight:600}
.lade-fuss dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums}
.lade-fuss .hinweis-text{margin:0}
.lade-weiter{min-height:44px;border:0;background:none;color:var(--text);font:500 1rem var(--sans);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
@media (prefers-reduced-motion:reduce){.lade[open],.lade::backdrop{animation:none}.rk,.rk-bild img,.bildband-kachel img{transition:none}}

/* ===== Seite Monitore: eine große Karte je Gerät ===== */
.mk-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem)}
.mk{display:flex;flex-direction:column;height:100%;border-radius:calc(var(--radius) * 1.5);background:var(--flaeche);overflow:hidden;box-shadow:0 30px 60px -50px var(--schatten)}
.mk-bild{position:relative;display:block;aspect-ratio:16/9;background:#0e1012;overflow:hidden}
.mk-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.mk:hover .mk-bild img{transform:scale(1.03)}
.mk-marke{position:absolute;left:1rem;top:1rem;padding:.35rem .8rem;border-radius:999px;background:rgba(16,19,22,.72);backdrop-filter:blur(8px);color:#fff;font:500 .82rem var(--mono);letter-spacing:.02em}
.mk-text{display:flex;flex-direction:column;flex:1;padding:clamp(1.4rem,2.6vw,2.2rem)}
.mk-text h2{margin:0;font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:600;line-height:1.1;letter-spacing:-.04em}
.mk-text h2 a{color:inherit;text-decoration:none}
.mk-text h2 a:hover{color:var(--blau)}
.mk-kurz{max-width:44ch;margin:.7rem 0 0;color:var(--leise);font-size:1.05rem;line-height:1.55}
.mk-arten{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--rauch)}
.mk-arten a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem 1rem;align-items:baseline;min-height:44px;padding:.85rem 0;border-bottom:1px solid var(--rauch);color:inherit;text-decoration:none}
.mk-art{font-weight:600;letter-spacing:-.01em}
.mk-wert{grid-column:1;color:var(--leise);font-size:.92rem}
.mk-preis{grid-column:2;grid-row:1/span 2;align-self:center;font-size:1.25rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mk-arten a:hover .mk-art,.mk-arten a:hover .mk-preis{color:var(--blau)}
.mk-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;margin:auto 0 0;padding-top:1.5rem;color:var(--leise);font-size:.88rem}
.mk-hinweis{margin-top:1.5rem}
@media (max-width:820px){.mk-raster{grid-template-columns:1fr}}

/* Über uns: Sortiment und Ablauf */
.u6-geraete{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.u6-geraete a{display:block;border-radius:var(--radius);background:var(--flaeche);overflow:hidden;color:inherit;text-decoration:none}
.u6-geraete img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0e1012}
.u6-geraete span{display:block;padding:.9rem 1.1rem 1.1rem;font-weight:600;letter-spacing:-.015em}
.u6-geraete small{display:block;margin-top:.15rem;color:var(--leise);font-size:.9rem;font-weight:400}
.u6-geraete a:hover span{color:var(--blau)}
.u6-ablauf{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;counter-reset:ablauf}
.u6-ablauf li{counter-increment:ablauf;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.2rem .8rem;font-size:1.12rem;line-height:1.6;color:var(--leise)}
.u6-ablauf li::before{content:counter(ablauf);grid-row:1/span 2;font:500 .95rem/1.9 var(--mono);color:var(--blau)}
.u6-ablauf strong{color:var(--text);font-weight:600}
@media (max-width:560px){.u6-geraete{grid-template-columns:1fr}}

/* Größenvergleich auf der Seite Monitore */
.gv-block{margin-top:clamp(3.5rem,7vw,6rem)}
.gv-block h2{margin:0;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.045em}
.gv-block>p{margin:.5rem 0 1.5rem;color:var(--leise);font-size:1.1rem}
.gv{margin:0;padding:clamp(1.25rem,3vw,2.5rem);border-radius:calc(var(--radius) * 1.5);background:var(--flaeche)}
.gv ul{display:grid;gap:clamp(1.5rem,3vw,2.25rem);max-width:900px;margin:0 auto;padding:0;list-style:none}
.gv-name{margin:0 0 .6rem;font-weight:600;text-align:center}
.gv-name span{margin-left:.4rem;white-space:nowrap;color:var(--leise);font-weight:400}
.gv-form{display:flex;gap:3px;margin:0 auto}
.gv-form i{flex:1;border-radius:6px;background:var(--dunkel)}
.gv-laptop{border:2px dashed var(--leise);border-radius:6px}
.gv figcaption{margin-top:1.5rem;color:var(--leise);font-size:.88rem;text-align:center}

/* Seite Monitore: Rollen auf den Karten, Entscheidungshilfe, Unterschiede */
.mk-rolle{margin:0 0 .45rem;color:var(--blau);font:500 .82rem var(--mono);letter-spacing:.06em;text-transform:uppercase}
.mk-punkte{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.4rem;color:var(--leise);font-size:1.02rem;line-height:1.45}
.mk-punkte li{position:relative;padding-left:1.15rem}
.mk-punkte li::before{content:"";position:absolute;left:0;top:.6em;width:.4rem;height:.4rem;border-radius:50%;background:var(--blau)}
.mu-block{margin-top:clamp(3.5rem,7vw,6rem)}
.mu-block h2{margin:0;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.045em}
.mu-block>p{margin:.5rem 0 1.5rem;color:var(--leise);font-size:1.1rem}
.eh{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem);padding:clamp(1.25rem,3vw,2.5rem);border-radius:calc(var(--radius) * 1.5);background:var(--flaeche)}
.eh[hidden]{display:none}
.eh-fragen{display:grid;gap:1.4rem;align-content:start}
.eh fieldset{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:.5rem}
.eh legend{width:100%;margin-bottom:.6rem;padding:0;font-weight:600}
.eh label{position:relative;display:inline-flex}
.eh input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.eh label span{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border:1px solid var(--rauch);border-radius:999px;font-size:.98rem}
.eh input:checked+span{border-color:var(--blau);background:var(--blau);color:#fff}
.eh input:focus-visible+span{outline:2px solid var(--blau);outline-offset:3px}
.eh-ergebnis{display:flex;flex-direction:column;padding:clamp(1.25rem,2.5vw,2rem);border-radius:var(--radius);background:var(--flaeche-2)}
.eh-ergebnis p{margin:0}
.eh-vor{color:var(--blau);font:500 .82rem var(--mono);letter-spacing:.06em;text-transform:uppercase}
.eh-name{margin-top:.5rem!important;font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:600;line-height:1.15;letter-spacing:-.035em}
.eh-grund{margin-top:.6rem!important;color:var(--leise);line-height:1.5}
.eh-kauf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;margin-top:auto!important;padding-top:1.5rem}
.eh-preis{font-size:1.5rem;font-weight:600;letter-spacing:-.03em}
.eh-fremd{grid-column:1/-1;margin:0;color:var(--leise);font-size:.95rem}
.mu-rahmen{overflow-x:auto;border-radius:calc(var(--radius) * 1.5);background:var(--flaeche)}
.mu{width:100%;min-width:760px;border-collapse:collapse;font-size:.98rem;line-height:1.45}
.mu th,.mu td{padding:.95rem 1.1rem;border-bottom:1px solid var(--rauch);text-align:left;vertical-align:top}
.mu tbody tr:last-child th,.mu tbody tr:last-child td{border-bottom:0;font-weight:600}
.mu thead th{font-size:1.08rem;letter-spacing:-.02em}
.mu thead a{color:inherit;text-decoration:none}
.mu thead a:hover{color:var(--blau)}
.mu thead small{display:block;margin-top:.2rem;color:var(--blau);font:500 .74rem var(--mono);letter-spacing:.05em;text-transform:uppercase}
.mu tbody th{width:9.5rem;color:var(--leise);font-weight:500}
.mu-art{color:var(--leise);font-size:.86rem}
.mu-offen{color:var(--leise);font-style:italic}
.mu-wisch{display:none}
@media (max-width:760px){
  .mu-block>p.mu-wisch{display:block;margin:0 0 .6rem;font-size:.9rem}
  .mu{min-width:0;width:max-content;font-size:.9rem}
  .mu th,.mu td{padding:.75rem .7rem}
  .mu thead th{font-size:.98rem}
  .mu tbody td,.mu thead th{width:9.6rem;min-width:9.6rem;max-width:9.6rem}
  .mu tbody th,.mu thead td{position:sticky;left:0;z-index:1;width:5.9rem;min-width:5.9rem;max-width:5.9rem;background:var(--flaeche);overflow-wrap:anywhere;hyphens:auto}
}
@media (max-width:820px){.eh{grid-template-columns:1fr}}
/* Handy: Maßzeichnung als zwei Zeichnungen untereinander (geöffnet, zusammengeklappt) statt seitlich verschieben */
.m5-handy{display:none;color:var(--blau)}
.m5-handy svg{display:block;width:100%;min-width:0!important;height:auto;overflow:visible}
.m5-handy .m5h-zu{width:62%!important;margin:2.25rem auto 0}
.m5-handy p{margin:.6rem 0 0;text-align:center;font-size:.9rem;color:var(--leise)}
.m5h-mass path{fill:none;stroke:currentColor;stroke-width:4}
.m5h-text text{fill:var(--text);font:500 58px var(--sans);font-variant-numeric:tabular-nums}
.m5-handy .m5h-zu text{font-size:34px}
@media (max-width:700px){
  .m5-zeichnung:has(.m5-handy){overflow:visible!important;margin-inline:0!important;padding:0!important}
  .m5-zeichnung:has(.m5-handy)>:is(svg,img){display:none}
  .m5-handy{display:block}
}

/* Kaufbereich bleibt auch auf kleinen Bildschirmen im ersten Ausschnitt. */
.p6 .p6-kurz{margin-top:1rem}
@media (max-width:900px){
  .p6{padding-top:calc(var(--nav-h) + .75rem)!important;gap:1rem!important}
  .p6 .p-haupt{height:136px;aspect-ratio:auto;object-fit:contain}
  .p6 .p-leiste{margin-top:.5rem!important}
  .p6 .p-leiste button{min-height:40px}
  .p6 .p-leiste img{height:36px;object-fit:cover}
  .p6 .p-bildhinweis{font-size:.65rem;margin:.35rem 0 0;line-height:1.3}
  .p6 .p-kauf{padding-top:0}
  .p6 .varianten{margin:.6rem 0 0;gap:.4rem}
  .p6 .varianten legend{margin-bottom:.3rem}
  .p6 .variante{min-height:44px;padding:.55rem .65rem;font-size:.9rem;line-height:1.3;gap:.55rem}
  .p6 .variante.groesse{min-height:0;padding:.5rem .65rem}
  .p6 .variante-zweizeilig small{font-size:.78rem}
  .p6-titel{font-size:2rem!important;margin-bottom:.5rem!important}
  .p6-preis{margin:.75rem 0 0;padding-top:.75rem}
  .p6 .p-kauf .knopf{margin:.75rem 0 .25rem!important}
}