:root{--glut:#F59C28;--glut-tief:#B06D12;--russ:#111111;--nacht:#000000;--fels:#151515;--asche:#f3f3f1;--naht:#e2e2de;
--tinte:#222222;--grau:#666666;--weiss:#ffffff;--petrol:#1f6f78;--kante:4px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.6 "Source Sans 3",Arial,sans-serif;color:var(--tinte);background:var(--weiss);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,.schmal{font-family:"Saira Extra Condensed","Arial Narrow",sans-serif;font-weight:700;line-height:1.08;letter-spacing:.01em;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.6vw,3.25rem)}
h2{font-size:clamp(1.65rem,3.2vw,2.35rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
.rahmen{width:min(1200px,100% - 32px);margin-inline:auto}
.eng{width:min(820px,100% - 32px);margin-inline:auto}
.versteckt{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* полоса + хедер (arka) */
.streifen{background:var(--glut);color:var(--russ);font-size:.84rem;font-weight:600}
.streifen .rahmen{display:flex;justify-content:space-between;gap:12px;padding-block:5px;flex-wrap:wrap}
.kopf{background:var(--weiss);border-bottom:1px solid var(--naht);position:sticky;top:0;z-index:30}
.kopf .rahmen{display:flex;align-items:center;gap:22px;min-height:76px}
.marke img{width:178px;height:auto}
.menue{display:flex;gap:26px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.menue a{text-decoration:none;text-transform:uppercase;font-weight:600;font-size:.92rem;letter-spacing:.04em;padding:6px 0;border-bottom:2px solid transparent}
.menue a:hover,.menue a[aria-current]{border-bottom-color:var(--glut)}
.knopf-zk{background:none;border:0;padding:0;cursor:pointer;display:inline-block;line-height:0}
.knopf-zk img{width:100%;height:auto}
.kopf .knopf-zk{width:200px}
.burger{display:none;margin-left:auto;background:var(--russ);color:var(--weiss);border:0;width:46px;height:42px;border-radius:var(--kante);font-size:1.4rem;cursor:pointer}
@media (max-width:960px){
 .kopf .rahmen{flex-wrap:wrap;gap:10px;min-height:64px;padding-block:8px}
 .marke img{width:150px}
 .burger{display:block}
 .menue{display:none;width:100%;flex-direction:column;gap:0;margin:0;order:4}
 .menue a{display:block;padding:12px 0;border-bottom:1px solid var(--naht)}
 .kopf.offen .menue{display:flex}
 .kopf .knopf-zk{width:190px;order:3}
}
/* крошки (hornbach) */
.krume{background:var(--asche);font-size:.86rem;color:var(--grau)}
.krume ol{list-style:none;margin:0;padding:9px 0;display:flex;flex-wrap:wrap;gap:6px}
.krume li+li:before{content:"›";margin-right:6px}
.krume a{text-decoration:none}
/* хиро (arka) */
.buehne{position:relative;background:#010103 center/cover no-repeat;color:var(--weiss);overflow:hidden}
.buehne .rahmen{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:24px;min-height:500px;padding-block:40px}
.buehne__tafel{background:var(--weiss);color:var(--russ);padding:30px 30px 26px;max-width:600px;box-shadow:0 0 0 6px rgba(245,156,40,.25)}
.buehne__tafel h1{margin-bottom:.35em}
.buehne__tafel p{color:#333}
.buehne__bild img{width:min(420px,100%);margin-inline:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.tastknopf{display:inline-block;background:var(--russ);color:var(--weiss);text-decoration:none;text-transform:uppercase;font-weight:700;letter-spacing:.05em;font-size:.9rem;padding:11px 20px;border-radius:2px}
.tastknopf:hover{background:var(--glut);color:var(--russ)}
@media (max-width:820px){.buehne .rahmen{grid-template-columns:1fr;min-height:0}.buehne__bild img{width:240px}.buehne__tafel{padding:22px}}
.reiter{background:var(--weiss);border-bottom:1px solid var(--naht)}
.reiter ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}
.reiter a{display:block;padding:12px 16px;text-decoration:none;font-weight:600;font-size:.93rem}
.reiter a:hover{background:var(--asche)}
/* абзац + иконки */
.auftakt{padding:44px 0 10px}
.auftakt p{font-size:1.12rem;max-width:860px}
.symbole{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:26px 0 10px;border-top:1px solid var(--naht);padding-top:24px}
.symbole div{display:flex;gap:12px;align-items:center}
.symbole img{width:64px;height:64px;flex:none}
.symbole b{display:block;line-height:1.2}
.symbole span{font-size:.9rem;color:var(--grau)}
@media (max-width:820px){.symbole{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.symbole{grid-template-columns:1fr}}
/* плитки разделов (arka) */
.abschnitt{padding:46px 0}
.abschnitt--grau{background:var(--asche)}
.kopfzeile{margin-bottom:22px}
.kopfzeile p{color:var(--grau);margin:0}
.wand{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.platte{grid-column:span 2;position:relative;display:flex;align-items:flex-end;min-height:220px;background:var(--nacht);color:var(--glut);text-decoration:none;overflow:hidden}
.platte--breit{grid-column:span 3;min-height:260px}
.platte img{position:absolute;right:0;bottom:0;height:100%;width:auto;max-width:62%;object-fit:contain;opacity:.95}
.platte span{position:relative;z-index:1;padding:20px 22px;font-family:"Saira Extra Condensed",sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:.95;max-width:56%;text-shadow:0 2px 0 #000}
.platte small{display:block;font-family:"Source Sans 3",sans-serif;font-size:.9rem;text-transform:none;color:#ddd;font-weight:400;margin-top:6px;line-height:1.3}
.platte--petrol{background:var(--petrol);color:var(--weiss)}
.platte:hover span{color:var(--weiss)}
@media (max-width:820px){.wand{grid-template-columns:repeat(2,minmax(0,1fr))}.platte,.platte--breit{grid-column:span 1;min-height:170px}.platte span{font-size:1.6rem;padding:14px;max-width:58%}.platte img{max-width:42%}}
@media (max-width:420px){.wand{grid-template-columns:1fr}}
/* материал (testberichte) */
.stoffe{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr));gap:14px}
.stoff{background:var(--weiss);border:1px solid var(--naht);text-align:center;padding:12px;display:flex;flex-direction:column}
.stoff b{font-size:.98rem;margin-bottom:6px}
.stoff img{aspect-ratio:1;object-fit:contain;margin:0 auto 10px;width:100%}
.stoff a{margin-top:auto;display:block;background:#1d2a3a;color:var(--weiss);text-decoration:none;font-size:.86rem;padding:8px 6px;border-radius:3px}
.stoff a:hover{background:var(--russ)}
/* сетка товаров (hornbach) */
.regal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:18px}
.ware{display:flex;flex-direction:column;background:var(--weiss);border:1px solid var(--naht);padding:14px}
.ware__bild{display:block;aspect-ratio:1;margin-bottom:10px}
.ware__bild img{width:100%;height:100%;object-fit:contain}
.ware h3{font-family:"Source Sans 3",sans-serif;font-size:1rem;font-weight:700;line-height:1.3;margin:0 0 6px}
.ware h3 a{text-decoration:none}
.ware h3 a:hover{text-decoration:underline}
.ware__var{font-size:.84rem;color:var(--grau);margin-bottom:6px}
.sterne{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;color:var(--grau)}
.sterne i{font-style:normal;color:var(--glut);letter-spacing:1px;font-size:1rem}
.preis{font-size:1.45rem;font-weight:700;color:#c0161d;margin:6px 0 0;line-height:1.1}
.preis small{display:block;font-size:.8rem;color:var(--grau);font-weight:400;margin-top:2px}
.ware .knopf-zk{margin-top:auto;padding-top:12px;width:100%}
/* бренд-строка (arka) */
.werk{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.werk__logo{width:260px;margin-bottom:16px}
@media (max-width:820px){.werk{grid-template-columns:1fr}}
/* отзывы (3djake) */
.stimmen{display:grid;grid-template-columns:280px 1fr;gap:34px}
.stimmen__bilanz{border:1px solid var(--naht);padding:20px;align-self:start;background:var(--weiss)}
.stimmen__bilanz strong{font-size:2.4rem;line-height:1}
.balken{display:grid;grid-template-columns:62px 1fr 44px;gap:8px;align-items:center;font-size:.84rem;margin-top:6px}
.balken div{height:9px;background:#e9e9e9}
.balken div span{display:block;height:100%;background:var(--glut)}
.stimme{border-bottom:1px solid var(--naht);padding:16px 0;display:grid;grid-template-columns:1fr 170px;gap:16px}
.stimme p{margin:.3em 0 .4em}
.stimme__wer{font-size:.86rem;color:var(--grau)}
.stimme__wer b{display:block;color:var(--tinte)}
.stimme a{font-size:.88rem}
@media (max-width:820px){.stimmen{grid-template-columns:1fr}.stimme{grid-template-columns:1fr;gap:4px}}
/* статья (filamentkontor) */
.artikel h2{margin-top:1.4em}
.artikel h3{margin-top:1.1em}
.artikel figure{margin:20px 0}
.artikel figcaption{font-size:.85rem;color:var(--grau);margin-top:6px}
.zeile{font-size:.86rem;color:var(--grau);margin-bottom:8px}
/* FAQ */
.fragen details{border-bottom:1px solid var(--naht)}
.fragen summary{cursor:pointer;padding:14px 30px 14px 0;font-weight:700;list-style:none;position:relative}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary:after{content:"+";position:absolute;right:4px;top:10px;font-size:1.4rem;color:var(--glut-tief)}
.fragen details[open] summary:after{content:"–"}
.fragen details p{padding-bottom:12px}
/* закрывающий блок с маскотом */
.finale{background:#000;color:var(--weiss);position:relative;overflow:hidden}
.finale .rahmen{display:grid;grid-template-columns:1fr minmax(0,520px);align-items:center;gap:20px}
.finale__text{padding:34px 0}
.finale h2{color:var(--glut)}
.finale .knopf-zk{width:260px}
@media (max-width:820px){.finale .rahmen{grid-template-columns:1fr}.finale__text{padding:26px 0 0}}
/* подвал (arka + filamentkontor) */
.fuss{background:var(--fels);color:#cfcfcf;font-size:.93rem}
.fuss .rahmen{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding-block:40px 24px}
.fuss h3{color:var(--weiss);font-family:"Source Sans 3",sans-serif;font-size:1rem;font-weight:700;margin-bottom:10px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:6px}
.fuss a{text-decoration:none;color:#e6e6e6}
.fuss a:hover{color:var(--glut)}
.fuss__logo{width:190px;margin-bottom:14px}
.fuss address{font-style:normal;margin-top:10px}
.fuss__leiste{border-top:1px solid #2c2c2c;text-align:center;padding:16px;font-size:.86rem}
.fuss__leiste nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-bottom:8px}
.fuss__leiste a{color:#79b7ff}
@media (max-width:900px){.fuss .rahmen{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fuss .rahmen{grid-template-columns:1fr}}
/* раздел */
.rubrik{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;padding:30px 0 10px}
.rubrik h1{text-transform:uppercase}
.rubrik img{max-height:320px;width:auto;margin-inline:auto}
@media (max-width:820px){.rubrik{grid-template-columns:1fr}.rubrik img{max-height:220px}}
.andere{display:flex;flex-wrap:wrap;gap:10px}
.andere a{border:1px solid var(--russ);padding:8px 14px;text-decoration:none;font-weight:600;text-transform:uppercase;font-size:.88rem}
.andere a:hover{background:var(--russ);color:var(--weiss)}
/* PDP (arka + hornbach) */
.produkt{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;padding:28px 0 20px}
.galerie{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:start}
.galerie__leiste{display:flex;flex-direction:column;gap:8px}
.galerie__leiste button{border:1px solid var(--naht);background:var(--weiss);padding:3px;cursor:pointer}
.galerie__leiste button.gewaehlt{border-color:var(--glut);box-shadow:0 0 0 1px var(--glut)}
.galerie__haupt img{width:100%;aspect-ratio:1;object-fit:contain}
.produkt h1{color:var(--glut-tief);text-transform:uppercase;margin-bottom:.1em;font-size:clamp(1.9rem,3.6vw,2.7rem)}
.unterzeile{text-transform:uppercase;color:var(--grau);letter-spacing:.06em;font-size:.95rem;margin-bottom:10px}
.geeignet{columns:2;padding-left:18px;margin:6px 0 16px}
.geeignet li{break-inside:avoid}
.wahl{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.wahl button{border:1px solid #9a9a9a;background:var(--weiss);padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;border-radius:2px}
.wahl button[aria-pressed="true"]{border-color:var(--russ);background:var(--russ);color:var(--weiss)}
.feld{border:1px solid var(--naht);padding:16px;background:var(--asche)}
.feld[hidden]{display:none}
.feld p{margin:.3em 0}
.feld .preis{font-size:1.9rem}
.feld .knopf-zk{width:min(340px,100%);margin-top:12px}
.hinweis{font-size:.8rem;color:var(--grau)}
.vorrat{color:#1a7f2e;font-weight:600}
@media (max-width:860px){.produkt{grid-template-columns:1fr;gap:22px}.galerie{grid-template-columns:1fr}.galerie__leiste{flex-direction:row;flex-wrap:wrap;order:2}.galerie__leiste button{width:62px}}
.laschen{margin-top:30px}
.laschen__kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:480px){.laschen__kopf button{letter-spacing:0;font-size:.82rem;padding:12px 6px;overflow-wrap:anywhere}.laschen__inhalt{padding:16px}}
.laschen__kopf button{font:inherit;text-transform:uppercase;letter-spacing:.05em;padding:13px;border:1px solid #bcbcbc;background:#ededed;cursor:pointer}
.laschen__kopf button[aria-selected="true"]{background:var(--weiss);border-bottom-color:var(--weiss);font-weight:700}
.laschen__inhalt{border:1px solid #bcbcbc;border-top:0;padding:24px}
.laschen__inhalt[hidden]{display:none}
.laschen__inhalt ul{padding-left:20px}
.daten{width:100%;border-collapse:collapse;font-size:.95rem}
.daten th,.daten td{border-bottom:1px solid var(--naht);padding:9px 10px;text-align:left;vertical-align:top}
.daten th{width:38%;background:var(--asche);font-weight:600}
@media (max-width:560px){.daten,.daten tbody,.daten tr,.daten th,.daten td{display:block;width:100%}.daten th{border-bottom:0}}
.gefahr{display:grid;grid-template-columns:170px 1fr;gap:18px;border:1px solid var(--naht);padding:18px}
.gefahr__sym{width:64px;height:64px}
@media (max-width:640px){.gefahr{grid-template-columns:1fr}}
.paar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.paar a{display:block;text-decoration:none;background:var(--weiss);box-shadow:0 2px 10px rgba(0,0,0,.12);padding:14px}
.paar b{display:block;color:#2a3f8f;text-transform:uppercase;font-weight:600;margin-top:8px}
.paar small{text-transform:uppercase;color:var(--grau);font-size:.78rem}
@media (max-width:700px){.paar{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.paar{grid-template-columns:1fr}}
/* сервисные */
.blatt{padding:34px 0 50px}
.blatt h2{margin-top:1.3em}
.schritte{counter-reset:s;list-style:none;padding:0}
.schritte li{counter-increment:s;position:relative;padding:0 0 18px 58px}
.schritte li:before{content:counter(s);position:absolute;left:0;top:0;width:40px;height:40px;background:var(--glut);color:var(--russ);font-weight:700;display:grid;place-items:center;font-family:"Saira Extra Condensed",sans-serif;font-size:1.4rem}
.karteikarte{border:2px solid var(--russ);padding:20px;background:var(--asche)}
.zwei{display:grid;grid-template-columns:1.3fr 1fr;gap:30px}
@media (max-width:760px){.zwei{grid-template-columns:1fr}}
.paragraf h2{font-size:1.5rem}
.paragraf h2 span{color:var(--glut-tief);margin-right:8px}
.leitfaden{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:20px}
.leitfaden a{display:block;text-decoration:none;border:1px solid var(--naht);background:var(--weiss)}
.leitfaden a div{padding:14px 16px}
.leitfaden img{aspect-ratio:16/10;object-fit:cover;width:100%}