/*
Theme Name: Schiebertol Trio
Theme URI: https://schiebertoltrio.at/
Template: hello-biz
Author: Daniel Maierhofer
Author URI: https://schiebertoltrio.at/
Version: 1.0.1.1774723371
Updated: 2026-03-28 20:42:51

*/


/* =========================================================
   Musiker Steckbrief Overlay – angepasste Version
   ========================================================= */

.musiker-card {
  position: relative;
  text-align: center;

  --stage-height: 600px;
  --overlay-width: 338px;
  --overlay-height: calc(var(--stage-height) - 42px);
  --overlay-radius: 26px;
  --overlay-bg: rgba(248, 246, 240, 0.89);
  --overlay-border: rgba(44, 67, 44, 0.10);
}

/* ---------- Bildfläche ---------- */

.musiker-stage {
  position: relative;
  display: flex !important;
  align-items: flex-end;
  justify-content: center;

  width: 100%;
  max-width: 100%;
  height: var(--stage-height);
  margin-inline: auto;

  overflow: visible;
  isolation: isolate;
}

.musiker-photo,
.musiker-photo .elementor-widget-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;

  width: 100%;
  height: 100%;
  margin: 0;
}

.musiker-photo img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
  margin-inline: auto;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);

  transition:
    filter 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Overlay Host ---------- */

.musiker-overlay-host {
  position: absolute !important;
  inset: 0;
  z-index: 20;

  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;

  pointer-events: none;
}

.musiker-overlay-host .elementor-widget-container {
  width: 100%;
  height: 100%;
}

/* ---------- Overlay ---------- */

.musiker-overlay {
  position: absolute;
  left: 50%;
  top: 50%;

  width: min(var(--overlay-width), calc(100% - 24px));
  height: min(var(--overlay-height), calc(100% - 24px));

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform-origin: center center;
  transform: translate(-50%, -50%) perspective(1600px) scale(0.92) rotateX(6deg);
  filter: blur(10px);

  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 1s;
}

.musiker-overlay__panel {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  padding: 16px;
  border-radius: var(--overlay-radius);
  border: 1px solid var(--overlay-border);
  background: var(--overlay-bg);

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.14),
    0 6px 16px rgba(0, 0, 0, 0.05);

  -webkit-backdrop-filter: blur(18px) saturate(128%);
  backdrop-filter: blur(18px) saturate(128%);

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .musiker-overlay__panel {
    background: rgba(248, 246, 240, 0.94);
  }
}

/* Größeres Steckbriefbild, weiterhin sauber mittig */
.musiker-overlay img {
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: contain;
  object-position: center center;
  border-radius: 16px;
}

/* ---------- Close Button ---------- */

.musiker-overlay__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;

  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.92);
  color: #870111;
  font-size: 22px;
  line-height: 1;

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.05);

  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.28s ease,
    color 0.28s ease,
    box-shadow 0.28s ease;
}

.musiker-overlay__close:hover {
  color: #2C432C;
  background: rgba(255, 255, 255, 0.98);
  transform: scale(1.06);
}

/* ---------- Offener Zustand ---------- */

.musiker-card.is-open .musiker-overlay-host {
  pointer-events: auto;
}

.musiker-card.is-open .musiker-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) perspective(1600px) scale(1) rotateX(0deg);
  filter: blur(0);
  transition-delay: 0s;
}

.musiker-card.is-open .musiker-photo img {
  filter: brightness(0.80) saturate(0.90) blur(1.8px);
  transform: scale(0.985);
}

/* ---------- Button ---------- */

.steckbrief-btn,
.steckbrief-btn .elementor-button-wrapper,
.steckbrief-btn .elementor-button,
.steckbrief-btn .elementor-button-link,
.steckbrief-btn a {
  cursor: pointer !important;
}

.steckbrief-btn .elementor-button,
.steckbrief-btn .elementor-button-link {
  border-radius: 999px;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.steckbrief-btn .elementor-button:hover,
.steckbrief-btn .elementor-button-link:hover {
  transform: translateY(-1px);
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
  .musiker-card {
    --stage-height: 520px;
    --overlay-width: 296px;
    --overlay-height: calc(var(--stage-height) - 34px);
    --overlay-radius: 22px;
  }

  .musiker-overlay__panel {
    padding: 14px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .musiker-card {
    --stage-height: 380px;
    --overlay-width: 228px;
    --overlay-height: calc(var(--stage-height) - 24px);
    --overlay-radius: 18px;
  }

  .musiker-overlay__panel {
    padding: 11px;
  }

  .musiker-overlay__close {
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    font-size: 20px;
  }

  .musiker-overlay img {
    border-radius: 12px;
  }
}

/* ---------- Reduced Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .musiker-photo img,
  .musiker-overlay,
  .musiker-overlay__close,
  .steckbrief-btn .elementor-button,
  .steckbrief-btn .elementor-button-link {
    transition: none !important;
    filter: none !important;
    transform: none !important;
  }
}