/* =================================================
   WERKBUND EVENT TICKER
   Glass · Green · Fade · Status · Premium
   ================================================= */

.wb-ticker{
  --wb-green: #0f6a43;
  --wb-green-soft: rgba(15,106,67,.18);
  --wb-glass-bg: rgba(240,248,242,.65);
  --wb-glass-item: rgba(255,255,255,.55);

  --wb-orange-bg: rgba(198,103,46,.08);
  --wb-orange-border: rgba(198,103,46,.25);
  --wb-orange-text: #b05b2a;

  /* Animation speeds (can be overridden inline from the shortcode) */
  --wb-speed-desktop: 80s;
  --wb-speed-tablet: 95s;
  --wb-speed-mobile: 110s;
  --wb-ticker-speed: var(--wb-speed-desktop, 80s);

  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 18px;

  background: var(--wb-glass-bg);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);

  border-radius:16px;
  border:1px solid var(--wb-green-soft);

  box-shadow:
    0 8px 30px rgba(0,80,50,.12),
    inset 0 1px 0 rgba(255,255,255,.55);

  overflow:hidden;
  width:100%;
}

@media (max-width: 980px){
  .wb-ticker{ --wb-ticker-speed: var(--wb-speed-tablet, 95s); }
}

@media (max-width: 782px){
  .wb-ticker{ --wb-ticker-speed: var(--wb-speed-mobile, 110s); }
}

/* =================================================
   LABEL LINKS – JETZT | DEMNÄCHST
   ================================================= */

.wb-ticker__label{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;

  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#0f5132;
  opacity:.9;
}

/* grüner Punkt */
.wb-ticker__label::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--wb-green);
  box-shadow: 0 0 0 6px rgba(15,106,67,.10);
}

/* Sub-Label: „Demnächst“ */
.wb-ticker__label-sub{
  padding-left:10px;
  border-left:1px solid rgba(15,106,67,.18);
  opacity:.55;
}

/* =================================================
   TRACK + FADE-KANTEN
   ================================================= */

.wb-ticker__track{
  position:relative;
  flex:1 1 auto;
  overflow:hidden;
  min-width:0;
}

/* Fade links/rechts */
.wb-ticker__track::before,
.wb-ticker__track::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:44px;
  z-index:3;
  pointer-events:none;
}

.wb-ticker__track::before{
  left:0;
  background: linear-gradient(
    to right,
    rgba(240,248,242,.95),
    rgba(240,248,242,0)
  );
}

.wb-ticker__track::after{
  right:0;
  background: linear-gradient(
    to left,
    rgba(240,248,242,.95),
    rgba(240,248,242,0)
  );
}

/* =================================================
   MARQUEE – SEHR RUHIG
   ================================================= */

.wb-ticker__marquee{
  display:flex;
  align-items:center;
  gap:14px;

  width:max-content;
  white-space:nowrap;
  will-change:transform;

  animation: wb-marquee-linear var(--wb-ticker-speed, 80s) linear infinite;
}

/* Pause nur auf Desktop-Hover */
@media (hover: hover) and (pointer: fine){
  .wb-ticker:hover .wb-ticker__marquee{
    animation-play-state: paused;
  }
}

/* =================================================
   TICKET / PILL – GLASIG
   ================================================= */

.wb-ticker__item{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 16px;
  border-radius:999px;

  background: var(--wb-glass-item);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border:1px solid rgba(15,106,67,.22);

  box-shadow:
    0 2px 10px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.65);

  text-decoration:none;
  color:#0b3d2e;
  line-height:1;
  white-space:nowrap;
  flex:0 0 auto;

  transition:
    background .25s ease,
    box-shadow .25s ease,
    transform .25s ease,
    border-color .25s ease;
}

/* Optional thumbnail (featured image) */
.wb-ticker__thumb{
  width:34px;
  height:34px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid rgba(15,106,67,.18);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.wb-ticker__item:hover{
  background: rgba(255,255,255,.78);
  border-color: rgba(15,106,67,.28);
  box-shadow:
    0 6px 20px rgba(15,106,67,.18),
    inset 0 1px 0 rgba(255,255,255,.75);
  transform: translateY(-1px);
}

/* =================================================
   STATUS: HEUTE / LAUFEND
   ================================================= */

.wb-ticker__status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-right:2px;
}

.wb-ticker__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--wb-green);
  box-shadow: 0 0 0 6px rgba(15,106,67,.10);
}

.wb-ticker__badge{
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:999px;

  border:1px solid rgba(15,106,67,.20);
  background: rgba(15,106,67,.06);
  color:#0f5132;
}

/* Green highlight: OPEN NOW */
.wb-ticker__badge.is-open{
  background: rgba(15,106,67,.12);
  border-color: rgba(15,106,67,.35);
  color:#0f6a43;
}

/* Orange highlight: TODAY */
.wb-ticker__badge.is-today{
  background: var(--wb-orange-bg);
  border-color: var(--wb-orange-border);
  color: var(--wb-orange-text);
}

/* Neutral highlight (e.g. next) */
.wb-ticker__badge.is-next{
  background: rgba(255,255,255,.40);
  border-color: rgba(15,106,67,.18);
  color:#1f6f4a;
}

/* Legacy accent class (kept for fallback ticker item) */
.wb-ticker__badge.is-accent{
  background: var(--wb-orange-bg);
  border-color: var(--wb-orange-border);
  color: var(--wb-orange-text);
}

/* =================================================
   TYPOGRAFIE
   ================================================= */

.wb-ticker__date,
.wb-ticker__time{
  font-variant-numeric: tabular-nums;
  font-size:13px;
  color:#1f6f4a;
  opacity:.88;
}

.wb-ticker__type{
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,106,67,.16);
  background: rgba(255,255,255,.38);
  color:#1f6f4a;
}

.wb-ticker__title{
  font-weight:600;
  font-size:13px;
  color:#0b3d2e;
}

.wb-ticker__period{
  font-size:12px;
  color:#2f6f56;
  opacity:.85;
}

.wb-ticker__meta{
  font-size:12px;
  color:#1f6f4a;
  opacity:.9;
  font-variant-numeric: tabular-nums;
}

.wb-ticker__loc{
  font-size:13px;
  color:#3c7f63;
  opacity:.9;
}

/* =================================================
   ANIMATION
   ================================================= */

@keyframes wb-marquee-linear{
  from{ transform: translateX(0); }
  /*
    The marquee duplicates the item list twice in markup.
    Therefore we shift by -50% for a seamless loop.
  */
  to  { transform: translateX(-50%); }
}

/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .wb-ticker__marquee{ animation: none !important; transform: none !important; }
}

/* =================================================
   MOBILE – weiterhin laufend (kein Swipe-only)
   ================================================= */

@media (max-width: 782px){
  .wb-ticker{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  /* Slightly smaller fades so content feels less clipped */
  .wb-ticker__track::before,
  .wb-ticker__track::after{ width: 28px; }
}