/* Kreativ Bau Design – site.css
   Tüm stiller bu dosyada. Sayfalarda <style> ve style="" YOK (CSP: style-src 'self'). */

/* ---- Inter (lokal, OFL-1.1, @fontsource-variable/inter 5.1.0) ---- */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
 src:url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
 unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
 src:url(../fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Grundlagen ---- */
:root{--focus:#7A5A1C;--g:#C5A059;--g-dark:#A8864A;--d:#1A1A1A;--t:#4A4A4A;--line:#E5E7EB;--soft:#F8F9FA;--hdr:76px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px)}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.6;color:var(--d);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--d);color:#fff;padding:10px 16px;text-decoration:none}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---- Platzhalter (nur Entwurf; Live-Build bricht ab, solange vorhanden) ---- */
.ph{background:repeating-linear-gradient(135deg,#ECEDEF 0 18px,#E3E5E8 18px 36px);display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8A8F98;text-align:center;padding:12px}

/* ---- Header ---- */
.site-hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);height:var(--hdr)}
.site-hdr .in{max-width:1240px;margin:0 auto;height:100%;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--d)}
.brand-mark{width:50px;height:52px;flex:0 0 50px;fill:#C5A059}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand-txt b{font-size:16px;font-weight:700;letter-spacing:.08em}
.brand-txt span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--g);font-weight:600;margin-top:3px}
.nav-toggle{position:absolute;opacity:0;pointer-events:none;display:none}
.nav-btn{display:none;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line)}
.nav-btn i{display:block;width:20px;height:2px;background:var(--d);position:relative}
.nav-btn i::before,.nav-btn i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--d)}
.nav-btn i::before{top:-6px}.nav-btn i::after{top:6px}
.nav-toggle:focus-visible + .nav-btn{outline:3px solid var(--focus);outline-offset:3px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:32px}
.site-nav a{text-decoration:none;font-size:15px;font-weight:600;color:var(--d);padding:8px 0;white-space:nowrap;border-bottom:2px solid transparent;transition:border-color .2s}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-color:var(--g)}
.site-nav a.nav-cta{background:var(--g);color:#fff;padding:12px 20px;border:1px solid var(--g);transition:background .2s}
.site-nav a.nav-cta:hover{background:var(--g-dark);border-color:var(--g-dark)}
@media (max-width:1180px){
 .nav-toggle{display:block}
 .nav-btn{display:flex}
 .site-nav{position:absolute;top:var(--hdr);left:0;right:0;background:#fff;border-bottom:1px solid var(--line);display:none;box-shadow:0 12px 24px rgba(0,0,0,.06)}
 .nav-toggle:checked ~ .site-nav{display:block}
 .site-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px}
 .site-nav li{border-bottom:1px solid var(--line)}
 .site-nav li:last-child{border:0;padding-top:16px}
 .site-nav a{display:block;padding:16px 0;border:0}
 .site-nav a.nav-cta{text-align:center}
}

/* ---- Seitenkopf (Unterseiten) ---- */
.page-head{background:var(--d);color:#fff;padding:88px 24px 72px}
.page-head .in{max-width:1240px;margin:0 auto}
.page-head .eye{font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin:0 0 14px}
.page-head h1{font-size:56px;line-height:1.1;font-weight:700;margin:0 0 16px}
.page-head h1 b{color:var(--g)}
.page-head p{font-size:18px;color:rgba(255,255,255,.8);max-width:640px;margin:0}
@media (max-width:767px){.page-head{padding:60px 20px 48px}.page-head h1{font-size:34px}.page-head p{font-size:16px}}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;font-size:16px;font-weight:600;text-decoration:none;border:1px solid var(--g);transition:background .2s,color .2s,transform .2s;cursor:pointer}
.btn-p{background:var(--g);color:#fff}.btn-p:hover{background:var(--g-dark);border-color:var(--g-dark);transform:translateY(-2px)}
.btn-o{background:transparent;color:var(--d)}.btn-o:hover{background:var(--g);color:#fff}
.btn-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}.btn-w:hover{background:rgba(255,255,255,.1)}

/* ---- Allgemeine Sektion ---- */
.sec{padding:100px 24px}.sec-soft{background:var(--soft)}
.sec .in{max-width:1240px;margin:0 auto}
.sec-head{text-align:center;max-width:720px;margin:0 auto 56px}
.sec-head .eye{font-size:21px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin:0 0 14px}
.sec-head h2{font-size:56px;line-height:1.1;font-weight:700;margin:0 0 16px}
.sec-head h2 b{color:var(--g)}
.sec-head p{font-size:18px;color:var(--t);margin:0}
@media (max-width:767px){.sec{padding:68px 20px}.sec-head .eye{font-size:15px}.sec-head h2{font-size:34px}.sec-head p{font-size:16px}}

/* ---- Kollektionen: Zeilen ---- */
.coll{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px 0;border-bottom:1px solid var(--line)}
.coll:first-child{padding-top:0}.coll:last-child{border:0;padding-bottom:0}
.coll:nth-child(even) .coll-img{order:2}
.coll-img{aspect-ratio:4/3}
.coll-num{font-size:14px;font-weight:600;letter-spacing:.16em;color:var(--g);margin:0 0 10px}
.coll h2{font-size:38px;line-height:1.15;margin:0 0 16px}
.coll p{font-size:17px;color:var(--t);margin:0 0 20px}
.coll ul{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.coll li{font-size:13px;font-weight:600;letter-spacing:.04em;border:1px solid var(--line);padding:6px 12px;color:var(--d)}
.coll .btns{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){.coll{grid-template-columns:1fr;gap:28px}.coll:nth-child(even) .coll-img{order:0}.coll h2{font-size:30px}.coll .btn{flex:1 1 100%}}

/* ---- CTA-Band ---- */
.cta-band{background:var(--d);color:#fff;padding:80px 24px;text-align:center}
.cta-band h2{font-size:40px;line-height:1.15;margin:0 0 14px}
.cta-band h2 b{color:var(--g)}
.cta-band p{font-size:18px;color:rgba(255,255,255,.78);max-width:620px;margin:0 auto 32px}
.cta-band .btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
@media (max-width:767px){.cta-band{padding:60px 20px}.cta-band h2{font-size:28px}.cta-band .btn{width:100%}}

/* ---- Textseiten (Über uns, Impressum, Datenschutz) ---- */
.prose{max-width:780px;margin:0 auto}
.prose h2{font-size:28px;line-height:1.25;margin:48px 0 14px}
.prose h3{font-size:20px;margin:32px 0 10px}
.prose p,.prose li{font-size:17px;color:var(--t)}
.prose ul{padding-left:20px}
.prose a{color:var(--d);text-decoration-color:var(--g);text-underline-offset:3px}
.prose address{font-style:normal;font-size:17px;color:var(--t);margin:0 0 16px}
.prose .lead{font-size:20px;color:var(--d);line-height:1.6}
.prose .stand{font-size:14px;color:#5A5A5A;margin-top:48px}

/* ---- Personen / Standorte ---- */
.cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1000px;margin:0 auto}
.pcard{background:#fff;border:1px solid var(--line);padding:36px 32px;display:flex;gap:24px;align-items:flex-start}
.mono{flex:0 0 72px;width:72px;height:72px;border-radius:50%;border:2px solid var(--g);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--g);letter-spacing:.04em}
.pcard .role{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g);margin:0 0 6px}
.pcard h3{font-size:24px;margin:0 0 10px}
.pcard p{font-size:16px;color:var(--t);margin:0}
@media (max-width:767px){.cards2{grid-template-columns:1fr}.pcard{padding:28px 22px}}

/* ---- Kontakt: Aktionskarten ---- */
.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.act{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);padding:32px 26px;text-decoration:none;color:var(--d);transition:transform .25s,box-shadow .25s,border-color .25s}
.act:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,.08);border-color:var(--g)}
.act .ico{width:52px;height:52px;border-radius:50%;border:2px solid var(--g);display:flex;align-items:center;justify-content:center;color:var(--g);margin-bottom:20px}
.act .ico svg{width:24px;height:24px}
.act h3{font-size:20px;margin:0 0 8px}
.act p{font-size:15px;color:var(--t);margin:0 0 16px;flex:1}
.act span{font-size:14px;font-weight:600;color:var(--g)}
@media (max-width:1024px){.acts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.acts{grid-template-columns:1fr}}
.hours{max-width:1000px;margin:56px auto 0;background:var(--soft);border-left:3px solid var(--g);padding:28px 32px}
.hours h3{font-size:20px;margin:0 0 8px}
.hours p{margin:0;color:var(--t)}

/* ---- Footer ---- */
.site-ftr{background:#111;color:rgba(255,255,255,.75);padding:72px 24px 32px;font-size:15px}
.site-ftr .in{max-width:1240px;margin:0 auto}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
.site-ftr .brand{color:#fff;margin-bottom:18px}
.site-ftr .ftr-h{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g);margin:0 0 14px}
.site-ftr p{margin:0 0 6px}
.site-ftr a{color:rgba(255,255,255,.85);text-decoration:none}
.site-ftr a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--g)}
.site-ftr ul{list-style:none;margin:0;padding:0}.site-ftr li{margin:0 0 8px}
.ftr-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;font-size:13px;color:rgba(255,255,255,.5)}
@media (max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ftr-grid{grid-template-columns:1fr;gap:32px}.site-ftr{padding:56px 20px 28px}}

/* ---- QR-Seite ---- */
.qr-body{background:var(--soft)}
.qr{max-width:520px;margin:0 auto;padding:28px 20px 48px}
.qr .brand{margin:0 0 28px}
.qr-hero{background:var(--d);color:#fff;padding:32px 26px;margin-bottom:20px}
.qr-hero .eye{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin:0 0 10px}
.qr-hero h1{font-size:30px;line-height:1.15;margin:0 0 10px}
.qr-hero p{margin:0;color:rgba(255,255,255,.8);font-size:16px}
.qr-list{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.qr-btn{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);padding:18px 20px;text-decoration:none;color:var(--d);min-height:64px}
.qr-btn:hover{border-color:var(--g)}
.qr-btn .ico{flex:0 0 40px;width:40px;height:40px;border-radius:50%;border:2px solid var(--g);display:flex;align-items:center;justify-content:center;color:var(--g)}
.qr-btn .ico svg{width:20px;height:20px}
.qr-btn b{display:block;font-size:17px}
.qr-btn small{display:block;font-size:14px;color:var(--t)}
.qr-btn.primary{background:var(--g);border-color:var(--g);color:#fff}
.qr-btn.primary small{color:rgba(255,255,255,.85)}
.qr-btn.primary .ico{border-color:#fff;color:#fff}
.qr-info{background:#fff;border:1px solid var(--line);padding:22px 20px;font-size:15px;color:var(--t)}
.qr-info b{color:var(--d)}
.qr-foot{text-align:center;font-size:13px;color:#888;margin-top:28px}
.qr-foot a{color:#666}

/* ---- 404 ---- */
.nf{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:80px 24px}
.nf .code{font-size:96px;font-weight:700;color:var(--g);line-height:1;margin:0 0 12px}
.nf h1{font-size:32px;margin:0 0 12px}
.nf p{color:var(--t);margin:0 0 28px}
.note-map{max-width:1000px;margin:24px auto 0;font-size:14px;color:#5A5A5A;text-align:center}
.pcard p + p{margin-top:16px}
.nf .btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* ---- Brotkrümel ---- */
.crumbs ol{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:rgba(255,255,255,.6)}
.crumbs li+li::before{content:"›";margin-right:6px;color:rgba(255,255,255,.4)}
.crumbs a{color:rgba(255,255,255,.75);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs a[aria-current="page"]{color:#fff}

/* ---- Kategorie-Seite ---- */
.cat-intro{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
.cat-intro .cat-img{overflow:hidden;background:#ECEDEF}
.cat-intro .cat-img img{width:100%;height:auto}
.cat-intro .lead{font-size:20px;line-height:1.6;color:var(--d);margin:0 0 18px}
.cat-intro p{font-size:17px;color:var(--t);margin:0 0 18px}
.facts{list-style:none;margin:24px 0 28px;padding:0;border-top:1px solid var(--line)}
.facts li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts li b{flex:0 0 150px;font-weight:600;color:var(--d)}
.facts li span{color:var(--t)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){.cat-intro{grid-template-columns:1fr;gap:28px}.cat-intro .btn{flex:1 1 100%}.facts li{flex-direction:column;gap:2px}.facts li b{flex:none}}
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;font-size:18px;font-weight:600;padding:18px 36px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:24px;font-weight:400;color:var(--g)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 20px;color:var(--t);font-size:16px;max-width:720px}
.related{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.related a{display:block;text-decoration:none;color:var(--d);border:1px solid var(--line);background:#fff;transition:border-color .2s}
.related a:hover{border-color:var(--g)}
.related .r-img{aspect-ratio:4/3;overflow:hidden;background:#ECEDEF}
.related .r-img img{width:100%;height:100%;object-fit:cover}
.related span{display:block;padding:14px 16px;font-weight:600;font-size:15px}
@media (max-width:900px){.related{grid-template-columns:repeat(2,1fr)}}

/* ---- Kollektionen-Übersicht ---- */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hub a{display:flex;flex-direction:column;text-decoration:none;color:var(--d);background:#fff;border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.hub a:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.10)}
.hub .h-img{aspect-ratio:4/3;overflow:hidden;background:#ECEDEF}
.hub .h-img img{width:100%;height:100%;object-fit:cover}
.hub .h-body{padding:24px 24px 26px}
.hub h2{font-size:22px;margin:0 0 8px}
.hub p{font-size:15px;color:var(--t);margin:0 0 16px}
.hub .more{font-size:14px;font-weight:600;color:var(--g)}
@media (max-width:1024px){.hub{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.hub{grid-template-columns:1fr}}

/* ---- Profi-Band & Vorteile ---- */
.profi-band{background:var(--d);color:#fff;padding:96px 24px}
.profi-band .in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.profi-band .eye{font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin:0 0 14px}
.profi-band h2{font-size:44px;line-height:1.12;margin:0 0 18px}
.profi-band h2 b{color:var(--g)}
.profi-band p{font-size:18px;color:rgba(255,255,255,.78);margin:0 0 28px}
.perks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.perks li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);padding:24px 22px}
.perks .ico{width:44px;height:44px;border-radius:50%;border:2px solid var(--g);display:flex;align-items:center;justify-content:center;color:var(--g);margin-bottom:14px}
.perks .ico svg{width:20px;height:20px}
.perks b{display:block;font-size:17px;margin-bottom:6px}
.perks span{font-size:14px;color:rgba(255,255,255,.7)}
.profi-band.light{background:var(--soft);color:var(--d)}
.profi-band.light p{color:var(--t)}
.profi-band.light .perks li{background:#fff;border-color:var(--line)}
.profi-band.light .perks span{color:var(--t)}
@media (max-width:900px){.profi-band{padding:68px 20px}.profi-band .in{grid-template-columns:1fr;gap:36px}.profi-band h2{font-size:32px}.perks{grid-template-columns:1fr}.profi-band .btn{width:100%}}

/* ---- Bildgalerie (Showroom) ---- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery figure{margin:0;overflow:hidden;background:#ECEDEF}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.gallery figure.wide{grid-column:span 2}
.gallery figure.wide img{aspect-ratio:auto;height:100%}
@media (max-width:767px){.gallery{grid-template-columns:1fr}.gallery figure.wide{grid-column:auto}}
.note{max-width:1000px;margin:28px auto 0;font-size:15px;color:var(--t);text-align:center}
.hours .hours-h{font-size:20px;margin:0 0 8px}
.pcard .pcard-h{font-size:24px;margin:0 0 10px}
.act{cursor:default}
a.act{cursor:pointer}

/* ---- block: 01-hero ---- */
.kbs-hero{--g:#C5A059;--d:#1A1A1A;position:relative;min-height:88vh;display:flex;align-items:flex-end;color:#fff;background:#2b2b2b;overflow:hidden}
.kbs-hero *{box-sizing:border-box}
.kbs-hero .kbs-bg{position:absolute;inset:0;background:#2b2b2b}
.kbs-hero .kbs-bg picture,.kbs-hero .kbs-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.kbs-hero .kbs-bg span{position:absolute;top:24px;right:24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35);border:1px dashed rgba(255,255,255,.3);padding:10px 16px}
.kbs-hero .kbs-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,12,12,.86) 0%,rgba(12,12,12,.72) 45%,rgba(12,12,12,.35) 100%),linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.6) 100%)}
@media (max-width:767px){.kbs-hero .kbs-shade{background:linear-gradient(180deg,rgba(12,12,12,.55) 0%,rgba(12,12,12,.82) 45%,rgba(12,12,12,.92) 100%)}}
.kbs-hero .kbs-in{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:120px 24px 72px}
.kbs-hero .kbs-eye{font-size:21px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin:0 0 18px}
.kbs-hero .kbs-title{font-size:64px;line-height:1.05;font-weight:700;margin:0 0 22px;max-width:820px;color:#fff}
.kbs-hero .kbs-title b{color:var(--g);font-weight:700}
.kbs-hero .kbs-sub{font-size:19px;line-height:1.6;color:rgba(255,255,255,.85);max-width:620px;margin:0 0 36px}
.kbs-hero .kbs-btns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:48px}
.kbs-hero .kbs-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;font-size:16px;font-weight:600;text-decoration:none;border:1px solid var(--g);transition:background .25s,color .25s,transform .25s}
.kbs-hero .kbs-btn--p{background:var(--g);color:#fff}
.kbs-hero .kbs-btn--p:hover{background:transparent;color:#fff;transform:translateY(-2px)}
.kbs-hero .kbs-btn--o{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.kbs-hero .kbs-btn--o:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.kbs-hero .kbs-info{display:flex;flex-wrap:wrap;gap:12px 36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2);font-size:15px;color:rgba(255,255,255,.8)}
.kbs-hero .kbs-info strong{color:#fff;font-weight:600;margin-right:6px}
@media (max-width:767px){
 .kbs-hero{min-height:92vh}
 .kbs-hero .kbs-in{padding:96px 20px 44px}
 .kbs-hero .kbs-eye{font-size:15px}
 .kbs-hero .kbs-title{font-size:38px}
 .kbs-hero .kbs-sub{font-size:16px}
 .kbs-hero .kbs-btn{width:100%;justify-content:center}
 .kbs-hero .kbs-info{flex-direction:column}
}
/* ---- block: 02-sortiment ---- */
.kbs-sort{--g:#C5A059;--d:#1A1A1A;background:#fff;padding:110px 24px}
.kbs-sort *{box-sizing:border-box}
.kbs-sort .kbs-wrap{max-width:1240px;margin:0 auto}
.kbs-sort .kbs-head{text-align:center;max-width:720px;margin:0 auto 60px}
.kbs-sort .kbs-eye{font-size:21px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin:0 0 14px}
.kbs-sort .kbs-title{font-size:56px;line-height:1.1;font-weight:700;color:var(--d);margin:0 0 18px}
.kbs-sort .kbs-title b{color:var(--g)}
.kbs-sort .kbs-lead{font-size:18px;line-height:1.6;color:#4A4A4A;margin:0}
.kbs-sort .kbs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.kbs-sort .kbs-card{display:flex;flex-direction:column;background:#fff;border:1px solid #E5E7EB;text-decoration:none;color:inherit;transition:transform .3s,box-shadow .3s}
.kbs-sort .kbs-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.10)}
.kbs-sort .kbs-img{aspect-ratio:4/3;overflow:hidden;background:#ECEDEF}
.kbs-sort .kbs-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kbs-sort .kbs-card:hover .kbs-img img{transform:scale(1.04)}
.kbs-sort .kbs-ph{aspect-ratio:4/3;background:repeating-linear-gradient(135deg,#ECEDEF 0 18px,#E3E5E8 18px 36px);display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8A8F98;text-align:center;padding:12px}
.kbs-sort .kbs-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.kbs-sort .kbs-name{font-size:22px;font-weight:700;color:var(--d);margin:0 0 8px}
.kbs-sort .kbs-txt{font-size:15px;line-height:1.6;color:#5A5A5A;margin:0 0 20px;flex:1}
.kbs-sort .kbs-more{font-size:14px;font-weight:600;color:var(--g);letter-spacing:.04em}
.kbs-sort .kbs-card--cta{background:var(--d);border-color:var(--d);color:#fff;justify-content:center;padding:40px 32px}
.kbs-sort .kbs-card--cta .kbs-name{color:#fff;font-size:26px;line-height:1.25;margin-bottom:14px}
.kbs-sort .kbs-card--cta .kbs-txt{color:rgba(255,255,255,.75);flex:0}
.kbs-sort .kbs-card--cta .kbs-more{display:inline-block;border:1px solid var(--g);padding:14px 24px;align-self:flex-start;transition:background .25s}
.kbs-sort .kbs-card--cta:hover .kbs-more{background:var(--g);color:#fff}
@media (max-width:1024px){.kbs-sort .kbs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){
 .kbs-sort{padding:72px 20px}
 .kbs-sort .kbs-eye{font-size:15px}
 .kbs-sort .kbs-title{font-size:34px}
 .kbs-sort .kbs-lead{font-size:16px}
 .kbs-sort .kbs-grid{grid-template-columns:1fr}
}
/* ---- block: 03-warum ---- */
.kbs-why{--g:#C5A059;--d:#1A1A1A;background:#F8F9FA;padding:110px 24px}
.kbs-why *{box-sizing:border-box}
.kbs-why .kbs-wrap{max-width:1240px;margin:0 auto}
.kbs-why .kbs-head{text-align:center;max-width:720px;margin:0 auto 60px}
.kbs-why .kbs-eye{font-size:21px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin:0 0 14px}
.kbs-why .kbs-title{font-size:56px;line-height:1.1;font-weight:700;color:var(--d);margin:0}
.kbs-why .kbs-title b{color:var(--g)}
.kbs-why .kbs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.kbs-why .kbs-card{background:#fff;padding:44px 34px 40px;border-top:3px solid var(--g);box-shadow:0 2px 10px rgba(0,0,0,.04);transition:transform .3s,box-shadow .3s}
.kbs-why .kbs-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.kbs-why .kbs-ico{width:64px;height:64px;border-radius:50%;border:2px solid var(--g);display:flex;align-items:center;justify-content:center;margin-bottom:26px;color:var(--g)}
.kbs-why .kbs-ico svg{width:28px;height:28px}
.kbs-why .kbs-name{font-size:22px;font-weight:700;color:var(--d);margin:0 0 12px}
.kbs-why .kbs-txt{font-size:16px;line-height:1.65;color:#5A5A5A;margin:0}
@media (max-width:1024px){.kbs-why .kbs-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
@media (max-width:767px){
 .kbs-why{padding:72px 20px}
 .kbs-why .kbs-eye{font-size:15px}
 .kbs-why .kbs-title{font-size:34px}
}
/* ---- block: 04-ansprechpartner ---- */
.kbs-ap{--g:#C5A059;--d:#1A1A1A;background:#E5E7EB;padding:110px 24px}
.kbs-ap *{box-sizing:border-box}
.kbs-ap .kbs-wrap{max-width:1000px;margin:0 auto}
.kbs-ap .kbs-head{text-align:center;margin:0 auto 48px}
.kbs-ap .kbs-eye{font-size:21px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin:0 0 14px}
.kbs-ap .kbs-title{font-size:56px;line-height:1.1;font-weight:700;color:var(--d);margin:0}
.kbs-ap .kbs-title b{color:var(--g)}
.kbs-ap .kbs-card{display:grid;grid-template-columns:300px 1fr;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.08)}
.kbs-ap .kbs-mono{min-height:320px;background:#1A1A1A;display:flex;align-items:center;justify-content:center}
.kbs-ap .kbs-mono span{width:132px;height:132px;border-radius:50%;border:2px solid #C5A059;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:700;letter-spacing:.04em;color:#C5A059}
.kbs-ap .kbs-ph{min-height:320px;background:repeating-linear-gradient(135deg,#ECEDEF 0 18px,#E3E5E8 18px 36px);display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8A8F98;text-align:center;padding:12px}
.kbs-ap .kbs-body{padding:48px 48px 44px;display:flex;flex-direction:column;justify-content:center}
.kbs-ap .kbs-role{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g);margin:0 0 10px}
.kbs-ap .kbs-name{font-size:32px;font-weight:700;color:var(--d);margin:0 0 14px}
.kbs-ap .kbs-txt{font-size:16px;line-height:1.65;color:#5A5A5A;margin:0 0 28px;max-width:480px}
.kbs-ap .kbs-btns{display:flex;flex-wrap:wrap;gap:12px}
.kbs-ap .kbs-btn{display:inline-flex;align-items:center;padding:14px 24px;font-size:15px;font-weight:600;text-decoration:none;border:1px solid var(--g);transition:background .25s,color .25s}
.kbs-ap .kbs-btn--p{background:var(--g);color:#fff}
.kbs-ap .kbs-btn--p:hover{background:transparent;color:var(--d)}
.kbs-ap .kbs-btn--o{background:transparent;color:var(--d)}
.kbs-ap .kbs-btn--o:hover{background:var(--g);color:#fff}
@media (max-width:767px){
 .kbs-ap{padding:72px 20px}
 .kbs-ap .kbs-eye{font-size:15px}
 .kbs-ap .kbs-title{font-size:34px}
 .kbs-ap .kbs-card{grid-template-columns:1fr}
 .kbs-ap .kbs-ph,.kbs-ap .kbs-mono{min-height:200px}
 .kbs-ap .kbs-body{padding:32px 24px}
 .kbs-ap .kbs-name{font-size:26px}
 .kbs-ap .kbs-btn{width:100%;justify-content:center}
}
/* ---- block: 05-besuch ---- */
.kbs-visit{--g:#C5A059;--d:#1A1A1A;position:relative;background:#1f1f1f;color:#fff;padding:110px 24px;overflow:hidden}
.kbs-visit *{box-sizing:border-box}
.kbs-visit .kbs-bg{position:absolute;inset:0;background:#222}
.kbs-visit .kbs-bg picture,.kbs-visit .kbs-bg img{display:block;width:100%;height:100%;object-fit:cover}
.kbs-visit .kbs-bg span{position:absolute;top:24px;right:24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);border:1px dashed rgba(255,255,255,.25);padding:8px 12px}
.kbs-visit .kbs-shade{position:absolute;inset:0;background:rgba(10,10,10,.72)}
.kbs-visit .kbs-wrap{position:relative;max-width:1240px;margin:0 auto}
.kbs-visit .kbs-head{text-align:center;max-width:720px;margin:0 auto 56px}
.kbs-visit .kbs-eye{font-size:21px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin:0 0 14px}
.kbs-visit .kbs-title{font-size:56px;line-height:1.1;font-weight:700;color:#fff;margin:0 0 16px}
.kbs-visit .kbs-title b{color:var(--g)}
.kbs-visit .kbs-lead{font-size:18px;line-height:1.6;color:rgba(255,255,255,.8);margin:0}
.kbs-visit .kbs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1000px;margin:0 auto 48px}
.kbs-visit .kbs-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);padding:40px 36px;backdrop-filter:blur(4px)}
.kbs-visit .kbs-tag{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g);margin:0 0 12px}
.kbs-visit .kbs-name{font-size:26px;font-weight:700;color:#fff;margin:0 0 14px}
.kbs-visit .kbs-addr{font-size:17px;line-height:1.6;color:rgba(255,255,255,.85);margin:0 0 8px}
.kbs-visit .kbs-hours{font-size:15px;line-height:1.6;color:rgba(255,255,255,.65);margin:0 0 24px}
.kbs-visit .kbs-link{font-size:14px;font-weight:600;color:var(--g);text-decoration:none;letter-spacing:.04em;border-bottom:1px solid transparent;transition:border-color .25s}
.kbs-visit .kbs-link:hover{border-color:var(--g)}
.kbs-visit .kbs-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.kbs-visit .kbs-btn{display:inline-flex;align-items:center;padding:16px 30px;font-size:16px;font-weight:600;text-decoration:none;border:1px solid var(--g);transition:background .25s,transform .25s}
.kbs-visit .kbs-btn--p{background:var(--g);color:#fff}
.kbs-visit .kbs-btn--p:hover{background:transparent;color:#fff;transform:translateY(-2px)}
.kbs-visit .kbs-btn--o{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.kbs-visit .kbs-btn--o:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
@media (max-width:767px){
 .kbs-visit{padding:72px 20px}
 .kbs-visit .kbs-eye{font-size:15px}
 .kbs-visit .kbs-title{font-size:34px}
 .kbs-visit .kbs-lead{font-size:16px}
 .kbs-visit .kbs-grid{grid-template-columns:1fr}
 .kbs-visit .kbs-card{padding:30px 24px}
 .kbs-visit .kbs-btn{width:100%;justify-content:center}
}

/* ---- Kontrast (WCAG AA): Gold als TEXT auf hellem Grund dunkler, Gold-Buttons mit dunkler Schrift ---- */
:root{--g-ink:#7A5A1C}
.site-hdr .brand-txt span,.kbs-sort .kbs-eye,.kbs-sort .kbs-more,.kbs-why .kbs-eye,.kbs-ap .kbs-eye,.kbs-ap .kbs-role,
.sec .sec-head .eye,.pcard .role,.act span,.hub .more,.coll-num,.profi-band.light .eye,.note a,
.kbs-sort .kbs-title b,.kbs-why .kbs-title b,.kbs-ap .kbs-title b,.sec-head h2 b,.page-head.light h1 b,.prose h2 b{color:var(--g-ink)}
.kbs-why .kbs-ico,.act .ico,.perks .ico{color:var(--g-ink);border-color:var(--g-ink)}
.profi-band:not(.light) .perks .ico{color:#C5A059;border-color:#C5A059}
.kbs-sort .kbs-card--cta .kbs-more{color:#C5A059}
.btn-p,.kbs-hero .kbs-btn--p,.kbs-visit .kbs-btn--p,.kbs-ap .kbs-btn--p,.site-nav a.nav-cta,.qr-btn.primary{color:#1A1A1A}
.qr-btn.primary small{color:rgba(26,26,26,.8)}
.qr-btn.primary .ico{border-color:#1A1A1A;color:#1A1A1A}
.btn-o:hover,.kbs-ap .kbs-btn--o:hover{color:#1A1A1A}
.qr .brand-txt span{color:var(--g-ink)}
.qr-btn .ico{color:var(--g-ink);border-color:var(--g-ink)}
.qr-btn.primary small{color:#1A1A1A}
.qr-foot{color:#555}
.qr-foot a{color:#444}

.kbs-sort .kbs-card--cta{grid-column:1/-1;flex-direction:row;align-items:center;gap:32px;padding:32px 40px}
.kbs-sort .kbs-card--cta .kbs-name{margin:0;flex:0 1 auto}
.kbs-sort .kbs-card--cta .kbs-txt{flex:1 1 auto;margin:0}
.kbs-sort .kbs-card--cta .kbs-more{align-self:center;flex:0 0 auto}
@media (max-width:767px){.kbs-sort .kbs-card--cta{flex-direction:column;align-items:flex-start;gap:14px;padding:32px 24px}.kbs-sort .kbs-card--cta .kbs-more{align-self:flex-start}}

/* ---- Strichzeichnungen (src/illus, inline eingesetzt) ---- */
.ill{display:block;width:100%;height:auto;fill:none;stroke:var(--ill-line,#1A1A1A);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ill .a{stroke:var(--ill-acc,#C5A059)}
.ill .f{fill:var(--ill-acc,#C5A059);fill-opacity:.2;stroke:none}
.page-head .ill,.profi-band:not(.light) .ill,.cta-band .ill{--ill-line:rgba(255,255,255,.82)}
.page-head .ill .f{fill-opacity:.16}

/* Kacheln-Muster auf dunklen Flächen */
.page-head,.cta-band,.profi-band:not(.light),.site-ftr{background-image:url(/assets/img/pattern-tiles.svg);background-size:160px 160px}

/* Seitenkopf mit Zeichnung */
.page-head.has-ill .in{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:56px;align-items:center}
.page-head.has-ill.wide-ill .in{grid-template-columns:minmax(0,1fr) 400px}
.page-head .hd-ill{justify-self:end;width:100%}
@media (max-width:900px){.page-head.has-ill .in,.page-head.has-ill.wide-ill .in{grid-template-columns:1fr;gap:28px}.page-head .hd-ill{justify-self:start;max-width:160px}.page-head.wide-ill .hd-ill{max-width:320px}}

/* So einfach geht's – 4 Schritte */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.steps::before{content:"";position:absolute;top:21px;left:12.5%;right:12.5%;border-top:2px dashed var(--g);opacity:.55}
.steps li{text-align:center;position:relative}
.steps .st-n{display:inline-flex;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--g);color:var(--g-ink,#7A5A1C);font-weight:700;align-items:center;justify-content:center;position:relative;z-index:1}
.steps .st-ill{max-width:220px;margin:18px auto 14px}
.steps h3{font-size:20px;margin:0 0 8px}
.steps p{font-size:15px;color:var(--t);margin:0 auto;max-width:260px}
@media (max-width:1024px){.steps{grid-template-columns:repeat(2,1fr);row-gap:48px}.steps::before{display:none}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* Zeichnung statt Icon in Aktionskarten */
.act .act-ill{margin:-6px -4px 14px;max-width:200px}

/* Karte */
.map{margin:48px auto 0;max-width:820px;background:#fff;border:1px solid var(--line);padding:24px 24px 16px}
.map figcaption{font-size:14px;color:#5A5A5A;margin-top:10px}
.ill-karte text{fill:#4A4A4A;stroke:#fff;stroke-width:4px;paint-order:stroke;font-size:15px;font-weight:500}
.ill-karte .river{stroke:#9DB7C9;stroke-width:3.5}
.ill-karte .road{stroke:#BDBDBD;stroke-width:2;stroke-dasharray:7 6}
.ill-karte .b10{stroke:#C9C9C9;stroke-width:3.5;stroke-dasharray:none}
.ill-karte .town{fill:#fff;stroke:#4A4A4A;stroke-width:1.6}
.ill-karte .pin{fill:#C5A059;stroke:#7A5A1C;stroke-width:1.2}
.ill-karte .pin2{fill:#fff;stroke:#C5A059;stroke-width:2.4}
.ill-karte .pin-dot{fill:#fff;stroke:none}
.ill-karte .pin2 + .pin-dot{fill:#C5A059}
.ill-karte .lbl{font-weight:700;font-size:17px;fill:#1A1A1A}
.ill-karte .lbl2{font-weight:600;font-size:16px;fill:#1A1A1A}
.ill-karte .tag{font-size:12px;font-weight:700;fill:#6B6B6B}
.ill-karte .dir{font-size:14px;fill:#6B6B6B}
.ill-karte .water{font-style:italic;fill:#56778E;font-size:13px}
@media (max-width:600px){.ill-karte .minor{display:none}.map{padding:12px 10px 10px}.ill-karte text{font-size:20px}.ill-karte .lbl{font-size:22px}.ill-karte .lbl2{font-size:21px}}

/* Kategorie-Abzeichen auf den Übersichtskarten */
.hub .h-img{position:relative}
.hub .h-badge{position:absolute;left:16px;bottom:16px;width:64px;height:64px;background:#fff;border-radius:50%;padding:12px;box-shadow:0 6px 18px rgba(0,0,0,.12)}

/* 404 */
.nf .nf-ill{max-width:240px;margin:0 auto 8px}

/* Hover-Feinheiten */
.kbs-sort .kbs-card--cta:hover .kbs-more{color:#1A1A1A}
.hub .h-img img,.related .r-img img,.gallery img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hub a:hover .h-img img,.related a:hover .r-img img,.gallery figure:hover img{transform:scale(1.05)}
.related .r-img{overflow:hidden}
.kbs-more,.hub .more{display:inline-block;transition:transform .25s}
.kbs-card:hover .kbs-more,.hub a:hover .more{transform:translateX(4px)}
.ill-karte{overflow:hidden}
.nf .code{color:var(--g-ink)}
.act .act-h{font-size:20px;margin:0 0 8px}
.brand-txt .gmbh{text-transform:none;letter-spacing:.04em;font-size:13px;font-weight:600}

/* ---- Prüfbericht 15.10.2026 ---- */
/* A11Y-02: Fokusrahmen auf dunklen Flächen hell (Gold auf #1A1A1A ≈ 7:1), auf hellen dunkles Gold (#7A5A1C ≥ 5:1) */
.page-head,.site-ftr,.cta-band,.profi-band:not(.light),.kbs-hero,.kbs-visit{--focus:#C5A059}
/* RWD-01: lange deutsche Wörter in Überschriften umbrechen statt die Seite zu verbreitern */
h1,h2,h3{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
/* RWD-02: Personenkarte auf sehr schmalen Bildschirmen untereinander */
@media (max-width:400px){.pcard{flex-direction:column;gap:16px;padding:24px 18px}}
/* UX-01: Hinweiszeile unter den Kategorie-Buttons */
.cta-note{font-size:14px;color:#5A5A5A;margin:14px 0 0}
.cta-note a{color:var(--g-ink);font-weight:600}
/* Lange E-Mail-Adressen dürfen auf schmalen Bildschirmen umbrechen */
.kbs-btn--mail,.mail-wrap{overflow-wrap:break-word}
/* ---- QR-Seite (Okt. 2026): Ansprechpartner oben, Rückruf, Showroom-Kacheln ---- */
.qr-hero{position:relative;padding:0;overflow:hidden}
.qr-hero-img{position:relative}
.qr-hero-img img{display:block;width:100%;height:190px;object-fit:cover;opacity:.6}
.qr-hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,26,26,0) 35%,#1A1A1A 100%)}
.qr-hero-txt{position:relative;padding:0 26px 30px;margin-top:-40px}
.qr-hero h1 b{color:var(--g)}
.qr-ap{background:#fff;border:1px solid var(--line);border-top:3px solid var(--g);padding:24px 20px 20px;margin-bottom:12px}
.qr-ap-top{display:flex;gap:16px;align-items:center;margin-bottom:20px}
.qr-mono{flex:0 0 64px;width:64px;height:64px;border-radius:50%;background:#1A1A1A;color:var(--g);box-shadow:inset 0 0 0 2px var(--g);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;letter-spacing:.04em}
.qr-ap-role{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g-ink);margin:0 0 4px}
.qr-ap h2{font-size:24px;line-height:1.2;margin:0 0 2px}
.qr-ap-sub{font-size:14px;color:var(--t);margin:0}
.qr-ap-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.qr-btn--sm{flex-direction:column;justify-content:flex-start;text-align:center;gap:8px;padding:14px 10px;min-height:0}
.qr-btn--sm .ico{flex:0 0 auto;width:36px;height:36px}
.qr-btn--sm b{font-size:15px;line-height:1.25}
.qr-callback{margin-bottom:8px;border-style:dashed;border-color:var(--g-dark)}
.qr-h{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g-ink);margin:32px 0 12px}
.qr-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qr-tile{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#1A1A1A;color:#fff;text-decoration:none}
.qr-tile picture{display:block;height:100%}
.qr-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.qr-tile:hover img{transform:scale(1.05)}
.qr-tile span{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(180deg,rgba(26,26,26,0),rgba(26,26,26,.92));color:#fff;font-weight:600;font-size:15px}
.qr-more{margin:14px 0 28px;font-size:15px}
.qr-more a{color:var(--g-ink);font-weight:600}
.qr-info p{margin:0 0 14px}
.qr-info p:last-child{margin:0}
.qr-info a{color:var(--g-ink);font-weight:600;overflow-wrap:break-word}
@media (prefers-reduced-motion:reduce){.qr-tile img{transition:none}.qr-tile:hover img{transform:none}}
/* ---- Serien-Galerie mit eigenen Profi-Fotos (Okt. 2026) ---- */
.sec-tight{padding-top:0}
.serien{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.serien figure{margin:0;overflow:hidden;background:#ECEDEF}
.serien img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.serien figure:hover img{transform:scale(1.04)}
.serien-note{margin:18px 0 0;font-size:15px;color:var(--t)}
@media (max-width:767px){.serien{grid-template-columns:1fr 1fr;gap:10px}}
@media (prefers-reduced-motion:reduce){.serien img{transition:none}.serien figure:hover img{transform:none}}
/* ---- Katalog-Seite (Nov. 2026) ---- */
.kat-cover{display:block;box-shadow:0 18px 40px rgba(0,0,0,.18);max-width:460px;transition:transform .3s}
.kat-cover img{display:block;width:100%;height:auto}
.kat-cover:hover{transform:translateY(-4px)}
.kat .kat-eye{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g-ink);margin:0 0 10px}
.kat-h{font-size:36px;line-height:1.15;margin:0 0 16px}
.kat-h b{color:var(--g)}
@media (max-width:900px){.kat-cover{margin:0 auto;max-width:320px}}
@media (prefers-reduced-motion:reduce){.kat-cover{transition:none}.kat-cover:hover{transform:none}}
/* ---- Startseite: Einblicke + kompaktere Handy-Ansicht (Nov. 2026) ---- */
.look{background:#1A1A1A;color:#fff;padding:110px 24px}
.look-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:56px;align-items:center}
.look-head .eye{font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin:0 0 14px}
.look-head h2{font-size:44px;line-height:1.1;margin:0 0 18px;color:#fff}
.look-head h2 b{color:var(--g)}
.look-head p{font-size:17px;line-height:1.65;color:rgba(255,255,255,.78);margin:0 0 26px}
.look-link{display:inline-block;color:var(--g);font-weight:600;text-decoration:none;border-bottom:1px solid var(--g);padding-bottom:4px}
.look-link:hover{color:#fff;border-color:#fff}
.look-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:520px}
.look-grid figure{margin:0;overflow:hidden;background:#2b2b2b;min-height:0}
.look-grid .look-big{grid-row:span 2}
.look-grid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.look-grid figure:hover img{transform:scale(1.05)}
@media (max-width:1024px){.look-in{grid-template-columns:1fr;gap:36px}.look-grid{height:460px}}
@media (max-width:767px){
 .look{padding:72px 20px}
 .look-head h2{font-size:32px}
 .look-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}
 .look-grid .look-big{grid-column:span 2;grid-row:auto;aspect-ratio:3/2}
 .look-grid figure:not(.look-big){aspect-ratio:1/1}
 /* Sortiment: zwei Spalten, kurze Karten */
 .kbs-sort .kbs-grid{grid-template-columns:1fr 1fr;gap:12px}
 .kbs-sort .kbs-img{aspect-ratio:1/1}
 .kbs-sort .kbs-body{padding:14px 14px 16px}
 .kbs-sort .kbs-name{font-size:17px;margin:0 0 6px}
 .kbs-sort .kbs-txt{display:none}
 .kbs-sort .kbs-more{font-size:13px}
 .kbs-sort .kbs-card--cta{grid-column:span 2;padding:28px 22px}
 .kbs-sort .kbs-card--cta .kbs-txt{display:block}
 /* Warum: kompakte Zeilen */
 .kbs-why .kbs-card{display:grid;grid-template-columns:48px 1fr;gap:4px 16px;padding:24px 20px}
 .kbs-why .kbs-ico{width:48px;height:48px;margin:0;grid-row:span 2}
 .kbs-why .kbs-ico svg{width:22px;height:22px}
 .kbs-why .kbs-name{font-size:19px;margin:0 0 4px}
 .kbs-why .kbs-txt{font-size:15px}
 .kbs-why .kbs-grid{gap:12px}
 /* Schritte: Zeichnung klein links */
 .steps{grid-template-columns:1fr;row-gap:28px}
 .steps li{display:grid;grid-template-columns:96px 1fr;column-gap:16px;text-align:left;align-items:start}
 .steps .st-n{grid-column:2;width:34px;height:34px;font-size:14px;margin-bottom:6px}
 .steps .st-ill{grid-column:1;grid-row:1 / span 3;max-width:96px;margin:0}
 .steps h3{grid-column:2;font-size:18px;margin:0 0 4px}
 .steps p{grid-column:2;margin:0;max-width:none;font-size:15px}
}
.look{--focus:#C5A059}
/* ---- Hinweisseite vor Google Maps ---- */
.route-box{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);border-top:3px solid var(--g);padding:40px 40px 36px}
.route-eye{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g-ink);margin:0 0 10px}
.route-h{font-size:28px;line-height:1.2;margin:0 0 18px}
.route-box p{font-size:16px;line-height:1.65;color:var(--t);margin:0 0 14px}
.route-box p a{color:var(--g-ink);font-weight:600}
.route-box .btns{margin:26px 0 22px}
.route-alt{font-size:15px;border-top:1px solid var(--line);padding-top:18px}
.route-alt b{color:var(--d)}
@media (max-width:767px){.route-box{padding:28px 20px}.route-h{font-size:24px}.route-box .btn{flex:1 1 100%}}

/* Über uns – Showroom-Foto */
.ueber-img{max-width:900px;margin:36px auto}
.ueber-img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.ueber-img figcaption{font-size:14px;color:var(--t);margin-top:10px}
/* Profis-Vorteile mobil kompakter */
@media (max-width:767px){
 .perks{gap:10px}
 .perks li{display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:start;padding:16px}
 .perks .ico{grid-row:1/3;width:40px;height:40px;margin:0}
 .perks b{font-size:16px;margin-bottom:2px}
}

/* ---- Bewegung: nur CSS, kein JavaScript. Wer "Bewegung reduzieren" eingestellt hat, sieht alles statisch. ---- */
@media (prefers-reduced-motion:no-preference){
 @keyframes kb-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
 @keyframes kb-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
 @keyframes kb-line{from{background-size:0 3px}to{background-size:100% 3px}}
 @keyframes kb-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
 @keyframes kb-fade{from{opacity:0}to{opacity:1}}
 @keyframes kb-up{from{transform:translateY(48px)}to{transform:none}}

 /* Startseite: Einstieg */
 .kbs-hero .kbs-bg img{animation:kb-zoom 16s cubic-bezier(.2,.6,.2,1) both}
 .kbs-hero .kbs-eye,.kbs-hero .kbs-title,.kbs-hero .kbs-sub,.kbs-hero .kbs-btns,.kbs-hero .kbs-info{animation:kb-rise .8s cubic-bezier(.2,.7,.2,1) both}
 .kbs-hero .kbs-title{animation-delay:.08s}
 .kbs-hero .kbs-sub{animation-delay:.2s}
 .kbs-hero .kbs-btns{animation-delay:.32s}
 .kbs-hero .kbs-info{animation-delay:.44s}
 .kbs-hero .kbs-title b{background:linear-gradient(var(--g),var(--g)) no-repeat 0 96%/0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:kb-line .9s .7s cubic-bezier(.6,0,.2,1) forwards}

 /* Seitenköpfe */
 .page-head .crumbs,.page-head .eye,.page-head h1,.page-head .in > p,.page-head .hd-txt > p{animation:kb-rise .7s cubic-bezier(.2,.7,.2,1) both}
 .page-head h1{animation-delay:.06s}
 .page-head .in > p,.page-head .hd-txt > p{animation-delay:.14s}
 .page-head .hd-ill .ill [pathLength]{stroke-dasharray:1;animation:kb-draw 1.6s .2s cubic-bezier(.4,0,.2,1) both}
 .page-head .hd-ill .ill .f{animation:kb-fade .8s 1.2s both}
 .nf .ill [pathLength]{stroke-dasharray:1;animation:kb-draw 1.4s cubic-bezier(.4,0,.2,1) both}

 /* Beim Scrollen einblenden – nur wo der Browser scroll-gesteuerte Animationen kann; sonst bleibt alles sichtbar */
 @supports (animation-timeline:view()){
  .sec-head,.kbs-head,.kbs-sort .kbs-card,.kbs-why .kbs-card,.kbs-ap .kbs-card,.kbs-visit .kbs-card,
  .steps li,.act,.pcard,.hub a,.related a,.gallery figure,.faq details,.perks li,.map,.cta-band > *{
   animation:kb-up linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  .kbs-sort .kbs-card:nth-child(3n+2),.steps li:nth-child(2),.act:nth-child(2),.hub a:nth-child(3n+2),.related a:nth-child(2){animation-range:entry 8% entry 78%}
  .kbs-sort .kbs-card:nth-child(3n),.steps li:nth-child(3),.act:nth-child(3),.hub a:nth-child(3n),.related a:nth-child(3){animation-range:entry 16% entry 86%}
  .steps li:nth-child(4),.act:nth-child(4),.related a:nth-child(4){animation-range:entry 24% entry 94%}

  /* Zeichnungen zeichnen sich selbst, während sie ins Bild kommen */
  .steps .ill,.act .ill,.map .ill,.hub .ill{view-timeline-name:--ill}
  .steps .ill [pathLength],.act .ill [pathLength],.map .ill [pathLength],.hub .ill [pathLength]{stroke-dasharray:1;animation:kb-draw linear both;animation-timeline:--ill;animation-range:entry 10% cover 45%}
  .steps .ill .f,.act .ill .f,.hub .ill .f{animation:kb-fade linear both;animation-timeline:--ill;animation-range:cover 35% cover 50%}

  /* Kopfzeile bekommt beim Scrollen einen Schatten */
  .site-hdr{animation:kb-hdr linear both;animation-timeline:scroll(root);animation-range:0 160px}
  @keyframes kb-hdr{from{box-shadow:0 0 0 rgba(0,0,0,0)}to{box-shadow:0 8px 28px rgba(0,0,0,.08)}}
 }

 /* Häufige Fragen weich auf- und zuklappen (wo unterstützt) */
 @supports selector(::details-content){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .35s cubic-bezier(.2,.7,.2,1),content-visibility .35s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
 }
}