/* Aktions-Banner „Trading Card World Braunschweig“: Einblendung über der ganzen Seite (<dialog>, js/promo.js) */
.promo { padding: 16px; margin: auto; border: 0; background: transparent; max-width: 480px; width: 100%; max-height: 100dvh; overflow: visible; color: var(--ink); }
.promo::backdrop { background: rgba(7, 17, 31, .62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.promo[open] { animation: promo-in .45s var(--ease-out) both; }
.promo[open]::backdrop { animation: promo-fade .3s ease both; }
@keyframes promo-in { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes promo-fade { from { opacity: 0; } }
.promo__card { position: relative; background: var(--surface); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 40px 90px -30px rgba(3, 12, 30, .7), 0 0 0 1px rgba(255,255,255,.08); max-height: calc(100dvh - 32px); overflow-y: auto; }
.promo__media { position: relative; background: #4f7ff5; }
.promo__media img { display: block; width: 100%; height: auto; }
.promo__media::after { content: ""; position: absolute; inset: auto 0 0; height: 34px; background: linear-gradient(180deg, rgba(255,255,255,0), var(--surface)); pointer-events: none; }
.promo__x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink); background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(7,17,31,.28); transition: transform .2s ease, background .2s ease; }
.promo__x:hover { transform: rotate(90deg); background: #fff; }
.promo__x:focus-visible, .promo__skip:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; }
.promo__seal { position: absolute; right: 18px; bottom: -26px; z-index: 2; width: 84px; height: 84px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; background: radial-gradient(70% 70% at 35% 30%, #ff6a3d 0%, var(--info) 70%); box-shadow: 0 10px 24px -8px rgba(227,53,13,.75), inset 0 0 0 3px rgba(255,255,255,.35); transform: rotate(-10deg); }
.promo__seal b { font: 700 22px/1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.promo__seal span { font: 600 10px/1.1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
.promo__body { padding: 14px 28px 24px; text-align: center; }
.promo__eyebrow { display: inline-block; margin: 0 0 12px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary-deep); font: 600 12px/1.2 var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.promo h2 { margin: 0 0 10px; font: 600 23px/1.22 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.promo__p { margin: 0 0 20px; font-size: 17px; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.promo__p strong { color: var(--info); font-weight: 700; white-space: nowrap; }
.promo__cta { width: 100%; }
.promo__cta > span { width: 100%; justify-content: center; }
.promo__skip { margin-top: 10px; padding: 8px 12px; border: 0; background: none; cursor: pointer; color: var(--ink-2); font: 500 14px/1.2 var(--font-body); border-radius: var(--r-sm); }
.promo__skip:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 420px) {
  .promo__body { padding: 12px 20px 20px; }
  .promo h2 { font-size: 20px; }
  .promo__p { font-size: 16px; }
  .promo__seal { width: 70px; height: 70px; bottom: -22px; right: 14px; }
  .promo__seal b { font-size: 18px; }
  .promo__x { top: 10px; right: 10px; width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .promo[open], .promo[open]::backdrop { animation: none; } .promo__x:hover { transform: none; } }
/* Hinweis im Anfrageformular, wenn der Rabatt über das Banner gewählt wurde */
.leadform__promo { margin: -4px 0 14px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--success-soft); color: #14603d; font-size: 14px; line-height: 1.4; }
.promo:focus { outline: none; }
@media (max-width: 420px) { .promo__seal { bottom: -14px; } .promo__body { padding-top: 22px; } }
.promo__fine { margin: 6px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.leadform__promo small { font-size: 12px; opacity: .8; }