/* Direction A – micro-interactions and ambient effects (round 3).
 *
 * Calm and precise, never playful. Every movement is optional:
 *   html.reduce-motion (mockup panel / ?motion=0) and prefers-reduced-motion switch all motion off,
 *   colours and focus rings stay. Nothing here changes layout (only transform/translate/scale,
 *   opacity, colours, shadows, clip-path), so there are no layout jumps.
 * JS counterpart: effects.js (magnet, card light, nav indicator, details, tap ripple).
 * Ambient double helix: helix.js (fixed canvas behind all content, z-index -1).
 */

:root {
  --fx-ease: cubic-bezier(.22, .7, .18, 1);
  --fx-glide: cubic-bezier(.5, 0, .1, 1);
  --fx-rim: rgba(255, 204, 0, .5);
  --fx-halo: rgba(255, 226, 139, .26);
}

/* ==========================================================================
   0 · Focus ring – tightens onto the element (round ends via border-radius)
   ========================================================================== */
@keyframes fx-focus { from { outline-offset: 11px; outline-color: transparent; } }

/* ==========================================================================
   1 · Buttons
   ========================================================================== */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  transform: translate3d(var(--fx-mx, 0px), calc(var(--fx-my, 0px) + var(--fx-lift, 0px)), 0) scale(var(--fx-s, 1));
  transition: background-color .25s, color .25s, border-color .3s, box-shadow .4s var(--fx-ease), transform .4s var(--fx-ease);
}
.btn .ico { position: relative; }

/* Primary: no (transparent) border, so sheen and tap ripple reach the rounded edge – same outer size */
.btn--primary { border-width: 0; padding: 14px 28px; }
.btn--primary.btn--lg { padding-inline: 32px; }
.btn--primary.btn--sm { padding: 12px 22px; }
.check .btn--primary { padding-inline: 18px; }

/* Primary: lift + deeper warm shadow, a fine sheen sweeps once across */
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .17) 47%, rgba(255, 240, 200, .12) 52%, rgba(255, 255, 255, 0) 62%);
  transform: translateX(-115%);
}
@media (hover: hover) {
  .btn--primary:hover {
    --fx-lift: -2px;
    background: #A11F1E;
    box-shadow: 0 2px 4px -1px rgba(120, 20, 20, .25), 0 20px 34px -16px rgba(173, 34, 33, .85);
  }
  .btn--primary:hover::after { transform: translateX(115%); transition: transform .95s cubic-bezier(.45, .05, .25, 1); }
}
.btn:active { --fx-s: .98; --fx-lift: 0px; transition-duration: .12s; }

/* Secondary / outline: soft fill sweeps in from the left (rounded leading edge) */
.btn--ghost::before, .btn--light::before, .btn--outline-light::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: var(--fx-fill, var(--yellow-xl));
  clip-path: inset(0 100% 0 0 round 999px);
  transition: clip-path .55s var(--fx-ease);
}
.btn--outline-light { --fx-fill: rgba(255, 255, 255, .16); }
.btn--light { --fx-fill: var(--yellow-xl); }
.btn--ghost { --fx-fill: linear-gradient(100deg, #FFF8E4 0%, #FFF1CC 100%); }
@media (hover: hover) {
  .btn--ghost:hover::before, .btn--light:hover::before, .btn--outline-light:hover::before { clip-path: inset(0 0 0 0 round 999px); }
  .btn--ghost:hover { --fx-lift: -1px; border-color: #E9B84A; color: var(--red-d); box-shadow: 0 14px 26px -18px rgba(150, 90, 0, .6); }
  .btn--light:hover { background: #fff; --fx-lift: -1px; }
  .btn--outline-light:hover { background: transparent; --fx-lift: -1px; }
}
.btn:focus-visible::before { clip-path: inset(0 0 0 0 round 999px); }

/* Phone buttons: the handset rings briefly */
@keyframes fx-ring {
  0% { rotate: 0deg; } 14% { rotate: -16deg; } 28% { rotate: 12deg; } 42% { rotate: -9deg; }
  56% { rotate: 6deg; } 70% { rotate: -3deg; } 84%, 100% { rotate: 0deg; }
}

/* ==========================================================================
   2 · Links – resting underline (lighter) + a full-colour line that draws in
   ========================================================================== */
:is(main, .notice-strip) a:not([class]):not(:is(.jumps, .crumbs, .leist__spy, .lines) a) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(color-mix(in srgb, currentColor 42%, transparent), color-mix(in srgb, currentColor 42%, transparent));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0% 2px, 100% 1.5px;
  padding-bottom: 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .5s var(--fx-ease), color .2s;
}
:is(main, .notice-strip) a:not([class]):not(:is(.jumps, .crumbs, .leist__spy, .lines) a):is(:hover, :focus-visible) { background-size: 100% 2px, 100% 1.5px; }

.link-arrow { position: relative; }
.link-arrow::after {
  content: ""; position: absolute; left: 0; right: 28px; bottom: calc(50% - .78em); height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--fx-ease);
}
.link-arrow:is(:hover, :focus-visible)::after, a.service:hover .link-arrow::after { transform: scaleX(1); }

.site-foot .foot__list a { position: relative; }
.site-foot .foot__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 11px; height: 1.5px; border-radius: 2px;
  background: var(--yellow-l); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--fx-ease);
}
.site-foot .foot__list a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.site-foot .foot__list a { text-decoration: none; }

/* ==========================================================================
   3 · Cards – lift, soft yellow light rim (follows the pointer), image breathes
   ========================================================================== */
:is(.card:not(.apply-card), .service, .check, .member, .way, .benefit, .step) {
  position: relative;
  transition-property: opacity, transform, translate, box-shadow, border-color, background-color;
  transition-duration: .9s, .9s, .55s, .55s, .45s, .3s;
  transition-timing-function: var(--fx-ease);
  transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s, 0s, 0s;
}
:is(.card:not(.apply-card), .service, .check, .member, .way, .benefit, .step)::after {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none; border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(300px circle at var(--fx-x, 50%) var(--fx-y, 0%), rgba(255, 204, 0, .95), rgba(255, 214, 80, .35) 45%, rgba(255, 226, 139, 0) 75%);
  -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 .5s var(--fx-ease);
}
:is(.service, .check, .member, .way, .benefit, .step, .card) :is(.diorama img, .frame img, .member__photo img, .tile) {
  transition: scale .9s var(--fx-ease), translate .6s var(--fx-ease), box-shadow .6s var(--fx-ease);
}
@media (hover: hover) and (pointer: fine) {
  :is(.card:not(.apply-card), .service, .check, .member, .way, .benefit, .step):hover {
    translate: 0 -4px;
    border-color: #F1D27A;
    box-shadow: 0 2px 6px rgba(58, 33, 22, .05), 0 30px 56px -30px rgba(58, 33, 22, .34), 0 0 0 1px var(--fx-rim), 0 0 0 6px var(--fx-halo);
  }
  .panel--checks .check:hover { box-shadow: 0 40px 70px -34px rgba(40, 4, 4, .85), 0 0 0 1px rgba(255, 204, 0, .7), 0 0 0 6px rgba(255, 226, 139, .22); }
  :is(.card:not(.apply-card), .service, .check, .member, .way, .benefit, .step):hover::after { opacity: 1; }
  :is(.card, .service, .check, .member, .way, .benefit, .step):hover :is(.diorama img, .frame img, .member__photo img) { scale: 1.035; }
  :is(.card, .service, .check, .member, .way, .benefit, .step):hover .tile { translate: 0 -2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 5px rgba(255, 204, 0, .16), 0 14px 24px -12px rgba(176, 120, 0, .65); }
  :is(.card, .service, .check, .member, .way, .benefit, .step):hover .tile--red { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 5px rgba(173, 34, 33, .12), 0 14px 24px -12px rgba(140, 20, 20, .7); }
  /* Photos outside cards (doctor portrait, gallery, subpage heroes) breathe a little, too */
  :is(.doc__media, .gallery figure, .timebox__media) .frame img, .hero-media.is-photo img { transition: scale 1.1s var(--fx-ease); }
  :is(.doc__media, .gallery figure, .timebox__media):hover .frame img { scale: 1.03; }
}

/* ==========================================================================
   4 · FAQ / Vertretungen – chevron turns, panel glides open (effects.js)
   ========================================================================== */
.faq summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A1A1A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  transition: transform .5s var(--fx-ease), background-color .25s;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details.fx-closing summary::after { transform: rotate(0deg); background-color: var(--sand); }
.faq summary { transition: color .25s; }
@media (hover: hover) {
  .faq summary:hover { color: var(--red-d); }
  .faq summary:hover::after { background-color: var(--yellow-l); }
  .reps > summary:hover .reps__chev { background: var(--yellow-l); }
}
.reps > summary .reps__chev { transition: transform .5s var(--fx-ease), background-color .25s; }
.reps.fx-closing > summary .reps__chev { transform: rotate(0deg); }
details.fx-anim { overflow: hidden; }

/* ==========================================================================
   5 · Navigation – gliding indicator (effects.js adds .nav__ind + .fx-ind)
   ========================================================================== */
.nav { position: relative; }
.nav ul { position: relative; z-index: 1; }
.nav__ind {
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 999px; pointer-events: none;
  background: var(--paper); opacity: 0;
  box-shadow: inset 0 0 0 1px var(--line), 0 8px 18px -12px rgba(58, 33, 22, .3);
  transition: transform .5s var(--fx-glide), width .5s var(--fx-glide), height .5s var(--fx-glide), opacity .3s, background-color .35s, box-shadow .35s;
}
/* Current page: the pill carries a tiny red|yellow mark (as in the eyebrows) */
.nav__ind::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px;
  background: linear-gradient(90deg, var(--red) 0 50%, var(--yellow) 50% 100%);
  transform: scaleX(0); transition: transform .45s var(--fx-ease);
}
.nav__ind.is-current { box-shadow: inset 0 0 0 1.5px var(--line-2), 0 8px 18px -12px rgba(58, 33, 22, .35); }
.nav__ind.is-current::after { transform: scaleX(1); }
.nav__ind.is-on { opacity: 1; }
.nav__ind.no-anim { transition: none; }
.nav.fx-ind a, .nav.fx-ind a:hover, .nav.fx-ind a[aria-current="page"] { background: transparent; box-shadow: none; }
.nav.fx-ind a:hover, .nav.fx-ind a:focus-visible { color: var(--red-d); }

/* Mobile menu panel glides in */
@keyframes fx-drop { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
@keyframes fx-rise { from { opacity: 0; transform: translateY(6px); } }

/* ==========================================================================
   6 · Today status – the only element that pulses (soft halo)
   ========================================================================== */
.today--closed .today__dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(173, 34, 33, .42); animation: pulse 3.4s var(--ease) infinite; }
.today--open .today__dot::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(240, 180, 0, .5); animation: pulse 2.6s 1.3s var(--ease) infinite; }

/* ==========================================================================
   7 · Tap ripple (touch only, effects.js)
   ========================================================================== */
.dock a, .rep__call, .menu__panel a, .jumps a, .menu > summary { position: relative; overflow: hidden; isolation: isolate; }
.fx-ripple {
  position: absolute; z-index: -1; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: currentColor; opacity: 0; pointer-events: none;
}
.btn--primary .fx-ripple, .dock a.is-primary .fx-ripple, .rep__call .fx-ripple { background: #fff; }
.dock a, .rep__call, .jumps a { transition: transform .2s var(--fx-ease), background-color .2s, color .2s, border-color .2s; }

/* ==========================================================================
   Motion layer – only when motion is welcome
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) :focus-visible { animation: fx-focus .4s var(--fx-ease); }
  @media (hover: hover) {
    html:not(.reduce-motion) a[href^="tel:"]:hover > .ico,
    html:not(.reduce-motion) a[href^="tel:"]:hover > .ico-wrap > .ico { animation: fx-ring .75s var(--fx-ease); }
  }
  html:not(.reduce-motion) a[href^="tel:"]:focus-visible > .ico { animation: fx-ring .75s var(--fx-ease); }
  html:not(.reduce-motion) .menu[open] .menu__panel { animation: fx-drop .38s var(--fx-ease); }
  html:not(.reduce-motion) .menu[open] .menu__panel li { animation: fx-rise .45s var(--fx-ease) backwards; }
  html:not(.reduce-motion) .menu[open] .menu__panel li:nth-child(2) { animation-delay: .03s; }
  html:not(.reduce-motion) .menu[open] .menu__panel li:nth-child(3) { animation-delay: .06s; }
  html:not(.reduce-motion) .menu[open] .menu__panel li:nth-child(4) { animation-delay: .09s; }
  html:not(.reduce-motion) .menu[open] .menu__panel li:nth-child(5) { animation-delay: .12s; }
  html:not(.reduce-motion) .menu[open] .menu__panel li:nth-child(6) { animation-delay: .15s; }
  html:not(.reduce-motion) :is(.dock a, .rep__call, .jumps a, .menu__panel a):active { transform: scale(.97); }
}

/* Reduced motion: final states, no movement (colours and focus rings remain) */
html.reduce-motion .btn { transform: none; transition: background-color .01s, color .01s, border-color .01s, box-shadow .01s; }
html.reduce-motion .btn--primary::after { display: none; }
html.reduce-motion :is(.btn--ghost, .btn--light, .btn--outline-light)::before { transition: none; }
html.reduce-motion :is(.card, .service, .check, .member, .way, .benefit, .step) { translate: none !important; }
html.reduce-motion :is(.card, .service, .check, .member, .way, .benefit, .step) :is(.diorama img, .frame img, .member__photo img, .tile) { scale: none !important; translate: none !important; transition: none; }
html.reduce-motion :is(.doc__media, .gallery figure, .timebox__media) .frame img { scale: none !important; }
html.reduce-motion :is(main, .notice-strip) a:not([class]), html.reduce-motion :is(.link-arrow, .foot__list a)::after { transition: none; }
html.reduce-motion .nav__ind, html.reduce-motion .faq summary::after, html.reduce-motion .reps__chev { transition: none; }
html.reduce-motion .today__dot::before { animation: none; opacity: 0; }
html.reduce-motion .fx-ripple { display: none; }
@media (prefers-reduced-motion: reduce) {
  .btn { transform: none; }
  .btn--primary::after { display: none; }
  .today__dot::before, .today__dot::after { animation: none; opacity: 0; }
  :is(.card, .service, .check, .member, .way, .benefit, .step) { translate: none !important; }
  :is(.card, .service, .check, .member, .way, .benefit, .step) :is(.diorama img, .frame img, .member__photo img, .tile) { scale: none !important; translate: none !important; }
  .nav__ind { transition: none; }
}

/* ==========================================================================
   Ambient double helix canvas (helix.js)
   ========================================================================== */
.fx-helix {
  position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; pointer-events: none;
  opacity: 0; transition: opacity 1.6s var(--fx-ease);
}
.fx-helix.is-on { opacity: var(--fx-helix-o, 1); }
/* Starke Clients (helix.js setzt html.helix-blend): zusätzlich eine sehr schwache Kopie als
   Multiplizier-Schleier VOR dem Inhalt – Karten und Panels lassen so etwa ein Drittel der Helix
   durch, Text bleibt dunkel, über dem Porträt-Hero blendet der Schleier aus (--fx-helix-hero).
   Unter Randstab (45) und Kopfzeile (50). */
.fx-helix-veil {
  position: fixed; inset: 0; z-index: 40; width: 100vw; height: 100vh; pointer-events: none;
  mix-blend-mode: multiply; opacity: 0; transition: opacity .7s var(--fx-ease);
}
.fx-helix-veil.is-on { opacity: calc(var(--fx-veil-o, .032) * var(--fx-helix-hero, 1)); }
html:not(.helix-blend) .fx-helix-veil { display: none; }
@media print { .fx-helix-veil { display: none; } }
html.reduce-motion .fx-helix { transition: none; }
@media print { .fx-helix { display: none; } }