/* Farbpalette der ursprünglichen Website */
:root {
  --ink: #2d2632;
  --muted: #6f6574;
  --cream: #fbf7f2;
  --paper: #fffdfa;
  --olive: #755c84;
  --olive-dark: #4e3a5a;
  --sand: #d9b8bd;
  --gold: #d3af37;
  --line: rgba(87, 65, 96, 0.14);
  --shadow: 0 24px 70px rgba(63, 43, 73, 0.12);
}

.site-header.scrolled {
  background: rgba(251, 247, 242, 0.92);
  box-shadow: 0 8px 30px rgba(51, 38, 56, 0.08);
}

.hero {
  background: radial-gradient(circle at 12% 12%, rgba(218, 189, 224, 0.35) 0, transparent 32%), var(--cream);
}

.methods,
.pricing {
  background: #f1e9f0;
}

@media (max-width: 980px) {
  .site-header.menu-open {
    background: rgba(251, 247, 242, 0.98);
    box-shadow: 0 8px 30px rgba(51, 38, 56, 0.12);
  }

  #navigation {
    z-index: 30;
    width: min(320px, calc(100vw - 40px));
    border: 1px solid var(--line);
  }

  #navigation.open { display: flex; }
}

/* Einheitliche Bildform ohne Bögen oder ovale Masken */
.hero-image img,
.story-image img,
.about-visual img,
.wide-image img,
img.rounded {
  border-radius: 28px;
}

.hero-image::before {
  border-radius: 34px;
}

/* Eyebrow-Überschriften verwenden überall den Goldton des Logos. */
.eyebrow {
  color: var(--gold) !important;
}