/* ============================================================
   KANTINE TICKER – Frontend CSS
   ============================================================ */

:root {
  --kt-bg:          #1e293b;
  --kt-text:        #f1f5f9;
  --kt-label-bg:    #e63946;
  --kt-label-color: #ffffff;
  --kt-height:      42px;
  --kt-font-size:   13px;
}

/* Ticker-Leiste – kein z-index, kein position, damit Kadence-Nav darueber liegt */
.kt-bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: var(--kt-height);
  background: var(--kt-bg);
  overflow: visible;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  position: static !important;
  z-index: auto !important;
}

/* Kadence Header und Dropdowns immer oben */
#masthead,
.site-header,
header.site-header,
.kadence-sticky-header,
.kadence-header,
.header-navigation,
.site-header-row-inner,
.main-navigation,
#site-navigation,
nav.site-navigation,
.primary-menu-container {
  position: relative !important;
  z-index: 9999 !important;
}

/* Dropdown-Submenus speziell – NUR Desktop (ab 768px),
   damit im mobilen Drawer die Submenus normal inline erscheinen */
@media (min-width: 768px) {
  .main-navigation ul ul,
  .main-navigation .sub-menu,
  ul.sub-menu,
  .kadence-navigation ul ul,
  .kadence-navigation .sub-menu,
  .dropdown-nav ul,
  .header-navigation .sub-menu {
    z-index: 99999 !important;
    position: absolute !important;
  }
}

/* Mobile Drawer / ausklappbares Menue (Kadence & generisch) muss
   IMMER ueber dem Ticker liegen. Der Ticker selbst bleibt ohne
   eigenen Stacking-Context (siehe .kt-bar unten). */
.drawer,
.drawer-inner,
.drawer-overlay,
.drawer-content-wrap,
.mobile-toggle-open-container,
.menu-toggle-open,
.popup-drawer,
.popup-drawer-layout-sidepanel,
.popup-drawer-layout-fullwidth,
#mobile-drawer,
.mobile-drawer,
.site-header-item .drawer-content,
.header-mobile-navigation,
.mobile-navigation,
nav.mobile-navigation {
  z-index: 999999 !important;
}

/* Label links */
.kt-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: var(--kt-label-bg);
  color: var(--kt-label-color) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  text-align: center;
}

/* Scrollbereich */
.kt-track-wrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  min-height: var(--kt-height);
}

/* Laufschrift */
.kt-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: kt-scroll linear infinite;
  animation-duration: var(--kt-duration, 80s);
}

.kt-track:hover {
  animation-play-state: paused;
}

/* Die Animation verschiebt um die Breite EINES Segments (variabel, via JS gesetzt).
   So bleibt die Schleife nahtlos, egal wie oft der Text wiederholt wurde. */
@keyframes kt-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--kt-shift, -33.333%)); }
}

/* Einzelnes Item – !important gegen Theme-Overrides */
.kt-bar .kt-item,
.kt-bar .kt-item span,
.kt-bar .kt-track span {
  font-family: Arial, Helvetica, sans-serif !important;
  color: var(--kt-text) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: normal !important;
  font-style: normal !important;
  text-decoration: none !important;
  letter-spacing: normal !important;
}

.kt-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px 0 0;
}

/* Trennzeichen */
.kt-sep {
  color: var(--kt-label-bg) !important;
  font-size: 9px !important;
  opacity: 0.8;
}

/* Kantine-Status rechts */
.kt-bar .kt-status,
.kt-bar .kt-status span {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  color: var(--kt-text) !important;
  font-weight: normal !important;
}

.kt-status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-left: 1px solid rgba(255,255,255,0.1);
  white-space: nowrap;
  user-select: none;
  line-height: 1.3;
}

/* Blinkender Dot */
.kt-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: kt-blink 2s ease-in-out infinite;
}

@keyframes kt-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.kt-status-label {
  font-weight: 600 !important;
  letter-spacing: 0.2px;
}

/* Gradient-Masken */
.kt-track-wrap::before,
.kt-track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  z-index: 2;
  pointer-events: none;
}
.kt-track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--kt-bg), transparent);
}
.kt-track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--kt-bg), transparent);
}

/* ============================================================
   RESPONSIVE – Mobile Ansicht
   ============================================================ */

@media (max-width: 640px) {
  .kt-bar {
    flex-wrap: wrap;
  }

  /* Label und Ticker-Track in der ersten Zeile nebeneinander */
  .kt-label {
    min-height: var(--kt-height);
    flex: 0 0 auto;
  }

  .kt-track-wrap {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Status rutscht auf eine eigene, volle Zeile darunter */
  .kt-status {
    flex: 1 0 100%;
    width: 100%;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    justify-content: center;
    padding: 8px 16px;
    white-space: normal;
    text-align: center;
  }

  .kt-status-label {
    word-break: break-word;
  }
}