/* /assets/css/theme-red-gold.css — "Crimson Glass" (bold passion red, luxe gold accents, dark glass header) */

/* ========== 1) DESIGN TOKENS ========== */
:root{
  /* Brand reds (crimson) */
  --color-brand-600: #dc2626;   /* red-600 */
  --color-brand-700: #b91c1c;   /* red-700 */
  --color-brand:     var(--color-brand-600);

  /* Accent/Highlights (luxury gold) */
  --color-accent:    #d4af37;   /* classic gold */
  --link:            #d4af37;   /* gold links on dark */
  --link-hover:      #ffffff;   /* white on hover */

  /* States */
  --ok:   #22c55e;
  --warn: #f59e0b;
  --err:  #ef4444;

  /* Base UI (dark default) */
  --bg-page:   #0b0b0d;   /* near-black */
  --text-base: #f5f6f8;   /* soft white */
  --text-muted:#9aa1ad;
  --card-bg:   #121317;
  --card-border:#23252c;

  /* Buttons */
  --btn-primary-bg:        var(--color-brand-600);
  --btn-primary-hover-bg:  var(--color-brand-700);
  --btn-primary-text:      #ffffff;

  --btn-secondary-bg:      transparent;
  --btn-secondary-text:    var(--color-accent);
  --btn-secondary-border:  var(--color-accent);
}

/* ========== 2) GLOBAL INTERACTION ========== */
html, body { background: var(--bg-page); color: var(--text-base); }
a { color: var(--link); }
a:hover { color: var(--link-hover); }

/* Generic button base (covers many Tailwind utility mixes) */
button,
.btn,
a.btn,
a.button,
input[type="submit"]{
  font-weight: 600;
  border-radius: 10px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Primary (RED) */
.btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary{
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text) !important;
  border: 1px solid transparent;
  box-shadow: 0 3px 12px rgba(185,28,28,0.35);
}
.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
input[type="submit"].btn-primary:hover{
  background: var(--btn-primary-hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(185,28,28,0.5);
}

/* Secondary / Outline (GOLD) */
.btn-outline,
button.btn-outline,
a.btn-outline{
  background: transparent;
  color: var(--btn-secondary-text) !important;
  border: 1px solid var(--btn-secondary-border);
}
.btn-outline:hover,
button.btn-outline:hover,
a.btn-outline:hover{
  background: var(--btn-secondary-text);
  color: #0b0b0d !important;
}

/* ========== 3) HERO (Crimson) ========== */
.hero, [data-section="hero"]{
  background: linear-gradient(90deg,
    #1a1b20 0%,
    #7f1d1d 45%,
    #b91c1c 72%,
    #0b0b0d 100%
  );
  color:#fff; position:relative; isolation:isolate;
}
.hero.hero--overlay::before, [data-section="hero"].hero--overlay::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 120% at 50% 30%,
    rgba(0,0,0,.20) 0%,
    rgba(0,0,0,.28) 40%,
    rgba(0,0,0,.36) 100%);
  z-index:-1;
}
.hero h1,.hero h2,[data-section="hero"] h1,[data-section="hero"] h2{ color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.35); }
.hero p,[data-section="hero"] p{ color:#f1f5f9; text-shadow:0 1px 2px rgba(0,0,0,.28); }
.hero a,[data-section="hero"] a{ color:var(--color-accent); text-decoration:underline; text-underline-offset:2px; }
.hero a:hover,[data-section="hero"] a:hover{ color:#fff; }
.hero .btn-primary,[data-section="hero"] .btn-primary{ background:var(--color-accent); color:#0b0b0d; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.hero .btn-primary:hover,[data-section="hero"] .btn-primary:hover{ background:#e0bf49; color:#0b0b0d; }
.hero .btn-outline,[data-section="hero"] .btn-outline{ color:#fff; border-color:#fff; }
.hero .btn-outline:hover,[data-section="hero"] .btn-outline:hover{ background:#fff; color:var(--color-brand-700); }
.hero .container,[data-section="hero"] .container{ padding-top:clamp(2.5rem,6vw,5rem); padding-bottom:clamp(2rem,5vw,4rem); }

/* ========== 4) SALES BADGES ========== */
.badge-warn{
  background: color-mix(in srgb, var(--warn) 18%, #0b0b0d);
  color:#fbbf24; border-color: color-mix(in srgb, var(--warn) 45%, #0b0b0d);
}
.badge-ok{
  background: color-mix(in srgb, var(--ok) 15%, #0b0b0d);
  color:#86efac; border-color: color-mix(in srgb, var(--ok) 45%, #0b0b0d);
}
.alert-warn{ color:#fbbf24; } .alert-ok{ color:#86efac; } .alert-err{ color:#ef4444; }

/* ========== 5) HEADER STYLES ========== */
/* Default (NOT sticky): light header with dark text for readability on white bars */
header:not(.sticky){
  background:#ffffff;
  color:#111 !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
header:not(.sticky) a,
header:not(.sticky) span,
header:not(.sticky) svg{
  color:#111 !important; fill:#111 !important;
}
header:not(.sticky) a:hover{ color: var(--color-brand-600) !important; }

/* Search input in light header */
header:not(.sticky) input[type="search"],
header:not(.sticky) input[type="text"],
header:not(.sticky) .rounded-xl{
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.12);
  color:#111;
}
header:not(.sticky) input::placeholder{ color:#6b7280; }

/* Sticky (Crimson Glass) */
header.sticky{
  background: rgba(185, 28, 28, 0.72) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212,175,55,0.25);
  box-shadow: 0 6px 24px rgba(0,0,0,0.20);
  color:#fff;
}
header.sticky,
header.sticky a,
header.sticky svg,
header.sticky span,
header.sticky .text-slate-900,
header.sticky .text-gray-900,
header.sticky .text-black-700,
header.sticky .font-black{
  color:#fff !important; fill:#fff !important;
}
header.sticky input[type="search"],
header.sticky input[type="text"],
header.sticky .rounded-xl{
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  color:#fff !important;
}
header.sticky input::placeholder{ color:rgba(255,255,255,0.85) !important; }
header.sticky .hover\:bg-white\/50:hover,
header.sticky .hover\:bg-white\/60:hover,
header.sticky .hover\:bg-white\/40:hover{ background-color: rgba(255,255,255,0.16) !important; }
header.sticky #miniCartBadge,
header.sticky #miniCartBadgeMobile{ background: var(--color-accent) !important; color:#0b0b0d !important; }
header.sticky.scrolled{
  background: rgba(124, 10, 10, 0.90) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ========== 6) UTILITY REINFORCEMENTS ========== */
.from-brand   { --tw-gradient-from: var(--color-brand-600) !important; }
.to-brand-700 { --tw-gradient-to:   var(--color-brand-700) !important; }
.border-brand-600\/50{ border-color: color-mix(in srgb, var(--color-brand-600) 50%, transparent) !important; }

.bg-gradient-to-r.from-brand:not(header){
  background: linear-gradient(90deg,#7f1d1d 0%,#b91c1c 60%,#0b0b0d 100%) !important;
  color:#fff !important;
}
.bg-gradient-to-r.from-brand:not(header) h1,
.bg-gradient-to-r.from-brand:not(header) h2,
.bg-gradient-to-r.from-brand:not(header) p{
  color:#fff !important; text-shadow:0 2px 4px rgba(0,0,0,.35);
}
.bg-gradient-to-r.from-brand:not(header) a.btn-primary{
  background:var(--color-accent) !important; color:#0b0b0d !important;
}
.bg-gradient-to-r.from-brand:not(header) a[class*="bg-white"]{
  background:transparent !important; border-color:#fff !important; color:#fff !important;
}

/* ========== 7) OLD UTILITIES → BRAND/ACCENT ========== */
.to-yellow-300, .to-yellow-300\/90, .from-amber-500, .bg-amber-500,
.text-amber-500, .border-amber-500{
  --tw-gradient-to: var(--color-brand-700) !important;
  --tw-gradient-from: var(--color-brand-600) !important;
  background-color: var(--color-accent) !important;
  color: #0b0b0d !important;
  border-color: var(--color-accent) !important;
}

/* ========== 8) CARDS, PANELS, INPUTS (dark default) ========== */
.card, .panel, .box{
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-base) !important;
}
input, select, textarea{
  background:#121317; color:#eef0f4; border:1px solid #2a2d36;
}
input::placeholder, textarea::placeholder{ color:#8a90a0; }

/* Light content blocks (for white sections/boxes on product lists etc.) */
.bg-white, .bg-gray-50, .content--light, .section--light{
  background:#ffffff !important;
  color:#111 !important;
  border-color: rgba(0,0,0,0.08) !important;
}
.bg-white a, .bg-gray-50 a, .content--light a, .section--light a{ color:#0b0b0d; }
.bg-white a:hover, .bg-gray-50 a:hover, .content--light a:hover, .section--light a:hover{ color: var(--color-brand-600); }
.bg-white .btn-primary, .bg-gray-50 .btn-primary, .content--light .btn-primary, .section--light .btn-primary{
  background: var(--color-brand-600); color:#fff !important;
}
.bg-white .btn-outline, .bg-gray-50 .btn-outline, .content--light .btn-outline, .section--light .btn-outline{
  border-color: var(--color-accent); color: var(--color-accent) !important;
}

/* ========== 9) MINI-CART (dark) ========== */
#miniCartDropdown{
  background: #121317 !important;
  border: 1px solid #23252c !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.35) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: #e8eaf0 !important;
}
#miniCartDropdown *, #miniCartDropdown svg{ color: #e8eaf0 !important; fill:  #e8eaf0 !important; }
#miniCartDropdown h3 { color: #ffffff !important; }
#miniCartDropdown .text-gray-500 { color:#a4acba !important; }
#miniCartDropdown .text-gray-900 { color:#eef0f4 !important; }
#miniCartDropdown a { color: var(--color-accent) !important; }
#miniCartDropdown a:hover { color: #ffffff !important; }
header.header--glass #miniCartDropdown,
header.header--glass #miniCartDropdown *{ color: #e8eaf0 !important; fill:  #e8eaf0 !important; }
#miniCartDropdown a.bg-accent{ background: var(--color-accent) !important; color: #0b0b0d !important; }
#miniCartDropdown a.bg-accent:hover{ background: #e0bf49 !important; color: #0b0b0d !important; }

/* ========== 10) FOOTER (dark) ========== */
footer{ background:#0b0b0d; color:#fff; }
footer a{ color: var(--color-accent); }
footer a:hover{ color:#fff; }

/* ========== 11) OVERRIDES: DARK UTILITY BACKGROUNDS ON BUTTONS ========== */
/* Erzwinge Rot + Weiß, wenn dunkle bg-Utilities gesetzt sind */
button[class*="bg-slate-9"],
a.btn[class*="bg-slate-9"],
.btn[class*="bg-slate-9"],
button[class*="bg-gray-9"],
a.btn[class*="bg-gray-9"],
.btn[class*="bg-gray-9"],
button[class*="bg-neutral-9"],
a.btn[class*="bg-neutral-9"],
.btn[class*="bg-neutral-9"]{
  background: var(--color-brand-600) !important;
  color: #fff !important;
  border-color: var(--color-brand-600) !important;
}
button[class*="bg-slate-9"]:hover,
a.btn[class*="bg-slate-9"]:hover,
.btn[class*="bg-slate-9"]:hover,
button[class*="bg-gray-9"]:hover,
a.btn[class*="bg-gray-9"]:hover,
.btn[class*="bg-gray-9"]:hover,
button[class*="bg-neutral-9"]:hover,
a.btn[class*="bg-neutral-9"]:hover,
.btn[class*="bg-neutral-9"]:hover{
  background: var(--color-brand-700) !important;
  border-color: var(--color-brand-700) !important;
}

/* Kontakt-/CTA-Buttons fallback (falls ohne .btn-Klassen) */
a[href*="contact"],
a[href*="support"],
button[id*="support"],
button[name*="support"]{
  background: var(--color-brand-600) !important;
  color:#fff !important;
  border: 1px solid var(--color-brand-600) !important;
  border-radius: 12px;
  padding: .6rem 1rem;
  box-shadow: 0 3px 10px rgba(185,28,28,.35);
}
a[href*="contact"]:hover,
a[href*="support"]:hover,
button[id*="support"]:hover,
button[name*="support"]:hover{
  background: var(--color-brand-700) !important;
}

/* ========== 12) FILTERS / TABS (hell & klar) ========== */
.filters, .filter, .tabs { --pill-border:#e6e8ee; --pill-bg:#fff; --pill-text:#111; }

.filters .btn, .filters button,
.filter .btn, .filter button,
.tabs .btn, .tabs button{
  background: var(--pill-bg) !important;
  color: var(--pill-text) !important;
  border: 1px solid var(--pill-border) !important;
  border-radius: 999px !important;
  padding: 0.45rem 0.9rem;
  font-weight: 500;
  transition: all .2s ease;
  box-shadow: none !important;
}
.filters .btn:hover, .filters button:hover,
.filter .btn:hover, .filter button:hover,
.tabs .btn:hover, .tabs button:hover{
  border-color: var(--color-accent) !important;
  color: var(--color-brand-600) !important;
}

/* Aktiver Filter-Button (legacy + utility) */
.filters .btn.active, .filters button.active,
.filter .btn.active, .filter button.active,
.tabs .btn.active, .tabs button.active{
  background: var(--color-brand-600) !important;
  border-color: var(--color-brand-600) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(185,28,28,.25);
}

/* Optional: „In Stock“ etc. in Gold */
.filter button[data-filter*="stock"],
.filters button[data-filter*="stock"] {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}
.filter button[data-filter*="stock"].active,
.filters button[data-filter*="stock"].active {
  background: var(--color-accent) !important;
  color: #0b0b0d !important;
}

/* Einheitliche Textdarstellung in Buttons */
.filter button span,
.filters button span,
.tabs button span { vertical-align: middle; }

/* ===== FORCE ACTIVE FILTER/TAB TO BRAND-RED (override dark utilities) ===== */
.filters .btn.active,
.filters button.active,
.filters [aria-pressed="true"],
.filters [aria-current="true"],
.filter .btn.active,
.filter button.active,
.filter [aria-pressed="true"],
.filter [aria-current="true"],
.tabs .btn.active,
.tabs button.active,
.tabs [aria-pressed="true"],
.tabs [aria-current="true"]{
  background: var(--color-brand-600) !important;
  color: #fff !important;
  border-color: var(--color-brand-600) !important;
  box-shadow: 0 2px 8px rgba(185,28,28,.25) !important;
  border-radius: 999px !important;
}

/* Wenn aktive Pills zusätzlich eine dunkle bg-Utility tragen, hart überschreiben */
.filters .btn.active[class*="bg-"],
.filter  .btn.active[class*="bg-"],
.tabs    .btn.active[class*="bg-"],
.filters button.active[class*="bg-"],
.filter  button.active[class*="bg-"],
.tabs    button.active[class*="bg-"]{
  background: var(--color-brand-600) !important;
  color:#fff !important;
  border-color: var(--color-brand-600) !important;
}

/* Inaktive Pills bewusst hell halten */
.filters .btn:not(.active),
.filters button:not(.active),
.filter .btn:not(.active),
.filter button:not(.active),
.tabs .btn:not(.active),
.tabs button:not(.active){
  background:#fff !important;
  color:#111 !important;
  border:1px solid rgba(0,0,0,.1) !important;
}
.filters .btn:not(.active):hover,
.filters button:not(.active):hover,
.filter .btn:not(.active):hover,
.filter button:not(.active):hover,
.tabs .btn:not(.active):hover,
.tabs button:not(.active):hover{
  border-color: var(--color-accent) !important;
  color: var(--color-brand-600) !important;
}

/* --- FIX: Footer-Links NICHT als Buttons stylen --- */
footer a[href*="contact"],
footer a[href*="support"]{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--link) !important;      /* Gold auf dark footer */
}
footer a[href*="contact"]:hover,
footer a[href*="support"]:hover{
  color: #fff !important;
}

/* Optional (empfohlen): CTA-Fallback nur in Content-Bereichen anwenden */
main a[href*="contact"],
.section a[href*="contact"],
.content a[href*="contact"],
.card a[href*="contact"],
.panel a[href*="contact"],
main a[href*="support"],
.section a[href*="support"],
.content a[href*="support"],
.card a[href*="support"],
.panel a[href*="support"]{
  background: var(--color-brand-600) !important;
  color:#fff !important;
  border: 1px solid var(--color-brand-600) !important;
  border-radius: 12px;
  padding: .6rem 1rem;
  box-shadow: 0 3px 10px rgba(185,28,28,.35);
}
main a[href*="contact"]:hover,
.section a[href*="contact"]:hover,
.content a[href*="contact"]:hover,
.card a[href*="contact"]:hover,
.panel a[href*="contact"]:hover,
main a[href*="support"]:hover,
.section a[href*="support"]:hover,
.content a[href*="support"]:hover,
.card a[href*="support"]:hover,
.panel a[href*="support"]:hover{
  background: var(--color-brand-700) !important;
}

/* ========== 11b) CONTRAST FIXES: BLACK BOXES & BLACK BUTTONS ========== */
/* Schwarze/Sehr dunkle Sektionen: Standard-Text + Links klar sichtbar halten */
.bg-black,
.bg-neutral-900, .bg-neutral-950,
.bg-gray-900,   .bg-gray-950,
.bg-zinc-900,   .bg-zinc-950,
.box--black, .panel--black, .card--black {
  color: var(--text-base) !important;
}
.bg-black a,
.bg-neutral-900 a, .bg-neutral-950 a,
.bg-gray-900 a,   .bg-gray-950 a,
.bg-zinc-900 a,   .bg-zinc-950 a,
.box--black a, .panel--black a, .card--black a {
  color: var(--color-accent) !important; /* Gold-Linkfarbe */
}
.bg-black a:hover,
.bg-neutral-900 a:hover, .bg-neutral-950 a:hover,
.bg-gray-900 a:hover,   .bg-gray-950 a:hover,
.bg-zinc-900 a:hover,   .bg-zinc-950 a:hover,
.box--black a:hover, .panel--black a:hover, .card--black a:hover {
  color: #ffffff !important;
}

/* Buttons IN schwarzen Sektionen: Outline/Gold als Default, klarer Hover */
.bg-black .btn,
.bg-neutral-900 .btn, .bg-neutral-950 .btn,
.bg-gray-900 .btn,   .bg-gray-950 .btn,
.bg-zinc-900 .btn,   .bg-zinc-950 .btn,
.box--black .btn, .panel--black .btn, .card--black .btn {
  background: transparent !important;
  color: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  box-shadow: none !important;
}
.bg-black .btn:hover,
.bg-neutral-900 .btn:hover, .bg-neutral-950 .btn:hover,
.bg-gray-900 .btn:hover,   .bg-gray-950 .btn:hover,
.bg-zinc-900 .btn:hover,   .bg-zinc-950 .btn:hover,
.box--black .btn:hover, .panel--black .btn:hover, .card--black .btn:hover {
  background: var(--color-accent) !important;
  color: #0b0b0d !important; /* Dark text auf Gold-Hintergrund */
}

/* Primär-CTA in schwarzen Sektionen weiterhin kräftig und eindeutig */
.bg-black .btn-primary,
.bg-neutral-900 .btn-primary, .bg-neutral-950 .btn-primary,
.bg-gray-900 .btn-primary,   .bg-gray-950 .btn-primary,
.bg-zinc-900 .btn-primary,   .bg-zinc-950 .btn-primary,
.box--black .btn-primary, .panel--black .btn-primary, .card--black .btn-primary {
  background: var(--color-brand-600) !important;
  color: #fff !important;
  border-color: var(--color-brand-600) !important;
  box-shadow: 0 4px 14px rgba(185,28,28,.35) !important;
}
.bg-black .btn-primary:hover,
.bg-neutral-900 .btn-primary:hover, .bg-neutral-950 .btn-primary:hover,
.bg-gray-900 .btn-primary:hover,   .bg-gray-950 .btn-primary:hover,
.bg-zinc-900 .btn-primary:hover,   .bg-zinc-950 .btn-primary:hover,
.box--black .btn-primary:hover, .panel--black .btn-primary:hover, .card--black .btn-primary:hover {
  background: var(--color-brand-700) !important;
  border-color: var(--color-brand-700) !important;
}

/* EXPLIZIT schwarze Buttons (z.B. <button class="btn bg-black ...">) */
button[class*="bg-black"],
a.btn[class*="bg-black"],
.btn[class*="bg-black"] {
  background: #000 !important;
  color: var(--color-accent) !important;                   /* Goldtext auf Schwarz */
  border: 1px solid var(--color-accent) !important;        /* Goldrahmen */
}
button[class*="bg-black"]:hover,
a.btn[class*="bg-black"]:hover,
.btn[class*="bg-black"]:hover {
  background: #111 !important;
  color: #fff !important;                                  /* Weißer Text beim Hover */
  border-color: var(--color-accent) !important;
}

/* Falls irgendwo text-black auf schwarzen Buttons erzwungen wird → überschreiben */
button[class*="bg-black"].text-black,
a.btn[class*="bg-black"].text-black,
.btn[class*="bg-black"].text-black {
  color: var(--color-accent) !important;
}

/* Schwarze Utility-Buttons (ähnlich Abschnitt 11), aber für reines Schwarz */
button[class*="bg-neutral-9"],
a.btn[class*="bg-neutral-9"],
.btn[class*="bg-neutral-9"],
button[class*="bg-gray-9"],
a.btn[class*="bg-gray-9"],
.btn[class*="bg-gray-9"],
button[class*="bg-zinc-9"],
a.btn[class*="bg-zinc-9"],
.btn[class*="bg-zinc-9"]{
  /* wenn wirklich sehr dunkel → lieber Primär-CTA für klare Lesbarkeit */
  background: var(--color-brand-600) !important;
  color: #fff !important;
  border-color: var(--color-brand-600) !important;
}
button[class*="bg-neutral-9"]:hover,
a.btn[class*="bg-neutral-9"]:hover,
.btn[class*="bg-neutral-9"]:hover,
button[class*="bg-gray-9"]:hover,
a.btn[class*="bg-gray-9"]:hover,
.btn[class*="bg-gray-9"]:hover,
button[class*="bg-zinc-9"]:hover,
a.btn[class*="bg-zinc-9"]:hover,
.btn[class*="bg-zinc-9"]:hover{
  background: var(--color-brand-700) !important;
  border-color: var(--color-brand-700) !important;
}

/* Inputs in schwarzen Boxen: etwas heller, gute Lesbarkeit & Fokus */
.bg-black input, .bg-black select, .bg-black textarea,
.bg-neutral-900 input, .bg-neutral-900 select, .bg-neutral-900 textarea,
.bg-neutral-950 input, .bg-neutral-950 select, .bg-neutral-950 textarea,
.bg-gray-900 input,   .bg-gray-900 select,   .bg-gray-900 textarea,
.bg-gray-950 input,   .bg-gray-950 select,   .bg-gray-950 textarea,
.bg-zinc-900 input,   .bg-zinc-900 select,   .bg-zinc-900 textarea,
.bg-zinc-950 input,   .bg-zinc-950 select,   .bg-zinc-950 textarea {
  background: #15161a !important;
  color: #eef0f4 !important;
  border: 1px solid #2a2d36 !important;
}
.bg-black input:focus, .bg-black select:focus, .bg-black textarea:focus,
.bg-neutral-900 input:focus, .bg-neutral-900 select:focus, .bg-neutral-900 textarea:focus,
.bg-neutral-950 input:focus, .bg-neutral-950 select:focus, .bg-neutral-950 textarea:focus,
.bg-gray-900 input:focus,   .bg-gray-900 select:focus,   .bg-gray-900 textarea:focus,
.bg-gray-950 input:focus,   .bg-gray-950 select:focus,   .bg-gray-950 textarea:focus,
.bg-zinc-900 input:focus,   .bg-zinc-900 select:focus,   .bg-zinc-900 textarea:focus,
.bg-zinc-950 input:focus,   .bg-zinc-950 select:focus,   .bg-zinc-950 textarea:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,.25) !important; /* dezenter Gold-Fokus */
}

/* Schwarzer „Burger“-Button o.ä.: schwarzer Rahmen + klare Icon-Farbe */
.btn--icon-black,
button#navToggle {
  border: 1px solid #000 !important;      /* expliziter schwarzer Rahmen */
  background: #000 !important;
  color: var(--color-accent) !important;  /* Gold-Icon/Text auf Schwarz */
}
.btn--icon-black:hover,
button#navToggle:hover {
  background: #111 !important;
  color: #fff !important;
}

/* ========== 11c) LIGHT BOXES & FORMS (White Backgrounds for Better Contrast) ========== */

/* Allgemeine helle Boxen */
.card,
.panel,
.box,
.review-form,
.filter-box,
aside.filter-panel,
.section--light,
.content--light {
  background: #ffffff !important;
  color: #111 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

/* Formularfelder: hell mit dunkler Schrift */
input,
select,
textarea {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease;
}
input::placeholder,
textarea::placeholder {
  color: #666 !important;
}
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25) !important;
}

/* Review-Formular & Filter-Panel spezielle Stile */
.review-form,
.filter-panel {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  padding: 1.25rem;
}
.review-form h3,
.filter-panel h3 {
  color: #111 !important;
  font-weight: 700;
}
.review-form label,
.filter-panel label {
  color: #222 !important;
  font-weight: 600;
}

/* Select-Dropdowns */
select {
  background: #fff url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23111' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 0.8rem center/1rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
}

/* Buttons in hellen Bereichen */
button,
.btn,
input[type="submit"] {
  font-weight: 600;
  border-radius: 10px;
  border: none;
  transition: all 0.15s ease;
}
button.btn-primary,
.btn.btn-primary,
input[type="submit"].btn-primary {
  background: var(--color-brand-600) !important;
  color: #fff !important;
  border: 1px solid var(--color-brand-600) !important;
}
button.btn-primary:hover,
.btn.btn-primary:hover,
input[type="submit"].btn-primary:hover {
  background: var(--color-brand-700) !important;
}

button.btn-outline,
.btn.btn-outline {
  background: transparent !important;
  color: var(--color-brand-600) !important;
  border: 1px solid var(--color-brand-600) !important;
}
button.btn-outline:hover,
.btn.btn-outline:hover {
  background: var(--color-brand-600) !important;
  color: #fff !important;
}

/* Spezielle CTA-Buttons (Submit, Apply etc.) */
button[type="submit"],
button.apply-filter,
.btn-submit {
  background: var(--color-accent) !important;
  color: #0b0b0d !important;
  font-weight: 700;
  border: none !important;
  border-radius: 10px;
  padding: 0.5rem 1.25rem;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.25);
}
button[type="submit"]:hover,
button.apply-filter:hover,
.btn-submit:hover {
  background: #e0bf49 !important;
  color: #000 !important;
}

/* Ratings in Review-Bereich */
.stars,
.rating-stars svg {
  color: var(--color-accent) !important;
}

/* === PAGES: WHITE BACKGROUND FIX === */
.page-content,
main.page,
section.page,
article.page,
body.page,
body.page-template,
body.page-default main {
  background: #ffffff !important;
  color: #111111 !important;
}

.page-content,
.page-content * {
  color: #111 !important;
}

.page-content a {
  color: #d4af37 !important; /* gold links passend zum theme */
}

.page-content a:hover {
  color: #b91c1c !important; /* red hover */
}

/* Optional: container style for readable layout */
.page-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  border-radius: 1.25rem;
  box-shadow: 0 0 20px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.08);
}

/* Search Page Background + Card Adjustments */
body {
  background-color: #0b0b0e; /* black background like your screenshot */
}

.search-results-grid article {
  transition: all .25s ease;
}
.search-results-grid article:hover {
  transform: translateY(-3px);
}

/* Product Card tweaks */
.product-card {
  background-color: #ffffff;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}
.product-card img {
  transition: transform .3s ease;
}
.product-card:hover img {
  transform: scale(1.03);
}