:root {
  --mom-bg-0: #06111f;
  --mom-bg-1: #0a1a30;
  --mom-bg-2: #0e2747;
  --mom-panel: rgba(8, 20, 38, 0.90);
  --mom-border: rgba(90, 163, 255, 0.22);
  --mom-accent: #4ea1ff;
  --mom-text: #eaf3ff;
  --mom-text-soft: rgba(234, 243, 255, 0.78);
  --mom-shadow: 0 12px 28px rgba(0, 0, 0, 0.30);
  --mom-radius: 12px;
}

/* Grundhintergrund */
html,
body {
  background:
    radial-gradient(circle at top, rgba(78, 161, 255, 0.08) 0%, rgba(78, 161, 255, 0) 34%),
    linear-gradient(180deg, var(--mom-bg-0) 0%, var(--mom-bg-1) 45%, var(--mom-bg-2) 100%) !important;
  color: var(--mom-text) !important;
}

/* Karte leicht kräftiger */
canvas {
  filter: saturate(1.04) contrast(1.03);
}

/* Links */
a {
  color: #9acbff !important;
}

a:hover {
  color: #cde6ff !important;
}

/* Obere und seitliche Control-Wrapper neutral halten */
.leaflet-top .leaflet-control,
.leaflet-right .leaflet-control,
.leaflet-left .leaflet-control,
.leaflet-bottom .leaflet-control {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Zoom- und Menübuttons */
.leaflet-bar,
.leaflet-control-zoom {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.leaflet-bar a,
.leaflet-control-zoom a {
  background: linear-gradient(180deg, rgba(15, 42, 76, 0.96) 0%, rgba(10, 28, 51, 0.96) 100%) !important;
  color: var(--mom-text) !important;
  border: 1px solid var(--mom-border) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

.leaflet-bar a:hover,
.leaflet-control-zoom a:hover {
  background: linear-gradient(180deg, rgba(19, 53, 97, 0.98) 0%, rgba(12, 34, 61, 0.98) 100%) !important;
  color: #ffffff !important;
}

/* Eingabefelder */

input::placeholder,
textarea::placeholder {
  color: rgba(234, 243, 255, 0.42) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: rgba(90, 163, 255, 0.38) !important;
  box-shadow: 0 0 0 3px rgba(78, 161, 255, 0.10) !important;
}

/* Nur die kleinen Felder oben rechts kompakter */
.leaflet-top input,
.leaflet-right input,
.leaflet-top select,
.leaflet-right select {
  height: 30px !important;
  min-height: 30px !important;
  padding: 4px 10px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* Popups */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.leaflet-control-layers {
  background: var(--mom-panel) !important;
  color: var(--mom-text) !important;
  border: 1px solid var(--mom-border) !important;
  border-radius: var(--mom-radius) !important;
  box-shadow: var(--mom-shadow) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.leaflet-popup-content {
  color: var(--mom-text) !important;
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(78, 161, 255, 0.35) rgba(6, 17, 31, 0.45);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: rgba(6, 17, 31, 0.45);
}

*::-webkit-scrollbar-thumb {
  background: rgba(78, 161, 255, 0.28);
  border-radius: 999px;
  border: 2px solid rgba(6, 17, 31, 0.45);
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(78, 161, 255, 0.42);
}