:root {
  --bg-main: #111827;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-main);
  color: #f3f4f6;
}

/* 16:9 Export-Frame */
.aspect-16-9 {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
}
.aspect-inner {
  position: absolute;
  inset: 0;
}

/* Risiko-Balken nach Schwellenwerten */
.risk-bar-base {
  height: 0.6rem;
  border-radius: 9999px;
  transition: width 0.2s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.risk-bar-none {
  background: #4b5563;
}
.risk-bar-low {
  background: linear-gradient(to right, #16a34a, #22c55e);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.4);
}
.risk-bar-moderate {
  background: linear-gradient(to right, #eab308, #facc15);
  box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.4);
}
.risk-bar-high {
  background: linear-gradient(to right, #f97316, #ea580c);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.4);
}
.risk-bar-very-high {
  background: linear-gradient(to right, #ef4444, #b91c1c);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.45);
}
.risk-bar-extreme {
  background: linear-gradient(to right, #a855f7, #7e22ce);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.55);
}

/* Kartenrahmen nach maximaler Risikostufe */
.hour-card {
  position: relative;
  overflow: hidden;
}
.hour-card-sev-0 { border-color: #374151; }
.hour-card-sev-1 { border-color: #22c55e; }
.hour-card-sev-2 { border-color: #eab308; }
.hour-card-sev-3 { border-color: #f97316; }
.hour-card-sev-4 { border-color: #ef4444; }
.hour-card-sev-5 { border-color: #a855f7; }

.hour-card-badge {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Kleine journalistische Badges für 7-Tage-Matrix */
.tag-badge {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tag-badge-sturm { background: rgba(248, 113, 113, 0.15); color: #fecaca; border-color: #fecaca; }
.tag-badge-schnee { background: rgba(96, 165, 250, 0.12); color: #bfdbfe; border-color: #bfdbfe; }
.tag-badge-gewitter { background: rgba(251, 191, 36, 0.1); color: #fde68a; border-color: #fde68a; }
.tag-badge-glatte { background: rgba(56, 189, 248, 0.1); color: #bae6fd; border-color: #bae6fd; }
.tag-badge-ruhig { background: rgba(74, 222, 128, 0.08); color: #bbf7d0; border-color: #bbf7d0; }