/* ────────────────────────────────────────────────────────────────
   Executive Edition — Farb-Overrides
   Helleres Blau, kein Weiß (beige Flächen), Marquee hell-lila.
   ──────────────────────────────────────────────────────────────── */

:root {
  /* Ein Blau überall: --blue (via Tweaks #C9D6E8); Nebentöne folgen dem Hauptblau */
  --blue-deep: var(--blue);
  --blue-soft: var(--blue);

  /* Kein reines Weiß mehr — warme beige Flächen; ein Beige-Ton überall */
  --paper: #F5F0E8;
  --cream: #F5F0E8;
  --cream-soft: #F5F0E8;
  --yellow-soft: var(--yellow);
}

/* Kompakter: kein erzwungenes Vollbild mehr, engere Abstände */
html { scroll-behavior: auto; }
section {
  padding: 80px 0;
  box-sizing: border-box;
}

/* Marquee-Banner: hell-lila, abgestimmt aufs helle Blau */
.marquee { background: oklch(0.91 0.035 310) !important; padding: 12px 0 !important; }
.marquee-item { font-size: clamp(24px, 3vw, 40px); }
/* Sterne: gelb */
.marquee-item .star { color: var(--yellow); }
.marquee-item .star svg { width: 32px; height: 32px; }

/* Keine Pfeile mehr — überall */
.btn-icon, .card-arrow { display: none !important; }

/* ─── Mehr Leben: Hover- & Klick-Animationen ─────────────── */

/* Service-Karten: spürbares Anheben mit federndem Easing */
.service-card {
  transition: transform .25s ease, background .35s ease !important;
}
.service-card:hover {
  transform: translateY(-4px) !important;
  background: var(--yellow) !important;
}
.service-card-hl:hover { transform: translateY(-4px) !important; }
.service-card:active { transform: translateY(0) !important; }

/* Buttons: federnder Hover + Klick-Pop */
.btn {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease, color .25s ease;
}
.btn:hover { transform: translateY(-3px) scale(1.03); }
.btn:active { transform: scale(0.95); }
.pkg-cta { transition: transform .25s ease, background .25s ease, color .25s ease !important; }
.pkg-cta:hover { transform: translateY(-4px) !important; }
.pkg-cta:active { transform: translateY(0) !important; }
.btn-yellow:hover { box-shadow: 0 14px 32px rgba(15,26,46,0.22); }
header .btn-yellow:hover { box-shadow: none !important; }

/* Hero-CTA: seitliche Bewegung statt nach oben — mit Wow-Faktor */
.hero-cta.no-wiggle { animation: none !important; }
.hero-cta.no-wiggle:hover { box-shadow: none !important; }
.hero-cta {
  overflow: hidden;
  position: relative;
  transition: transform .25s ease, background .25s ease, color .25s ease !important;
  animation: attention-wiggle 3.2s ease-in-out infinite;
}
.hero-cta:hover {
  transform: translateY(-4px) !important;
  box-shadow: none !important;
  animation: none !important;
}
.hero-cta:active {
  transform: translateY(0) !important;
}
@keyframes wiggle-x {
  0%, 100% { transform: translateX(10px) scale(1.05); }
  50% { transform: translateX(2px) scale(1.05); }
}
@keyframes attention-wiggle {
  0%, 60%, 100% { transform: translateX(0); }
  68% { transform: translateX(-6px); }
  76% { transform: translateX(5px); }
  84% { transform: translateX(-3px); }
  92% { transform: translateX(2px); }
}

/* Chips: dezenter Hover */
.chip {
  transition: transform .25s ease, background .2s, color .2s;
}
.chip:hover { transform: translateY(-2px); }
.chip:active { transform: translateY(0); }
@keyframes chip-pop {
  0% { transform: scale(0.92); }
  60% { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.chip[data-active="true"] { animation: none; background: var(--yellow); color: var(--ink); }

/* Paket-Karten-Hover: dasselbe Dunkelblau wie die ganze Website */
.surface-ink { background: var(--ink) !important; }

/* Kursive Serif überall so eng wie die Wortmarke unten */
.display .italic, .italic {
  letter-spacing: -0.04em;
}

/* Karten/Chips, die auf Weiß standen, laufen jetzt auf beige */
.chip { background: var(--cream-soft); }
.chip:hover { background: var(--yellow); color: var(--ink); }
.chip[data-active="true"] { background: var(--ink); color: var(--cream-soft); }
.chip[data-active="true"]:hover { background: var(--ink); color: var(--cream-soft); }

/* Kein reines Weiß/Schwarz in Buttons & Icons — beige statt weiß */
.btn { color: var(--cream-soft); }
.btn-yellow { color: var(--ink); }
.btn-ghost { color: var(--ink); }
.btn-icon { background: rgba(245,240,232,0.18); }
.btn-yellow .btn-icon { background: var(--ink); color: var(--yellow); }
.btn-ghost .btn-icon { background: var(--ink); color: var(--cream-soft); }
.chip[data-active="true"] { background: var(--yellow); color: var(--ink); }