/* Ignition: zwei Werbeformate.
   A  Empfehlungsblock im Text, fest im HTML, klar als Auswahl der Redaktion
      gekennzeichnet und als Partnerlink ausgewiesen. Kein fremdes Werbelayout.
   B  Karte in der Bildschirmmitte nach Lesezeit. */

/* ---------- A: Empfehlungsblock ---------- */
.ig-pick{display:grid;grid-template-columns:auto 1fr;gap:14px 16px;align-items:start;
  margin:34px 0;padding:18px;background:var(--surface-2,#18181b);
  border:1px solid var(--line,#2b2a2d);border-left:3px solid var(--orange,#ff6a1a);border-radius:14px}
.ig-pick__badge{grid-column:1/-1;display:flex;align-items:center;gap:8px;
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--amber,#ffb44c)}
.ig-pick__badge span{color:var(--muted,#a7a39c);font-weight:600;letter-spacing:.08em}
.ig-pick__art{grid-row:2;width:96px;height:96px;border-radius:12px;object-fit:cover}
.ig-pick__body{grid-row:2;min-width:0;display:flex;flex-direction:column;gap:7px}
.ig-pick__body h3{margin:0;font-size:1.08rem;line-height:1.3;color:var(--text,#f4f2ee)}
.ig-pick__body p{margin:0;font-size:.86rem;line-height:1.5;color:var(--muted,#a7a39c)}
.ig-pick__why{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0;list-style:none}
.ig-pick__why li{font-size:.72rem;padding:4px 9px;border-radius:999px;
  background:rgba(255,106,26,.12);color:var(--amber,#ffb44c)}
.ig-cta{align-self:flex-start;margin-top:4px;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:0 18px;border-radius:10px;background:var(--orange,#ff6a1a);color:#120a04;
  font-weight:700;font-size:.86rem;text-decoration:none}
.ig-cta:hover{background:var(--amber,#ffb44c)}
.ig-pick__fine{grid-column:1/-1;margin:2px 0 0;font-size:.68rem;line-height:1.5;color:var(--muted,#a7a39c)}
.ig-pick__fine a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---------- B: Karte in der Bildschirmmitte ---------- */
.ig-modal[hidden]{display:none!important}
.ig-modal{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:20px;
  background:rgba(8,8,9,.76);opacity:0;transition:opacity .2s ease}
.ig-modal.is-on{opacity:1}
.ig-modal__card{position:relative;width:100%;max-width:500px;background:var(--surface,#121214);
  color:var(--text,#f4f2ee);border:1px solid var(--line,#2b2a2d);border-radius:16px;
  overflow:auto;max-height:calc(100dvh - 40px);box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:translateY(14px) scale(.985);transition:transform .24s cubic-bezier(.2,.8,.25,1)}
.ig-modal.is-on .ig-modal__card{transform:none}
.ig-modal__art{display:block;width:100%;aspect-ratio:16/9;max-height:34dvh;object-fit:cover}
.ig-x{position:sticky;float:right;top:10px;right:10px;z-index:2;width:36px;height:36px;
  display:grid;place-items:center;border:0;border-radius:50%;background:rgba(8,8,9,.72);
  color:#fff;font-size:19px;line-height:1;cursor:pointer}
.ig-x:hover{background:rgba(8,8,9,.92)}
.ig-modal__body{padding:20px 22px 22px}
.ig-modal__body h2{margin:10px 0 8px;font-size:1.5rem;line-height:1.18}
.ig-modal__body p{margin:0 0 14px;font-size:.92rem;line-height:1.55;color:var(--muted,#a7a39c)}
.ig-modal .ig-cta{width:100%;justify-content:center;min-height:50px;font-size:.94rem}
.ig-no{display:block;width:100%;margin-top:9px;padding:9px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:.82rem;color:var(--muted,#a7a39c);text-decoration:underline;text-underline-offset:3px}
.ig-no:hover{color:var(--text,#f4f2ee)}

@media(max-width:560px){
  .ig-pick{grid-template-columns:1fr}
  .ig-pick__art{grid-row:auto;width:100%;height:140px}
  .ig-pick__body{grid-row:auto}
  .ig-cta{width:100%;justify-content:center}
  .ig-modal__body{padding:16px 16px 18px}
  .ig-modal__body h2{font-size:1.3rem}
}
@media(prefers-reduced-motion:reduce){.ig-modal,.ig-modal__card{transition:none}}
