/* /assets/css/theme-green.css — "Verdant Glass" (fresh trust gradient, glassy header, high-contrast CTAs) */

/* ========== 1) DESIGN TOKENS ========== */
:root{
  /* Brand greens */
  --color-brand-600: #059669;   /* emerald-600 */
  --color-brand-700: #047857;   /* emerald-700 */
  --color-brand:     var(--color-brand-600);

  /* Accent/Highlights (fresh, complementary) */
  --color-accent:    #228b22;   /* lime/emerald-light (lime-300) */
  --link:            #fff;   /* green-600 */
  --link-hover:      #000;   /* green-700 */

  --ok:   #16a34a;
  --warn: #f59e0b;
  --err:  #dc2626;

  --bg-page:   #ffffff;
  --text-base: #0b1220;
  --text-muted:#475569;
  --card-bg:   #ffffff;
  --card-border:#e5e7eb;

  --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(--link);
  --btn-secondary-border:  var(--link);
}

/* ========== 2) GLOBAL INTERACTION ========== */
a { color: var(--link); }
a:hover { color: var(--link-hover); }

/* Primary Button */
.btn-primary{
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  filter: saturate(1.05);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-primary:hover{
  background: var(--btn-primary-hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand-600) 22%, transparent);
}

/* Outline Button */
.btn-outline{
  background: transparent;
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
}
.btn-outline:hover{ background: var(--btn-secondary-text); color: #fff; }

/* ========== 3) HERO (Verdant) ========== */
.hero, [data-section="hero"]{
  background: linear-gradient(90deg,
    #2dd4bf 0%,    /* teal-400 for freshness */
    #059669 55%,   /* emerald-600 core */
    #15803d 100%   /* green-700 depth */
  );
  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,.14) 0%,
    rgba(0,0,0,.18) 40%,
    rgba(0,0,0,.22) 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,.25);
}
.hero p,[data-section="hero"] p{
  color:#f8fafc; text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.hero a,[data-section="hero"] a{
  color:#fff; text-decoration:underline; text-underline-offset:2px;
}
.hero a:hover,[data-section="hero"] a:hover{ color:#ecffef; }
.hero .btn-primary,[data-section="hero"] .btn-primary{
  background:#fff; color:var(--color-brand-600); box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.hero .btn-primary:hover,[data-section="hero"] .btn-primary:hover{
  background:#f3f4f6; color:var(--color-brand-700);
}
.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-600);
}
.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%, #fff);
  color:#92400e; border-color: color-mix(in srgb, var(--warn) 45%, #fff);
}
.badge-ok{
  background: color-mix(in srgb, var(--ok) 15%, #fff);
  color:#166534; border-color: color-mix(in srgb, var(--ok) 45%, #fff);
}
.alert-warn{ color:#b45309; } .alert-ok{ color:#166534; } .alert-err{ color:#b91c1c; }

/* ========== 5) HEADER: GREEN GLASS ========== */
header.sticky{
  background: rgba(5,150,105,0.65) !important;   /* emerald-600 @ 65% */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
  color:#fff;
}

/* Texte, Icons, starke Klassen im Header zwangsweise hell */
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;
}

/* Suche im Header gut lesbar auf Glas */
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.25) !important;
  color:#fff !important;
}
header.sticky input::placeholder{ color:rgba(255,255,255,0.85) !important; }

/* Hover-Flächen */
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.14) !important;
}

/* Mini-Cart Badges */
header.sticky #miniCartBadge,
header.sticky #miniCartBadgeMobile{
  background: var(--color-accent) !important; color:#0b1220 !important;  /* dark text on light accent */
}

/* Optional: festeres Glas bei Scroll (falls .scrolled per JS gesetzt wird) */
header.sticky.scrolled{
  background: rgba(4,120,87,0.90) !important;  /* emerald-700/800 @ 90% */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ========== 6) UTILITY REINFORCEMENTS ========== */
/* Tailwind Mapping (nur für generische Gradients; Header selbst bleibt Glas) */
.from-brand   { --tw-gradient-from: var(--color-brand-600) !important; }
.to-brand-700 { --tw-gradient-to:   var(--color-brand-700) !important; }

/* Border alpha Ersatz */
.border-brand-600\/50{
  border-color: color-mix(in srgb, var(--color-brand-600) 50%, transparent) !important;
}

/* Legacy: überall, wo .bg-gradient-to-r.from-brand steht, setze den Green-Gradient
   (AUSGENOMMEN header, damit der Glass-Effekt nicht überschrieben wird) */
.bg-gradient-to-r.from-brand:not(header){
  background: linear-gradient(90deg,#2dd4bf 0%,#059669 55%,#15803d 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,.25);
}
.bg-gradient-to-r.from-brand:not(header) a.btn-primary{
  background:#fff !important; color:var(--color-brand-700) !important;
}
.bg-gradient-to-r.from-brand:not(header) a[class*="bg-white"]{
  background:transparent !important; border-color:#fff !important; color:#fff !important;
}

/* ========== 7) ORANGE → GRÜN UMFÄRBEN, falls alte Utilities im Markup ========== */
.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: #065f46 !important;            /* readable on light accent */
  border-color: var(--color-accent) !important;
}

/* ==== Mini Cart: opaque + dark text ==== */
#miniCartDropdown{
  background: #ffffff !important;               /* volle Deckkraft */
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.18) !important;
  -webkit-backdrop-filter: none !important;     /* Glas ausschalten */
  backdrop-filter: none !important;
  color: #0f172a !important;                    /* Grundtext dunkel */
}

/* Alle Texte/Icons im Panel dunkel halten */
#miniCartDropdown *,
#miniCartDropdown svg{
  color: #0f172a !important;
  fill:  #0f172a !important;
}

/* Feintuning der internen Farbtöne */
#miniCartDropdown h3 { color: #111827 !important; }   /* Titel */
#miniCartDropdown .text-gray-500 { color:#6b7280 !important; }
#miniCartDropdown .text-gray-900 { color:#111827 !important; }

/* Links/Buttons im Panel – Brand-Grün beibehalten */
#miniCartDropdown a { color: var(--color-brand-600) !important; }
#miniCartDropdown a:hover { color: var(--color-brand-700) !important; }

/* Sicherstellen, dass Header-White-Overrides nicht greifen */
header.header--glass #miniCartDropdown,
header.header--glass #miniCartDropdown *{
  color: #0f172a !important;
  fill:  #0f172a !important;
}


/* === Mini-Cart Button: Text weiß === */
#miniCartDropdown a.bg-accent{
  color: #ffffff !important;
}
#miniCartDropdown a.bg-accent:hover{
  background: var(--color-brand-700) !important;
  color: #ffffff !important;
}