/* InGlory-Ergänzung zur Parallelwelt-App (aufbereiten.py hängt sie an jede index.html, auch bei neuem ZIP).
   Mike 30.10.2026: „bei beiden mobilen Ansichten … die Navigation nicht steuern … das Menü läuft aus“ → zwei Zeilen.
   Die Leiste der App ist eine einzeilige Flex-Reihe (Vital Pro 496 px, Infinity ~430 px) und lief auf dem Handy links und rechts
   aus dem Bild. Klassennamen der App sind gehasht (_panel_xxxxx_1, _group_xxxxx_15) → Teilstring-Selektoren, Leiste per :has()
   von den Infopunkten (_panel_… ohne Knopfgruppe) unterschieden. Reihenfolge mobil: Übersicht zuerst, Demo zuletzt
   (die App reiht Demo … Übersicht von links nach rechts). Bildwinkel hochkant: aufbereiten.py, Schritt 5. */
#root div[class*="_group_"] > button { white-space: nowrap }  /* um 600 px brach „Vital Pro“ sonst zweizeilig um */
@media (max-width: 560px) {
  #root div[class*="_panel_"]:has(> div[class*="_group_"]) {
    width: min(calc(100% - 24px), 440px);
    bottom: 12px;
    padding: 8px;
  }
  #root div[class*="_panel_"] > div[class*="_group_"]:has(> button) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
  }
  /* mit Demo: Vital Pro 8 Knöpfe → 4 + 4, Infinity 7 → 4 + 3; ohne Demo (aufbereiten.py Schritt 6): 7 → 4 + 3, 6 → 3 + 3 */
  #root div[class*="_group_"]:has(> button:nth-child(7)) > button { flex-basis: calc((100% - 18px) / 4) }
  #root div[class*="_group_"] > button {
    flex: 0 0 calc((100% - 12px) / 3);
    min-width: 0;
    min-height: 44px;
    padding: 0 2px;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    touch-action: manipulation;
    order: 20;
  }
  #root div[class*="_group_"] > button:nth-last-child(1) { order: 1 }
  #root div[class*="_group_"] > button:nth-last-child(2) { order: 2 }
  #root div[class*="_group_"] > button:nth-last-child(3) { order: 3 }
  #root div[class*="_group_"] > button:nth-last-child(4) { order: 4 }
  #root div[class*="_group_"] > button:nth-last-child(5) { order: 5 }
  #root div[class*="_group_"] > button:nth-last-child(6) { order: 6 }
  #root div[class*="_group_"] > button:nth-last-child(7) { order: 7 }
  #root div[class*="_group_"] > button:nth-last-child(8) { order: 8 }
}
@media (max-width: 350px) {
  #root div[class*="_group_"] > button { font-size: 12px }
}