/* ============================================================
   eCaupo für Imker · Honig-Theme (www.imker-webshop.de)
   Wird NACH css/tokens.css und css/style.css geladen und mappt
   die Marken-Tokens auf das Original-Farbspektrum der alten
   imker-webshop.de (style.min.css des Alt-CMS):
     · Honig-Gelb   #FFD224 → #DEB100 (Flächen/Menü)
                    #FDD91B → #F6B416 (Buttons, Verlauf nach oben)
     · Aubergine    #241C27 / #48394E (dunkle Sektionen)
     · Weiß/#F5F5F5 (helle Sektionen)
   Dazu die Original-Honiggrafiken: btn3.png (Honig tropft vom
   Button), drops.png (Honigfluss-Trenner) — lokal in /assets/.
   tokens.css und style.css bleiben 1:1-Kopien der ecaupo.com-
   Hauptseite und werden nie angepasst — Brand-Anpassungen nur hier.
   ============================================================ */

:root {
  /* Honig statt Marken-Grün */
  --ec-green-500: #F6C405;
  --ec-green-600: #DEB100;   /* Primär */
  --ec-green-700: #8A6200;   /* Honig-Braun als Schrift auf Weiß (≥ 4.5:1) */
  --ec-lime-500:  #FFD224;   /* Akzent-Fläche — nie als Textfarbe */

  /* Aubergine wie die dunklen Original-Sektionen */
  --ec-ink:     #241C27;
  --ec-ink-800: #48394E;
  --ec-ink-900: #191320;
  --ec-bubble:  #3A2F42;
  --ec-on-dark: #D5CDDB;

  /* Helle Flächen: Weiß + neutrales Grau wie im Original */
  --ec-paper: #FFFFFF;
  --ec-bg:    #EFEEF1;
  --ec-mist:  #F5F5F5;
  --ec-line:  #E9E7EC;
  --ec-muted: #5D5563;

  /* Honig-Verlauf & Glossy-Schein */
  --ec-gradient: linear-gradient(to left, #FFD224, #DEB100);
  --ec-sheen: radial-gradient(circle, rgba(255,255,255,.30), transparent 62%);

  /* Schatten */
  --ec-shadow-card: 0 16px 38px rgba(36,28,39,.14);
  --ec-shadow-pill: 0 10px 22px rgba(222,177,0,.40);
  --ec-shadow-xl:   0 30px 80px rgba(36,28,39,.18);
}

/* ---------- Honig-Menüleiste (wie #menue_standard im Original) ---------- */

.site-header {
  background: var(--ec-gradient);
  border-bottom: 0;
  box-shadow: 2px 15px 50px rgba(41,44,61,.2);
}
.site-header__logo img { mix-blend-mode: normal; } /* weißes Reverse-Logo, kein Multiply nötig */
.site-header__nav a { color: #fff; }
.site-header__nav a:hover { background: rgba(255,255,255,.18); }
.site-header__nav a[aria-current="page"] { background: rgba(36,28,39,.30); }
.nav-toggle span { background: #fff; }

/* Header-CTA: Aubergine statt Honig (Honig-Button auf Honig-Leiste ginge unter) */
.site-header .ec-btn--primary {
  background: var(--ec-ink);
  color: #fff;
  text-shadow: none;
  box-shadow: 0 10px 22px rgba(36,28,39,.35);
}
.site-header .ec-btn--primary::after { content: none; }

/* ---------- Honig-Buttons (Original .honeybtn + btn3.png-Tropfen) ---------- */

.ec-btn--primary,
.ec-btn--primary:hover {
  color: #fff;
  background: linear-gradient(to top, #F6B416 0%, #FDD91B 100%);
  text-shadow: 0 1px 2px rgba(138,98,0,.45);
}
.ec-btn--primary { position: relative; }
.ec-btn--primary::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -20px;
  width: 96px;
  height: 24px;
  background: url("/assets/btn3.png") no-repeat left top / contain;
  pointer-events: none;
}

.ec-btn--ghost { border-color: #E9DFB2; }

/* ---------- Honigfluss-Trenner (Original drops.png, z. B. #Funktionen) ------
   Als eigenes <div class="honey-flow" aria-hidden="true"></div> direkt nach
   einer Honig-Fläche (Hero/Page-Hero) vor einer weißen Sektion einsetzen. */

.honey-flow {
  height: clamp(80px, 12vw, 140px);
  margin-top: -1px;
  background: #fff url("/assets/drops.png") top center repeat-x;
  background-size: auto 100%;
}

/* ---------- Dunkle Sektionen: Aubergine-Verlauf wie #section-8/10/11 ------- */

.ec-dark { background: linear-gradient(to right, #241C27 18%, #48394E 48%, #241C27 84%); }
.ec-dark::before { background: radial-gradient(circle, rgba(255,210,36,.20), transparent 65%); }
.ec-dark .eyebrow--on-dark { color: var(--ec-lime-500); }

/* ---------- Feature-Icons als Honig-Waben (Hexagon wie die Alt-Icons) ------ */

.feature__icon {
  width: 54px;
  height: 62px;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(to top, #F6B416, #FDD91B);
  color: var(--ec-ink);
}

/* ---------- Honig-Nachzieharbeiten an Fest-Farben aus style.css ------------ */

.ec-badge--success { background: #FBF3D2; border-color: #EDDD9A; }
.compare__card--portal { border-color: #E2DFE6; }
.compare__card--portal .compare__mark { background: #E4E1E7; }
.compare__card--ecaupo .compare__mark { background: #FBF3D2; }
.form-message--success { background: #FBF3D2; border-color: #EDDD9A; }
.form-field:not(.form-field--error) input, .form-field:not(.form-field--error) textarea { border-color: #DDD9D0; }

/* .split p (muted) überstimmt sonst die Eyebrow-Farbe innerhalb von Splits */
.split .eyebrow { color: var(--ec-green-700); }

/* ---------- Logo-Wortmarke „eCaupo für Imker" ------------------------------ */

.imker-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.imker-logo__suffix {
  font-family: var(--ec-font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ec-green-700);
  background: #FBF3D2;
  border-radius: 6px;
  padding: 4px 8px;
}
/* Auf Honig-Leiste und dunklem Footer: dunkles Badge mit Honig-Schrift */
.site-header .imker-logo__suffix { color: #FFD224; background: rgba(36,28,39,.88); }
.imker-logo__suffix--dark { color: #FFD224; background: var(--ec-bubble); }

/* Einzelner Tarif: einspaltiges, zentriertes Preis-Grid */
.pricing__grid--1 { grid-template-columns: minmax(0, 480px); justify-content: center; }