/* =============================================================
   ABNEHMEN IM LIEGEN WIESBADEN — Editorial Wellness Spa
   See STYLEGUIDE.md for design tokens
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --accent: #8900C2;
  --accent-rgb: 137, 0, 194;
  --bg-cream: #FAF7F2;
  --bg-beige: #F0EDE8;
  --bg-deep: #1F2C3A;
  --bg-deeper: #1A2530;
  --ink: #2C3E50;
  --mute: #7C8A97;
  --soft: #9CA8B3;
  --gold: #C9A961;
}

* { -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background-color: var(--bg-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

.font-heading { font-family: 'Manrope', sans-serif; }
.font-body { font-family: 'DM Sans', sans-serif; }
.font-drama {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

::selection { background: rgba(137, 0, 194, 0.18); color: #2C3E50; }

img { transition: opacity 0.4s ease; max-width: 100%; height: auto; }

/* ─── Smooth anchor scroll offset ─── */
section[id] { scroll-margin-top: 80px; }

/* ─── Form inputs ─── */
.form-input {
  font-family: 'DM Sans', sans-serif;
  color: #2C3E50;
}
.form-input::placeholder { color: #B5BCC4; }

/* iOS doesn't zoom on focus when font-size is 16px+ */
input[type="text"], input[type="email"], input[type="tel"] {
  font-size: 16px;
}

/* ═════════════════════════════════════════════════════════════
   AMBIENT MOTION
   ═════════════════════════════════════════════════════════════ */

/* CTA breathing pulse — subtle, not aggressive */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 12px 40px -12px rgba(137, 0, 194, 0.5), 0 0 0 0 rgba(137, 0, 194, 0); }
  50% { box-shadow: 0 12px 40px -12px rgba(137, 0, 194, 0.55), 0 0 0 12px rgba(137, 0, 194, 0); }
}
.cta-pulse {
  animation: ctaPulse 3.2s ease-in-out infinite;
}

/* Gentle vertical bounce — for scroll indicator */
@keyframes bounceSoft {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(8px); opacity: 1; }
}
.animate-bounce-soft {
  animation: bounceSoft 2.4s ease-in-out infinite;
}

/* Scale breathe — for success state */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.animate-breathe { animation: breathe 3s ease-in-out infinite; }

/* Float — subtle vertical drift */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-float { animation: float 5s ease-in-out infinite; }
.animate-float-slow { animation: float 7s ease-in-out infinite; }

/* ═════════════════════════════════════════════════════════════
   REVEAL ON SCROLL
   ═════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.reveal.is-visible,
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ═════════════════════════════════════════════════════════════
   FAQ ACCORDION
   ═════════════════════════════════════════════════════════════ */

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary svg.chevron { transform: rotate(180deg); }

details {
  transition: box-shadow 0.3s ease;
}

/* ═════════════════════════════════════════════════════════════
   CASE STUDY CARDS
   ═════════════════════════════════════════════════════════════ */

.case-card .case-img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.case-card:hover .case-img {
  transform: scale(1.04);
}

/* When image LOADS successfully → hide fallback, show overlays */
.case-card .case-img:not([style*="display: none"]) ~ .case-fallback {
  display: none;
}

/* When image FAILS (display:none via onError) → hide overlays, show fallback */
.case-card .case-img[style*="display: none"] ~ .case-divider,
.case-card .case-img[style*="display: none"] ~ .case-labels,
.case-card .case-img[style*="display: none"] ~ .case-badge {
  display: none;
}

/* Subtle dark gradient at bottom of image for stat-pill legibility */
.case-card .case-img:not([style*="display: none"]) {
  filter: brightness(0.98);
}
.case-card:hover .case-img:not([style*="display: none"]) {
  filter: brightness(1.02);
}

/* ═════════════════════════════════════════════════════════════
   GARANTIE — Premium animated light-ring around shield icon
   ═════════════════════════════════════════════════════════════ */

@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes haloPulse {
  0%, 100% { transform: scale(1); opacity: 0.65; }
  50% { transform: scale(1.12); opacity: 1; }
}
@keyframes shieldGlow {
  0%, 100% { filter: drop-shadow(0 4px 18px rgba(137, 0, 194, 0.35)); }
  50% { filter: drop-shadow(0 8px 26px rgba(137, 0, 194, 0.55)); }
}

.shield-halo {
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(137,0,194,0.28) 0%, rgba(137,0,194,0) 70%);
  filter: blur(8px);
  animation: haloPulse 3.2s ease-in-out infinite;
  pointer-events: none;
}

.shield-orbit {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: conic-gradient(
    from 0deg,
    rgba(216, 164, 240, 0) 0deg,
    rgba(216, 164, 240, 0) 200deg,
    rgba(216, 164, 240, 0.5) 260deg,
    #E8C5F5 310deg,
    rgba(137, 0, 194, 0.6) 350deg,
    rgba(216, 164, 240, 0) 360deg
  );
  animation: orbitSpin 4.5s linear infinite;
  pointer-events: none;
}
.shield-orbit::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #FAF7F2 0%, #ffffff 100%);
}

.shield-icon-anim {
  animation: shieldGlow 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .shield-halo, .shield-orbit, .shield-icon-anim { animation: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   MOTION-REDUCE FALLBACK
   ═════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}