/* Bodenbericht Share-Komponente. Pairs with /static/share.js */

.bb-share {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: #f4f7f8;
  border: 1px solid rgba(18, 35, 61, 0.14);
  border-radius: 4px;
  color: #12233d;
  font: 600 14px/1.2 'Inter', sans-serif;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.1px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.bb-share:hover {
  background: #eef3f4;
  border-color: rgba(18, 35, 61, 0.24);
}
.bb-share:active { transform: translateY(1px); }
.bb-share::before {
  content: '';
  display: inline-block;
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2312233d'><path d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Floating variant - rechts unten, mobile-friendly */
.bb-share-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  box-shadow: 0 8px 20px rgba(18, 35, 61, 0.18);
}
@media (max-width: 560px) {
  .bb-share-float {
    right: 14px;
    bottom: 14px;
    padding: 10px 16px;
  }
}

/* Modal overlay */
.bb-share-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 27, 45, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10000;
  animation: bb-share-fade 0.15s ease;
}
@keyframes bb-share-fade { from { opacity: 0; } to { opacity: 1; } }

.bb-share-modal {
  background: #fff;
  border-radius: 6px;
  max-width: 440px;
  width: 100%;
  padding: 28px 28px 22px;
  position: relative;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32);
  animation: bb-share-pop 0.18s ease;
}
@keyframes bb-share-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bb-share-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font: 400 26px/1 'Inter', sans-serif;
  color: #555;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.bb-share-close:hover { background: #f4f7f8; color: #000; }

.bb-share-modal h3 {
  margin: 0 0 4px;
  font: 600 20px/1.25 'Sentient', Georgia, serif;
  color: #0F1B2D;
}
.bb-share-sub {
  margin: 0 0 18px;
  font: 400 14px/1.4 'Inter', sans-serif;
  color: #5a6c84;
}

.bb-share-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 380px) {
  .bb-share-list { grid-template-columns: 1fr; }
}

.bb-share-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(18, 35, 61, 0.12);
  border-radius: 4px;
  color: #12233d;
  text-decoration: none;
  font: 500 14px/1.2 'Inter', sans-serif;
  background: #fff;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.bb-share-link:hover {
  background: #f4f7f8;
  border-color: rgba(18, 35, 61, 0.22);
}
.bb-share-icon {
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5a6c84;
}
.bb-share-link[data-method="whatsapp"] .bb-share-icon { color: #25D366; }
.bb-share-link[data-method="telegram"] .bb-share-icon { color: #229ED9; }
.bb-share-link[data-method="linkedin"] .bb-share-icon { color: #0A66C2; }
.bb-share-link[data-method="twitter"] .bb-share-icon { color: #000; }
.bb-share-link[data-method="bluesky"] .bb-share-icon { color: #1083FE; }
.bb-share-link[data-method="reddit"] .bb-share-icon { color: #FF4500; }
.bb-share-link[data-method="email"] .bb-share-icon { color: #5a6c84; }
.bb-share-link[data-method="copy"] .bb-share-icon { color: #1e9a52; }
.bb-share-name {
  flex: 1;
  font-weight: 500;
}

.bb-share-foot {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(18, 35, 61, 0.08);
  font: 400 12px/1.4 'Inter', sans-serif;
  color: #777;
  word-break: break-all;
}
.bb-share-foot code {
  font: 500 12px/1.4 'JetBrains Mono', monospace;
  color: #1a2a44;
}