.gv {
  --gv-gold: #edbb00;
  --gv-blue: #005d7b;
  --gv-ink: #201e1d;
  --gv-muted: #6b6560;
  --gv-card: #fffdf7;
  --gv-line: rgba(32, 30, 29, .08);
  font-size: 15px;
  color: var(--gv-ink);
}
.gv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.gv-title { margin: 0; }
.gv-status { font-size: 13px; color: var(--gv-muted); }
.gv-live { color: #d32f2f; font-weight: 700; margin-right: 4px; animation: gv-blink 2s ease-in-out infinite; }
@keyframes gv-blink { 50% { opacity: .35; } }

.gv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gv-chip {
  border: 1px solid var(--gv-line); background: #fff; color: var(--gv-blue);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.gv-chip span { opacity: .6; margin-left: 4px; font-weight: 400; }
.gv-chip:hover:not(:disabled) { border-color: var(--gv-blue); }
.gv-chip.is-active { background: var(--gv-blue); color: #fff; border-color: var(--gv-blue); }
.gv-chip:disabled { opacity: .4; cursor: default; }

.gv-map { height: 340px; border-radius: 18px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 10px 28px rgba(32,30,29,.10); }

.gv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gv-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--gv-card); border-radius: 14px; padding: 12px 14px;
  border-left: 5px solid #9bc4d3;
  box-shadow: 0 4px 14px rgba(32,30,29,.06);
}
.gv-item.is-hidden { display: none; }
.gv-mag-1 { border-left-color: #f7d84a; }
.gv-mag-2 { border-left-color: #f39c12; }
.gv-mag-3, .gv-cat-sperrung, .gv-cat-unfall { border-left-color: #d32f2f; }
.gv-cat-baustelle, .gv-cat-spur { border-left-color: #9e9e9e; }

.gv-icon { font-size: 22px; line-height: 1.2; flex: 0 0 auto; }
.gv-body { flex: 1 1 auto; min-width: 0; }
.gv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 3px; }
.gv-tags span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gv-type { color: var(--gv-ink); }
.gv-road { color: var(--gv-blue); }
.gv-ufer { color: var(--gv-muted); }
.gv-route { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.gv-desc { font-size: 13px; color: var(--gv-muted); margin-top: 2px; }
.gv-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--gv-muted); margin-top: 4px; }
.gv-delay {
  flex: 0 0 auto; align-self: center; white-space: nowrap;
  background: #fdecea; color: #b71c1c; font-weight: 700; font-size: 13px;
  padding: 4px 10px; border-radius: 999px;
}
.gv-mag-1 .gv-delay { background: #fff6c2; color: #7a5d00; }
.gv-mag-2 .gv-delay { background: #fde7c8; color: #8a4b00; }

.gv-empty { background: #f2f9fc; border-radius: 14px; padding: 18px; color: var(--gv-blue); }
.gv-foot { font-size: 11px; color: var(--gv-muted); margin-top: 12px; }
.gv-speech { font-style: italic; }
.gv.is-loading { opacity: .6; transition: opacity .2s; }

@media (prefers-reduced-motion: reduce) { .gv-live { animation: none; } }

/* Gruppen: kurzfristig oben, länger andauernd darunter, zweispaltig */
.gv-group { margin-top: 18px; }
.gv-group.is-empty { display: none; }
.gv-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; }
.gv-group-t { font-family: Oswald, sans-serif; font-size: 22px; text-transform: uppercase; letter-spacing: .04em; color: var(--gv-blue); }
.gv-group-s { font-size: 13px; color: var(--gv-muted); }
.gv-group-akut .gv-group-t::before { content: "● "; color: #d32f2f; }
.gv-list.gv-2col { gap: 10px; }
@media (min-width: 900px) { .gv .gv-list.gv-2col { grid-template-columns: 1fr 1fr; } }
.gv-group-lang .gv-item { padding: 10px 12px; box-shadow: 0 2px 8px rgba(32,30,29,.05); }
.gv-group-lang .gv-route { font-size: 14px; }
.gv-group-lang .gv-icon { font-size: 18px; }
.gv .gv-list .gv-item.gv-more { display: none; }
.gv .gv-group.is-open .gv-item.gv-more { display: flex; }
.gv .gv-group.is-open .gv-item.gv-more.is-hidden { display: none; }
.gv-showmore { display: block; margin: 14px auto 0; background: #fff; color: var(--gv-blue); border: 2px solid var(--gv-blue); border-radius: 999px; padding: 9px 20px; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .2s, color .2s; }
.gv-showmore:hover { background: var(--gv-blue); color: #fff; }

/* Klick auf Meldung zeigt sie auf der Karte */
.gv .gv-item[data-idx] { cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.gv .gv-item[data-idx]:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,93,123,.14); }
.gv .gv-item[data-idx]:focus-visible { outline: 3px solid #edbb00; outline-offset: 2px; }
.gv .gv-item.is-active { background: #e8f4f9; box-shadow: 0 0 0 2px #3397bb inset, 0 8px 20px rgba(0,93,123,.14); }
.gv .gv-item[data-idx] .gv-route::after { content: " 📍"; font-size: 13px; opacity: 0; transition: opacity .15s; }
.gv .gv-item[data-idx]:hover .gv-route::after, .gv .gv-item.is-active .gv-route::after { opacity: 1; }