/* ===== Whitepaper Lead-Magnet: Promo-Karte mit Booklet ueber dem Rand =====
   Nutzt die Design-Tokens aus style.css (--primary, --secondary, --bg-soft ...).
   Wird NACH style.css geladen. */

.lm-eyebrow{display:inline-block;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  font-size:13px;color:var(--primary-dark);margin-bottom:10px}

.lm-promo{padding:clamp(40px,6vw,66px) 0 clamp(52px,6vw,82px);background:var(--bg-soft)}
.lm-promo-card{position:relative;max-width:940px;margin:0 auto;text-align:center;color:#fff;
  padding:clamp(128px,18vw,190px) clamp(24px,5vw,64px) clamp(40px,5vw,56px);overflow:visible}
.lm-promo-bg{position:absolute;inset:0;z-index:0;border-radius:28px;overflow:hidden;
  background:linear-gradient(165deg,#0d5288 0%,#024074 38%,var(--secondary) 72%,var(--secondary-dark) 100%);
  box-shadow:0 40px 90px rgba(0,55,102,.32)}
.lm-promo-bg:before{content:"";position:absolute;right:-90px;top:-90px;width:360px;height:360px;
  border-radius:50%;background:radial-gradient(circle,rgba(2,161,220,.34),transparent 64%)}
.lm-promo-inner{position:relative;z-index:2}
.lm-promo .lm-eyebrow{color:#5cc8f0;margin-bottom:12px}
.lm-promo-card h2{color:#fff;font-size:clamp(26px,3.6vw,42px);margin:0 0 16px;letter-spacing:-.015em;line-height:1.12}
.lm-promo-card p.lm-sub{color:rgba(255,255,255,.86);font-size:clamp(15px,1.2vw,17.5px);max-width:560px;margin:0 auto 26px}

/* Booklet: ragt im Fluss oben aus der Karte (keine Ueberlappung mit Nachbarsektion) */
.lm-book-wrap{position:relative;z-index:2;width:172px;margin:0 auto -120px;perspective:1300px}
.lm-book{position:relative;transform:rotateY(-15deg) rotateX(2deg);transform-style:preserve-3d}
.lm-book img{display:block;width:100%;height:auto;border-radius:2px 5px 5px 2px;
  box-shadow:10px 22px 44px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14)}
.lm-book:before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
  background:linear-gradient(90deg,rgba(0,12,24,.75),rgba(255,255,255,.12));border-radius:2px 0 0 2px}
.lm-book:after{content:"";position:absolute;right:-7px;top:2%;bottom:2%;width:8px;
  background:linear-gradient(90deg,#c3ccd6 0%,#eef2f6 45%,#dde3ea 100%);
  transform:skewY(-2deg);border-radius:0 3px 3px 0;box-shadow:4px 5px 11px rgba(0,0,0,.3)}

/* Formular */
.lm-promo-form{max-width:480px;margin:0 auto;display:grid;gap:11px}
.lm-promo-form .lm-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.lm-promo-form input{width:100%;padding:14px 16px;border:0;border-radius:var(--radius-md);
  font:inherit;font-size:15px;background:#fff;color:var(--text)}
.lm-promo-form input:focus{outline:none;box-shadow:0 0 0 3px rgba(2,161,220,.5)}
.lm-promo-form .btn{width:100%;justify-content:center}
.lm-promo-form .btn[disabled]{opacity:.6;cursor:progress}
.lm-promo-note{font-size:12.5px;color:rgba(255,255,255,.68);margin:12px 0 0}
.lm-promo-note a{color:#9fd9f2}

/* Honeypot unsichtbar */
.lm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Erfolg / Fehler */
.lm-promo-msg{display:none;border-radius:var(--radius-md);padding:16px 18px;font-size:14.5px;line-height:1.5;margin:4px auto 0;max-width:480px}
.lm-promo-msg.show{display:block}
.lm-promo-ok{background:rgba(255,255,255,.96);color:#14492a}
.lm-promo-ok strong{display:block;color:#003766;font-size:16px;margin-bottom:3px}
.lm-promo-err{background:rgba(255,235,232,.97);color:#8a1f2e;text-align:left}

@media(max-width:560px){
  .lm-promo-form .lm-row{grid-template-columns:1fr}
}
@media(min-width:769px){
  .lm-book-wrap{width:258px;margin-bottom:-184px}
  .lm-promo-card p.lm-sub{margin-bottom:28px}
}