/* ================================
   BF Foto-Modal – Screenshot-nah
   Porto-sicher, hart namespaced
================================ */

:root{
      --bfPhotoModal-maxw: 34.375rem; /* 550px */
      --bfPhotoModal-top: 12rem;
      --bf-bg: rgba(255,255,255,0.97);
      --bf-shadow: 0 18px 40px rgba(0,0,0,0.25);
    }

/* Dialog-Reset + Zentrierung */
.bfpm{
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  width: auto !important;
  max-width: none !important;
}

.bfpm[open]{
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 99999 !important;
}

/* Backdrop */
.bfpm__backdrop{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.55) !important;
}

/* Card wie Screenshot */
.bfpm__card{
  position: relative !important;
  z-index: 1 !important;

  width: min(34.375rem, calc(100vw - 2rem)) !important; /* 550px max */
  background: rgba(255,255,255,0.97) !important;

  border-radius: clamp(2.25rem, 5vw, 3.25rem) !important;
  box-shadow: 0 1.25rem 3rem rgba(0,0,0,0.28) !important;

  padding: clamp(1.25rem, 3vw, 1.75rem) !important;
	
  margin: var(--bfPhotoModal-top) auto 2rem !important;
}

/* Media (Bild) */
.bfpm__media{
  position: relative !important;
  border-radius: clamp(1.5rem, 4vw, 2.25rem) !important;
  overflow: hidden !important;
  background: #fff !important;
  min-height: 12rem !important;   /* verhindert „0px“-Kollaps */
}

.bfpm__img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Close-Kreis oben rechts im Bild */
.bfpm__close{
  position: absolute !important;
  top: clamp(0.9rem, 2.2vw, 1.35rem) !important;
  right: clamp(0.9rem, 2.2vw, 1.35rem) !important;

  width: clamp(3.0rem, 7vw, 3.6rem) !important;
  height: clamp(3.0rem, 7vw, 3.6rem) !important;

  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;

  display: grid !important;
  place-items: center !important;

  cursor: pointer !important;
  box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.18) !important;
}

.bfpm__close:focus-visible{
  outline: 3px solid #057652 !important;
  outline-offset: 4px !important;
}

/* X-Zeichen (sauber, ohne Font-Abhängigkeit) */
.bfpm__closeX{
  position: relative !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  display: block !important;
}

.bfpm__closeX::before,
.bfpm__closeX::after{
  content:"" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 2.5rem !important;
  height: 0.22rem !important;
  background: #000 !important;
  border-radius: 999px !important;
  transform-origin: center !important;
}

.bfpm__closeX::before{ transform: translate(-50%, -50%) rotate(45deg) !important; }
.bfpm__closeX::after { transform: translate(-50%, -50%) rotate(-45deg) !important; }

/* Textblock */
.bfpm__text{
  padding-top: clamp(1.0rem, 2.2vw, 1.35rem) !important;
  text-align: center !important;
}

.bfpm__code{
  font-family: 'Droid-Serif', serif !important;
  font-weight: normal !important;
  font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1.0rem) !important;
  letter-spacing: 0.08em !important;
  color: #111 !important;
  margin-bottom: 0.35rem !important;
}

.bfpm__title{
  font-family: 'Droid-Serif-Bold', serif !important;
  font-weight: normal !important;
  color: #111 !important;

  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem) !important;
  line-height: 1.15 !important;

  margin: 0 !important;
}

.bf-pl__camera{
  display: block; /* wichtig für saubere Ausrichtung im Flex-Wrapper */
  width: 1.1rem;
  height: 1.1rem;
  background: url("../img/bf-img/icons/camera.svg") no-repeat center / contain;
  font-size: 0;        /* Textinhalt sicher aus */
  line-height: 1;      /* keine Baseline-Verschiebung */
  color: transparent;  /* Fallback */
}

/* Mobile: etwas mehr Luft unten wie Screenshot */
@media (max-width: 575.98px){
  .bfpm__card{
    padding: 1.25rem !important;
    border-radius: 2.25rem !important;
  }
  .bfpm__media{
    border-radius: 1.75rem !important;
  }
}