/* Grimmer Werbemittel – Redesign 2026 (Stufe 2: feiner, moderner). Keine Frameworks. */
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/noto-sans-tc-v10-latin-300.woff2) format("woff2")}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/noto-sans-tc-v10-latin-regular.woff2) format("woff2")}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-sans-tc-v10-latin-500.woff2) format("woff2")}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/noto-sans-tc-v10-latin-700.woff2) format("woff2")}

:root{
  --red:#ce091c; --red-dark:#a80716; --red-soft:#fdf1f2;
  --ink:#1a1a1a; --text:#2c2e31; --grey:#6f7277; --muted:#62656a;
  --bg:#fff; --soft:#f6f6f4; --soft-2:#efefec; --line:#e7e7e3; --line-2:#d9dad6;
  --dark:#161718; --dark-2:#1f2022;
  --r-sm:6px; --r:12px; --r-lg:20px;
  --sh-1:0 1px 2px rgba(22,23,24,.04),0 6px 18px -10px rgba(22,23,24,.14);
  --sh-2:0 2px 6px rgba(22,23,24,.05),0 22px 44px -22px rgba(22,23,24,.28);
  --wrap:1240px; --gap:clamp(20px,3.2vw,40px);
  --font:"Noto Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
:target,[id]{scroll-margin-top:96px}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.65;color:var(--text);background:var(--bg);overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(206,9,28,.45);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
a:hover{color:var(--red);text-decoration-color:var(--red)}
a[href^="tel:"]{white-space:nowrap}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
h1,h2,h3{color:var(--ink);margin:0 0 .5em;font-weight:300;letter-spacing:-.022em;line-height:1.12}
h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.6rem)}
h2{font-size:clamp(1.6rem,1.25rem + 1.3vw,2.35rem)}
h3,.h3{font-size:1.1rem;font-weight:500;letter-spacing:-.005em;line-height:1.3}
h1 strong,h2 strong{font-weight:500}
p{margin:0 0 1em}
ul,ol{padding-left:1.2em}
address{font-style:normal}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gap)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6em 1em;z-index:100}
.skip:focus{left:8px;top:8px;color:#fff}
.small{font-size:.9rem;color:var(--muted)}
.muted{color:var(--muted)}
.ico{flex:0 0 auto;transition:transform .25s var(--ease)}

/* Eyebrow: die zwei roten Balken aus dem Logo */
.eyebrow,.kicker{display:flex;align-items:center;gap:.7rem;margin:0 0 1rem;font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before,.kicker::before{content:"";flex:0 0 18px;height:9px;background:linear-gradient(var(--red) 0 3px,transparent 3px 6px,var(--red) 6px 9px)}
.mark{position:relative;padding-left:32px}
.mark::before{content:"";position:absolute;left:0;top:.5em;width:18px;height:9px;background:linear-gradient(var(--red) 0 3px,transparent 3px 6px,var(--red) 6px 9px)}
.lead{font-size:clamp(1.08rem,1rem + .35vw,1.25rem);line-height:1.6;color:var(--muted);font-weight:300;max-width:58ch}
.lead strong{font-weight:500;color:var(--ink)}

/* Topbar + Header */
.topbar{background:var(--ink);color:#b9bbbe;font-size:.78rem;letter-spacing:.01em}
.topbar .wrap{display:flex;justify-content:space-between;gap:1rem;padding-top:.45rem;padding-bottom:.45rem}
.topbar p{margin:0}
.topbar a{color:#fff;text-decoration:none;margin-left:1.4rem}
.topbar a:hover{color:#fff;text-decoration:underline}
.header{background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);position:sticky;top:0;z-index:30;border-bottom:1px solid transparent;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.header.scrolled{border-bottom-color:var(--line);box-shadow:0 8px 24px -18px rgba(0,0,0,.25)}
.header .wrap{display:flex;align-items:center;gap:2rem;min-height:84px}
.logo{display:block;flex:0 0 auto}
.logo svg{display:block;width:152px;height:auto}
.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.3rem}
.nav a{position:relative;display:block;padding:.6rem .8rem;color:var(--ink);text-decoration:none;font-weight:400;font-size:.95rem;letter-spacing:.005em}
.nav a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.3rem;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.nav a[aria-current=page]{font-weight:500}
.merk-link{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--ink);font-size:.9rem;border:1px solid var(--line-2);border-radius:999px;padding:.45rem .9rem .45rem .8rem;transition:border-color .2s,background .2s}
.merk-link:hover{border-color:var(--ink);color:var(--ink)}
.merk-count{display:inline-block;min-width:1.45em;padding:0 .4em;border-radius:1em;background:var(--soft-2);color:var(--muted);font-size:.76rem;font-weight:500;text-align:center;line-height:1.5}
.merk-count.has{background:var(--red);color:#fff}
.navtoggle{display:none}

/* Breadcrumbs */
.crumbs{font-size:.82rem;color:var(--muted)}
.crumbs ol{list-style:none;margin:0;padding:1.1rem 0 0;display:flex;flex-wrap:wrap;gap:.15rem}
.crumbs li+li::before{content:"/";margin:0 .55rem;color:var(--line-2)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--red)}
.crumbs [aria-current]{color:var(--ink)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font:inherit;font-weight:500;font-size:.98rem;line-height:1.2;letter-spacing:.005em;
  padding:.95em 1.5em;border-radius:var(--r-sm);border:1px solid var(--red);background:var(--red);color:#fff;text-decoration:none;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff;box-shadow:0 10px 24px -12px rgba(206,9,28,.6)}
.btn:hover .ico{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none}
.btn-quiet{background:transparent;border-color:transparent;color:var(--ink);padding-left:.6em;padding-right:.6em}
.btn-quiet:hover{background:transparent;border-color:transparent;color:var(--red);box-shadow:none}
.btn-onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-onDark:hover{background:#fff;color:var(--ink);border-color:#fff;box-shadow:none}
.btnrow{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.textlink{display:inline-flex;align-items:center;gap:.4em;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
.textlink:hover{color:var(--red)}
.textlink:hover .ico{transform:translateX(3px)}

/* Sections */
.section{padding:clamp(56px,8vw,112px) 0}
.section-tight{padding:clamp(32px,4vw,56px) 0}
.section-first{padding-top:clamp(28px,3vw,44px)}
.section-soft{background:var(--soft)}
.section-white{background:#fff}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(28px,3.5vw,48px)}
.section-head h2{margin:0;max-width:24ch}
.section-head p{margin:0}
.section-head .section-lead{margin-top:.9rem}
.section-lead{max-width:62ch;color:var(--muted)}
.more-line{margin-top:1.6rem}

/* Page head */
.page-head{background:#fff;padding:clamp(28px,4.5vw,64px) 0 clamp(28px,4vw,52px)}
.page-head h1{margin-bottom:.35em;max-width:22ch}
.page-head .lead{margin:0}
.page-head-icon{display:flex;align-items:flex-start;gap:1.4rem}
.cat-icon{flex:0 0 auto;width:64px;height:64px;padding:12px;border-radius:var(--r);background:var(--soft)}
.cat-icon img{width:40px;height:40px;object-fit:contain}

/* Hero */
.hero{padding:clamp(20px,3vw,40px) 0 clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.hero h1{font-size:clamp(2.3rem,1.3rem + 3.1vw,3.9rem);line-height:1.04;letter-spacing:-.03em;margin-bottom:.45em}
.hero .lead{margin-bottom:0}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:1.9rem 0 0}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:clamp(32px,3.4vw,48px) 0 0;padding-top:1.6rem;border-top:1px solid var(--line)}
.facts div{padding-right:1.2rem}
.facts div+div{padding-left:1.2rem;border-left:1px solid var(--line)}
.facts dt{font-size:1.9rem;font-weight:300;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.facts dd{margin:.35rem 0 0;font-size:.86rem;line-height:1.45;color:var(--muted)}
.hero-visual{position:relative}
.hero-figure{margin:0;background:var(--soft);border-radius:var(--r-lg);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:clamp(24px,5%,56px);overflow:hidden}
.hero-figure picture{width:100%;height:100%}
.hero-figure img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.hero-figure figcaption{position:absolute;right:20px;top:20px;font-size:.76rem;color:var(--muted);background:rgba(255,255,255,.8);padding:.3rem .7rem;border-radius:999px}
.hero-chip{position:absolute;left:-28px;bottom:32px;display:flex;align-items:center;gap:.9rem;background:#fff;border-radius:var(--r);box-shadow:var(--sh-2);padding:10px 18px 10px 10px;text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:500;line-height:1.3;max-width:300px;transition:transform .3s var(--ease)}
.hero-chip:hover{transform:translateY(-3px);color:var(--ink)}
.hero-chip-img{flex:0 0 64px;width:64px;height:64px;border-radius:8px;overflow:hidden}
.hero-chip-img{background:var(--soft)}
.hero-chip-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.35)}
.hero-chip small{display:block;font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:.15rem}

/* Trust */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;align-items:center;gap:2rem;padding-top:1.4rem;padding-bottom:1.4rem}
.trust-label{margin:0;flex:0 0 auto;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.trust-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 2.2rem;color:#4a4d52;font-size:1rem;font-weight:500;letter-spacing:-.005em}

/* Icon navigation */
.iconnav{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.iconnav a{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:1.6rem;min-height:150px;height:100%;background:var(--soft);border-radius:var(--r);padding:1.25rem 1.25rem 1.15rem;color:var(--ink);text-decoration:none;font-size:.95rem;font-weight:400;line-height:1.35;hyphens:auto;transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.iconnav picture{width:40px;height:40px}
.iconnav img{width:40px;height:40px;object-fit:contain;filter:grayscale(1) contrast(1.4) brightness(.55);opacity:.85;transition:filter .25s var(--ease),opacity .25s}
.iconnav a:hover{background:#fff;box-shadow:var(--sh-2);transform:translateY(-3px);color:var(--ink)}
.iconnav a:hover img{filter:none;opacity:1}

/* Pillars */
.pillars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillars a{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--sh-1);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.pillars picture{aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:18px}
.pillars img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}
.pillars .pic-tall{padding:12px 0}
.pillar-body{display:flex;flex-direction:column;gap:.5rem;padding:1.4rem 1.5rem 1.6rem;border-top:1px solid var(--line)}
.pillar-t{font-size:1.25rem;font-weight:400;letter-spacing:-.01em}
.pillar-s{font-size:.95rem;color:var(--muted);line-height:1.55}
.pillars a:hover{box-shadow:var(--sh-2);transform:translateY(-4px)}
.pillars a:hover img{transform:scale(1.035)}
.pillars a:hover .pillar-t{color:var(--red)}

/* Cards */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.section-soft .card{box-shadow:var(--sh-1)}
.card:hover{box-shadow:var(--sh-2);transform:translateY(-4px)}
.card-img{aspect-ratio:1/1;background:var(--soft);display:flex;align-items:center;justify-content:center;padding:8%;overflow:hidden}
.card-img picture,.card-img img{width:100%;height:100%}
.card-img img{object-fit:contain;mix-blend-mode:multiply;border-radius:4px;transition:transform .5s var(--ease)}
.card:hover .card-img img{transform:scale(1.04)}
.card-img.fill{padding:0}
.card-img.fill img{object-fit:cover;border-radius:0;mix-blend-mode:normal}
.cards-tall .card-img{aspect-ratio:3/4}
.card-body{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card-title{margin:0;font-size:.98rem;font-weight:500;line-height:1.35;letter-spacing:0;hyphens:auto}
.card-title a{color:var(--ink);text-decoration:none}
.card-title a::after{content:"";position:absolute;inset:0;z-index:1}
.card:hover .card-title a{color:var(--red)}
.card-sub{margin:0;font-size:.84rem;color:var(--muted)}
.merk{position:relative;z-index:2;align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.8rem;font-weight:500;background:transparent;border:1px solid var(--line-2);color:var(--muted);border-radius:999px;padding:.3rem .8rem;cursor:pointer;transition:all .2s var(--ease)}
.card-body .merk{margin-top:.6rem}
.merk:hover{border-color:var(--ink);color:var(--ink)}
.merk .merk-on,.merk[aria-pressed=true] .merk-off{display:none}
.merk[aria-pressed=true] .merk-on{display:inline}
.merk[aria-pressed=true]{background:var(--red-soft);border-color:var(--red);color:var(--red-dark)}
.merk-big{font-size:.98rem;padding:.95em 1.5em;border-radius:var(--r-sm);border:1px solid var(--red);color:#fff;background:var(--red);margin:0}
.merk-big:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.merk-big[aria-pressed=true]{background:#fff;color:var(--red-dark)}

/* Splits / Teaser */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split-media .media{background:#fff;border-radius:var(--r-lg);padding:clamp(16px,3vw,36px);box-shadow:var(--sh-1)}
.split-media .media img{width:100%}
.split h2{margin-bottom:.6em}
.feature{margin:0;text-align:center}
.feature img{margin:0 auto;max-height:520px;width:auto}
.feature figcaption{font-size:.88rem;color:var(--muted);margin-top:.8rem}
.teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.teaser{display:flex;align-items:center;gap:1.2rem;background:var(--soft);border-radius:var(--r);padding:14px 22px 14px 14px;text-decoration:none;color:var(--ink);transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.teaser picture{flex:0 0 96px;width:96px;height:96px;border-radius:8px;overflow:hidden;background:#fff}
.teaser img{width:100%;height:100%;object-fit:cover}
.teaser-t{display:block;font-weight:500;font-size:1.05rem}
.teaser-s{display:block;color:var(--muted);font-size:.88rem;line-height:1.45;margin-top:.2rem}
.teaser:hover{background:#fff;box-shadow:var(--sh-2);transform:translateY(-3px);color:var(--ink)}
.teaser:hover .teaser-t{color:var(--red)}
.inline-links{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.inline-links a{display:inline-block;text-decoration:none;font-size:.9rem;padding:.45rem .95rem;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.inline-links a:hover{border-color:var(--ink)}
.contactbox{background:#fff;border-radius:var(--r-lg);padding:clamp(24px,3vw,40px);box-shadow:var(--sh-1)}
.contactbox h2{margin-bottom:1rem}
.contact-big{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);font-weight:300;letter-spacing:-.02em;margin-bottom:.2rem}
.contact-big a{text-decoration:none}

/* Content */
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,6vw,96px);align-items:start}
.wrap.content-grid{padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(32px,4vw,56px)}
.prose{max-width:68ch;min-width:0}
.prose a{overflow-wrap:anywhere}
.prose h2{font-size:clamp(1.4rem,1.2rem + .8vw,1.9rem);margin-top:1.6em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.4em}
.prose li{margin-bottom:.35em}
.prose li::marker{color:var(--red)}
.note{background:#fff;border-radius:var(--r);padding:1.1rem 1.3rem;font-size:.95rem;color:var(--muted);box-shadow:var(--sh-1)}
.aside{background:#fff;border-radius:var(--r);padding:1.6rem 1.7rem;position:sticky;top:110px;box-shadow:var(--sh-1)}
.aside figure{margin:0 0 1.4rem;background:var(--soft);border-radius:8px;padding:12px}
.aside figure img{mix-blend-mode:multiply}
.aside figcaption{font-size:.82rem;color:var(--muted);margin-top:.5rem}
.aside h2{margin-bottom:.8rem}
.linklist{list-style:none;padding:0;margin:0 0 1.2rem}
.linklist li+li{border-top:1px solid var(--line)}
.linklist a{display:block;padding:.6rem 0;text-decoration:none;color:var(--ink);font-size:.95rem;transition:color .2s,padding .2s var(--ease)}
.linklist a:hover{color:var(--red);padding-left:.3rem}
.profile{display:grid;grid-template-columns:max-content 1fr;gap:0;margin:0 0 2rem;border-top:1px solid var(--line)}
.profile dt,.profile dd{padding:.85rem 0;border-bottom:1px solid var(--line);margin:0}
.profile dt{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-right:2rem;padding-top:1rem}
.steps{padding-left:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-left:3.4rem;margin-bottom:1.4rem}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-.1rem;font-size:1.5rem;font-weight:300;color:var(--red);letter-spacing:-.02em}
.steps-big h2{margin:0 0 .3rem}
.faqs{display:flex;flex-direction:column;max-width:80ch;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:1.3rem 3rem 1.3rem 0;font-weight:400;font-size:1.12rem;color:var(--ink);list-style:none;position:relative;transition:color .2s}
.faq summary:hover{color:var(--red)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:14px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease)}
.faq summary::after{transform:rotate(90deg)}
.faq[open] summary::after{transform:rotate(0)}
.faq p{padding:0 0 1.3rem;margin:0;color:var(--muted);max-width:68ch}
.legal{padding-top:1rem;padding-bottom:4rem}
.legal h2{font-size:1.45rem}

/* Product */
.product{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);padding-top:clamp(28px,3.5vw,48px);padding-bottom:clamp(40px,5vw,72px);align-items:start}
.gallery{position:sticky;top:110px}
.gallery-main{background:var(--soft);border-radius:var(--r-lg);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:8%}
.gallery-main img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;border-radius:6px}
.gallery-main.fill{padding:0;overflow:hidden}
.gallery-main.fill img{object-fit:cover;mix-blend-mode:normal;border-radius:0}
.gallery-main.tall{aspect-ratio:3/4;padding:6%}
.gallery-tall{max-width:none}
.gallery-more{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery-more li{background:var(--soft);border-radius:var(--r);aspect-ratio:1/1;padding:10%;display:flex}
.gallery-more picture,.gallery-more img{width:100%;height:100%}
.gallery-more img{object-fit:contain;mix-blend-mode:multiply}
.product-info{padding-top:clamp(0px,2vw,24px)}
.product-info h1{font-size:clamp(2rem,1.4rem + 2vw,3rem);margin-bottom:.6rem}
.artnr{font-size:.9rem;color:var(--muted);margin-bottom:.3rem}
.specs ul{margin-top:0}
.buybox{background:var(--soft);border-radius:var(--r);padding:1.4rem 1.5rem;margin:1.8rem 0}
.price{font-weight:400;font-size:1.35rem;letter-spacing:-.01em;color:var(--ink);margin:0 0 .2rem}
.buybox-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.1rem 0 0}

/* Anfrage */
.inquiry{background:var(--soft);border-radius:var(--r-lg);padding:clamp(24px,4.5vw,64px);margin:clamp(24px,4vw,48px) 0 clamp(48px,6vw,88px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px)}
.inquiry-head h2{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);padding-left:0}
.inquiry-head h2.mark{padding-left:0;padding-top:22px}
.inquiry-head h2.mark::before{top:0}
.inquiry-head p{color:var(--muted)}
.inquiry-main{display:block;background:#fff;box-shadow:var(--sh-1);margin:0}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.2rem;margin:0}
.inquiry-main .form{margin-top:1.4rem}
.field{display:flex;flex-direction:column;gap:.35rem;margin:0}
.field.full{grid-column:1/-1}
.field label,.label{font-weight:500;font-size:.85rem;color:var(--ink)}
.label{display:block;margin:0 0 .4rem}
input,textarea{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:.8rem .9rem;width:100%;transition:border-color .2s,box-shadow .2s}
.inquiry:not(.inquiry-main) input,.inquiry:not(.inquiry-main) textarea{border-color:#dcdcd8}
input:hover,textarea:hover{border-color:#bfc0bc}
input:focus,textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 4px rgba(26,26,26,.08)}
.check{flex-direction:row;align-items:flex-start;gap:.7rem}
.check input{width:1.15rem;height:1.15rem;margin-top:.2rem;flex:0 0 auto;accent-color:var(--red)}
.check label{font-weight:400;font-size:.9rem;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.merk-list{list-style:none;padding:0;margin:0;border-radius:var(--r);background:var(--soft);overflow:hidden}
.merk-list li{display:flex;align-items:center;gap:.9rem;padding:.6rem .8rem}
.merk-list li+li{border-top:1px solid var(--line)}
.merk-list img{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:6px}
.merk-list a{flex:1;color:var(--ink);text-decoration:none}
.merk-list button{font:inherit;font-size:.8rem;background:none;border:1px solid var(--line-2);border-radius:999px;padding:.25rem .7rem;cursor:pointer;color:var(--muted)}
.merk-list button:hover{border-color:var(--red);color:var(--red)}
.merk-empty{color:var(--muted);font-size:.95rem}

/* Filter */
.filterbar{background:var(--soft);border-radius:var(--r);padding:1.3rem 1.4rem;margin:1.5rem 0 2rem;display:grid;gap:.7rem}
.filterbar input{max-width:440px}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.45rem}
.chip{font:inherit;font-size:.85rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;cursor:pointer;color:var(--ink);transition:all .2s var(--ease)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.card[hidden]{display:none}

/* Kontakt-Band: dunkel, Rot nur als Akzent */
.band{padding:0 0 clamp(48px,6vw,88px)}
.band-in{display:flex;align-items:center;gap:clamp(20px,3vw,44px);background:var(--dark);color:#d8d9db;border-radius:var(--r-lg);padding:clamp(28px,4vw,56px) clamp(24px,4.5vw,64px);position:relative;overflow:hidden}
.band-icon{flex:0 0 72px;width:72px;height:72px;border-radius:50%;background:#fff;padding:14px}
.band-icon img{width:100%;height:100%}
.band-text{flex:1}
.band-text p{margin:0;font-size:clamp(1.1rem,1rem + .45vw,1.4rem);font-weight:300;line-height:1.5;color:#fff;max-width:52ch}
.band-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin:0;flex:0 0 auto}

/* Footer */
.footer{background:var(--dark);color:#a4a6aa;font-size:.92rem}
.footer a{color:#d9dadc;text-decoration:none;transition:color .2s}
.footer a:hover{color:#fff}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,5vw,80px);padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(32px,4vw,48px);border-bottom:1px solid rgba(255,255,255,.08)}
.footer-logo{display:inline-block;margin-bottom:1.2rem}
.footer-logo svg{width:150px;height:auto}
.footer-brand p{max-width:54ch;line-height:1.65;margin:0}
.footer-contact{display:flex;flex-direction:column;gap:.35rem;line-height:1.55}
.footer-phone{font-size:1.7rem;font-weight:300;letter-spacing:-.02em;color:#fff!important}
.fh{display:block;font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:#7d8085;margin:0 0 1rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(24px,4vw,64px);padding-top:clamp(32px,4vw,48px);padding-bottom:clamp(32px,4vw,56px)}
.footer ul{list-style:none;padding:0;margin:0 0 1.6rem}
.footer li{margin-bottom:.45rem}
.footer .cols-2{columns:2;column-gap:2rem}
.footer .cols-2 li{break-inside:avoid}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);font-size:.82rem}
.footer-bottom .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.2rem;padding-bottom:1.2rem}
.footer-bottom p{margin:0}
.footer-bottom ul{display:flex;gap:1.6rem;margin:0}
.footer-bottom li{margin:0}

/* Einblenden beim Scrollen (nur mit JS, nur ohne reduzierte Bewegung) */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
  .card:hover,.pillars a:hover,.iconnav a:hover,.teaser:hover,.hero-chip:hover{transform:none}
}

/* Responsive */
@media (max-width:1180px){
  .nav a{padding:.6rem .55rem;font-size:.92rem}
  .nav a::after{left:.55rem;right:.55rem}
  .merk-label{display:none}
  .cards-5{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-chip{left:16px}
}
@media (max-width:960px){
  .header .wrap{min-height:68px;gap:.8rem}
  .logo svg{width:128px}
  .navtoggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:1px solid var(--line-2);border-radius:999px;cursor:pointer;order:3}
  .bars,.bars::before,.bars::after{display:block;width:18px;height:1.5px;background:var(--ink);position:relative}
  .bars::before,.bars::after{content:"";position:absolute;left:0}
  .bars::before{top:-6px}.bars::after{top:6px}
  .merk-link{margin-left:auto}
  .js .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(0,0,0,.25)}
  .js .nav.open{display:block}
  .nav ul{flex-direction:column;padding:.4rem var(--gap) 1.2rem}
  .nav a{padding:.95rem 0;border-bottom:1px solid var(--line);font-size:1.08rem}
  .nav a::after{display:none}
  .nav a[aria-current=page]{color:var(--red)}
  .hero-grid,.split,.product,.content-grid,.inquiry,.footer-top{grid-template-columns:1fr}
  .hero-visual{max-width:560px}
  .aside,.gallery{position:static}
  .pillars,.teasers{grid-template-columns:1fr}
  .pillars picture{aspect-ratio:16/9}
  .cards-4,.cards-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid section:first-child{grid-column:1/-1}
  .band-in{flex-wrap:wrap}
  .section-head{flex-direction:column;align-items:flex-start;gap:1rem}
  .trust .wrap{flex-direction:column;align-items:flex-start;gap:.6rem}
}
@media (max-width:600px){
  body{font-size:1rem}
  .topbar p:first-child{display:none}
  .topbar .wrap{justify-content:center}
  .topbar a{margin:0 .7rem}
  .hero{padding-top:8px}
  .hero h1{font-size:clamp(2.1rem,1.4rem + 4vw,2.6rem)}
  .facts{grid-template-columns:1fr;gap:1rem}
  .facts div,.facts div+div{padding:0;border:0;display:flex;align-items:baseline;gap:1rem}
  .facts dt{flex:0 0 3.6rem;font-size:1.5rem}
  .facts dd{margin:0}
  .hero-figure{border-radius:var(--r)}
  .hero-chip{position:relative;left:auto;bottom:auto;margin:-36px 16px 0;max-width:none}
  .hero-figure figcaption{display:none}
  .cards,.cards-4,.cards-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card-body{padding:.75rem .8rem .9rem}
  .card-title{font-size:.9rem}
  .iconnav{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .iconnav a{min-height:128px;padding:1rem;gap:1.2rem;font-size:.9rem}
  .form{grid-template-columns:1fr}
  .inquiry{border-radius:var(--r);padding:22px 18px}
  .footer-grid{grid-template-columns:1fr}
  .footer .cols-2{columns:1}
  .footer-bottom .wrap{flex-direction:column;align-items:flex-start}
  .band-in{border-radius:var(--r);flex-direction:column;align-items:flex-start}
  .band-icon{width:56px;height:56px;flex-basis:auto;padding:11px}
  .profile{grid-template-columns:1fr}
  .profile dt{border-bottom:0;padding-bottom:0}
  .profile dd{padding-top:.2rem}
  .page-head-icon{flex-direction:column;gap:1rem}
  .gallery-main{border-radius:var(--r)}
  .gallery-more{grid-template-columns:repeat(3,1fr)}
  .teaser picture{flex-basis:72px;width:72px;height:72px}
}
@media print{.topbar,.header,.band,.footer,.inquiry,.merk,.crumbs{display:none}}

.wrap:has(> .inquiry) + .section{padding-top:clamp(8px,2vw,24px)}