/* growboxen.eu - Entwurf v13
   Basis v12: Schiefer & Chlorophyll, wenige abstrakte Pflanzenmotive, keine Cannabis-Motive.
   Neu: breiterer Inhalt (1600 px), Set-Builder, Set-Seite, Preisvergleich, Filter für alle Listen. */

:root {
  --white: #FFFFFF;
  --ice: #EEF3F5;
  --ice-2: #E3ECEF;
  --ice-3: #D2DFE4;
  --line: #DCE5E9;
  --ink: #0F181C;
  --ink-2: #4A585E;
  --ink-3: #87959B;
  --slate: #111A1F;
  --slate-2: #19242A;
  --slate-3: #24323A;
  --chl: #2FA84F;
  --chl-2: #1F7F3C;
  --lime: #C3EA5B;
  --grad: linear-gradient(100deg, #36B24C 0%, #8ED155 55%, #C3EA5B 100%);
  --deal: #D9453F;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --max: 1600px;
  --gut: clamp(16px, 3.5vw, 48px);
  --r: 28px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 16px/1.6 "Manrope", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.04em; line-height: 1.02; font-weight: 800; }
h2 { font-size: clamp(2.1rem, 4vw, 3.6rem); }
h3 { font-size: 1.15rem; letter-spacing: -.025em; font-weight: 700; line-height: 1.25; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--chl); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.grad-t { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 1.12rem; color: var(--ink-2); line-height: 1.6; max-width: 34em; }
.kick { display: inline-flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 700; color: var(--chl-2); margin-bottom: 18px; }
.kick i { width: 26px; height: 6px; border-radius: 3px; background: var(--grad); }
.on-dark .kick, .kick.light { color: var(--lime); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 999px; font-weight: 700; font-size: .98rem; white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease); }
.btn:active { transform: scale(.97); }
.btn .ico { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover .ico.go { transform: translateX(3px); }
.btn-go { background: var(--grad); color: var(--slate); box-shadow: 0 10px 30px -12px rgba(54, 178, 76, .7); }
.btn-go:hover { box-shadow: 0 14px 34px -10px rgba(54, 178, 76, .85); }
.btn-ink { background: var(--slate); color: #fff; }
.btn-ink:hover { background: var(--slate-3); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--ice); }
.btn-line { box-shadow: inset 0 0 0 1.5px var(--ice-3); color: var(--ink); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-glass { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.btn-glass:hover { background: rgba(255, 255, 255, .18); }
.btn-sm { height: 42px; padding: 0 18px; font-size: .88rem; }
.icon-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; transition: background-color .2s; }
.icon-btn:hover { background: var(--ice); }
.icon-btn .count { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--chl); color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.icon-btn .count.on { transform: scale(1); }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: #EAF7DA; color: var(--chl-2); white-space: nowrap; }
.pill.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--chl); }
.pill.dark { background: rgba(195, 234, 91, .14); color: var(--lime); }
.pill.dark.dot::before { background: var(--lime); }

/* ---------- Ankündigung + Kopf ---------- */
.announce { background: var(--slate); color: rgba(255, 255, 255, .78); font-size: .82rem; font-weight: 600; }
.announce .wrap { height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ann-rot { position: relative; flex: 1; height: 38px; overflow: hidden; text-align: center; }
.ann-rot span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; transform: translateY(100%); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.ann-rot span.on { opacity: 1; transform: none; }
.ann-rot span.out { opacity: 0; transform: translateY(-100%); }
.ann-rot b { color: var(--lime); }
.ann-side { display: flex; gap: 22px; color: rgba(255, 255, 255, .55); }
.ann-side a:hover { color: #fff; }
.header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); transition: box-shadow .3s var(--ease); }
.header.scrolled { box-shadow: 0 1px 0 var(--line), 0 12px 30px -24px rgba(15, 24, 28, .35); }
.head { height: 76px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.3rem; letter-spacing: -.05em; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand .tld { font-weight: 600; opacity: .45; letter-spacing: -.02em; }
.menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu { position: relative; }
.menu a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px; border-radius: 999px; font-weight: 650; font-size: .95rem; color: var(--ink); }
.menu a.hot { color: var(--chl-2); gap: 8px; }
.tools { display: flex; align-items: center; gap: 6px; }
.search-trigger { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 16px; border-radius: 999px; background: var(--ice); color: var(--ink-3); font-size: .92rem; min-width: 230px; transition: background-color .2s; }
.search-trigger:hover { background: var(--ice-2); }
.search-trigger span { flex: 1; text-align: left; }
.search-trigger kbd { font: 700 .7rem/1 "Manrope"; padding: 6px 8px; border-radius: 8px; background: #fff; color: var(--ink-2); }
.burger { display: none; }

/* ---------- Reveal ---------- */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- Pflanzen-Motive (sparsam) ---------- */
.leafshade { position: absolute; pointer-events: none; mix-blend-mode: multiply; opacity: .5; background: url(img/v12-schatten.webp) center / cover no-repeat; animation: sway 16s ease-in-out infinite alternate; transform-origin: 30% 0; }
@keyframes sway { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.04); } 100% { transform: translate3d(-1.5%, 1%, 0) rotate(-1.2deg) scale(1.07); } }
.floatleaf { position: absolute; z-index: 6; pointer-events: none; width: clamp(160px, 18vw, 280px); filter: blur(1.5px) drop-shadow(0 30px 40px rgba(15, 24, 28, .25)); will-change: transform; }
.floatleaf.soft { filter: blur(5px); opacity: .85; }

/* =========================================================
   STARTSEITE
   ========================================================= */

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--ice); overflow: hidden; padding: clamp(56px, 7vw, 96px) 0 0; min-height: 720px; }
.hero .leafshade { inset: -8% -10% 10% -6%; opacity: .42; }
.hero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; }
.hero-copy { grid-column: 1 / span 6; padding-bottom: 72px; }
.hero h1 { font-size: clamp(3rem, 6.4vw, 6.2rem); letter-spacing: -.055em; line-height: .96; margin: 0 0 28px; }
.hero h1 em { font-style: normal; }
.hero .lead { margin-bottom: 36px; }
.hero-size { display: inline-block; padding: 20px 22px 22px; border-radius: 24px 24px 24px 6px; background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8) inset, 0 30px 60px -40px rgba(15, 24, 28, .35); }
.hero-size small { display: block; font-weight: 700; font-size: .84rem; color: var(--ink-2); margin-bottom: 12px; }
.size-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.size-chips a, .size-chips button { height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease); }
.size-chips a:hover { background: var(--slate); color: #fff; box-shadow: none; transform: translateY(-2px); }
.size-chips .all { background: transparent; box-shadow: none; color: var(--chl-2); }
.size-chips .all:hover { background: transparent; color: var(--ink); transform: none; }

.hero-stage { position: absolute; z-index: 2; top: 48px; bottom: 0; left: 53%; right: 0; background: var(--slate); border-radius: 40px 0 0 0; color: #fff; }
.hero-stage::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 55% at 45% 45%, rgba(126, 205, 84, .28), transparent 70%); }
.stage-word { position: absolute; left: 6%; top: 8%; font-weight: 800; font-size: clamp(5rem, 13vw, 13rem); letter-spacing: -.06em; line-height: .85; color: transparent; -webkit-text-stroke: 1.5px rgba(195, 234, 91, .2); white-space: nowrap; pointer-events: none; }
.stage-prod { position: absolute; left: -16%; top: 18%; width: 88%; height: 52%; display: grid; place-items: center; }
.stage-prod img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 50px 50px rgba(0, 0, 0, .45)); transition: opacity .6s var(--ease), transform .9s var(--ease); }
.stage-prod img.out { opacity: 0; transform: translate3d(-30px, 10px, 0) scale(.96); }
.stage-glow { position: absolute; left: 4%; top: 64%; width: 60%; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.chip-glass { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--ink); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .45); font-size: .9rem; line-height: 1.3; }
.chip-glass small { display: block; color: var(--ink-2); font-size: .74rem; font-weight: 600; }
.chip-glass b { font-weight: 800; }
.chip-glass .ci { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #EAF7DA; color: var(--chl-2); }
.chip-a { left: -64px; top: 12%; }
.chip-b { right: 8%; top: 56%; }
.stage-info { position: absolute; left: 7%; right: 7%; bottom: 40px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.stage-info .brandname { font-size: .82rem; font-weight: 700; color: var(--lime); }
.stage-info h2 { font-size: clamp(1.6rem, 2.4vw, 2.3rem); margin: 6px 0 14px; color: #fff; }
.stage-facts { display: flex; gap: 22px; color: rgba(255, 255, 255, .6); font-size: .84rem; }
.stage-facts b { display: block; color: #fff; font-size: 1.05rem; }
.stage-buy { text-align: right; }
.stage-buy small { display: block; font-size: .78rem; color: rgba(255, 255, 255, .55); }
.stage-buy strong { display: block; font-size: 1.9rem; letter-spacing: -.04em; margin: 2px 0 12px; }
.stage-nav { position: absolute; right: 7%; top: 40px; display: flex; gap: 8px; }
.stage-nav button { width: 54px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); position: relative; overflow: hidden; }
.stage-nav button i { position: absolute; inset: 0; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; }
.stage-nav button.on i { animation: prog 6.5s linear forwards; }
@keyframes prog { to { transform: scaleX(1); } }

/* ---------- Größen (Signatur) ---------- */
.sec { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.sec-tight { padding: clamp(56px, 7vw, 96px) 0; }
.sizes-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: center; }
.sizes-copy { grid-column: 1 / span 5; }
.sizes-copy h2 { margin-bottom: 18px; }
.size-list { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--line); }
.size-list button { width: 100%; display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line); text-align: left; transition: padding .35s var(--ease), background-color .3s; }
.size-list button b { font-size: 1.25rem; letter-spacing: -.03em; }
.size-list button span { color: var(--ink-2); font-size: .9rem; }
.size-list button em { font-style: normal; font-weight: 700; font-size: .9rem; }
.size-list button:hover { padding-left: 12px; }
.size-list button[aria-pressed="true"] { padding-left: 16px; background: linear-gradient(90deg, rgba(195, 234, 91, .25), transparent 70%); }
.size-list button[aria-pressed="true"] b { color: var(--chl-2); }
.plan-wrap { grid-column: 7 / span 6; position: relative; }
.plan { position: relative; aspect-ratio: 1 / .78; border-radius: var(--r); background: var(--ice) linear-gradient(transparent 0 calc(100% - 1px), rgba(15, 24, 28, .06) 0) 0 0 / 100% 40px, linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(15, 24, 28, .06) 0) 0 0 / 40px 100%; overflow: hidden; }
.plan .leafshade { inset: -20%; opacity: .32; }
.plan-sq { position: absolute; left: 12%; bottom: 12%; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(15, 24, 28, .22); background: rgba(255, 255, 255, .25); transition: background-color .5s var(--ease), box-shadow .5s var(--ease), opacity .5s; }
.plan-sq span { position: absolute; right: 8px; top: 6px; font-size: .72rem; font-weight: 700; color: var(--ink-3); transition: color .4s; }
.plan-sq.on { background: linear-gradient(135deg, rgba(54, 178, 76, .5), rgba(195, 234, 91, .55)); box-shadow: inset 0 0 0 2px var(--chl-2), 0 30px 60px -30px rgba(31, 127, 60, .6); z-index: 2; }
.plan-sq.on span { color: var(--slate); }
.plan-pots { position: absolute; inset: 0; display: grid; place-content: center; grid-auto-flow: column; gap: 10%; }
.plan-card { position: absolute; right: -28px; bottom: -40px; z-index: 5; width: min(360px, 70%); padding: 26px; border-radius: 26px 26px 6px 26px; background: rgba(17, 26, 31, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; box-shadow: 0 40px 70px -30px rgba(15, 24, 28, .6); }
.plan-card h3 { font-size: 1.5rem; margin-bottom: 18px; }
.plan-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 0 0 22px; }
.plan-card dt { font-size: .75rem; color: rgba(255, 255, 255, .55); font-weight: 600; }
.plan-card dd { margin: 0; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.plan-card .btn { width: 100%; }

/* ---------- Kategorien (versetztes Raster) ---------- */
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.sec-head p { margin-top: 14px; }
.see-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.see-all .ico { transition: transform .3s var(--ease); }
.see-all:hover .ico { transform: translateX(4px); }
.cats { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 150px; gap: 20px; }
.cat { position: relative; border-radius: var(--r); background: var(--ice); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .5s var(--ease), box-shadow .5s var(--ease); isolation: isolate; }
.cat:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -36px rgba(15, 24, 28, .45); }
.cat b { font-size: 1.45rem; letter-spacing: -.035em; display: block; }
.cat small { color: var(--ink-2); font-weight: 600; font-size: .86rem; }
.cat img { position: absolute; z-index: -1; object-fit: contain; filter: drop-shadow(0 26px 26px rgba(15, 24, 28, .25)); transition: transform .7s var(--ease); }
.cat:hover img { transform: translateY(-8px) rotate(-1.5deg); }
.cat .arr { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; align-self: flex-start; transition: background-color .3s, color .3s; }
.cat:hover .arr { background: var(--slate); color: #fff; }
.c-box { grid-column: 1 / span 5; grid-row: span 3; }
.c-box img { right: 8%; top: -36px; height: 96%; }
.c-led { grid-column: 6 / span 7; grid-row: span 2; }
.c-led img { right: -4%; top: -34px; width: 74%; }
.c-air { grid-column: 6 / span 3; grid-row: span 2; margin-top: 0; }
.c-air img { right: -10%; bottom: 8%; width: 90%; }
.c-filter { grid-column: 9 / span 4; grid-row: span 2; }
.c-filter img { right: 10%; top: -30px; height: 96%; }
.c-soil { grid-column: 1 / span 5; grid-row: span 2; overflow: hidden; color: #fff; }
.c-soil .texture { position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: url(img/v12-adern.webp) center / cover; transform: scale(1.04); transition: transform 1.2s var(--ease); }
.c-soil::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(160deg, rgba(17, 26, 31, .15), rgba(17, 26, 31, .7)); }
.c-soil:hover .texture { transform: scale(1.1); }
.c-soil small { color: rgba(255, 255, 255, .75); }
.c-soil .arr { color: var(--ink); }
.c-soil img { right: 6%; bottom: -24px; height: 92%; z-index: 0; }
.c-soil .glass-lbl { align-self: flex-start; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.c-sets { grid-column: 6 / span 7; grid-row: span 2; background: var(--slate); color: #fff; }
.c-sets small { color: rgba(255, 255, 255, .6); }
.c-sets .arr { background: var(--grad); color: var(--slate); }
.c-sets .stack { position: absolute; right: 6%; top: -28px; bottom: 24px; width: 48%; z-index: -1; }
.c-sets .stack img { position: absolute; }

/* ---------- Komplettset-Builder ---------- */
.builder-sec { position: relative; background: var(--slate); color: #fff; overflow: hidden; border-radius: 48px 48px 0 0; margin-top: 40px; }
.builder-sec .bokeh { position: absolute; inset: 0; background: url(img/v12-laub.webp) center / cover; opacity: .7; mix-blend-mode: screen; }
.builder-sec .bokeh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, #111A1F 20%, rgba(17, 26, 31, .5) 60%, rgba(17, 26, 31, .1)); }
.builder { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: center; }
.b-copy { grid-column: 1 / span 5; }
.b-copy h2 { margin-bottom: 18px; }
.b-copy .lead { color: rgba(255, 255, 255, .7); }
.b-sizes { display: flex; gap: 8px; margin: 32px 0 26px; flex-wrap: wrap; }
.b-sizes button { height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: .92rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background-color .3s, color .3s, box-shadow .3s; }
.b-sizes button:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.b-sizes button[aria-pressed="true"] { background: var(--grad); color: var(--slate); box-shadow: none; }
.b-glass { grid-column: 7 / span 6; position: relative; padding: 30px 30px 26px; border-radius: 32px 32px 32px 8px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 40px 80px -40px rgba(0, 0, 0, .6); }
.b-visual { position: relative; height: 260px; margin: -110px 0 12px; }
.b-visual img { position: absolute; object-fit: contain; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .5)); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.b-visual .v-box { left: 6%; bottom: 0; height: 100%; }
.b-visual .v-led { left: 22%; top: 8%; width: 46%; z-index: 2; }
.b-visual .v-air { right: 14%; bottom: 20%; width: 30%; z-index: 3; }
.b-visual .v-filter { right: 2%; bottom: 0; height: 62%; z-index: 2; }
.b-visual .v-soil { left: 34%; bottom: -6px; height: 44%; z-index: 4; }
.b-visual.swap img { opacity: 0; transform: translateY(14px); }
.b-list { list-style: none; margin: 0; padding: 0; }
.b-list li { display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .94rem; }
.b-list li small { color: rgba(255, 255, 255, .5); font-weight: 600; font-size: .78rem; }
.b-list li span { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-list li b { font-weight: 800; }
.b-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.b-foot small { display: block; color: rgba(255, 255, 255, .55); font-size: .8rem; }
.b-foot strong { font-size: 2rem; letter-spacing: -.04em; }
.b-foot .pw { display: block; color: var(--lime); font-size: .84rem; font-weight: 700; }

/* ---------- Deals-Leiste (rechts angeschnitten) ---------- */
.rail-sec { overflow: hidden; }
.rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 30px max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))) 30px; margin: -30px 0; }
.rail::-webkit-scrollbar { display: none; }
.rail-nav { display: flex; gap: 8px; }
.round { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .25s, color .25s, box-shadow .25s; }
.round:hover { background: var(--slate); color: #fff; box-shadow: none; }
/* Angebotskarte (Variante 21) */
.dcard { flex: 0 0 620px; scroll-snap-align: start; display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 22px; padding: 14px; border-radius: 30px; background: radial-gradient(90% 120% at 0% 50%, var(--slate-3, #24323A) 0%, var(--slate) 60%); color: #fff; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.dcard:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -32px rgba(15, 24, 28, .6); }
.dcard-ph { position: relative; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .8), 0 0 0 6px rgba(195, 234, 91, .08); }
.dcard-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.dcard-ph.cut { background: var(--ice); }
.dcard-ph.cut img { object-fit: contain; padding: 14%; box-sizing: border-box; filter: drop-shadow(0 16px 16px rgba(15, 24, 28, .2)); }
.dcard:hover .dcard-ph img { transform: scale(1.05); }
.dcard-ph .wish { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 4px 14px -6px rgba(15, 24, 28, .4), inset 0 0 0 1px var(--line); }
.dcard-ph .wish[aria-pressed="true"] { color: var(--deal); }
.dcard-ph .wish[aria-pressed="true"] .ico { fill: currentColor; }
.dcard-hint { display: none; position: absolute; right: 10px; bottom: 10px; height: 30px; padding: 0 10px 0 8px; border-radius: 999px; background: rgba(17, 26, 31, .78); backdrop-filter: blur(8px); color: #fff; align-items: center; gap: 6px; font-size: .75rem; font-weight: 750; }
.dcard-hint i, .dcard-ok i, .dcard-shop em i { width: 7px; height: 7px; border-radius: 50%; background: #8ED155; flex: none; }
.dcard-hint i { box-shadow: 0 0 0 3px rgba(142, 209, 85, .25); }
.dcard-side { container-type: inline-size; position: relative; display: flex; flex-direction: column; gap: 12px; padding-top: 4px; min-width: 0; }
.dcard-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; height: 46px; }
.dcard-hd > span { min-width: 0; }
.dcard-hd small { display: block; color: rgba(255, 255, 255, .62); font-size: .8rem; font-weight: 650; }
.dcard-hd h3 { font-size: 1.36rem; letter-spacing: -.03em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcard-pill { font-size: .74rem; font-weight: 800; color: var(--slate); background: var(--lime); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.dcard-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 16px; background: rgba(255, 255, 255, .07); }
.dcard-facts span { padding: 10px 12px; border-left: 1px solid rgba(255, 255, 255, .06); min-width: 0; }
.dcard-facts span:first-child { border-left: 0; }
.dcard-facts small { display: block; color: rgba(255, 255, 255, .62); font-size: .7rem; font-weight: 650; }
.dcard-facts b { font-size: .92rem; white-space: nowrap; }
.dcard-desc { color: rgba(255, 255, 255, .72); font-size: .92rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: opacity .3s; }
.dcard:hover .dcard-desc, .dcard:focus-visible .dcard-desc { opacity: 0; }
.dcard-row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dcard-price { min-width: 0; display: flex; align-items: baseline; gap: 5px; }
.dcard-price small { color: rgba(255, 255, 255, .55); font-size: .8rem; font-weight: 700; }
.dcard-row strong { font-size: 1.6rem; letter-spacing: -.04em; line-height: 1; color: var(--lime); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dcard-go { flex: none; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--grad); color: var(--slate); font-weight: 800; font-size: .86rem; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dcard-go.sm { height: 36px; padding: 0 14px; font-size: .8rem; }
.dcard-go .ico { width: 15px; height: 15px; }
/* Feld fährt im rechten Bereich hoch, bis unter den Titel */
.dcard-panel { position: absolute; left: 0; right: 0; top: 58px; bottom: 0; border-radius: 18px; background: #fff; color: var(--ink); padding: 12px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 -14px 40px -18px rgba(0, 0, 0, .6); transform: translateY(calc(100% + 24px)); transition: transform .55s var(--ease); }
.dcard:hover .dcard-panel, .dcard:focus-visible .dcard-panel { transform: none; }
.dcard-facts, .dcard-row { transition: opacity .3s; }
.dcard:hover .dcard-facts, .dcard:hover .dcard-row, .dcard:focus-visible .dcard-facts, .dcard:focus-visible .dcard-row { opacity: 0; }
.dcard-ok { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .84rem; font-weight: 800; }
.dcard-ok > span { display: inline-flex; align-items: center; gap: 8px; }
.dcard-ok small { color: var(--ink-2); font-size: .74rem; font-weight: 650; white-space: nowrap; }
.dcard-ok i { background: var(--chl); box-shadow: 0 0 0 3px rgba(47, 168, 79, .2); }
.dcard-shop { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 12px 4px 4px; border-radius: 12px; background: var(--ice); font-weight: 700; font-size: .84rem; }
.dcard-shop .mono { width: 28px; height: 28px; border-radius: 8px; background: #fff; display: grid; place-items: center; font-size: .66rem; font-weight: 800; box-shadow: inset 0 0 0 1px var(--line); }
.dcard-shop em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 750; color: var(--chl-2); }
.dcard-shop em i { background: var(--chl); }
.dcard-ft { margin-top: auto; display: flex; }
.dcard-ft .dcard-go { flex: 1; justify-content: center; }
/* Hochkant (Variante 22) für Kategorien: Foto oben, Kennzahlen als Liste */
.dcard.tall { display: flex; flex-direction: column; gap: 0; padding: 8px; border-radius: 28px; background: radial-gradient(120% 70% at 50% 0%, var(--slate-3, #24323A) 0%, var(--slate) 65%); }
.dcard.tall .dcard-ph { border-radius: 22px; box-shadow: none; }
.dcard.tall .dcard-ph .dcard-pill { position: absolute; left: 10px; top: 10px; }
.dcard.tall .dcard-side { padding: 14px 8px 6px; min-height: 240px; flex: 1; }
.dcard.tall .dcard-hd { height: auto; min-height: 46px; }
.dcard.tall .dcard-hd h3 { font-size: 1.12rem; }
.dcard.tall .dcard-facts { display: flex; flex-direction: column; padding: 2px 12px; }
.dcard.tall .dcard-facts span { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.dcard.tall .dcard-facts span:first-child { border-top: 0; }
.dcard.tall .dcard-facts small { font-size: .74rem; }
.dcard.tall .dcard-facts b { font-size: .84rem; }
.dcard.tall .dcard-row strong { font-size: 1.32rem; }
.dcard.tall .dcard-go { height: 40px; padding: 0 15px; font-size: .82rem; }
.dcard.tall .dcard-panel { top: 66px; gap: 6px; }
.dcard.tall .dcard-shop { padding-top: 3px; padding-bottom: 3px; }
@media (max-width: 680px) {
  .dcard { flex-basis: min(86vw, 380px); grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dcard-ph { aspect-ratio: 16 / 11; }
  /* Mobil: kein hochfahrendes Feld, stattdessen Label am Foto */
  .dcard-hint { display: inline-flex; }
  .dcard-panel { display: none; }
  .dcard:hover .dcard-facts, .dcard:hover .dcard-row, .dcard:hover .dcard-desc { opacity: 1; }
  .dcard-side { gap: 10px; }
  .dcard-row { margin-top: 6px; }
  .dcard-hd h3 { font-size: 1.15rem; }
}
@container (max-width: 250px) {
  .dcard .dcard-row .dcard-go { width: 42px; padding: 0; justify-content: center; }
  .dcard-row .dcard-go .t { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dcard, .dcard-panel, .dcard-ph img { transition: none; } }

.pcard { flex: 0 0 300px; scroll-snap-align: start; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pcard:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--line), 0 30px 50px -32px rgba(15, 24, 28, .4); }
.pcard-img { position: relative; height: 210px; background: var(--ice); display: grid; place-items: center; padding: 26px; }
.pcard-img img { max-height: 158px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(15, 24, 28, .2)); transition: transform .7s var(--ease); }
.pcard:hover .pcard-img img { transform: scale(1.05); }
.pcard-img .pill { position: absolute; left: 14px; top: 14px; }
.pcard-img .wish { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.pcard-img .wish[aria-pressed="true"] { color: var(--deal); }
.pcard-img .wish[aria-pressed="true"] .ico { fill: currentColor; }
.pcard-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; background: var(--slate); color: #fff; }
.pcard-body .b { font-size: .76rem; font-weight: 700; color: var(--lime); }
.pcard-body h3 { font-size: 1.02rem; min-height: 2.5em; }
.pcard-row { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.pcard-row strong { font-size: 1.35rem; letter-spacing: -.03em; }
.pcard-row small { display: block; font-size: .74rem; color: rgba(255, 255, 255, .5); }
.spark { width: 84px; height: 30px; }
.spark path { fill: none; stroke: var(--lime); stroke-width: 1.8; }
.spark .area { fill: url(#sparkfill); stroke: none; }

/* ---------- Marken-Hubs ---------- */
.brands-sec { position: relative; }
.brand-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.brand-list a { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); transition: padding .5s var(--ease), color .3s; }
.brand-list b { font-size: clamp(2rem, 5vw, 4.4rem); letter-spacing: -.055em; line-height: 1; font-weight: 800; transition: color .3s; }
.brand-list small { color: var(--ink-3); font-weight: 700; }
.brand-list .arr { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .3s, box-shadow .3s, color .3s; }
.brand-list a:hover { padding-left: 24px; }
.brand-list a:hover b { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.brand-list a:hover .arr { background: var(--slate); color: #fff; box-shadow: none; }
.brand-float { position: fixed; z-index: 30; left: 0; top: 0; width: 260px; height: 260px; pointer-events: none; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; background: rgba(238, 243, 245, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; padding: 30px; opacity: 0; transform: scale(.6); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.brand-float.on { opacity: 1; transform: scale(1); }
.brand-float img { max-height: 100%; object-fit: contain; filter: drop-shadow(0 20px 20px rgba(15, 24, 28, .3)); }

/* ---------- Produkt im Fokus (Ausbruch) ---------- */
.spot { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: center; }
.spot-img { grid-column: 1 / span 7; position: relative; height: 520px; border-radius: 40px 40px 8px 40px; background: var(--ice); }
.clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.spot-img .leafshade { inset: -6%; opacity: .32; }
.spot-img img { position: absolute; left: 10%; top: 24%; width: 100%; max-width: none; filter: drop-shadow(0 40px 40px rgba(15, 24, 28, .3)); z-index: 2; }
.spot-img .pill { position: absolute; left: 28px; top: 28px; z-index: 3; }
.spot-data { grid-column: 9 / span 4; position: relative; z-index: 3; }
.spot-data .b { font-weight: 700; color: var(--chl-2); font-size: .9rem; }
.spot-data h2 { font-size: clamp(2rem, 3.4vw, 3rem); margin: 6px 0 14px; }
.spot-data p { color: var(--ink-2); margin-bottom: 26px; }
.chart { position: relative; height: 140px; margin-bottom: 8px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart .ln { fill: none; stroke: var(--chl-2); stroke-width: 2; }
.chart .ar { fill: url(#chartfill); }
.chart .avg { stroke: var(--ink-3); stroke-dasharray: 3 5; stroke-width: 1.2; }
.chart .dot { fill: var(--chl); stroke: #fff; stroke-width: 3; }
.chart-lbl { display: flex; justify-content: space-between; font-size: .76rem; color: var(--ink-3); font-weight: 600; margin-bottom: 22px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-bottom: 26px; }
.kpis div { padding: 16px 12px 0 0; }
.kpis b { display: block; font-size: 1.3rem; letter-spacing: -.03em; }
.kpis small { color: var(--ink-3); font-size: .78rem; font-weight: 600; }
.spot-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Ratgeber (asymmetrisch) ---------- */
.mag { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.art { display: flex; flex-direction: column; gap: 10px; }
.art-img { position: relative; border-radius: var(--r); background: var(--ice); overflow: hidden; display: grid; place-items: center; }
.art-img img { transition: transform .9s var(--ease); }
.art:hover .art-img img { transform: scale(1.05); }
.art-meta { font-size: .8rem; font-weight: 700; color: var(--ink-3); margin-top: 8px; }
.art h3 { font-size: 1.35rem; }
.art p { color: var(--ink-2); }
.art-big { grid-column: 1 / span 6; grid-row: span 2; }
.art-big .art-img { height: 460px; border-radius: 40px 8px 40px 40px; }
.art-big .art-img .tex { position: absolute; inset: 0; background: url(img/v12-adern.webp) center / cover; }
.art-big .art-img .tex::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(17, 26, 31, .55)); }
.art-big .art-img img { position: relative; z-index: 2; width: 70%; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .4)); }
.art-big h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.art-s1 { grid-column: 8 / span 5; align-self: start; margin-top: 90px; }
.art-s2 { grid-column: 7 / span 6; align-self: start; margin-top: 10px; }
.art-s1 .art-img, .art-s2 .art-img { height: 200px; padding: 24px; }
.art-s1 .art-img img, .art-s2 .art-img img { max-height: 100%; object-fit: contain; }
.art-s2 { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; }
.art-s1 { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; }

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--slate); color: #fff; padding: 110px 0 0; overflow: hidden; border-radius: 48px 48px 0 0; margin-top: 40px; }
.footer .leafshade { inset: -10% -20% 30% 30%; mix-blend-mode: screen; filter: invert(1); opacity: .07; }
.f-top { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; padding-bottom: 72px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.f-top h2 { font-size: clamp(2.4rem, 4.8vw, 4.4rem); }
.f-top h2 span { color: rgba(255, 255, 255, .45); }
.f-form { display: flex; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.f-form input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; padding: 0 18px; color: #fff; }
.f-form input::placeholder { color: rgba(255, 255, 255, .45); }
.f-note { font-size: .82rem; color: rgba(255, 255, 255, .5); margin: 12px 0 0 20px; }
.f-cols { position: relative; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; padding: 64px 0; }
.f-about p { color: rgba(255, 255, 255, .6); margin-top: 18px; max-width: 30em; font-size: .94rem; }
.footer .brand { color: #fff; font-size: 1.42rem; }
.f-cols h4 { font-size: .86rem; letter-spacing: 0; color: rgba(255, 255, 255, .5); margin-bottom: 16px; font-weight: 700; }
.f-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.f-cols a { color: rgba(255, 255, 255, .85); font-weight: 600; font-size: .94rem; }
.f-cols a:hover { color: var(--lime); }
.f-giant { position: relative; font-weight: 800; font-size: clamp(5rem, 19vw, 19rem); letter-spacing: -.07em; line-height: .78; text-align: center; color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 80%); -webkit-background-clip: text; background-clip: text; user-select: none; margin-bottom: -2.5vw; }
.f-legal { position: relative; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 0 30px; font-size: .8rem; color: rgba(255, 255, 255, .45); border-top: 1px solid rgba(255, 255, 255, .1); }
.f-legal nav { display: flex; gap: 20px; }
.f-legal a:hover { color: #fff; }

/* ---------- Suchpalette, Toast ---------- */
.palette { position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center; padding-top: 12vh; visibility: hidden; }
.palette.open { visibility: visible; }
.palette-bg { position: absolute; inset: 0; background: rgba(17, 26, 31, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.palette.open .palette-bg { opacity: 1; }
.palette-box { position: relative; width: min(640px, calc(100vw - 32px)); border-radius: 24px; background: #fff; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .5); overflow: hidden; transform: translateY(-14px) scale(.98); opacity: 0; transition: transform .4s var(--ease), opacity .3s; }
.palette.open .palette-box { transform: none; opacity: 1; }
.pal-in { display: flex; align-items: center; gap: 12px; padding: 0 20px; height: 64px; border-bottom: 1px solid var(--line); }
.pal-in input { flex: 1; border: 0; outline: 0; font-size: 1.05rem; }
.pal-in kbd { font: 700 .72rem/1 "Manrope"; padding: 6px 8px; border-radius: 8px; background: var(--ice); color: var(--ink-2); }
.pal-body { max-height: 56vh; overflow: auto; padding: 10px; }
.pal-body h5 { margin: 10px 12px 6px; font-size: .76rem; color: var(--ink-3); }
.pal-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; }
.pal-item:hover, .pal-item.sel { background: var(--ice); }
.pal-item img { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; background: var(--ice); padding: 4px; }
.pal-item div { flex: 1; min-width: 0; }
.pal-item small { display: block; color: var(--ink-3); font-size: .78rem; }
.pal-item b { font-weight: 700; font-size: .94rem; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 95; opacity: 0; visibility: hidden; transform: translate(-50%, 140%); padding: 14px 20px; border-radius: 999px; background: var(--slate); color: #fff; font-weight: 650; font-size: .92rem; transition: transform .45s var(--ease); }
.toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast { transition: transform .45s var(--ease), opacity .3s, visibility .3s; }

/* =========================================================
   PRODUKTSEITE
   ========================================================= */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; white-space: nowrap; font-size: .86rem; color: var(--ink-3); font-weight: 600; padding: 26px 0; }
.crumbs a:hover { color: var(--ink); }
.pd-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: start; padding-bottom: 40px; }
.pd-gal { grid-column: 1 / span 7; position: relative; }
.pd-stage { position: relative; aspect-ratio: 1 / 1; border-radius: 40px 40px 40px 8px; background: var(--ice); display: grid; place-items: center; overflow: hidden; }
.pd-stage .leafshade { inset: -10%; opacity: .28; }
.pd-stage img { position: absolute; z-index: 2; inset: 10%; width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 40px 40px rgba(15, 24, 28, .28)); transition: opacity .4s, transform .6s var(--ease); }
.pd-stage.photo { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.pd-stage.photo .leafshade { display: none; }
.pd-stage.photo img { inset: 0; width: 100%; height: 100%; object-fit: contain; filter: none; }
.pd-stage .zoom-hint { position: absolute; right: 20px; bottom: 20px; z-index: 3; }
.pd-thumbs { position: absolute; left: 24px; bottom: -34px; z-index: 4; display: flex; gap: 10px; padding: 10px; border-radius: 20px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 40px -24px rgba(15, 24, 28, .4); }
.pd-thumbs button { width: 70px; height: 70px; border-radius: 14px; background: var(--ice); display: grid; place-items: center; padding: 8px; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s; }
.pd-thumbs button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--slate); }
.pd-thumbs img { max-height: 100%; object-fit: contain; }
.pd-buy { grid-column: 8 / span 5; position: sticky; top: 100px; padding-top: 8px; }
.pd-buy .b { font-weight: 700; color: var(--chl-2); }
.pd-buy h1 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); letter-spacing: -.05em; margin: 8px 0 12px; }
.pd-buy h1 span { display: block; color: var(--ink-3); font-size: .5em; letter-spacing: -.02em; margin-top: 8px; }
.pd-buy .claim { color: var(--ink-2); font-size: 1.06rem; margin-bottom: 24px; }
.keys { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 0; border-radius: 22px; background: var(--ice); padding: 6px; margin-bottom: 22px; }
.keys div { padding: 14px 16px; }
.keys div + div { box-shadow: -1px 0 0 var(--ice-3); }
.keys b { display: block; font-size: 1.12rem; letter-spacing: -.03em; }
.keys small { color: var(--ink-2); font-size: .78rem; font-weight: 600; }
.variants { margin-bottom: 22px; }
.variants small { display: block; font-weight: 700; font-size: .82rem; color: var(--ink-2); margin-bottom: 10px; }
.variants div { display: flex; gap: 8px; flex-wrap: wrap; }
.variants a { height: 44px; padding: 0 16px; border-radius: 14px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s; }
.variants a em { font-style: normal; color: var(--ink-3); font-weight: 600; font-size: .8rem; }
.variants a:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.variants a[aria-current] { box-shadow: inset 0 0 0 2px var(--slate); }
.price-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.price-row strong { font-size: 2.8rem; letter-spacing: -.05em; line-height: 1; }
.stock { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: .92rem; color: var(--ink-2); margin-bottom: 22px; }
.stock i { width: 8px; height: 8px; border-radius: 50%; background: var(--chl); box-shadow: 0 0 0 4px rgba(47, 168, 79, .18); }
.buy-row { display: flex; gap: 10px; }
.buy-row .btn-go { flex: 1; height: 60px; font-size: 1.05rem; }
.buy-row .icon-btn { width: 60px; height: 60px; background: var(--ice); }
.buy-links { display: flex; gap: 18px; margin-top: 14px; font-size: .88rem; font-weight: 650; color: var(--ink-2); }
.buy-links a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ice-3); }
.buy-links a:hover { color: var(--ink); text-decoration-color: currentColor; }
.pd-tabs { position: sticky; top: 76px; z-index: 30; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); margin-top: 40px; }
.pd-tabs .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pd-tabs a { flex: none; height: 56px; padding: 0 16px; display: inline-flex; align-items: center; font-weight: 700; font-size: .92rem; color: var(--ink-2); box-shadow: inset 0 -2px 0 transparent; transition: color .2s, box-shadow .2s; }
.pd-tabs a:hover { color: var(--ink); }
.pd-tabs a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--chl); }

/* Passt sie zu dir? */
.fit-sec { position: relative; background: var(--slate); color: #fff; overflow: hidden; border-radius: 48px 8px 48px 48px; margin: 0 clamp(0px, 1.5vw, 24px); }
.fit-sec .bokeh { position: absolute; right: -10%; top: -20%; width: 60%; height: 140%; background: url(img/v12-laub.webp) center / cover; opacity: .55; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); }
.fit-head { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
.seg { display: flex; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.seg span { padding: 0 14px; align-self: center; font-size: .82rem; color: rgba(255, 255, 255, .5); font-weight: 700; }
.seg button { height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: .9rem; color: rgba(255, 255, 255, .8); transition: background-color .3s, color .3s; }
.seg button[aria-pressed="true"] { background: var(--grad); color: var(--slate); }
.seg button.over { color: rgba(255, 255, 255, .35); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }
.seg button.over[aria-pressed="true"] { background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; }
.fit-body { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: center; }
.fit-plan { grid-column: 1 / span 5; position: relative; aspect-ratio: 1; border-radius: 24px; background: rgba(255, 255, 255, .03) linear-gradient(transparent 0 calc(100% - 1px), rgba(255, 255, 255, .06) 0) 0 0 / 100% 10%, linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(255, 255, 255, .06) 0) 0 0 / 10% 100%; }
.fit-box { position: absolute; left: 50%; top: 50%; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 6px; transform: translate(-50%, -50%); transition: width .7s var(--ease), height .7s var(--ease); }
.fit-light { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(195, 234, 91, .95), rgba(126, 205, 84, .45) 60%, transparent); transition: width .7s var(--ease), height .7s var(--ease); mix-blend-mode: screen; }
.fit-box span { position: absolute; left: 10px; top: -28px; font-size: .78rem; color: rgba(255, 255, 255, .6); font-weight: 700; white-space: nowrap; }
.fit-txt { grid-column: 7 / span 6; }
.fit-txt h3 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); letter-spacing: -.04em; line-height: 1.08; margin: 16px 0 14px; }
.fit-txt p { color: rgba(255, 255, 255, .7); font-size: 1.05rem; max-width: 32em; }
.fit-nums { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; border-top: 1px solid rgba(255, 255, 255, .1); }
.fit-nums div { padding: 26px 22px 0 0; }
.fit-nums div + div { padding-left: 22px; box-shadow: -1px 0 0 rgba(255, 255, 255, .1); }
.fit-nums small { display: block; font-size: .8rem; font-weight: 700; color: rgba(255, 255, 255, .55); }
.fit-nums b { display: block; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.045em; margin: 6px 0 2px; }
.fit-nums span { font-size: .82rem; color: rgba(255, 255, 255, .55); }

/* Set-Brücke */
.need { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.need-copy { grid-column: 1 / span 4; position: sticky; top: 160px; }
.need-copy h2 { margin-bottom: 16px; }
.need-copy .total { margin-top: 30px; padding: 22px; border-radius: 22px 22px 22px 6px; background: var(--ice); }
.need-copy .total small { display: block; color: var(--ink-2); font-weight: 600; font-size: .84rem; }
.need-copy .total strong { display: block; font-size: 2.1rem; letter-spacing: -.04em; margin: 4px 0 14px; }
.need-grid { grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.need-grid .ncard:nth-child(even) { margin-top: 60px; }
.ncard { position: relative; border-radius: var(--r); background: var(--ice); padding: 22px; min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.ncard:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -36px rgba(15, 24, 28, .45); }
.ncard img { position: absolute; z-index: -1; right: 10%; top: -26px; height: 70%; max-width: 80%; object-fit: contain; filter: drop-shadow(0 20px 22px rgba(15, 24, 28, .25)); }
.ncard small { font-size: .76rem; font-weight: 700; color: var(--chl-2); }
.ncard h3 { font-size: 1.08rem; }
.ncard .why { color: var(--ink-2); font-size: .86rem; line-height: 1.45; }
.ncard .row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.ncard .row b { font-size: 1.2rem; letter-spacing: -.03em; }
.ncard .add { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; transition: background-color .25s, color .25s; }
.ncard .add[aria-pressed="true"] { background: var(--slate); color: var(--lime); }
.ncard.have { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }

/* Versionen */
.vers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: 32px; background: var(--ice); padding: 8px; }
.ver { position: relative; padding: 26px; border-radius: 26px; display: flex; flex-direction: column; gap: 6px; }
.ver.cur { background: #fff; box-shadow: 0 30px 50px -36px rgba(15, 24, 28, .4); }
.ver .lbl { font-size: .78rem; font-weight: 700; color: var(--ink-3); }
.ver.cur .lbl { color: var(--chl-2); }
.ver img { height: 120px; object-fit: contain; margin: 10px 0 14px; align-self: flex-start; max-width: 100%; }
.ver h3 { font-size: 1.15rem; }
.ver ul { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 6px; font-size: .88rem; color: var(--ink-2); }
.ver ul b { color: var(--ink); }
.ver .row { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.ver .row strong { font-size: 1.3rem; letter-spacing: -.03em; }

/* Urteil */
.verdict { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.verdict-q { grid-column: 1 / span 5; }
.verdict-q blockquote { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.18; }
.verdict-q blockquote { padding-left: 28px; box-shadow: inset 5px 0 0 #8ED155; }
.verdict-q cite { display: block; margin-top: 18px; color: var(--ink-3); font-style: normal; font-weight: 600; font-size: .9rem; }
.pc { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pc div { border-radius: var(--r); padding: 26px; background: var(--ice); }
.pc div:last-child { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); margin-top: 40px; }
.pc h4 { font-size: 1rem; letter-spacing: -.02em; margin-bottom: 14px; }
.pc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: .94rem; }
.pc li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.pc li::before { content: "+"; font-weight: 800; color: var(--chl); }
.pc div:last-child li::before { content: "-"; color: var(--ink-3); }

/* Daten + FAQ */
.specs-faq { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.specs { grid-column: 1 / span 6; }
.specs h3, .faq h3 { font-size: 1.5rem; letter-spacing: -.035em; margin-bottom: 18px; }
.spec-g { margin-bottom: 26px; }
.spec-g h4 { font-size: .8rem; letter-spacing: 0; color: var(--ink-3); margin-bottom: 6px; font-weight: 700; }
.spec-g dl { margin: 0; }
.spec-g div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.spec-g dt { color: var(--ink-2); }
.spec-g dd { margin: 0; font-weight: 700; }
.faq { grid-column: 8 / span 5; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transition: transform .3s var(--ease); }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq details p { padding: 0 0 18px; color: var(--ink-2); }
.mbar { display: none; }

/* =========================================================
   KATEGORIE / GRÖSSENSEITE
   ========================================================= */
.cat-hero { position: relative; overflow: hidden; background: var(--ice); padding: 40px 0 0; }
.cat-hero-grid { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; min-height: 520px; }
.cat-hero-copy { grid-column: 1 / span 6; position: relative; z-index: 3; padding: 40px 0 80px; }
.cat-hero h1 { font-size: clamp(2.8rem, 5.6vw, 5.4rem); letter-spacing: -.055em; line-height: .96; margin: 0 0 22px; }
.cat-hero .lead { margin-bottom: 30px; }
.cat-photo { position: absolute; z-index: 1; right: 0; top: 96px; bottom: 0; width: 48%; border-radius: 48px 0 0 0; overflow: hidden; }
.cat-photo img { width: 100%; height: 100%; object-fit: cover; }
.cat-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ice) 0%, rgba(238, 243, 245, 0) 30%); }
.cat-facts { position: absolute; z-index: 4; left: 46%; bottom: 40px; display: flex; gap: 10px; }
.cat-facts .chip-glass { position: static; }
.cat-bar { position: sticky; top: 76px; z-index: 20; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.cat-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 76px; }
.cat-bar .seg { background: var(--ice); box-shadow: none; }
.cat-bar .seg button { color: var(--ink-2); }
.cat-bar .seg span { color: var(--ink-3); }
.cat-bar .seg button[aria-pressed="true"] { background: var(--slate); color: #fff; }
.cat-bar .cnt { font-weight: 700; color: var(--ink-2); font-size: .92rem; }
.kits { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.kit { grid-column: span 4; position: relative; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; display: flex; flex-direction: column; transition: transform .5s var(--ease), box-shadow .5s var(--ease), opacity .4s; }
.kit:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--line), 0 30px 50px -32px rgba(15, 24, 28, .45); }
.kit.wide { grid-column: span 8; flex-direction: row; }
.kit.wide .kit-viz { flex: 1.2; height: auto; min-height: 380px; }
.kit.wide .kit-body { flex: 1; }
.kit[hidden] { display: none; }
.kit-viz { position: relative; height: 270px; background: var(--ice); overflow: hidden; }
.kit-viz img { position: absolute; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(15, 24, 28, .25)); transition: transform .8s var(--ease); }
.kit-viz .r-box { left: 8%; bottom: 7%; height: 82%; }
.kit-viz .r-led { left: 22%; top: 9%; width: 44%; z-index: 2; }
.kit-viz .r-air { right: 6%; bottom: 26%; width: 30%; z-index: 3; }
.kit-viz .r-filter { right: 34%; bottom: 5%; height: 42%; z-index: 4; }
.kit.wide .r-box { left: 14%; height: 74%; }
.kit.wide .r-led { left: 26%; top: 12%; width: 38%; }
.kit.wide .r-air { right: 10%; width: 26%; }
.kit.wide .r-filter { right: 34%; height: 36%; }
.kit:hover .r-led { transform: translateY(-6px); }
.kit:hover .r-air { transform: translateX(6px); }
.kit-viz .pill { position: absolute; left: 16px; top: 16px; z-index: 5; }
.kit-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 6px; }
.kit-body small { color: var(--ink-3); font-weight: 600; font-size: .82rem; }
.kit-body h3 { font-size: 1.25rem; }
.kit-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.kit-meta span { height: 30px; padding: 0 11px; border-radius: 10px; background: var(--ice); display: inline-flex; align-items: center; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.kit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 16px; }
.kit-row > div { min-width: 0; }
.kit-row .btn { flex: none; }
.kit-row strong { font-size: 1.6rem; letter-spacing: -.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kit-row small { display: block; }
.explain { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
.explain-copy { grid-column: 1 / span 5; }
.explain-copy h2 { margin-bottom: 18px; }
.explain-list { grid-column: 7 / span 6; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.explain-list li { counter-increment: s; display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.explain-list li::before { content: counter(s, decimal-leading-zero); font-size: 1.8rem; font-weight: 800; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.2px var(--ink-3); }
.explain-list b { display: block; font-size: 1.1rem; margin-bottom: 4px; }
.explain-list span { color: var(--ink-2); font-size: .94rem; }
.size-links { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.size-link { position: relative; border-radius: 24px; background: var(--ice); padding: 22px; min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: background-color .4s, color .4s; }
.size-link:hover { background: var(--slate); color: #fff; }
.size-link .sq { position: absolute; right: 18px; top: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .35; }
.size-link b { font-size: 1.6rem; letter-spacing: -.04em; }
.size-link small { font-weight: 600; opacity: .7; font-size: .84rem; }
.seo-text { columns: 2; column-gap: 48px; color: var(--ink-2); }
.seo-text h3 { color: var(--ink); margin: 0 0 10px; break-after: avoid; }
.seo-text p { margin-bottom: 18px; break-inside: avoid; }

/* Größenseite */
.gs-hero { position: relative; background: var(--slate); color: #fff; overflow: hidden; border-radius: 0 0 48px 48px; padding: 40px 0 0; }
.gs-hero .bokeh { position: absolute; inset: 0; background: url(img/v12-laub.webp) center / cover; opacity: .6; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 80%); mask-image: linear-gradient(90deg, transparent 30%, #000 80%); }
.gs-hero .crumbs { color: rgba(255, 255, 255, .45); }
.gs-hero .crumbs a:hover { color: #fff; }
.gs-grid { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: center; padding-bottom: 90px; }
.gs-copy { grid-column: 1 / span 6; }
.gs-copy h1 { font-size: clamp(3rem, 6vw, 5.8rem); letter-spacing: -.055em; line-height: .95; margin-bottom: 22px; }
.gs-copy .lead { color: rgba(255, 255, 255, .7); margin-bottom: 30px; }
.gs-copy .size-chips a { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.gs-copy .size-chips a[aria-current] { background: var(--grad); color: var(--slate); box-shadow: none; }
.gs-copy .size-chips a:hover { background: #fff; color: var(--ink); }
.gs-viz { grid-column: 8 / span 5; position: relative; aspect-ratio: 1; }
.gs-viz .fit-plan { position: absolute; inset: 0; aspect-ratio: auto; }
.gs-viz .fit-box { width: 66%; height: 66%; }
.gs-viz .fit-light { width: 80%; height: 80%; }
.gs-viz .pot { position: absolute; width: 18%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2c3a42, #141d22); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
.gs-nums { position: absolute; left: -60px; bottom: -50px; z-index: 3; display: grid; grid-template-columns: repeat(3, auto); gap: 0; border-radius: 24px 24px 24px 6px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--ink); padding: 8px; box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .6); }
.gs-nums div { padding: 14px 20px; }
.gs-nums div + div { box-shadow: -1px 0 0 var(--line); }
.gs-nums small { display: block; font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.gs-nums b { font-size: 1.35rem; letter-spacing: -.03em; }
.gs-block { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.gs-block-head { grid-column: 1 / span 3; position: sticky; top: 110px; }
.gs-block-head .num { font-size: 4rem; font-weight: 800; letter-spacing: -.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--ice-3); }
.gs-block-head h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); margin: 10px 0 12px; }
.gs-block-head p { color: var(--ink-2); font-size: .95rem; }
.gs-block-body { grid-column: 5 / span 8; }
.gs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gs-cards .pcard { flex: none; }
.gs-cards .pcard:nth-child(2) { transform: translateY(40px); }
.gs-cards .pcard:nth-child(2):hover { transform: translateY(34px); }
.gs-cards .pcard .why { font-size: .82rem; color: rgba(255, 255, 255, .62); line-height: 1.4; }
.gs-calc { border-radius: 32px; background: var(--ice); padding: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.gs-calc label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 10px; }
.gs-calc input[type=range] { width: 100%; accent-color: var(--chl); }
.gs-calc output { display: block; font-size: 2.6rem; font-weight: 800; letter-spacing: -.05em; }
.gs-calc .res { border-radius: 24px 24px 24px 6px; background: var(--slate); color: #fff; padding: 26px; }
.gs-calc .res small { color: rgba(255, 255, 255, .55); font-weight: 600; font-size: .84rem; }

/* ---------- Mega-Menü ---------- */
.menu-ind { position: absolute; z-index: 0; left: 0; top: 0; height: 42px; width: 0; border-radius: 999px; background: var(--ice); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), width .5s var(--ease), opacity .25s; }
.menu-ind.instant { transition: none; }
.chev { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: transform .35s var(--ease), opacity .2s; }
.menu a[aria-expanded="true"] .chev { transform: rotate(180deg); opacity: 1; }
.hot-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); flex: none; }
.hot-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #8ED155; opacity: 0; animation: hotPulse 2.6s var(--ease) infinite; }
@keyframes hotPulse { 0% { transform: scale(.4); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.header.mega-on { background: #fff; box-shadow: none; }

.mega { position: absolute; left: 0; right: 0; top: 100%; pointer-events: none; }
.mega.open { pointer-events: auto; }
.mega-clip { background: #fff; border-radius: 0 0 34px 34px; box-shadow: 0 1px 0 var(--line) inset, 0 40px 80px -40px rgba(15, 24, 28, .45); clip-path: inset(0 0 100% 0 round 0 0 34px 34px); transition: clip-path .55s var(--ease); }
.mega.open .mega-clip { clip-path: inset(0 0 0 0 round 0 0 34px 34px); }
.mega-stage { position: relative; height: 0; transition: height .5s var(--ease); }
.mega.first .mega-stage { transition: none; }
.mm-panel { position: absolute; top: 0; left: var(--gut); right: var(--gut); display: grid; grid-template-columns: minmax(250px, 3fr) 6.4fr minmax(280px, 3.2fr); gap: clamp(24px, 3vw, 48px); padding: 30px 0 38px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.mm-panel.on { opacity: 1; visibility: visible; transition: opacity .35s .05s; }
.mm-panel.on > *, .mm-panel.on .mm-prod, .mm-panel.on .mm-kit { animation: mmIn .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes mmIn { from { opacity: 0; transform: translateY(14px); } }
.mm-panel h5, .dr-in h5 { margin: 0 0 12px; font-size: .8rem; font-weight: 700; color: var(--ink-3); letter-spacing: 0; }
.mm-col h5 ~ h5 { margin-top: 26px; }

.mm-sizes, .mm-cats { list-style: none; margin: 0 -10px; padding: 0; }
.mm-sizes a { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 14px; padding: 7px 12px; border-radius: 16px; transition: background-color .2s; }
.mm-sizes a:hover { background: var(--ice); }
.mm-sizes b { display: block; font-weight: 750; font-size: .98rem; letter-spacing: -.01em; }
.mm-sizes small { color: var(--ink-3); font-weight: 600; font-size: .8rem; }
.mm-sizes i { font-style: normal; font-weight: 700; font-size: .75rem; color: var(--ink-2); background: var(--ice); border-radius: 999px; padding: 4px 9px; transition: background-color .2s; }
.mm-sizes a:hover i { background: #fff; }
.mm-sizes .ico { width: 16px; height: 16px; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .3s var(--ease); }
.mm-sizes a:hover .ico { opacity: 1; transform: none; }
.mm-floor { width: 28px; height: 28px; }
.mm-acc a { padding-top: 5px; padding-bottom: 5px; grid-template-columns: 12px 1fr auto; }
.mm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ice-3); transition: background-color .2s, transform .3s var(--ease); }
.mm-acc a:hover .mm-dot { background: var(--chl); transform: scale(1.4); }
.mm-floor rect { fill: none; stroke: var(--ink); stroke-width: 1.7; transition: fill .25s, stroke .25s; }
.mm-sizes a:hover .mm-floor rect { fill: var(--lime); stroke: var(--chl-2); }
.mm-cats a { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 18px; transition: background-color .2s; }
.mm-cats a:hover { background: var(--ice); }
.mm-cats img { width: 64px; height: 64px; object-fit: contain; border-radius: 14px; background: var(--ice); padding: 6px; transition: transform .4s var(--ease), background-color .2s; }
.mm-cats a:hover img { background: #fff; transform: rotate(-4deg) scale(1.05); }
.mm-cats b { display: block; font-weight: 750; }
.mm-cats small { color: var(--ink-3); font-weight: 600; font-size: .82rem; }
.mm-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-pills a { padding: 8px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 650; font-size: .86rem; transition: background-color .2s, color .2s, box-shadow .2s; }
.mm-pills a:hover { background: var(--slate); color: #fff; box-shadow: none; }

.mm-main-h { display: flex; align-items: baseline; justify-content: space-between; }
.mm-main-h a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .86rem; color: var(--chl-2); }
.mm-main-h .ico, .mm-go .ico, .mm-out a .ico, .dr-builder .ico { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.mm-main-h a:hover .ico { transform: translateX(3px); }
.mm-quick { margin-top: 22px; }
.mm-quick h5 { margin-bottom: 10px; }
.mm-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mm-prod, .mm-kit { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: var(--ice); padding: 14px 18px 18px; transition: background-color .3s; }
.mm-prod:hover, .mm-kit:hover { background: var(--ice-2); }
.mm-pimg { height: 168px; display: grid; place-items: center; margin-bottom: 10px; }
.mm-pimg img { max-height: 150px; max-width: 88%; object-fit: contain; filter: drop-shadow(0 18px 16px rgba(15, 24, 28, .18)); transition: transform .6s var(--ease); }
.mm-prod:hover .mm-pimg img { transform: translateY(-6px) scale(1.05); }
.mm-prod small { color: var(--ink-3); font-weight: 650; font-size: .78rem; }
.mm-prod b, .mm-kit b { font-weight: 750; font-size: .98rem; letter-spacing: -.01em; line-height: 1.25; margin: 2px 0 8px; }
.mm-price { margin-top: auto; font-weight: 750; font-size: .92rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mm-price em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--chl-2); background: #fff; border-radius: 999px; padding: 3px 8px; }
.mm-stack { position: relative; height: 168px; margin-bottom: 10px; }
.mm-stack img { position: absolute; bottom: 4px; object-fit: contain; filter: drop-shadow(0 14px 12px rgba(15, 24, 28, .2)); transition: transform .6s var(--ease); }
.mm-stack img[style*="--j:0"] { left: 0; height: 150px; width: 58%; }
.mm-stack img[style*="--j:1"] { right: 2%; top: 6px; bottom: auto; height: 70px; width: 52%; }
.mm-stack img[style*="--j:2"] { right: 8%; height: 72px; width: 36%; }
.mm-kit:hover .mm-stack img[style*="--j:0"] { transform: translateX(-4px) rotate(-2deg); }
.mm-kit:hover .mm-stack img[style*="--j:1"] { transform: translateY(-5px); }
.mm-kit:hover .mm-stack img[style*="--j:2"] { transform: translateX(5px) rotate(3deg); }
.mm-tag { position: absolute; top: 14px; left: 14px; font-style: normal; font-size: .72rem; font-weight: 750; color: var(--slate); background: var(--grad); border-radius: 999px; padding: 4px 10px; }

.mm-feature { position: relative; display: flex; overflow: hidden; border-radius: 28px 28px 28px 8px; background: var(--slate); color: #fff; min-height: 300px; isolation: isolate; }
.mm-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; z-index: -2; transform: scale(1.04); transition: transform 1.2s var(--ease), opacity .4s; }
.mm-feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17, 26, 31, .1) 0%, rgba(17, 26, 31, .55) 45%, rgba(17, 26, 31, .94) 100%); }
.mm-feature:hover > img { transform: scale(1.1); opacity: .7; }
.mm-f-txt { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 24px; width: 100%; }
.mm-f-txt small { color: var(--lime); font-weight: 700; font-size: .8rem; }
.mm-f-txt b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.12; }
.mm-f-sub { color: rgba(255, 255, 255, .7); font-size: .88rem; line-height: 1.5; }
.mm-go { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 6px; height: 42px; padding: 0 18px; border-radius: 999px; background: #fff; color: var(--slate); font-weight: 750; font-size: .88rem; }
.mm-builder .mm-go { background: var(--grad); }
.mm-feature:hover .mm-go .ico { transform: translateX(3px); }
.mm-chips { display: flex; gap: 6px; }
.mm-chips button { flex: 1; height: 36px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; font-size: .84rem; transition: background-color .2s, color .2s; }
.mm-chips button:hover { background: rgba(255, 255, 255, .22); }
.mm-chips button.on { background: var(--lime); color: var(--slate); }
.mm-out { display: grid; gap: 2px; min-height: 92px; }
.mm-out strong { font-size: 2.1rem; font-weight: 800; letter-spacing: -.05em; line-height: 1.05; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; justify-self: start; }
.mm-out span { color: rgba(255, 255, 255, .7); font-size: .84rem; font-weight: 600; }
.mm-out a { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 750; font-size: .88rem; color: #fff; }
.mm-out a:hover .ico { transform: translateX(3px); }

.mega-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(15, 24, 28, .34); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.mega-scrim.on { opacity: 1; pointer-events: auto; }

/* ---------- Mobil: Schublade ---------- */
.noscroll, .noscroll body { overflow: hidden; }
.drawer { position: fixed; inset: 0; z-index: 70; visibility: hidden; transition: visibility 0s .5s; }
.drawer.open { visibility: visible; transition: none; }
.drawer-bg { position: absolute; inset: 0; background: rgba(15, 24, 28, .4); opacity: 0; transition: opacity .4s var(--ease); }
.drawer.open .drawer-bg { opacity: 1; }
.drawer-box { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .55s var(--ease); border-radius: 28px 0 0 28px; }
.drawer.open .drawer-box { transform: none; }
.drawer-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 20px 28px; }
.dr-sec { border-bottom: 1px solid var(--line); }
.drawer.open .dr-sec, .drawer.open .dr-builder { animation: mmIn .6s var(--ease) both; animation-delay: calc(120ms + var(--i) * 50ms); }
.dr-sec summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; cursor: pointer; }
.dr-sec summary::-webkit-details-marker { display: none; }
.dr-sec summary .chev { width: 16px; height: 16px; opacity: .6; }
.dr-sec[open] summary .chev { transform: rotate(180deg); }
.dr-in { display: grid; gap: 22px; padding: 0 0 22px; }
.dr-in > *, .dr-in .mm-main { min-width: 0; }
.dr-in .mm-main-h a { display: none; }
.dr-in .mm-prods { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 168px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; scroll-snap-type: x mandatory; }
.dr-in .mm-prod, .dr-in .mm-kit { scroll-snap-align: start; padding: 10px 14px 14px; }
.dr-in .mm-pimg, .dr-in .mm-stack { height: 120px; }
.dr-in .mm-pimg img { max-height: 108px; }
.dr-in .mm-stack img[style*="--j:0"] { height: 108px; }
.dr-in .mm-feature { min-height: 170px; }
.dr-in .mm-f-txt b { font-size: 1.2rem; }
.dr-builder { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 18px 20px; border-radius: 22px 22px 22px 6px; background: var(--slate); color: #fff; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.dr-builder span { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 700; color: var(--lime); }
@media (max-width: 1180px) { .mega, .mega-scrim { display: none; } }
@media (max-width: 1440px) and (min-width: 1181px) { .mm-panel { grid-template-columns: minmax(230px, 3fr) 6.4fr minmax(250px, 3fr); } .mm-pimg, .mm-stack { height: 140px; } .mm-pimg img { max-height: 124px; } .mm-stack img[style*="--j:0"] { height: 124px; } }
@media (prefers-reduced-motion: reduce) { .mega-clip, .mega-stage, .menu-ind, .drawer-box { transition: none; } .mm-panel.on > *, .mm-panel.on .mm-prod, .mm-panel.on .mm-kit, .drawer.open .dr-sec, .drawer.open .dr-builder, .hot-dot::after { animation: none; } }

/* ---------- Responsiv ---------- */
@media (max-width: 1180px) {
  .menu { display: none; }
  .burger { display: grid; }
  .search-trigger { min-width: 0; }
  .search-trigger span, .search-trigger kbd { display: none; }
  .search-trigger { width: 44px; padding: 0; justify-content: center; }
  .head { grid-template-columns: auto 1fr auto; }
  .chip-a { left: 20px; }
}
@media (max-width: 960px) {
  .hero { min-height: 0; padding-bottom: 0; }
  .hero-copy { grid-column: 1 / -1; padding-bottom: 40px; }
  .hero-stage { position: relative; left: auto; top: auto; margin: 0 0 0 var(--gut); height: 560px; }
  .stage-prod { left: 0; width: 100%; }
  .chip-a { left: 16px; top: 16px; }
  .sizes-copy, .plan-wrap, .b-copy, .b-glass, .spot-img, .spot-data, .art-big, .art-s1, .art-s2, .pd-gal, .pd-buy, .fit-plan, .fit-txt, .need-copy, .need-grid, .verdict-q, .pc, .specs, .faq, .explain-copy, .explain-list, .cat-hero-copy, .gs-copy, .gs-viz, .gs-block-head, .gs-block-body { grid-column: 1 / -1; }
  .plan-wrap { margin-top: 48px; }
  .plan-card { right: 12px; bottom: -30px; }
  .cats { grid-auto-rows: 130px; }
  .c-box, .c-led, .c-air, .c-filter, .c-soil, .c-sets { grid-column: span 12; grid-row: span 2; }
  .c-air, .c-filter { grid-column: span 6; }
  .b-glass { margin-top: 140px; }
  .spot-img { height: 380px; }
  .spot-img img { width: 90%; }
  .spot-data { margin-top: 40px; }
  .art-s1, .art-s2 { margin-top: 0; }
  .pd-buy { position: static; margin-top: 60px; }
  .pd-stage { border-radius: 28px 28px 28px 8px; }
  .fit-plan { max-width: 420px; }
  .fit-txt { margin-top: 36px; }
  .fit-nums { grid-template-columns: 1fr 1fr; }
  .fit-nums div:nth-child(3) { padding-left: 0; box-shadow: none; }
  .need-copy, .gs-block-head { position: static; }
  .need-grid .ncard:nth-child(even) { margin-top: 0; }
  .vers { grid-template-columns: 1fr; }
  .pc { grid-template-columns: 1fr; }
  .pc div:last-child { margin-top: 0; }
  .f-top, .f-cols { grid-template-columns: 1fr 1fr; }
  .f-about { grid-column: 1 / -1; }
  .kit, .kit.wide { grid-column: span 12; flex-direction: column; }
  .kit.wide .kit-viz { min-height: 270px; }
  .size-links { grid-template-columns: repeat(2, 1fr); }
  .seo-text { columns: 1; }
  .cat-photo { position: relative; width: auto; grid-column: 1 / -1; height: 320px; margin-right: calc(var(--gut) * -1); }
  .cat-facts { position: relative; left: auto; bottom: auto; grid-column: 1 / -1; flex-wrap: wrap; margin: -40px 0 30px 16px; }
  .gs-viz { max-width: 440px; margin: 20px auto 60px; width: 100%; }
  .gs-nums { left: 0; }
  .gs-cards { grid-template-columns: 1fr 1fr; }
  .gs-cards .pcard:nth-child(2) { transform: none; }
  .gs-calc { grid-template-columns: 1fr; }
  .mbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 22px; background: rgba(17, 26, 31, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; transform: translateY(140%); transition: transform .45s var(--ease); }
  .mbar.on { transform: none; }
  .mbar div { flex: 1; }
  .mbar small { display: block; font-size: .74rem; color: rgba(255, 255, 255, .55); }
  .mbar b { font-size: 1.2rem; }
}
@media (max-width: 640px) {
  .announce .ann-side { display: none; }
  .hero h1 { font-size: 2.9rem; }
  .hero-stage { height: 500px; border-radius: 32px 0 0 0; }
  .stage-info { grid-template-columns: 1fr; bottom: 26px; }
  .stage-buy { text-align: left; }
  .stage-facts { gap: 14px; }
  .chip-b { display: none; }
  .size-list button { grid-template-columns: 90px 1fr; }
  .size-list button em { display: none; }
  .plan-card { position: relative; right: auto; bottom: auto; width: auto; margin: -40px 12px 0; }
  .c-air, .c-filter { grid-column: span 12; }
  .c-sets .stack { width: 42%; right: 2%; }
  .c-sets > div { max-width: 56%; }
  .sec-head { flex-direction: column; align-items: start; }
  .b-visual { height: 200px; margin-top: -90px; }
  .art-s1, .art-s2 { grid-template-columns: 1fr; }
  .brand-list a { grid-template-columns: 1fr auto; }
  .brand-list small { display: none; }
  .f-top, .f-cols { grid-template-columns: 1fr; }
  .f-form { flex-direction: column; border-radius: 24px; }
  .f-form .btn { width: 100%; }
  .keys { grid-template-columns: repeat(var(--n, 3), 1fr); }
  .keys div { padding: 12px 10px; }
  .price-row strong { font-size: 2.3rem; }
  .pd-thumbs button { width: 56px; height: 56px; }
  .seg { flex-wrap: wrap; border-radius: 22px; }
  #fitH button, #fitSeg button { padding: 0 11px; }
  #fitH span, #fitSeg span { width: 100%; padding: 6px 12px 2px; }
  .need-grid { grid-template-columns: 1fr; }
  .fit-nums { grid-template-columns: 1fr; }
  .fit-nums div + div { padding-left: 0; box-shadow: none; }
  .cat-bar .wrap { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
  .gs-cards { grid-template-columns: 1fr; }
  .gs-nums { grid-template-columns: 1fr 1fr 1fr; left: 0; right: 0; bottom: -60px; }
  .gs-nums div { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* =========================================================
   v13
   ========================================================= */
.muted { color: var(--ink-3); }

/* Eigenes Set im Kopf */
.yourset { display: none; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 14px; border-radius: 999px; background: var(--slate); color: #fff; font-size: .86rem; font-weight: 700; transition: background-color .2s; }
.yourset.on { display: inline-flex; }
.yourset:hover { background: var(--slate-3); }
.yourset small { color: rgba(255, 255, 255, .55); font-weight: 600; }
.yourset b { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--grad); color: var(--slate); display: inline-flex; align-items: center; }
.yourset small { white-space: nowrap; }
.yourset b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.yourset b[hidden], .ys-ann b[hidden] { display: none; }
.yourset:not(:has(b:not([hidden]))) { padding-right: 14px; }
/* Ohne Set: gleiche Form, dezent (hell wie die Suche), mit dem Punkt des Set-Builders; ersetzt den Menüpunkt Set-Builder */
.yourset { display: inline-flex; }
.yourset:not(.on) { background: var(--ice); color: var(--chl-2); gap: 8px; }
.yourset:not(.on):hover { background: var(--ice-2); }
.yourset:not(.on) small { color: inherit; font-weight: 700; font-size: inherit; }
.yourset.on .hot-dot { display: none; }
.yourset:not(.on)[aria-current] { box-shadow: inset 0 0 0 1.5px currentColor; }
/* Breit (Menü sichtbar): wie v13 „Dein Set“ + Summe */
@media (min-width: 1181px) {
  .yourset small span { display: none; }
}
/* Schmal (≤ 640 px): kein Platz im Kopf, „Dein Set“ ersetzt die Laufzeile im Streifen darüber */
.ys-ann { display: none; }
@media (max-width: 640px) {
  .header .yourset { display: none !important; }
  .announce.ys-on .ann-rot { display: none; }
  .ys-ann.on { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; color: #fff; font-weight: 700; }
  .ys-ann small { font-size: inherit; color: rgba(255, 255, 255, .78); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ys-ann b { flex: none; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--grad); color: var(--slate); display: inline-flex; align-items: center; white-space: nowrap; }
  .ys-ann .ico { width: 16px; height: 16px; flex: none; color: var(--lime); }
}

/* Verträglichkeit */
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; line-height: 1.25; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; }
.badge.ok { background: #EAF7DA; color: var(--chl-2); }
.badge.warn { background: #FFF4D6; color: #8A6400; }
.badge.no { background: #FBE7E5; color: #B23A34; }
.on-dark .badge.ok { background: rgba(195, 234, 91, .14); color: var(--lime); }

/* ---------- Startseite: Builder im Hero ---------- */
.hero.h13 { min-height: 740px; }
.hero.h13 .stage-info h2 { font-size: clamp(1.4rem, 1.9vw, 1.9rem); }
.hero.h13 h1 { font-size: clamp(3rem, 5.4vw, 5.6rem); }
.hero-pick .size-btns { gap: 6px; }
.hero-pick .size-btns button { padding: 0 13px 0 38px; }
.hero-pick .size-btns button i { left: 12px; }
.hero-pick { display: block; max-width: 660px; padding: 22px; border-radius: 26px 26px 26px 6px; background: rgba(255, 255, 255, .66); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .85) inset, 0 30px 60px -40px rgba(15, 24, 28, .35); }
.hero-pick > small { display: block; font-weight: 700; font-size: .84rem; color: var(--ink-2); margin-bottom: 12px; }
.size-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.size-btns button { position: relative; height: 48px; padding: 0 16px 0 44px; border-radius: 14px; background: #fff; font-weight: 700; font-size: .92rem; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s, color .25s, box-shadow .25s; }
.size-btns button i { position: absolute; left: 14px; top: 50%; translate: 0 -50%; border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .5; }
.size-btns button[aria-pressed="true"] { background: var(--slate); color: #fff; box-shadow: none; }
.size-btns button[aria-pressed="true"] i { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--lime); }
.pick-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pick-cta .link { font-weight: 700; font-size: .9rem; color: var(--ink-2); display: inline-flex; gap: 8px; align-items: center; padding: 0 10px; }
.pick-cta .link:hover { color: var(--ink); }
.stage-vis { position: absolute; left: -14%; right: 34%; top: 14%; height: 50%; }
.stage-vis img { position: absolute; object-fit: contain; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .5)); transition: opacity .5s var(--ease), transform .8s var(--ease); }
.stage-vis .v-box { left: 4%; bottom: 0; height: 100%; }
.stage-vis .v-led { left: 22%; top: 2%; width: 46%; z-index: 2; }
.stage-vis .v-air { right: -12%; bottom: 26%; width: 32%; z-index: 3; }
.stage-vis .v-filter { right: 16%; bottom: -2%; height: 56%; z-index: 4; }
.stage-vis.swap img { opacity: 0; transform: translateY(16px) scale(.97); }
.stage-set { position: absolute; right: 5%; top: 13%; width: min(340px, 36%); z-index: 4; padding: 20px; border-radius: 24px 24px 6px 24px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.stage-set h3 { font-size: .8rem; color: var(--lime); letter-spacing: 0; margin-bottom: 10px; }
.stage-set ul { list-style: none; margin: 0; padding: 0; }
.stage-set li { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .84rem; align-items: center; }
.stage-set li small { color: rgba(255, 255, 255, .5); font-weight: 600; font-size: .74rem; }
.stage-set li span { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-set li em { font-style: normal; font-size: .72rem; color: rgba(255, 255, 255, .55); font-weight: 600; text-align: right; }
.stage-set li em b { display: block; color: #fff; font-size: .86rem; }

/* So funktioniert's */
.how { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.how-copy { grid-column: 1 / span 4; }
.how-copy h2 { margin-bottom: 16px; }
.how-steps { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.how-step { position: relative; padding: 26px; border-radius: var(--r); background: var(--ice); min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.how-step:nth-child(2) { margin-top: 56px; background: var(--slate); color: #fff; }
.how-step:nth-child(2) p { color: rgba(255, 255, 255, .62); }
.how-step:nth-child(3) { margin-top: 112px; }
.how-step .n { position: absolute; top: 18px; left: 22px; font-size: 4rem; font-weight: 800; letter-spacing: -.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--ice-3); }
.how-step:nth-child(2) .n { -webkit-text-stroke-color: rgba(195, 234, 91, .35); }
.how-step b { font-size: 1.2rem; letter-spacing: -.03em; display: block; margin-bottom: 6px; }
.how-step p { color: var(--ink-2); font-size: .92rem; }

/* Set-Karten (Redaktion + eigene) */
.kit .kit-saved { color: var(--chl-2); font-weight: 700; font-size: .82rem; }
.kit .kit-who { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.kit .kit-who span { font-size: .8rem; color: var(--ink-2); }
.kit .kit-who span + span::before { content: "· "; color: var(--ink-3); }
.kit.mine { background: var(--slate); color: #fff; box-shadow: none; }
.kit.mine .kit-viz { background: radial-gradient(70% 70% at 50% 60%, rgba(126, 205, 84, .3), transparent 70%), var(--slate-2); }
.kit.mine .kit-body small, .kit.mine .kit-who span { color: rgba(255, 255, 255, .6); }
.kit.mine .kit-meta span { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); }
.kit.mine .kit-saved { color: var(--lime); }
.kit.mine .btn-ink { background: var(--grad); color: var(--slate); }

/* ---------- Builder ---------- */
.bd-head { position: relative; background: var(--ice); overflow: hidden; padding: 0 0 36px; }
.bd-head .leafshade { inset: -30% -10% -20% 30%; opacity: .35; }
.bd-head .wrap { position: relative; }
.bd-head-grid { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
.bd-head h1 { font-size: clamp(2.6rem, 4.6vw, 4.6rem); letter-spacing: -.055em; line-height: .96; margin-bottom: 14px; }
.bd-size { padding: 8px; border-radius: 22px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .9) inset; }
.bd-size small { display: block; font-weight: 700; font-size: .8rem; color: var(--ink-2); margin: 6px 10px 8px; }
.bd-size .size-btns { margin: 0; }
.bd { display: grid; grid-template-columns: 210px minmax(0, 1fr) 420px; gap: 40px; align-items: start; padding-top: 40px; padding-bottom: 80px; }
.bd-nav { position: sticky; top: 110px; }
.bd-nav ol { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.bd-nav a { counter-increment: st; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 10px 0; font-weight: 700; color: var(--ink-2); }
.bd-nav a::before { content: counter(st); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; box-shadow: inset 0 0 0 1.5px var(--ice-3); transition: background-color .3s, color .3s, box-shadow .3s; }
.bd-nav a.done::before { content: "✓"; background: var(--slate); color: var(--lime); box-shadow: none; }
.bd-nav a.cur { color: var(--ink); }
.bd-nav a small { display: block; font-size: .74rem; color: var(--ink-3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-sub { list-style: none; margin: -4px 0 6px 46px; padding: 0; display: grid; gap: 2px; }
.bd-nav .bd-sub a { display: flex; justify-content: space-between; padding: 4px 0; font-size: .84rem; font-weight: 650; color: var(--ink-3); counter-increment: none; }
.bd-nav .bd-sub a::before { content: none; }
.bd-nav .bd-sub a:hover { color: var(--ink); }
.bd-sub a span { font-size: .72rem; color: var(--chl-2); font-weight: 800; }
.bd-nav .rule { margin-top: 24px; padding: 18px; border-radius: 20px; background: var(--ice); font-size: .84rem; color: var(--ink-2); }
.bd-nav .rule b { display: block; color: var(--ink); margin-bottom: 4px; }
.bd-step { padding-bottom: 56px; scroll-margin-top: 100px; }
.bd-step + .bd-step { padding-top: 40px; border-top: 1px solid var(--line); }
.step-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.step-head h2 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.step-head p { color: var(--ink-2); font-size: .94rem; margin-top: 8px; max-width: 40em; }
.step-tools { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; width: 100%; }
.step-tools .sel { margin-left: auto; }
.bd-q { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 999px; background: var(--ice); color: var(--ink-2); flex: 1 1 220px; max-width: 340px; }
.bd-q .ico { width: 16px; height: 16px; flex: none; }
.bd-q input { border: 0; background: transparent; font: inherit; font-size: .9rem; color: var(--ink); outline: 0; flex: 1; min-width: 0; }
.bd-fbtn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; font: inherit; font-weight: 700; font-size: .88rem; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.bd-fbtn .ico { width: 16px; height: 16px; }
.bd-fbtn em { font-style: normal; color: var(--chl-2); }
.bd-fbtn[aria-expanded="true"] { background: var(--slate); color: #fff; box-shadow: none; }
.bd-fbtn[aria-expanded="true"] em { color: var(--lime); }
.bd-fpanel { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 24px; padding: 20px; margin: -6px 0 16px; border-radius: 22px; background: var(--ice); }
.bd-fpanel[hidden] { display: none; }
.bf-g b { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: 8px; }
.bf-g b small { color: var(--ink-2); font-weight: 650; }
.bf-c { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-c button { height: 34px; padding: 0 12px; border-radius: 999px; background: #fff; font: inherit; font-size: .8rem; font-weight: 700; color: var(--ink); }
.bf-c button[aria-pressed="true"] { background: var(--slate); color: #fff; }
.bf-range input { width: 100%; accent-color: var(--chl); }
.bf-g .toggle { margin-top: 4px; }
.bd-active { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.bd-active:empty { display: none; }
.bd-active button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border-radius: 999px; background: var(--slate); color: #fff; font: inherit; font-size: .78rem; font-weight: 700; }
.bd-active button .ico { width: 12px; height: 12px; }
.bd-active .reset { background: transparent; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.opt-show { grid-column: 1 / -1; height: 46px; border-radius: 999px; font: inherit; font-weight: 700; font-size: .88rem; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); }
.opt-show:hover { background: var(--ice); }
.opt-none { grid-column: 1 / -1; color: var(--ink-2); font-size: .92rem; padding: 18px 0; }
.toggle { display: inline-flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.toggle input { appearance: none; width: 40px; height: 24px; border-radius: 12px; background: var(--ice-3); position: relative; cursor: pointer; transition: background-color .25s; margin: 0; flex: none; }
.toggle input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.toggle input:checked { background: var(--chl); }
.toggle input:checked::after { transform: translateX(16px); }
.sel { height: 42px; padding: 0 36px 0 14px; border-radius: 12px; border: 0; background: var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A585E' stroke-width='2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 10px center / 18px no-repeat; appearance: none; font-weight: 700; font-size: .86rem; cursor: pointer; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.opt { position: relative; text-align: left; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); padding: 14px; display: flex; flex-direction: column; gap: 6px; transition: box-shadow .25s, transform .4s var(--ease), opacity .3s; }
.opt:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); transform: translateY(-3px); }
.opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--slate), 0 26px 40px -30px rgba(15, 24, 28, .5); }
.opt.is-no { opacity: .55; }
.opt .o-img { height: 150px; border-radius: 16px; background: var(--ice); display: grid; place-items: center; padding: 16px; margin-bottom: 8px; position: relative; }
.opt .o-img img { max-height: 118px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(15, 24, 28, .2)); }
.opt .o-chk { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line); color: transparent; transition: background-color .25s, color .25s; }
.opt[aria-pressed="true"] .o-chk { background: var(--slate); color: var(--lime); box-shadow: none; }
.opt .o-chk .ico { width: 16px; height: 16px; }
.opt .o-b { font-size: .74rem; font-weight: 700; color: var(--chl-2); }
.opt .o-h { font-size: 1rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.25; }
.opt .o-img, .opt .o-b, .opt .o-h { display: block; }
.opt .o-img { display: grid; }
.opt .o-spec { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .78rem; color: var(--ink-2); font-weight: 600; }
.opt .o-row { display: flex; justify-content: space-between; align-items: end; gap: 8px; margin-top: auto; padding-top: 8px; }
.opt .o-row strong { font-size: 1.15rem; letter-spacing: -.03em; }
.opt .o-row small { display: block; font-size: .72rem; color: var(--ink-3); font-weight: 600; }
.opt .badge { align-self: flex-start; }
.opt-more { margin-top: 14px; font-size: .86rem; color: var(--ink-3); font-weight: 600; }
.opt-kind { grid-column: 1 / -1; margin: 12px 0 -4px; font-size: .8rem; font-weight: 700; color: var(--ink-3); }
.opt-kind:first-child { margin-top: 0; }
.opt .o-row > span:first-child { display: block; }

.bd-sum { position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow: hidden; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; border-radius: 32px 32px 32px 8px; background: var(--slate); color: #fff; overflow: hidden; isolation: isolate; }
.bd-sum .bokeh { position: absolute; inset: 0; z-index: -1; background: url(img/v12-laub.webp) center / cover; opacity: .45; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%); mask-image: linear-gradient(180deg, #000, transparent 55%); }
.sum-in { padding: 24px; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sum-scroll { overflow-y: auto; min-height: 0; flex: 1 1 auto; margin: 0 -24px; padding: 0 24px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.sum-foot { flex: none; padding-top: 4px; }
.sum-vis { position: relative; height: 150px; margin: 0 0 6px; }
.sum-vis img { position: absolute; object-fit: contain; filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .5)); transition: opacity .4s, transform .6s var(--ease); }
.sum-vis .v-box { left: 4%; bottom: 0; height: 100%; }
.sum-vis .v-led { left: 20%; top: 2%; width: 46%; z-index: 2; }
.sum-vis .v-air { right: 4%; bottom: 26%; width: 28%; z-index: 3; }
.sum-vis .v-filter { right: 30%; bottom: 0; height: 52%; z-index: 4; }
.sum-name { width: 100%; background: rgba(255, 255, 255, .07); border: 0; border-radius: 14px; padding: 12px 14px; color: #fff; font-weight: 700; font-size: 1rem; outline: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.sum-name:focus { box-shadow: inset 0 0 0 1.5px var(--lime); }
.sum-name::placeholder { color: rgba(255, 255, 255, .45); }
.sum-list { list-style: none; margin: 14px 0 0; padding: 0; }
.sum-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .09); font-size: .88rem; }
.sum-list li small { grid-column: 1 / -1; color: rgba(255, 255, 255, .5); font-size: .72rem; font-weight: 700; }
.sum-list li span { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-list li b { text-align: right; }
.sum-list li em { grid-column: 1 / -1; font-style: normal; font-size: .74rem; color: rgba(255, 255, 255, .5); }
.sum-list li em i { font-style: normal; color: var(--lime); font-weight: 700; }
.sum-list li.empty span { color: rgba(255, 255, 255, .4); }
.sum-shops { display: grid; gap: 6px; margin: 6px 0 14px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .06); font-size: .82rem; }
.sum-shops > small { color: rgba(255, 255, 255, .5); font-size: .72rem; font-weight: 700; }
.sum-shops div { display: flex; justify-content: space-between; gap: 10px; color: rgba(255, 255, 255, .75); }
.sum-shops div b { text-align: right; white-space: nowrap; }
.sum-shops div em { display: block; font-style: normal; font-weight: 600; font-size: .72rem; color: rgba(255, 255, 255, .5); }
.sum-shops div b { color: #fff; }
.sum-total { display: flex; justify-content: space-between; align-items: end; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.sum-total small { display: block; color: rgba(255, 255, 255, .55); font-size: .78rem; font-weight: 600; }
.sum-total strong { font-size: 2.3rem; letter-spacing: -.05em; line-height: 1; }
.sum-save { display: block; margin: 10px 0 18px; font-size: .84rem; font-weight: 700; color: var(--lime); }
.sum-save span { color: rgba(255, 255, 255, .55); font-weight: 600; }
.sum-btns { display: grid; gap: 8px; }
.sum-btns .btn { width: 100%; }
.sum-pw { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: .8rem; color: rgba(255, 255, 255, .55); }
.sum-peek { display: none; align-items: center; justify-content: space-between; gap: 12px; height: 72px; padding: 0 12px 0 20px; width: 100%; color: #fff; text-align: left; }
.sum-peek small { display: block; font-size: .74rem; color: rgba(255, 255, 255, .55); font-weight: 600; }
.sum-peek b { font-size: 1.3rem; letter-spacing: -.03em; }

/* ---------- Set-Seite ---------- */
.st-hero { position: relative; background: var(--slate); color: #fff; overflow: hidden; border-radius: 0 0 56px 56px; }
.st-hero .bokeh { position: absolute; inset: 0; background: url(img/v12-laub.webp) center / cover; opacity: .7; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(60% 80% at 70% 50%, #000 20%, transparent 80%); mask-image: radial-gradient(60% 80% at 70% 50%, #000 20%, transparent 80%); }
.st-hero .crumbs { color: rgba(255, 255, 255, .45); }
.st-hero .crumbs a:hover { color: #fff; }
.st-grid { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: center; min-height: 640px; padding-bottom: 60px; }
.st-copy { grid-column: 1 / span 5; position: relative; z-index: 3; }
.st-copy h1 { font-size: clamp(3rem, 5.6vw, 5.8rem); letter-spacing: -.055em; line-height: .95; margin-bottom: 18px; }
.st-copy .lead { color: rgba(255, 255, 255, .7); margin-bottom: 26px; }
.st-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.st-facts span { height: 38px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-size: .86rem; font-weight: 600; color: rgba(255, 255, 255, .7); }
.st-facts b { color: #fff; }
.st-vis { grid-column: 6 / span 7; position: relative; height: 560px; }
.st-vis img { position: absolute; object-fit: contain; filter: drop-shadow(0 50px 50px rgba(0, 0, 0, .55)); }
.st-vis .v-box { left: 2%; bottom: 0; height: 96%; }
.st-vis .v-led { left: 18%; top: 4%; width: 44%; z-index: 2; }
.st-vis .v-air { left: 50%; bottom: 34%; width: 22%; z-index: 3; }
.st-vis .v-filter { left: 40%; bottom: -2%; height: 42%; z-index: 4; }
.st-price { position: absolute; z-index: 5; right: 0; bottom: 60px; width: min(380px, 34%); padding: 24px; border-radius: 28px 28px 8px 28px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--ink); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .6); }
.st-price small { display: block; color: var(--ink-2); font-weight: 600; font-size: .82rem; }
.st-price strong { display: block; font-size: 3rem; letter-spacing: -.055em; line-height: 1; margin: 6px 0 8px; }
.st-price .trend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; font-size: .84rem; color: var(--ink-2); font-weight: 600; }
.st-price .btn { width: 100%; }
.st-price .btn + .btn { margin-top: 8px; }
.st-url { display: flex; align-items: center; gap: 10px; margin-top: 30px; padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); max-width: 540px; }
.st-url code { flex: 1; min-width: 0; font: 600 .86rem/1.2 "Manrope"; color: rgba(255, 255, 255, .8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-url code b { color: var(--lime); }
.parts { display: grid; gap: 14px; }
.part { display: grid; grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 26px; align-items: center; padding: 16px 22px 16px 16px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.part:nth-child(even) { margin-left: 56px; }
.part .p-img { height: 120px; border-radius: 18px; background: var(--ice); display: grid; place-items: center; padding: 14px; }
.part .p-img img { max-height: 92px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(15, 24, 28, .2)); }
.part .p-role { font-size: .76rem; font-weight: 700; color: var(--chl-2); }
.part h3 { font-size: 1.15rem; margin: 2px 0 8px; }
.part .o-spec { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .82rem; color: var(--ink-2); font-weight: 600; margin-top: 8px; }
.part-offers { display: grid; gap: 6px; }
.part-offers div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 12px; font-size: .86rem; color: var(--ink-3); font-weight: 600; }
.part-offers div.best { background: #EAF7DA; color: var(--ink); }
.part-offers div.best b { color: var(--chl-2); }
.part .btn { height: 46px; }
.shoplist { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; align-items: start; }
.shopcol { border-radius: 30px; background: var(--ice); padding: 26px; }
.shopcol:nth-child(2) { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); margin-top: 40px; }
.shopcol h3 { font-size: 1.5rem; letter-spacing: -.035em; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.shopcol ul { list-style: none; margin: 0 0 16px; padding: 0; }
.shopcol li { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.shopcol li img { width: 52px; height: 52px; object-fit: contain; border-radius: 12px; background: #fff; padding: 6px; }
.shopcol:nth-child(2) li img { background: var(--ice); }
.shopcol li span { font-weight: 650; }
.shopcol li a { font-weight: 700; font-size: .82rem; color: var(--chl-2); white-space: nowrap; }
.shopcol .sums { display: grid; gap: 4px; font-size: .9rem; color: var(--ink-2); }
.shopcol .sums div { display: flex; justify-content: space-between; }
.shopcol .sums div:last-child { color: var(--ink); font-weight: 800; font-size: 1.1rem; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--ice-3); }
.shop-note { margin-top: 20px; font-size: .86rem; color: var(--ink-3); font-weight: 600; }
.share { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
.share-copy { grid-column: 1 / span 5; }
.share-copy h2 { margin-bottom: 16px; }
.share-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.og-wrap { grid-column: 7 / span 6; position: relative; }
.og-card { border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 50px 80px -50px rgba(15, 24, 28, .5); transform: rotate(1.5deg); transition: transform .6s var(--ease); }
.og-card:hover { transform: rotate(0); }
.og-card canvas { display: block; width: 100%; height: auto; }
.og-card .og-meta { padding: 14px 18px 16px; font-size: .84rem; }
.og-card .og-meta small { color: var(--ink-3); font-weight: 600; }
.og-card .og-meta b { display: block; font-size: 1rem; }
.og-note { position: absolute; left: -40px; bottom: -30px; z-index: 2; }

/* ---------- Produktseite: Preisvergleich ---------- */
.pcmp { border-radius: 24px; background: var(--ice); padding: 8px; margin-bottom: 14px; }
.pcmp-best { position: relative; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 20px 40px -30px rgba(15, 24, 28, .4); }
.pcmp-best .tag { position: absolute; right: 16px; top: 16px; }
.pcmp-best small { display: block; font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.pcmp-best .shop { display: block; font-weight: 600; font-size: .88rem; color: var(--ink-2); padding-right: 150px; }
.pcmp-best strong { display: block; font-size: 2.6rem; letter-spacing: -.05em; line-height: 1; margin: 10px 0 6px; }
.pcmp-best .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .84rem; color: var(--ink-2); font-weight: 600; margin-bottom: 16px; }
.pcmp-best .meta .av { display: inline-flex; align-items: center; gap: 7px; color: var(--chl-2); }
.pcmp-best .meta .av::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--chl); box-shadow: 0 0 0 4px rgba(47, 168, 79, .18); }
.pcmp-best .buy-row .btn-go { height: 56px; }
.pcmp-all { padding: 14px 10px 2px; }
.pcmp-h { display: flex; align-items: center; gap: 8px; padding: 0 6px 6px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.pcmp-h small { font-size: .7rem; letter-spacing: 0; background: #fff; border-radius: 999px; padding: 1px 7px; }
.pcmp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 14px; align-items: center; padding: 8px 6px; font-size: .84rem; }
.pcmp-row + .pcmp-row { border-top: 1px solid var(--ice-3); }
.pcmp-row .shop { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
.pcmp-row .av { width: 7px; height: 7px; border-radius: 50%; background: var(--chl); box-shadow: 0 0 0 3px rgba(47, 168, 79, .18); flex: none; }
.pcmp-row small { font-size: .74rem; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.pcmp-row b { font-size: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.pcmp-row a { font-weight: 700; font-size: .78rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ice-3); min-width: 62px; text-align: right; }
@media (max-width: 480px) { .pcmp-row { grid-template-columns: minmax(0, 1fr) auto auto; } .pcmp-row small { grid-column: 1; grid-row: 2; margin-top: -6px; } }
/* Preisverlauf */
.ph-box { border-radius: 30px; background: var(--ice); padding: 32px; display: grid; gap: 24px; }
.ph-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.ph-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -.04em; margin-top: 10px; }
.ph-range { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; }
.ph-range button { height: 38px; padding: 0 16px; border-radius: 999px; font: inherit; font-weight: 700; font-size: .86rem; color: var(--ink-2); }
.ph-range button[aria-pressed="true"] { background: var(--slate); color: #fff; }
.ph-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ph-stats div { background: #fff; border-radius: 18px; padding: 14px 16px; min-width: 0; }
.ph-stats small { display: block; font-size: .76rem; color: var(--ink-2); font-weight: 650; }
.ph-stats b { font-size: 1.3rem; letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ph-stats b.now { color: var(--chl-2); }
.ph-chart { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; background: #fff; border-radius: 22px; padding: 30px 20px 16px 24px; }
.ph-plot { position: relative; height: 280px; touch-action: pan-y; cursor: crosshair; }
.ph-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ph-plot .grid { stroke: var(--ice-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ph-plot .avg { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.ph-plot .area { fill: url(#phG); }
.ph-plot .line { fill: none; stroke: var(--chl); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ph-avg { position: absolute; left: 0; transform: translateY(-130%); font-size: .72rem; font-weight: 700; color: var(--ink-2); background: #fff; padding-right: 6px; }
.ph-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; border: 3px solid var(--chl); pointer-events: none; }
.ph-dot.now { width: 16px; height: 16px; background: var(--lime); border-color: var(--slate); box-shadow: 0 0 0 6px rgba(195, 234, 91, .35); }
.ph-dot.hov { opacity: 0; border-color: var(--slate); }
.ph-guide { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-3); opacity: 0; pointer-events: none; }
.ph-tip { position: absolute; top: -12px; transform: translate(12px, -100%); background: var(--slate); color: #fff; border-radius: 12px; padding: 7px 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 2; }
.ph-tip.flip { transform: translate(calc(-100% - 12px), -100%); }
.ph-tip small { display: block; font-size: .7rem; color: rgba(255, 255, 255, .6); font-weight: 650; }
.ph-tip b { font-size: .95rem; }
.ph-plot.on .ph-guide, .ph-plot.on .ph-dot.hov, .ph-plot.on .ph-tip { opacity: 1; }
.ph-y { display: flex; flex-direction: column; justify-content: space-between; font-size: .74rem; font-weight: 650; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.ph-x { display: flex; justify-content: space-between; font-size: .74rem; font-weight: 650; color: var(--ink-3); }
.ph-note { font-size: .78rem; color: var(--ink-2); font-weight: 600; margin-top: -10px; }
@media (max-width: 720px) {
  .ph-box { padding: 18px; border-radius: 24px; }
  .ph-stats { grid-template-columns: 1fr 1fr; }
  .ph-chart { padding: 26px 12px 12px 14px; }
  .ph-plot { height: 200px; }
}

.pcmp-foot { padding: 8px 16px 6px; font-size: .76rem; color: var(--ink-3); font-weight: 600; }
.pd-alt { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; font-size: .84rem; color: var(--ink-2); font-weight: 600; }
.pd-alt a { height: 38px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; color: var(--ink); }
.pd-alt a:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.pd-alt a em { font-style: normal; color: var(--ink-3); font-weight: 600; }

/* Passt-Module */
.gauge { position: relative; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, .08); margin: 40px 0 12px; }
.gauge i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--grad); transition: width .7s var(--ease); }
.gauge u { position: absolute; top: -10px; bottom: -10px; width: 2px; background: #fff; transition: left .7s var(--ease); }
.gauge u::after { content: attr(data-l); position: absolute; top: -24px; left: 50%; translate: -50% 0; white-space: nowrap; font-size: .76rem; font-weight: 700; color: rgba(255, 255, 255, .75); }
.gauge-lbl { display: flex; justify-content: space-between; font-size: .8rem; color: rgba(255, 255, 255, .5); font-weight: 600; }
.fit-viz { grid-column: 1 / span 5; }
.fit-viz .big { font-size: clamp(3.4rem, 6vw, 5.6rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.fit-viz .big small { font-size: .3em; letter-spacing: 0; color: rgba(255, 255, 255, .55); margin-left: 6px; }
.space-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.space-in label { display: block; font-size: .78rem; font-weight: 700; color: rgba(255, 255, 255, .55); margin-bottom: 6px; }
.space-in input { width: 100%; height: 52px; border-radius: 14px; border: 0; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); color: #fff; font-weight: 800; font-size: 1.2rem; padding: 0 14px; outline: 0; }
.space-in input:focus { box-shadow: inset 0 0 0 1.5px var(--lime); }
.fit-head .toggle { color: rgba(255, 255, 255, .75); }
.fit-head .toggle input { background: rgba(255, 255, 255, .2); }
.fit-head .toggle input:checked { background: var(--chl); }
.fit-tools { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* Set aus dem Produkt */
.pset { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.pset-copy { grid-column: 1 / span 4; position: sticky; top: 160px; }
.pset-copy h2 { margin-bottom: 16px; }
.pset-rules { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; font-size: .88rem; color: var(--ink-2); }
.pset-rules li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.pset-rules li::before { content: "→"; color: var(--chl); font-weight: 800; }
.pset-grid { grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pset-grid .ncard:nth-child(even) { margin-top: 60px; }
.pset-grid .ncard { padding-top: 150px; }
.pset-grid .ncard img { height: 150px; top: -20px; }
.ncard.self { background: var(--slate); color: #fff; }
.ncard.self small { color: var(--lime); }
.ncard.self .why { color: rgba(255, 255, 255, .6); }
.ncard .badge { align-self: flex-start; margin: 4px 0; }
.pset-total { margin-top: 26px; padding: 22px; border-radius: 22px 22px 22px 6px; background: var(--ice); }
.pset-total small { display: block; color: var(--ink-2); font-weight: 600; font-size: .84rem; }
.pset-total strong { display: block; font-size: 2.1rem; letter-spacing: -.04em; margin: 4px 0 2px; }
.pset-total .sv { display: block; font-size: .84rem; font-weight: 700; color: var(--chl-2); margin-bottom: 14px; }
.pset-total .btn { width: 100%; }
.pset-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 20px; }
.pset-sizes span { width: 100%; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.pset-sizes button { position: relative; height: 40px; padding: 0 14px; border-radius: 999px; font: inherit; font-weight: 700; font-size: .86rem; background: var(--ice); color: var(--ink); transition: background-color .25s, color .25s; }
.pset-sizes button[aria-pressed="true"] { background: var(--slate); color: #fff; }
.pset-sizes button.hint::after { content: "oben gewählt"; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); white-space: nowrap; font-size: .62rem; font-weight: 800; color: var(--slate); background: var(--lime); border-radius: 999px; padding: 1px 7px; }
.pset.empty .pset-total, .pset.empty .pset-rules { opacity: .45; pointer-events: none; }
.ncard.slot { background: transparent; outline: 2px dashed var(--ice-3); outline-offset: -2px; }
.ncard.slot:hover { transform: none; box-shadow: none; }
.ncard.slot small { color: var(--ink-2); }
.ncard.slot h3 { color: var(--ink-3); }
.slot-ico { position: absolute; right: 22px; top: 22px; width: 44px; height: 44px; border-radius: 50%; background: var(--ice); display: grid; place-items: center; color: var(--ink-3); }
.ncard.pop { animation: setPop .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.ncard .acts { display: flex; gap: 6px; align-items: center; }
.ncard .swap { height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; font: inherit; font-weight: 700; font-size: .8rem; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.ncard .swap[aria-expanded="true"] { background: var(--slate); color: #fff; box-shadow: none; }
.ncard.none h3 { font-size: 1rem; color: var(--ink-2); }
.ncard.swapping { min-height: 420px; z-index: 6; }
.swap-pop { position: absolute; inset: 8px; z-index: 5; background: #fff; border-radius: calc(var(--r) - 6px); box-shadow: 0 30px 60px -30px rgba(15, 24, 28, .5), 0 0 0 1px var(--line); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 0; animation: setPop .35s var(--ease) both; }
.swap-hd { display: flex; justify-content: space-between; align-items: center; font-size: .92rem; }
.swap-hd .x { width: 32px; height: 32px; border-radius: 50%; background: var(--ice); display: grid; place-items: center; }
.swap-hd .x .ico { width: 14px; height: 14px; }
.swap-search { display: flex; align-items: center; gap: 8px; height: 40px; border-radius: 12px; background: var(--ice); padding: 0 12px; color: var(--ink-2); }
.swap-search .ico { width: 16px; height: 16px; flex: none; }
.swap-search input { border: 0; background: transparent; font: inherit; font-size: .88rem; flex: 1; min-width: 0; outline: 0; color: var(--ink); }
.swap-sub { font-size: .72rem; color: var(--ink-2); font-weight: 650; }
.swap-list { overflow: auto; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; margin: 0 -4px; }
.swap-list button { display: flex; justify-content: space-between; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 12px; font: inherit; color: var(--ink); }
.swap-list button:hover, .swap-list button:focus-visible { background: var(--ice); }
.swap-list b { display: block; font-size: .84rem; }
.swap-list small { display: block; font-size: .72rem; color: var(--ink-2); font-weight: 600; }
.swap-list .out small { color: var(--ink-3); }
.swap-list em { font-style: normal; font-weight: 800; font-size: .86rem; white-space: nowrap; }
.swap-none { font-size: .84rem; color: var(--ink-2); padding: 8px 10px; }
@keyframes setPop { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ncard.pop { animation: none; } }
.pset-total .btn + .btn { margin-top: 8px; }
.alts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr)); gap: 20px; }
.alts .pcard { flex: none; }

/* ---------- Listen mit Filtern ---------- */
.lst-head { position: relative; background: var(--ice); overflow: hidden; padding: 0 0 48px; }
.lst-head .leafshade { inset: -30% -20% -30% 40%; opacity: .32; }
.lst-head .wrap { position: relative; z-index: 2; }
.lst-head h1 { font-size: clamp(2.6rem, 4.8vw, 4.8rem); letter-spacing: -.055em; line-height: .96; margin-bottom: 16px; max-width: 12em; }
.lst-head .lead { max-width: 38em; }
.lst-head .cat-photo { top: 0; width: 38%; border-radius: 0 0 0 48px; }
.lst-head.has-photo .lead, .lst-head.has-photo h1 { max-width: 58%; }
.lst { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 44px; align-items: start; padding-top: 36px; padding-bottom: 80px; }
.lst-side { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow: auto; scrollbar-width: thin; padding-right: 8px; }
.lst-side-head, .lst-side-foot { display: none; }
.fgroup { padding: 18px 0; border-bottom: 1px solid var(--line); }
.fgroup:first-of-type { padding-top: 0; }
.fgroup h4 { font-size: .86rem; letter-spacing: 0; margin-bottom: 12px; display: flex; justify-content: space-between; }
.fgroup h4 small { color: var(--ink-3); font-weight: 600; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchips button { height: 38px; padding: 0 13px; border-radius: 12px; font-weight: 700; font-size: .84rem; box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .2s, color .2s, box-shadow .2s; }
.fchips button:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.fchips button[aria-pressed="true"] { background: var(--slate); color: #fff; box-shadow: none; }
.fchips button:disabled { opacity: .35; cursor: default; box-shadow: inset 0 0 0 1.5px var(--line); }
.fchk { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: .9rem; font-weight: 600; cursor: pointer; }
.fchk input { appearance: none; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--ice-3); margin: 0; cursor: pointer; flex: none; transition: background-color .2s, box-shadow .2s; }
.fchk input:checked { background: var(--slate) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C3EA5B' stroke-width='3'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
.fchk span { flex: 1; }
.fchk small { color: var(--ink-3); font-weight: 600; }
.fchk.dis { opacity: .4; }
.frange input { width: 100%; accent-color: var(--chl); margin: 6px 0 0; }
.frange .ends { display: flex; justify-content: space-between; font-size: .76rem; color: var(--ink-3); font-weight: 600; }
.lst-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.lst-top .cnt { font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; }
.lst-top .cnt small { color: var(--ink-3); font-weight: 600; font-size: .86rem; margin-left: 6px; }
.lst-top-r { display: flex; gap: 10px; align-items: center; }
.act-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 22px; }
.act-chips:empty { display: none; }
.act-chips button { height: 34px; padding: 0 8px 0 13px; border-radius: 999px; background: var(--slate); color: #fff; font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.act-chips button .ico { width: 16px; height: 16px; opacity: .6; }
.act-chips .clear { background: none; color: var(--chl-2); }
.lst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.lst-grid .dcard, .alts .dcard { flex: none; }
.lst-grid .pcard { flex: none; }
.lst-grid .pcard .spec-line { font-size: .78rem; color: rgba(255, 255, 255, .6); font-weight: 600; }
.lst-grid.kits { grid-template-columns: repeat(12, 1fr); gap: 24px; }
.lst-grid.kits .kit { grid-column: span 6; }
.lst-grid.kits .kit.wide { grid-column: span 12; }
.lst-empty { grid-column: 1 / -1; padding: 60px 30px; border-radius: 30px; background: var(--ice); text-align: center; color: var(--ink-2); }
.lst-empty b { display: block; font-size: 1.3rem; color: var(--ink); margin-bottom: 6px; }
.fbtn { display: none; }
.promo { grid-column: 1 / -1; position: relative; border-radius: 30px; background: var(--slate); color: #fff; padding: 28px 30px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; overflow: hidden; isolation: isolate; }
.promo .bokeh { position: absolute; inset: 0; z-index: -1; background: url(img/v12-laub.webp) center / cover; opacity: .5; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000); }
.promo h3 { font-size: 1.6rem; letter-spacing: -.035em; }
.promo p { color: rgba(255, 255, 255, .65); margin-top: 6px; }
.promo .kick { margin-bottom: 10px; }

/* Größenseite */
.gs13 { position: relative; background: var(--slate); color: #fff; overflow: hidden; border-radius: 0 0 48px 48px; padding: 0 0 80px; }
.gs13 .bokeh { position: absolute; inset: 0; background: url(img/v12-laub.webp) center / cover; opacity: .55; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 85%); mask-image: linear-gradient(90deg, transparent 35%, #000 85%); }
.gs13 .crumbs { color: rgba(255, 255, 255, .45); }
.gs13 .crumbs a:hover { color: #fff; }
.gs13-grid { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
.gs13-copy { grid-column: 1 / span 6; }
.gs13-copy h1 { font-size: clamp(3rem, 6vw, 5.8rem); letter-spacing: -.055em; line-height: .95; margin-bottom: 20px; }
.gs13-copy .lead { color: rgba(255, 255, 255, .7); margin-bottom: 26px; }
.gs13-copy .size-chips a { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.gs13-copy .size-chips a[aria-current] { background: var(--grad); color: var(--slate); box-shadow: none; }
.gs13-copy .size-chips a:hover { background: #fff; color: var(--ink); }
.gs13-facts { grid-column: 8 / span 5; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gs13-facts div { padding: 20px; border-radius: 22px; background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.gs13-facts div:nth-child(even) { translate: 0 30px; }
.gs13-facts small { display: block; font-size: .78rem; font-weight: 700; color: rgba(255, 255, 255, .55); }
.gs13-facts b { display: block; font-size: 1.8rem; letter-spacing: -.045em; margin-top: 4px; }
.gs13-facts span { font-size: .8rem; color: rgba(255, 255, 255, .55); }
.gs-steps { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.gs-steps a { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font-weight: 700; font-size: .88rem; }
.gs-steps a i { width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: var(--slate); display: grid; place-items: center; font-style: normal; font-size: .8rem; }
.gs-steps a:hover { background: rgba(255, 255, 255, .14); }

/* Modal: Teilen */
.sheet { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 16px; visibility: hidden; }
.sheet.open { visibility: visible; }
.sheet-bg { position: absolute; inset: 0; background: rgba(17, 26, 31, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.sheet.open .sheet-bg { opacity: 1; }
.sheet-box { position: relative; width: min(560px, 100%); border-radius: 28px; background: #fff; padding: 28px; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .5); transform: translateY(16px) scale(.98); opacity: 0; transition: transform .4s var(--ease), opacity .3s; }
.sheet.open .sheet-box { transform: none; opacity: 1; }
.sheet-box h3 { font-size: 1.5rem; letter-spacing: -.035em; margin-bottom: 8px; padding-right: 40px; }
.sheet-box p { color: var(--ink-2); font-size: .94rem; }
.sheet-x { position: absolute; right: 16px; top: 16px; }
.copy-row { display: flex; gap: 8px; margin: 20px 0 16px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--ice); align-items: center; }
.copy-row code { flex: 1; min-width: 0; font: 600 .88rem "Manrope"; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.sh-card { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; margin: -8px -8px 22px; padding: 20px; border-radius: 22px; overflow: hidden; color: #fff; background: radial-gradient(90% 120% at 0% 100%, #24323A 0%, var(--slate) 60%); }
.sh-card::after { content: ""; position: absolute; inset: 0; background: url(img/v12-laub.webp) center / cover; opacity: .35; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000); mask-image: linear-gradient(90deg, transparent 35%, #000); pointer-events: none; }
.sh-vis { position: relative; height: 150px; z-index: 1; }
.sh-vis img { position: absolute; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .5)); }
.sh-vis .s-box { left: 0; bottom: 0; height: 100%; }
.sh-vis .s-led { left: 18%; top: 0; width: 52%; }
.sh-vis .s-air { right: 0; bottom: 24%; width: 34%; }
.sh-vis .s-filter { right: 30%; bottom: 0; height: 52%; }
.sh-meta { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-meta .kick { color: var(--lime); font-size: .76rem; }
.sh-meta b { font-size: 1.25rem; letter-spacing: -.03em; line-height: 1.2; }
.sh-meta span { font-size: .8rem; color: rgba(255, 255, 255, .6); font-weight: 600; }
.sh-meta strong { font-size: 1.6rem; letter-spacing: -.04em; color: var(--lime); margin-top: 6px; }
#shCopy { width: 100%; cursor: pointer; text-align: left; font: inherit; }
#shCopy .cp { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--slate); color: #fff; font-size: .84rem; }
#shCopy .cp .ico { width: 15px; height: 15px; }
#shCopy.ok .cp { background: var(--chl); }
@media (max-width: 520px) { .sh-card { grid-template-columns: 1fr; } }
.share-grid a, .share-grid button { height: 76px; border-radius: 18px; background: var(--ice); display: grid; place-items: center; align-content: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--ink-2); transition: background-color .2s, color .2s; }
.share-grid a:hover, .share-grid button:hover { background: var(--slate); color: #fff; }
.share-grid .ico { width: 22px; height: 22px; }

/* ---------- v13 responsiv ---------- */
@media (max-width: 1440px) {
  .bd { grid-template-columns: minmax(0, 1fr) 390px; }
  .bd-nav { display: none; }
}
@media (max-width: 1180px) {
  .stage-set { display: none; }
  .stage-vis { right: 8%; left: -6%; }
  .lst { grid-template-columns: 250px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 960px) {
  .hero.h13 { min-height: 0; }
  .stage-vis { left: 4%; right: 4%; top: 12%; height: 48%; }
  .stage-vis .v-air { right: 0; }
  .how-copy, .how-steps, .st-copy, .st-vis, .share-copy, .og-wrap, .pset-copy, .pset-grid, .fit-viz, .gs13-copy, .gs13-facts { grid-column: 1 / -1; }
  .how-steps { grid-template-columns: 1fr; }
  .how-step:nth-child(n) { margin-top: 0; min-height: 0; padding-top: 86px; }
  .bd { grid-template-columns: 1fr; padding-bottom: 140px; }
  .bd-head-grid { grid-template-columns: 1fr; }
  .bd-sum { position: fixed; z-index: 45; left: 10px; right: 10px; bottom: 10px; top: auto; max-height: 72px; overflow: hidden; transition: max-height .5s var(--ease); border-radius: 24px; }
  .bd-sum.open { max-height: calc(100vh - 100px); overflow: auto; }
  .bd-sum .sum-peek { display: flex; }
  .sum-in { padding-top: 0; }
  .st-grid { min-height: 0; padding-bottom: 40px; }
  .st-vis { height: 380px; margin-top: 30px; }
  .st-price { position: relative; right: auto; bottom: auto; width: auto; grid-column: 1 / -1; margin-top: -30px; }
  .part { grid-template-columns: 110px 1fr; gap: 14px 18px; }
  .part:nth-child(even) { margin-left: 0; }
  .part .p-img { grid-row: span 2; height: 110px; }
  .part-offers, .part .btn { grid-column: 2; }
  .shopcol:nth-child(2) { margin-top: 0; }
  .og-wrap { margin-top: 30px; }
  .og-note { left: 10px; bottom: -24px; }
  .pset-copy { position: static; }
  .pset-grid .ncard:nth-child(even) { margin-top: 0; }
  .lst { grid-template-columns: 1fr; }
  .fbtn { display: inline-flex; }
  .lst-side { position: fixed; z-index: 93; left: 0; right: 0; bottom: 0; top: auto; max-height: 84vh; padding: 0 20px 100px; background: #fff; border-radius: 28px 28px 0 0; box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .35); transform: translateY(105%); transition: transform .45s var(--ease); }
  .lst-side.open { transform: none; }
  .lst-side-head { display: flex; position: sticky; top: 0; z-index: 2; justify-content: space-between; align-items: center; padding: 18px 0 14px; background: #fff; }
  .lst-side-head b { font-size: 1.2rem; }
  .lst-side-foot { display: block; position: fixed; left: 20px; right: 20px; bottom: 16px; }
  .lst-side-foot .btn { width: 100%; }
  .lst-head .cat-photo { display: none; }
  .lst-head.has-photo .lead, .lst-head.has-photo h1 { max-width: none; }
  .lst-grid.kits .kit, .lst-grid.kits .kit.wide { grid-column: span 12; }
  .gs13-facts { margin-top: 20px; }
  .gs13-facts div:nth-child(even) { translate: none; }
  .promo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero-pick { padding: 16px; }
  .size-btns button { padding: 0 12px 0 36px; height: 44px; font-size: .86rem; }
  .size-btns button i { left: 11px; }
  .opt-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .opt { padding: 10px; border-radius: 20px; }
  .opt .o-img { height: 110px; }
  .opt .o-img img { max-height: 84px; }
  .opt h3 { font-size: .9rem; }
  .part { grid-template-columns: 84px 1fr; }
  .part .p-img { height: 84px; padding: 8px; }
  .part .p-img img { max-height: 64px; }
  .shopcol li { grid-template-columns: 44px 1fr auto; }
  .shopcol li a { grid-column: 2 / -1; }
  .shopcol li img { width: 44px; height: 44px; }
  .share-grid { grid-template-columns: repeat(2, 1fr); }
  .lst-grid { grid-template-columns: 1fr; gap: 14px; }
  .lst-grid .pcard-img { height: 150px; padding: 14px; }
  .lst-grid .pcard-img img { max-height: 110px; }
  .lst-grid .pcard-body { padding: 14px; }
  .lst-grid .pcard-body h3 { font-size: .9rem; }
  .lst-grid .pcard .spark { display: none; }
  .st-price strong { font-size: 2.4rem; }
  .gs13-facts b { font-size: 1.4rem; }
  .pcmp-best strong { font-size: 2.2rem; }
  .pset-grid { grid-template-columns: 1fr; }
}
@media (min-width: 961px) {
  .sum-peek { display: none !important; }
}

/* ---------- Komplettset-Text (kategorie.html?c=sets) ---------- */
.kx-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(40px, 5vw, 72px); }
.kx-toc a { height: 38px; padding: 0 15px; border-radius: 999px; display: inline-flex; align-items: center; font-size: .86rem; font-weight: 700; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .2s, color .2s, box-shadow .2s; }
.kx-toc a:hover { background: var(--slate); color: #fff; box-shadow: none; }
.kx-block { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 88px); align-items: start; padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--line); scroll-margin-top: 120px; }
.kx-block:first-of-type { border-top: 0; padding-top: 0; }
.kx-block.kx-wide { grid-template-columns: 1fr; }
.kx-copy h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); margin-bottom: 20px; max-width: 18em; }
.kx-copy p { color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; max-width: none; }
.kx-copy p + p { margin-top: 14px; }
.kx-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kx-points p { margin: 0 !important; font-size: .95rem; padding: 20px; border-radius: 20px; background: var(--ice); }
.kx-points b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 6px; line-height: 1.3; }
.kx-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: p; }
.kx-parts li { counter-increment: p; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--ice); }
.kx-parts li::before { content: counter(p); grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--slate); color: var(--lime); font-weight: 800; }
.kx-parts b { font-weight: 800; }
.kx-parts span { color: var(--ink-2); font-size: .9rem; }
.kx-table { border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); overflow: auto; }
.kx-table table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 520px; }
.kx-table th { text-align: left; font-size: .76rem; font-weight: 750; color: var(--ink-3); padding: 13px 16px; background: var(--ice); vertical-align: bottom; }
.kx-table th small { display: block; font-weight: 650; font-size: .7rem; }
.kx-table td { padding: 12px 16px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.kx-table td:first-child { font-weight: 700; }
.kx-table td a { color: var(--chl-2); font-weight: 700; white-space: nowrap; }
.kx-note { padding: 12px 16px; font-size: .8rem; color: var(--ink-3); border-top: 1px solid var(--line); }
.kx-fig { padding: 26px; border-radius: 24px; background: var(--slate); color: #fff; display: grid; gap: 14px; }
.kx-bar { position: relative; display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 0 18px; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.kx-bar span { position: absolute; inset: 0 auto 0 0; width: var(--w); background: rgba(217, 69, 63, .45); }
.kx-bar.led span { background: var(--grad); opacity: .55; }
.kx-bar b, .kx-bar i { position: relative; font-style: normal; font-weight: 800; }
.kx-fig small { color: rgba(255, 255, 255, .55); font-size: .8rem; }
.kx-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kx-vs div { padding: 22px; border-radius: 22px; background: var(--ice); display: flex; flex-direction: column; gap: 4px; }
.kx-vs div.x { background: var(--slate); color: #fff; }
.kx-vs small { font-weight: 700; font-size: .78rem; color: var(--ink-3); }
.kx-vs .x small { color: var(--lime); }
.kx-vs b { font-size: 1.6rem; letter-spacing: -.04em; margin-bottom: 6px; }
.kx-vs span { font-size: .9rem; color: var(--ink-2); }
.kx-vs .x span { color: rgba(255, 255, 255, .7); }
.kx-brands { display: flex; flex-wrap: wrap; gap: 8px; }
.kx-brands a { height: 44px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-weight: 750; background: var(--ice); transition: background-color .2s, color .2s; }
.kx-brands a:hover { background: var(--slate); color: #fff; }
.kx-brands span { color: var(--ink-3); font-weight: 650; font-size: .86rem; }
.kx-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); }
.kx-faq h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); }
.kx-faq .faq { grid-column: auto; }
@media (max-width: 960px) {
  .kx-block, .kx-faq { grid-template-columns: 1fr; }
  .kx-points { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .kx-points, .kx-vs { grid-template-columns: 1fr; }
}
/* Detailtext auf Produktseiten (texte.js) */
.pd-text { padding-top: 64px; }
.pd-text .kx-block:first-child { border-top: 0; padding-top: 0; }
.kx-note a { color: var(--chl-2); font-weight: 700; }
.kx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kx-facts div { padding: 22px 18px; border-radius: 20px; background: var(--slate); color: #fff; }
.kx-facts b { display: block; font-size: 1.6rem; letter-spacing: -.04em; color: var(--lime); }
.kx-facts small { color: rgba(255, 255, 255, .65); font-weight: 600; font-size: .8rem; }
@media (max-width: 560px) { .kx-facts { grid-template-columns: 1fr; } }

/* Langtext auf Kategorie- und Markenseiten (.lt-art, lib/inhalt.ts freiText): eine Lesespalte wie der Produkttext (.pt-art) */
.lt-art { max-width: none; } /* Betreiber 06.11.: Texte immer über die volle Contentbreite */
.lt-art > h2 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); letter-spacing: -.02em; line-height: 1.25; margin: 34px 0 10px; scroll-margin-top: 150px; }
.lt-art > h3 { font-size: 1.12rem; margin: 26px 0 6px; scroll-margin-top: 150px; }
.lt-art > :is(h2, h3):first-child { margin-top: 0; }
.lt-art > p, .lt-art > ul, .lt-art > ol { color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; }
.lt-art > p + p { margin-top: 12px; }
.lt-art > ul, .lt-art > ol { margin: 10px 0 0; padding-left: 1.2em; }
.lt-art li + li { margin-top: 4px; }
.lt-art :is(p, li) > a { color: var(--chl-2); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.lt-art :is(p, li) > a:hover { color: var(--ink); }
.mk-about > h2 { margin-bottom: 18px; }
.mk-about + div { margin-top: clamp(32px, 4vw, 56px); }

/* Listen im Fließtext (Betreiber 06.11.: "Auflistungen überall ansprechend stylen, keine 0/8/15-Aufzählungszeichen").
   Gilt für alle Text-Container, nur für Listen ohne eigene Klasse (Bausteine wie Checkliste, Schritte, Inhaltsverzeichnis bleiben).
   ul: kleines abgerundetes Quadrat in Akzentfarbe mit hellem Hof; verschachtelt: Ring. ol: Nummer im hellen Kreis. */
:is(.lt-art, .pt-art, .rg-body, .tx, .kx-copy, .rb-note, .rb-cols, .rb-tabpanel, .rb-box, .rb-faq-a, .faq details, .mk-about) :is(ul, ol):not([class]) {
  list-style: none; padding-left: 0; margin: 14px 0 0; display: grid; gap: 8px; max-width: none;
}
:is(.lt-art, .pt-art, .rg-body, .tx, .kx-copy, .rb-note, .rb-cols, .rb-tabpanel, .rb-box, .rb-faq-a, .faq details, .mk-about) :is(ul, ol):not([class]) > li {
  position: relative; margin: 0; padding-left: 1.7em; color: var(--ink-2); line-height: 1.65;
}
:is(.lt-art, .pt-art, .rg-body, .tx, .kx-copy, .rb-note, .rb-cols, .rb-tabpanel, .rb-box, .rb-faq-a, .faq details, .mk-about) ul:not([class]) > li::before {
  content: ""; position: absolute; left: .32em; top: calc(.825em - 4px); width: 8px; height: 8px; border-radius: 2.5px;
  background: var(--chl); box-shadow: 0 0 0 4px var(--ice-2);
}
:is(.lt-art, .pt-art, .rg-body, .tx, .kx-copy, .rb-note, .rb-cols, .rb-tabpanel, .rb-box, .rb-faq-a, .faq details, .mk-about) li ul:not([class]) { margin-top: 8px; gap: 6px; }
:is(.lt-art, .pt-art, .rg-body, .tx, .kx-copy, .rb-note, .rb-cols, .rb-tabpanel, .rb-box, .rb-faq-a, .faq details, .mk-about) li ul:not([class]) > li::before {
  background: transparent; box-shadow: inset 0 0 0 2px var(--chl); border-radius: 50%;
}
:is(.lt-art, .pt-art, .rg-body, .tx, .kx-copy, .rb-note, .rb-cols, .rb-tabpanel, .rb-box, .rb-faq-a, .faq details, .mk-about) ol:not([class]) { counter-reset: li; }
:is(.lt-art, .pt-art, .rg-body, .tx, .kx-copy, .rb-note, .rb-cols, .rb-tabpanel, .rb-box, .rb-faq-a, .faq details, .mk-about) ol:not([class]) > li { counter-increment: li; padding-left: 2.3em; }
:is(.lt-art, .pt-art, .rg-body, .tx, .kx-copy, .rb-note, .rb-cols, .rb-tabpanel, .rb-box, .rb-faq-a, .faq details, .mk-about) ol:not([class]) > li::before {
  content: counter(li); position: absolute; left: 0; top: calc(.825em - .8em); width: 1.6em; height: 1.6em; border-radius: 50%;
  display: grid; place-items: center; background: var(--ice-2); color: var(--chl-2); font-size: .82em; font-weight: 800; line-height: 1;
}
:is(.lt-art, .pt-art, .rg-body, .tx, .kx-copy, .rb-note, .rb-cols, .rb-tabpanel, .rb-box, .rb-faq-a, .faq details, .mk-about) li > strong:first-child { color: var(--ink); }