/* --- Morph Popover CSS-Animationen & Liquid Glass Style (F7 v9 kompatibel) --- */

:root {
  --morph-bg-light: rgba(255, 255, 255, 0.4);
  --morph-bg-dark: rgba(30, 30, 30, 0.4);
}

.morph-popover-box {
  background: var(--morph-bg-light);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--f7-popover-border-width, 0.5px) solid var(--f7-popover-border-color, rgba(128, 128, 128, 0.2));
  border-radius: var(--f7-popover-border-radius, 14px);
  box-shadow: var(--f7-popover-box-shadow, 0 10px 30px rgba(0, 0, 0, 0.2));
  color: var(--f7-popover-text-color, inherit);
  z-index: 13500;
  overflow: hidden;
  will-change: top, left, width, height, opacity;
}

/* Wichtig: F7-Standard-Skalierung und Ausblendung überschreiben + sauberen Radius erzwingen */
.popover.morph-popover-box {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  height: auto !important;
  border-radius: var(--f7-popover-border-radius, 14px) !important;
  overflow: hidden !important;
}

.popover.morph-popover-box.morph-anim-open,
.popover.morph-popover-box.morph-anim-close {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  height: auto !important;
  border-radius: var(--f7-popover-border-radius, 14px) !important;
  overflow: hidden !important;
}

/* Automatischer Radius auch für den inneren Container, damit nichts durchschimmert */
.popover-inner.morph-content-inner {
  border-radius: var(--f7-popover-border-radius, 14px) !important;
  overflow: hidden !important;
  padding: 6px 0 !important;
}

/* Automatische Anpassung im Framework7 v9 Dark Mode (.dark Klasse) */
.dark .morph-popover-box,
html.dark .morph-popover-box {
  background: var(--morph-bg-dark);
  border-color: rgba(255, 255, 255, 0.15);
}

/* 1. Öffnen: Rauswachsen mit tiefem Overshoot nach unten */
.morph-anim-open {
  animation: cssMorphOpen 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.35) forwards;
}

@keyframes cssMorphOpen {
  0% {
    top: var(--orig-top);
    left: var(--orig-left);
    width: var(--orig-width);
    height: var(--orig-height);
    border-radius: var(--orig-radius);
    background-color: var(--orig-bg);
    opacity: 1;
    transform: none !important;
  }
  60% {
    top: calc(var(--target-top) + 30px);
    left: var(--target-left);
    width: var(--target-width);
    height: var(--target-height);
    border-radius: var(--f7-popover-border-radius, 14px);
    background-color: var(--morph-bg-light);
    opacity: 0.8;
    transform: none !important;
  }
  100% {
    top: var(--target-top);
    left: var(--target-left);
    width: var(--target-width);
    height: var(--target-height);
    border-radius: var(--f7-popover-border-radius, 14px);
    background-color: var(--morph-bg-light);
    opacity: 1;
    transform: none !important;
  }
}

.dark .morph-anim-open,
html.dark .morph-anim-open {
  animation-name: cssMorphOpenDark;
}

@keyframes cssMorphOpenDark {
  0% {
    top: var(--orig-top);
    left: var(--orig-left);
    width: var(--orig-width);
    height: var(--orig-height);
    border-radius: var(--orig-radius);
    background-color: var(--orig-bg);
    opacity: 1;
    transform: none !important;
  }
  60% {
    top: calc(var(--target-top) + 30px);
    left: var(--target-left);
    width: var(--target-width);
    height: var(--target-height);
    border-radius: var(--f7-popover-border-radius, 14px);
    background-color: var(--morph-bg-dark);
    opacity: 0.8;
    transform: none !important;
  }
  100% {
    top: var(--target-top);
    left: var(--target-left);
    width: var(--target-width);
    height: var(--target-height);
    border-radius: var(--f7-popover-border-radius, 14px);
    background-color: var(--morph-bg-dark);
    opacity: 1;
    transform: none !important;
  }
}

/* 2. Schließen: Korrekte Weg-Interpolation mit spätem Ausfaden am Ende */
.morph-anim-close {
  animation: cssMorphClose 0.45s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

@keyframes cssMorphClose {
  0% {
    top: var(--target-top);
    left: var(--target-left);
    width: var(--target-width);
    height: var(--target-height);
    border-radius: 16px;
    background-color: var(--morph-bg-light);
    opacity: 1;
    transform: none !important;
  }
  40% {
    top: calc(var(--target-top) + 25px);
    left: var(--target-left);
    width: var(--target-width);
    height: var(--target-height);
    border-radius: 16px;
    background-color: var(--morph-bg-light);
    opacity: 1; /* Bleibt bis hierhin voll sichtbar */
    transform: none !important;
  }
  80% {
    /* Fast am Ziel, hält die Opacity noch hoch */
    opacity: 0.9;
    transform: none !important;
  }
  100% {
    top: var(--orig-top);
    left: var(--orig-left);
    width: var(--orig-width);
    height: var(--orig-height);
    border-radius: var(--orig-radius);
    background-color: var(--orig-bg);
    opacity: 0; /* Faded erst auf den allerletzten Prozent aus */
    transform: none !important;
  }
}

.dark .morph-anim-close,
html.dark .morph-anim-close {
  animation-name: cssMorphCloseDark;
}

@keyframes cssMorphCloseDark {
  0% {
    top: var(--target-top);
    left: var(--target-left);
    width: var(--target-width);
    height: var(--target-height);
    border-radius: 16px;
    background-color: var(--morph-bg-dark);
    opacity: 1;
    transform: none !important;
  }
  40% {
    top: calc(var(--target-top) + 25px);
    left: var(--target-left);
    width: var(--target-width);
    height: var(--target-height);
    border-radius: 16px;
    background-color: var(--morph-bg-dark);
    opacity: 1;
    transform: none !important;
  }
  90% {
    opacity: 0.9;
    transform: none !important;
  }
  100% {
    top: var(--orig-top);
    left: var(--orig-left);
    width: var(--orig-width);
    height: var(--orig-height);
    border-radius: var(--orig-radius);
    background-color: var(--orig-bg);
    opacity: 0;
    transform: none !important;
  }
}

.morph-content-inner .list {
  margin: 0 !important;
}

.morph-content-inner .list ul {
  background: transparent !important;
}

.morph-content-inner .list ul::before,
.morph-content-inner .list ul::after {
  display: none !important;
}

.morph-content-inner .list.list-dividers-ios ul li::after{
    background-color: var(--f7-list-item-border-color);
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 16px;
    position: absolute;
    right: auto;
    top: auto;
    transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
    transform-origin: 50% 100%;
    width: calc(100% - 32px) !important;
    z-index: 15;
}	

.morph-content-inner .list ul li.divided::after{
    background-color: var(--f7-list-item-border-color);
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 16px;
    position: absolute;
    right: auto;
    top: auto;
    transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
    transform-origin: 50% 100%;
    width: calc(100% - 32px) !important;
    z-index: 15;
}

.morph-content-inner .list.list-dividers-ios ul li:last-child::after{
	display:none!important
}

.morph-content-inner .item-content {
  min-height: 40px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.morph-content-inner .item-inner::after {
  display: none !important;
}

/* Backdrop ist komplett unsichtbar, fängt aber Klicks außerhalb ab */
.morph-backdrop {
  background: transparent !important;
  background-color: transparent !important;
  z-index: 13499;
}

.morph-content-inner .list .item-link .item-inner:before{
  display: none !important;
}
.morph-content-inner .list .item-link .item-inner {
    padding-right: calc(0px + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right))!important;
}