/* =====================================================================
   Die Bienenkönigin — „Vintage Honey"-Skin
   Sitzt auf dem earthy-Theme und überschreibt gezielt:
   • Farbband-Sektionen (Braun · Honig · Rost · Blau · Creme)
   • Slab-Display-Font (Bevan) im Retro-Honig-Look
   • kleine fliegende Biene als Mauszeiger + fliegende Deko-Bienen
   Wird NACH styles.css geladen.
   ===================================================================== */

/* ---------- Palette & Fonts ---------- */
[data-theme="earthy"]{
  --font-display:"Bevan", Georgia, serif;
  --font-body:"Mulish", system-ui, sans-serif;
  --color-bg:#f5ead0;
  --color-surface:#fbf4e3;
  --color-surface-2:#efdfbe;
  --color-text:#2a1a0e;
  --color-text-muted:#6a513b;
  --color-primary:#3a2415;
  --color-primary-strong:#23150a;
  --color-primary-contrast:#f7eacb;
  --color-accent:#e7a31e;
  --color-border:#e3d2ab;
  --hero-overlay:linear-gradient(180deg, rgba(33,20,11,.42), rgba(33,20,11,.85));
  /* Farbband-Palette */
  --band-brown:#2e1d10;
  --band-honey:#f3b528;
  --band-rust:#b0472d;
  --band-blue:#83bcd6;
}

body{
  background:
    radial-gradient(1100px 460px at 82% -6%, #fbf0d6, transparent 60%),
    var(--color-bg);
}
h1,h2,h3,h4{ letter-spacing:.005em; }

/* ---------- Bienen-Cursor (kleine fliegende Biene) ---------- */
:root{
  --bee-cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><g transform='rotate(20 15 15)'><ellipse cx='11.4' cy='9' rx='6.4' ry='3.6' fill='%23cfe9f5' stroke='%232c1b10' stroke-width='.8'/><ellipse cx='18.6' cy='9' rx='6.4' ry='3.6' fill='%23cfe9f5' stroke='%232c1b10' stroke-width='.8'/><ellipse cx='15' cy='17' rx='6.2' ry='8.4' fill='%23f3b528' stroke='%232c1b10' stroke-width='1.7'/><path d='M9 15h12M9 19h12' stroke='%232c1b10' stroke-width='2.3' stroke-linecap='round'/><circle cx='15' cy='9' r='3.1' fill='%232c1b10'/></g></svg>") 15 15, auto;
}
html, body{ cursor:var(--bee-cursor); }
a[href], button, .btn, .faq__q, .nav__toggle, .gallery__item, label, summary,
.sticky-cta a, .lightbox__close{ cursor:var(--bee-cursor); }
input, textarea, select{ cursor:text; }

/* ---------- Header: durchgehend dunkelbraun ---------- */
.header{ background:rgba(40,25,15,.94); backdrop-filter:blur(8px); box-shadow:0 1px 0 rgba(0,0,0,.25); }
.header.is-scrolled{ background:rgba(35,21,11,.98); box-shadow:0 8px 30px rgba(0,0,0,.30); }
.header .brand, .header .brand__name{ color:#f7ebcf; }
.brand__mark{ background:var(--color-accent); color:#2c1b10; border-radius:11px; box-shadow:0 2px 0 rgba(0,0,0,.22); }
.brand__mark svg{ width:23px; height:23px; }
.nav__links a{ color:#ecd9b4; }
.nav__links a:hover{ color:#fff; }
.nav__cta .btn--ghost{ color:#f7ebcf; border-color:rgba(247,235,207,.5); }
.nav__cta .btn--ghost:hover{ background:rgba(247,235,207,.12); border-color:#f7ebcf; color:#fff; }
.nav__cta .btn--primary{ background:var(--color-accent); color:#2c1b10; }
.nav__cta .btn--primary:hover{ background:#f6c043; }
.nav__toggle span{ background:#f7ebcf; }
@media (max-width:640px){
  .nav.is-open .nav__links{ background:#2e1d10; border-color:rgba(255,255,255,.12); }
  .nav.is-open .nav__links a{ color:#ecd9b4; }
}

/* ---------- Hero ---------- */
.hero h1{ text-transform:uppercase; letter-spacing:.012em; }
.hero__badge{ background:rgba(46,29,16,.5); border-color:rgba(247,235,207,.35); color:#f7ebcf; }
.hero__badge .dot{ background:var(--color-accent); box-shadow:0 0 0 4px rgba(231,163,30,.3); }
.hero__actions .btn--primary{ background:var(--color-accent); color:#2c1b10; border-color:transparent; }
.hero__actions .btn--primary:hover{ background:#f6c043; }
.hero__trust strong{ color:#ffd87a; }

/* ---------- Farbband-Sektionen ---------- */
.section--brown{ background:var(--band-brown); color:#ecd9b4; }
.section--rust{ background:var(--band-rust); color:#f6e7d2; }
.section--honey{ background:var(--band-honey); color:#3a2412; }
.section--blue{ background:var(--band-blue); color:#15323d; }

.section--brown .eyebrow, .section--rust .eyebrow{ color:#ffd87a; }
.section--honey .eyebrow{ color:#7a4a12; }
.section--blue .eyebrow{ color:#16566d; }

.section--brown h1,.section--brown h2,.section--brown h3,.section--brown h4,
.section--rust h1,.section--rust h2,.section--rust h3,.section--rust h4{ color:#fff; }
.section--honey h2,.section--honey h3{ color:#2c1b10; }
.section--blue h2,.section--blue h3{ color:#10303b; }

.section--brown .section-head p,.section--rust .section-head p{ color:rgba(255,255,255,.86); }
.section--honey .section-head p{ color:#5b3c14; }
.section--blue .section-head p{ color:#1d4a5a; }

/* Buttons je nach Band */
.section--brown .btn--primary,.section--rust .btn--primary{ background:var(--color-accent); color:#2c1b10; }
.section--brown .btn--primary:hover,.section--rust .btn--primary:hover{ background:#f6c043; }
.section--brown .btn--ghost,.section--rust .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.6); }
.section--brown .btn--ghost:hover,.section--rust .btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }
.section--honey .btn--primary,.section--blue .btn--primary{ background:#2c1b10; color:#f7eacb; }
.section--honey .btn--primary:hover,.section--blue .btn--primary:hover{ background:#3f2817; }

/* Über uns auf Rost */
.section--rust .checklist li{ color:#fdeede; }
.section--rust .checklist li::before{ background:rgba(255,216,122,.22); color:#ffd87a; }
.section--rust .stats__num{ color:#ffd87a; }
.section--rust .stats__label{ color:rgba(255,255,255,.82); }
.section--rust .split__media img{ box-shadow:0 26px 60px rgba(0,0,0,.38); }

/* Ablauf auf Blau */
.section--blue .step__num{ background:#2c1b10; color:#ffd87a; }
.section--blue .step p{ color:#1d4a5a; }

/* ---------- Produkt-Karten (Sortiment) ---------- */
.card--product{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.card--product .card__media{ aspect-ratio:4/3; overflow:hidden; background:var(--color-surface-2); }
.card--product .card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.card--product:hover .card__media img{ transform:scale(1.07); }
.card--product .card__body{ padding:var(--space-lg) var(--space-xl) var(--space-xl); display:flex; flex-direction:column; flex:1; }
.card--product .card__body h3{ margin-bottom:.35em; }
.card--product .card__body p{ flex:1; }
.card__price{ align-self:flex-start; margin-top:var(--space-md); padding:.34em .9em; border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--color-accent) 28%, #fff); color:#7a4a12; font-family:var(--font-display); font-size:.8rem; letter-spacing:.02em; }

/* ---------- Honigsorten-Karten ---------- */
.honey-card{ display:flex; flex-direction:column; }
.honey-card__swatch{ display:block; width:100%; height:10px; border-radius:var(--radius-pill); background:var(--h,var(--color-accent)); margin-bottom:var(--space-md); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.honey-card__note{ flex:1; }
.honey-card__price{ display:flex; flex-wrap:wrap; gap:.5em; margin-top:var(--space-md); }
.honey-card__price span{ padding:.32em .8em; border-radius:var(--radius-pill); background:#2c1b10; color:#ffe6ad; font-family:var(--font-display); font-size:.78rem; letter-spacing:.02em; }
.section--honey .card{ background:#fff7e6; border-color:rgba(44,27,16,.12); }

/* ---------- CTA-Band → Honig ---------- */
.cta-band{ position:relative; overflow:hidden; background:var(--band-honey); color:#3a2412; box-shadow:0 18px 50px rgba(176,113,20,.28); }
.cta-band h2{ color:#2c1b10; text-transform:uppercase; }
.cta-band p{ color:#5b3c14; opacity:1; }
.cta-band .btn--primary{ background:#2c1b10; color:#f7eacb; }
.cta-band .btn--primary:hover{ background:#3f2817; }
.cta-band .btn--ghost{ color:#3a2412; border-color:rgba(58,36,18,.45); }
.cta-band .btn--ghost:hover{ background:rgba(44,27,16,.08); border-color:#2c1b10; color:#2c1b10; }

/* ---------- Footer → Honig + Riesen-Wortmarke ---------- */
.footer{ background:var(--band-honey); color:#3a2412; padding-top:var(--space-2xl); overflow:hidden; }
.footer .brand, .footer .brand__name{ color:#2c1b10; }
.footer h4{ color:#2c1b10; }
.footer a{ color:#5b3c14; }
.footer a:hover{ color:#2c1b10; }
.footer .placeholder-note{ color:#7a5a2a; }
.footer__bottom{ border-top:1px solid rgba(44,27,16,.22); color:#6a4a1c; }
.footer__wordmark{ font-family:var(--font-display); text-transform:uppercase; line-height:.84;
  font-size:clamp(2.6rem, 13vw, 9rem); color:#2c1b10; opacity:.92; margin-top:var(--space-xl);
  text-align:center; letter-spacing:.01em; word-break:break-word; }

/* ---------- Fliegende Deko-Bienen ---------- */
.has-bees{ position:relative; overflow:hidden; }
.bee-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:4; }
.bee{ position:absolute; width:42px; height:42px; opacity:.96; will-change:transform; filter:drop-shadow(0 6px 6px rgba(0,0,0,.22)); }
.bee svg{ width:100%; height:100%; display:block; }
.bee svg ellipse:nth-of-type(1), .bee svg ellipse:nth-of-type(2){
  transform-box:fill-box; transform-origin:60% 100%; animation:beeWing .18s ease-in-out infinite alternate;
}
.bee--1{ top:15%; left:-8%; animation:beeFly1 17s linear infinite; }
.bee--2{ top:55%; left:-12%; width:31px; animation:beeFly2 22s linear infinite 3s; }
.bee--3{ top:32%; left:-10%; width:35px; animation:beeFly3 27s linear infinite 6s; }
@keyframes beeWing{ from{ transform:scaleY(.78); } to{ transform:scaleY(1); } }
@keyframes beeFly1{
  0%{ transform:translate(0,0) rotate(6deg); }
  25%{ transform:translate(32vw,-7vh) rotate(-8deg); }
  50%{ transform:translate(58vw,5vh) rotate(7deg); }
  75%{ transform:translate(84vw,-4vh) rotate(-6deg); }
  100%{ transform:translate(116vw,4vh) rotate(6deg); }
}
@keyframes beeFly2{
  0%{ transform:translate(0,0) rotate(-6deg); }
  33%{ transform:translate(42vw,8vh) rotate(8deg); }
  66%{ transform:translate(74vw,-6vh) rotate(-7deg); }
  100%{ transform:translate(122vw,3vh) rotate(6deg); }
}
@keyframes beeFly3{
  0%{ transform:translate(0,0) rotate(8deg); }
  50%{ transform:translate(60vw,-9vh) rotate(-8deg); }
  100%{ transform:translate(118vw,6vh) rotate(8deg); }
}

@media (prefers-reduced-motion: reduce){
  .bee{ display:none; }
}

/* ---------- Responsive Feinschliff ---------- */
@media (max-width:640px){
  .footer__wordmark{ font-size:clamp(2rem, 15vw, 3.4rem); }
  .bee--2,.bee--3{ display:none; }
}