/* ── DG Popups — Frontend ───────────────────────────────────────────────── */

.dgp-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(10, 8, 5, 0.7);
  z-index:    9990;
  display:    flex;
  align-items:     center;
  justify-content: center;
  padding:    1.25rem;
  opacity:    0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter:         blur(4px);
}
.dgp-overlay.dgp-open {
  opacity:    1;
  visibility: visible;
}

/* ── Box ── */
.dgp-box {
  background:  var(--dg-bg, #FAF7F2);
  color:       var(--dg-text, #1C150D);
  position:    relative;
  max-width:   740px;
  width:       100%;
  max-height:  92vh;
  overflow-y:  auto;
  border-radius: 2px;
  box-shadow:  0 32px 100px rgba(0, 0, 0, 0.38);
  transform:   translateY(28px) scale(0.98);
  transition:  transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.dgp-overlay.dgp-open .dgp-box {
  transform: translateY(0) scale(1);
}

/* ── Close Button ── */
.dgp-close {
  position:   absolute;
  top:        1rem;
  right:      1rem;
  width:      2.2rem;
  height:     2.2rem;
  background: none;
  border:     none;
  color:      var(--dg-muted, #8A7A6A);
  font-size:  1.6rem;
  line-height: 1;
  cursor:     pointer;
  display:    flex;
  align-items: center;
  justify-content: center;
  z-index:    2;
  transition: color 0.2s;
}
.dgp-close:hover { color: var(--dg-text, #1C150D); }

/* ── Shared Content Area ── */
.dgp-content {
  padding: clamp(2.5rem, 6vw, 3.5rem);
  padding-right: clamp(3.5rem, 8vw, 5rem); /* Platz für X-Button */
}

.dgp-label {
  font-size:      0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight:    500;
  color:          var(--dg-accent, #C9A87C);
  margin-bottom:  0.7rem;
}

.dgp-heading {
  font-family: var(--dg-serif, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-style:  italic;
  font-size:   clamp(1.6rem, 4.5vw, 2.8rem);
  line-height: 1.15;
  color:       var(--dg-text, #1C150D);
  margin-bottom: 1rem;
}

.dgp-body {
  font-size:   0.9rem;
  line-height: 1.75;
  color:       var(--dg-muted, #8A7A6A);
  margin-bottom: 1.75rem;
  max-width:   44ch;
}

.dgp-btn {
  display:         inline-block;
  font-size:       0.68rem;
  font-weight:     500;
  letter-spacing:  0.13em;
  text-transform:  uppercase;
  text-decoration: none;
  color:           var(--dg-text, #1C150D);
  border:          1px solid var(--dg-text, #1C150D);
  padding:         0.7rem 1.8rem;
  transition:      background 0.22s, color 0.22s;
}
.dgp-btn:hover {
  background: var(--dg-text, #1C150D);
  color:      var(--dg-bg, #FAF7F2);
}

/* ── Split Layout ── */
.dgp-layout-split_left  .dgp-split,
.dgp-layout-split_right .dgp-split {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  min-height:            360px;
}

.dgp-img-col {
  overflow: hidden;
}
.dgp-img-col img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.dgp-text-col {
  padding: clamp(2.5rem, 5vw, 3.5rem);
  padding-right: clamp(3.5rem, 7vw, 4.5rem);
  display:        flex;
  flex-direction: column;
  justify-content: center;
}
/* Text links = close button über Text → extra Platz oben */
.dgp-layout-split_right .dgp-text-col {
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

/* ── Stacked Layout ── */
.dgp-img-top {
  width:    100%;
  height:   240px;
  overflow: hidden;
}
.dgp-img-top img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .dgp-box { max-height: 96vh; }

  .dgp-layout-split_left  .dgp-split,
  .dgp-layout-split_right .dgp-split {
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .dgp-img-col { height: 200px; }
  .dgp-layout-split_right .dgp-img-col { order: -1; }
  .dgp-text-col  { padding: 2rem; padding-right: 3.5rem; }
  .dgp-content   { padding: 2rem; padding-right: 3.5rem; }
  .dgp-img-top   { height: 180px; }
  .dgp-body      { max-width: 100%; }
}