:root {
  --background: #0b1220;
  --panel: #141f31;
  --panel-light: #1b2a40;
  --text: #eef4fb;
  --muted: #9db0c5;
  --accent: #45a9ff;
  --border: #263a55;

  --dwd-green: #1f8f55;
  --dwd-yellow: #d9a400;
  --dwd-orange: #e87420;
  --dwd-red: #c93636;
  --dwd-purple: #8a3fb0;

  --thunderstorm-clear: #1f8f55;
  --thunderstorm-active: #d9a400;
  --thunderstorm-warning: #e87420;
  --thunderstorm-danger: #c93636;

  --media-max-width: 1050px;
  --thunderstorm-max-width: 1150px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    radial-gradient(
      circle at top right,
      #163354 0,
      transparent 35%
    ),
    var(--background);
}

.site-header {
  padding: 32px 24px 20px;
  border-bottom: 1px solid var(--border);
}

.site-header h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 5vw, 46px);
}

.site-header p {
  margin: 0;
  color: var(--muted);
}

.main-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: rgba(11, 18, 32, 0.9);
  border-bottom: 1px solid var(--border);
}

.main-nav a {
  padding: 9px 14px;
  color: var(--text);
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  border-color: var(--accent);
}

.dashboard {
  width: min(1400px, calc(100% - 32px));
  margin: 24px auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.panel {
  min-width: 0;
  padding: 20px;
  background: rgba(20, 31, 49, 0.96);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.panel-large {
  grid-column: 1 / -1;
}

.panel h2 {
  margin-top: 0;
  font-size: 21px;
}

.panel a {
  color: var(--accent);
  text-decoration: none;
}

.panel a:hover,
.panel a:focus-visible {
  text-decoration: underline;
}

.placeholder {
  min-height: 220px;
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--muted);
  text-align: center;
  background: var(--panel-light);
  border: 1px dashed #45617f;
  border-radius: 10px;
}

.panel-large .placeholder {
  min-height: 320px;
}

/* Wetterstation */

#wetterstation {
  grid-column: 1 / -1;
}

.weather-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.value-card {
  min-width: 0;
  padding: 18px;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.weather-grid .value-card {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 20px;
}

.value-card .label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.value-card strong {
  display: block;
  font-size: 25px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.weather-grid .value-card strong {
  font-size: clamp(25px, 2.2vw, 31px);
}

.weather-update {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.weather-update::before {
  content: "🕒 ";
}

/* Satelliten- und Radaranimation */

.satellite-container,
.radar-container {
  width: 100%;
  max-width: var(--media-max-width);
  margin-right: auto;
  margin-left: auto;
}

.satellite-container img,
.radar-container img,
.satellite-container video,
.radar-container video {
  width: 100%;
  max-height: 640px;
  display: block;
  object-fit: contain;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.satellite-links,
.radar-links {
  width: 100%;
  max-width: var(--media-max-width);
  margin: 12px auto 0;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.thunderstorm-links {
  width: 100%;
  max-width: var(--thunderstorm-max-width);
  margin: 12px auto 0;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.satellite-links a,
.radar-links a,
.thunderstorm-links a {
  color: var(--accent);
  text-decoration: none;
}

.satellite-links a:hover,
.radar-links a:hover,
.thunderstorm-links a:hover,
.satellite-links a:focus-visible,
.radar-links a:focus-visible,
.thunderstorm-links a:focus-visible {
  text-decoration: underline;
}

.source {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.85rem;
}

#satellit > .source,
#satellit > #satellite-update,
#radar > .source,
#radar > #radar-update {
  width: 100%;
  max-width: var(--media-max-width);
  margin-right: auto;
  margin-left: auto;
}

/* DWD-Warnungen */

.dwd-status {
  margin-bottom: 16px;
  padding: 14px 16px;
  font-weight: 700;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.dwd-status.dwd-level-0 {
  border-left: 7px solid var(--dwd-green);
}

.dwd-status.dwd-level-1 {
  border-left: 7px solid var(--dwd-yellow);
}

.dwd-status.dwd-level-2 {
  border-left: 7px solid var(--dwd-orange);
}

.dwd-status.dwd-level-3 {
  border-left: 7px solid var(--dwd-red);
}

.dwd-status.dwd-level-4 {
  border-left: 7px solid var(--dwd-purple);
}

.dwd-status-error {
  background: rgba(201, 54, 54, 0.15);
  border-left: 7px solid var(--dwd-red);
}

#dwd-warning-list {
  display: grid;
  gap: 14px;
}

.dwd-warning-card {
  overflow: hidden;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-left-width: 8px;
  border-radius: 12px;
}

.dwd-warning-card.dwd-level-0 {
  border-left-color: var(--dwd-green);
}

.dwd-warning-card.dwd-level-1 {
  border-left-color: var(--dwd-yellow);
}

.dwd-warning-card.dwd-level-2 {
  border-left-color: var(--dwd-orange);
}

.dwd-warning-card.dwd-level-3 {
  border-left-color: var(--dwd-red);
}

.dwd-warning-card.dwd-level-4 {
  border-left-color: var(--dwd-purple);
}

.dwd-warning-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.dwd-warning-level {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 9px;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 999px;
}

.dwd-warning-title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.4;
}

.dwd-warning-times {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 18px 0;
}

.dwd-warning-time {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.dwd-warning-description,
.dwd-warning-instruction {
  margin: 0;
  padding: 14px 18px 0;
  line-height: 1.55;
  white-space: pre-line;
}

.dwd-warning-instruction-title {
  display: block;
  padding: 16px 18px 0;
}

.dwd-warning-instruction {
  padding-bottom: 18px;
}

/* KONRAD3D-Gewitteranzeige */

.thunderstorm-status {
  width: 100%;
  max-width: var(--thunderstorm-max-width);
  margin: 0 auto 16px;
  padding: 14px 16px;
  font-weight: 700;
  line-height: 1.45;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-left-width: 7px;
  border-radius: 10px;
}

.thunderstorm-status-clear {
  background: rgba(31, 143, 85, 0.12);
  border-left-color: var(--thunderstorm-clear);
}

.thunderstorm-status-active {
  background: rgba(217, 164, 0, 0.12);
  border-left-color: var(--thunderstorm-active);
}

.thunderstorm-status-warning {
  background: rgba(232, 116, 32, 0.14);
  border-left-color: var(--thunderstorm-warning);
}

.thunderstorm-status-danger {
  background: rgba(201, 54, 54, 0.16);
  border-left-color: var(--thunderstorm-danger);
}

.thunderstorm-status-error {
  background: rgba(201, 54, 54, 0.15);
  border-left-color: var(--thunderstorm-danger);
}

.thunderstorm-layout {
  width: 100%;
  max-width: var(--thunderstorm-max-width);
  margin-right: auto;
  margin-left: auto;
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(300px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.thunderstorm-map-container {
  width: 100%;
  max-height: 650px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.thunderstorm-map-container a {
  display: block;
}

.thunderstorm-map-container img {
  width: 100%;
  height: auto;
  max-height: 650px;
  display: block;
  object-fit: contain;
}

.thunderstorm-information {
  min-width: 0;
}

.thunderstorm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.thunderstorm-grid .value-card {
  padding: 14px;
}

.thunderstorm-grid .value-card strong {
  font-size: 21px;
}

.thunderstorm-details {
  margin: 14px 0 0;
  padding: 14px 16px;
  color: var(--muted);
  line-height: 1.55;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 10px;
}

#gewitter > .source,
#gewitter > #thunderstorm-update {
  width: 100%;
  max-width: var(--thunderstorm-max-width);
  margin-right: auto;
  margin-left: auto;
}

#dwd-update,
#satellite-update,
#radar-update,
#thunderstorm-update {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Footer */

footer {
  padding: 24px;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
}

footer p {
  margin: 6px 0;
}

/* Tablet */

@media (max-width: 1050px) {
  .weather-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .thunderstorm-layout {
    grid-template-columns: 1fr;
  }

  .thunderstorm-map-container,
  .thunderstorm-map-container img {
    max-height: none;
  }
}

/* Smartphone und schmale Tablets */

@media (max-width: 800px) {
  .dashboard {
    grid-template-columns: 1fr;
  }

  .panel-large,
  #wetterstation {
    grid-column: auto;
  }

  .panel-large .placeholder {
    min-height: 260px;
  }

  .dwd-warning-times {
    display: block;
  }

  .dwd-warning-time {
    margin-bottom: 6px;
  }

  .main-nav {
    position: static;
  }

  .satellite-container video,
  .radar-container video,
  .satellite-container img,
  .radar-container img {
    max-height: none;
  }
}

/* Smartphones */

@media (max-width: 600px) {
  .weather-grid,
  .thunderstorm-grid {
    grid-template-columns: 1fr;
  }

  .weather-grid .value-card {
    min-height: 96px;
  }
}

/* Kleine Smartphones */

@media (max-width: 480px) {
  .dashboard {
    width: min(100% - 18px, 1400px);
    margin-top: 12px;
    gap: 12px;
  }

  .panel {
    padding: 14px;
    border-radius: 10px;
  }

  .site-header {
    padding: 24px 14px 16px;
  }

  .main-nav {
    padding: 10px 14px;
  }

  .main-nav a {
    padding: 8px 10px;
    font-size: 0.9rem;
  }

  .value-card strong {
    font-size: 22px;
  }

  .weather-grid .value-card strong {
    font-size: 26px;
  }

  .thunderstorm-grid .value-card strong {
    font-size: 20px;
  }
}