/* ═══ Probleme-Sektion: Anatomie-Hotspots (Variante F2) ═══ */

.s-anatomie {
  --tuerkis: #279c94;
  --tuerkis-light: #7fe0d8;
  --tuerkis-dark: #1a7570;
  --navy: #00315c;
  --navy-deep: #001a33;
  --ink: #0a1a2e;
  --bg: #f2eee6;
  --creme-light: #fdfaf3;
  --hairline: rgba(0, 49, 92, 0.12);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(39, 156, 148, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0, 49, 92, 0.04) 0%, transparent 70%),
    var(--bg);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
}
.s-anatomie .font-display { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; }

.s-anatomie .silhouette {
  fill: var(--tuerkis); fill-opacity: 0.10;
  stroke: var(--navy); stroke-width: 2; stroke-linejoin: round;
  opacity: 0.85; vector-effect: non-scaling-stroke;
}

.s-anatomie .hotspot {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer; transform: translate(-50%, -50%);
  background: transparent; border: 0; padding: 0; z-index: 10;
}
.s-anatomie .hotspot:focus-visible { outline: 2px solid var(--tuerkis); outline-offset: 4px; border-radius: 50%; }

.s-anatomie .hotspot-core {
  position: absolute; inset: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: var(--tuerkis); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(39,156,148,0.18), 0 0 16px rgba(39,156,148,0.5), 0 4px 12px rgba(39,156,148,0.3);
  transition: all 280ms cubic-bezier(.4,0,.2,1);
}
.s-anatomie .hotspot[aria-selected="true"] .hotspot-core {
  transform: scale(1.4); background: var(--navy);
  box-shadow: 0 0 0 6px rgba(39,156,148,0.25), 0 0 24px rgba(39,156,148,0.6), 0 4px 16px rgba(0,49,92,0.3);
}
.s-anatomie .hotspot:hover .hotspot-core { transform: scale(1.2); }

@keyframes anatomie-pulse-ring {
  0%   { opacity: 0.6; transform: scale(0.7); }
  100% { opacity: 0;   transform: scale(2.6); }
}
.s-anatomie .hotspot-pulse {
  position: absolute; inset: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 1.5px solid var(--tuerkis);
  animation: anatomie-pulse-ring 2.4s ease-out infinite;
}
.s-anatomie .hotspot[aria-selected="true"] .hotspot-pulse {
  animation-duration: 1.4s; border-color: var(--navy);
}

.s-anatomie .hotspot-label {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(2px);
  background: var(--navy); color: var(--creme-light); padding: 5px 10px; border-radius: 5px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: all 200ms ease;
  font-family: 'Inter', system-ui, sans-serif;
}
.s-anatomie .hotspot:hover .hotspot-label,
.s-anatomie .hotspot:focus-visible .hotspot-label {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

.s-anatomie .content-card {
  background: var(--creme-light); border: 1px solid var(--hairline); position: relative;
  box-shadow: 0 30px 60px -20px rgba(0,49,92,0.18), 0 12px 24px -10px rgba(0,49,92,0.08);
}
@media (min-width: 1024px) {
  .s-anatomie .content-card { min-height: 440px; }
}
.s-anatomie .content-card::before {
  content: ''; position: absolute; top: 0; left: 32px;
  width: 64px; height: 3px; background: var(--tuerkis); border-radius: 0 0 3px 3px;
}

/* ── Body responsive auf Desktop/Laptop (Default-Größe für >= 760px) ── */
@media (min-width: 760px) {
  .s-anatomie #body-wrap { width: clamp(240px, 26vw, 360px) !important; }
  /* Auf Laptops mit kürzerer Höhe: max-height limitieren statt nur via aspect-ratio */
  .s-anatomie #body-wrap { max-height: 72vh; aspect-ratio: 970/2200; }
  /* Section-Padding auf Laptop kleiner (vorher py-20 = 5rem) */
  .s-anatomie { padding-top: clamp(2.75rem, 6vh, 5rem); padding-bottom: clamp(2.75rem, 6vh, 5rem); }
  .s-anatomie h2 { font-size: clamp(1.8rem, 3vw, 3rem) !important; }
}

/* ── Mobile (<= 760px) — kompakter ── */
@media (max-width: 760px) {
  .s-anatomie { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .s-anatomie h2 { font-size: 1.6rem !important; line-height: 1.18 !important; }
  .s-anatomie .max-w-2xl > p { font-size: 0.7rem !important; letter-spacing: 0.18em !important; margin-bottom: 0.75rem !important; }
  .s-anatomie .mb-10 { margin-bottom: 1.75rem !important; }

  /* Körper kleiner */
  .s-anatomie #body-wrap { width: min(170px, 55%) !important; margin-bottom: 0.5rem; }

  /* Content-Card kompakter */
  .s-anatomie .content-card { padding: 1.5rem 1.25rem !important; border-radius: 14px !important; }
  .s-anatomie .content-card::before { left: 18px; width: 44px; height: 2px; }
  .s-anatomie #anat-tag { font-size: 10px !important; letter-spacing: 0.16em !important; margin-bottom: 0.5rem !important; }
  .s-anatomie #anat-headline { font-size: 1.05rem !important; line-height: 1.3 !important; margin-bottom: 0.7rem !important; }
  .s-anatomie #anat-body { font-size: 0.88rem !important; line-height: 1.55 !important; }
  .s-anatomie #anat-panel .mt-7 { margin-top: 1.1rem !important; }
  .s-anatomie #anat-panel .pt-6 { padding-top: 0.9rem !important; }
  .s-anatomie #anat-kicker, .s-anatomie #anat-kicker-sub { font-size: 0.95rem !important; line-height: 1.35 !important; }

  /* Hotspots Touch-friendly */
  .s-anatomie .hotspot { width: 44px; height: 44px; }
  .s-anatomie .hotspot-core { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
  .s-anatomie .hotspot-pulse { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }

  /* Hotspot-Label auf Mobile besser lesbar */
  .s-anatomie .hotspot-label { font-size: 9px; padding: 4px 8px; }

  /* Grid-Gap reduzieren */
  .s-anatomie .gap-10 { gap: 1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .s-anatomie .hotspot-pulse { animation: none; opacity: 0.4; }
  .s-anatomie * { transition-duration: 0.01ms !important; }
}

/* Hint: "Tipp einen Bereich an" */
.s-anatomie .anat-hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 8px 16px;
  background: rgba(39, 156, 148, 0.08);
  border: 1px solid rgba(39, 156, 148, 0.22);
  border-radius: 999px;
  color: var(--tuerkis-dark);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.s-anatomie .anat-hint__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  animation: anat-hint-tap 2.2s ease-in-out infinite;
}
@keyframes anat-hint-tap {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20%      { transform: translate(2px, -2px) rotate(-6deg); }
  35%      { transform: translate(0, 2px) rotate(0); }
  50%      { transform: translate(0, 0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .s-anatomie .anat-hint__icon { animation: none; }
}

/* Pulse etwas stärker und schneller — mehr Sichtbarkeit */
.s-anatomie .hotspot-pulse {
  animation-duration: 1.8s;
}

/* "Wähle deinen Schmerz" Lead unter H2 */
.s-anatomie .anat-lead {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--tuerkis-dark);
  letter-spacing: 0;
  text-transform: none;
}
/* Aktiver Hotspot zeigt Label dauerhaft */
.s-anatomie .hotspot[aria-selected="true"] .hotspot-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}