/* Felythera — Handy-/Mobile-Schicht.
   Wird als LETZTES geladen (main.php) und überschreibt gezielt. Desktop (>1024px) bleibt
   unberührt: ALLE Regeln stehen in @media-Blöcken bzw. gelten nur mobil sichtbare Extra-Elemente.
   Breakpoints: Handy ≤600px (volle Behandlung) · Tablet 601–1024px (Klapp-Menü, gestapelt).
   Rückrollbar: diese Datei + js/felythera-mobile.js entfernen und die Markup-Zeilen in
   main.php/player_bar.php zurücknehmen ⇒ exakter Desktop-Stand. */

/* ── Nur mobil sichtbare Extra-Elemente: auf dem Desktop komplett aus. ── */
#m-topbar, #m-nav-backdrop { display: none; }
.flyp-expand { display: none; }
/* Schubladen-Rahmen ist auf dem Desktop „durchsichtig": #nav fließt normal als
   waagerechte Kachelleiste, die Seiten-Navigation bleibt in den Inhaltsspalten. */
#m-drawer { display: contents; }
#m-nav-context { display: none; }

/* ============================================================
   TABLET & HANDY (≤1024px): Klapp-Menü, gestapelte Bereiche
   ============================================================ */
@media (max-width: 1024px) {
  /* Kein horizontales Überlaufen (Mixer-Scrollcontainer .flyp-strips bleibt ausgenommen). */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* ── Mobile-Kopfleiste (Brand + Hamburger) ── */
  #m-topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 9997;
    background: var(--topline-bg-color); color: var(--main-color);
    padding: .55rem .9rem; box-shadow: 0 4px 14px rgba(5,0,9,.6);
  }
  #m-topbar .m-brand { color: var(--main-color); text-decoration: none; font-weight: 700; font-size: 1.1rem; }
  #m-nav-toggle {
    background: none; border: none; color: var(--main-color);
    font-size: 1.4rem; padding: .3rem .5rem; cursor: pointer; line-height: 1;
  }

  /* ── #m-drawer → Off-Canvas-Schublade (enthält Hauptmenü + Seiten-Navigation) ── */
  #m-drawer {
    display: block;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 9998;
    width: min(86vw, 340px);
    background: var(--nav-bg-color);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(-100%); transition: transform .28s ease;
    box-shadow: 6px 0 26px rgba(0,0,0,.6);
    padding-bottom: 2rem;
  }
  body.m-nav-open #m-drawer { transform: none; }

  /* Hauptmenü (#nav) im Drawer: senkrechte Liste statt waagerechter Kacheln. */
  #m-drawer #nav {
    position: static; width: auto; margin: 0; box-shadow: none;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: .5rem 0;
  }
  #m-drawer #nav > a { flex: 0 0 auto; }
  #m-drawer #nav > a > div { width: 100%; padding: .9rem 1.2rem; }   /* große Tap-Ziele */
  #m-drawer #nav .main-menu, #m-drawer #nav .mnu-sub-text { white-space: normal; }

  /* Seiten-Navigation (per JS aus .left/.right hierher geklont; Deko-Bilder entfernt). */
  #m-nav-context { display: block; border-top: 1px solid rgba(255,255,255,.15); margin-top: .3rem; padding: .3rem 1.2rem 0; }
  #m-nav-context .left, #m-nav-context .right { display: block; padding: 0; margin: 0; }
  #m-nav-context ul, #m-nav-context li { padding: 0; margin: 0; list-style: none; }
  #m-nav-context h2 { font-size: 1rem; margin: .9rem 0 .3rem; }
  #m-nav-context li { padding: .55rem 0; }                 /* Tap-Ziele */
  #m-nav-context a { color: var(--main-color); text-decoration: none; }
  /* Akkordeon-Körper im Drawer immer offen zeigen (die Zieharmonik-Logik bleibt nutzbar). */
  #m-nav-context .menu-acc-head { padding: .3rem 0; }

  /* Inhalt: linke/rechte Spalte auf dem Handy ausblenden (Navigation lebt im Drawer),
     Grid-Wrapper einspaltig, dekorative Fußzeilen-Bilder weg. */
  #main .grid3Cols > .left, #main .grid3Cols > .right, #main .grid2Cols > .left, #main .grid2Cols > .right { display: none; }
  .grid3Cols, .grid2Cols { display: block; }
  #bottom #image, #bottom #diamont { display: none; }

  /* Abdunkelnder Hintergrund + Scroll-Sperre, solange offen.
     WICHTIG: Das Backdrop liegt über der ganzen Seite (inset:0) und würde sonst ALLE
     Klicks abfangen — deshalb NUR bei offenem Menü einblenden (an .m-nav-open gekoppelt,
     nicht per JS-`hidden`, das eine ID-Regel nicht überschreiben kann). */
  #m-nav-backdrop { display: none; position: fixed; inset: 0; z-index: 9996; background: rgba(0,0,0,.55); }
  body.m-nav-open #m-nav-backdrop { display: block; }
  body.m-nav-open { overflow: hidden; }

  /* ── Kopfzeile / Abstandshalter ── */
  #topline { grid-template-columns: 1fr auto; gap: .6rem; padding: .8rem 1rem; align-items: center; }
  #topline > div:nth-child(2) { display: none; }   /* leere Mittelspalte */
  #top { display: none; }                           /* leerer Abstandshalter */

  /* ── Inhalt ── (Grids sind oben bereits auf display:block gesetzt → einspaltig) */
  #main { padding: 1rem; }

  /* ── Fußzeile: 4 Spalten → gestapelt ── */
  #bottom { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.5rem 1rem; }
  #bottom > div { flex-basis: auto; max-width: 100%; }

  /* ── 3D-Schaubilder: Gesten dürfen die Seite nicht mitscrollen ── */
  #main canvas, #ftGL, #felyGL { touch-action: none; max-width: 100%; }
}

/* ============================================================
   HANDY (≤600px): Player kompakt/Sheet, Panels, Tabellen
   ============================================================ */
@media (max-width: 600px) {
  #main { padding: .8rem; }
  #topline { padding: .6rem .8rem; }
  #languages { flex-wrap: wrap; }

  /* ── Player: kompakte Leiste + ausklappbares Bottom-Sheet ── */
  #fly-spacer { height: 104px; }
  #fly-player {
    grid-template-columns: none;
    display: flex; flex-wrap: wrap; align-items: center;
    height: auto; gap: .35rem .6rem;
    padding: .5rem .7rem calc(.5rem + env(safe-area-inset-bottom, 0px));
    max-height: 88vh; overflow-y: auto;   /* ausgeklappt scrollbar */
  }

  /* Zeile 1: Cover + Titel + Aufklapp-Pfeil (Info bricht darunter um, verborgen bis expand). */
  .flyp-half-l { flex: 1 1 100%; flex-wrap: wrap; gap: .6rem; }
  .flyp-left   { flex: 1 1 auto; min-width: 0; }
  .flyp-art    { width: 44px; height: 44px; font-size: 1.1rem; }
  .flyp-expand {
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: #c9c9d4; font-size: 1.15rem;
    padding: .4rem .55rem; cursor: pointer; flex: none; transition: transform .2s;
  }
  #fly-player.m-expanded .flyp-expand { transform: rotate(180deg); }

  /* Zeile 2: Transport + Fortschritt immer sichtbar (Play/Pause, Prev, Next). */
  .flyp-center { order: 2; flex: 1 1 100%; max-width: none; }

  /* Info + rechte Icon-Leiste: nur ausgeklappt. */
  .flyp-info   { display: none; order: 3; flex: 1 1 100%; height: auto; margin: 0; justify-content: space-between; padding: .5rem .2rem; }
  .flyp-half-r { display: none; order: 4; flex: 1 1 100%; }
  #fly-player.m-expanded .flyp-info   { display: flex; }
  #fly-player.m-expanded .flyp-half-r { display: flex; }
  .flyp-right  { flex-wrap: wrap; justify-content: center; gap: 1.1rem; row-gap: 1.2rem; }
  .flyp-vol input[type=range] { width: 130px; }
  .flyp-collapse { top: -20px; }

  /* ── Schwebende Player-Panels → vollbreite Bottom-Sheets ── */
  .flyp-picker, .flyp-automenu, .flyp-musicmenu, .flyp-ttsmenu {
    left: .6rem; right: .6rem; width: auto;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    max-height: 60vh;
  }
  .flyp-picker { max-height: 62vh; }
  .flyp-mixer  { left: 0; right: 0; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); max-height: 70vh; overflow-y: auto; }
  .flyp-mixer-head { flex-wrap: wrap; gap: .5rem; }

  /* ── Tabellen: breite Tabellen horizontal scrollbar (Mixer-Strips = eigener Container) ── */
  #main table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #main input[type="checkbox"], #main input[type="radio"] { width: auto; display: inline-block; }

  /* ── Tap-Ziele ≥ 44px ── */
  #m-nav-toggle, .flyp-btn, .flyp-iconbtn, .flyp-expand, .flyp-collapse, #stp-reopen { min-width: 44px; min-height: 44px; }
  .flyp-play { width: 46px; height: 46px; }
}