/* Motzener Bullet Marquee v1.0.0 */
.mbm{ --mbm-border:#fff; --mbm-stroke:3px; --mbm-cap:square; }
.mbm *{ box-sizing:border-box; }

/* Desktop grid */
.mbm-grid{ display:flex; flex-wrap:wrap; column-gap:70px; row-gap:26px; justify-content:center; }
.mbm-grid[data-align="left"]{ justify-content:flex-start; }
.mbm-grid[data-align="right"]{ justify-content:flex-end; }

.mbm-item{ position:relative; display:inline-flex; align-items:center; gap:.6em; padding:10px 10px; text-decoration:none; }
.mbm-text{ color:#fff; font-weight:800; letter-spacing:.02em; line-height:1.1; }
/* Die Klammer */
.mbm-item .mbm-bracket{ position:absolute; left:0; top:0; bottom:0; width:1px; pointer-events:none; }
.mbm-item .mbm-bracket::before,
.mbm-item .mbm-bracket::after,
.mbm-item::before { content:""; position:absolute; background: var(--mbm-border); height: var(--mbm-stroke); border-radius: calc(var(--mbm-cap) == round ? 99px : 0); }
/* Top-Linie */
.mbm-item .mbm-bracket::before{ left:0; right:auto; top: calc(0px - var(--mbm-stroke)/2); width: calc(100% + var(--inset-top)); }
/* Bottom-Linie */
.mbm-item .mbm-bracket::after{ left:0; bottom: calc(0px - var(--mbm-stroke)/2); width: var(--inset-bot); }
/* Linke Vertikale */
.mbm-item::before{ left: calc(0px - var(--mbm-stroke)/2); top: 0; height: 100%; width: var(--mbm-stroke); background: var(--mbm-border); }

/* Mobile marquee */
.mbm-marquee{ display:none; overflow:hidden; }
.mbm-marquee .mbm-track{ display:flex; gap:40px; will-change: transform; }

/* Visibility rules */
@media (max-width: 767px){
  .mbm-grid{ display:none; }
  .mbm-marquee{ display:block; }
  .mbm-marquee .mbm-chip{ position:relative; display:inline-flex; align-items:center; padding:10px; text-decoration:none; color:inherit; }
  .mbm-marquee .mbm-chip .mbm-text{ white-space:nowrap; }
  /* Kopie der Klammer für Marquee-Chips */
  .mbm-marquee .mbm-chip .mbm-bracket{ position:absolute; left:0; top:0; bottom:0; width:1px; pointer-events:none; }
  .mbm-marquee .mbm-chip .mbm-bracket::before,
  .mbm-marquee .mbm-chip .mbm-bracket::after,
  .mbm-marquee .mbm-chip::before { content:""; position:absolute; background: var(--mbm-border); height: var(--mbm-stroke); border-radius: calc(var(--mbm-cap) == round ? 99px : 0); }
  .mbm-marquee .mbm-chip .mbm-bracket::before{ left:0; right:auto; top: calc(0px - var(--mbm-stroke)/2); width: calc(100% + var(--inset-top)); }
  .mbm-marquee .mbm-chip .mbm-bracket::after{ left:0; bottom: calc(0px - var(--mbm-stroke)/2); width: var(--inset-bot); }
  .mbm-marquee .mbm-chip::before{ left: calc(0px - var(--mbm-stroke)/2); top: 0; height: 100%; width: var(--mbm-stroke); background: var(--mbm-border); }
}