/* Goldzeit Kosmetik — Design-System (1:1 aus buchungssystem/src/app/globals.css) */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  --cream: #FBF7F1;
  --cream-dark: #F4EFE6;
  --teal: #48B2AC;
  --teal-light: #67C7C2;
  --teal-deep: #2C6F6B;
  --teal-dark: #1F504D;
  --gold: #C29A45;
  --gold-light: #EFDCA2;
  --gold-dark: #A48033;
  --ink: #2A2622;
  --ink-light: #544E48;
  --ink-muted: #8C857E;

  --font-fraunces: "Fraunces", Georgia, serif;
  --font-hanken: "Hanken Grotesk", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-hanken), "Hanken Grotesk", system-ui, sans-serif;
  color: var(--ink);
  background-color: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Background ambient light effects */

.ambient-teal-glow {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  width: min(85vw, 640px);
  aspect-ratio: 1;
  background: radial-gradient(
    circle at center,
    rgba(72, 178, 172, 0.22),
    rgba(72, 178, 172, 0.08) 45%,
    transparent 68%
  );
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.ambient-gold-glow {
  position: fixed;
  top: -15%;
  right: -10%;
  width: 60vw;
  height: 60vh;
  max-width: 560px;
  background: radial-gradient(
    circle at center,
    rgba(239, 220, 162, 0.4),
    rgba(194, 154, 69, 0.1) 45%,
    transparent 70%
  );
  z-index: 0;
  pointer-events: none;
}

/* Shimmer gradient text */

.shimmer-gold {
  background: linear-gradient(
    100deg,
    var(--gold) 28%,
    var(--gold-light) 48%,
    #fff7e3 52%,
    var(--gold-light) 56%,
    var(--gold) 72%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4.5s linear infinite;
}

@keyframes shimmer {
  to { background-position: -220% center; }
}

/* Sparkles animation */

.sparkle-twinkle {
  animation: twinkle 3.5s ease-in-out infinite, sparkle-drift 6s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(239, 220, 162, 0.8);
  will-change: scale, rotate, translate, opacity;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.25; scale: 0.75; rotate: 0deg; }
  50% { opacity: 1; scale: 1.18; rotate: 35deg; }
}

@keyframes sparkle-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

/* Glassmorphism surfaces */

.glass-header {
  background: color-mix(in srgb, var(--cream) 84%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(72, 178, 172, 0.22);
}

.glass-card {
  background: color-mix(in srgb, #ffffff 82%, var(--cream));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(194, 154, 69, 0.16);
  box-shadow: 0 10px 30px -5px rgba(42, 38, 34, 0.05);
  transition: transform 0.6s cubic-bezier(.16,1,.3,1), box-shadow 0.6s cubic-bezier(.16,1,.3,1), border-color 0.6s cubic-bezier(.16,1,.3,1);
}

/* Shimmer sweep on primary gold CTAs */

.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  left: -75%;
  width: 50%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 1.1s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}

.btn-shimmer:hover::after {
  left: 125%;
}

/* Periodic attention-getting wiggle (header phone button) */

@keyframes phone-wiggle {
  0%, 100% { rotate: 0deg; }
  2% { rotate: -16deg; }
  4% { rotate: 14deg; }
  6% { rotate: -12deg; }
  8% { rotate: 9deg; }
  10% { rotate: -6deg; }
  12% { rotate: 4deg; }
  14% { rotate: -2deg; }
  16%, 100% { rotate: 0deg; }
}

.animate-phone-wiggle {
  animation: phone-wiggle 4s ease-in-out infinite;
  transform-origin: 50% 20%;
}

.gold-divider {
  width: 72px;
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 1.5rem auto;
}

/* Datenschutzhinweis: Die Seite verwendet keine optionalen Cookies. */
.cookie-notice {
  position: fixed;
  z-index: 60;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  max-width: 42rem;
  margin-inline: auto;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(194, 154, 69, 0.35);
  border-radius: 1rem;
  box-shadow: 0 18px 45px rgba(42, 38, 34, 0.2);
}

.cookie-notice[hidden] { display: none; }

.cookie-notice__content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cookie-notice h2 {
  margin: 0 0 0.2rem;
  color: var(--teal-deep);
  font-size: 1rem;
}

.cookie-notice p {
  margin: 0;
  color: var(--ink-light);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.cookie-notice a,
.footer-link-button {
  color: var(--teal-deep);
  text-decoration: underline;
}

.cookie-notice__button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.65rem 0.9rem;
  background: var(--teal-deep);
  color: #fff;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.footer-link-button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 480px) {
  .cookie-notice__content { align-items: flex-start; flex-direction: column; }
  .cookie-notice__button { width: 100%; }
}

/* Focus styles */

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Custom discreet scrollbar for date strip */

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.gold-scrollbar::-webkit-scrollbar { height: 6px; width: 6px; }
.gold-scrollbar::-webkit-scrollbar-track { background: rgba(194, 154, 69, 0.08); border-radius: 3px; }
.gold-scrollbar::-webkit-scrollbar-thumb { background: rgba(194, 154, 69, 0.3); border-radius: 3px; }
.gold-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Reduced motion preference */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (min-width: 640px) {
  button.bg-gradient-to-r.from-gold.to-gold-dark,
  a.bg-gradient-to-r.from-gold.to-gold-dark,
  button.bg-gradient-to-r.from-gold.via-gold.to-gold-dark,
  a.bg-gradient-to-r.from-gold.via-gold.to-gold-dark {
    box-shadow: 0 6px 14px rgba(194, 154, 69, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.03);
    font-size: 0.9375rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-radius: 0.75rem;
    transition: transform 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.45s cubic-bezier(.16,1,.3,1);
  }

  button.bg-gradient-to-r.from-gold.to-gold-dark:hover,
  a.bg-gradient-to-r.from-gold.to-gold-dark:hover,
  button.bg-gradient-to-r.from-gold.via-gold.to-gold-dark:hover,
  a.bg-gradient-to-r.from-gold.via-gold.to-gold-dark:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 22px rgba(194, 154, 69, 0.12);
  }
}

/* ---------- Wizard-Schritt-Übergang (Ersatz für Framer-Motion AnimatePresence) ---------- */

.step-transition {
  animation: stepFadeSlide 0.9s cubic-bezier(.16,1,.3,1) both;
  will-change: opacity, transform;
}

@keyframes stepFadeSlide {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.step-transition-out {
  animation: stepFadeSlideOut 0.45s cubic-bezier(.4,0,1,1) both;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Lets #bookingContent grow/shrink smoothly between steps of different
   height instead of snapping the moment the new step's markup is swapped in. */
.height-animating {
  overflow: hidden;
  transition: height 0.6s cubic-bezier(.16,1,.3,1);
  will-change: height;
}

@keyframes stepFadeSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-14px); }
}

/* ---------- Karten-Hover (Ersatz für Framer-Motion whileHover/whileTap) ---------- */

.card-hoverable {
  transition: transform 0.5s cubic-bezier(.16,1,.3,1), box-shadow 0.5s cubic-bezier(.16,1,.3,1);
}
.card-hoverable:hover { transform: translateY(-3px); }
.card-hoverable:active { transform: scale(0.99); transition-duration: .2s; }

/* ---------- Scroll-Reveal (progressive enhancement — sichtbar ohne JS) ---------- */

.reveal { opacity: 1; transform: none; }
html.js-enabled .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0s);
}
html.js-enabled .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Moderner Nav-Link-Unterstrich ---------- */

.nav-underline {
  position: relative;
}
.nav-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transition: right .5s cubic-bezier(.16,1,.3,1);
}
.nav-underline:hover::after,
.nav-underline:focus-visible::after {
  right: 0;
}

/* ---------- Sanft ein-/ausblendendes Mobil-Dropdown (Header- & Admin-Menü) ---------- */

.mobile-dropdown {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(.16,1,.3,1), transform 0.4s cubic-bezier(.16,1,.3,1);
}
.mobile-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}