/* =========================================================
   FESTHELDEN — KATALOG · atmosphärisch
========================================================= */

/* ---------- NAV (geteilt mit Index-Look) ---------- */
.nav{ position: fixed; top: 0; left: 0; right: 0; z-index: 90; border-bottom: 1px solid transparent; transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s }
.nav.scrolled{ background: rgba(255,255,255,0.90); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom-color: var(--line); box-shadow: var(--shadow-sm) }
.nav-inner{ display: flex; align-items: center; justify-content: space-between; height: 74px }
.nav-brand{ display: inline-flex; align-items: baseline; gap: 10px }
.nav-mark{ font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--dark); transition: color .35s var(--ease) }
.nav-tag{ font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); padding: 4px 9px; border: 1px solid var(--line-strong); border-radius: 99px; transition: color .35s, border-color .35s }
.nav-links{ display: flex; align-items: center; gap: 28px }
.nav-links > a:not(.btn){ font-size: 14px; font-weight: 600; color: var(--ink-700); position: relative; transition: color .2s }
.nav-links > a:not(.btn)::after{ content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--gold); transition: width .3s var(--ease) }
.nav-links > a:not(.btn):hover{ color: var(--ink-900) }
.nav-links > a:not(.btn):hover::after{ width: 100% }
.nav-cta{ padding: 11px 20px; font-size: 13px }
.nav.over-dark .nav-mark{ color: #fff }
.nav.over-dark .nav-tag{ color: var(--gold-bright); border-color: rgba(255,255,255,0.30) }
.nav.over-dark .nav-links > a:not(.btn){ color: rgba(255,255,255,0.86) }
.nav.over-dark .nav-links > a:not(.btn):hover{ color: #fff }
.nav.over-dark .nav-burger span{ background: #fff }
.nav-burger{ display: none; flex-direction: column; gap: 5px; width: 28px; padding: 4px }
.nav-burger span{ height: 2px; width: 100%; background: var(--ink-900); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s, background .3s }
.nav-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg) }
.nav-burger.open span:nth-child(2){ opacity: 0 }
.nav-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg) }

/* ---------- CAT HERO (Foto, dunkel) ---------- */
.cat-hero{ position: relative; color: #fff; padding: 140px 0 56px; overflow: hidden }
.cat-hero-inner{ position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(28px, 4vw, 56px); align-items: end }
.cat-hero-meta{ margin-bottom: 18px }
.breadcrumb{ display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600 }
.breadcrumb a{ color: var(--gold-bright) }
.breadcrumb a:hover{ color: #fff }
.breadcrumb .sep{ color: rgba(255,255,255,0.4) }
.breadcrumb .current{ color: rgba(255,255,255,0.7) }
.cat-hero h1{ font-family: var(--font-display); font-weight: 400; font-size: clamp(46px, 6.5vw, 92px); line-height: 1.0; color: #fff; padding-bottom: .06em; text-shadow: 0 4px 40px rgba(0,0,0,0.35) }
.cat-hero h1 em{ font-style: normal; color: var(--gold-bright) }
.cat-hero p{ margin-top: 16px; font-size: 16px; color: rgba(255,255,255,0.82); max-width: 54ch; line-height: 1.6 }
.cat-hero-actions{ display: flex; flex-direction: column; gap: 18px; align-items: flex-end }
.cat-hero-stats{ display: flex; gap: 12px }
.stat-pill{ background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--radius); padding: 14px 20px; text-align: center; min-width: 84px }
.stat-pill .num{ font-size: 26px; font-weight: 800; color: #fff; line-height: 1 }
.stat-pill .lbl{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-bright); margin-top: 5px; font-weight: 600 }

/* ---------- FILTER BAR (sticky, hell) ---------- */
.filter-bar{ position: sticky; top: 0; z-index: 80; background: rgba(245,241,232,0.92); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
.filter-inner{ display: flex; align-items: center; gap: 18px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap }
.search-wrap{ position: relative; flex: 0 0 280px; max-width: 100% }
.search-wrap svg{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-400); pointer-events: none }
.search-input{ width: 100%; padding: 12px 14px 12px 42px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); font-size: 14px; background: var(--white); color: var(--ink-900); transition: border-color .2s, box-shadow .2s }
.search-input::placeholder{ color: var(--ink-400) }
.search-input:focus{ outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft) }
.cat-tabs{ display: flex; gap: 8px; flex-wrap: wrap; flex: 1 }
.cat-tab{ display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--ink-700); background: var(--white); border: 1px solid var(--line); transition: all .2s var(--ease) }
.cat-tab:hover{ border-color: var(--gold-soft); color: var(--gold-deep) }
.cat-tab.active{ background: var(--gold); color: #fff; border-color: var(--gold) }
.cat-tab .count{ font-size: 11px; opacity: .7; font-weight: 700 }
.cat-tab.active .count{ opacity: .9 }

/* ---------- MAIN ---------- */
#catalog-main{ padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(56px, 7vw, 96px) }
.loading{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 100px 20px }
.loading-spinner{ width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--gold-soft); border-top-color: var(--gold); animation: spin 0.9s linear infinite }
@keyframes spin{ to{ transform: rotate(360deg) } }
.loading-text{ font-size: 13px; font-weight: 600; color: var(--ink-500); letter-spacing: 0.04em }

/* ---------- CATEGORY SECTIONS ---------- */
.cat-section{ margin-top: clamp(48px, 6vw, 80px); scroll-margin-top: 150px }
.cat-section:first-child{ margin-top: 8px }
.cat-section.hidden{ display: none }
.cat-section-head{ display: flex; align-items: center; gap: 18px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line) }
.cat-section-icon{ width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; background: var(--gold-soft); color: var(--gold-deep); display: grid; place-items: center }
.cat-section-icon svg{ width: 30px; height: 30px }
.cat-section-title{ flex: 1 }
.cat-section-title .label{ font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep) }
.cat-section-title h2{ font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; color: var(--ink-900); margin-top: 2px }
.cat-section-count{ font-size: 13px; color: var(--ink-500); text-align: right }
.cat-section-count strong{ display: block; font-size: 24px; color: var(--gold-deep); font-weight: 800 }

/* ---------- ITEM GRID & CARDS ----------
   Raster: 3 Spalten. Highlights = 2/3 (span 2), normale Artikel = 1/3 (span 1).
   grid-auto-flow: dense → füllt Lücken, lückenloses Layout. */
/* Highlights = 2/3 (span 2), Standard = 1/3. grid-auto-flow: dense → Standards
   schieben sich um die Highlights, sodass möglichst wenig Lücken bleiben.
   Ein einzelnes Highlight bleibt 2/3 (ggf. mit freiem 1/3 daneben). */
.item-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; grid-auto-flow: row dense; align-items: stretch }
.item-card{ position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s; overflow: hidden }
.item-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold-soft) }

/* Reveal beim Scrollen */
.item-card.reveal-up{ opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--rv-delay, 0ms) }
.item-card.reveal-up.in{ opacity: 1; transform: none }

/* Highlights: 2/3 Breite, dunkles Olive, Bild links + Inhalt rechts */
.item-card.featured{ grid-column: span 2; flex-direction: row; align-items: stretch; gap: 28px; padding: 0; color: #fff; border-color: transparent; background: var(--gradient); }
.item-card.featured .item-content{ display: flex; flex-direction: column; flex: 1; padding: 30px }
.item-card.featured .item-media{ flex: 0 0 42%; min-height: 240px; margin: 0; border-radius: 0 }
.item-card.featured .item-name{ color: #fff; font-size: 26px }
.item-card.featured .item-spec{ color: rgba(255,255,255,0.78) }
.item-card.featured .item-stock{ background: rgba(255,255,255,0.12); color: #fff }


.item-media{ position: relative; aspect-ratio: 16/10; margin: -22px -22px 18px; border-radius: 0; background: var(--cream); overflow: hidden }
.item-media img{ width: 100%; height: 100%; object-fit: cover }
.item-media-fallback{ width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--cream), var(--cream-deep)) }
.item-media-fallback svg{ width: 56px; height: 56px; color: var(--gold); opacity: .55 }
.item-card.featured .item-media-fallback svg{ color: var(--gold-bright); opacity: .7 }

.item-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px }
.item-stock{ display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 99px; background: var(--ink-100); color: var(--ink-700) }
.item-stock::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-400) }
.item-stock.unlimited{ background: var(--gold-soft); color: var(--gold-deep) }
.item-stock.unlimited::before{ background: var(--gold) }
.item-stock:not(.unlimited):not(.partial):not(.unavailable){ background: var(--green-soft); color: var(--green) }
.item-stock:not(.unlimited):not(.partial):not(.unavailable)::before{ background: var(--green) }
.item-stock.partial{ background: var(--orange-soft); color: var(--orange) }
.item-stock.partial::before{ background: var(--orange) }
.item-stock.unavailable{ background: var(--red-soft); color: var(--red) }
.item-stock.unavailable::before{ background: var(--red) }

.cart-add{ width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--gold-soft); color: var(--gold-deep); display: grid; place-items: center; transition: all .2s var(--ease) }
.cart-add svg{ width: 18px; height: 18px }
.cart-add:hover{ background: var(--gold); color: #fff; transform: scale(1.08) }
.cart-add.in-cart{ background: var(--gold); color: #fff }
.cart-add.pulse{ animation: cartPulse .4s var(--ease) }
@keyframes cartPulse{ 0%{ transform: scale(1) } 50%{ transform: scale(1.25) } 100%{ transform: scale(1) } }
.item-card.featured .cart-add{ background: rgba(255,255,255,0.16); color: #fff }
.item-card.featured .cart-add:hover{ background: var(--gold) }

.item-name{ font-size: 17px; font-weight: 700; color: var(--ink-900); line-height: 1.25; margin-bottom: 6px }
.item-spec{ font-size: 13px; color: var(--ink-700); line-height: 1.5; flex: 1 }
.item-bruch{ font-size: 12px; color: var(--ink-700); margin-top: 8px }
.item-bruch strong{ color: var(--red) }
.item-card.featured .item-bruch{ color: rgba(255,255,255,0.72) }

.item-pricing{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px }
.price-block{ background: var(--cream); border-radius: var(--radius); padding: 12px 14px }
.price-block.accent{ background: var(--gold-soft) }
.price-block .lbl{ display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); font-weight: 700; margin-bottom: 3px }
.price-block.accent .lbl{ color: var(--gold-deep) }
.price-block .val{ font-size: 16px; font-weight: 800; color: var(--ink-900) }
.price-block.accent .val{ color: var(--gold-deep) }
.item-card.featured .price-block{ background: rgba(255,255,255,0.1) }
.item-card.featured .price-block.accent{ background: rgba(208,159,79,0.22) }
.item-card.featured .price-block .lbl{ color: rgba(255,255,255,0.6) }
.item-card.featured .price-block.accent .lbl{ color: var(--gold-bright) }
.item-card.featured .price-block .val{ color: #fff }
.item-card.featured .price-block.accent .val{ color: var(--gold-bright) }

.item-pricing-single{ margin-top: 16px }
.price-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--cream); border-radius: var(--radius); padding: 12px 14px }
.price-row .lbl{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-700); font-weight: 700 }
.price-row .val{ font-size: 16px; font-weight: 800; color: var(--gold-deep) }
.item-card.featured .price-row{ background: rgba(255,255,255,0.1) }
.item-card.featured .price-row .lbl{ color: rgba(255,255,255,0.7) }
.item-card.featured .price-row .val{ color: var(--gold-bright) }

/* ---------- NO RESULTS ---------- */
.no-results{ text-align: center; padding: 80px 20px }
.no-results h3{ font-family: var(--font-display); font-weight: 400; font-size: 34px; color: var(--ink-900); margin-bottom: 10px }
.no-results p{ color: var(--ink-500); margin-bottom: 22px }

/* ---------- CTA SECTION (dunkel, Foto) ---------- */
.cat-cta{ margin-top: clamp(56px, 7vw, 96px); border-radius: var(--radius-xl); overflow: hidden; position: relative; background: var(--gradient) }
.cat-cta-inner{ position: relative; z-index: 1; text-align: center; padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 56px); max-width: 660px; margin: 0 auto; color: #fff }
.cat-cta-inner .eyebrow{ margin-bottom: 18px; justify-content: center }
.cat-cta-inner h2{ font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.5vw, 56px); line-height: 1.02; color: #fff }
.cat-cta-inner h2 em{ font-style: normal; color: var(--gold-bright) }
.cat-cta-inner p{ margin-top: 16px; color: rgba(255,255,255,0.82); font-size: 16px; line-height: 1.7 }
.cat-cta-buttons{ margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap }

/* ---------- CART FAB ---------- */
.cart-fab{ position: fixed; right: 22px; bottom: 22px; z-index: 88; width: 60px; height: 60px; border-radius: 50%; background: var(--gold); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-gold); transform: scale(0) translateY(20px); opacity: 0; transition: transform .4s var(--ease), opacity .3s, background .2s }
.cart-fab.visible{ transform: scale(1) translateY(0); opacity: 1 }
.cart-fab:hover{ background: var(--gold-deep) }
.cart-fab svg{ width: 25px; height: 25px }
.cart-fab-count{ position: absolute; top: -4px; right: -4px; min-width: 23px; height: 23px; padding: 0 6px; border-radius: 99px; background: var(--dark); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--white) }

/* ---------- CART DRAWER ---------- */
.cart-backdrop{ position: fixed; inset: 0; z-index: 96; background: rgba(26,27,14,0.55); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s }
.cart-backdrop.open{ opacity: 1; visibility: visible }
.cart-drawer{ position: fixed; top: 0; right: 0; bottom: 0; z-index: 97; width: min(440px, 92vw); background: var(--white); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .4s var(--ease); box-shadow: -20px 0 60px -20px rgba(26,27,14,0.4) }
.cart-drawer.open{ transform: translateX(0) }
.cart-drawer-head{ display: flex; align-items: flex-start; justify-content: space-between; padding: 26px 26px 20px; border-bottom: 1px solid var(--line) }
.cart-drawer-head .meta{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--gold-deep); font-weight: 700 }
.cart-drawer-head h3{ font-family: var(--font-display); font-weight: 400; font-size: 32px; color: var(--ink-900); margin-top: 2px }
.cart-close{ width: 38px; height: 38px; border-radius: 50%; background: var(--cream); color: var(--ink-700); display: grid; place-items: center; transition: all .2s }
.cart-close:hover{ background: var(--gold-soft); color: var(--gold-deep) }
.cart-close svg{ width: 18px; height: 18px }
.cart-drawer-body{ flex: 1; overflow-y: auto; padding: 20px 26px }

.cart-empty{ text-align: center; padding: 60px 16px; color: var(--ink-500) }
.cart-empty svg{ width: 54px; height: 54px; color: var(--ink-300); margin: 0 auto 18px }
.cart-empty h4{ font-size: 17px; color: var(--ink-900); margin-bottom: 8px }
.cart-empty p{ font-size: 13.5px; line-height: 1.6 }

.cart-item{ display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line) }
.cart-item-info{ flex: 1 }
.cart-item-name{ font-size: 14.5px; font-weight: 700; color: var(--ink-900); margin-bottom: 3px }
.cart-item-price{ font-size: 12.5px; color: var(--ink-500); margin-bottom: 10px }
.cart-item-price strong{ color: var(--gold-deep) }
.cart-item-controls{ display: flex; align-items: center; justify-content: space-between; gap: 10px }
.cart-qty{ display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 99px; overflow: hidden }
.cart-qty button{ width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink-700); font-size: 17px; font-weight: 600; transition: background .15s }
.cart-qty button:hover{ background: var(--gold-soft); color: var(--gold-deep) }
.cart-qty input{ width: 40px; text-align: center; border: none; font-size: 14px; font-weight: 700; color: var(--ink-900); background: transparent; -moz-appearance: textfield }
.cart-qty input::-webkit-outer-spin-button, .cart-qty input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0 }
.cart-item-subtotal{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-400); font-weight: 600; text-align: right; line-height: 1.3 }
.cart-item-subtotal strong{ display: block; font-size: 15px; color: var(--ink-900); text-transform: none; letter-spacing: 0 }
.cart-item-remove{ width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; color: var(--ink-400); display: grid; place-items: center; transition: all .2s }
.cart-item-remove:hover{ background: var(--red-soft); color: var(--red) }
.cart-item-remove svg{ width: 16px; height: 16px }

.cart-drawer-foot{ border-top: 1px solid var(--line); padding: 20px 26px 24px; background: var(--cream) }
.cart-summary{ margin-bottom: 16px }
.cart-summary-row{ display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-600, var(--ink-500)) }
.cart-summary-row.count-row{ margin-bottom: 12px }
.cart-summary-row .val.small{ font-weight: 800; color: var(--ink-900) }
.cart-summary-row.bruch-row{ margin-top: 10px; color: var(--ink-500) }
.cart-summary-row.note-row{ margin-top: 8px; font-size: 12px; color: var(--ink-400) }
.cart-totals{ display: flex; align-items: stretch; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px }
.cart-total-block{ flex: 1 }
.cart-total-lbl{ display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-400); font-weight: 700 }
.cart-total-val{ font-size: 20px; font-weight: 800; color: var(--gold-deep) }
.cart-total-divider{ width: 1px; background: var(--line) }
.cart-note{ font-size: 11.5px; color: var(--ink-400); line-height: 1.5; margin: 14px 0 }
.cart-submit{ width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--gold); color: #fff; font-weight: 700; font-size: 15px; padding: 16px; border-radius: var(--radius); transition: background .2s, transform .2s }
.cart-submit svg{ width: 18px; height: 18px }
.cart-submit:hover{ background: var(--gold-deep); transform: translateY(-1px) }
.cart-trust{ display: flex; gap: 10px; margin-top: 16px; font-size: 12px; color: var(--ink-500); line-height: 1.5 }
.cart-trust svg{ width: 18px; height: 18px; color: var(--green); flex-shrink: 0 }
.cart-trust strong{ color: var(--ink-900) }
.cart-clear{ width: 100%; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-400); padding: 8px; transition: color .2s }
.cart-clear:hover{ color: var(--red) }

/* ---------- CART TOAST ---------- */
.cart-toast{ position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(140%); z-index: 99; display: inline-flex; align-items: center; gap: 10px; background: var(--ink-900); color: #fff; padding: 14px 20px; border-radius: 99px; box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 600; transition: transform .45s var(--ease); max-width: calc(100vw - 32px) }
.cart-toast.show{ transform: translateX(-50%) translateY(0) }
.cart-toast svg{ width: 18px; height: 18px; color: var(--gold-bright); flex-shrink: 0 }
.cart-toast.warning svg{ color: var(--orange) }

/* ---------- FOOTER ---------- */
.footer{ position: relative; background: var(--cream); color: var(--ink-700); padding: clamp(44px, 6vw, 64px) 0 28px; overflow: hidden; border-top: 1px solid var(--cream-deep) }
.footer-inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid var(--line) }
.footer-mark{ font-family: var(--font-display); font-size: 36px; color: var(--dark); line-height: 1 }
.footer-brand{ display: flex; flex-direction: column; gap: 8px }
.footer-info{ font-size: 13px; line-height: 1.6; color: var(--ink-500) }
.footer-info strong{ color: var(--ink-900); display: block }
.footer-bottom{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding-top: 22px; font-size: 13px; color: var(--ink-400) }
.footer-bottom .credit{ color: var(--gold-deep) }

/* =========================================================
   PDF / DRUCK — gebrandetes Katalog-Dokument (Tabellen-Liste)
========================================================= */
#print-doc{ display: none }

@media print{
  @page{ size: A4; margin: 14mm 12mm 16mm; }
  body{ background: #fff !important; }
  body::after{ display: none !important; }

  /* Website ausblenden, nur das Druck-Dokument zeigen */
  .nav, .filter-bar, .cat-hero, #catalog-main, .footer,
  .cart-fab, .cart-drawer, .cart-backdrop, .cart-toast, .quick-contact, .loader{ display: none !important; }
  #print-doc{ display: block !important; color: #2a2a1f; font-family: "Montserrat", system-ui, sans-serif; }

  /* Kopf */
  .pd-header{ display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 2px solid #ba8738; margin-bottom: 14px; }
  .pd-logo{ height: 62px; width: auto; }
  .pd-head-right{ text-align: right; }
  .pd-title{ font-size: 17px; font-weight: 800; color: #444526; letter-spacing: -0.01em; }
  .pd-contact{ font-size: 10px; color: #6a6a5a; margin-top: 4px; }
  .pd-intro{ font-size: 9.5px; line-height: 1.55; color: #4a4a3a; margin-bottom: 16px; }

  /* Kategorie + Tabelle */
  .pd-cat{ margin-bottom: 16px; }
  .pd-cat-title{ font-size: 12.5px; font-weight: 800; color: #444526; text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 5px; border-bottom: 1px solid #d8d2c2; margin-bottom: 0; break-after: avoid; display: flex; align-items: baseline; gap: 8px; }
  .pd-cat-num{ color: #ba8738; }
  .pd-cat-count{ margin-left: auto; font-size: 9px; font-weight: 600; color: #9a9a8a; text-transform: none; letter-spacing: 0; }

  .pd-table{ width: 100%; border-collapse: collapse; font-size: 10px; }
  .pd-table thead{ display: table-header-group; }
  .pd-table th{ text-align: left; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #8e6627; background: #f7eedc; padding: 5px 7px; border-bottom: 1px solid #e2ddcf; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pd-table td{ padding: 5px 7px; border-bottom: 1px solid #ece7da; vertical-align: top; }
  .pd-table tr{ break-inside: avoid; }
  .pd-name{ font-weight: 700; color: #2a2a1f; width: 25%; }
  .pd-desc{ color: #5a5a48; width: 41%; }
  .pd-bruch{ display: block; font-size: 8px; color: #9a9a8a; margin-top: 1px; }
  .pd-stock{ width: 11%; color: #4a4a3a; white-space: nowrap; }
  th.pd-price, td.pd-price{ text-align: right; white-space: nowrap; width: 11.5%; }
  td.pd-price{ font-weight: 700; color: #8e6627; }
  .pd-star{ color: #ba8738; }
  tr.pd-feat td{ background: #faf6ec; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tr.pd-feat .pd-name{ color: #444526; }

  .pd-footer{ margin-top: 16px; padding-top: 8px; border-top: 1px solid #d8d2c2; font-size: 9px; color: #8a8a76; text-align: center; }
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 900px){
  .cat-hero-inner{ grid-template-columns: 1fr; gap: 28px; align-items: start }
  .cat-hero-actions{ align-items: flex-start }
  .item-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-flow: row dense }
  .item-card.featured{ grid-column: span 2; flex-direction: column }
  .item-card.featured .item-media{ flex: none; width: 100%; min-height: 200px }
  .item-card.featured .item-content{ padding: 24px }
}
@media (max-width: 860px){
  .nav-burger{ display: flex }
  .nav-links{ position: fixed; top: 74px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; background: rgba(255,255,255,0.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 16px var(--pad-x) 26px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .3s var(--ease), opacity .3s }
  .nav-links.open{ transform: translateY(0); opacity: 1; pointer-events: auto }
  .nav.over-dark .nav-links > a:not(.btn){ color: var(--ink-700) }
  .nav-links > a:not(.btn){ padding: 12px 4px; border-bottom: 1px solid var(--line) }
  .nav-links > a:not(.btn)::after{ display: none }
  .nav-cta{ margin-top: 12px; justify-content: center }
  .cat-section-head{ flex-wrap: wrap }
  .cat-section-count{ text-align: left }
}
@media (max-width: 560px){
  .item-grid{ grid-template-columns: 1fr }
  .item-card.featured{ grid-column: span 1 }
  .cat-hero-stats{ width: 100% }
  .stat-pill{ flex: 1 }
  .footer-inner{ flex-direction: column; align-items: flex-start }
}

/* =========================================================
   LOGO / FOOTER-KONTAKT / REVEAL (Katalog)
========================================================= */
.nav-brand{ align-items: center }
.nav-logo{ height: 50px; width: auto; display: block }
.nav-logo-dark{ display: none }
.nav.scrolled .nav-logo-light{ display: none }
.nav.scrolled .nav-logo-dark{ display: block }
.loader-logo-img{ width: clamp(150px, 32vw, 200px); height: auto; animation: loaderPulse 1.8s ease-in-out infinite; position: relative; z-index: 2 }
.footer-logo{ width: 150px; height: auto }
.footer-contact{ list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 4px }
.footer-contact li{ display: flex; align-items: center; gap: 10px }
.footer-contact svg{ width: 16px; height: 16px; color: var(--gold-deep); flex-shrink: 0 }
.footer-contact a{ font-size: 14px; color: var(--ink-500); transition: color .2s }
.footer-contact a:hover{ color: var(--gold-deep) }
.footer-legal{ display: flex; gap: 22px }
.footer-legal a{ color: var(--ink-400); transition: color .2s }
.footer-legal a:hover{ color: var(--gold-deep) }
@media (max-width: 560px){ .nav-logo{ height: 42px } }