/* Empire Premium Bau – B2B-Plattform · Designsystem und Katalog */

/* ========== Tokens ========== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f5f7fa;
  --bg-3: #edf1f6;
  --card: #ffffff;
  --well: #f4f6f9;
  --ink: #0b1626;
  --ink-2: #2c3a4d;
  --muted: #5a6677;
  --faint: #8792a2;
  --line: #dde3ea;
  --line-2: #ebeff4;
  --brand: #0b2545;
  --brand-2: #133a68;
  --accent: #0a5cd8;
  --accent-hover: #084bb3;
  --accent-soft: #e9f1fe;
  --accent-ink: #0846a6;
  --sun: #f5a300;
  --sun-hover: #e09400;
  --sun-soft: #fff5de;
  --sun-ink: #8a5200;
  --ok: #157f3b; --ok-bg: #e6f5ec;
  --wait: #a35a00; --wait-bg: #fff2df;
  --off: #c4122f; --off-bg: #fdecef;
  --field: #ffffff;
  --scrim: rgba(8, 17, 32, .48);
  --shadow-1: 0 1px 2px rgba(11, 22, 38, .05), 0 4px 14px rgba(11, 22, 38, .06);
  --shadow-2: 0 6px 16px rgba(11, 22, 38, .08), 0 24px 56px rgba(11, 22, 38, .14);
  --ring: 0 0 0 3px rgba(10, 92, 216, .28);
  --r-xs: 6px; --r-sm: 9px; --r: 13px; --r-lg: 20px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-d: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1360px;
  --gut: 24px;
  --hdr: 76px;
  --ease: cubic-bezier(.25, .1, .25, 1);
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0f17; --bg-2: #0f1621; --bg-3: #16202e; --card: #111a26; --well: #eef1f5;
  --ink: #e9eef5; --ink-2: #c4cdd9; --muted: #95a1b2; --faint: #6f7b8d;
  --line: #243245; --line-2: #1a2535;
  --brand: #081626; --brand-2: #10233d;
  --accent: #4b8cff; --accent-hover: #6aa1ff; --accent-soft: #13284a; --accent-ink: #9cc0ff;
  --sun: #ffb52e; --sun-hover: #ffc457; --sun-soft: #2e2208; --sun-ink: #ffcf73;
  --ok: #3fcf74; --ok-bg: #0e2a19; --wait: #ffad42; --wait-bg: #2d1e07; --off: #ff6b7d; --off-bg: #331018;
  --field: #0f1621; --scrim: rgba(0, 0, 0, .62);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .3);
  --shadow-2: 0 8px 20px rgba(0, 0, 0, .45), 0 28px 64px rgba(0, 0, 0, .55);
  --ring: 0 0 0 3px rgba(75, 140, 255, .38);
}

/* ========== Grundlagen ========== */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 var(--font); letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
body.locked { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-d); line-height: 1.18; letter-spacing: -.022em; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 750; }
h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 720; }
h3 { font-size: 18px; font-weight: 680; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.ic { flex: none; vertical-align: middle; }
.eyebrow { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.lead { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 760px; }
.tnum, .price-val, .tiers td, table td { font-variant-numeric: tabular-nums; }
main { display: block; min-height: 50vh; }
main:focus { outline: none; }

/* ========== Knöpfe und Formulare ========== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--bg-3); color: var(--ink); font-weight: 650; font-size: 14.5px; line-height: 1; white-space: nowrap;
  text-decoration: none !important; transition: background .15s var(--ease), border-color .15s, box-shadow .15s, transform .1s;
}
.btn:hover { background: var(--line-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.ghost { background: var(--card); border-color: var(--line); color: var(--ink); }
.btn.ghost:hover { border-color: var(--faint); background: var(--bg-2); }
.btn.sun { background: var(--sun); color: #1b1300; }
.btn.sun:hover { background: var(--sun-hover); }
.btn.ghost-inv { background: transparent; border-color: rgba(255, 255, 255, .32); color: #fff; }
.btn.ghost-inv:hover { background: rgba(255, 255, 255, .08); }
.btn.danger { background: var(--off-bg); color: var(--off); }
.btn.sm { height: 34px; padding: 0 13px; font-size: 13.5px; border-radius: 8px; }
.btn.lg { height: 50px; padding: 0 24px; font-size: 16px; border-radius: 11px; }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.link-btn:hover { color: var(--accent); text-decoration: none; }
.link-btn[aria-pressed="true"] { color: var(--accent); }
.link-btn[aria-pressed="true"] .ic { fill: currentColor; }
.link-btn.sm { font-size: 13px; padding: 0; color: var(--accent); }

.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.field > span { font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.field input, .field select, .field textarea, .input {
  width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--field); color: var(--ink); font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field select, select.input { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6677' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
[aria-invalid="true"] { border-color: var(--off) !important; }
.err { color: var(--off); font-size: 12.5px; min-height: 0; }
.err:empty { display: none; }
.formerr { color: var(--off); font-size: 14px; margin: 4px 0 12px; }
.formerr:empty { display: none; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 8px; }
legend { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid2 .span2 { grid-column: span 2; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.card-soft { background: var(--bg-2); border-color: var(--line-2); }
.form-ok { text-align: center; padding: 18px 8px 4px; }
.form-ok .ic { color: var(--ok); margin: 0 auto 8px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 650; font-style: normal; background: var(--bg-3); color: var(--ink-2); white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.wait { background: var(--wait-bg); color: var(--wait); } .pill.off { background: var(--off-bg); color: var(--off); } .pill.info { background: var(--accent-soft); color: var(--accent-ink); }
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.seg { display: inline-flex; background: var(--bg-3); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; height: 30px; min-width: 34px; padding: 0 9px; border-radius: 7px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.chips a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.chips a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.checks { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.checks li { display: flex; gap: 9px; align-items: flex-start; }
.checks .ic { color: var(--ok); margin-top: 3px; }

/* ========== Kopfbereich ========== */
.announce { background: var(--sun-soft); color: var(--sun-ink); font-size: 13.5px; font-weight: 600; }
.announce .wrap { display: flex; gap: 8px; align-items: center; justify-content: center; padding-top: 8px; padding-bottom: 8px; }
.topbar { background: var(--brand); color: rgba(255, 255, 255, .78); font-size: 12.5px; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 36px; gap: 16px; }
.tb-claim { display: flex; align-items: center; gap: 7px; margin: 0; white-space: nowrap; overflow: hidden; }
.tb-claim .ic { opacity: .7; }
.tb-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .2); margin: 0 6px; }
.tb-links { display: flex; align-items: center; gap: 18px; }
.tb-links a { color: rgba(255, 255, 255, .82); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.tb-links a:hover { color: #fff; }
.tb-theme { border: 0; background: rgba(255, 255, 255, .08); color: #fff; width: 28px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.tb-theme .ic-sun, [data-theme="dark"] .tb-theme .ic-moon { display: none; }
[data-theme="dark"] .tb-theme .ic-sun { display: inline; }

.hdr { position: sticky; top: 0; z-index: 40; background: var(--card); border-bottom: 1px solid var(--line); }
.hdr.is-stuck { box-shadow: 0 6px 20px rgba(11, 22, 38, .07); }
.hdr-main { display: flex; align-items: center; gap: 24px; height: var(--hdr); }
.hdr-btn { display: none; width: 42px; height: 42px; border: 0; border-radius: 10px; background: transparent; align-items: center; justify-content: center; color: var(--ink); }
.hdr-btn:hover { background: var(--bg-2); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none !important; flex: none; }
.brand .logo-mark { flex: none; }
.brand-t { display: flex; flex-direction: column; line-height: 1.12; }
.brand-t b { font-size: 16.5px; font-weight: 760; letter-spacing: -.02em; }
.brand-t small { font-size: 11.5px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.brand-inv { color: #fff; } .brand-inv .brand-t small { color: rgba(255, 255, 255, .6); }

.search { position: relative; flex: 1; max-width: 720px; display: flex; align-items: center; }
.search input {
  width: 100%; height: 48px; padding: 0 112px 0 44px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg-2);
  font-size: 15px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.search input::-webkit-search-cancel-button { display: none; }
.search input:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: var(--ring); }
.search-ic { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.search-go { position: absolute; right: 5px; height: 38px; border-radius: 9px; padding: 0 16px; }
.suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-2); padding: 8px; z-index: 60; max-height: min(70vh, 560px); overflow: auto; }
.sg-h { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 8px 10px 4px; margin: 0; }
.sg-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none !important; }
.sg-item:hover, .sg-item[aria-selected="true"] { background: var(--bg-2); }
.sg-item img, .sg-ph { width: 46px; height: 46px; object-fit: contain; background: var(--well); border-radius: 8px; padding: 3px; mix-blend-mode: multiply; }
.sg-ph { display: flex; align-items: center; justify-content: center; color: var(--faint); }
.sg-t { min-width: 0; }
.sg-t b { display: block; font-size: 14px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-t small { color: var(--muted); font-size: 12.5px; }
.sg-p { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.sg-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 8px; }
.sg-row a { padding: 6px 11px; border-radius: 99px; background: var(--bg-2); color: var(--ink-2); font-size: 13px; font-weight: 600; text-decoration: none; }
.sg-row a:hover, .sg-row a[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.sg-all { display: block; margin-top: 4px; padding: 11px 10px; border-top: 1px solid var(--line-2); font-weight: 650; font-size: 14px; }
.sg-dym { padding: 6px 10px; margin: 0; font-size: 13.5px; color: var(--muted); }
.sg-empty { padding: 14px 10px; color: var(--muted); font-size: 14px; margin: 0; }

.hdr-acts { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hact { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; height: 54px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font-size: 11.5px; font-weight: 600; text-decoration: none !important; }
.hact:hover { background: var(--bg-2); color: var(--ink); }
.hact-l { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble { position: absolute; top: 4px; right: 12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--card); }
.hact-cart .bubble { background: var(--sun); color: #1b1300; }
.hact.pop .bubble { animation: pop .4s var(--ease); }
@keyframes pop { 40% { transform: scale(1.35); } }
.acct { position: relative; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 6px); width: 260px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-2); padding: 6px; z-index: 61; }
.acct-head { margin: 0 0 4px; padding: 10px 12px; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 2px; }
.acct-head span { font-size: 12.5px; color: var(--muted); }
.acct-head .pill { align-self: flex-start; margin-top: 4px; }
.acct-menu a, .acct-menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; border: 0; background: none; color: var(--ink); font-size: 14px; text-align: left; text-decoration: none !important; }
.acct-menu a:hover, .acct-menu button:hover { background: var(--bg-2); }

/* Kategorieleiste und Mega-Menü */
.catbar { border-top: 1px solid var(--line-2); }
.catnav { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 2px; }
.cn-item { position: static; }
.cn-link { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 12px; color: var(--ink); font-weight: 640; font-size: 14px; white-space: nowrap; border-bottom: 2px solid transparent; text-decoration: none !important; }
.cn-link:hover, .cn-item.is-open > .cn-link { color: var(--accent); border-bottom-color: var(--accent); }
.cn-extra { margin-left: auto; }
.cn-extra + .cn-extra { margin-left: 0; }
.cn-extra .cn-link { color: var(--accent-ink); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px rgba(11, 22, 38, .12); z-index: 50; }
.mega-in { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, 1fr); gap: 40px; padding-top: 28px; padding-bottom: 32px; }
.mega-h { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-weight: 750; font-size: 17px; }
.mega-h a { color: var(--ink); }
.mega-h .ic { color: var(--accent); }
.mega-n { margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.mega-h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.mega-list { list-style: none; padding: 0; margin: 0 0 14px; columns: 2; column-gap: 24px; }
.mega-list li { break-inside: avoid; }
.mega-list a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: 8px; color: var(--ink-2); font-size: 14.5px; text-decoration: none !important; }
.mega-list a:hover { background: var(--bg-2); color: var(--accent); }
.mega-list em { font-style: normal; font-size: 12.5px; color: var(--faint); }
.mega-list em.req { color: var(--wait); font-size: 11.5px; }
.mega-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 14px; }
.mega-brands { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.mega-brands a { display: block; padding: 6px 0; color: var(--ink-2); font-size: 14.5px; }
.mega-promo { background: var(--bg-2); border-radius: var(--r); padding: 20px 22px; align-self: start; }
.mega-promo p:not(.mega-h2) { color: var(--muted); font-size: 14px; }
.mega-promo .mega-h2 { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 15.5px; }

/* Mobiles Menü */
.mnav { position: fixed; inset: 0; z-index: 90; background: var(--scrim); }
.mnav-panel { position: absolute; inset: 0 auto 0 0; width: min(380px, 88vw); background: var(--card); display: flex; flex-direction: column; box-shadow: var(--shadow-2); animation: slidein .25s var(--ease); }
@keyframes slidein { from { transform: translateX(-100%); } }
.mnav-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); }
.mnav-head .hdr-btn { display: inline-flex; }
.mnav-body { overflow: auto; padding: 8px 10px 24px; }
.mnav-h { margin: 16px 8px 6px; font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.mnav-cat summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-radius: 10px; font-weight: 640; cursor: pointer; }
.mnav-cat summary::-webkit-details-marker { display: none; }
.mnav-cat summary .ic:first-child { color: var(--accent); }
.mnav-cat summary span { flex: 1; }
.mnav-cat[open] .mnav-chev { transform: rotate(180deg); }
.mnav-cat a { display: block; padding: 9px 8px 9px 46px; color: var(--ink-2); font-size: 14.5px; }
.mnav-cat .mnav-all { font-weight: 650; color: var(--accent); }
.mnav-link { display: flex; width: 100%; align-items: center; gap: 12px; padding: 11px 8px; border: 0; background: none; border-radius: 10px; color: var(--ink); font-weight: 600; text-align: left; text-decoration: none !important; }
.mnav-link .ic { color: var(--muted); }
.mnav-link:hover, .mnav-cat summary:hover { background: var(--bg-2); }

/* ========== Startseite ========== */
.hero { position: relative; overflow: hidden; background: radial-gradient(1200px 520px at 85% -10%, rgba(245, 163, 0, .14), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg) 85%); border-bottom: 1px solid var(--line-2); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.hero h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 18px; }
.hero .lead { font-size: 18.5px; margin-bottom: 28px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.hero-trust li { display: inline-flex; gap: 8px; align-items: center; }
.hero-trust .ic { color: var(--accent); }
.hero-visual { position: relative; }
.hv-grid { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 1.22; }
.hv-tile { position: relative; display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); transition: transform .25s var(--ease), box-shadow .25s; }
.hv-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.hv-1 { grid-row: span 2; }
.hv-tile img { width: 100%; height: 100%; object-fit: contain; padding: 22px 22px 58px; }
.hv-l { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; flex-direction: column; color: #0b1626; }
.hv-l b { font-size: 15px; } .hv-l small { color: #5a6677; font-size: 12.5px; }
.hv-quick { position: absolute; left: -28px; bottom: -22px; width: min(340px, 80%); background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border: 1px solid rgba(221, 227, 234, .9); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-2); color: #0b1626; }
.hv-quick label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: #0b1626; }
.hv-quick-row { display: flex; gap: 8px; }
.hv-quick input { flex: 1; min-width: 0; height: 36px; border: 1px solid #dde3ea; border-radius: 8px; padding: 0 10px; font-size: 14px; background: #fff; color: #0b1626; }

.sect { padding: 64px 0; }
.sect-alt { background: var(--bg-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.sect-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.sect-h h2 { margin: 0; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; white-space: nowrap; }
.catgrid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cattile { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); color: var(--ink); text-decoration: none !important; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.cattile:hover { border-color: var(--accent); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.cattile-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.cattile-t { display: flex; flex-direction: column; gap: 2px; }
.cattile-t b { font-size: 17px; font-weight: 720; letter-spacing: -.015em; }
.cattile-t small { font-size: 13px; font-weight: 650; }
.cattile-t small.ok { color: var(--ok); } .cattile-t small.req { color: var(--wait); }
.cattile-sub { font-size: 13px; color: var(--muted); line-height: 1.5; }
.cattile-go { position: absolute; top: 22px; right: 20px; color: var(--faint); transition: transform .2s, color .2s; }
.cattile:hover .cattile-go { color: var(--accent); transform: translateX(3px); }
.usp { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.usp-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.usp h3 { margin-bottom: 6px; }
.usp p { color: var(--muted); font-size: 14.5px; margin: 0; }
.band { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff; padding: 64px 0; position: relative; overflow: hidden; }
.band::after { content: ""; position: absolute; right: -120px; top: -140px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 163, 0, .28), transparent 65%); pointer-events: none; }
.band-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; position: relative; z-index: 1; }
.band h2 { color: #fff; font-size: clamp(26px, 2.8vw, 36px); }
.band .eyebrow { color: var(--sun); }
.band .lead { color: rgba(255, 255, 255, .78); margin-bottom: 26px; }
.band-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.steps b { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--sun); color: #1b1300; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.steps span { display: flex; flex-direction: column; color: rgba(255, 255, 255, .7); font-size: 14px; }
.steps strong { color: #fff; font-size: 15.5px; margin-bottom: 2px; }
.brandrow { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.brandrow a { display: flex; flex-direction: column; min-width: 150px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); text-decoration: none !important; transition: border-color .2s; }
.brandrow a:hover { border-color: var(--accent); }
.brandrow b { font-size: 18px; letter-spacing: -.01em; }
.brandrow small { color: var(--muted); font-size: 12.5px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cta-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; }
.cta-card h2 { font-size: 26px; }
.cta-card p { color: var(--muted); }
.cta-dark { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; color: #fff; }
.cta-dark h2 { color: #fff; } .cta-dark p { color: rgba(255, 255, 255, .75); } .cta-dark .eyebrow { color: var(--sun); }
.mini-steps { margin: 0 0 22px; padding-left: 20px; color: var(--ink-2); display: grid; gap: 6px; }

/* ========== Produktkarten ========== */
.plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.plist-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pcard { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.pcard:hover { border-color: #c9d2dd; box-shadow: var(--shadow-1); }
[data-theme="dark"] .pcard:hover { border-color: var(--faint); }
.pcard-img { display: block; aspect-ratio: 1; background: var(--well); padding: 18px; }
.pcard-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s var(--ease); }
.pcard:hover .pcard-img img { transform: scale(1.035); }
.pimg-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #9aa6b5; }
.badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; pointer-events: none; }
.badge { padding: 4px 9px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; }
.badge-sun { background: var(--sun); color: #1b1300; }
.pcard-body { padding: 14px 16px 6px; display: flex; flex-direction: column; flex: 1; }
.pcard-brand { margin: 0 0 3px; font-size: 11.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pcard-title { font-size: 15px; font-weight: 640; line-height: 1.35; letter-spacing: -.01em; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-title a { color: var(--ink); }
.pcard-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.pcard-sku { margin: 0 0 10px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.pcard-facts { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 3px; }
.pcard-facts li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.pcard-facts b { color: var(--ink); font-weight: 650; text-align: right; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.tags span { padding: 2px 8px; border-radius: 5px; background: var(--bg-3); color: var(--ink-2); font-size: 11.5px; font-weight: 600; }
.stock { display: flex; align-items: center; gap: 7px; margin: auto 0 0; padding-top: 4px; font-size: 13px; font-weight: 600; }
.stock i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.stock-ok { color: var(--ok); } .stock-ok i { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.stock-wait { color: var(--wait); } .stock-wait i { background: var(--wait); box-shadow: 0 0 0 3px var(--wait-bg); }
.stock-off { color: var(--off); } .stock-off i { background: var(--off); box-shadow: 0 0 0 3px var(--off-bg); }
.pcard { container-type: inline-size; }
.pcard-buy { position: relative; z-index: 1; padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line-2); margin-top: 10px; }
.pcard-tools { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.tool { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .92); color: #3c4858; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s, background .15s; }
.tool:hover { color: var(--accent); border-color: var(--accent); }
.tool[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.tool[data-fav][aria-pressed="true"] { background: #e0245e; border-color: #e0245e; }
.tool[aria-pressed="true"] .ic { fill: currentColor; }

/* Schmale Karten: Mengenwahl kompakter, Knopf nur mit Symbol */
.pcard .qty { height: 40px; }
.pcard .qty input { width: 38px; }
.pcard .qty-b { width: 28px; }
.pcard .buy .btn { height: 40px; padding: 0 10px; }
@container (max-width: 290px) { .buy .btn span { display: none; } .buy .btn { flex: 1; } }

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; line-height: 1.2; }
.price-label { width: 100%; font-size: 11.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.price-val { font-size: 20px; font-weight: 760; letter-spacing: -.02em; color: var(--ink); }
.price-req { font-size: 16px; }
.price-unit { font-size: 12.5px; color: var(--muted); }
.price-was { width: 100%; font-size: 12.5px; color: var(--muted); }
.price-tier { width: 100%; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--sun-ink); font-weight: 650; }
.price-note { width: 100%; font-size: 12px; color: var(--wait); }
.price-hidden a { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; font-size: 14px; }
.price-big .price-val { font-size: 32px; }
.price-big .price-unit { font-size: 14px; }
.buy { display: flex; gap: 8px; }
.buy .btn { flex: 1; min-width: 0; padding: 0 12px; }
.buy .btn span { overflow: hidden; text-overflow: ellipsis; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); height: 42px; flex: none; }
.qty input { width: 46px; height: 100%; border: 0; background: transparent; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; -moz-appearance: textfield; padding: 0; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; }
.qty:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.qty-b { width: 32px; height: 100%; border: 0; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.qty-b:hover { color: var(--accent); }
.buy-big .qty { height: 50px; } .buy-big .qty input { width: 58px; font-size: 16px; } .buy-big .qty-b { width: 40px; }
.buy-off .btn { width: 100%; }

/* Listenansicht */
.plist.is-list { grid-template-columns: 1fr; gap: 12px; }
.plist.is-list .pcard { display: grid; grid-template-columns: 150px minmax(0, 1fr) 300px; }
.plist.is-list .pcard-img { aspect-ratio: auto; height: 100%; min-height: 150px; padding: 14px; }
.plist.is-list .pcard-body { padding: 16px 20px; }
.plist.is-list .pcard-facts { grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 22px; }
.plist.is-list .pcard-facts li { flex-direction: column; gap: 0; }
.plist.is-list .pcard-facts b { text-align: left; }
.plist.is-list .pcard-buy { margin: 0; border-top: 0; border-left: 1px solid var(--line-2); padding: 16px 18px; justify-content: center; }
.plist.is-list .pcard-tools { flex-direction: row; top: 12px !important; right: 12px; }
.plist.is-list .badges { top: 10px; left: 10px; }

/* ========== Listen: Kategorie, Suche ========== */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 18px 0 14px; font-size: 13px; color: var(--muted); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--line); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink-2); font-weight: 600; }
.lhead { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 20px; }
.lhead h1 { margin-bottom: 6px; }
.lhead .lead { margin: 0; font-size: 16px; }
.lhead-img { width: 200px; height: 120px; object-fit: contain; border-radius: var(--r); background: var(--well); padding: 8px; mix-blend-mode: multiply; }
.dym { margin: 10px 0 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14.5px; }
.dym a { font-weight: 700; }
.subcats { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.subcats a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none !important; transition: border-color .15s, background .15s; }
.subcats a:hover { border-color: var(--accent); background: var(--accent-soft); }
.subcats a .ic { color: var(--accent); }
.subcats em { font-style: normal; font-size: 12px; color: var(--muted); background: var(--bg-3); border-radius: 99px; padding: 1px 7px; }
.subcats a.is-empty em { color: var(--wait); background: var(--wait-bg); }
.lbody { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 28px; align-items: start; }
.lfilters { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow: auto; padding-right: 4px; }
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.filters-head b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.filters-close { display: none !important; }
.facet { border-top: 1px solid var(--line); padding: 4px 0; }
.facet summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 11px 0; font-weight: 700; font-size: 14px; cursor: pointer; }
.facet summary::-webkit-details-marker { display: none; }
.facet summary::after { content: ""; width: 8px; height: 8px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.facet[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.facet-list { padding: 0 0 10px; display: grid; gap: 1px; max-height: 300px; overflow: auto; }
.facet .check { margin: 0; padding: 6px 6px; border-radius: 7px; align-items: center; font-size: 14px; }
.facet .check:hover { background: var(--bg-2); }
.facet .check span { flex: 1; }
.facet .check em { font-style: normal; font-size: 12px; color: var(--faint); }
.facet-range { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; }
.facet-range input { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: var(--field); font-size: 14px; }
.filters-acts { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.js .filters-acts .btn.primary { display: none; }
.ltools { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.lt-filter { display: none; }
.lt-count { margin: 0 auto 0 0; color: var(--muted); font-size: 14px; }
.lt-count b { color: var(--ink); }
.lt-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.lt-sort select { height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 30px 0 11px; background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6677' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; appearance: none; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 650; text-decoration: none !important; }
.fchip:hover { background: var(--accent); color: #fff; }
.lresults.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }
.pager { display: flex; justify-content: center; gap: 6px; margin: 28px 0 8px; }
.pg { min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 650; font-size: 14px; text-decoration: none !important; }
.pg:hover { border-color: var(--accent); color: var(--accent); }
.pg.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pg-gap { align-self: center; color: var(--faint); padding: 0 4px; }
.pricenote { display: flex; gap: 7px; align-items: flex-start; margin: 24px 0 0; color: var(--muted); font-size: 12.5px; }
.empty { text-align: center; padding: 56px 20px; border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--bg-2); }
.empty .ic { color: var(--faint); margin: 0 auto 12px; }
.empty p { color: var(--muted); max-width: 560px; margin-left: auto; margin-right: auto; }
.empty.sm { padding: 36px 20px; }
.catdesc { margin: 48px 0 0; padding-top: 32px; border-top: 1px solid var(--line); max-width: 860px; }
.catdesc h2 { font-size: 20px; }
.listing { padding-bottom: 72px; }
.procure { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; padding: 32px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line-2); }
.procure-ic { width: 60px; height: 60px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.procure p { color: var(--muted); }

/* ========== Produktseite ========== */
.pdp { padding-bottom: 72px; }
.pdp-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.pdp-gallery { position: sticky; top: 140px; }
.pdp-main { position: relative; aspect-ratio: 1; background: var(--well); border-radius: var(--r-lg); padding: 40px; display: flex; align-items: center; justify-content: center; }
.pdp-main img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pdp-main .badges { top: 18px; left: 18px; }
.pdp-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pdp-thumbs button { width: 76px; height: 76px; padding: 6px; border-radius: 11px; border: 1.5px solid var(--line); background: var(--well); }
.pdp-thumbs button[aria-pressed="true"] { border-color: var(--accent); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pdp-brand { margin: 0 0 6px; font-weight: 750; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; }
.pdp-info h1 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 12px; }
.pdp-ids { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 18px; font-size: 13.5px; }
.pdp-ids div { display: flex; gap: 6px; }
.pdp-ids dt { color: var(--muted); }
.pdp-ids dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.pdp-facts { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pdp-facts li { padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 2px; }
.pdp-facts span { font-size: 12px; color: var(--muted); }
.pdp-facts b { font-size: 17px; font-weight: 740; letter-spacing: -.01em; }
.pdp-short { color: var(--ink-2); }
.buybox { margin-top: 18px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-1); display: grid; gap: 14px; }
.tiers { width: 100%; border-collapse: collapse; font-size: 14px; }
.tiers caption { text-align: left; font-size: 12.5px; font-weight: 700; color: var(--muted); padding-bottom: 6px; }
.tiers th, .tiers td { padding: 8px 12px; border-top: 1px solid var(--line-2); text-align: left; }
.tiers th { font-weight: 600; color: var(--ink-2); }
.tiers td { text-align: right; font-weight: 700; }
.tiers td small { font-weight: 600; color: var(--sun-ink); margin-left: 6px; }
.tiers tr.is-on { background: var(--accent-soft); }
.tiers tr.is-on th, .tiers tr.is-on td { color: var(--accent-ink); }
.pdp-subacts { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.pdp-terms { list-style: none; padding: 12px 0 0; margin: 0; border-top: 1px solid var(--line-2); display: grid; gap: 7px; font-size: 13.5px; color: var(--muted); }
.pdp-terms li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdp-tabs { position: sticky; top: 124px; z-index: 5; display: flex; gap: 4px; margin: 48px 0 0; padding: 0; background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.pdp-tabs a { padding: 14px 16px; color: var(--muted); font-weight: 650; font-size: 14.5px; white-space: nowrap; border-bottom: 2px solid transparent; text-decoration: none !important; }
.pdp-tabs a:hover, .pdp-tabs a.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.pdp-sec { padding: 40px 0 8px; scroll-margin-top: 180px; }
.pdp-sec > h2 { font-size: 22px; margin-bottom: 18px; }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.spec { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec tbody { border: 1px solid var(--line); }
.spec caption { text-align: left; font-weight: 720; font-size: 14.5px; padding: 0 0 8px 1px; }
.spec th, .spec td { padding: 10px 14px; text-align: left; border-top: 1px solid var(--line-2); vertical-align: top; }
.spec tr:first-child th, .spec tr:first-child td { border-top: 0; }
.spec th { width: 52%; font-weight: 500; color: var(--muted); background: var(--bg-2); }
.spec td { font-weight: 620; }
.docs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.docs a { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none !important; transition: border-color .15s; }
.docs a:hover { border-color: var(--accent); }
.docs a > .ic:first-child { color: var(--off); }
.docs span { flex: 1; display: flex; flex-direction: column; }
.docs small { color: var(--muted); font-size: 12.5px; }

/* ========== Inhalte ========== */
.content { padding-bottom: 72px; }
.content.narrow { max-width: 860px; }
.phead { margin: 8px 0 32px; max-width: 860px; }
.phead h1 { margin-bottom: 10px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.prose { max-width: 760px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.prose h2 { font-size: 22px; margin: 1.6em 0 .55em; color: var(--ink); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; margin: 1.4em 0 .5em; }
.prose ul { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.prose ol { counter-reset: step; list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 10px; }
.prose ol li { counter-increment: step; position: relative; padding-left: 40px; min-height: 28px; }
.prose ol li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.legal { font-size: 15px; }
.legal h2 { font-size: 19px; }
.side-cta { position: sticky; top: 140px; display: grid; gap: 16px; }
.side-cta h2 { font-size: 19px; }
.side-cta h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.side-cta p { color: var(--muted); font-size: 14px; }
.side-cta .btn + .btn { margin-top: 8px; }
.contact-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; font-size: 14.5px; }
.contact-list li { display: flex; gap: 10px; align-items: flex-start; }
.contact-list .ic { color: var(--accent); margin-top: 2px; }
.form-grid .card.form { margin-top: 8px; }
.brandgrid { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.brandgrid a { display: flex; flex-direction: column; gap: 4px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none !important; transition: border-color .2s, box-shadow .2s; }
.brandgrid a:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.brandgrid b { font-size: 22px; letter-spacing: -.02em; }
.brandgrid span { color: var(--muted); font-size: 13.5px; }
.brandgrid em { margin-top: 10px; font-style: normal; font-weight: 650; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.projgrid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.proj { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.proj img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.proj > div { padding: 18px 20px; }
.proj h2 { font-size: 18px; margin-bottom: 4px; }
.proj-meta { color: var(--muted); font-size: 13.5px; }
.errpage { text-align: center; padding: 80px var(--gut) 100px; max-width: 760px; }
.errpage .lead { margin: 0 auto 24px; }
.errsearch { display: flex; gap: 8px; max-width: 520px; margin: 0 auto 20px; }
.errsearch input { flex: 1; height: 46px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; background: var(--field); }
.erract { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ========== Anmeldung ========== */
.auth-wrap { display: grid; justify-content: center; padding: 36px var(--gut) 80px; }
.auth-card { width: min(460px, 100%); padding: 32px; }
.auth-wide { grid-template-columns: minmax(0, 720px) 320px; gap: 28px; align-items: start; }
.auth-wide .auth-card { width: 100%; }
.auth-card h1 { font-size: 28px; }
.auth-links { margin: 14px 0 0; font-size: 14px; text-align: center; }
.auth-alt { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; }
.auth-alt p { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.auth-admin { margin: 18px 0 0; display: flex; gap: 6px; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.auth-side { padding: 28px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line-2); position: sticky; top: 140px; }
.auth-side h2 { font-size: 20px; }

/* ========== Fuß ========== */
.ftr { background: #08111d; color: rgba(255, 255, 255, .68); font-size: 14px; margin-top: 0; }
.ftr-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-top: 56px; padding-bottom: 44px; }
.ftr-brand p { margin: 16px 0; max-width: 360px; }
.ftr address { font-style: normal; line-height: 1.7; }
.ftr a { color: rgba(255, 255, 255, .78); }
.ftr a:hover { color: #fff; }
.ftr-col { display: flex; flex-direction: column; gap: 9px; }
.ftr-h { color: #fff; font-weight: 700; margin: 0 0 6px; font-size: 14.5px; }
.ftr-bottom { border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; }
.ftr-bottom .wrap { display: flex; justify-content: space-between; gap: 18px; padding-top: 18px; padding-bottom: 22px; flex-wrap: wrap; }
.ftr-bottom p { margin: 0; }
.ftr-bottom nav { display: flex; gap: 18px; }
.noscript { position: fixed; bottom: 0; left: 0; right: 0; background: var(--wait-bg); color: var(--wait); padding: 10px; text-align: center; font-size: 13.5px; z-index: 99; }

/* ========== Hinweise ========== */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 120; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px)); padding: 12px 14px 12px 16px; border-radius: 14px; background: #0f1a2a; color: #fff; box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); font-size: 14.5px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast.err { background: #8f1024; }
.toast img { width: 40px; height: 40px; border-radius: 8px; background: #fff; object-fit: contain; padding: 3px; }
.toast a, .toast button { color: #9cc0ff; font-weight: 700; background: none; border: 0; padding: 0 0 0 6px; white-space: nowrap; }

/* ========== Anpassung an Bildschirmgrößen ========== */
@media (max-width: 1280px) {
  .cn-link { padding: 0 9px; font-size: 13.5px; }
  .hact { min-width: 58px; }
  .hact-cmp .hact-l, .hact-fav .hact-l { display: none; }
}
@media (max-width: 1120px) {
  :root { --hdr: 68px; }
  .catbar { display: none; }
  .hdr-btn { display: inline-flex; }
  .hdr-menu { margin-left: -8px; }
  html { scroll-padding-top: 90px; }
  .lfilters { position: fixed; inset: 0 auto 0 0; z-index: 95; width: min(360px, 90vw); max-height: none; background: var(--card); padding: 18px; box-shadow: var(--shadow-2); transform: translateX(-105%); transition: transform .25s var(--ease); }
  .lfilters.is-open { transform: none; }
  .filters-close { display: inline-flex !important; }
  .lbody { grid-template-columns: 1fr; }
  .lt-filter { display: inline-flex; }
  .js .filters-acts .btn.primary { display: inline-flex; }
  .pdp-gallery, .side-cta, .auth-side { position: static; }
  .pdp-tabs { top: 68px; }
  .catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plist-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plist-row .pcard:nth-child(n+7) { display: none; }
  .content-grid, .auth-wide { grid-template-columns: 1fr; }
  .ftr-top { grid-template-columns: 1fr 1fr; }
  .plist.is-list .pcard { grid-template-columns: 130px minmax(0, 1fr) 260px; }
}
@media (max-width: 900px) {
  .hero-in, .band-in, .pdp-top, .procure, .split { grid-template-columns: 1fr; }
  .hero-in { padding-top: 36px; padding-bottom: 48px; gap: 36px; }
  .hv-quick { left: 12px; }
  .usp { grid-template-columns: 1fr 1fr; }
  .specs { grid-template-columns: 1fr; }
  .pdp-top { gap: 24px; }
  .pdp-main { padding: 24px; max-height: 70vh; }
  .plist.is-list .pcard { grid-template-columns: 110px minmax(0, 1fr); }
  .plist.is-list .pcard-buy { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-2); }
}
@media (max-width: 760px) {
  :root { --gut: 16px; }
  .topbar .tb-claim span:not(:first-of-type), .topbar .tb-sep, .topbar .tb-claim .ic + span + .ic { display: none; }
  .tb-links a:not([href^="tel"]) { display: none; }
  .hdr-main { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 10px; gap: 6px 10px; }
  .brand-t small { display: none; }
  .brand .logo-mark { width: 30px; height: 30px; }
  .brand-t b { font-size: 15.5px; }
  .search { order: 5; flex-basis: 100%; max-width: none; }
  .search input { height: 44px; padding-right: 14px; }
  .search-go { display: none; }
  .hdr-acts { gap: 0; }
  .hact { min-width: 44px; height: 44px; padding: 0 6px; }
  .hact .hact-l { display: none; }
  .bubble { top: 2px; right: 2px; }
  .hact-cmp { display: none; }
  .hero h1 { font-size: 34px; }
  .hero .lead { font-size: 16.5px; }
  .hv-grid { aspect-ratio: 1.1; gap: 10px; }
  .hv-tile img { padding: 14px 14px 46px; }
  .hv-quick { position: static; width: 100%; margin-top: 14px; }
  .sect { padding: 44px 0; }
  .sect-h { flex-direction: column; align-items: flex-start; gap: 8px; }
  .catgrid { grid-template-columns: 1fr; gap: 10px; }
  .cattile { flex-direction: row; align-items: center; padding: 16px; gap: 14px; }
  .cattile-sub { display: none; }
  .cattile-go { position: static; margin-left: auto; }
  .cattile-ic { width: 46px; height: 46px; }
  .usp { grid-template-columns: 1fr; gap: 20px; }
  .plist, .plist-row { grid-template-columns: 1fr; gap: 12px; }
  .plist-row .pcard:nth-child(n+5) { display: none; }
  .pcard { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .pcard-img { grid-row: span 1; aspect-ratio: auto; height: 100%; min-height: 128px; padding: 10px; }
  .pcard-body { padding: 12px 14px 6px; }
  .pcard-buy { grid-column: 1 / -1; margin-top: 0; padding: 12px 14px 14px; }
  .pcard-buy .pcard-tools, .pcard .pcard-tools { flex-direction: row; top: 8px !important; right: 8px; }
  .pcard .tool { width: 30px; height: 30px; }
  .pcard .badges { top: 8px; left: 8px; }
  .pcard-title { font-size: 14.5px; padding-right: 66px; }
  .plist.is-list .pcard { grid-template-columns: 112px minmax(0, 1fr); }
  .lhead { flex-direction: column; align-items: flex-start; }
  .lhead-img { display: none; }
  .lt-sort span { display: none; }
  .lt-view { display: none; }
  .pdp-facts { grid-template-columns: 1fr 1fr; }
  .buybox { padding: 16px; }
  .price-big .price-val { font-size: 28px; }
  .grid2 { grid-template-columns: 1fr; }
  .grid2 .span2 { grid-column: auto; }
  .card, .cta-card { padding: 20px; }
  .procure { padding: 20px; }
  .ftr-top { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
  .ftr-bottom .wrap { flex-direction: column; }
  .auth-wrap { padding-top: 16px; }
  .auth-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .topbar, .hdr, .ftr, .pdp-tabs, .buy, .pdp-subacts, .pcard-tools, .toast, .announce, .crumbs, #assistant { display: none !important; }
  body { font-size: 12pt; }
  .pdp-top { grid-template-columns: 1fr 1.4fr; }
  .pdp-gallery { position: static; }
}