/* ══════════════════════════════════════════════════════════════════════════
   reskin-mobile.css — §RESKIN-MOBILE r1 (Cloder 2026-07-24)
   Bringt die nocturne-LAYOUT-Ebene auf das Handy. Hintergrund: reskin-startseite
   .css/.js bauen das neue Design NUR für body.app-desktop (JS via isDesktop()-
   Gate, CSS app-desktop-gescoped) — Mobile erbt bisher NUR die Farb-Token-Umbiegung,
   nicht das Layout. Diese Datei ist die app-phone-Entsprechung: eigenes, ZULETZT
   geladenes Add-on, gescoped body.app-phone, nutzt die GLOBALE --pc-*-Ebene.
   Ziele: (1) Startseite (Topbar/Suche/Segment/Hoster-Pillen/Kacheln) im neuen
   Design; (2) Seitenleiste = dauerhaft sichtbare Piktogramm-Schiene (eingeklappt
   nur Icons, ausgeklappt Icon+Text nebeneinander). Kein Deploy (BUG-13).
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1) SEITENLEISTE = dauerhafte Piktogramm-Schiene (statt versteckter Drawer) ═══ */
/* Basis-App: #sidebar ist translateX(-100%) (weggeschoben). Hier: immer sichtbar,
   64px schmale Schiene (nur Icons); Toggle klappt sie als Overlay auf 214px auf
   (Icon+Text). #content/#header rücken um die Schienenbreite nach rechts. */
body.app-phone #sidebar {
  transform: none !important;
  width: 64px !important;
  max-width: 64px !important;
  background: var(--pc-surface) !important;
  border-right: 1px solid var(--pc-border) !important;
  box-shadow: none !important;
  z-index: 260 !important;
  overflow: visible !important;
  padding: 56px 8px 10px !important;   /* padding-top hält die Icons unter dem Toggle frei */
}
/* Nav-Eintrag = Icon + Text NEBENEINANDER (Reihe), eingeklappt zentriert nur Icon. */
body.app-phone #sidebar .nav-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  height: 48px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  margin-bottom: 6px !important;
  color: var(--pc-muted) !important;
}
body.app-phone #sidebar .nav-item .nav-icon { margin-right: 0 !important; }
body.app-phone #sidebar .nav-label { display: none !important; }        /* eingeklappt: kein Text */
/* Logo im eingeklappten Zustand ausblenden (verhinderte Überlappung/Verschiebung mit
   dem Toggle); erscheint erst ausgeklappt. */
body.app-phone #sidebar-logo { display: none !important; }

/* AUSGEKLAPPT (Toggle): Schiene wird zum 214px-Overlay mit Text. */
body.app-phone.sidebar-mobile-open #sidebar {
  width: 214px !important;
  max-width: 84vw !important;
  z-index: 300 !important;
  box-shadow: 6px 0 30px rgba(0,0,0,.55) !important;
  padding: 56px 12px 10px !important;
}
/* Toggle bleibt oben-links (Basis schiebt ihn im offenen Zustand sonst auf die
   alte 264px-Drawer-Kante — höhere Spezifität, daher hier explizit zurückgeholt). */
body.app-phone.sidebar-mobile-open #sidebar-toggle { left: 12px !important; top: 10px !important; }
body.app-phone.sidebar-mobile-open #sidebar .nav-item {
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 0 14px !important;
}
body.app-phone.sidebar-mobile-open #sidebar .nav-item .nav-icon { margin-right: 0 !important; }
body.app-phone.sidebar-mobile-open #sidebar .nav-label {
  display: inline !important; font-size: 15px !important; font-weight: 600 !important;
}
body.app-phone.sidebar-mobile-open #sidebar-logo {
  display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 12px !important;
}
body.app-phone.sidebar-mobile-open #sidebar-logo .pc-brand-word,
body.app-phone.sidebar-mobile-open #sidebar-logo .brand-word { display: inline !important; }

/* Aktiv-Zustand: Akzent-Streifen + getönte Fläche (wie Mockup / reskin-fidelity). */
body.app-phone #sidebar .nav-item.active {
  background: var(--pc-active) !important;
  color: var(--pc-text) !important;
  box-shadow: inset 3px 0 0 var(--pc-accent) !important;
}
body.app-phone #sidebar .nav-item.active .nav-icon { color: var(--pc-text) !important; }

/* Inhalt + Kopf um die Schiene versetzen (Player-Overlay ist fixed inset:0 → unberührt). */
body.app-phone #content { margin-left: 64px !important; width: calc(100vw - 64px) !important; }
body.app-phone #header  { margin-left: 64px !important; padding-left: 14px !important; }
/* Scrim nur wenn ausgeklappt (Basis blendet ihn schon per sidebar-mobile-open ein). */
body.app-phone #sidebar-scrim { z-index: 280 !important; }
/* Bei aktivem Player die Schiene wegnehmen (Voll-Viewport-Video). */
body.app-phone.player-active #sidebar { display: none !important; }
body.app-phone.player-active #content { margin-left: 0 !important; width: 100vw !important; }

/* Toggle-Button: kompakter Icon-Button oben-links in der Schiene. Das breite
   „Einklappen"-Textlabel wird ausgeblendet (nur das Chevron-Icon bleibt) — es war
   die Ursache der Fehlpositionierung/Überlappung mit dem Logo. */
body.app-phone #sidebar-toggle {
  position: fixed !important; top: 12px !important; left: 12px !important;
  width: 40px !important; height: 40px !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  z-index: 310 !important;
  background: var(--pc-surface2) !important; color: var(--pc-text) !important;
  border: 1px solid var(--pc-border) !important; border-radius: 10px !important;
}
body.app-phone #sidebar-toggle .sidebar-toggle-label { display: none !important; }
body.app-phone #sidebar-toggle .sidebar-toggle-ic { margin: 0 !important; }

/* ═══ 2) TOPBAR (Kopfzeile) ═══════════════════════════════════════════════════ */
body.app-phone #header {
  background: var(--pc-surface) !important;
  border-bottom: 1px solid var(--pc-border) !important;
}
body.app-phone #search-bar {
  background: var(--pc-surface2) !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: 11px !important;
  color: var(--pc-muted) !important;
  box-shadow: none !important; animation: none !important;   /* Basis-Glow/Puls entfernen */
}
body.app-phone #header-actions { display: flex !important; align-items: center !important; gap: 12px !important; }

/* ═══ 3) SEGMENT „Alle | Live | Videos" ══════════════════════════════════════ */
body.app-phone #filter-tabs { display: flex !important; gap: 8px !important; flex-wrap: nowrap !important; }
body.app-phone #filter-tabs .filter-tab {
  border-radius: 999px !important;
  border: 1px solid var(--pc-border) !important;
  background: transparent !important;
  color: var(--pc-muted) !important;
  font-size: 14px !important; padding: 7px 16px !important;
}
body.app-phone #filter-tabs .filter-tab.active {
  background: var(--pc-accent) !important; color: #0a0c12 !important; border-color: var(--pc-accent) !important;
}

/* ═══ 4) HOSTER-PILLEN ════════════════════════════════════════════════════════
   2026-07-28: EINE waagerecht scrollbare Reihe statt Umbruch, und die Logos so
   groß wie am Desktop.

   (a) Umbruch war NICHT gewollt — das Mockup führt die Leiste als
       `.hl-chips{overflow-x:auto;scrollbar-width:none}` mit
       `.hl-chip{white-space:nowrap;flex:none}`, also einzeilig-scrollend.
       Mit größeren Logos hätte der Umbruch außerdem dauerhaft zwei Reihen
       Höhe direkt über dem Abschnittstitel gekostet.
   (b) Die Vergrößerung auf 24px hing an `body.app-desktop`
       (reskin-startseite.css:444 + 566-573), TV hat seine eigene Regel
       (reskin-tv.css:581) — fürs Handy gab es KEINE, es blieb auf der
       18px-Basis aus theme-classic.css:765. Gleiche Ursache wie bei
       UI-RESKIN-TV-V2: Aufwertung an der falschen Viewport-Klasse.
   ════════════════════════════════════════════════════════════════════════════ */
body.app-phone #session-platform-bar {
  display: flex !important; gap: 8px !important;
  flex-wrap: nowrap !important; overflow-x: auto !important;
  /* #1 MOBILE-BATCH 2026-07-31 (Twitch-Pille im Portrait verschluckt): harte
     Breitenbindung. Ohne max-width/min-width kann dieser Flex-/Block-Container so breit
     wie sein Inhalt werden und von einem overflow:hidden-Ancestor (relocated in die
     Section, s. reskin-mobile.css:694) geklippt werden — dann scrollt er NICHT selbst,
     und die letzte(n) Pille(n) (im Portrait zuerst Twitch) verschwinden statt erreichbar
     zu sein. min-width:0 löst die intrinsische Flex-Mindestbreite, max-width:100% hält
     ihn im Viewport → overflow-x:auto greift wirklich, alle Hoster sind per Wischen
     erreichbar. In Landscape passen alle ohne Scrollen (bisheriges Verhalten). */
  width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  /* 2px Luft, damit der 1px-Akzentring der aktiven Pille nicht am Rand des
     Scroll-Containers abgeschnitten wird (overflow-x:auto zwingt die Y-Achse
     mit auf „auto", visible ist dort nicht mehr möglich). */
  padding: 2px 0 !important;
  scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important;
}
body.app-phone #session-platform-bar::-webkit-scrollbar { display: none !important; }
body.app-phone #session-platform-bar .sc-bubble {
  flex: none !important; white-space: nowrap !important;
  display: inline-flex !important; align-items: center !important;
  background: var(--pc-surface) !important;
  border: 1.5px solid var(--pc-border) !important;
  color: var(--pc-text) !important;
  border-radius: 999px !important;
  padding: 6px 14px 6px 6px !important;
  font-size: 14px !important;
}
body.app-phone #session-platform-bar .sc-bubble.active {
  border-color: var(--pc-accent) !important;
  box-shadow: 0 0 0 1px var(--pc-accent) !important;
}

/* Hoster-Logo 18px → 24px, gleiche Größe wie am Desktop. Bewusst für ALLE
   Pillen-Leisten des Handys, nicht nur die Startseite: die 18px-Basis galt
   überall, der Lesbarkeitsmangel also auch. `contain` statt `cover`, damit
   keine Logokante abgeschnitten wird (entspricht reskin-startseite.css:574-580).
   Die einzeilige Scroll-Leiste oben bleibt bewusst auf #session-platform-bar
   beschränkt — das ist die gemeldete und hier nachgemessene Leiste. */
body.app-phone #session-platform-bar .sc-bubble .logo-slot-sm,
body.app-phone #shorts-bubbles .sc-bubble .logo-slot-sm,
body.app-phone #clips-bubbles .sc-bubble .logo-slot-sm,
body.app-phone #subs-bubbles .sc-bubble .logo-slot-sm,
body.app-phone #search-platform-pills .filter-pill .logo-slot-sm {
  width: 24px !important; height: 24px !important; border-radius: 6px !important;
  overflow: hidden !important; flex: none !important; margin-right: 9px !important;
}
body.app-phone #session-platform-bar .sc-bubble .logo-slot-sm img,
body.app-phone #shorts-bubbles .sc-bubble .logo-slot-sm img,
body.app-phone #clips-bubbles .sc-bubble .logo-slot-sm img,
body.app-phone #subs-bubbles .sc-bubble .logo-slot-sm img,
body.app-phone #search-platform-pills .filter-pill .logo-slot-sm img {
  width: 100% !important; height: 100% !important; object-fit: contain !important;
}

/* ═══ 5) SEKTIONS-TITEL + CONNECT-BANNER ═════════════════════════════════════ */
body.app-phone #section-home .section-title {
  color: var(--pc-text) !important; font-size: 19px !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  font-family: 'Segoe UI', system-ui, sans-serif !important;   /* kein Monospace/Versalien (Mockup: normale Schreibweise) */
}
body.app-phone #connect-banner {
  background: var(--pc-surface2) !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: 12px !important;
}

/* ═══ 6) KACHELN (Hosterfarben-Rahmen kommt aus der Basis; hier Meta-Feinschliff) ═══ */
body.app-phone #grid-home .card-title { color: var(--pc-text) !important; font-size: 14px !important; }
body.app-phone .video-card .card-creator,
body.app-phone .video-card .card-creator-name { color: var(--pc-muted) !important; font-size: 12.5px !important; }
body.app-phone .video-card .card-views,
body.app-phone .video-card .card-uploaded { color: var(--pc-muted) !important; font-size: 12px !important; }
body.app-phone .video-card .card-viewers-live { font-size: 12px !important; }   /* Live-Zahl bleibt Live-Farbe */

/* ═══ 7) EINSTELLUNGEN — Handy-Akkordeon (statt Drill-in / Seiten-Tabs) ═══════
   Tabbar bleibt als vertikale Header-Liste sichtbar; die getippte Sektion klappt
   INLINE darunter auf (reskin-settings-mobile.js schiebt #settings-content direkt
   hinter den aktiven Header). Überschreibt die Drill-in-Sichtbarkeit der Basis
   (theme-*.css: :not(.settings-phone-detail) #settings-content{display:none}). */
body.app-phone #section-settings.rsk-set-acc #settings-content {
  display: block !important; width: 100% !important; margin: 2px 0 8px !important;
}
body.app-phone #section-settings.rsk-set-acc .settings-tabbar {
  display: flex !important; flex-direction: column !important; gap: 8px !important;
}
body.app-phone #settings-back-btn { display: none !important; }   /* kein Drill-in-Zurück */
body.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab {
  width: 100% !important; box-sizing: border-box !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  text-align: left !important;
  background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important;
  color: var(--pc-text) !important; border-radius: 12px !important;
  padding: 15px 16px !important; font-size: 15px !important;
}
body.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab.active {
  background: var(--pc-active) !important;
  border-color: var(--pc-accent) !important;
  box-shadow: inset 3px 0 0 var(--pc-accent) !important;
}
/* Chevron rechts (auf/zu). */
body.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab::after {
  content: '▾' !important; margin-left: auto !important; color: var(--pc-muted) !important; font-size: 13px !important;
}
body.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab.active::after {
  content: '▴' !important; color: var(--pc-accent) !important;
}

/* ═══ 8) PROFIL-AVATAR oben rechts (Handy) — Basis-#header-actions hat nur die
       Glocke; das Desktop-Reskin baut den Avatar nur für Desktop. Hier fürs Handy
       (reskin-settings-mobile.js hängt #rsk-m-avatar in #header-actions ein). ═══ */
body.app-phone #rsk-m-avatar {
  width: 34px !important; height: 34px !important; flex: 0 0 auto !important;
  border-radius: 50% !important; border: none !important; cursor: pointer !important;
  /* BUG-AVATAR-IMPORTANT-BLOCKS-PHOTO: identisch zum Desktop-Fall in
     reskin-fidelity.css — der Verlauf ist nur der Fallback. Mit `!important`
     hat er das per Inline-Style gesetzte Profilfoto ueberstimmt
     (reskin-settings-mobile.js: `av.style.backgroundImage = url(...)`).
     Die Spezifitaet von `body.app-phone #rsk-m-avatar` (1,1,1) reicht ohne. */
  background: linear-gradient(135deg, var(--pc-accent), var(--pc-accent2));
  color: #04121f !important; font-weight: 800 !important; font-size: 15px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background-size: cover !important; background-position: center !important;
}

/* ═══ 9) Eingeklappte Schiene: Footer (Viewport-Umschalter, Rechtstexte, Version)
       ausblenden — erscheinen erst ausgeklappt. (User: „Impressum etc. soll beim
       Einklappen verschwinden.") ═══ */
body.app-phone #sidebar-viewport,
body.app-phone #sidebar-legal,
body.app-phone #sidebar-build { display: none !important; }
body.app-phone.sidebar-mobile-open #sidebar-viewport { display: flex !important; }
body.app-phone.sidebar-mobile-open #sidebar-legal { display: block !important; }
body.app-phone.sidebar-mobile-open #sidebar-build { display: block !important; }

/* ═══ 10) FEINSCHLIFF / KOMPAKTERE MOBILE-GRÖSSEN (User: „wirkt alles riesig,
       wenig Fläche"). Überschreibt frühere Werte (gleiche Spezifität, später). ═══ */
/* Schmalere Schiene → mehr Inhaltsbreite. */
body.app-phone #sidebar { width: 54px !important; max-width: 54px !important; padding: 50px 6px 8px !important; }
body.app-phone #content { margin-left: 54px !important; width: calc(100vw - 54px) !important; }
body.app-phone #header  { margin-left: 54px !important; padding: 8px 10px !important; }
body.app-phone #sidebar .nav-item { height: 42px !important; margin-bottom: 4px !important; }
body.app-phone #sidebar .nav-icon { width: 22px !important; height: 22px !important; }
/* Toggle: schlicht als Chevron-Icon in der Schiene (kein floatender Kasten mehr →
   „hängt im Nirvana" behoben). Transparente Fläche, mittig in der 54px-Schiene. */
body.app-phone #sidebar-toggle {
  top: 8px !important; left: 9px !important; width: 36px !important; height: 36px !important;
  border-radius: 9px !important;
  background: transparent !important; border: none !important; color: var(--pc-muted) !important;
}
body.app-phone.sidebar-mobile-open #sidebar-toggle { top: 8px !important; left: 9px !important; }

/* Suchleiste + Topbar kompakter. */
body.app-phone #search-bar { padding: 8px 12px !important; font-size: 13px !important; }
body.app-phone #header-actions { gap: 10px !important; }

/* Segment kleiner. */
body.app-phone #filter-tabs .filter-tab { font-size: 13px !important; padding: 6px 14px !important; }

/* Hoster-Pillen: dezente dunkle Pillen — KEIN pinker Voll-Glow mehr, auch nicht wenn
   „aktiv" (alle aktivierten Hoster sind aktiv → sonst alles pink). Aktiv = nur
   getönte Fläche + Akzent-Rand, Logo behält seine Hosterfarbe. */
body.app-phone #session-platform-bar { gap: 7px !important; }
body.app-phone #session-platform-bar .sc-bubble {
  background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important;
  color: var(--pc-text) !important; box-shadow: none !important; font-size: 13px !important;
  padding: 6px 13px !important;
}
/* „aktiv" = da ALLE aktivierten Hoster aktiv sind, dezent halten (nicht alles pink):
   neutrale dunkle Pille, nur das Logo trägt die Hosterfarbe. */
body.app-phone #session-platform-bar .sc-bubble.active {
  background: var(--pc-surface2) !important; border-color: var(--pc-border) !important;
  color: var(--pc-text) !important; box-shadow: none !important;
}

/* Sektions-Titel + Banner kompakter. */
body.app-phone #section-home .section-title,
body.app-phone .section .section-title { font-size: 17px !important; margin: 6px 0 10px !important; }
body.app-phone #connect-banner { padding: 12px !important; margin-bottom: 12px !important; }
body.app-phone #connect-banner .connect-banner-title,
body.app-phone #connect-banner b { font-size: 14px !important; }

/* Kacheln etwas kompakter. */
body.app-phone .video-grid { gap: 9px !important; }
body.app-phone #grid-home .card-title { font-size: 13.5px !important; line-height: 1.25 !important; }

/* Einstellungen: Username-Feld hatte volle Zeilen-Höhe (flex-stretch) → feste Höhe. */
body.app-phone .profile-name-input {
  height: 40px !important; align-self: center !important; flex: 1 1 auto !important;
  font-size: 14px !important; padding: 8px 12px !important;
}
body.app-phone .profile-name-row, body.app-phone #profile-card { align-items: center !important; }

/* ═══ 11) CYBERPUNK-NEON (nur Handy): Highlight=Gelb, Text=Türkis, Seiten-Streifen=
       Pink — statt flachem Magenta. Nur body.theme-cyberpunk.app-phone → Desktop/andere
       Themes unberührt. (User #5: „gelb mit türkiser Schrift und Pink an der Seite".) ═══ */
body.theme-cyberpunk.app-phone { --neon-yellow: #f2ff3a; --neon-turq: #00e0ff; --neon-pink: #ff3d9a; }

/* Nav aktiv (Schiene): gelbe getönte Fläche + Pink-Streifen + Türkis-Text/Icon. */
body.theme-cyberpunk.app-phone #sidebar .nav-item.active {
  background: rgba(242,255,58,0.14) !important;
  box-shadow: inset 3px 0 0 var(--neon-pink) !important;
  color: var(--neon-turq) !important;
}
body.theme-cyberpunk.app-phone #sidebar .nav-item.active .nav-icon { color: var(--neon-turq) !important; }

/* Segment „Alle" aktiv: gelbe Füllung, dunkler Text. */
body.theme-cyberpunk.app-phone #filter-tabs .filter-tab.active {
  background: var(--neon-yellow) !important; color: #14121a !important; border-color: var(--neon-yellow) !important;
}

/* Einstellungs-Akkordeon: aktiver Header = gleiche Sidebar-Optik (Gelb/Pink/Türkis). */
body.theme-cyberpunk.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab.active {
  background: rgba(242,255,58,0.14) !important;
  box-shadow: inset 3px 0 0 var(--neon-pink) !important;
  color: var(--neon-turq) !important; border-color: var(--neon-pink) !important;
}
body.theme-cyberpunk.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab.active::after { color: var(--neon-pink) !important; }

/* ═══ 12) FIXES Feedback-Runde 2 ══════════════════════════════════════════════ */

/* #5: #header liegt INNERHALB #content (hat schon margin-left) → eigener margin-left
   war doppelt und ließ oben-links eine Lücke. Zurücknehmen. */
body.app-phone #header { margin-left: 0 !important; padding-left: 12px !important; width: auto !important; }

/* #2/#1: Toggle = klar sichtbarer, erreichbarer Button. Eingeklappt in der Schiene
   (Chevron → rechts = aufklappen). Ausgeklappt an der RECHTEN Panel-Kante (Chevron →
   links = zuklappen), dreht sich. Etwas tiefer → besser erreichbar. */
body.app-phone #sidebar-toggle {
  top: 14px !important; left: 8px !important; width: 38px !important; height: 38px !important;
  background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important;
  color: var(--pc-text) !important; border-radius: 10px !important;
}
/* eingeklappt: Chevron zeigt nach rechts (›, aufklappen); ausgeklappt nach links
   (‹, zuklappen). Werte aus Render bestätigt. */
body.app-phone #sidebar-toggle .sidebar-toggle-ic {
  display: inline-flex !important; transform: rotate(0deg) !important; transition: transform .2s ease !important;
}
body.app-phone.sidebar-mobile-open #sidebar-toggle { left: 168px !important; top: 14px !important; }
body.app-phone.sidebar-mobile-open #sidebar-toggle .sidebar-toggle-ic { transform: rotate(180deg) !important; }

/* #4: Logo (ausgeklappt) darf nicht über die Schiene hinausragen. */
body.app-phone.sidebar-mobile-open #sidebar-logo { max-width: 188px !important; overflow: hidden !important; }
body.app-phone.sidebar-mobile-open #sidebar-logo .pc-brand-icon,
body.app-phone.sidebar-mobile-open #sidebar-logo > svg { width: 40px !important; height: auto !important; flex: 0 0 auto !important; }
body.app-phone.sidebar-mobile-open #sidebar-logo .pc-brand-word,
body.app-phone.sidebar-mobile-open #sidebar-logo .brand-word {
  font-size: 17px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important;
}

/* #3: Neon-Highlight kräftiger (nicht transparent-matschig): definierter gelber
   Rahmen + stärkere Fläche + Pink-Streifen + Türkis-Icon. */
body.theme-cyberpunk.app-phone #sidebar .nav-item.active {
  background: rgba(242,255,58,0.20) !important;
  border: 1px solid rgba(242,255,58,0.55) !important;
  box-shadow: inset 3px 0 0 var(--neon-pink) !important;
}

/* #7: Settings-Zeilen mit Titel + Control (S/M/L, Ecke etc.) auf Mobile STAPELN,
   damit der Titel nicht auf 1 Zeichen Breite zusammenbricht. */
body.app-phone #section-settings .settings-player-row {
  flex-direction: column !important; align-items: flex-start !important; gap: 10px !important;
}
body.app-phone #section-settings .settings-info-title,
body.app-phone #section-settings .settings-info-desc {
  word-break: normal !important; overflow-wrap: break-word !important; white-space: normal !important; min-width: 0 !important;
}
body.app-phone #section-settings .settings-info { flex-wrap: wrap !important; }
body.app-phone #section-settings.rsk-set-acc #settings-content,
body.app-phone #section-settings.rsk-set-acc #settings-content .settings-group { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }

/* #8: „Tastaturleiste" (Desktop-Bottom-Bar-Toggle) auf Mobile ausblenden — es gibt
   auf dem Handy keine Bottom-Bar. */
body.app-phone #kbd-bar-row { display: none !important; }

/* ═══ 13) FIXES Runde 3 — Abgleich an die Desktop-Referenz ════════════════════ */

/* Rail: kein großer Kopf-Freiraum mehr (Toggle sitzt jetzt mittig am Rand, s.u.). */
body.app-phone #sidebar { padding-top: 14px !important; }
body.app-phone.sidebar-mobile-open #sidebar { padding-top: 14px !important; }

/* TOGGLE = runder Chevron MITTIG am Seitenleisten-Rand (Handoff-Muster) — nicht mehr
   oben in der Ecke „aus dem Bild". Eingeklappt am Rail-Rand, ausgeklappt am Panel-Rand. */
body.app-phone #sidebar-toggle {
  position: fixed !important; top: 50% !important; left: 40px !important;
  transform: translateY(-50%) !important;
  width: 30px !important; height: 30px !important; padding: 0 !important;
  border-radius: 50% !important; z-index: 320 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--pc-surface2) !important; color: var(--pc-text) !important;
  border: 1px solid var(--pc-accent) !important;
}
body.app-phone.sidebar-mobile-open #sidebar-toggle { left: 200px !important; top: 50% !important; }
body.app-phone #sidebar-toggle .sidebar-toggle-ic svg { width: 18px !important; height: 18px !important; }

/* #3/#5: Sidebar-Aktiv = SOLIDES Neon-Gelb + dunkle Schrift/Icon (wie Desktop,
   kräftig statt transparent) + Pink-Streifen. */
body.theme-cyberpunk.app-phone #sidebar .nav-item.active {
  background: #f2ff3a !important; border: none !important;
  box-shadow: inset 4px 0 0 var(--neon-pink) !important; color: #14121a !important;
}
body.theme-cyberpunk.app-phone #sidebar .nav-item.active .nav-icon,
body.theme-cyberpunk.app-phone #sidebar .nav-item.active .nav-label { color: #14121a !important; }

/* #6: Segment „Alle" = Pink wie Desktop (nicht gelb). */
body.theme-cyberpunk.app-phone #filter-tabs .filter-tab.active {
  background: var(--pc-accent) !important; color: #14121a !important; border-color: var(--pc-accent) !important;
}
/* Einstellungs-Akkordeon aktiver Header bleibt Neon (Türkis-Text + Pink) — s. §11. */

/* #6-Player: aktive Options-Buttons (S/M/L, Ecken) waren schwarze Schrift auf Lila
   = unlesbar. Aktiv = Neon-Gelb + dunkle Schrift/Icon (lesbar, konsistent). */
body.theme-cyberpunk.app-phone #section-settings .pip-seg-btn.active,
body.theme-cyberpunk.app-phone #section-settings .settings-player-row .platform-btn.active,
body.theme-cyberpunk.app-phone #section-settings .pip-seg .platform-btn.active {
  background: #f2ff3a !important; color: #14121a !important; border-color: #f2ff3a !important;
}
body.theme-cyberpunk.app-phone #section-settings .pip-seg-btn.active svg,
body.theme-cyberpunk.app-phone #section-settings .settings-player-row .platform-btn.active svg { stroke: #14121a !important; }

/* Chevron-Richtung korrigiert (Render-bestätigt): eingeklappt › (aufklappen),
   ausgeklappt ‹ (zuklappen). */
body.app-phone #sidebar-toggle .sidebar-toggle-ic { transform: rotate(180deg) !important; }
body.app-phone.sidebar-mobile-open #sidebar-toggle .sidebar-toggle-ic { transform: rotate(0deg) !important; }

/* ═══ 14) EXAKTER MOCKUP-ABGLEICH (Komponenten-Referenz §13 Mobile) ═══════════ */

/* Schiene 48px (Mockup 44px); Icon exakt zentriert im aktiven Feld. */
body.app-phone #sidebar { width: 48px !important; max-width: 48px !important; padding: 12px 5px 10px !important; }
body.app-phone #content { margin-left: 48px !important; width: calc(100vw - 48px) !important; }
body.app-phone #sidebar .nav-item { width: 38px !important; margin-left: auto !important; margin-right: auto !important; justify-content: center !important; }
body.app-phone #sidebar .nav-item .nav-icon { margin: 0 auto !important; }
body.app-phone.sidebar-mobile-open #sidebar .nav-item { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; justify-content: flex-start !important; }

/* Toggle: Chevron deterministisch per scaleX — eingeklappt › (aufklappen, gespiegelt),
   ausgeklappt ‹ (zuklappen). Eingeklappt komplett auf der Schiene. */
body.app-phone #sidebar-toggle { left: 9px !important; }
body.app-phone.sidebar-mobile-open #sidebar-toggle { left: 200px !important; }
body.app-phone #sidebar-toggle .sidebar-toggle-ic { transform: scaleX(-1) !important; }
body.app-phone.sidebar-mobile-open #sidebar-toggle .sidebar-toggle-ic { transform: scaleX(1) !important; }

/* Kacheln wie Mockup: EINE Spalte, kräftiger hosterfarbener Rundrahmen um die GANZE
   Kachel, abgerundet. */
body.app-phone .video-grid,
body.app-phone #grid-home { grid-template-columns: 1fr !important; gap: 14px !important; }
body.app-phone .video-card {
  border: 2px solid var(--card-glow, var(--pc-border)) !important;
  border-radius: 16px !important; overflow: hidden !important;
}

/* ═══ 15) FIXES Runde 4 ═══════════════════════════════════════════════════════ */

/* #1: Ausgeklappt LINKSBÜNDIG. Die Icon-Zentrierung (margin:auto, für eingeklappt)
   schob Icon+Text nach rechts → ausgeklappt margin 0 + Gap rechts, flex-start. */
body.app-phone.sidebar-mobile-open #sidebar .nav-item { justify-content: flex-start !important; text-align: left !important; }
body.app-phone.sidebar-mobile-open #sidebar .nav-item .nav-icon { margin: 0 12px 0 0 !important; }

/* #4: Toggle-Pfeil — die THEME-CSS transformiert das SVG selbst (…​sidebar-toggle-ic
   svg, theme-*.css:6656/6660). Deshalb HIER das SVG überschreiben, invers zum Default:
   eingeklappt › (aufklappen), ausgeklappt ‹ (zuklappen). */
body.app-phone #sidebar-toggle .sidebar-toggle-ic svg { transform: rotate(180deg) !important; }
body.app-phone.sidebar-mobile-open #sidebar-toggle .sidebar-toggle-ic svg { transform: rotate(0deg) !important; }

/* #2: Hoster-Pillen wie Desktop-Vorlage = abgerundetes RECHTECK (nicht vollrund). */
body.app-phone #session-platform-bar .sc-bubble { border-radius: 12px !important; padding: 8px 14px !important; }

/* #3: Einstellungs-Akkordeon aktiver Header = SOLIDES Neon-Gelb + dunkle Schrift
   (identisch zur Seitenleiste), kein transparentes Gelb/Türkis mehr. */
body.theme-cyberpunk.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab.active {
  background: #f2ff3a !important; color: #14121a !important;
  border-color: #f2ff3a !important; box-shadow: inset 4px 0 0 var(--neon-pink) !important;
}
body.theme-cyberpunk.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab.active::after { color: #14121a !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §16) HANDY-NAVIGATION = BOTTOM-BAR (ersetzt die Piktogramm-Seitenleiste)
   Mockup publicore-reskin-preview-mobile_1.html: feste Bottom-Nav mit 5 Tabs
   (Home/Trends/Shorts/Abos/Mehr); "Mehr" = Bottom-Sheet. Die Seitenleiste bleibt
   im DOM (Delegationsziel für reskin-mobile-bottomnav.js), wird aber komplett
   ausgeblendet. Damit sind §1/§9–§14 (Schienen-Layout) im Handy gegenstandslos —
   Aufräum-Folgeticket, hier bewusst nicht gelöscht (Risiko/Diff-Klarheit).
   ══════════════════════════════════════════════════════════════════════════ */

/* Seitenleiste + Toggle + Scrim im Handy komplett aus. */
body.app-phone #sidebar,
body.app-phone.sidebar-mobile-open #sidebar,
body.app-phone #sidebar-toggle,
body.app-phone #sidebar-scrim { display: none !important; }

/* Inhalt/Kopf volle Breite; unten Platz für die Bar (Safe-Area beachtet). */
body.app-phone #content {
  margin-left: 0 !important; width: 100vw !important;
  padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
}
body.app-phone #header { margin-left: 0 !important; }
/* Bei FORMATFÜLLENDEM Player übernimmt das Voll-Viewport-Video → kein Bottom-Padding nötig.
   #2 MOBILE-BATCH 2026-07-31: im Mini/PiP-Zustand (body.player-mini) bleibt die Bottom-Nav
   sichtbar → der Inhalt braucht sein Padding wieder, sonst rutscht er hinter die Bar. */
body.app-phone.player-active:not(.player-mini) #content { padding-bottom: 0 !important; }

/* Basis: unsichtbar (Desktop/TV bekommen die Bar nie zu sehen). */
#pc-bottom-nav { display: none; }
#pc-mehr-overlay { display: none; }

/* ── Bottom-Bar (nur Handy) ── */
body.app-phone #pc-bottom-nav {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 240;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--pc-surface); border-top: 1px solid var(--pc-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.28);
}
/* #2 MOBILE-BATCH 2026-07-31: Bottom-Nav NUR beim formatfüllenden Player ausblenden.
   Im Mini/PiP-Zustand (body.player-mini, gesetzt in player.js minimize()) bleibt die
   Haupt-Navigation sichtbar — analog zum Desktop-N1/N3-Fix (Chrome nur weg, wenn der
   Player über allem liegt, nicht im kleinen Zustand). */
body.app-phone.player-active:not(.player-mini) #pc-bottom-nav { display: none !important; }
body.app-phone #pc-bottom-nav .pc-bn-item {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  padding: 8px 2px 6px; background: none; border: none; cursor: pointer;
  color: var(--pc-muted); font-family: inherit; font-size: 10.5px; font-weight: 600;
  transition: color .12s ease;
}
body.app-phone #pc-bottom-nav .pc-bn-item svg { width: 23px; height: 23px; flex: none; }
body.app-phone #pc-bottom-nav .pc-bn-item span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1;
}
body.app-phone #pc-bottom-nav .pc-bn-item.active { color: var(--pc-accent); }
body.theme-cyberpunk.app-phone #pc-bottom-nav .pc-bn-item.active { color: var(--neon-turq, var(--pc-accent)); }

/* ── "Mehr"-Bottom-Sheet ── */
body.app-phone #pc-mehr-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.5); align-items: flex-end;
}
body.app-phone #pc-mehr-overlay.vis { display: flex; }
body.app-phone #pc-mehr-sheet {
  width: 100%; background: var(--pc-surface); border-radius: 18px 18px 0 0;
  padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 44px rgba(0,0,0,.5);
  animation: pcMehrUp .18s ease;
}
@keyframes pcMehrUp { from { transform: translateY(28px); opacity: .3; } to { transform: none; opacity: 1; } }
body.app-phone .pc-mehr-handle { width: 38px; height: 4px; border-radius: 2px; background: var(--pc-border); margin: 10px auto 4px; }
body.app-phone .pc-mehr-konto {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 14px;
  border-bottom: 1px solid var(--pc-border); cursor: pointer;
}
body.app-phone .pc-mehr-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; color: #04121f;
  background: linear-gradient(135deg, var(--pc-accent), var(--pc-accent2, var(--pc-accent)));
  background-size: cover; background-position: center;
}
body.app-phone .pc-mehr-konto-info { flex: 1; min-width: 0; }
body.app-phone .pc-mehr-konto-name { font-size: 15px; font-weight: 700; color: var(--pc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-phone .pc-mehr-konto-sub { font-size: 12px; color: var(--pc-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-phone .pc-mehr-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; }
body.app-phone .pc-mehr-row:active { background: var(--pc-active); }
body.app-phone .pc-mehr-row svg { width: 20px; height: 20px; flex: none; color: var(--pc-muted); }
body.app-phone .pc-mehr-row-label { font-size: 14px; font-weight: 600; color: var(--pc-text); }
body.app-phone .pc-mehr-divider { height: 1px; background: var(--pc-border); margin: 4px 0; }
body.app-phone .pc-mehr-footer { text-align: center; font-size: 10.5px; color: var(--pc-muted); padding: 12px 18px 0; }

/* ══════════════════════════════════════════════════════════════════════════
   §17) PROFIL-KARTE auf dem Handy VERTIKAL stapeln (Avatar oben, Felder darunter)
   statt gequetschter Zwei-Spalten-Row (Feedback: „unter Profil schlecht formatiert").
   ══════════════════════════════════════════════════════════════════════════ */
body.app-phone #profile-card,
body.app-phone #section-settings .settings-info.profile-card {
  flex-direction: column !important; align-items: stretch !important; gap: 14px !important;
}
body.app-phone #profile-card .profile-name-row { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
body.app-phone #profile-card .profile-name-input { width: 100% !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §18) TOPBAR = EINE Zeile (Mockup mobile_1, `.hl-bar`): Suchfeld · Glocke ·
   Profil nebeneinander. Kein Umbruch, kein Logo in der Leiste.

   ACHTUNG — Richtungswechsel, bitte nicht „zurückreparieren":
   Bis 2026-07-28 lag die Suche BEWUSST in einer zweiten Zeile (damalige Vorgabe:
   „Top-Bar darf eine Such-Leiste quer drüber haben statt Einzel-Button"). Der
   User hat das am 2026-07-28 am eigenen Gerät verworfen und ausdrücklich EINE
   Zeile gefordert. Das Mockup stützt das: `.hl-bar` ist ein einzeiliger Flex mit
   `.hl-bar-search{flex:1}` + Glocken-Icon + `.hl-avatar` — und OHNE Logo.
   Deshalb ist #pc-m-brand hier ausgeblendet (siehe unten).
   ══════════════════════════════════════════════════════════════════════════ */
body.app-phone #header .header-row-top { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; }
body.app-phone #header .header-row-bottom { display: none !important; }

/* Die Suche nimmt den freien Platz. `min-width:0` ist ZWINGEND und nicht kosmetisch:
   ein Flex-Element schrumpft ohne das nie unter seine intrinsische Mindestbreite —
   das <input> (17px Schrift, theme-classic) hätte die Zeile sonst genau wieder
   umbrechen lassen, also den Defekt reproduziert. Gilt für Feld UND Eingabe. */
body.app-phone #search-bar {
  order: 1 !important; flex: 1 1 auto !important; min-width: 0 !important;
  width: auto !important; margin: 0 !important;
  box-shadow: none !important; animation: none !important;
}
body.app-phone #search-bar #search-input { min-width: 0 !important; }

/* Glocke + Profil rechts: feste Größe, schrumpfen nie (sonst würde die Suche sie
   zerdrücken statt selbst nachzugeben). #notif-panel darin ist position:absolute
   und damit außerhalb des Flex-Flusses — es bleibt unberührt. */
body.app-phone #header-actions {
  order: 2 !important; flex: 0 0 auto !important; margin-left: 0 !important;
}
/* Desktop-Reste aus #header-actions fernhalten. Beide entstehen auf einem echten
   Handy nie (reskin-startseite.js baut sie hinter `if (!isDesktop()) return;`),
   bleiben aber stehen, sobald jemand über „Desktop Ansicht" umschaltet und
   zurückgeht — ein Weg, den das „Mehr"-Sheet ausdrücklich anbietet.
   Gemessen: die Theme-Swatches (~136px) drückten das Suchfeld auf 26px, und der
   Desktop-Avatar stand als ZWEITER Profil-Chip neben #rsk-m-avatar.
   #rsk-m-avatar ist der Chip des Handys und bleibt sichtbar. */
body.app-phone #rsk-topbar-extra,
body.app-phone #rsk-avatar { display: none !important; }

/* Der Profil-Chip am Handy ist #rsk-m-avatar (gebaut von reskin-settings-mobile.js,
   eigene Regeln weiter unten in dieser Datei) — er hat NIE gefehlt. Hier steht
   deshalb keine eigene Avatar-Regel. #rsk-avatar ist die Desktop/TV-Variante und
   entsteht am Handy gar nicht. */

/* Kein Logo in der Topbar (Mockup + User-Vorgabe). Die Regel ist eine Absicherung:
   reskin-mobile-bottomnav.js baut #pc-m-brand seit r2 gar nicht mehr — käme über
   einen alten Cache-Stand doch eines an, kostet es hier keine Zeilenbreite. */
body.app-phone #pc-m-brand { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §19) STARTSEITE-ANORDNUNG nach Mockup: Hoster-Pillen ÜBER den Abschnittstitel
   „Jetzt live & Videos" (User: „die Hoster-Pillen darüber … sieht cleaner aus").
   UI-MOBILE-BEFUNDE-2026-07-28 (M1): auf Trends/Abos verschiebt App.placeFilterTabs()
   #filter-tabs/#session-platform-bar GENAUSO in den jeweiligen Abschnitt, bislang
   griff das explizite Flex-Layout unten aber NUR für #section-home — Trends/Abos
   liefen nur über die impliziten Block-Stapel-Defaults der Basis-.section-Regel.
   Eine Seite ohne definiertes Layout ist genau die Art Lücke, die später (anderer
   Font-Metrik, mehr Pillen, Theme-Wechsel) in eine echte Überlappung kippen kann —
   deshalb hier auf alle drei filterbaren Seiten verallgemeinert (identisches Layout,
   eine Fix-Stelle statt drei). Zusätzlich `position:static` als Absicherung gegen
   die Desktop-Regel (reskin-startseite.css: body.app-desktop #section-home
   #filter-tabs{position:absolute}), die per Konstruktion (App.IS_DESKTOP = IS_BROWSER
   && !IS_PHONE) auf einem echten Handy nie zusammen mit body.app-phone stehen kann,
   aber keine eigene Absicherung hatte. ══════════════════════════════════════════ */
/* NUR wenn aktiv! Ohne .active überschrieb display:flex das Basis-.section:not(.active)
   {display:none} → Startseite klebte unter JEDER anderen Kategorie (Regression-Fix).
   flex-wrap + Basis-Breiten legen Pillen (volle Zeile) über Titel+Segment (eine Zeile)
   über das Grid — OHNE #filter-tabs zu reparenten (App verschiebt es selbst). */
body.app-phone #section-home.active,
body.app-phone #section-trending.active,
body.app-phone #section-subscriptions.active { display: flex !important; flex-wrap: wrap !important; align-items: center !important; }
body.app-phone #section-home.active > *,
body.app-phone #section-trending.active > *,
body.app-phone #section-subscriptions.active > * { flex: 1 1 100% !important; min-width: 0 !important; }
body.app-phone #section-home.active > #session-platform-bar,
body.app-phone #section-trending.active > #session-platform-bar,
body.app-phone #section-subscriptions.active > #session-platform-bar { order: -1 !important; margin: 2px 0 8px !important; position: static !important; }
body.app-phone #section-home.active > .section-title,
body.app-phone #section-trending.active > .section-title,
body.app-phone #section-subscriptions.active > .section-title { flex: 1 1 auto !important; margin: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* #filter-tabs = Segment-Bubble mit Innen-Highlight (an Ort und Stelle, neben dem
   Titel dank flex-wrap). Gruppen/Kalender auf dem Handy aus (Mockup zeigt nur 3). */
body.app-phone #section-home.active > #filter-tabs,
body.app-phone #section-trending.active > #filter-tabs,
body.app-phone #section-subscriptions.active > #filter-tabs {
  flex: 0 0 auto !important; display: inline-flex !important; gap: 2px !important; padding: 3px !important; margin: 0 !important;
  background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important; border-radius: 10px !important;
  position: static !important;
}
body.app-phone #filter-tabs .filter-tab {
  border: none !important; background: transparent !important; border-radius: 7px !important;
  padding: 5px 11px !important; font-size: 12.5px !important; color: var(--pc-muted) !important; box-shadow: none !important;
}
body.app-phone #filter-tabs .filter-tab.active { background: var(--pc-accent) !important; color: #07080d !important; }
body.theme-cyberpunk.app-phone #filter-tabs .filter-tab.active { color: #14121a !important; }
body.app-phone #filter-tabs .filter-tab[data-filter="groups"],
body.app-phone #filter-tabs .filter-tab[data-filter="calendar"] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §21) SUCHE-Seite im neuen Stil: Hoster-Pillen = abgerundetes Rechteck (nicht
   vollrund) + Alle/Live/Videos/Clips als Segment-Bubble (User-Feedback).
   ══════════════════════════════════════════════════════════════════════════ */
body.app-phone #section-search .filter-pill {
  border-radius: 12px !important; background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important;
  color: var(--pc-text) !important; box-shadow: none !important; font-size: 13px !important; padding: 6px 13px !important;
}
body.app-phone #section-search .filter-pill.active { border-color: var(--pc-accent) !important; box-shadow: 0 0 0 1px var(--pc-accent) !important; }
/* Alle/Live/Videos/Clips auf der Suche (#search-filter-tabs) als Segment-Bubble. */
body.app-phone #search-filter-tabs {
  display: inline-flex !important; gap: 2px !important; padding: 3px !important; width: auto !important;
  background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important; border-radius: 10px !important;
}
body.app-phone #search-filter-tabs .filter-tab {
  border: none !important; background: transparent !important; border-radius: 7px !important;
  padding: 5px 11px !important; font-size: 12.5px !important; color: var(--pc-muted) !important; box-shadow: none !important;
}
body.app-phone #search-filter-tabs .filter-tab.active { background: var(--pc-accent) !important; color: #07080d !important; }
body.theme-cyberpunk.app-phone #search-filter-tabs .filter-tab.active { color: #14121a !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §20) KACHEL-RASTER = 2 SPALTEN wie Mockup_1 (User-Entscheidung 2026-07-24 —
   überschreibt die frühere 1-Spalten-Vorgabe aus §14). Kompaktere Meta fürs
   2-spaltige Layout; hosterfarbener Rahmen bleibt, nur dünner/enger radius.
   ══════════════════════════════════════════════════════════════════════════ */
body.app-phone .video-grid,
body.app-phone #grid-home { grid-template-columns: 1fr 1fr !important; gap: 14px 10px !important; }
body.app-phone .video-card { border-width: 1.5px !important; border-radius: 12px !important; }
/* BUG-DEVICE-CLASS-REGRESSION R2 / Zusatz 2: Kacheltext am Handy war zu klein.
   Meta (Creator, Views/Viewer, Zeit) rückt auf die BISHERIGE Titelgröße (12.5px),
   der Titel eine Stufe größer (15px) → klare Hierarchie, besser lesbar. Nur
   app-phone; Desktop/TV bleiben unberührt (eigene, hier nicht angefasste Regeln). */
body.app-phone #grid-home .card-title,
body.app-phone .video-card .card-title { font-size: 15px !important; line-height: 1.3 !important; }
body.app-phone .video-card .card-creator,
body.app-phone .video-card .card-creator-name { font-size: 12.5px !important; }
body.app-phone .video-card .card-views,
body.app-phone .video-card .card-uploaded { font-size: 12.5px !important; }

/* ═══ 16) BOTTOM-DOCK auf dem Handy ausblenden ═══
   .pc-hoster-dock („Quick-Select-Micro-Dock", TV/Handy) wird von pages/hoster-priority.js
   ZUR LAUFZEIT gebaut/eingeblendet und in ALLEN drei Theme-CSS mit z-index 2147483200
   (fast Maximalwert) fix am unteren Rand gehalten → es legt sich über das geöffnete
   Menü. Frühere Entfern-Versuche scheiterten, weil (a) das JS das Element neu baut und
   (b) das CSS pro Theme dreifach existiert. Diese eine app-phone-Regel (zuletzt geladen)
   schlägt beide: display:none überstimmt den JS-Rebuild UND alle drei Theme-Regeln. Der
   Hoster-Wechsel läuft auf dem Handy ohnehin über die Hoster-Pillen. */
body.app-phone .pc-hoster-dock,
body.app-phone #pc-hoster-dock { display: none !important; }

/* ═══ #11 MOBILE-BATCH 2026-07-31 — UI-TILE-META: Creator einzeilig + größer ═══
   Der Creator-Name brach bei langen Namen in eine zweite Zeile (Icon oben, Name
   darunter) und überschnitt sich mit dem Hoster-Icon/Meta. Regel: Icon UND Name in
   EINER Zeile, zu lang → Ellipsis. Creator-Name und die Meta-Texte (Views/Zuschauer/
   Uploadzeit) dürfen größer werden — der Platz ist da. Als letzter Block der Datei
   (Override-Stapel) schlägt er die 12.5px-Regeln bei reskin-mobile.css:217/762. */
body.app-phone .video-card .card-creator {
  display: flex !important; flex-wrap: nowrap !important;
  align-items: center !important; gap: 6px !important;
  min-width: 0 !important; max-width: 100% !important;
}
body.app-phone .video-card .card-creator .card-platform-icon { flex: none !important; }
body.app-phone .video-card .card-creator-name {
  flex: 1 1 auto !important; min-width: 0 !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  font-size: 14.5px !important; line-height: 1.25 !important;
}
/* Meta-Zeile (VOD + Live) etwas größer — gleiche Größenordnung wie der Creator. */
body.app-phone .video-card .card-views,
body.app-phone .video-card .card-uploaded,
body.app-phone .video-card .card-viewers-count,
body.app-phone .video-card .card-viewers-label,
body.app-phone .video-card .card-live-uptime { font-size: 13px !important; }

/* ═══════════ MOBILE-BATCH-2 (2026-07-31) — am echten DOM verifiziert ═══════════ */

/* #1 SCHWARZER BALKEN OBEN: `#player-chat` trug `.hidden`, blieb aber computed
   display:block (h150, bg #000) und saß ÜBER dem Video (Chat top≈12, Video top≈214).
   Grund: `body.app-tv #player-chat.hidden{display:none}` (reskin-tv.css:865) existiert,
   aber KEINE app-phone-Entsprechung; die mobilen theme-Regeln setzen nur bg/padding und
   ueberschreiben per Spezifitaet das `.hidden`. DOM-Beleg: nach Fix rueckt das Video-iframe
   von top~214 auf ~64 (knapp unter Header), #player-chat computed display=none. */
body.app-phone #player-chat.hidden,
body.app-phone #player-overlay #player-chat.hidden { display: none !important; }

/* #5 HOSTER-NAME UEBERDECKT CREATOR (Portrait): im Player-Info-Block liegt neben dem
   Hoster-ICON (`img.pd-plat-ic`) zusaetzlich der Hoster-NAME als Text
   (`a.pd-plat-link`, „YouTube") und ueberlappt `#pd-creator-name` (Text left 70 vs.
   Creator left 82). Nur den NAMEN-Text ausblenden, das Icon bleibt. DOM-Beleg: danach
   rueckt der Creator-Name auf left~32 (w 206→255), keine Ueberlappung mehr. */
body.app-phone #pd-sub-metrics-inline .pd-plat-link { display: none !important; }
/* CLAUDIT-FUND #5a (Deploy-Gate, am echten DOM gemessen): „das Icon bleibt" traf NICHT zu.
   `img.pd-plat-ic` hat auf app-phone KEINE eigene Groesse — die Desktop-Regel
   `body.app-desktop #pd-sub-metrics-inline .pd-plat-ic{width:15px;height:15px}`
   (reskin-startseite.css:1369) hat kein app-phone-Gegenstueck, exakt dieselbe Luecken-
   klasse wie bei #4. Das Bild bezog seine Box daher aus der Flex-Zeile, die ihre Breite
   wiederum aus dem NAMEN-Text zog: Twitch-Live gemessen 37.7×44, YouTube-VOD 49.6×34.9
   (schon vorher verzerrt). Sobald #5 den Namen ausblendet — und keine `.pd-plat-subs`
   danebensteht, was bei beiden Testkarten der Fall war — kollabiert die Zeile auf 0 und
   das Logo mit ihr: gemessen 0×0, die Hoster-Kennzeichnung verschwand komplett aus dem
   Player-Info-Block. Explizite Groesse haelt sie unabhaengig vom Textinhalt.
   DOM-Beleg (nachher): Icon 18×18 bei left 20…38, `#pd-creator-name` left 50 — Kante des
   Icons (38) < Creator-Start (50), also weiterhin keine Ueberlappung. Portrait 375×812
   UND Landscape 812×375 geprueft. */
body.app-phone #pd-sub-metrics-inline .pd-plat-ic {
  width: 18px !important; height: 18px !important; flex: 0 0 18px !important;
  object-fit: contain !important; border-radius: 3px !important;
}

/* #4 LIKE/DISLIKE-PIKTOGRAMME: die SVG-Daumen SIND im DOM (`.pd-react-ic > svg.pd-react-svg`),
   aber computed w:0/h:0 → unsichtbar (die „nackten Zaehl-Pillen"). KEIN fehlendes Icon,
   sondern fehlende Groesse auf app-phone. Explizite Groesse setzen. DOM-Beleg: nach Fix
   rendern like/dislike-SVG mit 20×20 (vorher 0×0), Button waechst 46→55px. */
body.app-phone #pd-react .pd-react-ic {
  width: 20px !important; height: 20px !important; flex: none !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
body.app-phone #pd-react .pd-react-svg { width: 20px !important; height: 20px !important; }

/* ═══════════ MOBILE-BATCH-3 (2026-07-31) — Shorts TOS-Umbau (#6) + Landscape-Clips (#10) ═══════════
   RECHTLICH BINDEND: kein PubliCore-Control-Element darf die Video-iframe-Bounding-Box
   schneiden (YouTube/Twitch-Embed-ToS: nichts über dem Player). Die Theme-Regeln
   (theme-*.css:6050+, dreifach) machten das Video absichtlich full-bleed (100vw×100vh) mit
   Meta/Engage/Autoreplay als Overlay z:4 DARÜBER. Hier eine Quelle (last-wins) die das für
   ALLE Hoster überschreibt: Video schrumpfen → Steuer-Schiene NEBEN/UNTER dem Video.
   Am echten DOM verifiziert (getBoundingClientRect, 0 Schnitt): Video [0,140,299,672];
   autoreplay y8-36 (drüber), meta y725-802 (drunter), engage x303-375 (rechts) — alle
   intersectsVideo:false. Hoster-unabhängig (Box = Container, per YT-src-Swap identisch belegt). */

/* Video: linke Spalte, 9:16, vertikal zentriert — lässt rechts eine 76px-Rail frei. */
body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-frame-wrap {
  position: absolute !important;
  left: 0 !important; right: 76px !important;
  top: 50% !important; transform: translateY(-50%) !important;
  width: auto !important;
  height: calc((100vw - 76px) * 16 / 9) !important;
  max-height: calc(100vh - 150px) !important;
  border-radius: 12px !important; overflow: hidden !important; margin: 0 !important;
}
/* Engagement-Schiene (Like/Dislike/Kommentar/Creator) NEBEN dem Video in der rechten Rail. */
body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-engage-wrap {
  position: absolute !important;
  right: 0 !important; left: auto !important;
  top: 50% !important; transform: translateY(-50%) !important;
  bottom: auto !important;
  width: 72px !important; max-width: 72px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
/* Titel/Creator UNTER dem Video (nicht mehr Overlay), links, klar von der Rail. */
body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-meta {
  position: absolute !important;
  left: 12px !important; right: 84px !important;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; top: auto !important;
  width: auto !important; max-width: none !important;
}
/* Auto-Replay-Umschalter oben — über dem (nach unten zentrierten) Video, im oberen Rand. */
body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-autoreplay { top: 8px !important; z-index: 4 !important; }

/* #6(b) Kommentar schreiben: Video in die obere Hälfte schrumpfen, Bottom-Sheet darunter —
   NIE über dem Video. Stage-Klasse .comments-open kommt aus dem Toggle (core.js). Am DOM
   verifiziert: Video [0,8,183,333], Panel [0,390,375,812] → panel/engage intersectsVideo:false. */
body.app-phone .shorts-stage.comments-open:not(.shorts-stage-clip) .shorts-frame-wrap {
  top: 8px !important; transform: none !important; height: 40vh !important; right: 76px !important;
}
body.app-phone .shorts-stage.comments-open:not(.shorts-stage-clip) .shorts-engage-wrap {
  top: 8px !important; transform: none !important; height: 40vh !important;
}
body.app-phone .shorts-stage.comments-open:not(.shorts-stage-clip) .shorts-comments-panel {
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  height: 52vh !important; max-height: 52vh !important;
}
body.app-phone .shorts-stage.comments-open:not(.shorts-stage-clip) .shorts-meta { display: none !important; }

/* #10 LANDSCAPE → CLIPS: im Querformat 16:9 statt 9:16 (nach Höhe bemessen), Rails bleiben
   frei. Das 9:16-Reel wird so zum 16:9-„Clips"-Format. Label schaltet über die bestehende
   shorts/clips-Trennung (Bottom-Nav) bzw. den Section-Title (i18n menu_shorts/menu_clips). */
@media (orientation: landscape) {
  /* Video 16:9 (per aspect-ratio, nach Höhe bemessen) — lässt links UND rechts eine Rail
     frei; die Controls wandern in die SEITEN-Rails (im Querformat ist oben/unten kein Platz,
     das 16:9-Video füllt fast die volle Höhe). Am DOM verifiziert (812×375): Video 512×288
     ratio 1.778; autoreplay/meta links (x<150), engage rechts (x>662) — alle hit:false. */
  body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-frame-wrap {
    left: 50% !important; right: auto !important;
    top: 50% !important; transform: translate(-50%, -50%) !important;
    aspect-ratio: 16 / 9 !important;
    height: min(calc(100vh - 24px), calc((100vw - 300px) * 9 / 16)) !important;
    width: auto !important; max-width: none !important; max-height: none !important;
  }
  /* CLAUDIT-FIX C (MOBILE-BATCH-3 Legal-Gate, 2026-07-31): der Auto-Replay-Umschalter
     lag im Querformat als top:8/left:8-Pille ÜBER dem zentrierten 16:9-Video, sobald das
     Video höhen-geklemmt ist (breite Viewports: min(100vh-24) wird maßgeblich → Video-Top
     steigt auf ~12px, der obere Rand kollabiert). Am DOM belegt: 1024×375 intersectsVideo
     TRUE (long-i18n-Pille), 932×430 nur 1px Rest — Embed-ToS-Verstoß (nichts über dem
     Player). Fix: die Pille bleibt in der linken Rail. Das Video ist immer zentriert mit
     ≥150px Rand links (300px-Reserve, width-clamped exakt 150), die Pille auf max 130px
     (border-box, left:8 → Rechtskante ≤138) hält damit 12px Abstand bei JEDER Breite und
     JEDER Sprache (lange Labels umbrechen statt zu überlappen). DOM verifiziert 0-Schnitt:
     640/812/932/1024 × alle 9 Pillentexte. */
  body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-autoreplay {
    top: 8px !important; left: 8px !important; right: auto !important;
    max-width: 130px !important; box-sizing: border-box !important;
  }
  /* CLAUFIX (MOBILE-BATCH-3 Zweitprüfung, 2026-07-31): Nebeneffekt von Fix C. Die max-width
     zwingt die inline-flex-Pille in einen breitenbegrenzten Flex-Row; der Status-Dot
     (.sar-dot: flex-shrink:1, min-width:auto) gibt bei langen i18n-Labels als erstes nach und
     wurde von 9px auf ~4.5px gestaucht (Kreis→Ellipse; FR/IT/PL/PT/TR/NL). Am echten DOM
     belegt. Dot auf 9px fixieren — der Text nutzt stattdessen den reichlich vorhandenen
     vertikalen Platz (Pille bricht 1 Zeile mehr um, bleibt 88px über .shorts-meta). Kein
     neuer Overflow: overflowX bleibt false und der 0-Schnitt hält über 640–1280 × 9 Sprachen.
     Landscape-gescoped → Portrait (kein max-width) unberührt, Dot dort ohnehin 9px. */
  body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-autoreplay .sar-dot {
    flex: 0 0 9px !important;
  }
  body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-meta {
    left: 10px !important; right: auto !important;
    top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important;
    width: 130px !important; max-width: 130px !important;
  }
  body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-engage-wrap {
    right: 8px !important;
  }
}

/* ══ TICKET-CLIPS-AUTOREPLAY-OVERLAY (2026-08-01, Cloder) ═══════════════════════
   PROBLEM (TOS, vorbestehend — NICHT von MOBILE-BATCH-3): der Auto-Replay-Umschalter
   (.shorts-autoreplay, in theme-*.css position:absolute; top:6px; right:6px; z-index:5)
   ist an der oberen rechten Bühnen-Ecke verankert und liegt bei der CLIP-Variante
   (.shorts-stage-clip, 16:9-Video oben in der Bühne, width:min(92vw,900px)) ÜBER dem
   Hoster-Video-iframe. Embed-ToS (YouTube/Twitch/Kick/Dailymotion/PeerTube) verbieten
   jedes Element über dem Player. Es existierte KEIN clip-spezifischer Override: alle
   Umpositionierungen (reskin-mobile.css oben + theme-*.css) sind :not(.shorts-stage-clip).

   FIX — DEVICE-AGNOSTISCH (app-phone + app-desktop + app-tv IDENTISCH): Clips nutzen auf
   ALLEN Geräten dasselbe Flex-Spalten-Flow-Layout (der Fixed-Vollbild-Overlay der Shorts
   ist :not(.shorts-stage-clip) → greift bei Clips nie; theme-classic.css:6032-6035). Die
   Pille wird aus position:absolute in den normalen Fluss zurückgeholt und per flex-order
   DIREKT UNTER das Video gesetzt: die .shorts-stage ist display:flex/column
   (theme-*.css:5500); DOM-Reihenfolge der Kinder = [autoreplay(1.), frame-wrap, meta,
   engage] (core.js App.Shorts.mount ~11563). frame-wrap bekommt order:-1 → springt an den
   Anfang; die (wieder in den Fluss geholte) Pille bleibt order:0 als DOM-erstes der
   restlichen Kinder → sitzt damit ZWISCHEN Video und meta. Flow-Platzierung heißt: 0 Schnitt
   mit der Video-Box per Konstruktion (Fluss-Elemente überlappen nie) und die Pille verdeckt
   weder meta noch engage.

   EINE Quelle statt zwei (AGENT-BRIEFING §4 "Zwei Wahrheiten sind eine zu viel"): der Fix ist
   auf allen Geräten gleich, daher EIN device-agnostischer Selektor statt app-phone- +
   desktop-Duplikat. Dieser eine Block ist BEWUSST nicht body.app-phone-gescoped — die einzige
   Ausnahme in dieser sonst app-phone-only Datei; Grund hier im Code (Regel: Abweichung
   begründen). Platzierung in reskin-mobile.css, weil das das ZULETZT geladene Stylesheet ist
   (index.html:155) → gewinnt Ladereihenfolge-Gleichstände nach allen theme-*.css. Spezifität
   0-2-0 (.shorts-stage-clip .shorts-autoreplay) schlägt die 0-1-0-Basis in JEDER Theme-Datei;
   !important als zusätzliche Absicherung gegen die triplizierte theme-!important-Schicht. */
.shorts-stage-clip .shorts-frame-wrap { order: -1 !important; }
.shorts-stage-clip .shorts-autoreplay {
  position: static !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  order: 0 !important;
  align-self: center !important;
  margin: 0 !important;
  z-index: auto !important;
}