/* BOSSMA-Plakette im Seitenfuß: Farben über CSS-Variablen, passend zur Website. */
.bxp-plakette { --pl-band1: #0E8F8A; --pl-band2: #ffffff; --pl-grund: rgba(255,255,255,.55); --pl-rand: rgba(0,0,0,.14); --pl-text: inherit; --pl-mess-grund: #14201f; --pl-mess-text: #6fe3a5;
  position: relative; display: inline-flex; align-items: center; gap: 9px; margin: 0 2px; padding: 4px 6px 4px 17px; vertical-align: middle; border-radius: 999px; background: var(--pl-grund); border: 1px solid var(--pl-rand); color: var(--pl-text) !important; text-decoration: none !important; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.bxp-plakette:hover, .bxp-plakette:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(0,0,0,.35); border-color: var(--pl-band1); }
.bxp-band { position: absolute; left: 4px; top: 4px; bottom: 4px; width: 8px; border-radius: 999px; background: repeating-linear-gradient(-45deg, var(--pl-band1) 0 4px, var(--pl-band2) 4px 8px); background-size: 11.3px 11.3px; }
.bxp-plakette:hover .bxp-band { animation: bxp-band .6s linear infinite; }
.bxp-mess { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: var(--pl-mess-grund); color: var(--pl-mess-text); font-size: .86em; font-variant-numeric: tabular-nums; }
.bxp-mess i { width: 6px; height: 6px; border-radius: 50%; background: var(--pl-mess-text); animation: bxp-puls 1.8s infinite; }
.bxp-plakette::after { content: attr(data-hinweis); position: absolute; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: 250px; padding: 8px 11px; border-radius: 8px; background: #14201f; color: #fff; font-size: .78rem; font-weight: 500; line-height: 1.35; white-space: normal; text-align: left; box-shadow: 0 12px 26px rgba(0,0,0,.3); opacity: 0; transform: translate(-50%, 6px); pointer-events: none; transition: opacity .25s, transform .25s; }
.bxp-plakette:hover::after, .bxp-plakette:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@keyframes bxp-band { to { background-position: 11.3px 0; } }
@keyframes bxp-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* Dezente Fassung „linie“: Text in Versalien zwischen Haarlinien, optional mit Herz */
.bxp-plakette.bxp-linie { --pl-linie: var(--pl-band1); display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; color: inherit !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.5 !important; text-transform: uppercase !important; letter-spacing: .22em !important; white-space: normal; text-align: center; }
.bxp-plakette.bxp-linie::before, .bxp-plakette.bxp-linie::after { content: ""; position: static; width: 28px; max-width: none; height: 1px; padding: 0; border-radius: 0; background: var(--pl-linie); box-shadow: none; opacity: 1; transform: none; transition: width .3s; }
.bxp-plakette.bxp-linie:hover, .bxp-plakette.bxp-linie:focus-visible { transform: none; box-shadow: none; color: var(--pl-band1) !important; }
.bxp-plakette.bxp-linie:hover::before, .bxp-plakette.bxp-linie:hover::after { width: 40px; transform: none; }
.bxp-linie .bxp-text { max-width: 100%; text-wrap: balance; hyphens: none; }
.bxp-herz { display: inline-block; margin-right: .1em; color: var(--pl-linie); font-size: 1.35em !important; line-height: 1; letter-spacing: 0 !important; vertical-align: -.08em; }
.bxp-linie:hover .bxp-herz { animation: bxp-schlag .9s ease-in-out 1; }
@keyframes bxp-schlag { 25% { transform: scale(1.3); } 50% { transform: scale(.95); } 75% { transform: scale(1.15); } }
@media (max-width: 600px) { .bxp-plakette { margin-top: 6px; } .bxp-plakette::after { display: none; } .bxp-plakette.bxp-linie { letter-spacing: .16em !important; margin-top: 0; } .bxp-plakette.bxp-linie::after { display: block; } }
@media (prefers-reduced-motion: reduce) { .bxp-plakette, .bxp-plakette:hover .bxp-band, .bxp-mess i, .bxp-linie:hover .bxp-herz { animation: none; transition: none; } }