/* Letzte Cleaning Pruefung: 22.09.2026 */
/* Letztes Cleaning: 22.09.2026 */

/*
Vom Nutzer am 22.09.2026 freigegebene Aenderungen der Handyansicht. Alles in
einer Datei, damit jede einzelne Zeile wieder zurueckgenommen werden kann.

  CFAI-MOB-20260921-004 Kopfkarte "Neue Produktion" scrollt auf dem Telefon mit.
  CFAI-MOB-20260922-034 Zeitraum-Knoepfe (Beste Veroeffentlichungszeit) auf 40 px.
  CFAI-MOB-20260922-064 Drei zu kleine Tippflaechen: Kartenknoepfe, Logo-Entfernen, Promo-Code.
  CFAI-MOB-20260922-065 Wahlreihen und Symbolknoepfe in den Werkzeugfenstern auf 40 px.
  CFAI-MOB-20260922-049 Rest: Profilknopf der Kopfzeile auf 44 px.

Nur Zeigegeraete ohne Maus (pointer: coarse) und Telefonbreite - Desktop und
Tablet mit Maus bleiben unveraendert.
*/

@media (max-width: 760px) and (pointer: coarse) {

  /* 004: Die Werkzeug-Kopfzeile klebte oben und lag durchsichtig ueber dem
     Inhalt; Ueberschrift und Karten liefen sichtbar darunter durch. */
  body.factory-page-active #factory-workspace .workspace-header:has(.video-rebuild-header-action) {
    /* relative statt static: die Kopfkarte darin liegt absolut und braucht
       diesen Bezugspunkt - mit static rutschte sie hinter die Verlaufskarten. */
    position: relative;
  }

  /* 064/065: Symbolknoepfe auf mindestens 40 px. Die Zeichen bleiben gleich
     gross, nur die Flaeche waechst. */
  .video-history-gallery-download,
  .video-history-gallery-delete,
  .video-prompt-optimize-button,
  .video-config-trigger,
  .thumbnail-editor-nav,
  .factory-image-download-overlay,
  .factory-generation-copy,
  .sp-kanal-symbol,
  [data-creator-logo-remove] {
    min-width: 40px;
    min-height: 40px;
  }

  /* 064: "Promo-Code hinzufuegen" war nur 13 px hoch. */
  .factory-credit-promo-toggle {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* 034: Zeitraum-Knoepfe "28 Tage / 90 Tage / 12 Monate". */
  .bt-seg,
  .best-time-view .bt-segment.klein .bt-seg {
    min-height: 40px;
  }

  /* 065: Wahlreihen im Einstellungsfeld von "Video erstellen"
     (Landscape/Portrait, 720p/1080p, 4 s/8 s/12 s). */
  .video-config-popover button {
    min-height: 40px;
  }

  /* 049 Rest: Profilknopf. Er ist der einzige Knopf der Kopfzeile, der noch
     unter 44 px lag; eine unsichtbare Flaeche ist dort nicht moeglich, weil
     credit-checkout.css die Positionierung der Kopfzeilenkinder festlegt. */
  #factory-profile {
    width: 44px;
    height: 44px;
  }

  /* CFAI-MOB-20260922-058: Der Ladehinweis der Werkzeugliste steht im Abschnitt "Deine AI Crew"
     und damit unterhalb des ersten Bildschirms. Auf dem Telefon schwebt er
     jetzt unter der Kopfzeile; sobald die Werkzeuge da sind, ersetzt die Liste
     ihn und der Streifen verschwindet von selbst. */
  #factory-tools .factory-loading {
    position: fixed;
    top: 84px;
    left: 12px;
    right: 12px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #2a2f3c;
    border-radius: 12px;
    background: rgba(16, 18, 25, .96);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    font-size: 13px;
  }

  /* CFAI-MOB-20260921-030: Video-Kino im Hochformat. Das Video war so hoch,
     dass die Knopfzeile darunter angeschnitten war; jetzt bleibt Platz fuer
     Video und erste Knopfzeile zusammen. */
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail.is-video-portrait .video-rebuild-player video {
    height: min(640px, calc(100vh - 250px));
  }

  /* CFAI-MOB-20260922-052: Der schwebende Zurueck-Pfeil (y 88-128) lag ueber
     der Ueberschrift des Titelbilds. Kauf- und Paketfenster ruecken auf dem
     Telefon so weit nach unten, dass der Pfeil daneben frei steht. */
  html body.factory-credit-focus .credit-purchase-view,
  html body.factory-upgrade-focus .factory-upgrade-view {
    /* Die Kaufansicht setzt ihren eigenen Innenabstand spaeter im Stylesheet;
       deshalb hier hoeher gewichtet. */
    padding-top: 70px !important;
  }

  /* CFAI-MOB-20260922-053: Die Paketleiste war bei 360 px 5 px zu breit, das
     "s" von "9.000 Credits" wurde angeschnitten. Etwas weniger Innenabstand
     und Zwischenraum reichen; die Schriftgroesse bleibt. */
  body.factory-credit-focus .credit-pack-tabs {
    gap: 4px;
  }
  body.factory-credit-focus .credit-pack-tabs button {
    padding-left: 2px;
    padding-right: 2px;
  }

  /* CFAI-MOB-20260923-066: Zweiter Durchgang am 23.09.2026. Nach demselben
     Muster wie 064/065 bekommen auch diese Bedienelemente mindestens 40 px:
     Sprachumschalter (31 x 28), Blaettern und Loeschen im Verlauf (28/30),
     Kalenderknoepfe (32), Coach-Modus und Vorschlaege (29/32), Schalter in
     Beste Veroeffentlichungszeit (34), Paketreiter und Bestellknopf (34). */
  .factory-language-switch button,
  [data-ui-language],
  [data-history-page],
  [data-delete-tool-run],
  [data-calendar-month],
  [data-calendar-today],
  [data-calendar-filter],
  [data-best-time-filter],
  [data-coach-mode-trigger],
  [data-coach-prompt],
  [data-credit-pack-tab],
  .factory-payment-options button,
  .factory-upgrade-submit {
    min-height: 40px;
  }
  /* Diese drei setzen ihre Groesse spaeter selbst, deshalb hoeher gewichtet. */
  html body .factory-language-switch button { min-width: 40px !important; }
  html body .cc-shell:has(.coach-form) .coach-prompts button,
  html body [data-coach-prompt] { min-height: 40px !important; }
  html body.factory-credit-focus .credit-pack-tabs button { min-height: 40px !important; }
  [data-ui-language],
  [data-history-page],
  [data-delete-tool-run],
  [data-calendar-month] {
    min-width: 40px;
  }
  .factory-upgrade-submit { min-height: 48px; }

  /* CFAI-MOB-20260922-041: Im leeren Monat stand der Hinweis "Keine passenden
     Veroeffentlichungen ..." in derselben Zeile wie der Monatsname und drueckte
     ihn auf 50 px zusammen ("Novembe 2026"). Auf dem Telefon rutscht der
     Hinweis jetzt in eine eigene Zeile, der Monatsname bleibt vollstaendig. */
  .calendar-monat-kopf { flex-wrap: wrap; row-gap: 6px; }
  .calendar-monat-kopf > strong { white-space: nowrap; }
  .calendar-monat-leer { flex: 1 0 100%; }

  /* CFAI-MOB-20260921-015: Im Social-Poster- und Thumbnail-Formular wurde der
     Modell-Chip auf 15 px zusammengedrueckt ("Nano Ba" bzw. gar nichts mehr),
     weil er sich die Zeile mit den Knoepfen teilt. Auf dem Telefon bekommen
     die Chips jetzt eine eigene Zeile und zeigen den vollen Namen. */
  .tk-konfig-halter { flex-wrap: wrap; row-gap: 6px; }
  .tk-konfig-halter .tk-param-chips { flex: 1 0 100%; overflow: visible; }
  .tk-konfig-halter .tk-param-chip { max-width: 100%; white-space: normal; line-height: 1.25; text-overflow: clip; }
  html body .tk-composer .tk-param-chip span,
  html body .tk-konfig-halter .tk-param-chip span { max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; }
  /* Zurueck im Creator-Profil (34 x 34) und die Knoepfe im Publisher (32). */
  html body .profile-mobile-back { min-width: 40px !important; min-height: 40px !important; }
  html body .youtube-publisher-view button,
  html body #workspace-body[data-tool="youtube-publisher"] button { min-height: 40px !important; min-width: 40px !important; }
}

/*
CFAI-MOB-20260921-024: Telefon im Querformat (z. B. 780 x 360 px). Dort griff
die Tablet-Ansicht: Das Seitenmenue stand dauerhaft links und nahm ein Drittel
der Breite, die Kopfzeile blieb 76 px hoch. Bei flachen Fenstern gilt jetzt
dasselbe wie auf dem Telefon: Menue eingeklappt, Inhalt ueber die volle Breite,
Kopfzeile flacher, Schriftzug in der Kopfzeile. Freigegeben 22.09.2026.
*/
@media (max-height: 480px) and (pointer: coarse) {
  .factory-mobile-menu-toggle {
    display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0;
    border: 1px solid #303544; border-radius: 10px; background: #171b25; color: #f5f6fa; cursor: pointer; z-index: 31;
  }
  .factory-mobile-menu-toggle i { font-size: 21px; line-height: 1; }
  .factory-sidebar {
    display: flex !important; inset: 0 auto 0 0; width: min(86vw, 300px) !important; max-width: 300px;
    padding: 18px 14px 14px !important; transform: translateX(-105%); overflow-y: auto !important; overflow-x: hidden;
    z-index: 30; transition: transform .24s ease, box-shadow .24s ease; box-shadow: none;
  }
  body.factory-sidebar-mobile-open .factory-sidebar { transform: translateX(0); box-shadow: 18px 0 45px rgba(0, 0, 0, .48); }
  .factory-mobile-sidebar-backdrop { position: fixed; inset: 0; display: none; padding: 0; border: 0; background: rgba(3, 5, 9, .7); z-index: 29; }
  body.factory-sidebar-mobile-open .factory-mobile-sidebar-backdrop { display: block; }
  /* Inhalt nutzt die volle Breite, solange das Menue eingeklappt ist. */
  .factory-main { margin-left: 0 !important; }
  #factory-workspace, .factory-workspace { left: 0 !important; }

  /* Marke gehoert in die Kopfzeile, solange die Leiste eingeklappt ist -
     sonst bleibt oben links eine Luecke (Nachtrag zu 024). */
  .factory-topbar .factory-mobile-brand { display: flex !important; align-items: center; }
  .factory-topbar .factory-mobile-brand-logo { width: 34px !important; height: 34px !important; }
  .factory-topbar .factory-mobile-brand-wordmark { display: block !important; height: 20px !important; width: auto !important; }

  /* Kopfzeile flacher: 56 statt 76 px, Inhalt linksbuendig wie auf dem Telefon. */
  .factory-topbar { height: 56px !important; padding: 0 12px !important; gap: 12px !important; justify-content: flex-start !important; }
  .factory-topbar .factory-top-actions { margin-left: auto; }
}