/* Handy hochkant, fuer beide Designs (nach style.css bzw. design1.css geladen) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overscroll-behavior: none; }

/* Finger statt Maus: groessere Tippflaechen */
@media (pointer: coarse) {
  .chip { min-height: 36px; padding-left: 12px; padding-right: 12px; }
  .view-btn, .help-btn { height: 36px; min-width: 36px; }
  .maplibregl-ctrl-group button { width: 40px; height: 40px; }
  .star { padding: 10px 4px 10px 10px; }
  .close { width: 44px; height: 44px; }
  .legend-toggle { min-height: 32px; }
  .line-btn .badge { padding-top: 5px; padding-bottom: 5px; }
}

/* Griff nur am Handy; am Desktop stand der ungestylte Knopf sonst als grauer Balken vor der Liniennummer */
.sheet-grip { display: none; }

@media (max-width: 640px) {
  /* Panel oben: kompakt, mit Abstand zur Notch */
  .panel { max-height: calc(45vh - env(safe-area-inset-top, 0px)); overflow: auto; overscroll-behavior: contain; }
  .stopsearch input { font-size: 16px; } /* verhindert Zoomen beim Antippen auf iOS */
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }

  /* Detailbereich als Bottom Sheet ueber die ganze Breite, Griff zum Vergroessern */
  .sheet, .sheet[data-kind="stop"], .sheet[data-kind="help"] {
    left: 0; right: 0; bottom: 0; top: auto; width: auto;
    max-height: 52%; max-height: 52dvh;
    padding: 22px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px));
    border-left: 0; border-right: 0; border-bottom: 0; overscroll-behavior: contain;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
  }
  .sheet.expanded { max-height: calc(100% - 24px - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px)); }
  .sheet-grip {
    display: block; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 88px; height: 22px;
    background: none; border: 0; padding: 0; cursor: grab; touch-action: none;
  }
  .sheet-grip::before {
    content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; transform: translateX(-50%);
    background: var(--muted); opacity: .55;
  }
  .sheet .close { top: 4px; right: 4px; }
  .sheet h2 { margin-top: 2px; }

  /* Wenn das Sheet offen ist, verdeckt es Legende und Version; Zoomknoepfe ruecken nicht darunter */
  body:has(.sheet:not([hidden])) .legend,
  body:has(.sheet:not([hidden])) .version,
  body:has(.sheet:not([hidden])) .legal,
  body:has(.sheet:not([hidden])) .maplibregl-ctrl-bottom-right { visibility: hidden; }

  /* 3D: Hinweistext unten links auf zwei Zeilen, antippen klappt auf */
  .legal {
    max-width: calc(100vw - 80px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    bottom: calc(var(--gap, 12px) + env(safe-area-inset-bottom, 0px));
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; cursor: pointer;
  }
  .legal.open { -webkit-line-clamp: unset; line-clamp: unset; }
  .maplibregl-ctrl-bottom-right { padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px); }
}

/* Design 2: harte Kanten, Griff als Balken */
html:not([data-design="1"]) .sheet-grip::before { background: var(--ink); opacity: .35; }

/* Design 1 auf dem Handy: Panel und Sheet kompakter, Sheet mit runden oberen Ecken */
@media (max-width: 640px) {
  html[data-design="1"] .panel { gap: 6px; padding: 10px 12px; }
  html[data-design="1"] .brand h1 { font-size: 1rem; }
  html[data-design="1"] .dot { width: 9px; height: 9px; }
  html[data-design="1"] .count { font-size: .9rem; }
  html[data-design="1"] .count strong { font-size: 1.35rem; }
  html[data-design="1"] .status { font-size: .78rem; }
  html[data-design="1"] .stopsearch { flex-direction: row; align-items: center; gap: 10px; }
  html[data-design="1"] .stopsearch input { flex: 1; min-width: 0; padding: 6px 10px; }
  html[data-design="1"] .sheet { border-radius: 16px 16px 0 0; }
  html[data-design="1"] .legal { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 6px; }
}