/* ================= KLS FOOTER – TERMIN-CTA (animiert & klickbar) =================
   Mittlere Footer-Box "Termin online buchen" -> Online-Terminbuchung
   Wird NACH footer.css geladen und überschreibt gezielt einzelne Regeln.
   ================================================================================= */

/* ---------- DESKTOP-FOOTER (.kfx) ---------- */

.kfx-card-link{
  left:calc(var(--u)*816);
  top:calc(var(--u)*381);
  width:calc(var(--u)*339);
  height:calc(var(--u)*294);
  border-radius:calc(var(--u)*22);
  display:block;
  text-decoration:none;
  cursor:pointer;
  z-index:3;
  transform-origin:50% 50%;
  transition:transform .45s cubic-bezier(.22,.9,.3,1);
  animation:kfxCardBreathe 5.2s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}

/* Kartenfläche (exakter Ausschnitt der Hintergrundgrafik) */
.kfx-card-face{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:url("../img/footer-card.webp");
  background-size:100% 100%;
  background-repeat:no-repeat;
  overflow:hidden;
  transition:box-shadow .45s ease, filter .45s ease;
  animation:kfxCardGlow 5.2s ease-in-out infinite;
}

/* Wanderndes Licht-Highlight */
.kfx-card-face::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:45%;
  height:180%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  animation:kfxCardShine 5.2s ease-in-out infinite;
  pointer-events:none;
}

/* Goldener Rahmen-Impuls */
.kfx-card-face::before{
  content:"";
  position:absolute;
  inset:calc(var(--u)*7);
  border:1px solid rgba(196,162,101,.55);
  border-radius:calc(var(--u)*15);
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}

/* Texte innerhalb des Links neu positionieren */
.kfx-card-link .kfx-card-t,
.kfx-card-link .kfx-card-b{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:block;
  margin:0;
  z-index:2;
  transition:color .35s ease;
  pointer-events:none;
}
.kfx-card-link .kfx-card-t{ top:calc(var(--u)*131); }
.kfx-card-link .kfx-card-b{ top:calc(var(--u)*196); }

/* Hover / Fokus */
.kfx-card-link:hover,
.kfx-card-link:focus-visible{
  transform:scale(1.045);
  animation-play-state:paused;
  outline:none;
}
.kfx-card-link:hover .kfx-card-face,
.kfx-card-link:focus-visible .kfx-card-face{
  animation-play-state:paused;
  filter:brightness(1.04);
  box-shadow:
    0 calc(var(--u)*26) calc(var(--u)*46) calc(var(--u)*-22) rgba(0,0,0,.55),
    0 0 calc(var(--u)*30) calc(var(--u)*2) rgba(217,185,106,.45);
}
.kfx-card-link:hover .kfx-card-face::before,
.kfx-card-link:focus-visible .kfx-card-face::before{ opacity:1; }
.kfx-card-link:focus-visible .kfx-card-face{
  box-shadow:
    0 0 0 calc(var(--u)*3) rgba(217,185,106,.9),
    0 calc(var(--u)*26) calc(var(--u)*46) calc(var(--u)*-22) rgba(0,0,0,.55);
}
.kfx-card-link:hover .kfx-card-t{ color:#233729; }
.kfx-card-link:active{ transform:scale(1.015); }

@keyframes kfxCardBreathe{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.022); }
}
@keyframes kfxCardGlow{
  0%,100%{ box-shadow:0 0 calc(var(--u)*0) rgba(217,185,106,0); }
  50%    { box-shadow:0 0 calc(var(--u)*26) calc(var(--u)*1) rgba(217,185,106,.38); }
}
@keyframes kfxCardShine{
  0%      { left:-60%; opacity:0; }
  12%     { opacity:.9; }
  45%,100%{ left:125%; opacity:0; }
}

/* ---------- RESPONSIVE-FOOTER (.kfr) ---------- */

a.kfr-card{
  display:block;
  position:relative;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:transform .4s cubic-bezier(.22,.9,.3,1), box-shadow .4s ease;
  animation:kfrCardGlow 5.2s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
a.kfr-card::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:45%;
  height:180%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.6) 45%,
    rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  animation:kfrCardShine 5.2s ease-in-out infinite;
  pointer-events:none;
}
a.kfr-card:hover,
a.kfr-card:focus-visible{
  transform:translateY(-3px);
  animation-play-state:paused;
  outline:none;
  box-shadow:
    0 26px 46px -26px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(196,162,101,.85),
    0 0 26px 2px rgba(217,185,106,.4);
}
a.kfr-card:focus-visible{ box-shadow:0 0 0 3px rgba(217,185,106,.9); }
a.kfr-card:active{ transform:translateY(-1px); }

span.kfr-card-b{ display:block; }
span.kfr-book{
  position:relative;
  z-index:1;
  animation:kfrBookPulse 5.2s ease-in-out infinite;
}
a.kfr-card:hover span.kfr-book,
a.kfr-card:focus-visible span.kfr-book{
  background:#33503B;
  animation-play-state:paused;
}

@keyframes kfrCardGlow{
  0%,100%{ box-shadow:0 22px 44px -30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(196,162,101,.45); }
  50%    { box-shadow:0 22px 44px -30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(196,162,101,.85), 0 0 22px 1px rgba(217,185,106,.35); }
}
@keyframes kfrCardShine{
  0%      { left:-60%; opacity:0; }
  12%     { opacity:.85; }
  45%,100%{ left:125%; opacity:0; }
}
@keyframes kfrBookPulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(217,185,106,.45); }
  50%    { transform:scale(1.035); box-shadow:0 0 0 8px rgba(217,185,106,0); }
}

/* ---------- Instagram-Icon ---------- */
.kfx-ig{
  z-index:3;
  transition:transform .35s ease, box-shadow .35s ease;
}
.kfx-ig:hover,
.kfx-ig:focus-visible{
  transform:scale(1.12);
  outline:none;
  box-shadow:0 0 calc(var(--u)*18) calc(var(--u)*2) rgba(217,185,106,.45);
}
.kfr-ig:focus-visible{
  outline:2px solid rgba(217,185,106,.9);
  outline-offset:3px;
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .kfx-card-link,
  .kfx-card-face,
  .kfx-card-face::after,
  a.kfr-card,
  a.kfr-card::after,
  span.kfr-book{
    animation:none !important;
  }
  .kfx-card-link,
  a.kfr-card{ transition:box-shadow .3s ease; }
  .kfx-card-face::after,
  a.kfr-card::after{ display:none; }
}