/* =========================================================================
   Tiervideos — "Natürliches Grün" theme + additions
   Ein Projekt der Sara machts GmbH. Loads on top of the shared styles.css.
   styles.css is fully token-driven, so we re-tune the whole palette here and
   reinterpret the former dark (.on-dark) sections as soft, leafy light bands.
   ========================================================================= */

:root {
  /* soft green-tinted paper base */
  --cream:      #F6F8F0;
  --cream-2:    #ECF1E1;
  --cream-line: rgba(40, 56, 28, .12);

  /* brand — natural leaf & forest greens */
  --leaf:       #6FA046;
  --leaf-deep:  #3E6B2C;
  --gold:       #6FA046;   /* remapped: fresh leaf */
  --gold-2:     #8FBF63;   /* light leaf */
  --gold-deep:  #3E6B2C;   /* forest — eyebrows/accents */
  --grad-gold:  linear-gradient(105deg, #86C25A 0%, #4E7A3E 100%);

  /* text */
  --ink:        #26321B;   /* dark olive */
  --ink-soft:   #5E6E4D;

  /* former "dark" sections become soft sage; text stays dark olive */
  --espresso:   #EDF2E2;
  --espresso-2: #F1F5E8;
  --panel:      #F1F5E8;
  --panel-line: rgba(40, 56, 28, .12);
  --on-dark:    #26321B;
  --on-dark-dim:#5E6E4D;
}

/* soft, leafy gradient for the reinterpreted "on-dark" bands */
.on-dark {
  background: linear-gradient(180deg, #EFF4E6 0%, #E4EDD3 100%);
  color: var(--ink);
}
.on-dark p, .on-dark .lead { color: var(--ink-soft); }
.on-dark .eyebrow { color: var(--leaf-deep); }

/* ---------- header: light on a light hero ---------- */
.site-head.scrolled {
  background: rgba(246, 248, 240, .88);
  box-shadow: 0 1px 0 rgba(40, 56, 28, .08), 0 8px 26px -20px rgba(40, 56, 28, .5);
}
.nav a { color: var(--ink); }
.nav a:hover, .nav a.active { color: var(--leaf-deep); }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after { background: var(--ink); }

/* ---------- hero: fresh, airy, natural ---------- */
.hero {
  background:
    radial-gradient(120% 90% at 82% 6%, rgba(134, 194, 90, .34), transparent 55%),
    radial-gradient(100% 80% at 6% 102%, rgba(78, 122, 62, .20), transparent 60%),
    linear-gradient(180deg, #FAFCF5 0%, var(--cream) 52%, #E8F1D8 100%);
  color: var(--ink);
}
.hero::after { display: none; }   /* drop the dark cinematic scanlines */
.hero-copy { max-width: 52ch; }

/* "Ein Projekt der …" badge on a light hero */
.rec {
  color: var(--leaf-deep);
  border-color: rgba(111, 160, 70, .32);
  background: rgba(134, 194, 90, .12);
}
.rec .dot {
  background: var(--leaf);
  box-shadow: 0 0 0 0 rgba(111, 160, 70, .55);
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(111, 160, 70, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(111, 160, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 160, 70, 0); }
}

/* icon badges in a leafy tint */
.icon-badge {
  background: rgba(134, 194, 90, .14);
  border-color: rgba(111, 160, 70, .28);
  color: var(--leaf-deep);
}

/* ---------- footer: deeper leafy band to ground the page ---------- */
.site-foot {
  background: linear-gradient(180deg, #E8F1D8 0%, #D8E6BF 100%);
  border-top: 1px solid rgba(40, 56, 28, .10);
  color: var(--ink);
}
.foot-brand p { color: var(--ink-soft); }
.foot-col h4 { color: var(--leaf-deep); }
.foot-col a { color: var(--ink-soft); }
.foot-col a:hover { color: var(--leaf-deep); }
.foot-bottom { color: var(--ink-soft); border-top-color: rgba(40, 56, 28, .14); }

/* =========================================================================
   ADDITIONS — elements unique to this one-pager
   ========================================================================= */

/* ---------- text wordmark (kein eigenes Logo) ---------- */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .04em;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -.02em;
  color: var(--ink);
  transition: font-size .35s var(--ease);
}
.wordmark .dot { color: var(--leaf); }
.scrolled .wordmark { font-size: 1.15rem; }

/* ---------- hero quote ---------- */
.quote {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink);
  border-left: 3px solid var(--leaf);
  padding-left: 1.3rem;
  margin-bottom: 2.2rem;
  max-width: 44ch;
}
.quote .by {
  display: block;
  margin-top: .7rem;
  font-style: normal;
  font-family: "Space Mono", monospace;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--leaf-deep);
}

/* ---------- video embed (responsive 16:9) ---------- */
.video-wrap { max-width: 920px; margin-inline: auto; }
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #16210e;
  box-shadow: 0 34px 64px -30px rgba(40, 56, 28, .5), 0 0 0 1px rgba(40, 56, 28, .08);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- Angebot: list-card with drehzeit meta ---------- */
.offer { gap: .7rem; }
.offer h3 { font-size: 1.3rem; margin-bottom: .2rem; }
.offer .meta {
  margin-top: auto;
  padding-top: 1rem;
  font-family: "Space Mono", monospace;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leaf-deep);
}

/* ---------- price tag ---------- */
.price-row {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 1.1rem;
}
.price-tag {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-row .price-note {
  font-family: "Space Mono", monospace;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

/* ---------- contact block on a light (cream) section ---------- */
.addr-light .addr {
  background: var(--cream);
  border-color: var(--cream-line);
}
.addr-light .addr .k { color: var(--leaf-deep); }
.addr-light .addr address { color: var(--ink); }
.addr-light .addr a { color: var(--leaf-deep); }

/* ---------- light mobile nav overlay ---------- */
@media (max-width: 860px) {
  .nav { background: rgba(246, 248, 240, .98); backdrop-filter: blur(8px); }
  .nav a { color: var(--ink); }
}