/* Panelo Designsystem „Metall“ (aus Entwurf v3) */
@font-face{font-family:"Geist";src:url(geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --grund:#ECEEF0; --flaeche:#FFFFFF; --flaeche-2:#F5F6F7; --rauch:#DADDE1;
  --text:#1D2125; --leise:#535B63; --dunkel:#1D2125; --dunkel-text:#E9ECEF; --dunkel-leise:#A9B1B9;
  --blau:#1D55F0; --blau-tief:#1442C4; --knopf:#1D55F0; --knopf-tief:#1442C4; --blau-hell:#E3EAFE; --fokus:#1D55F0; --fehler:#B42318;
  --geraet:#1F2327; --geraet-kante:#2E3338; --schatten:rgba(29,33,37,.28);
  --radius:14px; --nav-h:64px;
  --sans:"Geist",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --grund:#15181B; --flaeche:#1E2226; --flaeche-2:#23282D; --rauch:#2E343A;
  --text:#E9ECEF; --leise:#A3ACB5; --dunkel:#0F1113; --dunkel-text:#E9ECEF; --dunkel-leise:#A3ACB5;
  --blau:#6A90FF; --blau-tief:#7C9DFF; --knopf:#3563F0; --knopf-tief:#2A55D9; --blau-hell:#1C2A4F; --fokus:#7C9DFF; --fehler:#FF8A80;
  --geraet:#0B0D0F; --geraet-kante:#3A4148; --schatten:rgba(0,0,0,.6);
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;background:var(--grund);color:var(--text);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--knopf);color:#fff}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--fokus);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:0 0 .8rem;text-wrap:balance}
h1{font-size:clamp(2.3rem,3.7vw,3.5rem)}
h2{font-size:clamp(1.9rem,3.2vw,3rem)}
h3{font-size:1.5rem;letter-spacing:-.02em}
p{margin:0 0 1rem;max-width:60ch;text-wrap:pretty}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:1rem;top:-4rem;z-index:50;background:var(--knopf);color:#fff;padding:.7rem 1rem;border-radius:8px}
.sprung:focus{top:1rem}
section{padding:clamp(4rem,8vw,7rem) clamp(1rem,4vw,3rem)}

/* Navigation */
.nav{position:fixed;inset:0 0 auto;z-index:20;height:var(--nav-h);display:flex;align-items:center;gap:2rem;padding:0 clamp(1rem,4vw,3rem);background:color-mix(in srgb,var(--grund) 86%,transparent);backdrop-filter:blur(14px) saturate(1.2)}
.marke{display:inline-flex;align-items:center;min-height:44px;gap:.6rem;font-weight:600;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none}
.marke svg{width:30px;fill:currentColor}
.nav>nav{display:flex;gap:1.8rem;margin-left:auto}
.nav>nav a{text-decoration:none;font-size:.95rem;padding:.6rem 0;color:var(--leise);transition:color .2s}
.nav>nav a:hover{color:var(--text)}
.korb{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 .9rem;border-radius:999px;text-decoration:none;font-size:.95rem;background:var(--flaeche)}
.korb .icon{width:1.2rem;height:1.2rem}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 1.6rem;border:0;border-radius:999px;background:var(--knopf);color:#fff;font:500 1rem var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s,transform .12s}
.knopf:hover{background:var(--knopf-tief)}
.knopf:active{transform:scale(.98)}
.aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;margin-top:1.6rem}
.preis-klein{font-family:var(--mono);font-size:1.05rem;font-variant-numeric:tabular-nums}

/* Bühne */
.e-buehne{height:440vh;position:relative;padding:0}
.e-fest{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.7fr);align-items:center;gap:2vw;padding:var(--nav-h) clamp(1rem,4vw,3rem) 2rem}
.e-texte{position:relative;min-height:17rem}
.e-texte>div{position:absolute;inset:0 0 auto;opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.e-texte>div.an{opacity:1;transform:none}
.e-texte p{color:var(--leise)}
.e-raum{perspective:2600px;perspective-origin:50% 20%;display:grid;place-items:center}
.e-geraet{--b:min(60vw,1160px,calc((100dvh - 260px)*2.3));width:var(--b);position:relative;transform-style:preserve-3d;transform:translateY(var(--hub,0)) rotateX(calc(var(--kipp,1)*11deg))}
.e-reihe{display:flex;justify-content:center;transform-style:preserve-3d}
.e-panel{width:calc(var(--b)/3.04);aspect-ratio:16/9.6;position:relative;transform-style:preserve-3d}
.e-front,.e-ruecken{position:absolute;inset:0;border-radius:5px;background:var(--geraet);box-shadow:inset 0 0 0 1px var(--geraet-kante);backface-visibility:hidden}
.e-front::after{content:"";position:absolute;inset:3.6% 2.5% 4.6%;border-radius:2px;background:#0b0f14 url(schirm-metall.webp) 0 0/300% 100% no-repeat;filter:brightness(var(--licht,.06));transition:filter .15s linear}
.e-ruecken{transform:rotateY(180deg);background:linear-gradient(160deg,#2B3036,#1A1E22 60%)}
.e-links{transform-origin:right center;transform:rotateY(var(--wl,180deg));z-index:2}
.e-rechts{transform-origin:left center;transform:rotateY(var(--wr,-180deg));z-index:2}
.e-mitte{z-index:1;transform:translateZ(-2px);filter:drop-shadow(0 34px 34px var(--schatten))}
.e-links .e-front::after{background-position:0 0;--licht:var(--l-l)}
.e-mitte .e-front::after{background-position:50% 0;--licht:var(--l-m)}
.e-rechts .e-front::after{background-position:100% 0;--licht:var(--l-r)}
.e-kinn{position:absolute;left:0;right:0;bottom:-6%;height:10%;background:var(--geraet);border-radius:0 0 5px 5px;box-shadow:inset 0 0 0 1px var(--geraet-kante);display:flex;justify-content:flex-end;align-items:center;gap:3%;padding-right:6%}
.e-kinn i{width:4%;height:14%;background:var(--geraet-kante);border-radius:2px}
.e-scharnier{position:absolute;width:2.2%;height:13%;background:var(--geraet-kante);border-radius:2px;z-index:3}
.e-scharnier.o{top:18%}.e-scharnier.u{bottom:18%}.e-scharnier.l{left:-1.4%}.e-scharnier.r{right:-1.4%}
.e-staender{position:relative;width:calc(var(--b)/3.04);margin:0 auto;height:calc(var(--b)*.11)}
.e-bein{position:absolute;top:0;bottom:5%;width:2.4%;background:var(--geraet);border-radius:1px}
.e-bein.l{left:9%}.e-bein.r{right:9%}
.e-fuss{position:absolute;bottom:0;left:5%;right:5%;height:6%;min-height:5px;background:var(--geraet);border-radius:2px;filter:drop-shadow(0 18px 18px var(--schatten))}
.e-laptop{position:absolute;left:50%;bottom:-25%;width:calc(var(--b)/3.04*.66);z-index:5;transform:translate(-50%,calc((1 - var(--laptop,0))*30%));opacity:var(--laptop,0)}
.e-l-schirm{display:block;aspect-ratio:16/10.4;border-radius:7px 7px 0 0;background:#0b0f14 url(schirm-metall.webp) 50% 0/300% 100% no-repeat;box-shadow:inset 0 0 0 5px #23282D}
.e-l-basis{display:block;aspect-ratio:16/3.4;margin:0 -10%;background:linear-gradient(#3A4047,#3A4047) 50% 38%/74% 44% no-repeat,linear-gradient(#2E3338,#2E3338) 50% 88%/22% 14% no-repeat,linear-gradient(#D3D7DC,#A9AFB6);clip-path:polygon(7% 0,93% 0,100% 100%,0 100%)}
.e-fortschritt{position:absolute;left:clamp(1rem,4vw,3rem);bottom:2rem;display:flex;gap:6px}
.e-fortschritt span{width:22px;height:3px;border-radius:2px;background:var(--rauch);transition:background .3s}
.e-fortschritt span.an{background:var(--text)}
.e-hinweis{position:absolute;right:clamp(1rem,4vw,3rem);bottom:1.6rem;margin:0;font-size:.8rem;color:var(--leise)}

/* Vorteile */
.sicher{padding-block:2rem;background:var(--flaeche)}
.sicher ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.sicher li{display:flex;gap:.9rem;align-items:flex-start;color:var(--leise);font-size:.95rem}
.sicher .icon{font-size:1.6rem;color:var(--blau);flex:none;margin-top:.1rem}
.sicher strong{display:block;color:var(--text);font-weight:600;font-size:1rem}

/* Szenen */
.szenen{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
.szenen-bild{position:sticky;top:calc(var(--nav-h) + 32px);height:fit-content;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--rauch)}
.szenen-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.szenen-bild img.an{opacity:1;transform:none}
.szenen-titel{margin-bottom:0}
.szenen-text article{min-height:62vh;display:flex;flex-direction:column;justify-content:center}
.szenen-text article h3{color:var(--leise);transition:color .45s}
.szenen-text article.aktiv h3{color:var(--text)}
.szenen-text p{color:var(--leise)}
.szenen-text .mobil{display:none}

/* Flächenrechner */
.flaeche{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(2rem,5vw,5rem);align-items:center;background:var(--flaeche)}
.faktor{color:var(--blau);font-variant-numeric:tabular-nums;white-space:nowrap}
.wahl{border:0;padding:0;margin:1.6rem 0 1.2rem;display:flex;flex-wrap:wrap;gap:.5rem}
.wahl legend{width:100%;font-weight:500;margin-bottom:.6rem;padding:0}
.wahl label{position:relative}
.wahl input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.wahl span{display:inline-flex;align-items:center;min-height:48px;padding:0 1.15rem;border-radius:999px;background:var(--flaeche-2);font-family:var(--mono);font-variant-numeric:tabular-nums;transition:background .2s,color .2s}
.wahl input:checked+span{background:var(--text);color:var(--grund)}
.wahl input:focus-visible+span{outline:2px solid var(--fokus);outline-offset:2px}
.quelle{font-size:.88rem;color:var(--leise)}
.plan{margin:0}
#plan{width:100%;height:auto;overflow:visible}
#plan .m{fill:var(--blau)}
#lap{fill:var(--text)}
#lap-t{fill:var(--grund);font:500 22px var(--sans)}
#plan rect,#plan text{transition:all .55s cubic-bezier(.16,1,.3,1)}

/* Maße */
.masse{background:var(--dunkel);color:var(--dunkel-text)}
.masse img{margin:2.5rem 0;border-radius:var(--radius);width:100%}
.werte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;margin:0}
.werte dt{color:var(--dunkel-leise);font-size:.9rem}
.werte dd{margin:.2rem 0 0;font-family:var(--mono);font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:-.02em}
.masse-notiz{color:var(--dunkel-leise);font-size:.9rem;margin:2rem 0 0}

/* Anschluss */
.tabelle{overflow-x:auto;margin-top:2rem;border-radius:var(--radius)}
.anschluss table{width:100%;min-width:560px;max-width:1000px;border-collapse:collapse;background:var(--flaeche)}
.anschluss th,.anschluss td{text-align:left;padding:1.15rem 1.4rem;vertical-align:top}
.anschluss thead th{font-size:1.15rem;font-weight:600;background:var(--rauch)}
.anschluss tbody tr:nth-child(even){background:var(--flaeche-2)}
.anschluss tbody th{font-weight:500;color:var(--leise);width:30%}
.anschluss strong{color:var(--blau);font-weight:600}

/* Fragen */
.fragen{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(2rem,5vw,5rem);padding-top:0}
.fragen details{border-bottom:1px solid var(--rauch)}
.fragen details:first-child{border-top:1px solid var(--rauch)}
.fragen summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:56px;padding:1rem 0;font-weight:500;font-size:1.1rem}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";font-family:var(--mono);font-size:1.3rem;color:var(--leise);transition:transform .25s}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details p{color:var(--leise);padding-bottom:1rem}

/* Kauf */
.kauf{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center;margin:0 clamp(1rem,4vw,3rem);padding:clamp(1.5rem,3vw,2.5rem);background:var(--flaeche);border-radius:var(--radius)}
.kauf img{border-radius:calc(var(--radius) - 4px);background:#E8EAEC}
.preis{font-family:var(--mono);font-size:clamp(2.4rem,4vw,3.4rem);letter-spacing:-.04em;line-height:1;margin:.4rem 0 .4rem}
.kauf-zusatz{color:var(--leise);font-size:.95rem;margin-bottom:1.4rem}
.zahlarten{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.4rem}
.zahlarten li{font-size:.8rem;padding:.3rem .65rem;border-radius:6px;background:var(--flaeche-2);color:var(--leise)}

/* Newsletter */
.brief{max-width:760px}
.brief>p{color:var(--leise)}
.brief-form label{display:block;font-weight:500;margin:1.4rem 0 .5rem}
.brief-form div{display:flex;gap:.6rem;flex-wrap:wrap}
.brief-form input{flex:1 1 260px;min-height:50px;padding:0 1.1rem;border:1px solid var(--rauch);border-radius:999px;background:var(--flaeche);color:var(--text);font:inherit}
.brief-form input[aria-invalid="true"]{border-color:var(--fehler)}
.hilfe{font-size:.88rem;color:var(--leise);margin-top:.6rem}
.hilfe.fehler{color:var(--fehler)}

/* Mobile Kaufleiste */
.kaufleiste{position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:30;display:none;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem .6rem .6rem 1.2rem;border-radius:999px;background:color-mix(in srgb,var(--flaeche) 92%,transparent);backdrop-filter:blur(12px);box-shadow:0 10px 30px -10px var(--schatten);transform:translateY(140%);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.kaufleiste span{font-family:var(--mono);font-size:1.1rem}
.kaufleiste.sichtbar{transform:none}

/* Fuß */
.fuss{padding:3rem clamp(1rem,4vw,3rem) 6rem;margin-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--rauch)}
.fuss nav{display:flex;flex-wrap:wrap;gap:.2rem 1.6rem;margin:1rem 0}
.fuss nav a{padding:.6rem 0;display:inline-block;color:var(--leise)}
.klein{font-size:.85rem;color:var(--leise)}

@media (max-width:900px){
  .nav>nav{display:none}.korb{margin-left:auto}
  .e-fest{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;padding-top:calc(var(--nav-h) + 1rem)}
  .e-texte{min-height:15.5rem}
  .e-texte h1,.e-texte h2{font-size:clamp(1.9rem,8vw,2.4rem)}
  .e-raum{align-self:center}
  .e-geraet{--b:96vw}
  .e-hinweis{display:none}
  .sicher ul{grid-template-columns:minmax(0,1fr)}
  .szenen,.flaeche,.fragen,.kauf{grid-template-columns:minmax(0,1fr)}
  .szenen-bild{display:none}
  .szenen-text article{min-height:0;margin-top:2.5rem}
  .szenen-text article h3{color:var(--text)}
  .szenen-text .mobil{display:block;border-radius:var(--radius);margin-top:.4rem}
  .werte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kaufleiste{display:flex}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media (max-width:900px){
  .anschluss table{min-width:0;font-size:.92rem}
  .anschluss th,.anschluss td{padding:.85rem .7rem}
  .anschluss tbody th{width:32%}
  .werte dd{font-size:1.15rem}
  #lap-t{font-size:40px}
  .kauf{margin-inline:clamp(1rem,4vw,3rem)}
}

/* Produktseite */
.p-kopf{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);padding:96px clamp(1rem,4vw,3rem) clamp(3rem,6vw,5rem)}
.p-haupt{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--p-radius);background:var(--p-flaeche)}
.p-leiste{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;margin-top:.6rem}
.p-leiste button{padding:0;border:2px solid transparent;border-radius:calc(var(--p-radius)*.6);background:none;cursor:pointer;overflow:hidden;min-height:48px}
.p-leiste button[aria-current="true"]{border-color:var(--p-akzent)}
.p-leiste img{aspect-ratio:4/3;object-fit:cover;width:100%}
.p-bildhinweis{font-size:.85rem;color:var(--p-leise);margin-top:.6rem}
.p-kauf h1{font-size:clamp(2rem,3vw,2.8rem)}
.p-kauf>p{color:var(--p-leise)}
.p-preis{font-size:clamp(2.2rem,3.4vw,3rem);font-weight:700;letter-spacing:-.04em;line-height:1;margin:1.4rem 0 .3rem!important;color:inherit!important}
.p-zusatz{font-size:.92rem}
.p-kauf .knopf{width:100%;margin:1.2rem 0 1.4rem}
.p-punkte{list-style:none;padding:0;margin:0 0 1rem}
.p-punkte li{padding:.5rem 0}
.p-punkte strong{color:var(--p-akzent)}
.p-daten{padding:clamp(3rem,6vw,5rem) clamp(1rem,4vw,3rem)}
.p-daten-kopf p{color:var(--p-leise)}
.p-gruppen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}
.p-gruppe{background:var(--p-flaeche);border-radius:var(--p-radius);padding:1.6rem}
.p-gruppe h3{margin-bottom:1rem}
.p-gruppe dl{margin:0}
.p-gruppe dt{color:var(--p-leise);font-size:.9rem;margin-top:.9rem}
.p-gruppe dt:first-child{margin-top:0}
.p-gruppe dd{margin:.1rem 0 0;font-weight:500}
.p-vorl{display:inline-block;font-size:.78rem;font-weight:600;color:var(--p-akzent);border:1px solid currentColor;border-radius:999px;padding:.05rem .6rem;vertical-align:middle;margin-left:.6rem;letter-spacing:0}
.p-masse{padding:0 clamp(1rem,4vw,3rem) clamp(3rem,6vw,5rem)}
.p-masse img{width:100%;border-radius:var(--p-radius);background:var(--p-flaeche)}
.p-masse p{color:var(--p-leise);font-size:.9rem;margin-top:.6rem}
.p-karton{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);padding:0 clamp(1rem,4vw,3rem) clamp(3rem,6vw,5rem);align-items:start}
.p-karton ul{padding-left:1.1rem;margin:1rem 0}
.p-karton li{padding:.3rem 0}
.p-fragen details{border-top:1px solid var(--p-linie)}
.p-fragen summary{cursor:pointer;padding:1.1rem 0;font-weight:600;min-height:48px}
.p-fragen details p{color:var(--p-leise)}
@media (max-width:900px){.p-kopf,.p-karton,.p-gruppen{grid-template-columns:minmax(0,1fr)}.p-kopf{padding-top:84px}}

.p-punkte li{display:flex;gap:.7rem;align-items:flex-start}
.p-punkte .icon{font-size:1.35rem;color:var(--blau);margin-top:.05rem}
.p-punkte strong{color:var(--text)}
.p-preis{font-family:var(--mono)}
.p-gruppe{background:var(--flaeche)}
:root{--p-flaeche:var(--flaeche);--p-leise:var(--leise);--p-akzent:var(--blau);--p-radius:var(--radius);--p-linie:var(--rauch)}
.p-kopf{padding-top:calc(var(--nav-h) + 32px)}
.p-fragen summary{list-style:none;display:flex;justify-content:space-between}
.p-fragen summary::after{content:"+";font-family:var(--mono);color:var(--leise)}
.p-fragen details[open] summary::after{content:"−"}

/* ===== Ergänzungen für das Theme ===== */
.icon{width:1em;height:1em;flex:none}
.korb{position:relative}
.korb-zahl{min-width:1.3rem;height:1.3rem;padding:0 .3rem;border-radius:999px;background:var(--knopf);color:#fff;font:500 .75rem/1.3rem var(--mono);text-align:center}
.nav>nav a[aria-current="page"]{color:var(--text)}

/* Menü auf dem Handy */
.menue{display:none}
.menue summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;background:var(--flaeche);cursor:pointer;font-size:1.3rem}
.menue summary::-webkit-details-marker{display:none}
.menue .zu{display:none}
.menue[open] .auf{display:none}.menue[open] .zu{display:inline}
.nav:has(.menue[open]){backdrop-filter:none;background:var(--grund)}
.menue-liste a[aria-current="page"]{color:var(--blau)}
.menue:not([open]) .menue-liste{display:none}
.menue-liste{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:var(--grund);padding:1.5rem clamp(1rem,4vw,3rem);overflow:auto}
.menue-liste a{display:flex;align-items:center;min-height:56px;font-size:1.5rem;font-weight:500;letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid var(--rauch)}
@media (max-width:900px){.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}}

/* Unterseiten allgemein */
.seite{padding:calc(var(--nav-h) + clamp(2.5rem,5vw,4rem)) clamp(1rem,4vw,3rem) clamp(3rem,6vw,5rem);max-width:1200px}
.seite-kopf{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.seite-kopf p{color:var(--leise);font-size:1.15rem}
.text{max-width:46rem}
.text h2{font-size:clamp(1.4rem,2.2vw,1.8rem);margin-top:2.6rem}
.text h3{font-size:1.2rem;margin-top:1.8rem}
.text p,.text li{color:var(--leise)}
.text ul,.text ol{padding-left:1.2rem;margin:0 0 1rem}
.text li{padding:.2rem 0}
.text strong{color:var(--text)}
.text a{color:var(--blau)}
.platzhalter-hinweis{display:flex;gap:.8rem;align-items:flex-start;padding:1rem 1.2rem;border-radius:var(--radius);background:var(--blau-hell);color:var(--text);font-size:.95rem;margin-bottom:2rem;max-width:46rem}
.platzhalter-hinweis .icon{font-size:1.3rem;color:var(--blau);margin-top:.1rem}
.platzhalter-hinweis p{margin:0}

/* Wegweiser auf der Startseite */
.wege ul{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:1rem}
.wege li:first-child{grid-row:span 2}
.wege a{display:flex;flex-direction:column;justify-content:space-between;gap:2rem;height:100%;min-height:150px;padding:1.6rem;border-radius:var(--radius);background:var(--flaeche);text-decoration:none;transition:background .2s}
.wege a:hover{background:var(--flaeche-2)}
.wege li:first-child a{background:var(--dunkel);color:var(--dunkel-text)}
.wege li:first-child p{color:var(--dunkel-leise)}
.wege h3{margin:0 0 .4rem;font-size:1.35rem}
.wege p{margin:0;color:var(--leise);font-size:.95rem}
.wege .pfeil{font-size:1.4rem;color:var(--blau)}
.wege li:first-child .pfeil{color:var(--dunkel-text)}
@media (max-width:900px){.wege ul{grid-template-columns:minmax(0,1fr)}.wege li:first-child{grid-row:auto}}

/* Produktseite: Kaufformular, Zubehör */
.p-kauf form{margin:0}
.p-kauf .knopf[disabled]{opacity:.5;cursor:not-allowed}
.vorl-hinweis{font-size:.9rem;color:var(--leise)}
.liste-haken{list-style:none;padding:0;margin:1rem 0}
.liste-haken li{display:flex;gap:.7rem;align-items:flex-start;padding:.4rem 0}
.liste-haken .icon{color:var(--blau);font-size:1.2rem;margin-top:.2rem}
.hinweis-text{font-size:.92rem;color:var(--leise)}
.p-gruppe dl>div{margin-top:.9rem}.p-gruppe dl>div:first-child{margin-top:0}
.p-gruppe dt{margin-top:0}

/* Zubehör-Karten */
.zubehoer-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.z-karte{display:flex;flex-direction:column;height:100%;border-radius:var(--radius);background:var(--flaeche);overflow:hidden}
.z-bild{aspect-ratio:4/3;display:grid;place-items:center;background:var(--flaeche-2);color:var(--leise);font-family:var(--mono);font-size:.9rem;border-bottom:1px dashed var(--rauch)}
.z-bild img{width:100%;height:100%;object-fit:cover}
.z-text{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.z-text h3{font-size:1.1rem;margin:0}
.z-text h3 a{text-decoration:none}
.z-preis{font-family:var(--mono);margin:0}
.z-marke{align-self:flex-start;font-size:.78rem;font-weight:600;color:var(--blau);border:1px solid currentColor;border-radius:999px;padding:.1rem .6rem;margin-top:auto}
.p-zubehoer{padding:0 clamp(1rem,4vw,3rem) clamp(3rem,6vw,5rem)}
.p-zubehoer .seite-kopf{margin-bottom:1.6rem}

/* FAQ-Seite */
.faq-gruppe{margin-bottom:3rem;max-width:52rem}
.faq-gruppe h2{font-size:clamp(1.4rem,2.2vw,1.8rem)}
.faq-gruppe details{border-bottom:1px solid var(--rauch)}
.faq-gruppe details:first-of-type{border-top:1px solid var(--rauch)}
.faq-gruppe summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:56px;padding:1rem 0;font-weight:500;font-size:1.08rem}
.faq-gruppe summary::-webkit-details-marker{display:none}
.faq-gruppe summary::after{content:"+";font-family:var(--mono);font-size:1.3rem;color:var(--leise);transition:transform .25s}
.faq-gruppe details[open] summary::after{transform:rotate(45deg)}
.faq-gruppe details p{color:var(--leise);padding-bottom:1rem}

/* Formulare (Kontakt) */
.formular{display:grid;gap:1.2rem;max-width:40rem}
.feld label{display:block;font-weight:500;margin-bottom:.45rem}
.feld input,.feld textarea{width:100%;min-height:50px;padding:.8rem 1rem;border:1px solid var(--rauch);border-radius:12px;background:var(--flaeche);color:var(--text);font:inherit}
.feld textarea{min-height:160px;resize:vertical}
.feld input:focus,.feld textarea:focus{border-color:var(--blau);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--blau) 25%,transparent)}
.feld .hilfe{margin-top:.4rem}
.meldung{padding:1rem 1.2rem;border-radius:12px;background:var(--flaeche);border-left:4px solid var(--blau)}
.meldung:focus{outline:none}
.meldung.fehler{border-left-color:var(--fehler)}
.kontakt-raster{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
.kontakt-info{background:var(--flaeche);border-radius:var(--radius);padding:1.6rem;align-self:start}
.kontakt-info dl{margin:0}
.kontakt-info dt{color:var(--leise);font-size:.9rem;margin-top:1rem}
.kontakt-info dt:first-child{margin-top:0}
.kontakt-info dd{margin:.15rem 0 0}
@media (max-width:900px){.kontakt-raster{grid-template-columns:minmax(0,1fr)}}

/* Warenkorb */
.korb-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--rauch)}
.korb-zeile{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:1rem 1.4rem;align-items:center;padding:1.2rem 0;border-bottom:1px solid var(--rauch)}
.korb-zeile img{border-radius:10px;background:var(--flaeche)}
.korb-zeile h2{font-size:1.1rem;margin:0 0 .3rem;letter-spacing:-.01em}
.korb-zeile h2 a{text-decoration:none}
.korb-preis{font-family:var(--mono);text-align:right}
.menge{display:inline-flex;align-items:center;border:1px solid var(--rauch);border-radius:999px;background:var(--flaeche)}
.menge button{width:44px;height:44px;border:0;background:none;color:var(--text);cursor:pointer;font-size:1rem;display:grid;place-items:center;border-radius:999px}
.menge input{width:3rem;height:44px;border:0;background:none;text-align:center;font:inherit;font-family:var(--mono);color:var(--text);-moz-appearance:textfield}
.menge input::-webkit-inner-spin-button{-webkit-appearance:none}
.entfernen{display:inline-flex;align-items:center;gap:.3rem;min-height:44px;margin-left:.6rem;color:var(--leise);font-size:.9rem}
.korb-summe{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:2rem;margin-top:2rem}
.summe-box{background:var(--flaeche);border-radius:var(--radius);padding:1.6rem}
.summe-box dl{display:grid;grid-template-columns:1fr auto;gap:.6rem 1rem;margin:0 0 1.2rem}
.summe-box dd{margin:0;font-family:var(--mono);text-align:right}
.summe-box .gesamt{font-weight:600;font-size:1.15rem}
.summe-box .knopf{width:100%}
.summe-box .zahlarten{justify-content:center}
.leer{text-align:left;max-width:36rem}
@media (max-width:700px){.korb-zeile{grid-template-columns:72px minmax(0,1fr)}.korb-preis{grid-column:2;text-align:left}.korb-summe{grid-template-columns:minmax(0,1fr)}}

/* 404 */
.fehlerseite{min-height:70vh;display:flex;flex-direction:column;justify-content:center}
.fehlerseite .zahl{font-family:var(--mono);font-size:clamp(4rem,12vw,9rem);line-height:1;letter-spacing:-.06em;color:var(--leise);margin:0 0 1rem}

/* Über uns */
.ueber-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.ueber-raster img{border-radius:var(--radius)}
@media (max-width:900px){.ueber-raster{grid-template-columns:minmax(0,1fr)}}

/* Fuß, mehrspaltig */
.fuss-raster{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:2rem;margin-bottom:1.5rem}
.fuss h2{font-size:.95rem;font-weight:600;letter-spacing:0;margin:0 0 .4rem}
.fuss-raster nav{display:flex;flex-direction:column;gap:0;margin:0}
.fuss-raster nav a{padding:.45rem 0;min-height:44px;display:flex;align-items:center}
.fuss nav .widerruf-link{color:var(--text);text-decoration:underline;text-underline-offset:.2em}
@media (max-width:700px){.fuss-raster{grid-template-columns:minmax(0,1fr)}}

/* Reduzierte Bewegung: Bühne ohne Scroll-Strecke */
@media (prefers-reduced-motion:reduce){.e-buehne{height:auto}.e-fest{position:relative;height:auto;min-height:100vh;min-height:100dvh}.e-fortschritt{display:none}}

/* Galerie-Leiste: eine Zeile, auf dem Handy wischbar */
.p-leiste{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(76px,1fr);overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.p-leiste img{aspect-ratio:4/3;height:auto}
/* Anschlussbild nicht hochskalieren */
.p-anschluss img{width:100%;max-width:760px;background:#000}

/* Rechtstexte (von Shopify gerendert) */
.shopify-policy__container{max-width:46rem!important;margin:0!important;padding:calc(var(--nav-h) + clamp(2.5rem,5vw,4rem)) clamp(1rem,4vw,3rem) clamp(3rem,6vw,5rem)!important}
.shopify-policy__title h1{font-size:clamp(2rem,3.4vw,3rem);text-align:left}
.shopify-policy__body h2{font-size:clamp(1.3rem,2vw,1.6rem);margin-top:2.4rem}
.shopify-policy__body h3{font-size:1.15rem;margin-top:1.6rem}
.shopify-policy__body p,.shopify-policy__body li{color:var(--leise)}
.shopify-policy__body strong{color:var(--text)}
.shopify-policy__body a{color:var(--blau)}
.entwurf{display:block;padding:1rem 1.2rem;border-radius:var(--radius);background:var(--blau-hell);color:var(--text)!important;margin-bottom:2rem}
.z-text h2,.z-text h3{font-size:1.1rem;letter-spacing:-.01em;line-height:1.25}

/* Eigenständige Textlinks: Tippfläche mindestens 44 px */
.link-tipp{display:inline-flex;align-items:center;min-height:44px}

/* Variantenwahl auf der Produktseite */
.varianten{border:0;margin:1.2rem 0 0;padding:0;display:grid;gap:.6rem}
.varianten legend{font-size:.92rem;color:var(--leise);margin-bottom:.5rem;padding:0}
.variante{display:flex;align-items:center;gap:.8rem;min-height:56px;padding:.8rem 1rem;border:1px solid var(--rauch);border-radius:var(--radius);background:var(--flaeche);cursor:pointer;transition:border-color .2s,background .2s}
.variante:hover{border-color:var(--leise)}
.variante:has(input:checked){border-color:var(--blau);background:var(--blau-hell)}
.variante:has(input:focus-visible){outline:2px solid var(--fokus);outline-offset:2px}
.variante input{accent-color:var(--blau);width:1.1rem;height:1.1rem;margin:0;flex:none}
.variante-name{flex:1;font-weight:500}
.variante-preis{font-variant-numeric:tabular-nums;color:var(--leise)}
.variante-status{font-size:.9rem;color:var(--leise);text-align:right}
[data-paneloscreens-kaufbereich][hidden],[data-paneloscreens-kaufversprechen][hidden],[data-paneloscreens-kaufstatus][hidden],[data-paneloscreens-kaufleiste][hidden],[data-paneloscreens-fakten][hidden],.p-leiste[hidden]{display:none!important}
.variante-status{font-size:.92rem;color:var(--leise);text-align:right}
/* Triple: Größe (Schritt 1) nebeneinander, Ausführung (Schritt 2) mit Zusatzzeile */
.varianten-groesse{grid-template-columns:repeat(3,minmax(0,1fr))}
.varianten-groesse legend,.varianten[data-paneloscreens-ausfuehrungen] legend{grid-column:1/-1}
.variante.groesse{flex-direction:column;align-items:flex-start;gap:.15rem;min-height:0;padding:.7rem .9rem}
.variante.groesse input{position:absolute;opacity:0;pointer-events:none}
.variante.groesse .variante-name{flex:none}
.variante.groesse .variante-preis{font-size:.9rem}
.variante-zweizeilig small{display:block;font-size:.88rem;font-weight:400;color:var(--leise)}
.paneloscreens-zwei-schritte [data-paneloscreens-groesse-text]{display:none}
.variante[hidden],.varianten[hidden],[data-paneloscreens-modell][hidden],[data-paneloscreens-masszeichnung][hidden]{display:none!important}
.p-leiste button:disabled{cursor:default;opacity:.45}

/* Produktpalette */
.palette-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.2rem}
.palette-karte{display:flex;flex-direction:column;height:100%;border-radius:var(--radius);background:var(--flaeche);overflow:hidden}
.palette-bild{display:grid;place-items:center;aspect-ratio:16/9;background:var(--flaeche-2);color:var(--leise);font-family:var(--mono);font-size:.95rem;text-decoration:none}
.palette-bild img{width:100%;height:100%;object-fit:cover}
.palette-text{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:clamp(1.4rem,3vw,2rem);flex:1}
.palette-text h2,.palette-text h3{font-size:clamp(1.4rem,2.2vw,1.8rem);letter-spacing:-.02em;line-height:1.15;margin:0}
.palette-text h2 a,.palette-text h3 a{color:inherit;text-decoration:none}
.palette-text h2 a:hover,.palette-text h3 a:hover{color:var(--blau)}
.palette-kurz,.palette-varianten{margin:0;color:var(--leise)}
.palette-varianten strong{display:block;margin-bottom:.35rem;color:var(--text,var(--tinte));font-size:.92em}
.palette-varianten ul{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.palette-varianten li{padding:.3rem .65rem;border:1px solid var(--linie,#d9dce1);border-radius:999px;font-size:.9em}
.palette-preis{margin:auto 0 .4rem;padding-top:1rem;font-size:1.6rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}