/* Teilen-Leiste auf Artikelseiten + Vorschau-Overlay fuers 9:16-Story-Bild.
   Monochrom-Plus, nutzt Tokens aus tokens.css. Der Toast (#dp-toast) ist
   bereits global in site.css definiert. */

/* ---------- Leiste im Artikel-Hero ---------- */
.artikel-share{
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line,#ececec);
}
.artikel-share__btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font:inherit;font-size:.9rem;line-height:1;
  padding:.6rem .95rem;border:1px solid var(--line,#ececec);border-radius:999px;
  background:var(--paper,#fff);color:var(--ink,#0a0a0a);cursor:pointer;
  transition:border-color .18s,background .18s,color .18s,transform .18s;
}
.artikel-share__btn svg{width:18px;height:18px;flex:0 0 auto}
.artikel-share__btn:hover{border-color:var(--accent,#111114);background:var(--accent-soft,rgba(17,17,20,.07))}
.artikel-share__btn:focus-visible{outline:2px solid var(--accent,#111114);outline-offset:2px}
.artikel-share__btn:active{transform:translateY(1px)}
.artikel-share__btn:disabled,.artikel-share__btn.is-busy{opacity:.55;cursor:default;pointer-events:none}

/* "Als Bild" gefuellt hervorheben. */
.artikel-share__btn--img{background:var(--accent,#111114);color:#fff;border-color:var(--accent,#111114)}
.artikel-share__btn--img:hover{background:var(--ink,#0a0a0a);color:#fff;opacity:.92}

/* ---------- Vorschau-Overlay ---------- */
.dp-share-modal{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(10,10,10,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.dp-share-modal.open{display:flex}
.dp-share-modal__panel{
  display:flex;flex-direction:column;gap:18px;align-items:center;
  max-width:min(92vw,420px);max-height:92vh;
}
.dp-share-modal__preview{
  max-height:70vh;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);background:#fff;
}
.dp-share-modal__preview img{
  display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;
}
.dp-share-modal__actions{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
}
.dp-share-modal__btn{
  font:inherit;font-size:.92rem;line-height:1;
  padding:.7rem 1.15rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s;
}
.dp-share-modal__btn:hover{background:rgba(255,255,255,.2)}
.dp-share-modal__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.dp-share-modal__btn:active{transform:translateY(1px)}
.dp-share-modal__btn--primary{background:#fff;color:var(--ink,#0a0a0a);border-color:#fff}
.dp-share-modal__btn--primary:hover{background:#f0f0f0}
.dp-share-modal__btn--ghost{background:transparent;border-color:transparent;opacity:.85}
.dp-share-modal__btn--ghost:hover{background:rgba(255,255,255,.12);opacity:1}

@media (max-width:520px){
  .artikel-share__btn span{font-size:.86rem}
  .dp-share-modal__panel{max-width:96vw}
}