/* =============================================================================
   promo.css — Werbe-Pop-up auf der Startseite.
   Bildschirmfüllendes Hochkant-Bild, Text unten wie auf den Karten, rundes X.
   Tokens und Bildsprache aus css/style.css. Kein farbiger Strich an Kanten.
   ============================================================================= */

.promo-dim{
  position:fixed; inset:0; z-index:1200;
  background:rgba(4,3,10,.82);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .32s var(--ease-ui, cubic-bezier(.22,1,.36,1));
}
.promo-dim.is-on{ opacity:1; }

.promo{
  position:fixed; inset:0; z-index:1210;
  display:grid; place-items:center; padding:20px;
  opacity:0; visibility:hidden;
  transition:opacity .32s var(--ease-ui, cubic-bezier(.22,1,.36,1)), visibility .32s;
}
.promo.is-open{ opacity:1; visibility:visible; }

.promo__card{
  position:relative;
  width:min(440px, 92vw);
  aspect-ratio:4 / 5;                 /* hochkant, „ein bisschen höher als HD" */
  max-height:88vh;
  border-radius:var(--r-card, 26px);
  overflow:hidden;
  background:#12111c center/cover no-repeat;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.85);
  transform:translateY(22px) scale(.94);
  transition:transform .42s var(--ease-ui, cubic-bezier(.16,1.18,.3,1));
}
.promo.is-open .promo__card{ transform:none; }

/* Dezente Abdunkelung nur am unteren Bildrand, damit der Text auf jedem
   hochgeladenen Foto lesbar bleibt. Liegt IM Bild, nicht als Kantenstreifen. */
.promo__card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(6,5,12,.82) 0%, rgba(6,5,12,.35) 34%, transparent 62%);
}

.promo__x{
  position:absolute; top:14px; right:14px; z-index:3;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(10,10,16,.5); color:#fff;
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  cursor:pointer; transition:transform .2s var(--ease-ui, ease), background .2s;
}
.promo__x svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; }
.promo__x:hover{ background:rgba(230,0,126,.9); transform:rotate(90deg); }
.promo__x:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.promo__content{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(22px, 5vw, 34px);
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  text-shadow:0 1px 18px rgba(0,0,0,.5);
}
.promo__eyebrow{
  margin:0; font-size:.7rem; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--pink-soft, #F7A6CE);
}
.promo__title{
  margin:0; font-family:Poppins, system-ui, sans-serif;
  font-size:clamp(1.6rem, 6vw, 2.2rem); font-weight:900; line-height:1.05;
  letter-spacing:-.02em; color:#fff; text-wrap:balance;
}
.promo__body{
  margin:0; font-size:.98rem; line-height:1.5; color:rgba(255,255,255,.9);
  max-width:36ch;
}
.promo__cta{ margin-top:.5rem; }

body.promo-lock{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .promo-dim, .promo, .promo__card{ transition-duration:.01ms; }
  .promo__card{ transform:none; }
  .promo__x{ transition:none; }
}