/* Wachalarm Karten-Seite v4 */
.map-page-v4 {
  background:
    radial-gradient(circle at 82% 0%, rgba(255, 210, 207, 0.95) 0, rgba(255, 255, 255, 0.85) 30%, rgba(248, 249, 251, 1) 100%);
}

.map-hero {
  padding-bottom: 1.5rem;
}

.map-stage {
  max-width: 1640px;
  width: min(96%, 1640px);
  margin: 0 auto;
  padding: 0 0 4.5rem;
}

.map-intro-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.2rem;
  margin: 0 0 1.2rem;
  padding: 1.25rem;
  border: 1px solid rgba(220, 38, 38, 0.13);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 20px 70px rgba(17, 24, 39, 0.08);
  backdrop-filter: blur(14px);
}

.map-intro-card h2 {
  margin: 0.25rem 0 0.35rem;
  font-size: clamp(1.35rem, 2vw, 2.15rem);
  letter-spacing: -0.04em;
}

.map-intro-card p {
  max-width: 860px;
  margin: 0;
  color: #4b5563;
  line-height: 1.65;
}

.mini-label {
  display: inline-flex;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #fff1f0;
  color: #991b1b;
  font-weight: 900;
  font-size: 0.82rem;
}

.finder-shell {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

.finder-panel-v4,
.map-card-v4 {
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.12);
  overflow: hidden;
}

.finder-panel-v4 {
  padding: 1rem;
}

.map-card-v4 {
  padding: 0.8rem;
}

.wa-map {
  width: 100%;
  height: 78vh;
  min-height: 660px;
  border-radius: 24px;
  overflow: hidden;
  background: #e8edf2;
  isolation: isolate;
}

.panel-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.mode-badge-v4 {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: #fff1f0;
  color: #991b1b;
  font-size: 0.86rem;
  font-weight: 900;
}

.mode-badge-v4.detail {
  background: #111827;
  color: #ffffff;
}

.back-btn-v4 {
  display: none;
  min-height: 2.4rem;
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
}

.back-btn-v4.visible {
  display: inline-flex;
}

.search-label {
  display: block;
  margin: 0 0 0.4rem;
  color: #4b5563;
  font-size: 0.86rem;
  font-weight: 800;
}

.search-box-v4 {
  width: 100%;
  margin: 0 0 0.85rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 17px;
  background: #ffffff;
  color: #111827;
  font: inherit;
  outline: none;
}

.search-box-v4:focus {
  border-color: rgba(220, 38, 38, 0.55);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10);
}

.button-group-v4 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
}

.button-group-v4 button {
  padding: 0.55rem 0.78rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: #f4f5f7;
  color: #111827;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 850;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.button-group-v4 button:hover {
  transform: translateY(-1px);
  background: #e9eaee;
}

.button-group-v4 button.active {
  border-color: #dc2626;
  background: #dc2626;
  color: #ffffff;
}

.type-filters-v4 {
  display: none;
}

.type-filters-v4.visible {
  display: flex;
}

.panel-heading {
  margin: 0.3rem 0 0.75rem;
  font-size: 1.45rem;
  letter-spacing: -0.035em;
}

.channel-list-v4 {
  display: grid;
  gap: 0.65rem;
  max-height: 560px;
  padding-right: 0.25rem;
  overflow: auto;
}

.channel-card-v4 {
  padding: 0.9rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 19px;
  background: #ffffff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.channel-card-v4:hover {
  transform: translateY(-1px);
  border-color: rgba(220, 38, 38, 0.22);
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.10);
}

.channel-card-v4.region,
.channel-card-v4.main {
  border-left: 6px solid #dc2626;
}

.channel-card-v4.kommune {
  border-left: 6px solid #f59e0b;
}

.channel-card-v4.ortswehr-evi {
  border-left: 6px solid #2563eb;
}

.channel-card-v4.planned,
.channel-card-v4.ortswehr-ohne-evi {
  border-left: 6px solid #9ca3af;
}

.channel-card-v4 strong {
  display: block;
  margin-bottom: 0.25rem;
  line-height: 1.25;
}

.channel-card-v4 small {
  display: block;
  margin-bottom: 0.55rem;
  color: #6b7280;
  line-height: 1.38;
}

.tagline-v4 {
  display: inline-flex;
  align-items: center;
  margin: 0 0.25rem 0.45rem 0;
  padding: 0.26rem 0.52rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.76rem;
  font-weight: 900;
}

.wa-button-v4,
.wait-button-v4,
.popup-region-btn-v4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border: 0;
  border-radius: 999px;
  padding: 0.58rem 0.82rem;
  color: #ffffff !important;
  font-size: 0.9rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.wa-button-v4 {
  background: #16a34a;
}

.wait-button-v4 {
  background: #6b7280;
}

.popup-region-btn-v4 {
  background: #dc2626;
}

.legend-v4 {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.9rem;
  color: #4b5563;
  font-size: 0.88rem;
  line-height: 1.4;
}

.legend-v4 span {
  display: flex;
  align-items: center;
}

.legend-dot-v4 {
  display: inline-flex;
  width: 13px;
  height: 13px;
  margin-right: 0.45rem;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.95), 0 3px 8px rgba(0,0,0,0.18);
}

.dot-active { background: #93c5fd; }
.dot-planned { background: #9ca3af; }
.dot-main { background: #dc2626; }
.dot-kommune { background: #f59e0b; }
.dot-ortswehr-evi { background: #2563eb; }
.dot-ortswehr-ohne-evi { background: #9ca3af; }

.leaflet-overlay-pane svg path {
  mix-blend-mode: multiply;
}

.leaflet-popup-content {
  min-width: 245px;
}

.popup-title-v4 {
  margin-bottom: 0.3rem;
  font-size: 1.05rem;
  font-weight: 950;
}

.popup-meta-v4 {
  margin-bottom: 0.65rem;
  color: #4b5563;
  line-height: 1.4;
}

.county-label-v4 {
  color: #111827;
  font-size: 13px;
  font-weight: 950;
  text-align: center;
  text-shadow: 0 1px 5px #ffffff, 0 -1px 5px #ffffff, 1px 0 5px #ffffff, -1px 0 5px #ffffff;
  pointer-events: none;
}

@media (min-width: 1500px) {
  .finder-shell {
    grid-template-columns: 450px minmax(0, 1fr);
  }

  .wa-map {
    min-height: 760px;
  }
}

@media (max-width: 980px) {
  .map-intro-card,
  .finder-shell {
    grid-template-columns: 1fr;
  }

  .map-intro-card .btn {
    width: fit-content;
  }

  .finder-panel-v4 {
    order: 2;
  }

  .map-card-v4 {
    order: 1;
  }

  .wa-map {
    height: 64vh;
    min-height: 430px;
  }

  .channel-list-v4 {
    max-height: none;
  }
}

@media (max-width: 560px) {
  .map-stage {
    width: min(94%, 1640px);
  }

  .map-intro-card,
  .finder-panel-v4,
  .map-card-v4 {
    border-radius: 24px;
  }

  .button-group-v4 button {
    flex: 1 1 auto;
  }

  .wa-map {
    height: 62vh;
    min-height: 390px;
  }

  .county-label-v4 {
    font-size: 11px;
  }
}

/* Wachalarm Karten-Seite v8: Karte zuerst, Treffer darunter */
.map-page-v8 .map-hero {
  padding-bottom: 0.8rem;
}

.map-stage-v8 {
  max-width: 1320px;
  width: min(94%, 1320px);
}

.finder-shell-v8 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.map-tools-v8,
.finder-results-v8,
.map-card-v8 {
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.11);
}

.map-tools-v8 {
  padding: 1rem;
}

.map-tools-v8 .search-box-v4 {
  margin-bottom: 0.3rem;
}

.search-row-v8 {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.8rem;
}

.search-hint-v8 {
  margin: 0;
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.45;
}

.region-buttons-v8 {
  margin-bottom: 0.65rem;
}

.map-card-v8 {
  padding: 0.8rem;
}

.map-page-v8 .wa-map {
  height: 72vh;
  min-height: 620px;
}

.finder-results-v8 {
  padding: 1rem;
}

.results-head-v8 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  margin-bottom: 0.8rem;
}

.results-head-v8 .panel-heading {
  margin-bottom: 0;
}

.results-head-v8 .legend-v4 {
  min-width: 250px;
  margin-top: 0;
  padding: 0.85rem;
  border-radius: 18px;
  background: #f8fafc;
}

.map-page-v8 .channel-list-v4 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.map-page-v8 .channel-card-v4.is-found {
  border-color: rgba(22, 163, 74, 0.55);
  box-shadow: 0 16px 42px rgba(22, 163, 74, 0.16);
}

.map-page-v8 .type-filters-v4.visible {
  display: flex;
}

@media (max-width: 1050px) {
  .map-page-v8 .channel-list-v4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .results-head-v8 {
    grid-template-columns: 1fr;
  }

  .results-head-v8 .legend-v4 {
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .map-stage-v8 {
    width: min(94%, 1320px);
  }

  .map-tools-v8,
  .finder-results-v8,
  .map-card-v8 {
    border-radius: 24px;
  }

  .map-page-v8 .wa-map {
    height: 64vh;
    min-height: 430px;
  }

  .map-page-v8 .channel-list-v4 {
    grid-template-columns: 1fr;
  }

  .panel-topline {
    align-items: stretch;
    flex-direction: column;
  }

  .back-btn-v4.visible {
    justify-content: center;
  }

  .region-buttons-v8,
  .type-filters-v4.visible {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .region-buttons-v8 button,
  .type-filters-v4 button {
    flex: 0 0 auto;
  }
}


/* =========================================================
   Wachalarm v13 – Layout- und Mobile-Korrekturen
   Beibehaltung: echte Landkreisflächen + externe EVI-Pins
========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.map-page-v8 .page-hero.map-hero,
.map-stage-v8 {
  width: min(calc(100% - 40px), 1180px);
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.finder-shell-v8,
.map-tools-v8,
.map-card-v8,
.finder-results-v8 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.map-tools-v8 {
  overflow: hidden;
}

.search-box-v4 {
  max-width: 100%;
  box-sizing: border-box;
}

.region-buttons-v8,
.type-filters-v4.visible {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 0.35rem;
}

.region-buttons-v8 button,
.type-filters-v4 button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.map-card-v8 {
  overflow: hidden;
}

.map-page-v8 .wa-map {
  width: 100%;
  max-width: 100%;
  height: min(66vh, 720px);
  min-height: 560px;
}

.map-page-v8 .channel-list-v4 {
  width: 100%;
  max-width: 100%;
}

.channel-card-v4.main {
  border-left-color: #dc2626;
  box-shadow: 0 16px 42px rgba(220, 38, 38, 0.10);
}

.leaflet-container {
  max-width: 100%;
}

.leaflet-popup-content-wrapper {
  max-width: calc(100vw - 48px);
}

.leaflet-popup-content {
  max-width: calc(100vw - 84px);
}

@media (max-width: 720px) {
  .map-page-v8 .page-hero.map-hero,
  .map-stage-v8 {
    width: calc(100% - 22px);
    max-width: calc(100% - 22px);
  }

  .map-page-v8 .page-hero.map-hero {
    padding-top: 2.1rem;
    padding-bottom: 1rem;
  }

  .map-page-v8 .page-hero.map-hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.25rem);
    line-height: 0.98;
    letter-spacing: -0.06em;
  }

  .map-page-v8 .page-hero.map-hero .lead {
    font-size: 0.98rem;
    line-height: 1.62;
  }

  .map-tools-v8,
  .finder-results-v8,
  .map-card-v8 {
    border-radius: 24px;
  }

  .map-tools-v8 {
    padding: 0.9rem;
  }

  .search-row-v8 {
    margin-bottom: 0.65rem;
  }

  .search-label {
    font-size: 0.84rem;
  }

  .search-box-v4 {
    padding: 0.78rem 0.85rem;
    border-radius: 16px;
    font-size: 0.95rem;
  }

  .search-hint-v8 {
    font-size: 0.82rem;
  }

  .button-group-v4 {
    gap: 0.4rem;
  }

  .button-group-v4 button {
    flex: 0 0 auto;
    padding: 0.52rem 0.72rem;
    font-size: 0.78rem;
  }

  .map-card-v8 {
    padding: 0.55rem;
  }

  .map-page-v8 .wa-map {
    height: 52vh;
    min-height: 360px;
    max-height: 470px;
    border-radius: 18px;
  }

  .county-label-v4 {
    font-size: 10px;
  }

  .leaflet-control-zoom {
    transform: scale(0.88);
    transform-origin: top left;
  }

  .finder-results-v8 {
    padding: 0.9rem;
  }

  .results-head-v8 {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .results-head-v8 .legend-v4 {
    min-width: 0;
    font-size: 0.82rem;
  }

  .map-page-v8 .channel-list-v4 {
    grid-template-columns: 1fr;
  }

  .channel-card-v4 {
    padding: 0.85rem;
    border-radius: 18px;
  }
}

@media (max-width: 390px) {
  .map-page-v8 .page-hero.map-hero,
  .map-stage-v8 {
    width: calc(100% - 18px);
    max-width: calc(100% - 18px);
  }

  .map-page-v8 .wa-map {
    min-height: 335px;
    height: 50vh;
  }
}