/* ===== Mobile (≤991px) ===== */
@media (max-width: 991px){

  /* Horizontaler Scroller ist .content – kein vertikales Scrollen */
  .content[data-scroller]{
    height: 100svh;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    position: relative;
    
    /* Transparenz hinzufügen */
    background-color: rgba(255, 255, 255, 0.7); /* Weiß mit 70% Transparenz */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Dünner Border mit leichtem Schatteneffekt */
  }

  /* Der einzig sichtbare horizontale Scroller sitzt direkt unter dem Plan */
  .stage-scroller[data-scroller]{
    display: block;
    width: 100%;
    overflow-x: auto;          /* nur horizontal */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    position: relative;        /* für Scrollbar-Track, ohne Layout zu ändern */
    scrollbar-gutter: stable both-edges; /* reserviert Leistenplatz (Safari/Chrome) */
    
    /* Transparenz hinzufügen */
    background-color: rgba(255, 255, 255, 0.7); /* Weiß mit 70% Transparenz */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Dünner Border mit leichtem Schatteneffekt */
  }

  /* Sichtbare horizontale Scrollbar NUR am Wrapper */
  .stage-scroller[data-scroller]{ --scrollbar-h: 12px; }
  .stage-scroller[data-scroller]::-webkit-scrollbar{ height: var(--scrollbar-h); }
  .stage-scroller[data-scroller]::-webkit-scrollbar-track{
    background: color-mix(in srgb, var(--ui-fill) 60%, transparent);
    border-radius: 999px;
  }
  .stage-scroller[data-scroller]::-webkit-scrollbar-thumb{
    background: var(--ui-stroke);
    border-radius: 999px;
    border: 2px solid var(--ui-fill);
  }
  .stage-scroller[data-scroller]::-webkit-scrollbar-thumb:hover{
    background: color-mix(in srgb, var(--ui-stroke) 85%, black 15%);
  }
  .stage-scroller[data-scroller]{
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--ui-stroke)
                     color-mix(in srgb, var(--ui-fill) 60%, transparent);
  }

  /* Stage bildet die natürliche Breite (= Bildbreite) → horizontaler Overflow */
  .stage{
    display:inline-block;
    width:max-content;
    height:var(--map-h);
  }

  .stage__canvas{
    position:relative;
    display:inline-block;
    height:100%;
    line-height:0;
  }

  /* Bild steuert die Breite, Höhe = 50svh */
  .stage__canvas > img{
    display:block;
    height:100%;           /* = 50svh */
    width:auto;            /* erzeugt horizontalen Overflow */
    max-width:none;
  }

  .all-poi{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:10;
  }

  /* Mobile: keine Auto-Textvergrößerung */
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

  /* Doppelte Sicherheit – identische Höhe */
  .stage{ --map-h: 50svh; height: var(--map-h); }
  .content[data-scroller]{ height: 50svh; }
  
  .stage__canvas .ski-gasti img {
    width: 35%;
  }
}