:root { color-scheme: light dark; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Kopfzeile */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #fff;
}

.brand {
  font-weight: 900;
  letter-spacing: .4px;
  font-size: 18px;
}

/* Zustandsfarben (Grau/Gelb/Rot) */
.state-gray { background: #666; }
.state-yellow { background: #b78b00; }
.state-red { background: #b00020; }

.form { display: flex; align-items: center; gap: 8px; }

input {
  min-width: 220px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.15);
  color: #fff;
  outline: none;
}
input::placeholder { color: rgba(255,255,255,.75); }

button, .kioskLink {
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.15);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

main { padding: 14px; }

.status { opacity: .85; margin-bottom: 10px; font-size: 14px; }

/* Normalmodus: Karten */
.cards { display: grid; gap: 10px; }
.card { border: 1px solid rgba(127,127,127,.35); border-radius: 12px; padding: 12px; }
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(127,127,127,.35);
}
.badge.warn { background: rgba(255, 140, 0, .18); }
.badge.blocked { background: rgba(255, 0, 0, .18); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.title { font-weight: 800; }
.meta { opacity: .75; font-size: 13px; }
.desc { margin-top: 8px; font-size: 14px; line-height: 1.3; white-space: pre-wrap; }

/* Kiosk */
.hidden { display: none; }

.kiosk .kioskTable {
  border: 1px solid rgba(127,127,127,.35);
  border-radius: 12px;
  overflow: hidden;
}

/* neue Spalten:
   State | A | Fahrtrichtung | Ort | Meldung | Seit
*/
.kioskRow {
  display: grid;
  grid-template-columns: 90px 60px 220px 260px 1fr 170px;
  align-items: center;
  border-bottom: 1px solid rgba(127,127,127,.25);
}
.kioskHead { font-weight: 800; opacity: .9; }
.kioskRow > div { padding: 10px 10px; min-width: 0; }

.kioskState { font-weight: 900; }
.kioskState.warn { color: #ffb300; }
.kioskState.blocked { color: #ff4d4d; }

/* Scrollender Text nur in "Meldung"-Spalte */
.marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.marqueeInner {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 12s linear infinite;
}
.marqueeInner.fast { animation-duration: 9s; }
.marqueeInner.slow { animation-duration: 16s; }

/* nur scrollen wenn overflow */
.marquee:not(.isOverflow) .marqueeInner {
  padding-left: 0;
  animation: none;
}

/* sorgt dafür, dass es “wie Falke” sauber in einer Zeile bleibt */
.kioskRow .nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Kiosk: größer & clean */
body.kioskMode main { padding: 0; }
body.kioskMode .status { display: none; }
body.kioskMode .cards { display: none; }
body.kioskMode #kiosk { display: block; padding: 0; }
body.kioskMode .kioskRow > div { padding: 12px 12px; font-size: 18px; }
body.kioskMode .kioskHead > div { font-size: 16px; opacity: .85; }