/* ============================================================
   Mobile Kartenkorrekturen

   Stark auf den Vollbildmodus der Astro-Geografie-Karte begrenzt.
   Die Berechnung, MapLibre und die Desktopdarstellung bleiben
   unberuehrt. Wird nach site-bridge.css geladen.
   ============================================================ */

/* Ein geschlossenes details darf keine unsichtbaren Tab-Ziele behalten.
   Eine spaetere Grid-Regel in site-bridge.css hatte das native Verhalten
   versehentlich ueberschrieben. */
.app-shell.astro-page .map-line-picker:not([open]) > :not(summary) {
  display: none !important;
}

.app-shell.astro-page .map-search-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.app-shell.astro-page .map-search-list button[aria-selected="true"] {
  background: #dff3f5;
  color: #002f38;
}

/* MapLibre wird erst kurz vor dem Kartenbereich nachgeladen. Sein spaeter
   eingefuegtes Vendor-CSS setzt den Karten-Root sonst wieder auf
   position:relative und damit auf 0px Hoehe. Die hoehere Spezifitaet haelt
   den Root unabhaengig von der Ladereihenfolge deckungsgleich zum Rahmen. */
.app-shell.astro-page .astro-map-gl,
.app-shell.astro-page .astro-map-gl.maplibregl-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.app-shell.astro-page .astro-map.maplibre-map .maplibregl-canvas:focus-visible {
  outline: 3px solid rgba(255, 46, 136, 0.9);
  outline-offset: -4px;
}

.app-shell.astro-page .map-mobile-tools-toggle {
  display: none;
}

.app-shell.astro-page .map-filter-toggle {
  display: none;
}

/* ============================================================
   Reihenfolge unter der Falz (Design-Pass 13.07.): die Deutungs-Panels
   gehoeren direkt hinter die Karte, Legende und Filter danach. Gilt nur
   fuer die einspaltige Karte (≤1320, Mobil/Tablet); Desktop (≥1321) und
   der Vollbildmodus bleiben unveraendert.

   Technik: .map-main-column wird display:contents, alles sortiert per
   order im Flex der .map-workspace (position:relative als Bezugsrahmen
   fuer den Aspekt-Umschalter). ============ */
@media (max-width: 1320px) {
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-workspace {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-main-column {
    display: contents;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .astro-map {
    order: 1;
    min-width: 0;
    /* Pflicht: ohne Breite kollabiert die Karte im Spalten-Flex (13.07.). */
    width: 100%;
  }

  /* 13.07.: Filter direkt unter der Karte (Daniel), Deutung danach. */
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel {
    order: 2;
    width: 100%;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel .map-filter-toggle {
    display: block;
    width: 100%;
    text-align: center;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-side-stack {
    order: 3;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-result-summary {
    order: 4;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-note {
    order: 5;
  }
}

@media (max-width: 900px),
       (pointer: coarse) and (max-width: 1180px) {
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-header {
    position: sticky;
    z-index: 6;
    top: calc(61px + env(safe-area-inset-top, 0px));
    border-radius: 10px;
    background: rgba(13, 18, 39, 0.97);
    padding: 6px;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-toggle {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(53, 212, 232, 0.34);
    border-radius: 10px;
    background: rgba(53, 212, 232, 0.1);
    color: #7ff0ff;
    padding: 10px 14px;
    font: 800 0.82rem/1.2 "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    touch-action: manipulation;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-toggle[aria-expanded="true"] {
    border-color: rgba(255, 94, 196, 0.45);
    background: rgba(255, 46, 136, 0.1);
    color: #ff9bdd;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel:not(.is-mobile-open) {
    gap: 0;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel:not(.is-mobile-open) .map-filter-header > span,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel:not(.is-mobile-open) .map-filter-grid {
    display: none;
  }
}

@media (max-width: 600px) {
  /* Im Vollbild ist die Bedienidee bereits durch Karte und Suche klar.
     Der lange Hinweis wuerde oberhalb der Karte wertvolle Hoehe belegen. */
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-heading {
    gap: 3px;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-heading-hint {
    display: none;
  }

  /* Die spaetere Desktopregel in site-bridge.css erzwingt sonst drei
     Spalten. Bei 390 px kollabiert die mittlere auf 0 px, waehrend ihr
     Hilfetext ueber 200 px hoch wird. Mobil bleiben Suche und Aktion
     deshalb in zwei stabilen Spalten. */
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    padding: 7px 8px;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar .map-search-field {
    min-width: 0;
    width: 100%;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar .map-search-field input {
    width: 100%;
    min-height: 44px;
  }

  /* Der Erklaertext bleibt fuer Screenreader als aria-describedby
     erhalten, nimmt visuell aber keine eigene Nullbreiten-Spalte ein. */
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar > p {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar .map-action-buttons {
    width: auto;
    align-self: end;
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar .map-action-buttons button {
    flex: 0 0 auto;
    width: auto;
    min-width: 104px;
    min-height: 44px;
    padding-inline: 12px;
    white-space: nowrap;
  }
}

/* MapLibre zeigt diesen Hinweis nur nach einer unabsichtlichen
   Ein-Finger-Geste im eingebetteten Modus. Die Karte bleibt damit
   verständlich, waehrend ein Finger weiterhin die Seite scrollt. */
.app-shell.astro-page .astro-map[data-gesture-mode="cooperative"] .maplibregl-cooperative-gesture-screen {
  border-radius: inherit;
  background: rgba(9, 13, 28, 0.72);
  color: #f4efe4;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(0.95rem, 3.8vw, 1.12rem);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* Fingerziele: Die Desktopregeln verkleinern mehrere Kartenknöpfe auf
   28–36px. Auf Telefonen und in kurzen Querformaten bleiben alle
   zentralen Kartenaktionen mindestens 44px hoch bzw. breit. */
@media (max-width: 900px),
       (pointer: coarse),
       (orientation: landscape) and (max-height: 520px) and (max-width: 1400px) {
  .app-shell.astro-page .map-fullscreen-float,
  .app-shell.astro-page #map-fullscreen {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  .app-shell.astro-page .map-zoom-controls button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  .app-shell.astro-page .map-aspect-controls button,
  .app-shell.astro-page .map-axis-legend button,
  .app-shell.astro-page .map-axis-options > button,
  .app-shell.astro-page .map-legend-item,
  .app-shell.astro-page .map-legend-actions button,
  .app-shell.astro-page .map-line-picker summary,
  .app-shell.astro-page .map-line-picker-axes button,
  .app-shell.astro-page .map-search-field input,
  .app-shell.astro-page .map-action-buttons button,
  .app-shell.astro-page .maplibregl-ctrl-attrib-button {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  .app-shell.astro-page .map-search-field input {
    font-size: 16px;
  }

  .app-shell.astro-page .maplibregl-ctrl-attrib-button {
    width: 44px;
    height: 44px;
  }

  .app-shell.astro-page .map-filter-panel button,
  .app-shell.astro-page .map-filter-panel summary {
    will-change: auto;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-location-toolbar .map-search-field input,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-location-toolbar .map-action-buttons button,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-legend-actions button,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-line-picker summary,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-line-picker-axes button {
    min-width: 44px;
    min-height: 44px;
  }

  .app-shell.astro-page .astro-map[data-map-status="hydrated"] .map-data-badge {
    display: none;
  }

  /* Vollbildregeln in site-bridge.css sind absichtlich sehr spezifisch
     und reduzieren die Filterinstrumente auf 32px. Fuer Fingerbedienung
     beziehungsweise kompakte Viewports werden sie hier gezielt ueberboten. */
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-aspect-controls button,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel button,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel summary,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-axis-options > button,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-legend-item,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-search-field input,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-action-buttons button,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-fullscreen-float,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-zoom-controls button,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .maplibregl-ctrl-attrib-button {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .maplibregl-ctrl-attrib-button {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 360px) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen {
    padding: 8px;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar {
    gap: 6px;
    padding-inline: 7px;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar .map-action-buttons button {
    min-width: 100px;
    padding-inline: 9px;
  }
}

/* Im Hochformat bleibt die Karte im Vollbild gross. Der lange Filter liegt
   als einklappbares Bottom-Sheet darueber, statt auf 16–54px zusammenzufallen
   und nur angeschnittene Ziele zu zeigen. */
@media (max-width: 700px) and (orientation: portrait) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-main-column {
    position: relative;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel {
    position: absolute;
    z-index: 30;
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    width: auto;
    max-height: min(420px, 55dvh);
    display: grid;
    overflow: auto;
    border-color: rgba(0, 174, 187, 0.34);
    background: rgba(9, 13, 28, 0.96);
    padding: 6px;
    box-shadow: 0 -14px 34px rgba(3, 9, 24, 0.28);
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-header {
    display: block;
    padding: 0;
    background: transparent;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-header > div,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-header > span {
    display: none;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-toggle {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(53, 212, 232, 0.34);
    border-radius: 10px;
    background: rgba(53, 212, 232, 0.12);
    color: #7ff0ff;
    padding: 10px 14px;
    font: 800 0.82rem/1.2 "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-toggle[aria-expanded="true"] {
    border-color: rgba(255, 94, 196, 0.5);
    background: rgba(255, 46, 136, 0.14);
    color: #ff9bdd;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel:not(.is-mobile-open) {
    max-height: 60px;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel:not(.is-mobile-open) .map-filter-grid {
    display: none;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel.is-mobile-open .map-filter-grid {
    display: grid;
  }
}

/* In kurzen Querformaten soll ausschliesslich die Karte die verfuegbare
   Hoehe nutzen. site-bridge.css wird nach den urspruenglichen Regeln aus
   src/styles.css geladen und setzte versehentlich wieder drei Rasterzeilen;
   dadurch kollabierte die eigentliche Karte auf 2px. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1400px) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen {
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    padding: 8px;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-heading,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar {
    display: none;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-workspace {
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-main-column {
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .astro-map,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .astro-map.maplibre-map {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .maplibregl-ctrl-bottom-right {
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-mobile-tools-toggle {
    position: absolute;
    z-index: 32;
    top: max(10px, env(safe-area-inset-top, 0px));
    right: max(124px, calc(env(safe-area-inset-right, 0px) + 124px));
    min-width: 92px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 100, 121, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #003b48;
    padding: 8px 12px;
    font: 800 0.75rem/1 "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-shadow: 0 6px 18px rgba(3, 20, 32, 0.12);
    touch-action: manipulation;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-mobile-tools-toggle[aria-expanded="true"] {
    border-color: rgba(0, 174, 187, 0.55);
    background: #dff3f5;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen.is-mobile-tools-open .map-location-toolbar {
    position: absolute;
    z-index: 31;
    top: max(62px, calc(env(safe-area-inset-top, 0px) + 62px));
    right: max(8px, env(safe-area-inset-right, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    border-color: rgba(0, 174, 187, 0.28);
    background: rgba(9, 13, 28, 0.94);
    padding: 8px;
    box-shadow: 0 14px 34px rgba(3, 9, 24, 0.28);
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen.is-mobile-tools-open .map-location-toolbar > p {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen.is-mobile-tools-open .map-location-toolbar .map-search-field,
  .app-shell.astro-page .astro-map-panel.is-fullscreen.is-mobile-tools-open .map-location-toolbar .map-search-field input {
    width: 100%;
    min-width: 0;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen.is-mobile-tools-open .map-location-toolbar .map-action-buttons,
  .app-shell.astro-page .astro-map-panel.is-fullscreen.is-mobile-tools-open .map-location-toolbar .map-action-buttons button {
    width: auto;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen.is-mobile-tools-open .map-filter-panel {
    position: absolute;
    z-index: 30;
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    max-height: min(132px, 34dvh);
    display: grid;
    overflow: auto;
    border-color: rgba(0, 174, 187, 0.28);
    background: rgba(9, 13, 28, 0.94);
    box-shadow: 0 -14px 34px rgba(3, 9, 24, 0.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar * {
    scroll-behavior: auto;
  }
}

/* Notch, Dynamic Island und Home-Indikator duerfen im Karten-Vollbild
   keine Bedienelemente verdecken. */
.app-shell.astro-page .astro-map-panel.is-fullscreen {
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  padding-right: max(10px, env(safe-area-inset-right, 0px));
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  padding-left: max(10px, env(safe-area-inset-left, 0px));
}

@media (max-width: 360px),
       (orientation: landscape) and (max-height: 520px) and (max-width: 1400px) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen {
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    padding-left: max(8px, env(safe-area-inset-left, 0px));
  }
}