/* assets/css/gradients.css
   Dezente Brand-konforme Verläufe statt vollflächiger Farben — verleiht Tiefe & Eleganz.
   Hier zentral gepflegt, sodass Section-Reihenfolge harmonisch fließt. */

/* ========================================================================
   Body-Hintergrund — extrem subtiler warmer Glow oben
   ======================================================================== */
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,165,116,.06), transparent),
    var(--color-bg);
}

/* ========================================================================
   Sortiment — sanfter Verlauf vom Cremeweiß ins leichte Holz-Hellbeige
   ======================================================================== */
.section-sortiment {
  background:
    linear-gradient(180deg, var(--color-bg) 0%, rgba(232,201,152,.08) 100%);
}

/* ========================================================================
   Section-bg-alt (Lieferung, USPs, Kontakt) — weiches Cremeweiß mit warmen Akzenten
   ======================================================================== */
.section-bg-alt {
  background:
    radial-gradient(circle at 0% 0%, rgba(45,74,43,.04), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(212,165,116,.06), transparent 50%),
    var(--color-surface);
}

/* ========================================================================
   Über-uns-Sektion — sanfter Verlauf
   ======================================================================== */
.section-ueber-uns {
  background:
    linear-gradient(180deg, rgba(212,165,116,.05) 0%, var(--color-bg) 60%);
}

/* ========================================================================
   USP-Karten — Icon-Hintergrund als sanfter Radial-Verlauf
   ======================================================================== */
.usp-icon {
  background:
    radial-gradient(circle at 30% 30%, rgba(45,74,43,.14), rgba(45,74,43,.05) 70%);
}
.usp-card {
  background:
    linear-gradient(180deg, var(--color-surface) 0%, rgba(250,246,240,.6) 100%);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.usp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(45,74,43,.2);
}

/* ========================================================================
   Bestellformular — subtil warmer Hintergrund, kein hartes Weiß
   ======================================================================== */
.bestellform {
  background:
    radial-gradient(ellipse at top left, rgba(212,165,116,.06), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(45,74,43,.04), transparent 50%),
    var(--color-surface);
}
.section-bestellen {
  background:
    linear-gradient(180deg, var(--color-bg) 0%, rgba(232,201,152,.06) 100%);
}

/* ========================================================================
   FAQ-Items — sanfter Verlauf, beim Öffnen warmer Akzent
   ======================================================================== */
.faq-item {
  background:
    linear-gradient(180deg, var(--color-surface) 0%, rgba(250,246,240,.7) 100%);
  transition: background var(--transition-base), border-color var(--transition-base);
}
.faq-item[open] {
  background:
    linear-gradient(180deg, var(--color-surface) 0%, rgba(212,165,116,.06) 100%);
  border-color: rgba(45,74,43,.2);
}

/* ========================================================================
   Kontakt-Block — Karten-Look mit dezentem Verlauf
   ======================================================================== */
.kontakt-info {
  background:
    linear-gradient(135deg, var(--color-surface) 0%, rgba(212,165,116,.05) 100%);
  padding: var(--sp-8);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

/* ========================================================================
   Abo-Card — schon Gradient, leicht aufgewertet mit subtiler Highlight-Linie
   ======================================================================== */
.abo-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(212,165,116,.18), transparent 50%),
    linear-gradient(135deg, #2D4A2B 0%, #1f3520 60%, #162512 100%);
  position: relative;
  overflow: hidden;
}
.abo-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,165,116,.4), transparent);
}

/* ========================================================================
   Hero-Image — feiner Glow um den Rahmen
   ======================================================================== */
.hero-image {
  position: relative;
}
.hero-image::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(45,74,43,.2), transparent 40%, rgba(212,165,116,.2));
  z-index: -1;
  filter: blur(20px);
  opacity: 0.6;
}

/* ========================================================================
   Section-Übergänge — feiner Verlauf-Trenner für nahtlose Optik
   ======================================================================== */
.section + .section,
.section + .abo-teaser,
.abo-teaser + .section {
  position: relative;
}

/* ========================================================================
   Buttons — Primary mit feinem Verlauf statt flach
   ======================================================================== */
.btn-primary {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}