/* Teilen-Baustein (06.11.2026) – Knopf + Menü am Rechner. Skript: js/teilen.js, Konzept: KONZEPT_2026-11-06_Teilen-im-Shop.md */
.teilen-knopf {
  display: inline-flex; align-items: center; gap: .45em; padding: .45em .95em; border: 1px solid #c9d6cb; border-radius: 999px;
  background: #fff; color: #1f3d27; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap;
}
.teilen-knopf::before {
  content: ""; width: 1.05em; height: 1.05em; flex: 0 0 auto; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.teilen-knopf:hover { border-color: #43a047; background: #f3f9f3; }
.teilen-knopf:focus-visible { outline: 2px solid #43a047; outline-offset: 2px; }
.teilen-knopf[aria-expanded="true"] { border-color: #43a047; background: #e8f5e9; }

.teilen-menue {
  position: absolute; left: 0; top: 0; width: max-content; z-index: 100000; min-width: 210px; padding: 6px; background: #fff; border: 1px solid #dde3dd; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 30, 24, .18); font-size: 15px;
}
.teilen-menue[hidden] { display: none; }
.teilen-menue__titel { margin: 4px 10px 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #5a6470; }
.teilen-menue a, .teilen-menue button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none;
  color: #1a1a1a; font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.teilen-menue a:hover, .teilen-menue button:hover, .teilen-menue a:focus-visible, .teilen-menue button:focus-visible { background: #f1f5f1; outline: none; }
.teilen-ico { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.teilen-ico svg { width: 16px; height: 16px; }
.teilen-ico--wa { background: #25a244; }
.teilen-ico--fb { background: #1877f2; }
.teilen-ico--ml { background: #5a6470; }
.teilen-ico--ln { background: #2e7d32; }