/* =========================================================
   ski-wachs-shop.de – Custom Styles (lean, on top of Bootstrap 5.3)
   System-Font-Stack (kein Google Fonts -> DSGVO + Performance)
   ========================================================= */

:root {
  --brand: #0a4d68;        /* Gletscherblau */
  --brand-dark: #063348;
  --brand-light: #e6f2f7;
  --accent: #bf4d00;       /* Signal-Orange, WCAG-AA-tauglich mit Weiß (4.9:1) */
  --accent-dark: #9c3f00;
  --accent-hero: #ffb98c;  /* helle Variante für dunklen Hero-Hintergrund */
  --ink: #1c2b33;
  --snow: #f7fbfd;
}

/* Bootstrap kennt Spacing nur 0–5: eigene 6er-Stufe ergänzen */
.py-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
@media (min-width: 992px) { .py-lg-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; } }

/* Kontrast (WCAG 2.1 AA): sekundären Text und dezente Footer-Texte anheben */
.text-secondary { color: #565e64 !important; }
footer .text-white-50 { color: #c8dde6 !important; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, .92); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color: #fff; }

html { scroll-behavior: smooth; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  color: var(--ink);
  background: #fff;
}

/* ---------- Utilities ---------- */
.text-brand { color: var(--brand) !important; }
.bg-brand { background-color: var(--brand) !important; }
.bg-brand-light { background-color: var(--brand-light) !important; }
.bg-snow { background-color: var(--snow) !important; }

.btn-accent {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-dark);
  --bs-btn-hover-border-color: var(--accent-dark);
  --bs-btn-active-bg: var(--accent-dark);
  --bs-btn-active-border-color: var(--accent-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 255, 106, 0;
  font-weight: 600;
}

.btn-brand {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  font-weight: 600;
}

/* ---------- Navbar ---------- */
.navbar-brand { font-weight: 700; letter-spacing: .3px; }
.navbar-brand .dot { color: var(--accent); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(6, 51, 72, .82) 0%, rgba(10, 77, 104, .78) 100%),
    var(--brand) url("../img/hero-ski-wachsen.svg") center/cover no-repeat;
  color: #fff;
}
.hero h1 { font-weight: 800; line-height: 1.1; text-wrap: balance; }
.hero .lead { max-width: 46rem; }

/* ---------- Trust bar ---------- */
.trustbar { font-size: .95rem; }
.trustbar .item { display: flex; align-items: center; gap: .5rem; }

/* ---------- Cards ---------- */
.card { transition: transform .15s ease, box-shadow .15s ease; }
.card.lift:hover { transform: translateY(-4px); box-shadow: 0 .75rem 1.5rem rgba(6,51,72,.14) !important; }

.cat-icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--brand-light); color: var(--brand);
}
.product-thumb {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  background: var(--brand-light);
}
.badge-price {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* ---------- Ratgeber-Tabelle ---------- */
.temp-table th { background: var(--brand); color: #fff; }
.temp-table td, .temp-table th { vertical-align: middle; }
.swatch { display:inline-block; width:14px; height:14px; border-radius:3px; margin-right:.4rem; vertical-align:middle; }

/* ---------- Section rhythm ---------- */
section { scroll-margin-top: 76px; }
.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent);
}
/* Eyebrow auf dunklem Hero: helle Variante für ausreichenden Kontrast */
.hero .section-eyebrow { color: var(--accent-hero); }

/* ---------- FAQ ---------- */
.accordion-button:not(.collapsed) {
  color: var(--brand);
  background-color: var(--brand-light);
}
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(10,77,104,.2); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 100%); color:#fff; }

/* ---------- Footer ---------- */
footer a { color: #cfe4ee; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }

/* ---------- Accessibility ---------- */
a.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 2000;
  background:#fff; color: var(--brand); padding:.5rem 1rem; border-radius:0 0 .5rem 0;
}
a.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card { transition: none; }
}