/* ──────────────────────────────────────────────────────────────────
 * WINZERAI — Landing-Page-spezifische Stile
 * Hero mit Weinberg-Foto + dunklem Overlay, 3 redaktionelle Sektionen,
 * Closing-CTA mit Nacht-Wingert-Gradient. Landing ist standalone (erbt
 * nicht von base.html) und lädt kellerbuch.css explizit.
 * ────────────────────────────────────────────────────────────────── */

/* ── Header ────────────────────────────────────────────────────── */
.landing-header {
  position: relative;
  z-index: 10;
  background: var(--surface-dark);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23f4f1e8' stroke-width='0.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.06'><path d='M12 2C7 2 3 6 3 11c0 4 3 7 7 9 0-3 1-5 3-7-1 3-1 6 0 9 4-2 7-5 7-9 0-5-4-9-8-11Z'/><path d='M12 22V11'/></svg>");
  background-size: 60px 60px;
  padding: 0.6rem 1rem;
}
.landing-header .header-inner {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.landing-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--on-dark);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.landing-header .actions {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  flex-wrap: wrap;
}
.landing-header .actions a {
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid transparent;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--on-dark);
}
.landing-header .actions a.btn-primary {
  background: var(--interactive-green);
  color: #fff;
}
.landing-header .actions a.btn-ghost {
  border-color: #555;
}
.landing-header .theme-toggle {
  background: transparent;
  color: var(--on-dark);
  border: 0;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.landing-header .theme-toggle:hover { color: var(--green); }

/* ── Hero: Weinberg-Foto + dunkles Overlay + Headline ──────────── */
.hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Dunkler Fallback: bleibt bestehbar, wenn das Weinberg-Foto offline
     nicht lädt (PWA) — sonst wäre der Licht-Text auf dem Papier-Grund
     unsichtbar (1:1-Kontrast). Das Bild überdeckt diesen Fallback, sobald es da ist. */
  background: var(--surface-dark);
}
.hero__image {
  position: absolute;
  inset: 0;
  background-image: url("/static/img/vineyard-hero.webp");
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(28, 26, 38, 0.75) 0%,
    rgba(28, 26, 38, 0.55) 50%,
    rgba(28, 26, 38, 0.75) 100%
  );
  z-index: 2;
}
.hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 3rem 1.5rem;
  max-width: 40rem;
}
.hero__content h1 {
  font-size: 2.5rem;
  line-height: 1.15;
  color: var(--on-dark);
  margin: 0 auto 0.8rem;
  max-width: 32rem;
  font-weight: 700;
}
.hero__content p {
  font-size: 1.1rem;
  color: rgba(244, 241, 232, 0.85);
  max-width: 28rem;
  margin: 0 auto 2rem;
  line-height: 1.5;
}

/* CTA-Buttons im Hero (auf dunklem Hintergrund) */
.cta-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--interactive-green);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 0.7rem 2rem;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  min-height: 48px;
  transition: background 0.15s ease;
}
.btn-cta:hover { background: var(--interactive-green-hover); }
.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--on-dark);
  border: 2px solid rgba(244, 241, 232, 0.4);
  border-radius: 8px;
  padding: 0.65rem 1.8rem;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  min-height: 48px;
  transition: border-color 0.15s ease;
}
.btn-ghost-light:hover { border-color: var(--on-dark); }

/* ── 3 redaktionelle Sektionen ─────────────────────────────────── */
.how-it-works {
  max-width: 42rem;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.how-step {
  margin-bottom: 3.5rem;
}
.how-step:last-child { margin-bottom: 0; }
.how-step__icon {
  color: var(--interactive-green);
  margin-bottom: 0.6rem;
}
.how-step h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--dark);
}
.how-step p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Closing CTA: nacht-wingert mit vine-leaf-pattern ──────────────
 * Tiefes Grün → Nacht-Wingert statt Burgunder-Rot. Wein-Rot ist im
 * Kellerbuch semantisch an Gefahr/Kritisch gebunden, nicht dekorativ. */
.closing-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #223318, var(--surface-dark) 78%);
  background-image:
    linear-gradient(160deg, #223318, var(--surface-dark) 78%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23f4f1e8' stroke-width='0.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.05'><path d='M12 2C7 2 3 6 3 11c0 4 3 7 7 9 0-3 1-5 3-7-1 3-1 6 0 9 4-2 7-5 7-9 0-5-4-9-8-11Z'/><path d='M12 22V11'/></svg>");
  background-size: cover, 60px 60px;
}
.closing-cta__inner {
  text-align: center;
  padding: 4rem 1.5rem;
  max-width: 40rem;
  margin: 0 auto;
}
.closing-cta h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--on-dark);
  margin: 0 0 1.5rem;
}
.closing-cta .btn-cta {
  background: var(--interactive-green);
}
.closing-cta .btn-cta:hover { background: var(--interactive-green-hover); }

/* ── Footer ────────────────────────────────────────────────────── */
.footer {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
  background: var(--surface-dark);
  color: var(--muted-grau);
}