:root {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:
    #182636;
}


html,
body,
#argosMapRoot,
#argosMap {
  width:
    100%;

  height:
    100%;

  margin:
    0;
}


body {
  overflow:
    hidden;

  background:
    #f2f1ed;
}


#argosMapRoot {
  position:
    relative;
}


#argosMap {
  position:
    absolute;

  inset:
    0;
}


/* ============================================================
   Status
   ============================================================ */

.argos-map-status {
  position:
    absolute;

  z-index:
    30;

  top:
    14px;

  left:
    50%;

  transform:
    translateX(-50%);

  padding:
    8px 14px;

  border-radius:
    10px;

  background:
    rgba(17, 31, 45, 0.92);

  color:
    white;

  box-shadow:
    0 5px 18px
    rgba(0, 0, 0, 0.20);

  font-size:
    14px;

  white-space:
    nowrap;
}


.argos-map-status[hidden] {
  display:
    none;
}


/* ============================================================
   Layerpanel
   ============================================================ */

.argos-layer-panel {
  position:
    absolute;

  z-index:
    40;

  top:
    14px;

  left:
    14px;

  width:
    min(
      330px,
      calc(100vw - 28px)
    );

  max-height:
    calc(100vh - 28px);

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  border:
    1px solid
    rgba(74, 88, 102, 0.22);

  border-radius:
    14px;

  background:
    rgba(248, 250, 252, 0.96);

  box-shadow:
    0 7px 24px
    rgba(17, 31, 45, 0.18);

  backdrop-filter:
    blur(10px);

  transition:
    width 160ms ease,
    height 160ms ease;
}


.argos-layer-panel-header {
  min-height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    0 10px 0 16px;
}


.argos-layer-panel-title {
  font-size:
    18px;
}


.argos-layer-panel-collapse {
  width:
    38px;

  height:
    38px;

  flex:
    0 0 38px;

  border:
    1px solid
    rgba(74, 88, 102, 0.22);

  border-radius:
    10px;

  background:
    white;

  color:
    #173249;

  font-size:
    27px;

  line-height:
    1;

  cursor:
    pointer;
}


.argos-layer-panel-content {
  overflow-y:
    auto;

  padding:
    0 10px 12px;
}


/*
 * ENTSCHEIDEND:
 * kompletter Panel-Collapse.
 *
 * Kein zweiter Handler.
 * Kein Legacy-State.
 */
.argos-layer-panel.is-collapsed {
  width:
    58px;

  height:
    58px;
}


.argos-layer-panel.is-collapsed
.argos-layer-panel-title,

.argos-layer-panel.is-collapsed
.argos-layer-panel-content {
  display:
    none;
}


.argos-layer-panel.is-collapsed
.argos-layer-panel-header {
  padding:
    10px;
}


/* ============================================================
   Gruppen
   ============================================================ */

.argos-layer-group {
  border-top:
    1px solid
    rgba(74, 88, 102, 0.13);
}


.argos-layer-group:first-child {
  border-top:
    0;
}


.argos-layer-group-header {
  width:
    100%;

  min-height:
    45px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0 7px;

  border:
    0;

  background:
    transparent;

  color:
    #1d2d3e;

  font:
    inherit;

  font-size:
    15px;

  font-weight:
    700;

  cursor:
    pointer;

  text-align:
    left;
}


.argos-layer-group-chevron {
  transition:
    transform 150ms ease;

  color:
    #617182;

  font-size:
    20px;
}


.argos-layer-group.is-open
.argos-layer-group-chevron {
  transform:
    rotate(90deg);
}


.argos-layer-group-body {
  display:
    none;

  padding:
    0 7px 10px;
}


.argos-layer-group.is-open
.argos-layer-group-body {
  display:
    block;
}


/* ============================================================
   Layer
   ============================================================ */

.argos-layer-item {
  min-height:
    38px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  cursor:
    pointer;

  font-size:
    14px;

  font-weight:
    560;
}


.argos-layer-item input {
  width:
    20px;

  height:
    20px;

  margin:
    0;

  accent-color:
    #1670b7;
}


.argos-layer-empty {
  padding:
    5px 0 9px;

  color:
    #8793a0;

  font-size:
    13px;
}


/* ============================================================
   Tablet / Mobile
   ============================================================ */

@media (
  max-width: 700px
) {
  .argos-layer-panel {
    top:
      8px;

    left:
      8px;

    width:
      min(
        300px,
        calc(100vw - 16px)
      );

    max-height:
      calc(100vh - 16px);
  }

  .argos-layer-panel-title {
    font-size:
      16px;
  }

  .argos-layer-group-header {
    min-height:
      48px;
  }

  .argos-layer-item {
    min-height:
      44px;
  }
}


/* ============================================================
   Ortssuche
   ============================================================ */

.argos-place-search {
  position:
    absolute;

  z-index:
    45;

  top:
    14px;

  left:
    50%;

  width:
    min(
      360px,
      calc(100vw - 170px)
    );

  transform:
    translateX(-50%);
}


.argos-place-search input {
  width:
    100%;

  box-sizing:
    border-box;

  height:
    44px;

  padding:
    0 15px;

  border:
    1px solid
    rgba(70, 85, 100, 0.25);

  border-radius:
    12px;

  background:
    rgba(255,255,255,0.96);

  color:
    #203040;

  font:
    inherit;

  font-size:
    15px;

  outline:
    none;

  box-shadow:
    0 5px 18px
    rgba(17,31,45,0.16);
}


.argos-place-search input:focus {
  border-color:
    rgba(35,112,170,0.65);
}


.argos-place-search-results {
  margin-top:
    6px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(70,85,100,0.20);

  border-radius:
    12px;

  background:
    rgba(255,255,255,0.98);

  box-shadow:
    0 7px 22px
    rgba(17,31,45,0.18);
}


.argos-place-search-result {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    10px 13px;

  border:
    0;

  border-bottom:
    1px solid
    rgba(70,85,100,0.10);

  background:
    transparent;

  color:
    #203040;

  font:
    inherit;

  text-align:
    left;

  cursor:
    pointer;
}


.argos-place-search-result:last-child {
  border-bottom:
    0;
}


.argos-place-search-result:hover {
  background:
    #edf4f8;
}


.argos-place-search-result span {
  color:
    #74808b;

  font-size:
    12px;
}


@media (
  max-width: 700px
) {
  .argos-place-search {
    top:
      8px;

    width:
      min(
        260px,
        calc(100vw - 150px)
      );
  }
}


/* ============================================================
   Gebietsauswahl / Länder
   ============================================================ */

.argos-country-context-menu {
  position:
    absolute;

  z-index:
    80;

  width:
    230px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  padding:
    12px;

  border:
    1px solid
    rgba(60,75,90,0.22);

  border-radius:
    12px;

  background:
    rgba(255,255,255,0.98);

  box-shadow:
    0 8px 26px
    rgba(20,30,40,0.22);

  color:
    #21313d;
}


.argos-country-context-menu strong {
  font-size:
    15px;
}


.argos-country-context-menu span {
  margin-bottom:
    3px;

  font-size:
    12px;

  color:
    #78848d;
}


.argos-country-context-menu button {
  min-height:
    36px;

  padding:
    7px 10px;

  border:
    0;

  border-radius:
    8px;

  background:
    #2f728d;

  color:
    white;

  font:
    inherit;

  cursor:
    pointer;
}


.argos-country-context-menu button.secondary {
  background:
    #eef1f3;

  color:
    #34434e;
}


/* ==========================================================
   ARGOS AREA SELECTION
   ========================================================== */

.argos-area-selection-control {
  position:
    absolute;

  top:
    14px;

  left:
    50%;

  transform:
    translateX(-50%);

  z-index:
    25;

  pointer-events:
    auto;
}


.argos-area-selection-control button {
  min-height:
    36px;

  padding:
    8px 14px;

  border:
    1px solid rgba(20, 30, 45, 0.22);

  border-radius:
    8px;

  background:
    rgba(255, 255, 255, 0.94);

  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.12);

  color:
    #243447;

  font:
    inherit;

  font-size:
    13px;

  font-weight:
    600;

  cursor:
    pointer;

  backdrop-filter:
    blur(8px);
}


.argos-area-selection-control button:hover {
  background:
    #ffffff;
}


.argos-area-selection-control button.active {
  background:
    #2f80ed;

  color:
    #ffffff;

  border-color:
    #2f80ed;
}


.argos-area-crosshair {
  cursor:
    crosshair !important;
}


.argos-area-selection-context-menu {
  position:
    absolute;

  z-index:
    80;

  width:
    min(300px, calc(100% - 24px));

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  padding:
    12px;

  border:
    1px solid rgba(20, 30, 45, 0.18);

  border-radius:
    10px;

  background:
    rgba(255, 255, 255, 0.97);

  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.18);

  color:
    #243447;

  transform:
    translate(8px, 8px);

  backdrop-filter:
    blur(10px);
}


.argos-area-selection-context-menu strong {
  display:
    block;

  font-size:
    14px;
}


.argos-area-selection-context-menu span {
  display:
    block;

  font-size:
    12px;

  color:
    #627386;
}


.argos-area-selection-context-menu span[data-kind="error"] {
  color:
    #b42318;
}


.argos-area-selection-context-menu input {
  width:
    100%;

  box-sizing:
    border-box;

  padding:
    8px 9px;

  border:
    1px solid rgba(20, 30, 45, 0.2);

  border-radius:
    6px;

  background:
    #ffffff;

  color:
    #243447;

  font:
    inherit;

  font-size:
    13px;
}


.argos-area-selection-context-menu button {
  width:
    100%;

  padding:
    8px 10px;

  border:
    0;

  border-radius:
    6px;

  background:
    #2f80ed;

  color:
    #ffffff;

  font:
    inherit;

  font-size:
    13px;

  font-weight:
    600;

  cursor:
    pointer;
}


.argos-area-selection-context-menu button.secondary {
  background:
    #edf1f5;

  color:
    #34495e;
}


.argos-area-selection-context-menu button:disabled {
  opacity:
    0.65;

  cursor:
    wait;
}


/* ==========================================================
   ARGOS MAP CONTROL LAYOUT FIX
   Gebiet markieren oben, Ortssuche darunter.
   ========================================================== */

.argos-area-selection-control {
  top: 14px !important;
  z-index: 45 !important;
}


.argos-place-search {
  top: 58px !important;
  z-index: 40 !important;
}


/*
 * Auf schmalen Clients etwas mehr Abstand schaffen.
 */
@media (max-width: 700px) {

  .argos-area-selection-control {
    top: 12px !important;
  }

  .argos-place-search {
    top: 62px !important;
    width: calc(100% - 110px) !important;
    max-width: 420px !important;
  }
}


/* ================================================================
   ARGOS CLIENT POSITION v1
   ================================================================ */

.argos-floating-button {
  position: absolute;
  z-index: 50;

  width: 46px;
  height: 46px;

  border: 1px solid rgba(20,40,55,.16);
  border-radius: 14px;

  background: rgba(255,255,255,.94);

  box-shadow:
    0 3px 14px rgba(0,0,0,.18);

  color: #18384c;

  font-size: 28px;
  line-height: 1;

  display: grid;
  place-items: center;

  cursor: pointer;
}


.argos-gps-button {
  right: 12px;
  bottom: 14px;
}


.argos-gps-status {
  position: absolute;
  z-index: 48;

  right: 68px;
  bottom: 17px;

  padding: 7px 10px;

  border-radius: 9px;

  background:
    rgba(20,28,35,.82);

  color: white;

  font-size: 12px;

  pointer-events: none;
}


.argos-wind-status {
  position: absolute;
  z-index: 48;

  left: 12px;
  bottom: 14px;

  min-width: 150px;
  max-width: 240px;

  padding: 8px 11px;

  border-radius: 10px;

  background:
    rgba(20,28,35,.86);

  color: white;

  box-shadow:
    0 2px 10px rgba(0,0,0,.18);

  font-size: 12px;

  pointer-events: none;

  display: flex;
  flex-direction: column;
  gap: 2px;
}


.argos-wind-status strong {
  font-size: 11px;
  opacity: .7;
  text-transform: uppercase;
  letter-spacing: .04em;
}


.argos-wind-status span {
  font-size: 15px;
  font-weight: 650;
}


.argos-wind-status small {
  opacity: .75;
}


@media (max-width: 520px) {

  .argos-gps-status {
    display: none;
  }

  .argos-wind-status {
    left: 10px;
    bottom: 10px;

    max-width: 185px;
  }

  .argos-gps-button {
    right: 10px;
    bottom: 10px;
  }

}


/* ==================================================================
   ARGOS MAP INTERACTION SHELL V1
   ==================================================================

   Wiederverwendbare Karteninteraktion für:
   Map / Suche / Boot / Route / Navigation / Messung / Regatta.

   Fachlayer bleiben unabhängig.
   ================================================================== */

:root {
  --argos-map-sheet-height:
    150px;

  --argos-map-control-gap:
    12px;

  --argos-map-safe-bottom:
    env(
      safe-area-inset-bottom,
      0px
    );
}


/*
 * Das technische Layerpanel bleibt vorhanden,
 * verschwindet aber aus der permanenten Hauptansicht.
 */
.argos-layer-panel {
  display:
    none;

  z-index:
    120;

  top:
    14px;

  left:
    14px;

  max-height:
    calc(
      100vh
      - 28px
    );
}


.argos-layer-panel.is-ui-open {
  display:
    flex;
}


/*
 * Alte frei schwebende Ortssuche deaktivieren.
 * V2 wird ausschließlich innerhalb des Context Sheets gemountet.
 */
#argosMapRoot
> .argos-place-search {
  display:
    none !important;
}


/* ------------------------------------------------------------------
   Interaction root
   ------------------------------------------------------------------ */

.argos-map-interaction-shell {
  position:
    absolute;

  inset:
    0;

  z-index:
    55;

  pointer-events:
    none;
}


/* ------------------------------------------------------------------
   Bottom Sheet
   ------------------------------------------------------------------ */

.argos-map-context-sheet {
  position:
    absolute;

  z-index:
    80;

  left:
    max(
      8px,
      env(
        safe-area-inset-left,
        0px
      )
    );

  right:
    max(
      8px,
      env(
        safe-area-inset-right,
        0px
      )
    );

  bottom:
    0;

  height:
    150px;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      84,
      94,
      105,
      .16
    );

  border-bottom:
    0;

  border-radius:
    22px
    22px
    0
    0;

  background:
    rgba(
      248,
      248,
      247,
      .94
    );

  box-shadow:
    0
    -8px
    32px
    rgba(
      18,
      28,
      38,
      .16
    );

  backdrop-filter:
    blur(22px)
    saturate(1.35);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(1.35);

  pointer-events:
    auto;

  transition:
    height
    260ms
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    );
}


.argos-map-context-sheet.is-dragging {
  transition:
    none;

  user-select:
    none;

  -webkit-user-select:
    none;
}


.argos-map-sheet-handle-area {
  flex:
    0 0
    27px;

  display:
    grid;

  place-items:
    center;

  cursor:
    ns-resize;

  touch-action:
    none;
}


.argos-map-sheet-handle {
  width:
    42px;

  height:
    5px;

  border-radius:
    999px;

  background:
    rgba(
      52,
      59,
      66,
      .30
    );
}


.argos-map-sheet-body {
  flex:
    1;

  min-height:
    0;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  -webkit-overflow-scrolling:
    touch;
}


.argos-map-sheet-content {
  width:
    min(
      720px,
      100%
    );

  box-sizing:
    border-box;

  margin:
    0 auto;

  padding:
    0
    14px
    calc(
      18px
      + var(
          --argos-map-safe-bottom
        )
    );
}


/* ------------------------------------------------------------------
   Suchfeld
   ------------------------------------------------------------------ */

.argos-map-sheet-search {
  position:
    sticky;

  z-index:
    4;

  top:
    0;

  padding-bottom:
    8px;

  background:
    linear-gradient(
      to bottom,
      rgba(
        248,
        248,
        247,
        .98
      )
      72%,
      rgba(
        248,
        248,
        247,
        0
      )
    );
}


.argos-map-sheet-search
.argos-place-search {
  position:
    static;

  width:
    100%;

  transform:
    none;
}


.argos-place-search-field {
  height:
    46px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  box-sizing:
    border-box;

  padding:
    0 12px;

  border:
    1px solid
    rgba(
      74,
      84,
      94,
      .12
    );

  border-radius:
    13px;

  background:
    rgba(
      226,
      227,
      226,
      .83
    );
}


.argos-place-search-icon {
  flex:
    0 0 auto;

  color:
    #6d7278;

  font-size:
    23px;

  line-height:
    1;
}


.argos-place-search input {
  width:
    100%;

  height:
    44px;

  min-width:
    0;

  box-sizing:
    border-box;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  box-shadow:
    none;

  color:
    #202326;

  font:
    inherit;

  font-size:
    16px;
}


.argos-place-search-results {
  margin-top:
    7px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      74,
      84,
      94,
      .12
    );

  border-radius:
    13px;

  background:
    rgba(
      255,
      255,
      255,
      .98
    );

  box-shadow:
    0
    8px
    24px
    rgba(
      16,
      25,
      34,
      .13
    );
}


.argos-place-search-result {
  min-height:
    48px;

  padding:
    9px
    12px;
}


.argos-place-search-result-main {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.argos-place-search-result-icon {
  display:
    grid;

  width:
    30px;

  height:
    30px;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #eef0ef;

  color:
    #48515a;
}


.argos-place-search-result-type {
  font-size:
    12px;
}


/* ------------------------------------------------------------------
   Sheet Sections
   ------------------------------------------------------------------ */

.argos-map-sheet-section {
  padding:
    8px
    0
    13px;

  border-top:
    1px solid
    rgba(
      77,
      88,
      98,
      .10
    );
}


.argos-map-sheet-section:first-of-type {
  border-top:
    0;
}


.argos-map-sheet-section-title {
  margin:
    0 2px
    9px;

  color:
    #6c747b;

  font-size:
    12px;

  font-weight:
    700;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;
}


.argos-map-sheet-empty {
  padding:
    10px
    3px;

  color:
    #8a9096;

  font-size:
    13px;
}


/* ------------------------------------------------------------------
   Favoriten / Zuletzt
   ------------------------------------------------------------------ */

.argos-map-saved-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;
}


.argos-map-saved-list {
  display:
    grid;

  gap:
    5px;
}


.argos-map-saved-item {
  min-width:
    0;

  min-height:
    52px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    8px
    10px;

  border:
    0;

  border-radius:
    13px;

  background:
    rgba(
      255,
      255,
      255,
      .76
    );

  color:
    #22282d;

  font:
    inherit;

  text-align:
    left;

  cursor:
    pointer;
}


.argos-map-saved-item:hover {
  background:
    rgba(
      255,
      255,
      255,
      .98
    );
}


.argos-map-saved-icon {
  flex:
    0 0
    34px;

  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #e6e8e7;

  color:
    #34414b;

  font-size:
    17px;
}


.argos-map-saved-text {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.argos-map-saved-text strong {
  overflow:
    hidden;

  color:
    #22282d;

  font-size:
    14px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.argos-map-saved-text small {
  overflow:
    hidden;

  color:
    #7b838a;

  font-size:
    11px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* ------------------------------------------------------------------
   Nearby
   ------------------------------------------------------------------ */

.argos-map-nearby-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;
}


.argos-map-nearby-item {
  min-width:
    0;

  min-height:
    70px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    8px
    4px;

  border:
    0;

  border-radius:
    14px;

  background:
    rgba(
      255,
      255,
      255,
      .78
    );

  color:
    #28343c;

  font:
    inherit;

  cursor:
    pointer;
}


.argos-map-nearby-item span {
  font-size:
    20px;
}


.argos-map-nearby-item strong {
  max-width:
    100%;

  overflow:
    hidden;

  font-size:
    11px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* ------------------------------------------------------------------
   Context Details
   ------------------------------------------------------------------ */

.argos-map-context-header {
  min-height:
    48px;

  display:
    grid;

  grid-template-columns:
    38px
    minmax(
      0,
      1fr
    )
    auto;

  align-items:
    center;

  gap:
    8px;
}


.argos-map-context-header
> div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;
}


.argos-map-context-header strong {
  overflow:
    hidden;

  color:
    #22282d;

  font-size:
    17px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.argos-map-context-header small {
  color:
    #7b838a;

  font-size:
    11px;
}


.argos-map-context-back,
.argos-map-context-favorite {
  width:
    36px;

  height:
    36px;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    50%;

  background:
    rgba(
      225,
      227,
      227,
      .88
    );

  color:
    #29343d;

  font:
    inherit;

  font-size:
    24px;

  cursor:
    pointer;
}


.argos-map-context-favorite {
  font-size:
    21px;
}


.argos-map-context-actions {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;

  margin:
    7px
    0
    10px;
}


.argos-map-context-actions button {
  min-height:
    43px;

  border:
    0;

  border-radius:
    12px;

  background:
    #e5e7e6;

  color:
    #28333b;

  font:
    inherit;

  font-size:
    13px;

  font-weight:
    650;

  cursor:
    pointer;
}


.argos-map-context-actions button:last-child {
  background:
    #2575b9;

  color:
    #fff;
}


.argos-map-context-meta {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    10px
    2px;

  color:
    #717980;

  font-size:
    12px;
}


.argos-map-context-meta strong {
  color:
    #303a42;

  font-weight:
    600;
}


.argos-map-context-placeholder {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  margin-top:
    8px;

  padding:
    15px;

  border-radius:
    14px;

  background:
    rgba(
      255,
      255,
      255,
      .70
    );

  color:
    #6c747b;

  font-size:
    13px;

  line-height:
    1.45;
}


.argos-map-context-placeholder strong {
  color:
    #26323a;

  font-size:
    16px;
}


/* ------------------------------------------------------------------
   Floating Controls
   ------------------------------------------------------------------ */

.argos-map-shell-controls {
  position:
    absolute;

  z-index:
    72;

  bottom:
    calc(
      var(
        --argos-map-sheet-height
      )
      + 12px
    );

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  pointer-events:
    auto;

  transition:
    bottom
    260ms
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    ),
    opacity
    160ms
    ease,
    transform
    160ms
    ease;
}


.argos-map-shell-controls-left {
  left:
    12px;
}


.argos-map-shell-controls-right {
  right:
    12px;
}


.argos-map-interaction-shell.controls-hidden
.argos-map-shell-controls {
  opacity:
    0;

  transform:
    translateY(
      8px
    );

  pointer-events:
    none;
}


.argos-map-shell-button {
  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(
      37,
      48,
      58,
      .11
    );

  border-radius:
    13px;

  background:
    rgba(
      249,
      249,
      248,
      .93
    );

  color:
    #28343d;

  box-shadow:
    0
    3px
    13px
    rgba(
      18,
      28,
      38,
      .17
    );

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  font:
    inherit;

  font-size:
    18px;

  font-weight:
    700;

  cursor:
    pointer;
}


/*
 * Bestehender GPS/Re-Center Button:
 * nicht neu bauen, sondern in dieselbe Bewegungslogik integrieren.
 */
.argos-gps-button {
  right:
    12px !important;

  bottom:
    calc(
      var(
        --argos-map-sheet-height
      )
      + 112px
    ) !important;

  transition:
    bottom
    260ms
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    ),
    opacity
    160ms
    ease,
    transform
    160ms
    ease;
}


.argos-map-interaction-shell.controls-hidden
~ .argos-gps-button,
#argosMapRoot:has(
  .argos-map-interaction-shell.controls-hidden
)
.argos-gps-button {
  opacity:
    0;

  pointer-events:
    none;
}


/*
 * MapLibre NavigationControl ebenfalls an Sheet koppeln.
 */
.maplibregl-ctrl-top-right {
  top:
    auto;

  right:
    12px;

  bottom:
    calc(
      var(
        --argos-map-sheet-height
      )
      + 164px
    );

  transition:
    bottom
    260ms
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    ),
    opacity
    160ms
    ease;
}


#argosMapRoot:has(
  .argos-map-interaction-shell.controls-hidden
)
.maplibregl-ctrl-top-right {
  opacity:
    0;

  pointer-events:
    none;
}


/*
 * Wind/Wetter nicht mehr unten im Weg.
 * Wird zur kompakten Info oben links.
 */
.argos-wind-status {
  top:
    max(
      12px,
      env(
        safe-area-inset-top,
        0px
      )
    ) !important;

  left:
    12px !important;

  right:
    auto !important;

  bottom:
    auto !important;

  min-width:
    150px;

  max-width:
    min(
      250px,
      calc(
        100vw
        - 90px
      )
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .24
    );

  border-radius:
    14px;

  background:
    rgba(
      28,
      37,
      43,
      .78
    );

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


/*
 * GPS-Text ist für die ruhige Karte sekundär.
 */
.argos-gps-status {
  display:
    none;
}


/* ------------------------------------------------------------------
   Sheet Snap states
   ------------------------------------------------------------------ */

.argos-map-context-sheet[data-snap="collapsed"]
.argos-map-sheet-body {
  opacity:
    0;

  pointer-events:
    none;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-section {
  display:
    none;
}


/*
 * Compact zeigt Suchfeld bzw. aktuellen Objektkontext.
 */
.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-body {
  overflow:
    hidden;
}


/* ------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------ */

@media (
  max-width: 700px
) {

  .argos-layer-panel.is-ui-open {
    top:
      8px;

    left:
      8px;

    width:
      calc(
        100vw
        - 16px
      );

    max-height:
      calc(
        100vh
        - 16px
      );
  }


  .argos-map-context-sheet {
    left:
      0;

    right:
      0;

    border-left:
      0;

    border-right:
      0;

    border-radius:
      20px
      20px
      0
      0;
  }


  .argos-map-nearby-grid {
    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );

    gap:
      6px;
  }


  .argos-map-nearby-item {
    min-height:
      65px;
  }


  .argos-map-saved-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

}


@media (
  max-width: 430px
) {

  .argos-map-sheet-content {
    padding-left:
      11px;

    padding-right:
      11px;
  }


  .argos-map-nearby-grid {
    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );
  }


  .argos-map-nearby-item strong {
    font-size:
      10px;
  }


  .argos-map-shell-controls-left {
    left:
      10px;
  }


  .argos-map-shell-controls-right,
  .argos-gps-button,
  .maplibregl-ctrl-top-right {
    right:
      10px !important;
  }

}


/* ------------------------------------------------------------------
   Desktop: Sheet bewusst begrenzen
   ------------------------------------------------------------------ */

@media (
  min-width: 900px
) {

  .argos-map-context-sheet {
    left:
      50%;

    right:
      auto;

    width:
      min(
        620px,
        calc(
          100vw
          - 32px
        )
      );

    transform:
      translateX(
        -50%
      );

    border-bottom:
      1px solid
      rgba(
        84,
        94,
        105,
        .16
      );

    border-radius:
      22px
      22px
      0
      0;
  }

}


/* ------------------------------------------------------------------
   Reduce Motion
   ------------------------------------------------------------------ */

@media (
  prefers-reduced-motion:
    reduce
) {

  .argos-map-context-sheet,
  .argos-map-shell-controls,
  .argos-gps-button,
  .maplibregl-ctrl-top-right {
    transition:
      none !important;
  }

}


/* ==================================================================
   ARGOS MAP INTERACTION SHELL V1.1 – FLOATING
   ==================================================================

   Leitidee:

      COMPACT
        keine untere Bedienzone,
        sondern eine schwebende Insel auf der Karte.

      HALF
        schwebendes Context Sheet mit Karte rundherum.

      FULL
        Context wird zur dominierenden Arbeitsfläche.

   Die funktionale Shell aus V1 bleibt unangetastet.
   ================================================================== */


/* ------------------------------------------------------------------
   Grundsheet: Abstand zur Bildschirmkante.
   Dadurch läuft die Karte optisch um das Sheet herum.
   ------------------------------------------------------------------ */

.argos-map-context-sheet {
  left:
    max(
      12px,
      env(
        safe-area-inset-left,
        0px
      )
    );

  right:
    max(
      12px,
      env(
        safe-area-inset-right,
        0px
      )
    );

  bottom:
    calc(
      10px
      + env(
          safe-area-inset-bottom,
          0px
        )
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .54
    );

  border-radius:
    24px;

  background:
    rgba(
      247,
      248,
      247,
      .82
    );

  box-shadow:
    0
    8px
    30px
    rgba(
      15,
      25,
      34,
      .15
    );

  backdrop-filter:
    blur(24px)
    saturate(1.30);

  -webkit-backdrop-filter:
    blur(24px)
    saturate(1.30);
}


/* ------------------------------------------------------------------
   Griff wesentlich zurückhaltender
   ------------------------------------------------------------------ */

.argos-map-sheet-handle-area {
  flex-basis:
    20px;

  min-height:
    20px;
}


.argos-map-sheet-handle {
  width:
    34px;

  height:
    4px;

  background:
    rgba(
      55,
      62,
      68,
      .23
    );
}


/* ------------------------------------------------------------------
   COMPACT – die eigentliche schwebende Suchinsel
   ------------------------------------------------------------------ */

.argos-map-context-sheet[data-snap="compact"] {
  left:
    50%;

  right:
    auto;

  bottom:
    calc(
      12px
      + env(
          safe-area-inset-bottom,
          0px
        )
    );

  width:
    min(
      560px,
      calc(
        100vw
        - 28px
      )
    );

  transform:
    translateX(
      -50%
    );

  border-radius:
    24px;

  background:
    rgba(
      249,
      249,
      248,
      .86
    );

  box-shadow:
    0
    7px
    26px
    rgba(
      17,
      27,
      36,
      .16
    );
}


.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-content {
  padding:
    0
    10px
    10px;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-search {
  padding-bottom:
    0;

  background:
    transparent;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-place-search-field {
  height:
    50px;

  border:
    0;

  border-radius:
    17px;

  background:
    rgba(
      226,
      228,
      227,
      .73
    );
}


.argos-map-context-sheet[data-snap="compact"]
.argos-place-search input {
  height:
    48px;
}


/*
 * Compact soll wirklich leicht sein:
 * Suchergebnisse öffnen automatisch Half.
 */
.argos-map-context-sheet[data-snap="compact"]
.argos-place-search-results {
  display:
    none;
}


/* ------------------------------------------------------------------
   COLLAPSED – fast nur Griff / kleine Insel
   ------------------------------------------------------------------ */

.argos-map-context-sheet[data-snap="collapsed"] {
  left:
    50%;

  right:
    auto;

  bottom:
    calc(
      12px
      + env(
          safe-area-inset-bottom,
          0px
        )
    );

  width:
    92px;

  transform:
    translateX(
      -50%
    );

  border-radius:
    999px;

  background:
    rgba(
      249,
      249,
      248,
      .82
    );
}


/* ------------------------------------------------------------------
   HALF – weiterhin schwebend, aber größer
   ------------------------------------------------------------------ */

.argos-map-context-sheet[data-snap="half"] {
  left:
    50%;

  right:
    auto;

  bottom:
    calc(
      10px
      + env(
          safe-area-inset-bottom,
          0px
        )
    );

  width:
    min(
      680px,
      calc(
        100vw
        - 24px
      )
    );

  transform:
    translateX(
      -50%
    );

  border-radius:
    26px;

  background:
    rgba(
      247,
      248,
      247,
      .91
    );

  box-shadow:
    0
    10px
    38px
    rgba(
      15,
      25,
      34,
      .18
    );
}


/* ------------------------------------------------------------------
   FULL – erst jetzt wird aus der Insel eine Arbeitsfläche.
   Trotzdem kleine Außenkante, damit die Herkunft aus der Karte
   sichtbar bleibt.
   ------------------------------------------------------------------ */

.argos-map-context-sheet[data-snap="full"] {
  left:
    max(
      7px,
      env(
        safe-area-inset-left,
        0px
      )
    );

  right:
    max(
      7px,
      env(
        safe-area-inset-right,
        0px
      )
    );

  bottom:
    7px;

  width:
    auto;

  transform:
    none;

  border-radius:
    28px;

  background:
    rgba(
      248,
      249,
      248,
      .97
    );

  box-shadow:
    0
    12px
    44px
    rgba(
      13,
      22,
      31,
      .21
    );
}


/* ------------------------------------------------------------------
   Controls: optisch ebenfalls leichter
   ------------------------------------------------------------------ */

.argos-map-shell-button {
  width:
    42px;

  height:
    42px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .52
    );

  border-radius:
    50%;

  background:
    rgba(
      249,
      249,
      248,
      .86
    );

  box-shadow:
    0
    5px
    18px
    rgba(
      16,
      25,
      34,
      .15
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


/*
 * Controls schweben mit etwas Abstand über der Insel.
 */
.argos-map-shell-controls {
  bottom:
    calc(
      var(
        --argos-map-sheet-height
      )
      + 20px
    );
}


.argos-gps-button {
  bottom:
    calc(
      var(
        --argos-map-sheet-height
      )
      + 116px
    ) !important;

  border-radius:
    50% !important;
}


.maplibregl-ctrl-top-right {
  bottom:
    calc(
      var(
        --argos-map-sheet-height
      )
      + 168px
    );
}


/* ------------------------------------------------------------------
   Windstatus: ebenfalls als kleine Glass Card statt schwerer Box
   ------------------------------------------------------------------ */

.argos-wind-status {
  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .30
    ) !important;

  border-radius:
    16px !important;

  background:
    rgba(
      27,
      36,
      42,
      .70
    ) !important;

  box-shadow:
    0
    5px
    18px
    rgba(
      15,
      23,
      30,
      .15
    ) !important;

  backdrop-filter:
    blur(18px)
    saturate(1.20);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(1.20);
}


/* ------------------------------------------------------------------
   HALF/FULL bekommen mehr Luft zwischen den Inhaltsgruppen.
   ------------------------------------------------------------------ */

.argos-map-context-sheet[data-snap="half"]
.argos-map-sheet-content,
.argos-map-context-sheet[data-snap="full"]
.argos-map-sheet-content {
  padding-left:
    16px;

  padding-right:
    16px;
}


.argos-map-context-sheet[data-snap="half"]
.argos-map-sheet-section,
.argos-map-context-sheet[data-snap="full"]
.argos-map-sheet-section {
  padding-top:
    13px;

  padding-bottom:
    15px;
}


/* ------------------------------------------------------------------
   Mobile Override aus V1 neutralisieren:
   Compact/Half sollen NICHT wieder Vollbreite bekommen.
   ------------------------------------------------------------------ */

@media (
  max-width: 700px
) {

  .argos-map-context-sheet[data-snap="compact"] {
    left:
      50%;

    right:
      auto;

    width:
      calc(
        100vw
        - 24px
      );

    transform:
      translateX(
        -50%
      );

    border-left:
      1px solid
      rgba(
        255,
        255,
        255,
        .54
      );

    border-right:
      1px solid
      rgba(
        255,
        255,
        255,
        .54
      );

    border-radius:
      23px;
  }


  .argos-map-context-sheet[data-snap="half"] {
    left:
      50%;

    right:
      auto;

    width:
      calc(
        100vw
        - 16px
      );

    transform:
      translateX(
        -50%
      );

    border-left:
      1px solid
      rgba(
        255,
        255,
        255,
        .54
      );

    border-right:
      1px solid
      rgba(
        255,
        255,
        255,
        .54
      );

    border-radius:
      25px;
  }


  .argos-map-context-sheet[data-snap="collapsed"] {
    left:
      50%;

    right:
      auto;

    width:
      88px;

    transform:
      translateX(
        -50%
      );

    border-radius:
      999px;
  }


  .argos-map-context-sheet[data-snap="full"] {
    left:
      6px;

    right:
      6px;

    width:
      auto;

    transform:
      none;

    border-left:
      1px solid
      rgba(
        255,
        255,
        255,
        .54
      );

    border-right:
      1px solid
      rgba(
        255,
        255,
        255,
        .54
      );

    border-radius:
      27px;
  }

}


/* ------------------------------------------------------------------
   Desktop Override aus V1 neutralisieren.
   Die Snap-Stufe entscheidet nun über die Breite.
   ------------------------------------------------------------------ */

@media (
  min-width: 900px
) {

  .argos-map-context-sheet[data-snap="compact"] {
    width:
      min(
        560px,
        calc(
          100vw
          - 40px
        )
      );
  }


  .argos-map-context-sheet[data-snap="half"] {
    width:
      min(
        680px,
        calc(
          100vw
          - 40px
        )
      );
  }


  .argos-map-context-sheet[data-snap="full"] {
    left:
      12px;

    right:
      12px;

    width:
      auto;

    max-width:
      none;

    transform:
      none;
  }

}


/* ------------------------------------------------------------------
   FLOATING V1.1 MARKER
   ------------------------------------------------------------------ */

/* ARGOS_MAP_INTERACTION_FLOATING_V11 */


/* ==================================================================
   ARGOS MAP SHELL V1.2 – COMPACT POLISH
   ==================================================================

   Compact ist keine kleine Seite,
   sondern eine schwebende Bedieninsel.
   ================================================================== */


/* Äußere Insel flacher und optisch zurückhaltender */

.argos-map-context-sheet[data-snap="compact"] {
  bottom:
    calc(
      10px
      + env(
          safe-area-inset-bottom,
          0px
        )
    );

  width:
    min(
      590px,
      calc(
        100vw
        - 20px
      )
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .42
    );

  border-radius:
    22px;

  background:
    rgba(
      249,
      249,
      248,
      .68
    );

  box-shadow:
    0
    7px
    24px
    rgba(
      16,
      25,
      34,
      .14
    );

  backdrop-filter:
    blur(22px)
    saturate(1.22);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(1.22);
}


/*
 * Weniger eigener "Kopfbereich".
 * Griff sitzt fast direkt über dem Suchfeld.
 */

.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-handle-area {
  flex:
    0 0
    14px;

  min-height:
    14px;

  padding-top:
    2px;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-handle {
  width:
    31px;

  height:
    3px;

  background:
    rgba(
      55,
      62,
      68,
      .22
    );
}


/*
 * Content nimmt nahezu die gesamte Insel ein.
 */

.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-content {
  padding:
    0
    7px
    7px;
}


/*
 * Suchkapsel selbst wird zum dominanten Objekt.
 */

.argos-map-context-sheet[data-snap="compact"]
.argos-place-search-field {
  width:
    100%;

  height:
    56px;

  padding:
    0
    15px;

  border:
    0;

  border-radius:
    18px;

  background:
    rgba(
      224,
      226,
      225,
      .78
    );

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(
      255,
      255,
      255,
      .20
    );
}


.argos-map-context-sheet[data-snap="compact"]
.argos-place-search input {
  height:
    54px;

  font-size:
    17px;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-place-search-icon {
  font-size:
    22px;
}


/*
 * Im Compact-Zustand darf nichts unterhalb
 * der Suchkapsel zusätzlich Raum beanspruchen.
 */

.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-section,
.argos-map-context-sheet[data-snap="compact"]
.argos-place-search-results {
  display:
    none !important;
}


/*
 * Suchfeld wirklich über die verfügbare Breite ziehen.
 */

.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-search,
.argos-map-context-sheet[data-snap="compact"]
.argos-place-search {
  width:
    100%;

  max-width:
    none;

  margin:
    0;

  padding-bottom:
    0;

  background:
    transparent;
}


/*
 * Mobile: nur sehr wenig Kartenrand verlieren.
 */

@media (
  max-width: 700px
) {

  .argos-map-context-sheet[data-snap="compact"] {
    width:
      calc(
        100vw
        - 18px
      );

    border-radius:
      21px;
  }

}


@media (
  max-width: 430px
) {

  .argos-map-context-sheet[data-snap="compact"] {
    width:
      calc(
        100vw
        - 16px
      );
  }


  .argos-map-context-sheet[data-snap="compact"]
  .argos-map-sheet-content {
    padding-left:
      6px;

    padding-right:
      6px;

    padding-bottom:
      6px;
  }

}


/* ARGOS_MAP_COMPACT_POLISH_V12 */


/* ==================================================================
   ARGOS MAP SHELL V1.3 – COMPACT ISLAND
   ==================================================================

   Apple-artiges Grundprinzip:

   compact:
     kleine freischwebende Bedieninsel

   half:
     wächst horizontal UND vertikal

   full:
     große Kontext-Arbeitsfläche

   Nicht Apple kopieren:
   ARGOS Quick Action = Boot / Favoriten.
   ================================================================== */


/* ------------------------------------------------------------------
   Die gesamte Shell darf beim Snap auch horizontal animieren.
   ------------------------------------------------------------------ */

.argos-map-context-sheet {
  transition:
    height
      260ms
      cubic-bezier(.2,.8,.2,1),

    width
      260ms
      cubic-bezier(.2,.8,.2,1),

    left
      260ms
      cubic-bezier(.2,.8,.2,1),

    right
      260ms
      cubic-bezier(.2,.8,.2,1),

    bottom
      260ms
      cubic-bezier(.2,.8,.2,1),

    border-radius
      260ms
      cubic-bezier(.2,.8,.2,1),

    background
      180ms
      ease,

    box-shadow
      180ms
      ease;
}


/* ------------------------------------------------------------------
   Search Row:
   Suchfeld + ARGOS Quick Button bilden eine Einheit.
   ------------------------------------------------------------------ */

.argos-map-compact-search-row {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    52px;

  align-items:
    center;

  gap:
    7px;
}


.argos-map-compact-search-row
.argos-map-sheet-search {
  min-width:
    0;
}


.argos-map-compact-quick {
  width:
    52px;

  height:
    52px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    rgba(
      221,
      225,
      226,
      .88
    );

  color:
    #263640;

  box-shadow:
    inset
      0
      0
      0
      1px
      rgba(
        255,
        255,
        255,
        .30
      );

  font:
    inherit;

  font-size:
    23px;

  cursor:
    pointer;

  flex:
    0
    0
    auto;
}


.argos-map-compact-quick:active {
  transform:
    scale(.96);
}


/* ------------------------------------------------------------------
   COMPACT:
   sichtbar schmaler als Bildschirm.

   Genau das erzeugt den Eindruck:
   "Element liegt AUF der Karte".
   ------------------------------------------------------------------ */

.argos-map-context-sheet[data-snap="compact"] {
  width:
    min(
      510px,
      calc(
        100vw
        - 54px
      )
    );

  padding:
    0;

  border-radius:
    23px;

  background:
    rgba(
      249,
      249,
      248,
      .72
    );
}


/*
 * Außenrahmen nur wenige Pixel.
 */

.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-content {
  padding:
    0
    6px
    6px;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-handle-area {
  flex:
    0
    0
    13px;

  min-height:
    13px;

  padding:
    1px
    0
    0;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-handle {
  width:
    30px;

  height:
    3px;
}


/*
 * Suchfeld selbst nicht mehr unnötig hoch.
 */

.argos-map-context-sheet[data-snap="compact"]
.argos-place-search-field {
  height:
    52px;

  padding:
    0
    13px;

  border-radius:
    17px;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-place-search input {
  height:
    50px;

  font-size:
    16px;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-map-compact-quick {
  width:
    52px;

  height:
    52px;
}


/* ------------------------------------------------------------------
   HALF:
   Horizontal deutlich aufziehen.
   Dadurch entsteht beim Übergang das gewünschte "Aufzoomen".
   ------------------------------------------------------------------ */

.argos-map-context-sheet[data-snap="half"] {
  width:
    min(
      680px,
      calc(
        100vw
        - 16px
      )
    );
}


/*
 * Im geöffneten Zustand darf der Quick Button weiterhin sichtbar
 * bleiben. Damit bleibt die visuelle Identität zwischen Compact
 * und Half erhalten.
 */

.argos-map-context-sheet[data-snap="half"]
.argos-map-compact-search-row {
  grid-template-columns:
    minmax(
      0,
      1fr
    )
    52px;
}


/* ------------------------------------------------------------------
   FULL:
   dieselbe Zeile bleibt bestehen, Kontext wächst darunter.
   ------------------------------------------------------------------ */

.argos-map-context-sheet[data-snap="full"]
.argos-map-compact-search-row {
  grid-template-columns:
    minmax(
      0,
      1fr
    )
    52px;
}


/* ------------------------------------------------------------------
   Mobile Proportionen
   ------------------------------------------------------------------ */

@media (
  max-width: 700px
) {

  .argos-map-context-sheet[data-snap="compact"] {
    width:
      calc(
        100vw
        - 46px
      );
  }

}


@media (
  max-width: 430px
) {

  .argos-map-context-sheet[data-snap="compact"] {
    width:
      calc(
        100vw
        - 40px
      );
  }


  .argos-map-compact-search-row {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      50px;

    gap:
      6px;
  }


  .argos-map-context-sheet[data-snap="compact"]
  .argos-map-compact-quick {
    width:
      50px;

    height:
      50px;
  }

}


/* ------------------------------------------------------------------
   Sehr kleine Geräte:
   Text darf nicht das Quick-Symbol verdrängen.
   ------------------------------------------------------------------ */

@media (
  max-width: 360px
) {

  .argos-map-context-sheet[data-snap="compact"] {
    width:
      calc(
        100vw
        - 28px
      );
  }


  .argos-place-search input {
    font-size:
      14px !important;
  }

}


/* ------------------------------------------------------------------
   Reduce motion
   ------------------------------------------------------------------ */

@media (
  prefers-reduced-motion:
    reduce
) {

  .argos-map-context-sheet {
    transition:
      none !important;
  }

}


/* ARGOS_MAP_COMPACT_ISLAND_CSS_V13 */


/* ==================================================================
   ARGOS MAP UI V1.4 – VISUAL RESTORE
   ==================================================================
   Nur Compact-Geometrie.
   Keine fachliche Änderung.
   ================================================================== */


/*
 * Safety-Net:
 * selbst bei einem alten DOM dürfen MapLibre +/- und dessen
 * eigener Kompass niemals sichtbar werden.
 */
.maplibregl-ctrl-zoom-in,
.maplibregl-ctrl-zoom-out,
.maplibregl-ctrl-compass {
  display:
    none !important;
}


/*
 * Compact bewusst NICHT bildschirmfüllend.
 *
 * Auf dem Telefon bleibt deutlich Karte links/rechts sichtbar.
 */
.argos-map-context-sheet[data-snap="compact"] {
  width:
    min(
      470px,
      calc(100vw - 64px)
    ) !important;

  height:
    72px !important;

  left:
    50% !important;

  right:
    auto !important;

  transform:
    translateX(-50%) !important;

  bottom:
    calc(
      8px
      + env(safe-area-inset-bottom, 0px)
    ) !important;

  border-radius:
    19px !important;

  background:
    rgba(249,249,248,.72) !important;

  box-shadow:
    0 5px 19px
    rgba(16,25,34,.12) !important;
}


/*
 * Weißer Außenrahmen nur noch wenige Pixel.
 */
.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-content {
  padding:
    0 5px 5px !important;
}


/*
 * Visueller Griff sehr klein.
 * Sein Bedienbereich bleibt aber wesentlich größer.
 */
.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-handle-area {
  position:
    relative;

  flex:
    0 0 13px !important;

  min-height:
    13px !important;

  padding:
    0 !important;

  overflow:
    visible;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-handle {
  width:
    27px !important;

  height:
    3px !important;

  margin-top:
    3px;

  opacity:
    .72;

  pointer-events:
    none;
}


/*
 * Große unsichtbare Griff-/Touchzone.
 * Man muss den kleinen grauen Strich nicht exakt treffen.
 */
.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-handle-area::before {
  content:
    "";

  position:
    absolute;

  z-index:
    5;

  left:
    0;

  right:
    0;

  top:
    -8px;

  height:
    40px;

  touch-action:
    none;
}


/*
 * Suchzeile niedriger und kompakter.
 */
.argos-map-context-sheet[data-snap="compact"]
.argos-map-compact-search-row {
  grid-template-columns:
    minmax(0,1fr)
    40px !important;

  gap:
    5px !important;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-place-search-field {
  height:
    40px !important;

  min-height:
    40px !important;

  padding:
    0 10px !important;

  border-radius:
    14px !important;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-place-search input {
  height:
    38px !important;

  font-size:
    14px !important;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-place-search-icon {
  font-size:
    18px !important;
}


/*
 * Rechter Quick-Button ebenfalls kleiner.
 */
.argos-map-context-sheet[data-snap="compact"]
.argos-map-compact-quick {
  width:
    40px !important;

  height:
    40px !important;

  font-size:
    17px !important;
}


/*
 * Falls der aktuelle Build noch KEINEN Quick Button enthält,
 * bleibt die Suche trotzdem sauber und über die ganze Innenbreite.
 */
.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-search,
.argos-map-context-sheet[data-snap="compact"]
.argos-place-search {
  width:
    100% !important;

  max-width:
    none !important;
}


/*
 * Keine darunterliegenden Inhalte im Compact-Zustand.
 */
.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-section,
.argos-map-context-sheet[data-snap="compact"]
.argos-place-search-results {
  display:
    none !important;
}


/*
 * Telefon:
 * etwas mehr Kartenluft links/rechts.
 */
@media (max-width: 700px) {

  .argos-map-context-sheet[data-snap="compact"] {
    width:
      calc(100vw - 58px) !important;
  }

}


@media (max-width: 430px) {

  .argos-map-context-sheet[data-snap="compact"] {
    width:
      calc(100vw - 50px) !important;
  }

}


/* ARGOS_MAP_VISUAL_RESTORE_V14 */


/* ==================================================================
   ARGOS MAP UI V1.5
   SEARCH TOGGLE + CONTROL CLEANUP
   ================================================================== */


/* ------------------------------------------------------------------
   SUCH-SHEET KOMPLETT AUSBLENDBAR
   ------------------------------------------------------------------ */

.argos-map-interaction-shell.search-hidden
.argos-map-context-sheet {
  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;

  transform:
    translateX(-50%)
    translateY(22px)
    scale(.97) !important;
}


.argos-map-interaction-shell.search-visible
.argos-map-context-sheet {
  opacity:
    1;

  visibility:
    visible;
}


/* ------------------------------------------------------------------
   WENN SUCHE AUS:
   Controls dürfen weit nach unten.
   ------------------------------------------------------------------ */

.argos-map-interaction-shell.search-hidden
.argos-map-shell-controls {
  bottom:
    14px !important;
}


/*
 * Bestehender GPS-/Re-Center-Button ist nicht
 * innerhalb der Shell erzeugt. Deshalb separat.
 */
#argosMapRoot:has(
  .argos-map-interaction-shell.search-hidden
)
.argos-gps-button {
  bottom:
    58px !important;
}


/* ------------------------------------------------------------------
   EINHEITLICHES KREISRASTER
   ------------------------------------------------------------------ */

.argos-map-shell-button,
.argos-gps-button {
  width:
    38px !important;

  height:
    38px !important;

  min-width:
    38px !important;

  min-height:
    38px !important;

  max-width:
    38px !important;

  max-height:
    38px !important;

  box-sizing:
    border-box;

  display:
    grid !important;

  place-items:
    center !important;

  padding:
    0 !important;

  margin:
    0 !important;

  border-radius:
    50% !important;
}


.argos-map-shell-controls {
  gap:
    7px;
}


.argos-map-shell-button {
  font-size:
    16px !important;
}


/* ------------------------------------------------------------------
   LUPE
   ------------------------------------------------------------------ */

.argos-map-search-toggle-button {
  font-size:
    21px !important;

  line-height:
    1 !important;
}


/* ------------------------------------------------------------------
   RE-CENTER EXAKT ZENTRIEREN
   ------------------------------------------------------------------ */

.argos-gps-button {
  align-items:
    center !important;

  justify-content:
    center !important;

  line-height:
    1 !important;
}


.argos-gps-button > * {
  margin:
    0 !important;

  padding:
    0 !important;

  transform:
    none !important;
}


/* ------------------------------------------------------------------
   VISUELLER KOMPASS
   ------------------------------------------------------------------ */

.argos-map-compass-button {
  position:
    relative;

  overflow:
    hidden;

  font-size:
    0 !important;
}


.argos-map-compass-face {
  position:
    relative;

  display:
    block;

  width:
    20px;

  height:
    20px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(
      46,
      57,
      66,
      .20
    );

  border-radius:
    50%;

  background:
    rgba(
      255,
      255,
      255,
      .56
    );

  transition:
    transform
    80ms
    linear;
}


.argos-map-compass-north,
.argos-map-compass-south {
  position:
    absolute;

  left:
    50%;

  width:
    0;

  height:
    0;

  transform:
    translateX(-50%);
}


.argos-map-compass-north {
  top:
    2px;

  border-left:
    3.5px
    solid
    transparent;

  border-right:
    3.5px
    solid
    transparent;

  border-bottom:
    7px
    solid
    #d94b43;
}


.argos-map-compass-south {
  bottom:
    2px;

  border-left:
    3.5px
    solid
    transparent;

  border-right:
    3.5px
    solid
    transparent;

  border-top:
    7px
    solid
    #70767b;
}


/* ------------------------------------------------------------------
   COMPACT SUCHINSEL NOCH ETWAS TIEFER UND KLEINER
   ------------------------------------------------------------------ */

.argos-map-context-sheet[data-snap="compact"] {
  bottom:
    calc(
      4px
      + env(
          safe-area-inset-bottom,
          0px
        )
    ) !important;

  height:
    66px !important;

  width:
    min(
      470px,
      calc(
        100vw
        - 50px
      )
    ) !important;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-content {
  padding:
    0
    5px
    5px !important;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-handle-area {
  flex:
    0
    0
    11px !important;

  min-height:
    11px !important;

  padding:
    0 !important;
}


/*
 * Der sichtbare Griff darf klein bleiben.
 */
.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-handle {
  width:
    27px !important;

  height:
    3px !important;

  margin-top:
    2px !important;
}


/*
 * Der tatsächliche Griffbereich bleibt groß.
 */
.argos-map-context-sheet[data-snap="compact"]
.argos-map-sheet-handle-area::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  top:
    -10px;

  height:
    42px;

  touch-action:
    none;
}


/* ------------------------------------------------------------------
   SUCHFELD FLACHER
   ------------------------------------------------------------------ */

.argos-map-context-sheet[data-snap="compact"]
.argos-place-search-field {
  height:
    38px !important;

  min-height:
    38px !important;

  padding:
    0
    10px !important;

  border-radius:
    13px !important;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-place-search input {
  height:
    36px !important;

  font-size:
    14px !important;
}


.argos-map-context-sheet[data-snap="compact"]
.argos-place-search-icon {
  font-size:
    18px !important;
}


/* ------------------------------------------------------------------
   BOOT / FAVORITEN QUICK BUTTON
   ------------------------------------------------------------------ */

.argos-map-context-sheet[data-snap="compact"]
.argos-map-compact-quick {
  width:
    38px !important;

  height:
    38px !important;

  font-size:
    17px !important;
}


/* ------------------------------------------------------------------
   MAPLIBRE NATIVE CONTROLS –
   ZUSÄTZLICH PER CSS ABSICHERN
   ------------------------------------------------------------------ */

.maplibregl-ctrl-zoom-in,
.maplibregl-ctrl-zoom-out,
.maplibregl-ctrl-compass {
  display:
    none !important;
}


/* ------------------------------------------------------------------
   PHONE
   ------------------------------------------------------------------ */

@media (
  max-width: 430px
) {

  .argos-map-context-sheet[data-snap="compact"] {
    width:
      calc(
        100vw
        - 44px
      ) !important;
  }


  .argos-map-shell-controls-left {
    left:
      10px !important;
  }


  .argos-map-shell-controls-right {
    right:
      10px !important;
  }

}


/* ARGOS_MAP_SEARCH_TOGGLE_CSS_V15 */