/* ==========================================================================
   BARFUSS.ZONE · CI 2026 (b) · colour + gold-line layer on the ORIGINAL layout
   Schwarz #0C0B09 (dominant) · Hellelfenbein #E6D2B5 (Text) · Braun #AF8050
   Gold #D4AF37 only for borders, frames & lines (subtle shine) · Rot #BE1622 tiny accent
   Loaded after style.css. Layout, hero structure, texts, photos & logos untouched.
   ========================================================================== */
:root {
    --bg-color: #0C0B09; --bg-secondary: #100E0B; --card-bg: #14110D; --header-bg: rgba(12, 11, 9, .94);
    --text-color: #E6D2B5; --text-muted: #B9A78E; --text-dim: #AF8050; --title-italic: #AF8050;
    --accent-color: #D4AF37; --accent-hover: #F3DD8A; --btn-bg: #0C0B09; --btn-text: #E6D2B5;
    --border-color: #3D2E1E; --hero-glow: #9C7A24;
    --gold: #D4AF37; --gold-light: #F3DD8A; --brown: #AF8050; --red: #BE1622;
    --g-stops: #9C7A24, #D4AF37 30%, #F3DD8A 50%, #D4AF37 70%, #8E6E1E;
    --g-grad: linear-gradient(115deg, var(--g-stops));
    --g-line: linear-gradient(90deg, transparent 0%, #9C7A24 14%, #D4AF37 34%, #F3DD8A 50%, #D4AF37 66%, #8E6E1E 86%, transparent 100%);
    --g-line-v: linear-gradient(180deg, #9C7A24, #D4AF37 30%, #F3DD8A 50%, #D4AF37 70%, #8E6E1E);
    --ease: cubic-bezier(.22, .61, .36, 1);
}
html, body { background-color: var(--bg-color); color: var(--text-color); }
::selection { background: rgba(175, 128, 80, .55); color: #FFF8EC; }
img, canvas.bfz-clean-canvas, .image-row-card canvas.bfz-clean-canvas, .image-row-card:hover canvas.bfz-clean-canvas { filter: none !important; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
strong, b { color: var(--text-color); }

/* ---------- Gold frame utility (gradient hairline that follows border-radius) ---------- */
.hero::after,
.image-row-card::after, .zigzag-image::after, .about-portrait-card::after,
.pricing-card.featured::after, .finder-box::after, .finder-result-card::after,
.contact-form-card::after, .voucher-card-frame::after, .gallery-item::after, .wertgutschein-highlight::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 6;
    background: var(--g-grad); background-size: 240% 240%; background-position: 0% 50%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .72; transition: opacity .6s ease;
}
.finder-box, .finder-result-card, .contact-form-card, .pricing-card.featured, .voucher-card-frame, .wertgutschein-highlight { position: relative; }
.hero, .image-row-card, .zigzag-image, .about-portrait-card, .finder-box, .finder-result-card,
.contact-form-card, .voucher-card-frame, .gallery-item, .wertgutschein-highlight { border-color: transparent !important; }
.pricing-card.featured { border-color: transparent !important; box-shadow: 0 18px 45px rgba(0, 0, 0, .55) !important; }
.gallery-item::after { opacity: .22; }
.gallery-item:hover::after, .gallery-item:focus-within::after { opacity: .85; }
.image-row-card:hover::after, .zigzag-image:hover::after { opacity: .95; }
@media (prefers-reduced-motion: no-preference) {
    @keyframes ciSheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
    .hero::after, .pricing-card.featured::after, .finder-box::after, .voucher-card-frame::after, .about-portrait-card::after { animation: ciSheen 16s ease-in-out infinite; }
}

/* ---------- Navigation ---------- */
.site-nav { background: var(--header-bg); border-bottom: 0; }
.site-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--g-line); opacity: .55; pointer-events: none; }
.site-nav.scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .7); }
.nav-links a { color: var(--text-color); }
.nav-links a:hover, .nav-links a.active { color: #F5E8D2; }
.nav-links a.active::after { height: 1px; background: var(--g-line); bottom: -4px; }
.nav-links > a.active::before, .nav-links > .dropdown > a.active::before {
    content: ""; position: absolute; left: 50%; bottom: -10px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--red);
}
.dropdown-content { background-color: rgba(12, 11, 9, .98); border: 1px solid rgba(212, 175, 55, .32); box-shadow: 0 18px 40px rgba(0, 0, 0, .85); }
.dropdown-content a:hover, .dropdown-content a.active { background-color: rgba(212, 175, 55, .05); color: #F5E8D2 !important; border-left-color: var(--gold); }
.nav-cta-btn {
    background: transparent !important; color: var(--text-color) !important;
    border: 1px solid rgba(212, 175, 55, .85) !important; box-shadow: none !important;
}
.nav-cta-btn:hover { background: rgba(212, 175, 55, .08) !important; border-color: var(--gold-light) !important; color: #F5E8D2 !important; box-shadow: none !important; }
.menu-toggle { border-color: rgba(212, 175, 55, .55); color: var(--text-color); }
@media (max-width: 980px) {
    .nav-links { background: rgba(12, 11, 9, .98); border-bottom: 1px solid rgba(212, 175, 55, .35); }
    .nav-links > a.active::before, .nav-links > .dropdown > a.active::before { display: none; }
}

/* ---------- Hero (original wide floating hero with overlays) ---------- */
.hero { background-color: #0C0B09; border: 1px solid transparent; box-shadow: 0 25px 60px rgba(0, 0, 0, .9); }
.hero::after { z-index: 7; opacity: .8; }
.hero-vignette {
    background:
        radial-gradient(circle at 50% 34%, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .34) 70%, rgba(0, 0, 0, .68) 100%),
        linear-gradient(180deg, rgba(12, 11, 9, .08) 0%, rgba(12, 11, 9, .14) 44%, rgba(12, 11, 9, .78) 78%, rgba(12, 11, 9, .94) 100%);
}
.hero-eyebrow { color: var(--text-muted); }
.logo-text { color: var(--text-color); }
.hero-subtitle { color: var(--text-color); }
.hero-credit-badge { color: rgba(230, 210, 181, .78); background: rgba(12, 11, 9, .55); border: 1px solid rgba(212, 175, 55, .38); z-index: 8; }
.hero-credit-badge:hover { color: #F5E8D2; border-color: var(--gold); background: rgba(12, 11, 9, .82); }
.hero-content::before {
    content: ""; display: block; width: clamp(56px, 7vw, 96px); height: 1px; margin: 0 auto clamp(.3rem, 1vh, .6rem);
    background: var(--g-line); opacity: .9;
}

/* ---------- Buttons: gold outline on black, ivory text ---------- */
.btn, .btn-primary, .btn-outline, .btn-secondary {
    position: relative; overflow: hidden; isolation: isolate;
    background: rgba(12, 11, 9, .62) !important; background-color: rgba(12, 11, 9, .62) !important;
    color: var(--text-color) !important;
    border: 1px solid rgba(212, 175, 55, .9) !important; box-shadow: none !important;
}
.btn-outline, .btn-secondary { border-color: rgba(175, 128, 80, .6) !important; }
.btn::before, .btn-primary::before, .btn-outline::before, .btn-secondary::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, .10) 40%, rgba(243, 221, 138, .18) 50%, rgba(212, 175, 55, .10) 60%, rgba(212, 175, 55, 0) 100%);
    transform: translateX(-101%); transition: transform .9s var(--ease);
}
.btn:hover, .btn-primary:hover, .btn-outline:hover, .btn-secondary:hover {
    background-color: rgba(212, 175, 55, .07) !important; border-color: var(--gold-light) !important; color: #F5E8D2 !important; box-shadow: none !important;
}
.btn:hover::before, .btn-primary:hover::before, .btn-outline:hover::before, .btn-secondary:hover::before { transform: translateX(101%); }
.btn-outline:hover, .btn-secondary:hover { border-color: var(--gold) !important; }

/* ---------- Sections, labels, dividers ---------- */
.section-secondary { background-color: var(--bg-secondary); border-top: 0; border-bottom: 0; position: relative; }
.section-secondary::before, .section-secondary::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--g-line); opacity: .5; pointer-events: none;
}
.section-secondary::before { top: 0; } .section-secondary::after { bottom: 0; }
.section-header::after {
    content: ""; display: block; width: 72px; height: 1px; margin: 1.1rem auto 0; background: var(--g-line); opacity: .85;
}
.section-header[style*="text-align:left"]::after, .section-header[style*="text-align: left"]::after { margin-left: 0; }
.eyebrow, .offer-card-eyebrow, .pricing-tier, .gallery-tag, .zigzag-step, .step-num, .contact-detail-list li strong { color: var(--brown) !important; }
.section-title { color: var(--text-color); }
.section-subtitle, .zigzag-content p, .offer-card p, .pricing-desc, .review-text, .faq-answer, .finder-rec-desc, .gallery-sub { color: var(--text-muted); }
.feature-list li::before { color: var(--gold); }
.offer-card-link, .image-row-caption a { color: var(--text-color); border-bottom: 1px solid rgba(212, 175, 55, .55); }
.offer-card-link:hover, .image-row-caption a:hover { color: #F5E8D2; border-bottom-color: var(--gold-light); }
.gallery-title, .finder-opt-btn strong { color: var(--text-color); }
.gallery-model-credit { color: var(--text-muted); }
.gallery-model-credit a { color: var(--text-color); border-bottom: 1px dotted rgba(212, 175, 55, .8); }
.gallery-model-credit a:hover { color: #F5E8D2; border-bottom-color: var(--gold-light); }
.gallery-overlay { background: linear-gradient(to top, rgba(12, 11, 9, .94) 0%, rgba(12, 11, 9, .6) 58%, transparent 100%); }
.image-row-caption { background: linear-gradient(to top, rgba(12, 11, 9, .9) 0%, rgba(12, 11, 9, .45) 60%, transparent 100%); }

/* ---------- Cards ---------- */
.offer-card, .pricing-card, .review-card, .contact-info-card, .image-row-card, .gallery-item { background: var(--card-bg); }
.offer-card, .pricing-card, .review-card, .contact-info-card { border-color: var(--border-color); }
.offer-card:hover, .pricing-card:hover { border-color: rgba(212, 175, 55, .75); box-shadow: 0 18px 40px rgba(0, 0, 0, .6); }
.pricing-price, .finder-rec-price { color: var(--text-color) !important; }
.review-stars { color: var(--gold); letter-spacing: 2px; }
.review-author { color: var(--text-color); }
.quote-box { border-left: 1px solid transparent; border-image: var(--g-line-v) 1; background: rgba(230, 210, 181, .03); color: var(--text-color); }
.faq-item { border-bottom: 1px solid rgba(175, 128, 80, .28); }
.faq-question:hover { color: #F5E8D2; }
.faq-icon { color: var(--gold); }

/* ---------- Gallery filters & finder: no fills ---------- */
.filter-btn { background: transparent; color: var(--text-muted); border: 1px solid rgba(175, 128, 80, .4); }
.filter-btn:hover, .filter-btn.active { background: rgba(212, 175, 55, .06) !important; color: var(--text-color) !important; border-color: var(--gold) !important; box-shadow: none !important; }
.finder-box { background: var(--card-bg); }
.finder-step-pill { background: transparent; color: var(--text-dim); border-color: rgba(175, 128, 80, .35); }
.finder-step-pill.active { background: transparent !important; color: var(--text-color) !important; border-color: var(--gold) !important; }
.finder-opt-btn { background: rgba(230, 210, 181, .02); border-color: rgba(175, 128, 80, .35); color: var(--text-color); }
.finder-opt-btn:hover, .finder-opt-btn.selected { border-color: var(--gold); background: rgba(212, 175, 55, .06); }
.finder-result-card { background: rgba(0, 0, 0, .35); }
.finder-rec-badge { background: transparent !important; color: var(--text-color) !important; border: 1px solid rgba(212, 175, 55, .8); }
.finder-rec-badge::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--red); margin-right: .5em; vertical-align: middle; }

/* ---------- Forms, footer, lightbox ---------- */
.form-group label { color: var(--text-muted); }
.form-control { background: #100E0B; border-color: rgba(175, 128, 80, .35); color: var(--text-color); }
.form-control:focus { border-color: var(--gold); }
.site-footer { background: #080706; border-top: 0; position: relative; color: var(--text-muted); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--g-line); opacity: .6; }
.footer-col h4 { color: var(--text-color); }
.footer-links a:hover { color: #F5E8D2; }
.footer-bottom { border-top: 1px solid rgba(175, 128, 80, .2); color: var(--text-dim); }
.lightbox-modal { background: rgba(8, 7, 6, .96); }
.lightbox-inner img, .lightbox-inner canvas { border: 1px solid rgba(212, 175, 55, .55); }
.lightbox-close { background: rgba(12, 11, 9, .7); border: 1px solid rgba(212, 175, 55, .6); color: var(--text-color); }

/* ---------- Gutscheine page (inline <style> overrides) ---------- */
.voucher-card-frame { background: #100E0B !important; box-shadow: 0 28px 65px rgba(0, 0, 0, .85), 0 0 36px rgba(212, 175, 55, .08) !important; }
.voucher-card-caption { background: #0C0B09 !important; border-top: 1px solid rgba(212, 175, 55, .35) !important; color: var(--brown) !important; gap: .75rem 1.25rem; flex-wrap: wrap; }
.voucher-card-caption span:last-child { color: var(--text-muted); }
@media (max-width: 640px) {
    .voucher-showcase-grid { grid-template-columns: 1fr !important; }
    .voucher-card-caption {
        flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important;
        gap: .4rem !important; padding: 1.05rem 1.15rem 1.15rem !important;
        font-size: .72rem !important; letter-spacing: 1.1px !important; line-height: 1.55 !important;
    }
}
.delivery-step-card { border-top: 1px solid transparent !important; border-image: none; position: relative; }
.delivery-step-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--g-line); border-radius: 10px 10px 0 0; }
.gold-accent-badge { background: transparent !important; color: var(--brown) !important; border-color: rgba(212, 175, 55, .75) !important; }
.wertgutschein-highlight, [style*="rgba(212, 175, 55, 0.14)"] {
    background: linear-gradient(135deg, rgba(212, 175, 55, .05) 0%, rgba(12, 11, 9, .96) 100%) !important;
}

/* ==========================================================================
   Motion: floating + parallax (subtle). JS adds .ci-motion only if allowed.
   ========================================================================== */
html.ci-js.ci-motion [data-ci-reveal] {
    opacity: 0; translate: 0 26px;
    transition: opacity 1.1s var(--ease), translate 1.3s var(--ease);
    transition-delay: var(--ci-delay, 0s);
}
html.ci-js.ci-motion [data-ci-reveal].is-in { opacity: 1; translate: 0 0; }
html.ci-motion .hero-bg-stage, html.ci-motion .hero-bg-ambient { will-change: translate; }
html.ci-motion [data-ci-par] canvas.bfz-clean-canvas, html.ci-motion [data-ci-par] > img { scale: 1.08; translate: 0 var(--ci-py, 0px); will-change: translate; }
@media (prefers-reduced-motion: no-preference) {
    @keyframes ciFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
    @keyframes ciFloatSm { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
    html.ci-motion .hero-sub-logo img { animation: ciFloat 7.5s ease-in-out infinite; }
    html.ci-motion .hero-credit-badge { animation: ciFloatSm 9s ease-in-out infinite; animation-delay: -3s; }
    html.ci-motion .pricing-card.featured, html.ci-motion .voucher-card-frame.ci-float { animation: ciFloatSm 10s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
    html.ci-js [data-ci-reveal] { opacity: 1 !important; translate: none !important; }
    .hero::after, .hero-sub-logo img, .hero-credit-badge { animation: none !important; }
}
.voucher-home-banner { border: 1px solid rgba(212, 175, 55, .6) !important; }
/* Model credit sits in the hero's bottom-right corner (as the original base rule intended) instead of overlapping the buttons */
.hero > .hero-credit-badge { position: absolute !important; right: 18px; bottom: 14px; }
/* Mobile: finder step pills overflowed the box (pre-existing) – compact them */
@media (max-width: 640px) {
  .finder-steps-bar { gap: .35rem; flex-wrap: wrap; }
  .finder-step-pill { padding: .35rem .6rem; font-size: .6rem; letter-spacing: .7px; white-space: nowrap; }
}