/* ═══════════════════════════════════════════════════════════════════
   ANANDA — ENHANCEMENTS LAYER
   Visuelle Verfeinerungen + Mobile-CTAs
   Wird zusätzlich zur styles.css geladen.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────
   KLICK-SCHUTZ FÜR NAVIGATION
   Stellt sicher dass Header-Links über allem anderen sind und keine
   transformierten/animierten Elemente sie überdecken können.
   ─────────────────────────────────────────────────────────────────── */
.site-header {
  z-index: 1000 !important;  /* über allen Reveal-/Hero-Elementen */
  isolation: isolate;
}
.site-nav,
.site-nav a {
  position: relative;
  z-index: 2;
  pointer-events: auto !important;  /* darf nicht von ::before/::after blockiert werden */
}

/* Reveal-Elemente dürfen NIE Klicks blockieren wenn unsichtbar */
.reveal:not(.revealed) {
  pointer-events: none;
}
.reveal.revealed {
  pointer-events: auto;
}

/* ───────────────────────────────────────────────────────────────────
   1. WHATSAPP FLOATING BUTTON
   Schwebt rechts unten auf allen Seiten.
   ─────────────────────────────────────────────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  box-shadow: 0 6px 24px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s;
  text-decoration: none;
  animation: wa-pulse 2.5s ease-in-out infinite;
}
.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 32px rgba(37,211,102,0.6), 0 4px 12px rgba(0,0,0,0.35);
  animation-play-state: paused;
}
.wa-float:active { transform: scale(0.95); }
.wa-float svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.3),
                          0 0 0 0 rgba(37,211,102,0.5); }
  50%      { box-shadow: 0 6px 24px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.3),
                          0 0 0 18px rgba(37,211,102,0); }
}
.wa-float-tooltip {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.wa-float:hover .wa-float-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* (Mobile-Mods für WhatsApp-Float entfernt – Button wurde deaktiviert) */

/* ───────────────────────────────────────────────────────────────────
   2. MOBILE STICKY CTA (Anrufen, Buchen, WhatsApp)
   Nur auf Smartphones sichtbar.
   ─────────────────────────────────────────────────────────────────── */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8500;
  background: rgba(17,19,17,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(196,164,107,0.25);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
  padding: 0.5rem;
  gap: 0.5rem;
  animation: cta-slide-up 0.4s cubic-bezier(0.4,0,0.2,1);
}
@keyframes cta-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.mobile-cta-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.6rem 0.5rem;
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.15s;
  color: #F5F0E8;
}
.mobile-cta-btn:active { transform: scale(0.95); }
.mobile-cta-btn svg { width: 22px; height: 22px; }
.mobile-cta-btn.call    { background: rgba(196,164,107,0.12); color: #D9BC8E; }
.mobile-cta-btn.call:hover    { background: rgba(196,164,107,0.22); }
.mobile-cta-btn.book    { background: linear-gradient(135deg, #C4A46B, #A8875A); color: #1A1C1A; box-shadow: 0 2px 12px rgba(196,164,107,0.35); }
.mobile-cta-btn.book:hover    { filter: brightness(1.08); }
.mobile-cta-btn.whatsapp { background: rgba(37,211,102,0.15); color: #4ade80; }
.mobile-cta-btn.whatsapp svg { fill: #25D366; }

@media (max-width: 768px) {
  .mobile-cta { display: flex; }
  /* Footer-Abstand schaffen damit die Sticky-CTA nichts überdeckt */
  body { padding-bottom: 5rem; }
}

/* ───────────────────────────────────────────────────────────────────
   3. SCROLL-REVEAL ANIMATIONEN
   Elemente mit .reveal blenden beim Scrollen sanft ein.
   ─────────────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Verschiedene Verzögerungen für gestaffelte Effekte */
.reveal.reveal-delay-1 { transition-delay: 0.1s; }
.reveal.reveal-delay-2 { transition-delay: 0.2s; }
.reveal.reveal-delay-3 { transition-delay: 0.3s; }
.reveal.reveal-delay-4 { transition-delay: 0.4s; }
/* Reduced-motion: Animationen für nutzer mit präferenz deaktivieren */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .wa-float { animation: none; }
}

/* ───────────────────────────────────────────────────────────────────
   4. HERO PARALLAX
   Background-Image bewegt sich langsamer als der Scroll.
   ─────────────────────────────────────────────────────────────────── */
.hero-background-image {
  will-change: transform;
  transition: transform 0.05s linear;
}
/* Subtiler Vignette-Effekt für mehr Tiefe */
.page-hero {
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
              transparent 40%,
              rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: 1;
}
.page-hero > .container { position: relative; z-index: 2; }
/* Hero-Actions und Buttons explizit über allen Overlay-Layern (z-index: 1) */
.hero-actions {
  position: relative;
  z-index: 10;
}
.hero-actions .button {
  position: relative;
  z-index: 11;
  /* Sicherstellen dass pointer-events aktiv sind — nie von einem Overlay blockiert */
  pointer-events: auto !important;
}

/* ───────────────────────────────────────────────────────────────────
   5. TREATMENT-CARDS — HOVER POLISH
   Sanftes Anheben + goldener Glow + Bild-Zoom.
   ─────────────────────────────────────────────────────────────────── */
.premium-treatment-card {
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.4s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
  position: relative;
}
.premium-treatment-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent, rgba(196,164,107,0.4), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
/* ─── 1. goldPulse-Animation aggressiv deaktivieren ───────────────────
   Alle Varianten von .button-large bekommen 3s Endlos-Pulse aus styles.css,
   was wie „Flackern" oder mit-Klicken aussieht. */
html body .button.button-large,
html body .button-large.button-secondary,
html body a.button-large,
html body button.button-large {
  animation-name: none !important;
  animation-duration: 0s !important;
  animation-iteration-count: 0 !important;
  animation: none !important;
}

/* ─── 2. Card-Hover mit sanftem Lift – KOMPAKTERE Shadow ──────────────
   Original-Shadow (50px Blur) strahlte bis zum „Alle Angebote ansehen"-
   Button und ließ ihn wirken als wäre er auch aktiv. Jetzt enger.
   opacity ist hier extra angegeben damit die Einblend-Animation von
   .animate-in (app.js) weich über 0.45s läuft und nicht abrupt poppt. */
.premium-treatment-card {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s ease-out;
}
.premium-treatment-card:hover {
  transform: translateY(-4px);
  /* Schatten bleibt rund um die Karte, ohne nach unten zu „auslaufen" */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(196, 164, 107, 0.3);
}
.premium-treatment-card:hover::before { opacity: 1; }

.premium-treatment-image {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.45s ease;
}
.premium-treatment-card:hover .premium-treatment-image {
  transform: scale(1.05);
  filter: brightness(1.05);
}

.premium-treatment-button {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s, filter 0.2s;
}
.premium-treatment-button:hover {
  /* translateY(-2px) ENTFERNT: Hover-Jitter-Flackern (gleiche Ursache wie .button:hover).
     Box-Shadow-Bleed ebenfalls reduziert: war 20px, jetzt Ring-Stil ohne Auslaufen. */
  transform: translateY(0);
  filter: brightness(1.12);
  box-shadow: 0 0 0 2px rgba(196, 164, 107, 0.45), 0 4px 12px rgba(196, 164, 107, 0.25);
}

/* ─── 3. „Alle Angebote ansehen" Button — abgesicherter Outline-Style ─
   Mit maximaler Spezifität via Attribut-Selektor um sicher zu gewinnen */
html body a[href="prices.html"].button.button-large.button-secondary,
html body .button.button-large.button-secondary {
  background: transparent !important;
  color: #D9BC8E !important;
  border: 2px solid rgba(196, 164, 107, 0.5) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  animation: none !important;
  /* Verhindert dass Card-Hover-Transform sich auf diesen Button vererbt */
  transform: none;
}

/* :focus & :focus-visible — separat behandeln, damit nach Klick der
   Button nicht „klebt" wie hover */
html body a[href="prices.html"].button.button-large.button-secondary:focus:not(:focus-visible) {
  /* Maus-Klick: keine sichtbare Focus-Markierung */
  background: transparent !important;
  color: #D9BC8E !important;
  border-color: rgba(196, 164, 107, 0.5) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
html body a[href="prices.html"].button.button-large.button-secondary:focus-visible {
  /* Tastatur-Navigation: dezente Outline */
  outline: 2px dashed rgba(196, 164, 107, 0.6);
  outline-offset: 4px;
}

/* Hover nur wenn der Cursor wirklich DIREKT darüber ist */
html body a[href="prices.html"].button.button-large.button-secondary:hover,
html body .button.button-large.button-secondary:hover {
  background: linear-gradient(135deg, #D9BC8E, #B89259) !important;
  color: #1A1C1A !important;
  border-color: #D9BC8E !important;
  transform: translateY(0);
  box-shadow: 0 0 0 2px rgba(196, 164, 107, 0.55),
              0 4px 16px rgba(196, 164, 107, 0.35) !important;
}

/* ─── 4. Globaler :focus-Reset für alle Buttons ──────────────────────
   Verhindert dass ein vorher angeklickter Button hover-ähnlich aussieht */
html body .button:focus:not(:focus-visible),
html body .premium-treatment-button:focus:not(:focus-visible) {
  outline: none;
  /* Properties auf Default zurück — kein "gestickter Hover-Look" */
  filter: none;
  transform: none;
}

/* ───────────────────────────────────────────────────────────────────
   6. SANFTE SECTION-ÜBERGÄNGE
   Schmaler goldener Gradient als Trenner zwischen Sektionen.
   ─────────────────────────────────────────────────────────────────── */
.section + .section,
.section + .premium-service-section,
.premium-service-section + .section {
  position: relative;
}
.section + .section::before,
.section + .premium-service-section::before,
.premium-service-section + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,164,107,0.5), transparent);
  /* Dekorative Trennlinie darf keine Klick-Events blockieren */
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────────
   BUTTONS — Sichtbarkeit & Konsistenz
   Garantiert dass alle Buttons goldenes Premium-Design haben
   ─────────────────────────────────────────────────────────────────── */

/* Primary Button: solides Gold mit dunklem Text — überschreibt alle
   möglichen Cascade-Konflikte aus styles.css / enhancements.css */
html body .button {
  background: linear-gradient(135deg, #D9BC8E, #B89259);
  color: #1A1C1A;
  border: none;
  box-shadow: 0 4px 14px rgba(196, 164, 107, 0.3);
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.3s ease, filter 0.2s ease;
}
html body .button:hover {
  color: #0F1411;
  filter: brightness(1.12);
  /* translateY(-2px) ENTFERNT: verursachte Hover-Jitter-Flackern.
     Wenn der Cursor an der Button-Unterkante lag, bewegte sich der Button 2px
     weg, Hover flog raus, Button zurück, Hover wieder rein → schnelles Flackern.
     Zusätzlich strahlte der 24px Box-Shadow über den 16px Gap zum Nachbar-Button,
     was wie synchrones Anklicken beider Buttons wirkte. */
  transform: translateY(0);
  box-shadow: 0 0 0 2px rgba(196, 164, 107, 0.55),
              0 4px 16px rgba(196, 164, 107, 0.35);
}

/* Secondary Button: Outline-Stil mit klarem Goldrand */
html body .button-secondary {
  background: transparent;
  color: #D9BC8E;
  border: 2px solid #C4A46B;
  box-shadow: none;
}
html body .button-secondary:hover {
  background: linear-gradient(135deg, #D9BC8E, #B89259);
  color: #1A1C1A;
  border-color: #D9BC8E;
  transform: translateY(0);
  box-shadow: 0 0 0 2px rgba(196, 164, 107, 0.55),
              0 4px 16px rgba(196, 164, 107, 0.35);
}

/* Nav-Header „Termin buchen" — gleiche Logik, höhere Spezifität */
html body .site-nav .button,
html body .site-nav .button-small {
  background: linear-gradient(135deg, #D9BC8E, #B89259);
  color: #1A1C1A;
}
html body .site-nav .button:hover,
html body .site-nav .button-small:hover {
  color: #0F1411;
}

/* ───────────────────────────────────────────────────────────────────
   PREMIUM HERO-CTAs (prices.html — .premium-home-actions)
   Elegantere, hochwertigere Variante als Standard-Buttons
   ─────────────────────────────────────────────────────────────────── */
.premium-home-actions {
  gap: 1.5rem !important;
  margin-top: 2.5rem !important;
}

/* Primary CTA „Termin buchen" — refined gold mit Shimmer-Effekt */
html body .premium-home-actions .button:not(.button-secondary) {
  padding: 1.15rem 2.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #E5CBA0 0%, #C4A46B 45%, #A8875A 100%);
  color: #1A1C1A;
  border: none;
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 4px 14px rgba(196, 164, 107, 0.35),
    0 12px 40px rgba(160, 120, 64, 0.18);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.25s ease;
}

/* Shimmer-Glanz der über den Button wandert */
html body .premium-home-actions .button:not(.button-secondary)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 70%);
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
html body .premium-home-actions .button:not(.button-secondary):hover {
  filter: brightness(1.05);
  /* translateY(-3px) ENTFERNT: Hover-Jitter-Konsistenz */
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 0 0 2px rgba(196, 164, 107, 0.55),
    0 8px 24px rgba(196, 164, 107, 0.35);
}
html body .premium-home-actions .button:not(.button-secondary):hover::before {
  left: 110%;
}

/* Secondary CTA „Zur Startseite" — eleganter Outline mit goldenem Akzent */
html body .premium-home-actions .button-secondary {
  padding: 1.15rem 2.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
  color: #D9BC8E;
  border: 1px solid rgba(196, 164, 107, 0.4);
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Goldener Akzent-Strich oben & unten — sehr subtil */
html body .premium-home-actions .button-secondary::before,
html body .premium-home-actions .button-secondary::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C4A46B, transparent);
  transform: translateX(-50%);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
html body .premium-home-actions .button-secondary::before { top: 0; }
html body .premium-home-actions .button-secondary::after  { bottom: 0; }

html body .premium-home-actions .button-secondary:hover {
  color: #F5E6C8;
  border-color: rgba(196, 164, 107, 0.75);
  background: rgba(196, 164, 107, 0.05);
  /* translateY(-3px) ENTFERNT: Hover-Jitter-Konsistenz */
  transform: translateY(0);
  box-shadow:
    0 0 0 2px rgba(196, 164, 107, 0.4),
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 4px 14px rgba(196, 164, 107, 0.15);
}
html body .premium-home-actions .button-secondary:hover::before,
html body .premium-home-actions .button-secondary:hover::after {
  width: 80%;
}

/* Auf Mobile: gestapelt mit gleicher Breite */
@media (max-width: 600px) {
  .premium-home-actions {
    flex-direction: column !important;
    width: 100%;
    max-width: 320px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html body .premium-home-actions .button {
    width: 100%;
    text-align: center;
  }
}

/* Booking-Form Submit — passend zum eleganten Design der Buchungsseite,
   etwas zurückhaltender als Standard-Buttons (weniger Glow, gleicher Charakter) */
html body .booking-form button[type="submit"],
html body .booking-form .button.button-large {
  background: linear-gradient(135deg, #D9BC8E, #B89259);
  color: #1A1C1A;
  border: none;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 1rem 2rem;
  box-shadow: 0 4px 16px rgba(196, 164, 107, 0.25);
  transition: filter 0.2s, transform 0.2s, box-shadow 0.3s;
}
html body .booking-form button[type="submit"]:hover,
html body .booking-form .button.button-large:hover {
  filter: brightness(1.08);
  transform: translateY(0);
  box-shadow: 0 0 0 2px rgba(196, 164, 107, 0.5),
              0 4px 14px rgba(196, 164, 107, 0.3);
}

/* ───────────────────────────────────────────────────────────────────
   7. TRUST-BAR — ANIMATED STARS
   ─────────────────────────────────────────────────────────────────── */
.trust-bar-item {
  transition: transform 0.2s, background 0.2s;
}
.trust-bar-item:hover { transform: translateY(-2px); filter: brightness(1.05); }
.trust-bar-item .trust-icon {
  display: inline-block;
  transition: transform 0.3s;
}
.trust-bar-item:hover .trust-icon {
  transform: scale(1.2) rotate(-5deg);
}

/* ───────────────────────────────────────────────────────────────────
   8. LINKS IM TEXT — bessere Lesbarkeit
   ─────────────────────────────────────────────────────────────────── */
.impressum-card a,
main p a:not(.button) {
  color: var(--accent-light);
  border-bottom: 1px solid rgba(196,164,107,0.4);
  transition: border-color 0.2s, color 0.2s;
}
.impressum-card a:hover,
main p a:not(.button):hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}