/* ==========================================================================
   Richtung A · Hover-Zustände der Dioramen und die Oberfläche der Leistungskarten
   Jedes Diorama hat eine deckungsgleiche „eingeschaltete“ Variante (<name>-hover, Codex):
   sie blendet beim Hover der Karte ein (Displays leuchten, Sockel-Lichtsaum glüht, Akzentlicht).
   dio-hover.js lädt diese Bilder nur auf Geräten mit Maus. Ergänzt styles.css/effects.css/igel.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Diorama: Basis + Licht-Ebene
   -------------------------------------------------------------------------- */
.dio { position: relative; display: block; }
.dio > picture { display: block; width: 100%; height: 100%; }
.dio__lit, .hero-media__lit { position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none; transition: opacity .7s var(--ease); }
.dio__lit img, .hero-media__lit img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dio > picture img { transition: transform .8s var(--ease), filter .8s var(--ease); }

/* Wärmendes Licht hinter dem Diorama (unter dem Sockel), nur beim Hover */
.dio::before {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 6%; height: 34%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 204, 0, .38), rgba(255, 226, 139, .14) 60%, rgba(255, 226, 139, 0));
  opacity: 0; transform: scale(.8); transition: opacity .7s var(--ease), transform .8s var(--ease); pointer-events: none;
}
.dio { isolation: isolate; }

@media (hover: hover) and (pointer: fine) {
  :is(.check, .member, .service, .card, .step, .notice, .igel-aside, .pricelist, .checks__head, .blut__head):hover .dio__lit,
  :is(.check, .service, .card, .step, .igel-aside):focus-within .dio__lit,
  .dio:hover .dio__lit,
  .page-hero__visual:hover .hero-media__lit { opacity: 1; }
  :is(.check, .member, .service, .card, .step, .notice, .igel-aside, .checks__head, .blut__head):hover .dio::before,
  .dio:hover::before { opacity: 1; transform: scale(1); }
  :is(.check, .member, .service, .card, .step, .notice, .igel-aside, .checks__head, .blut__head):hover .dio > picture img,
  .dio:hover > picture img { filter: drop-shadow(0 18px 22px rgba(150, 90, 10, .2)) saturate(1.04); }
}
/* Aktive Leistung (Scrollspy am Stab): ihr Diorama ist „eingeschaltet“ */
.service.is-active .dio__lit { opacity: .9; }

/* --------------------------------------------------------------------------
   Leistungskarten neben dem Äskulapstab – Oberfläche und Hover
   Warmes Papier mit feiner Körnung, Licht folgt dem Zeiger (--fx-x/--fx-y aus effects.js),
   rot-gelbe Kapsel am linken Rand (Echo des Stabs), Diorama hebt sich und „schaltet ein“.
   -------------------------------------------------------------------------- */
.service {
  overflow: hidden; isolation: isolate;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(162deg, #FFFFFF 0%, #FFFCF7 52%, #FBF5EB 100%);
  border-color: rgba(230, 220, 207, .95);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(58, 33, 22, .04), 0 18px 40px -32px rgba(58, 33, 22, .3);
}
/* Licht, das dem Zeiger folgt (weich, warm) */
.service::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(520px circle at var(--fx-x, 30%) var(--fx-y, 20%), rgba(255, 226, 139, .26), rgba(255, 240, 205, .12) 38%, rgba(255, 246, 225, 0) 66%);
  opacity: 0; transition: opacity .6s var(--ease);
}
/* Rot-gelbe Kapsel am linken Rand (Echo des Stabs); ::after gehört dem Lichtrand aus effects.css */
.service > h3 { position: relative; transition: color .35s var(--ease); }
.service { --bar: 0; }
.service > span.service__accent {
  grid-column: auto; grid-row: auto;   /* nicht in die Inhaltsspalte des Karten-Grids einsortieren */
  position: absolute; left: 0; top: 50%; width: 5px; height: calc(100% - 56px); border-radius: 0 5px 5px 0;
  background: linear-gradient(180deg, var(--red) 0 50%, var(--yellow) 50% 100%);
  transform: translateY(-50%) scaleY(var(--bar)); transform-origin: center; transition: transform .6s var(--ease);
  pointer-events: none;
}
.service.is-active { --bar: .55; }
.service .service__foot .link-arrow .ico { transition: transform .4s var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .service:hover, .service:focus-within {
    --bar: 1;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
      linear-gradient(162deg, #FFFFFF 0%, #FFF9EE 52%, #FCF1DE 100%);
  }
  .service:hover::before, .service:focus-within::before { opacity: 1; }
  .service:hover > h3, .service:focus-within > h3 { color: var(--red-d); }
  .service:hover > .tile.tile--dio, .service:focus-within > .tile.tile--dio { transform: translateY(-5px) scale(1.07); }
  .service:hover .service__foot .link-arrow .ico { transform: translateX(4px); }
}
.service > .tile.tile--dio { transition: transform .8s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .dio__lit, .hero-media__lit, .dio::before, .service::before, .service__accent, .service > .tile.tile--dio { transition: none; }
}
html.reduce-motion :is(.dio__lit, .hero-media__lit, .dio::before, .service::before, .service__accent, .service > .tile.tile--dio) { transition: none; }

/* --------------------------------------------------------------------------
   Grundsätze-Karten (Naturheilkunde) mit Diorama-Band statt Icon
   -------------------------------------------------------------------------- */
.principle--dio .principle__dio { margin: -10px -8px 4px; height: 168px; border-radius: calc(var(--r-card) - 8px); background: radial-gradient(70% 85% at 50% 62%, #FFF6D9 0%, #FBF3E6 46%, #F5EEE4 100%); }
@media (min-width: 760px) { .principle--dio .principle__dio { margin: -16px -16px 4px; height: 184px; } }
.principle--dio .principle__dio img { padding: 8px 18px 2px; filter: drop-shadow(0 16px 18px rgba(120, 50, 20, .16)); }
@media (hover: hover) and (pointer: fine) {
  .principle--dio:hover .principle__dio > picture img { transform: translateY(-4px) scale(1.035); }
}

/* 60-Minuten-Termine (Naturheilkunde): Diorama „Zeit“ statt Foto */
.timebox__visual { display: grid; place-items: center; }
.timebox__dio { width: min(100%, 360px); aspect-ratio: 1; margin: -12px auto -20px; }
.timebox__dio img { filter: drop-shadow(0 22px 26px rgba(150, 90, 10, .2)); }
@media (min-width: 900px) { .timebox__dio { margin: -48px auto -56px; } }
@media (hover: hover) and (pointer: fine) { .timebox:hover .dio__lit { opacity: 1; } .timebox:hover .dio::before { opacity: 1; transform: scale(1); } }

/* --------------------------------------------------------------------------
   Abschluss-Kasten der Unterseiten: hell und warm statt dunkel (kein Dunkel-auf-Dunkel vor dem Footer)
   -------------------------------------------------------------------------- */
.cta.cta--light {
  position: relative; overflow: hidden; isolation: isolate; align-items: center;
  background:
    radial-gradient(55% 90% at 100% 100%, rgba(255, 204, 0, .22), rgba(255, 204, 0, 0) 70%),
    linear-gradient(160deg, #FFFBEF 0%, #FFF1CC 100%);
  border: 1px solid #F0DB9B; color: var(--ink);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 24px 50px -36px rgba(176, 120, 0, .55);
}
.cta--light h2 { color: var(--ink); }
.cta--light p { color: var(--ink-2); }
.cta--light .actions { margin-top: 22px; }
.cta--light .btn--ghost { background: rgba(255, 255, 255, .7); }
.cta__visual { display: grid; place-items: center; }
.cta__dio { width: min(70%, 240px); aspect-ratio: 1; margin: -8px auto -16px; }
@media (min-width: 900px) {
  .cta.cta--light { grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; padding: 48px 56px; }
  .cta__dio { width: 100%; margin: -36px 0 -44px; }
}
@media (max-width: 899px) { .cta__visual { order: -1; } }
@media (hover: hover) and (pointer: fine) { .cta--light:hover .dio__lit { opacity: 1; } .cta--light:hover .dio::before { opacity: 1; transform: scale(1); } }

/* Praxisteam nach Aufgaben (Praxis-Seite): Diorama statt Silhouette, bis Teamfotos da sind */
.member__photo--dio { place-items: center; background: radial-gradient(70% 80% at 50% 60%, #FFF6D9 0%, #FBF3E6 50%, #F3EADF 100%); }
.member__dio { width: 86%; aspect-ratio: 1; }
.member__dio img { filter: drop-shadow(0 16px 18px rgba(120, 50, 20, .16)); }
@media (hover: hover) and (pointer: fine) {
  .member--role:hover .member__dio > picture img { transform: translateY(-4px) scale(1.035); }
}