/* Letzte Cleaning Pruefung: 03.10.2026 */
/* Letztes Cleaning: 03.10.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" (seit AL-20261003-01 wieder klebend, deckend).
  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. Deshalb
     scrollte sie seit 22.09.2026 am Telefon mit weg.
     AL-20261003-01 (Betreiber 03.10.2026: "Der Produktion Button sollte bei
     runterscrollen am Handy mit scrollen. So wie bei der Desktop Variante"):
     wieder klebend wie am PC, aber mit deckendem Grund in der Farbe des
     Fensters und weichem Uebergang nach unten - so laeuft nichts sichtbar
     darunter durch. Die Kopfkarte liegt weiter absolut darin. */
  body.factory-page-active #factory-workspace .workspace-header:has(.video-rebuild-header-action) {
    position: sticky;
    top: 0;
    z-index: 6;
    background: linear-gradient(180deg, #08090d 0%, #08090d 82%, rgba(8, 9, 13, 0) 100%) !important;
  }

  /* 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(:is([data-tool="video-generator"],[data-tool="video-editor"]),[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 lag ueber der
     Ueberschrift des Titelbilds. Seit MOB17-48 (Betreiber 17.10.2026: "bitte die
     luecke da oben entfernen") beginnt das Titelbild wie beim Upgrade (MOB17-25)
     ganz oben, der Pfeil liegt auf dem Bild; Platz fuer ihn macht der Text im
     Bild, nicht mehr ein leerer Streifen darueber. */
  html body.factory-credit-focus .credit-purchase-view {
    /* Die Kaufansicht setzt ihren eigenen Innenabstand spaeter im Stylesheet;
       deshalb hoeher gewichtet. */
    padding-top: 0 !important;
  }
  html body.factory-credit-focus .credit-purchase-view > .factory-credit-purchase-visual {
    height: auto !important;
    padding-top: 58px !important;
  }
  /* Im Upgrade-Fenster beginnt das Titelbild ganz oben (MOB17-25): der Streifen
     darueber war leer bis auf den Pfeil. Der Pfeil liegt jetzt auf der oberen
     linken Bildecke - die Ueberschrift steht erst im unteren Bilddrittel. */
  html body.factory-upgrade-focus .factory-upgrade-view {
    padding-top: 0 !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; }
  /* Der Schriftzug nur im Querformat: im Hochformat mit offener Tastatur (Firefox auf Android
     verkleinert das Fenster) lag er unter dem Credit-Stand (CFAI-MOB-20260925-074). */
  @media (min-width: 561px) {
    .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; }
}

/*
CFAI-MOB-20260924-071: Touch-Tablets (ab 761 px, ohne Maus). Die Tippflaechen-Regeln aus 064, 065
und 066 galten nur bis 760 px; auf dem iPad blieben Sprachumschalter (36 x 28), Blaettern im
Verlauf (28), Loeschen-Dialog "Schliessen" (30), Logo-"Entfernen" (24) und die Kartenknoepfe (34)
klein. Hier dieselben Mindestmasse wie auf dem Telefon - nur Tippflaechen, kein Umbau des Layouts.
Der Sidebar-Knopf (26 x 26) bekommt eine unsichtbare Flaeche, damit sich die Leiste nicht verschiebt.
*/
@media (min-width: 761px) and (pointer: coarse) {
  .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,
  .history-delete-close,
  [data-creator-logo-remove] {
    min-width: 40px;
    min-height: 40px;
  }
  .factory-credit-promo-toggle { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  .bt-seg,
  .best-time-view .bt-segment.klein .bt-seg,
  .video-config-popover button,
  .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;
  }
  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; }
  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; }
  .factory-sidebar-toggle::after { content: ""; position: absolute; inset: -8px; }
  /* Nachtrag 24.09.2026 (Tablet-Abschluss): Shorts-Karten (31), Kopieren im Ergebnis (30),
     Blaettern der Stimmen (30), Stimmenfilter und Kennzahlen in Beste Veroeffentlichungszeit (24/25). */
  .shorts-history-download,
  .shorts-history-delete,
  [data-copy-result-part],
  [data-voice-page] {
    min-width: 40px;
    min-height: 40px;
  }
  [data-voice-filter],
  [data-best-time-metric] {
    min-height: 40px;
  }
}

/*
Handy-Gesamtpruefung 25.09.2026, vom Nutzer am 25.09.2026 freigegeben:
  CFAI-MOB-20260925-075 Verlaufskarten der Textwerkzeuge auf dem Telefon flacher.
  CFAI-MOB-20260925-076 Skriptdokument mit schmalerem Rand.
  CFAI-MOB-20260925-077 Coach-Startansicht mittig, Schnellfragen lesbar.
  CFAI-MOB-20260925-078 Beschreibungen in Paketwahl und Credit-Center mindestens 11 px.
*/
@media (max-width: 760px) and (pointer: coarse) {

  /* 075: Das Blatt im Seitenverhaeltnis 1 : 1,35 wurde bei 350 px Breite
     473 px hoch - gut ein Eintrag je Bildschirm. Nachtrag 25.09.2026
     (Nutzerwunsch "es soll wie DIN-A4-Blaetter aussehen"): statt quer liegender
     Blaetter zwei hochkant stehende A4-Blaetter (1 : 1,414) nebeneinander. */
  .tool-history-list:has(.tool-history-stapel) {
    grid-template-columns: minmax(0, min(300px, 86%)) !important;
    justify-content: center !important;
    gap: 22px !important;
  }
  /* Nachtrag 2 (Nutzerwunsch "DIN-A4-Seite groesser"): ein Blatt je Zeile, mittig,
     hoechstens 300 px breit (rund 420 px hoch). Der Innenabstand liegt innerhalb des
     Papiers (Stapel 9-11 px eingerueckt), damit kein Text an der Blattkante klebt. */
  .tool-history-row:has(.tool-history-stapel) {
    aspect-ratio: 1 / 1.414;
    min-height: 0;
    padding: 24px 24px 22px !important;
  }
  .tool-history-row:has(.tool-history-stapel) > strong { font-size: 14px !important; line-height: 1.4 !important; }
  .tool-history-row:has(.tool-history-stapel) .tool-history-zahlen { gap: 4px 10px !important; font-size: 12px !important; }
  .tool-history-row:has(.tool-history-stapel) .tool-history-zahlen i { font-size: 14px !important; }
  .tool-history-row:has(.tool-history-stapel) .tool-history-fuss small { font-size: 11px !important; }
  .tool-history-row:has(.tool-history-stapel) .tool-history-seite-text { padding: 44px 22px 0 !important; }
  /* 099 (Nutzerwunsch "Muelleimer komisch platziert"): Die Regel "Angaben liegen
     ueber dem Papier" stellt den Knopf auf position: relative - er stand damit im
     Textfluss, links/unten verschoben ihn nur, und je nach Inhalt landete er unten
     links unter der Blattkante oder mitten im Blatt. Jetzt fest oben rechts wie am
     Schreibtisch, die Nummer rueckt davor. */
  .tool-history-row:has(.tool-history-stapel) > .tool-history-delete {
    position: absolute !important;
    top: 17px !important;
    right: 20px !important;
    bottom: auto !important;
    left: auto !important;
  }
  .tool-history-row:has(.tool-history-stapel):has(> .tool-history-delete) .tool-history-number { margin-right: 46px !important; }
  /* Laeufe ohne Auszug und Kennzahlen (nur Abschlussvermerk): die Statuszeile
     rutschte nach oben auf den gedruckten Dateinamen. Sie bleibt unten. */
  .tool-history-row:has(.tool-history-stapel):has(> strong:empty) > .tool-history-zahlen,
  .tool-history-row:has(.tool-history-stapel):has(> strong:empty):not(:has(> .tool-history-zahlen)) > .tool-history-fuss { margin-top: auto !important; }
  /* Wie am Schreibtisch (093, Nutzerwunsch): gedruckte Blatt-Ueberschrift
     (Dateiname) und Zustand "Fertig" bleiben sichtbar. */
  .tool-history-row:has(.tool-history-stapel) .tool-history-state { display: inline-flex !important; }

  /* 076: 30 px Rand je Seite liessen dem Skript 286 von 346 px. Das Ergebnis
     steht im Fenster .generic-tool-modal, nicht in #workspace-body; der
     Content-Plan behaelt dort seinen eigenen randlosen Satz. */
  .result-finished .script-document-content:not(#workspace-body[data-tool="creator-content-plan"] .script-document-content) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 077: Vor der ersten Frage stand der Coach in der oberen Haelfte, darunter
     blieb der Bildschirm leer. Solange die Begruessung sichtbar ist, steht der
     Block senkrecht mittig; Schnellfragen 12 statt 9 px. */
  body.factory-page-active #workspace-body > .cc-shell.is-coach-shell:has(.coach-hero:not([hidden])) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100dvh - 150px);
  }
  /* Ohne volle Breite schrumpften Eingabefeld und Vorschlaege auf ihren Inhalt. */
  body.factory-page-active #workspace-body > .cc-shell.is-coach-shell:has(.coach-hero:not([hidden])) > * {
    width: 100%;
  }
  /* Nachtrag 25.09.2026 (Nutzerwunsch): etwas kleiner, so viele je Zeile wie passen,
     zentriert - vorher standen sie paarweise in fuenf Reihen.
     Seit AL-20261003-04 (Betreiber 03.10.2026, Chatbox soll aussehen wie die
     anderen): eine waagerecht wischbare Reihe statt fuenf gestapelter Zeilen -
     das Eingabefeld steht damit hoeher, die Vorschlaege bleiben lesbar gross. */
  body .cc-shell.is-coach-shell:has(.coach-form) .coach-prompts {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    gap: 8px !important;
    padding: 2px 16px 6px 0 !important;
    grid-template-columns: none !important;
  }
  body .cc-shell.is-coach-shell:has(.coach-form) .coach-prompts::-webkit-scrollbar { display: none; }
  body .cc-shell.is-coach-shell:has(.coach-form) .coach-prompts button {
    flex: 0 0 auto !important;
    width: auto !important;
    font-size: 12px !important;
    gap: 6px !important;
    padding: 0 12px !important;
    min-height: 40px !important;
    scroll-snap-align: start;
  }
  body .cc-shell.is-coach-shell:has(.coach-form) .coach-prompts button > i { font-size: 15px !important; }
  /* Die Vorschlaege duerfen die volle Breite nutzen, nicht nur die Breite des Eingabefelds.
     Seit AL-20261003-04: buendig mit dem Eingabefeld, nach rechts bis zum
     Bildschirmrand - der angeschnittene letzte Vorschlag zeigt, dass man wischen kann. */
  body .cc-shell.is-coach-shell:has(.coach-form) .coach-prompts { margin-left: 0 !important; margin-right: -16px !important; }

  /* 078: Beschreibungen und Kennzeilen waren 9-10 px. Kicker in Grossbuchstaben
     und Abzeichen bleiben klein - sie sind Beschriftung, kein Lesetext. */
  .factory-upgrade-ad-copy p,
  .factory-upgrade-benefits span,
  .factory-upgrade-plan p,
  .factory-upgrade-plan b small,
  .factory-upgrade-summary span,
  .factory-upgrade-summary b small,
  .factory-upgrade-promo button,
  .credit-center-balances article span,
  .credit-center-history header small,
  .credit-center-entry-main small,
  .credit-purchase-pack p,
  .factory-credit-purchase-visual-copy p,
  .factory-credit-purchase-visual-copy li,
  .factory-credit-promo-toggle,
  .factory-credit-payment-note,
  .credit-purchase-note,
  .factory-upgrade-cycle button,
  .factory-payment-options button,
  .credit-center-entry-facts b,
  .credit-purchase-balance > span,
  .factory-credit-checkout-head small {
    font-size: 11px !important;
  }
  /* Das Kauffenster setzt Titelbild-Text und Bestellknopf selbst mit hoeherem Gewicht. */
  html body.factory-credit-focus .factory-credit-purchase-visual-copy p,
  html body.factory-credit-focus .factory-credit-purchase-visual-copy li {
    font-size: 11px !important;
  }
  html body .factory-credit-submit {
    font-size: 13px !important;
  }
}

/*
CFAI-MOB-20260925-079 (Nutzerwunsch 25.09.2026): Im Vollbild verschwinden
waehrend der Wiedergabe alle Player-Knoepfe nach 2,5 s Ruhe - Mitte, Leiste,
Ausgang und Drei-Punkte-Menue. Ein Tipp holt sie zurueck (Klasse setzt
contentfactory-video-generator-rebuild.js). Gilt fuer alle Geraete; am
Schreibtisch holt die Mausbewegung sie zurueck.
*/
/* Nachtrag 25.09.2026 (Nutzerwunsch): Zum Verlassen gab es zwei Knoepfe - oben
   rechts (028) und unten rechts in der Leiste. Der obere entfaellt, an seine
   Stelle rueckt das Drei-Punkte-Menue; die Liste klappt darunter nach rechts
   buendig auf. */
.cinema-custom-player:fullscreen .cinema-player-exit { display: none !important; }
#workspace-body .cinema-custom-player:fullscreen .cinema-menu-knopf {
  top: max(16px, env(safe-area-inset-top)) !important;
  right: 16px !important;
  left: auto !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
}
#workspace-body .cinema-custom-player:fullscreen.ist-menue-offen .cinema-player-tools {
  top: calc(max(16px, env(safe-area-inset-top)) + 58px) !important;
  right: 16px !important;
  left: auto !important;
}
/* Nachtrag 25.09.2026 (Nutzermeldung): Ein Tipp im Player liess den Bildschirm kurz blau
   aufleuchten - die Tipp-Markierung von Chrome auf Android ueber der ganzen Videoflaeche.
   Im Player abgeschaltet, ebenso Textauswahl und Fokusrahmen beim Tippen. */
.cinema-custom-player,
.cinema-custom-player * {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.cinema-custom-player video:focus,
.cinema-custom-player:focus { outline: none; }
.cinema-custom-player.cinema-ui-aus { cursor: none; }
#workspace-body .cinema-custom-player.cinema-ui-aus :is(.cinema-player-center, .cinema-player-controls, .cinema-player-exit, .cinema-menu-knopf),
.cinema-custom-player.cinema-ui-aus :is(.cinema-player-center, .cinema-player-controls, .cinema-player-exit, .cinema-menu-knopf) {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .3s ease;
}

/*
CFAI-MOB-20260925-080 (Nutzerwunsch 25.09.2026): Das Formatsymbol vor "16:9" war das
Zeichen "▭" (U+25AD) - auf Android ein flacher Strich, es las sich wie 16:1. Jetzt ein
gezeichnetes Rechteck im echten Verhaeltnis, hochkant bei 9:16 (Klasse setzt
contentfactory-video-generator-rebuild.js).
*/
#workspace-body .cinema-player-info .video-rebuild-config-line > .video-rebuild-format::before {
  content: "" !important;
  display: inline-block !important;
  box-sizing: border-box;
  width: 16px !important;
  height: 9px !important;
  border: 1.6px solid #67b7ff;
  border-radius: 2px;
  vertical-align: middle;
}
#workspace-body .cinema-player-info .video-rebuild-config-line > .video-rebuild-format.ist-hochformat::before {
  width: 9px !important;
  height: 15px !important;
}

/*
CFAI-MOB-20260925-081 (Nutzerwunsch 25.09.2026, Handy und Desktop): Beim Oeffnen von
"Video erstellen" blitzte kurz die alte Verlaufsliste "VERLAUF / Deine letzten
Video-Produktionen" auf (videoGeneratorHistoryHtml() in der Steuerung, Browser-Verlauf
aus localStorage), bis die Galerie des Rebuild-Moduls sie ersetzte. Die Galerie traegt
zusaetzlich .video-history-gallery und bleibt sichtbar.
*/
.video-generator-history:not(.video-history-gallery) { display: none !important; }

/*
CFAI-MOB-20260925-082 (Nutzerwunsch 25.09.2026, nur Telefon): Die Shorts im Verlauf
standen einzeln ueber die volle Breite - 350 x 622 px, kaum ein Short je Bildschirm.
Auf dem Telefon jetzt zwei nebeneinander.
*/
@media (max-width: 760px) and (pointer: coarse) {
  #workspace-body .shorts-history-grid.medien-galerie-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  /* Loeschen und Herunterladen wie auf dem Tablet (071) mit 40 px Tippflaeche. */
  #workspace-body .shorts-history-card .shorts-history-delete,
  #workspace-body .shorts-history-card .shorts-history-download {
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

/* Menueknopf und Kreuz in der Bildflaeche (083) erscheinen nur auf dem Telefon im Editor. */
.factory-image-menu-knopf,
.factory-image-close-knopf { display: none; }

/*
CFAI-MOB-20260925-083 (Nutzerwunsch 25.09.2026 mit Bildschirmfoto, nur Telefon): Im
Bildeditor lagen Herunterladen, "Neues Bild daraus", "Video daraus" oben links und der
Bildstand-Verlauf unten links auf dem Bild. Der Bildbereich bekommt oben und unten eine
eigene Leiste; die Knoepfe sitzen darin, das Bild bleibt frei.
*/
@media (max-width: 760px) and (pointer: coarse) {
  /* Nachtrag (Nutzerwunsch): Menue und Kreuz liegen oben in den Bildecken, die Leiste
     darueber entfaellt; unten bleibt die Leiste fuer den Bildstand-Verlauf. */
  .thumbnail-editor-modal-content .factory-image-media {
    padding-top: 0 !important;
    padding-bottom: 54px !important;
  }
  /* Nachtrag (Nutzerwunsch): Das Hochformatbild ist so hoch, dass darunter die Werkzeugleiste
     noch zu sehen ist (sichtbare Hoehe minus 150 px); die Breite folgt dem Bild, der
     Bildbereich schmiegt sich an und steht mittig. */
  html body .thumbnail-editor-modal-content .image-result-finished.is-image-portrait .factory-image-media {
    width: fit-content !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  html body .thumbnail-editor-modal-content .image-result-finished.is-image-portrait .factory-image-result img,
  html body .thumbnail-editor-modal-content .image-result-finished.is-image-portrait .factory-image-result canvas {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 150px) !important;
  }
  .thumbnail-editor-modal-content .factory-image-media > .factory-image-download-overlay {
    top: 2px !important;
    bottom: auto !important;
  }
  .thumbnail-editor-modal-content .factory-image-media > .factory-image-version-controls {
    top: auto !important;
    bottom: 2px !important;
  }
  /* Nachtrag (Nutzerwunsch): Blaettern per Wischen, die Pfeile entfallen im Bildeditor.
     Die Pfeile der Sprachaufnahmen (data-speech-nav) bleiben. */
  .thumbnail-editor-modal > .thumbnail-editor-nav[data-thumbnail-editor-nav] { display: none !important; }
  /* Die drei Aktionen hinter dem Drei-Punkte-Menue oben links. */
  .thumbnail-editor-modal-content .factory-image-media > .factory-image-menu-knopf {
    position: absolute; z-index: 6; top: 8px; left: 8px;
    display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px;
    background: rgba(8, 10, 15, .72); color: #fff; font-size: 22px; cursor: pointer;
  }
  /* Schliessen-Kreuz auf derselben Hoehe und in derselben Groesse wie die drei Punkte
     (Nutzerwunsch): vorher 12 px vom Dialogrand, knapp 30 px hoeher als der Menueknopf. */
  /* Das Kreuz sitzt als eigener Knopf in der rechten oberen Bildecke - das Kreuz der
     Kopfzeile stand bei schmalen Hochformatbildern neben dem Bild. */
  /* Nur ausblenden, wenn das Kreuz in der Bildecke wirklich da ist - beim Laden, bei einem
     Fehler oder ohne Bildflaeche blieb sonst kein Weg zurueck (Nutzermeldung 25.09.2026). */
  .thumbnail-editor-modal-dialog:has(.factory-image-media > .factory-image-close-knopf) > .thumbnail-editor-modal-head { display: none !important; }
  .thumbnail-editor-modal-content .factory-image-media > .factory-image-close-knopf {
    position: absolute; z-index: 6; top: 8px; right: 8px;
    display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px;
    background: rgba(8, 10, 15, .72); color: #fff; font-size: 22px; cursor: pointer;
  }
  /* Keine Luecke ueber der Leiste (Nutzerwunsch): 12 + 2 + 24 px Abstand oberhalb des
     Bildbereichs entfallen, die Leiste mit Menue und Kreuz steht oben im Dialog. */
  .thumbnail-editor-modal-content { padding-top: 0 !important; }
  .thumbnail-editor-modal-content > div > .result-finished { padding-top: 0 !important; }
  .thumbnail-editor-modal-content .result-finished .factory-image-result { margin-top: 0 !important; }
  /* Gleiche Gestalt wie der Drei-Punkte-Knopf (Nutzerwunsch). */
  .thumbnail-editor-modal-dialog > .thumbnail-editor-modal-head button {
    width: 40px !important; height: 40px !important; padding: 0 !important;
    display: grid !important; place-items: center;
    border: 1px solid rgba(255, 255, 255, .22) !important; border-radius: 12px !important;
    background: rgba(8, 10, 15, .72) !important; color: #fff !important;
    font-size: 22px !important; box-shadow: none !important;
  }
  .thumbnail-editor-modal-dialog > .thumbnail-editor-modal-head button i { font-size: 22px !important; line-height: 1; }
  .thumbnail-editor-modal-content .factory-image-media:not(.ist-menue-offen) > .factory-image-download-overlay { display: none !important; }
  /* Menue wie im Video-Kino (Nutzerwunsch 25.09.2026, CFAI-MOB-20260925-126): ein
     gemeinsamer Kasten statt drei einzelner Kaertchen - 240 px breit, 6 px Innenabstand,
     14 px Ecke, Zeilen 44 px ohne eigenen Rahmen, 2 px Abstand, Beschriftung 14 px.
     Die Eintraege haben im HTML keinen gemeinsamen Behaelter; den Kasten zeichnet
     ::before der Bildflaeche hinter ihnen (3 Eintraege = 148 px, nur Download = 56 px). */
  .thumbnail-editor-modal-content .factory-image-media.ist-menue-offen::before {
    content: ""; position: absolute; z-index: 6; top: 54px; left: 10px;
    width: min(240px, calc(100% - 20px)); height: 56px; box-sizing: border-box;
    border: 1px solid #303440; border-radius: 14px; background: #151820;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5); pointer-events: none;
  }
  .thumbnail-editor-modal-content .factory-image-media.ist-menue-offen:has(> .factory-image-reuse-video-overlay)::before { height: 148px; }
  .thumbnail-editor-modal-content .factory-image-media.ist-menue-offen > .factory-image-download-overlay {
    left: 17px !important; right: auto !important; bottom: auto !important; z-index: 7;
    display: flex !important; align-items: center; justify-content: flex-start; gap: 12px;
    width: min(226px, calc(100% - 34px)) !important; height: 44px !important; min-height: 44px; padding: 0 12px !important;
    border: 0 !important; border-radius: 10px !important;
    background: transparent !important; color: #f4f5f8 !important; font-size: 20px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .32) !important; transform: none !important; backdrop-filter: blur(12px) !important;
  }
  .thumbnail-editor-modal-content .factory-image-media.ist-menue-offen > .factory-image-download-overlay:active { background: #232733 !important; }
  .thumbnail-editor-modal-content .factory-image-media.ist-menue-offen > .factory-image-download-overlay > i { width: 22px; font-size: 20px !important; }
  .thumbnail-editor-modal-content .factory-image-media.ist-menue-offen > .factory-image-download-overlay::after {
    content: attr(aria-label); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .thumbnail-editor-modal-content .factory-image-media.ist-menue-offen > .factory-image-download-overlay[data-menue-text]::after { content: attr(data-menue-text); }
  .thumbnail-editor-modal-content .factory-image-media.ist-menue-offen > .factory-image-download-overlay:not(.factory-image-reuse-overlay):not(.factory-image-reuse-video-overlay) { top: 60px !important; }
  .thumbnail-editor-modal-content .factory-image-media.ist-menue-offen > .factory-image-reuse-overlay { top: 106px !important; }
  .thumbnail-editor-modal-content .factory-image-media.ist-menue-offen > .factory-image-reuse-video-overlay { top: 152px !important; }
}

/*
CFAI-MOB-20260925-084 (Nutzermeldung 25.09.2026 "wieso ist der Prompt leer"): Im
Bildeditor stand unter "Prompt / Briefing" ein leerer Kasten, obwohl der Prompt da ist.
Am Schreibtisch hat die Detailkarte eine feste Hoehe, der Prompt fuellt den Rest und
scrollt. Auf schmalen Bildschirmen fehlt diese Hoehe; das scrollbare Feld (flex 1 1 auto,
min-height 0) schrumpfte auf 0 px. Hier bekommt es seine eigene Hoehe, hoechstens 170 px.
*/
@media (max-width: 760px) {
  /* Nur der Prompt scrollt (Nutzerwunsch): die Karte selbst war auf 300 px begrenzt
     und scrollte ebenfalls - zwei Scrollbalken ineinander. */
  .factory-generation-info {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .factory-generation-info-item.is-prompt { flex: none !important; }
  .factory-generation-info-item.is-prompt dd {
    flex: none !important;
    max-height: 170px !important;
    overflow-y: auto;
  }
}

/*
CFAI-MOB-20260925-085 (Nutzerwunsch 25.09.2026 mit Bildschirmfoto, nur Telefon): Im
Thumbnail-Verlauf stand ein Hochformatbild fest 280 px breit links, daneben eine Luecke,
waehrend Querformatbilder die volle Breite nutzen. Hochformate jetzt halb so breit wie
eine Zeile: zwei stehen nebeneinander (wie die Shorts, 082), ein einzelnes steht mittig.
*/
@media (max-width: 650px) {
  #workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-grid { justify-content: center; }
  #workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card.is-thumbnail-portrait {
    flex: 0 0 calc(50% - 8px) !important;
    min-width: 0 !important;
  }
}

/*
Nutzerwuensche 25.09.2026 (nur Telefon):
  CFAI-MOB-20260925-086 "Produktion starten": Text und Credit-Chip stehen mittig statt links.
  CFAI-MOB-20260925-087 Ergebnis-Downloads (DOCX, TXT, SRT) in einer Zeile mit drei Spalten
                        statt drei ganzen Zeilen untereinander.
*/
@media (max-width: 760px) and (pointer: coarse) {
  .workspace-run { justify-content: center !important; }
  .result-actionbar .result-downloads {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .result-actionbar .result-downloads .result-download {
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/*
CFAI-MOB-20260925-088 (Nutzerwuensche 25.09.2026, nur Telefon):
  - Sprachfenster: Blaetterpfeile aus, gewischt wird (ai-contentfactory.js).
  - Transkription: die vier Kennzahlen (Sprache, Dauer, Woerter, Absaetze) in einer Zeile.
  - Sprachaufnahmen: Play-Knopf mittig in der Karte statt unten rechts.
  - Content-Kalender: Monatsansicht deutlich groesser (Zellen 38 -> 76 px hoch,
    Datum 10 -> 13 px, Vorschaubilder 17 -> 34 px).
*/
@media (max-width: 760px) and (pointer: coarse) {
  .generic-tool-modal .thumbnail-editor-nav[data-speech-nav] { display: none !important; }

  .transcription-metrics { flex-wrap: nowrap !important; justify-content: space-between; }
  .transcription-metrics > span { padding-left: 9px !important; font-size: 14px !important; white-space: nowrap; }
  .transcription-metrics > span:first-child { padding-left: 0 !important; }


  html body .calendar-grid { height: auto !important; }
  /* Nachtrag (Nutzerwunsch): Tage quadratisch, 76 x 76 px; der Monat ist damit breiter
     als das Telefon und scrollt waagerecht, die Wochentage laufen mit. */
  html body .content-calendar-months { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  html body .content-calendar-month { min-width: calc(7 * 76px) !important; }
  html body .content-calendar-month .calendar-weekdays,
  html body .content-calendar-month .calendar-grid { grid-template-columns: repeat(7, 76px) !important; width: calc(7 * 76px) !important; }
  html body .calendar-grid .calendar-day {
    aspect-ratio: 1 / 1 !important;
    width: 76px !important;
    height: 76px !important;
    min-height: 76px !important;
    padding: 4px !important;
  }
  html body .calendar-grid .calendar-date { font-size: 13px !important; height: auto !important; }
  html body .calendar-grid .calendar-event,
  html body .calendar-grid .calendar-event-tile { height: 34px !important; }
  html body .calendar-grid .calendar-event img { height: 32px !important; object-fit: cover; }
}

/*
CFAI-MOB-20260925-089 (Nutzerwuensche 25.09.2026, nur Telefon):
  - Ergebnis-Downloads: die Ueberschrift "Download" belegte selbst eine Rasterzelle, der
    dritte Knopf rutschte in eine zweite Zeile. Sie steht jetzt ueber allen drei Spalten.
  - Short-Detail: Blaetterpfeile aus, gewischt wird (ai-contentfactory.js).
  - Werkzeugfenster: die Knopfleiste ragte je 15 px ueber die Felder hinaus, "Weiter"
    stand klein links. Leiste auf Feldbreite, "Weiter" ueber die ganze Breite, mittig.
*/
@media (max-width: 760px) and (pointer: coarse) {
  .result-actionbar .result-downloads > .result-action-label { grid-column: 1 / -1; }

  .shorts-detail-dialog > .shorts-detail-nav { display: none !important; }

  html body .generic-tool-modal-dialog .workspace-form .workspace-group > .workspace-actions { padding-left: 15px !important; padding-right: 16px !important; }
  .generic-tool-modal .workspace-actions .wizard-primary {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }
}

/*
CFAI-MOB-20260925-090 (25.09.2026): Social Posts zweispaltig im 4:5-Fenster - ersetzt am
03.10.2026 durch die Post-Karten in einer Spalte (AL-20261003-03, Regeln in
ai-contentfactory-pages.css bei .sp-feed-karte). Die Regeln hier sind entfernt, nicht
ueberschrieben.
*/

/*
CFAI-MOB-20260925-091 (Nutzerwunsch 25.09.2026 mit Bildschirmfoto): Im Video-Kino auf dem
Telefon lag das Schliessen-Kreuz 8 px hoeher als der Drei-Punkte-Knopf und sah anders aus.
Die Punkte stehen 10 px im Player, der Player 20 px unter der Fensterkante; das Kreuz steht
jetzt auf derselben Hoehe, mit demselben Randabstand und in derselben Gestalt.
*/
@media (max-width: 700px) {
  .video-history-cinema-overlay .video-history-detail.ist-telefon-kino > .video-history-detail-close {
    top: 20px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 12px !important;
    background: rgba(8, 10, 15, .72) !important;
    color: #fff !important;
    font-size: 22px !important;
  }
}

/*
CFAI-MOB-20260925-092 (Nutzermeldung 25.09.2026): Die Social-Freigabe hatte keinen
Schliessen-Knopf; auf dem Telefon fuellt sie den Bildschirm, es gab keinen Weg zurueck
(auch die Zurueck-Taste suchte diesen Knopf vergeblich). Am Schreibtisch schliesst ein
Klick daneben, dort bleibt der Knopf unsichtbar.
Seit AL-20261003-10 steht das Kreuz in der Leiste .sp-gross-leiste; bis 700 px ist sie
eine klebende Kopfleiste (Regeln weiter unten), zwischen 701 und 760 px loest sie sich auf
und das Kreuz sitzt wie bisher oben rechts im Fenster.
*/
.social-poster-review-close { display: none; }
@media (max-width: 760px) {
  .social-poster-review-dialog { position: relative; }
  .social-poster-review-dialog .social-poster-review-close {
    position: absolute; z-index: 9; top: 10px; right: 10px;
    display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px;
    background: rgba(8, 10, 15, .72); color: #fff; font-size: 22px; cursor: pointer;
  }
}
/* "Posten" gesperrt, solange kein Netzwerk gewaehlt ist (alle Groessen). */
.social-poster-review [data-approve-social-post]:disabled { opacity: .45; cursor: not-allowed; }

/*
AL-20261003-10 (Betreiber 03.10.2026 mit Bildschirmfoto: "Die Ansicht sieht scheisse aus du
sollst es aussehen lassen wie einen richtigen post"): Am Telefon war die Freigabe eine Karte
mitten im Fenster - oben leere Flaeche, das Bild klein mit schwarzen Raendern, das Kreuz ueber
der Kartenecke, Fett und Zauberstab zwischen Herz und Kommentar, der Posttext in einem eigenen
Rollbereich mit Scrollbalken und unten abgeschnitten.
Jetzt bis 700 px eine Vollbildansicht wie ein Post im Feed: oben eine klebende Leiste mit dem
Kreuz, darunter Kopfzeile (Profilbild, Konto, Kanaele, Format), das Bild in voller Breite im
echten Format (9:16 auf 80 % der Hoehe begrenzt), die Feed-Symbole, eine eigene beschriftete
Bearbeiten-Leiste und der Text in Lesegroesse mit dem Kontonamen davor. Es rollt die ganze
Ansicht, nicht der Text. Netzwerke und "Posten" kleben als Leiste am unteren Rand.
Die Grundregeln (PC unveraendert) stehen in ai-contentfactory-pages.css.
*/
@media (max-width: 700px) {
  .social-poster-review-modal {
    display: block;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Fokus und scrollIntoView halten Abstand zu den klebenden Leisten. */
    scroll-padding-top: 60px;
    scroll-padding-bottom: 90px;
    background: #050609;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .social-poster-review-modal .social-poster-review-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 100%;
    max-height: none;
    margin: 0;
    overflow: visible;
    border-radius: 0;
    background: #050609;
    transform: none;
  }
  .social-poster-review-dialog .sp-gross-leiste {
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 52px;
    padding: calc(4px + env(safe-area-inset-top)) 4px 4px 16px;
    border-bottom: 1px solid rgba(142, 151, 173, .14);
    background: rgba(5, 6, 9, .96);
  }
  .social-poster-review-dialog .sp-gross-titel {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #f5f6f8;
    font: 700 16px/1.2 'DM Sans', sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .social-poster-review-dialog .sp-gross-leiste > .social-poster-review-close {
    position: static;
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 26px;
  }
  .social-poster-review-modal [data-social-poster-review-content] { display: block; }
  .social-poster-review-modal .social-poster-review {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: calc(100dvh - 52px);
  }
  .social-poster-review-modal .social-poster-review-image { display: block; flex: none; }
  .social-poster-review-modal .sp-post-karte {
    display: block;
    width: 100%;
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #050609;
    box-shadow: none;
  }
  /* Kopfzeile wie in den Uebersichtskarten (.sp-feed-kanal), nur mit Konto. */
  .social-poster-review-modal .sp-post-karte > .sp-gross-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
  }
  .social-poster-review-modal .sp-gross-kopf .sp-post-avatar { width: 36px; height: 36px; font-size: 15px; }
  .social-poster-review-modal .sp-gross-kopf .sp-post-konto b {
    overflow: hidden;
    color: #f5f6f8;
    font: 700 14px/1.25 'DM Sans', sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .social-poster-review-modal .sp-gross-kopf .sp-post-konto small {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #9aa3b2;
    font: 500 12px/1.25 'DM Sans', sans-serif;
  }
  .social-poster-review-modal .sp-gross-kanaele { display: inline-flex; flex: none; gap: 3px; }
  .social-poster-review-modal .sp-gross-kopf .sp-feed-kanal { width: 18px; height: 18px; font-size: 11px; }
  /* Bild in voller Breite im echten Format - keine Seitenraender bei 1:1 und 4:5. */
  .social-poster-review-modal .sp-post-bild {
    display: block;
    flex: none;
    width: 100%;
    min-height: 0;
    border-radius: 0;
    background: #000;
    line-height: 0;
  }
  .social-poster-review-modal .sp-post-bild > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 80dvh;
    margin: 0 auto;
    object-fit: contain;
    background: #000;
  }
  .social-poster-review-modal .sp-post-leiste { display: block; padding: 0; }
  .social-poster-review-modal .sp-post-leiste > .sp-post-aktionen {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px 4px;
    color: #f1f3f7;
    font-size: 24px;
  }
  .social-poster-review-modal .sp-post-leiste .sp-post-merken { display: inline-block; margin-left: auto; }
  /* Bearbeiten-Leiste: getrennt von den Feed-Symbolen, beschriftet.
     AL-20261003-29 (Betreiber 03.10.2026: "Der Fett und mit KI bearbeiten Button sieht echt
     komisch aus"): kein Kasten mehr um die Leiste, statt dicker roter Pillen zwei ruhige,
     schmale Knoepfe (sichtbar 32 px) linksbuendig unter den Feed-Symbolen. Die Tippflaeche
     bleibt 40 px hoch: der Knopf selbst ist durchsichtig, die sichtbare Flaeche ist ::before
     mit 4 px Abstand oben und unten. Symbole klein in Akzentrot, Fokus nur als roter Rand. */
  .social-poster-review-modal .sp-post-werkzeuge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .social-poster-review-modal .sp-post-werkzeug {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    min-height: 40px;
    padding: 0 11px 0 9px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: #ff5c79;
    font-size: 16px;
    transform: none;
  }
  .social-poster-review-modal .sp-post-werkzeug::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 4px 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: #151821;
    transition: border-color .16s ease;
  }
  .social-poster-review-modal .sp-post-werkzeug:hover { background: none; color: #ff5c79; transform: none; }
  .social-poster-review-modal .sp-post-werkzeug:focus-visible { outline: none; }
  .social-poster-review-modal .sp-post-werkzeug:focus-visible::before,
  .social-poster-review-modal .sp-post-werkzeug:active::before { border-color: rgba(255, 62, 99, .75); }
  .social-poster-review-modal .sp-post-werkzeug > .mdi { line-height: 1; }
  .social-poster-review-modal .sp-post-werkzeug-name {
    display: inline;
    color: #e6e9f1;
    font: 600 13px/1 'DM Sans', sans-serif;
    white-space: nowrap;
  }
  .social-poster-review-modal .sp-post-speicherstand { margin: 0 4px 0 auto; }
  /* Text in Lesegroesse, Kontoname fett davor; kein eigener Rollbereich. */
  .social-poster-review-modal .sp-post-unterschrift {
    display: block;
    padding: 8px 14px 18px;
    color: #e8ebf1;
    font: 400 14.5px/1.45 'DM Sans', sans-serif;
  }
  .social-poster-review-modal .sp-post-text-konto {
    display: inline;
    float: left;
    margin-right: 6px;
    color: #fff;
    font: 700 14.5px/1.45 'DM Sans', sans-serif;
  }
  .social-poster-review-modal .sp-post-text {
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: visible;
    border-radius: 6px;
    color: #e8ebf1;
    font: 400 14.5px/1.45 'DM Sans', sans-serif;
  }
  .social-poster-review-modal .sp-review-hinweis { margin: 0 14px 14px; }
  /* Netzwerke und "Posten" als Leiste am unteren Rand. */
  .social-poster-review-modal .social-poster-copy-editor {
    position: sticky;
    bottom: 0;
    z-index: 7;
    gap: 4px;
    margin-top: auto;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid rgba(142, 151, 173, .16);
    background: rgba(8, 9, 13, .97);
    box-shadow: 0 -12px 24px rgba(0, 0, 0, .45);
  }
  .social-poster-review-modal .sp-review-leiste { flex-wrap: nowrap; gap: 10px; }
  .social-poster-review-modal .sp-review-kanaele { flex-wrap: nowrap; gap: 8px; }
  .social-poster-review-modal .sp-kanal-symbol { width: 42px; height: 42px; font-size: 19px; }
  .social-poster-review-modal .sp-social-publish { margin-left: auto; }
  .social-poster-review-modal .social-poster-review-actions .workspace-run {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 15px;
  }
  .social-poster-review-modal .social-poster-review-feedback:empty { display: none; }
}

/*
CFAI-MOB-20260925-094 (Nutzerwunsch 25.09.2026): Der Play-Knopf der Sprachaufnahmen sitzt
immer in der Mitte der Karte - Schreibtisch, Tablet und Telefon. Damit er keinen Titel
verdeckt, ist jede Karte mindestens 204 px hoch: die Mitte liegt dann ueber dem
Beschriftungsblock (103 px, Titel 30 px unter dessen Oberkante). Der Titel nutzt wieder
die volle Breite, der rechte Freiraum fuer den Knopf (069) entfaellt.
*/
html body .speech-gallery-card {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 204px !important;
}
html body .speech-gallery-card .speech-preview-play {
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
}
html body .speech-gallery-card .speech-gallery-caption { padding-right: 18px !important; }

/*
CFAI-MOB-20260925-095 (Nutzerwunsch 25.09.2026, Telefon): "Text im Bild" im Bildeditor
kompakter. Die vier Gruppen standen als umbrechende Zeile mit Einzug und Trennlinie da,
jede fast allein in ihrer Reihe. Jetzt ein Raster: Schrift und Farbe ueber die volle
Breite, darunter Ausrichtung und Deckkraft nebeneinander, dann Lesbarkeit mit drei
gleich breiten Knoepfen. Reihenfolge der Gruppen: 1 Schrift, 2 Ausrichtung,
3 Lesbarkeit, 4 Deckkraft.
*/
@media (max-width: 760px) and (pointer: coarse) {
  html body .banner-designer-compact .banner-designer-text-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px 12px !important;
    align-items: start !important;
  }
  html body .banner-designer-compact .banner-designer-text-grid > .banner-designer-gruppe { padding-left: 0 !important; min-width: 0; }
  html body .banner-designer-compact .banner-designer-text-grid > .banner-designer-gruppe::before { display: none !important; }
  html body .banner-designer-compact .banner-designer-text-grid > .banner-designer-gruppe:nth-child(1) { grid-column: 1 / -1; order: 1; }
  html body .banner-designer-compact .banner-designer-text-grid > .banner-designer-gruppe:nth-child(2) { order: 2; }
  html body .banner-designer-compact .banner-designer-text-grid > .banner-designer-gruppe:nth-child(4) { order: 3; }
  html body .banner-designer-compact .banner-designer-text-grid > .banner-designer-gruppe:nth-child(3) { grid-column: 1 / -1; order: 4; }
  html body .banner-designer-compact .banner-designer-text-grid .banner-designer-effects {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  html body .banner-designer-compact .banner-designer-text-grid .banner-designer-effects > * {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 12px !important;
  }
  html body .banner-designer-compact .banner-designer-text-grid > .banner-designer-gruppe:nth-child(4) > div,
  html body .banner-designer-compact .banner-designer-text-grid .banner-designer-opacity { width: 100% !important; min-width: 0 !important; }
  html body .banner-designer-compact .banner-designer-text-grid .banner-designer-opacity input { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
  /* Schriftauswahl nimmt die Zeile neben dem Farbfeld ein. */
  html body .banner-designer-compact .banner-designer-text-grid .banner-designer-font { flex: 1 1 auto !important; min-width: 0 !important; }
  html body .banner-designer-compact .banner-designer-text-grid .banner-designer-font select { width: 100% !important; }
}
/* Hinweiskaestchen aus data-tooltip erscheinen auf Touch-Geraeten nicht: dort blieb der
   Hover-Zustand nach dem Antippen stehen und das Kaestchen lag ueber der Ueberschrift. */
@media (hover: none) {
  .factory-mini-toolbar button::after,
  .script-document-copy::after { display: none !important; }
}

/* CFAI-MOB-20260925-097 (Nutzerwunsch: "Parameter komisch verteilt, Chatbox breiter"):
   Social-Post-Fenster auf dem Telefon. Dialog- und Innenrand nahmen je Seite 42 px,
   die Box war bei 412 px nur 325 px breit; der Parameterbereich (157 px) brach
   Modell, Format und Zahnrad in drei Zeilen um. Jetzt schmaler Rand, und die
   Parameter stehen in einer Zeile neben "Bilder auswaehlen". */
@media (max-width: 560px) {
  html body .social-poster-production-modal .thumbnail-production-dialog { padding-left: 6px; padding-right: 6px; }
  html body .social-poster-production-modal .thumbnail-production-body { padding-left: 0; padding-right: 0; }
  html body .sp-composer .tk-konfig-halter { flex-wrap: nowrap; }
  /* Die Chipgruppen standen auf voller Zeilenbreite (flex 1 0 100%) - daher
     der Umbruch. Das Modell schrumpft mit und kuerzt mit "...". */
  html body .sp-composer .tk-konfig-halter > [data-sp-modell] { flex: 0 1 auto; min-width: 0; }
  html body .sp-composer .tk-konfig-halter > [data-sp-formats] { flex: 0 0 auto; }
  html body .sp-composer [data-sp-modell] .tk-param-chip span { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
  /* Die Beschriftung trug eigene 12 px (form-v2) und machte den Bildknopf 132 px
     breit; kompakter bleibt dem Modellnamen auch bei 390 px genug Platz. */
  html body .sp-composer .sp-anhang-feld .video-file-picker { gap: 5px; padding: 0 9px; }
  /* Ein geerbter Abstand (14 px oben) setzte den Knopf tiefer als die Chips daneben. */
  html body .sp-composer .sp-anhang-feld { margin-top: 0 !important; }
  html body .sp-composer .sp-anhang-feld .video-file-picker b { font-size: 11px; }
}

/* CFAI-MOB-20260925-098 (Nutzerwunsch): Auf dem Telefon wird das Bild im
   aufklappbaren Einstellungsfeld ausgewaehlt, nicht in der Leiste. Das Feld
   verschiebt das Komponisten-Skript (sp-anhang-im-panel); hier sieht es aus
   wie die anderen Felder des Panels: Ueberschrift, breiter Knopf mit
   Statuszeile, Hinweis und Vorschau darunter. */
@media (max-width: 560px) {
  html body .sp-composer .tk-eingabe-aktionen:has(.sp-anhang:empty) { grid-template-columns: minmax(0, 1fr); }
  html body .sp-composer .sp-anhang:empty { display: none; }
  html body .sp-composer .sp-anhang-feld.sp-anhang-im-panel { display: grid; gap: 8px; align-items: stretch; }
  html body .sp-composer .sp-anhang-feld.sp-anhang-im-panel > label:not(.video-file-picker) { display: block; }
  html body .sp-composer .sp-anhang-feld.sp-anhang-im-panel > .workspace-help { display: block; margin: 0; }
  html body .sp-composer .sp-anhang-feld.sp-anhang-im-panel .video-file-picker {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
  }
  html body .sp-composer .sp-anhang-feld.sp-anhang-im-panel .video-file-picker span { display: grid; gap: 2px; text-align: left; }
  html body .sp-composer .sp-anhang-feld.sp-anhang-im-panel .video-file-picker b { font-size: 13px; }
  html body .sp-composer .sp-anhang-feld.sp-anhang-im-panel .video-file-picker small { display: block; font-size: 11px; font-weight: 500; color: #8a93a7; }
  html body .sp-composer .sp-anhang-feld.sp-anhang-im-panel .reference-image-preview-list { position: static; flex-wrap: wrap; }
  html body .sp-composer .sp-anhang-feld.sp-anhang-im-panel .reference-image-preview-list:empty { display: none; }
}

/* CFAI-MOB-20260925-100 (Nutzerwunsch mit Bildschirmfoto: "da wird ein Stueck
   abgeschnitten"): Die Kennzahlenzeile der Transkription (088, eine Zeile) war
   fest 310 px breit - vier Werte plus je 14 px Abstand und 9 px Einzug. Auf
   Geraeten mit vergroesserter Schrift ist die Seite schmaler, die Zeile ragte
   ueber die Karte und der letzte Wert war abgeschnitten. Jetzt wachsen Schrift
   und Abstaende mit der Kartenbreite (Container-Einheiten); bis rund 230 px
   bleibt es eine Zeile, darunter bricht sie um, statt abzuschneiden. */
@media (max-width: 760px) and (pointer: coarse) {
  html body .transcription-metrics {
    container-type: inline-size;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap !important;
    row-gap: 8px;
  }
  html body .transcription-metrics > span { gap: 1.6cqi; }
  html body .transcription-metrics > span + span { margin-left: 2.6cqi !important; padding-left: 2.6cqi !important; }
  html body .transcription-metrics > span > b { font-size: clamp(11px, 4.5cqi, 14px) !important; }
  html body .transcription-metrics > span > i { font-size: clamp(12px, 5cqi, 16px) !important; }
  /* Der Dateiname kuerzt mit "..." - das griff nicht, weil der Rasterblock
     darueber nicht schmaler als sein Inhalt werden durfte. */
  html body .transcription-hero > * { min-width: 0; }
}

/*
CFAI-MOB-20260925-128 (Nutzermeldung 25.09.2026: aus der Short-Ansicht kam man nur mit
der Android-Zuruecktaste heraus): Das Kreuz sitzt 52 px ueber dem Fenster. Mit den
"Weiteren Vorschlaegen" reicht das Fenster bis oben, das Kreuz liegt dann ueber dem
Bildschirmrand. Auf dem Telefon entfaellt es wie bei den Produktionsfenstern; dafuer
setzt contentfactory-zurueck.js den gewohnten Zurueck-Pfeil oben links (das Fenster wird
dort am Fenster erkannt, nicht mehr am Kreuz).
*/
@media (max-width: 760px) and (pointer: coarse) {
  .shorts-detail-dialog .shorts-detail-close { display: none !important; }
}

/*
MOB17-42 (Betreiber 17.10.2026: "wenn ich am handy ganz runter scrolle dann kann die obere
leiste komplett verschwinden und kommt nicht mehr"): Die Seite ist 100vh hoch - auf dem
Handy der grosse Viewport bei eingefahrener Adressleiste. Ist sie ausgefahren, laesst sich
das Dokument um ihre Hoehe scrollen; am Ende des Werkzeugbereichs ging das Wischen an das
Dokument weiter und schob die obere Leiste aus dem Bild. Bei offenem Werkzeug scrollt das
Dokument deshalb nicht mehr, und der Werkzeugbereich gibt sein Scrollen nicht weiter.
*/
@media (max-width: 1024px) {
  html:has(body.workspace-open), body.workspace-open { overflow-y: hidden !important; }
  body.workspace-open #factory-workspace .workspace-panel { overscroll-behavior: contain; }
}

/*
MOB17-45 (Betreiber 17.10.2026: "die buttons da unten sind zum teil abgeschnitten"): Creator-Profil,
Upgrade und Credits kaufen sind hoechstens 100vh hoch - auf dem Handy der Bildschirm bei
eingefahrener Adressleiste. Ist sie sichtbar, reichte das Fenster um ihre Hoehe unter den Rand und
die Knoepfe unten waren nur halb zu sehen. Die Grenze richtet sich jetzt nach der sichtbaren Hoehe
(100dvh); max-height begrenzt auch die feste Hoehe von Upgrade. Am PC ist 100dvh gleich 100vh.
*/
@media (max-width: 1024px) {
  :is(html, #mob#sichtbar#dvh) body:is(.profile-modal-open, .factory-upgrade-focus, .factory-credit-focus) .factory-workspace.open .workspace-panel { max-height: calc(100dvh - 16px) !important; }
}
/* MOB19-12 (19.10.2026): Auf Touch-Tablets setzt contentfactory-zurueck.js oben links einen schwebenden Zurück-Pfeil (12-52 px);
   er lag über der Ecke von Upgrade und Credit-Kauf. Das mittig gesetzte Fenster (top: 50 %, verschoben) rückt am Tablet um
   30 px nach unten und ist 60 px niedriger – es steht immer zwischen Pfeil und unterem Rand. */
@media (min-width: 761px) and (max-width: 1024px) {
  :is(html, #mob#sichtbar#dvh) body:is(.factory-upgrade-focus, .factory-credit-focus) .factory-workspace.open .workspace-panel { max-height: calc(100dvh - 76px) !important; top: calc(50% + 30px) !important; }
}

/*
MOB17-47 (Betreiber 17.10.2026: "bitte den produktionsbutton dort fixieren. aktuell muss ich erst
ganz runterscrollen um ihn zu sehen" - Sprachausgabe, Video uebersetzen, Transkription, Videoskript
mit "Weiter" und im zweiten Schritt): In allen Produktionsfenstern klebt die Knopfzeile am unteren
Rand, das Formular scrollt darueber. Gescrollt wird das Fenster selbst, die Zeile ist das letzte
Kind ihres Formularabschnitts - sticky reicht. Am Handy reicht ihr Grund ueber die ganze
Fensterbreite (alle Fenster sind dort 100vw - 16px breit, die Zeile steht mittig). Am Handy steht der Hinweis (z. B. Recherche-Aufschlag) klein
darueber, "Zurueck" kompakt links neben dem Start- bzw. Weiter-Knopf.
*/
@media (max-width: 1024px) {
  :is(html, #mob#start#fest) body :is(.generic-tool-modal, .dubbing-production-modal, .transcription-production-modal).is-open .workspace-form .workspace-actions {
    background: #0c0e14 !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    bottom: 0 !important;
    box-shadow: 0 -16px 18px -12px rgba(0, 0, 0, .75) !important;
    margin-top: 16px !important;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    position: sticky !important;
    z-index: 5 !important;
  }
}
@media (max-width: 760px) {
  :is(html, #mob#start#fest) body :is(.generic-tool-modal, .dubbing-production-modal, .transcription-production-modal).is-open .workspace-form .workspace-actions {
    align-items: center !important;
    border-top: 0 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Video uebersetzen hat unten 16 px Innenabstand im scrollenden Fenster; dort haelt sticky sonst an - Inhalt schiene darunter durch. */
  :is(html, #mob#start#fest) body .dubbing-production-modal.is-open .workspace-form .workspace-actions { bottom: -16px !important; }
  :is(html, #mob#start#fest) body :is(.generic-tool-modal, .dubbing-production-modal, .transcription-production-modal).is-open .workspace-form .workspace-actions::before {
    background: #0c0e14;
    border-top: 1px solid rgba(255, 255, 255, .08);
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: calc(100vw - 18px);
    z-index: -1;
  }
  :is(html, #mob#start#fest) body :is(.generic-tool-modal, .dubbing-production-modal, .transcription-production-modal).is-open .workspace-form .workspace-actions > :is(.workspace-note, .workspace-run-note) {
    flex: 1 0 100% !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    order: -1 !important;
  }
  :is(html, #mob#start#fest) body :is(.generic-tool-modal, .dubbing-production-modal, .transcription-production-modal).is-open .workspace-form .workspace-actions > .wizard-secondary {
    flex: 0 0 auto !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    width: auto !important;
  }
  :is(html, #mob#start#fest) body :is(.generic-tool-modal, .dubbing-production-modal, .transcription-production-modal).is-open .workspace-form .workspace-actions > :is(.wizard-primary, .workspace-run) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
}

/*
MOB17-51 (Betreiber 17.10.2026, Entwurf freigegeben: "das mit der shorts anpassung sieht jetzt gut aus"):
Shorts am Handy - oben "Captions einbrennen", darunter Caption-Stil und Schriftart nebeneinander; dann
links das Video, rechts Schriftgroesse, Hoehe, Zeilen und Sprechfarbe; direkt unter dem Video der
Bildausschnitt, danach Seitenverhaeltnis, Bildanpassung, Bild und Ton ueber die volle Breite.
Die Caption-Einstellungen stehen dafuer einzeln im Raster der Vorschau (display: contents); ihre
Reihenfolge legt shortsUntertitelVorschauHtml() fest (Stil, Schrift, Groesse, Hoehe, Zeilen, Farbe).
Die beiden Regler sind flacher, damit "Schriftgroesse" an der Oberkante des Videos beginnt.
*/
@media (max-width: 760px) {
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-preview {
    align-items: start !important;
    display: grid !important;
    gap: 10px 12px !important;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr) !important;
  }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-preview > .shorts-caption-controls { display: contents !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-preview > .shorts-caption-controls > * { margin: 0 !important; min-width: 0 !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-preview > .shorts-caption-toggle-field { grid-column: 1 / -1 !important; grid-row: 1 !important; margin: 0 !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-controls > :nth-child(1) { grid-column: 1 !important; grid-row: 2 !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-controls > :nth-child(2) { grid-column: 2 !important; grid-row: 2 !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-preview > .shorts-caption-stage {
    align-self: end !important;
    grid-column: 1 !important;
    grid-row: 3 / span 4 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-controls > :nth-child(3) { grid-column: 2 !important; grid-row: 3 !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-controls > :nth-child(4) { grid-column: 2 !important; grid-row: 4 !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-controls > :nth-child(5) { grid-column: 2 !important; grid-row: 5 !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-controls > :nth-child(6) { grid-column: 2 !important; grid-row: 6 !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-controls > :is(:nth-child(3), :nth-child(4)) { gap: 0 !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-controls > :is(:nth-child(3), :nth-child(4)) input[type=range] { height: 22px !important; margin: 0 !important; min-height: 0 !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-controls select { font-size: 12px !important; min-height: 36px !important; padding: 0 8px !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-controls small { display: none !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-preview > :not(.shorts-caption-stage, .shorts-caption-toggle-field, .shorts-caption-controls) { grid-column: 1 / -1 !important; margin: 0 !important; min-width: 0 !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-preview > .shorts-frame-controls { grid-row: 8 !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-preview > .shorts-editor-format { grid-row: 9 !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal .shorts-caption-preview > .shorts-bild-ton-field { grid-row: 10 !important; }
  /* MOB18-04 (Betreiber 18.10.2026: „videobereich müsste unter dem video sein in der mobil version"): Der Videobereich
     steht im Markup hinter dem ganzen Editor. Am Handy übernimmt die Vorschau-Figur das Raster, die Hüllen dazwischen
     lösen sich auf (display: contents) - so steht der Videobereich als Zeile 7 direkt unter dem Video. */
  :is(html, #mob#shorts#spalten) body .shorts-production-modal [data-shorts-preview]:not([hidden]) {
    align-items: start !important;
    display: grid !important;
    gap: 10px 12px !important;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr) !important;
  }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal [data-shorts-preview] > .shorts-editor,
  :is(html, #mob#shorts#spalten) body .shorts-production-modal [data-shorts-preview] > .shorts-editor > .shorts-caption-preview-field,
  :is(html, #mob#shorts#spalten) body .shorts-production-modal [data-shorts-preview] .shorts-caption-preview-field > .shorts-caption-preview { display: contents !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal [data-shorts-preview] > .shorts-range-editor { grid-column: 1 / -1 !important; grid-row: 7 !important; margin: 0 !important; min-width: 0 !important; }
  :is(html, #mob#shorts#spalten) body .shorts-production-modal [data-shorts-preview] > :is(.shorts-schnitt-buehne, figcaption) { grid-column: 1 / -1 !important; grid-row: 11 !important; }
}

/*
MOB17-55 (Betreiber 17.10.2026: "rechts wird bei den feldern was abgeschnitten"): Ein fieldset ist
mindestens so breit wie sein breitester nicht umbrechender Inhalt. Zeigte der Startknopf in Video
uebersetzen "12 Credits pro Minute", wurde das ganze Formular breiter als das Fenster und rechts
abgeschnitten. In den Produktionsfenstern richtet sich das Formular jetzt nach dem Fenster; ein
langer Preistext im Knopf wird notfalls mit "..." gekuerzt.
*/
@media (max-width: 1024px) {
  :is(html, #mob#fenster#breite) body :is(.generic-tool-modal, .dubbing-production-modal, .transcription-production-modal).is-open .workspace-form fieldset { min-inline-size: 0 !important; min-width: 0 !important; }
  :is(html, #mob#fenster#breite) body :is(.generic-tool-modal, .dubbing-production-modal, .transcription-production-modal).is-open .workspace-actions > .workspace-run { overflow: hidden !important; }
  :is(html, #mob#fenster#breite) body :is(.generic-tool-modal, .dubbing-production-modal, .transcription-production-modal).is-open .workspace-actions > .workspace-run > .workspace-run-pro-minute { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
}

/*
MOB17-50 (Betreiber 17.10.2026: "das rotmarkierte sollte man auch nicht unbedingt sehen"): Unter der
angedockten Chatbox von Video bearbeiten stand der Hinweis "Bitte waehle zuerst dein Video." Am Handy
und Tablet entfallen reine Hinweise dort; Fehlermeldungen (data-fehler) bleiben sichtbar. Der
Startknopf traegt den Hinweis weiter als Titel und fuer Vorleseprogramme (aria-describedby).
*/
@media (max-width: 1024px) {
  :is(html, #mob#editor#hinweis) body .video-production-modal.ist-eingebettet .video-editor-status:not([data-fehler]) { display: none !important; }
}

/*
MOB17-45, Nachtrag (Betreiber 17.10.2026: "jetzt ist zwar nichts abgeschnitten aber man muss scrollen
und das obwohl genug platz war"): Zwischen dem letzten Bereich ("Veroeffentlichen") und den Knoepfen
standen am Handy 58 px leer (16 px Abstand, 24 px Aussen-, 18 px Innenabstand). In der Uebersicht des
Creator-Profils jetzt rund 20 px - das Fenster passt auch mit eingeblendeter Adressleiste ohne Scrollen.
*/
@media (max-width: 760px) {
  :is(html, #mob#profil#kompakt) body .profile-settings.ist-liste { gap: 8px !important; }
  :is(html, #mob#profil#kompakt) body .profile-settings.ist-liste .profile-actions { margin-top: 0 !important; padding-top: 12px !important; }
}

/*
MOB17-58 (Betreiber 18.10.2026: "das selbe mit der leiste. sie springt direkt in ihre endposition statt sich
zur endposition hinzubewegen"): Das Handymenue sollte schon gleiten (0,24 s), die Regel fuer die
Seitenleiste am PC (body.factory-sidebar-state-ready .factory-sidebar: Breite/Innenabstand) ueberschrieb aber
den Uebergang - das Menue sprang. Am Handy gleitet es jetzt hinein und hinaus; der dunkle Hintergrund
blendet weich ein und aus statt auf- und zuzuspringen.
*/
@media (max-width: 700px) {
  html body.factory-sidebar-state-ready .factory-sidebar { transition: transform .24s ease-out, box-shadow .24s ease-out !important; }
  html body .factory-mobile-sidebar-backdrop { display: block !important; opacity: 0; pointer-events: none; transition: opacity .24s ease-out; }
  html body.factory-sidebar-mobile-open .factory-mobile-sidebar-backdrop { opacity: 1; pointer-events: auto; }
}

/* MOB19-05 (19.10.2026): Am Tablet lag die mitlaufende Kopfkarte "Neue
   Produktion" ebenso durchsichtig ueber Ueberschriften. Deckender Grund in der
   Fensterfarbe wie am Handy (004 oben); die Karte liegt ganz in der Kopfzeile. */
@media (min-width: 761px) and (max-width: 1024px) {
  body.factory-page-active #factory-workspace .workspace-header:has(.video-rebuild-header-action) {
    z-index: 6;
    background: linear-gradient(180deg, #0b0c11 0%, #0b0c11 88%, rgba(11, 12, 17, 0) 100%) !important;
  }
}

/*
MOB19-39/-45/-46/-56 (Betreiber 19.10.2026, iPad 6 quer): „es sollte eine box sein wo der button ist. aber nur mit einen
minimalen abstan zu oben und unten" und „die anderen params werden abgeschnitten und ich kann da auch nicht scrollen".
Bisher rollte am Tablet das ganze Werkzeugfenster (MOB19-06); die Startleiste klebte 90 px über dem Rand (Platz für den
Hilfe-Knopf), darunter blieb eine mitrollende Leerfläche. Bei Video übersetzen und Transkription schnitt der Fensterrahmen
den Inhalt ab, ohne dass er rollte. Jetzt passt das Fenster in die Bildschirmhöhe, nur der Inhalt rollt, und die
Startleiste ist eine eigene Box unten im Fenster mit gleichem Abstand über und unter dem Knopf. Ein Schatten in der
Fensterfarbe deckt den Streifen unter der Box ab, damit dort kein Inhalt durchscheint. Gilt für alle Werkzeugfenster
(allgemein, Video übersetzen, Transkription, Shorts-Schnitt) und den Fuß von Storyboard und Werbespot.
*/
@media (min-width: 761px) and (max-width: 1024px) {
  :is(html, #mob#fenster#box#tablet) body :is(.generic-tool-modal, .dubbing-production-modal, .transcription-production-modal, .shorts-production-modal).is-open {
    overflow: hidden !important;
    padding: 16px !important;
    justify-content: center !important;
  }
  :is(html, #mob#fenster#box#tablet) body :is(.generic-tool-modal, .dubbing-production-modal, .transcription-production-modal).is-open > :is(.generic-tool-modal-dialog, .dubbing-production-dialog, .transcription-production-dialog),
  :is(html, #mob#fenster#box#tablet) body .shorts-production-modal.is-open :is(.shorts-production-stage, .shorts-production-dialog) {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 32px) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }
  :is(html, #mob#fenster#box#tablet) body :is(.generic-tool-modal, .dubbing-production-modal, .transcription-production-modal, .shorts-production-modal).is-open :is(.generic-tool-modal-content, .dubbing-production-body, .transcription-production-body, .shorts-production-body) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding-bottom: 12px !important;
  }
  /* MOB20-05: Gemeinsamer flacher Balken statt einer weiteren Innenbox.
     --fuss-grund erhält die jeweilige Fensterfarbe und deckt den Streifen darunter ab. */
  :is(html, #mob#fenster#box#tablet) body :is(.generic-tool-modal, .dubbing-production-modal, .transcription-production-modal).is-open .workspace-form .workspace-actions,
  :is(html, #mob#fenster#box#tablet) body .shorts-production-modal.is-open .shorts-actions-zeile,
  :is(html, #mob#fenster#box#tablet) body .spv-dialog :is(.spv-inhalt, .spv-formular) > .spv-fuss {
    --fuss-grund: #0d1017;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
    margin: 12px 0 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-block: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 0 !important;
    background: var(--fuss-grund) !important;
    box-shadow: 0 13px 0 1px var(--fuss-grund) !important;
  }
  :is(html, #mob#fenster#box#tablet) body .shorts-production-modal.is-open .shorts-actions-zeile { --fuss-grund: #0c0e14; }
  /* Storyboard und Werbespot rollen im Fensterrahmen selbst (Innenabstand 18 px): die Box klebt an dessen Innenkante. */
  :is(html, #mob#fenster#box#tablet) body .spv-dialog :is(.spv-inhalt, .spv-formular) > .spv-fuss { --fuss-grund: var(--spv-karte); bottom: -18px !important; margin-top: 16px !important; box-shadow: 0 12px 0 1px var(--fuss-grund) !important; }
}

/*
MOB19-40 (Betreiber 19.10.2026, iPad 6 quer): „1 muss irgendwie etwas anders positioniert werden. 2 sollte unter dem bild
sein." Am Tablet stand „Bildanpassung" als 2 × 2-Block eingeklemmt neben dem Seitenverhältnis, der „Verwendete
Videobereich" ganz unten über die volle Breite. Jetzt (wie am Handy, MOB18-04, über display: contents) steht der
Videobereich direkt unter der Zeile mit dem Video; darunter links „Bildausschnitt", rechts Seitenverhältnis und die vier
Bildanpassungs-Karten in einer Reihe, dann „Bild und Ton".
*/
@media (min-width: 761px) and (max-width: 1024px) {
  :is(html, #mob#shorts#tablet#reihe) body .shorts-production-modal [data-shorts-preview]:not([hidden]) { align-items: start !important; display: grid !important; gap: 12px 22px !important; grid-template-columns: 190px minmax(0, 1fr) !important; }
  :is(html, #mob#shorts#tablet#reihe) body .shorts-production-modal :is(.shorts-caption-preview, [data-shorts-preview]) > * { margin: 0 !important; }
  :is(html, #mob#shorts#tablet#reihe) body .shorts-production-modal [data-shorts-preview] > .shorts-editor,
  :is(html, #mob#shorts#tablet#reihe) body .shorts-production-modal [data-shorts-preview] > .shorts-editor > .shorts-caption-preview-field,
  :is(html, #mob#shorts#tablet#reihe) body .shorts-production-modal [data-shorts-preview] .shorts-caption-preview-field > .shorts-caption-preview { display: contents !important; }
  :is(html, #mob#shorts#tablet#reihe) body .shorts-production-modal .shorts-caption-preview > .shorts-caption-stage { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
  :is(html, #mob#shorts#tablet#reihe) body .shorts-production-modal .shorts-caption-preview > .shorts-caption-toggle-field { grid-column: 2 !important; grid-row: 1 !important; }
  :is(html, #mob#shorts#tablet#reihe) body .shorts-production-modal .shorts-caption-preview > .shorts-caption-controls { grid-column: 2 !important; grid-row: 2 !important; }
  :is(html, #mob#shorts#tablet#reihe) body .shorts-production-modal [data-shorts-preview] > .shorts-range-editor { grid-column: 1 / -1 !important; grid-row: 3 !important; min-width: 0 !important; }
  :is(html, #mob#shorts#tablet#reihe) body .shorts-production-modal .shorts-caption-preview > .shorts-frame-controls { grid-column: 1 !important; grid-row: 4 !important; }
  :is(html, #mob#shorts#tablet#reihe) body .shorts-production-modal .shorts-caption-preview > .shorts-editor-format { grid-column: 2 !important; grid-row: 4 !important; grid-template-columns: minmax(0, 1fr) !important; }
  :is(html, #mob#shorts#tablet#reihe) body .shorts-production-modal .shorts-editor-format .shorts-reframe-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  :is(html, #mob#shorts#tablet#reihe) body .shorts-production-modal .shorts-caption-preview > .shorts-bild-ton-field { grid-column: 1 / -1 !important; grid-row: 5 !important; }
  :is(html, #mob#shorts#tablet#reihe) body .shorts-production-modal [data-shorts-preview] > :is(.shorts-schnitt-buehne, figcaption) { grid-column: 1 / -1 !important; grid-row: 6 !important; }
}

/*
MOB19-33/-47 (Betreiber 19.10.2026, iPad 6 quer): „Da müsste ein schließen x hingemacht werden, sonst kommt man nicht
zurück" und „wenn man auf kanalprofil klickt dann ändert sich die größe der box und die buttons verschieben sich".
Am Tablet: oben rechts ein X (wie am Handy; am PC bleibt es beim Schließen über Abbrechen, Klick daneben oder Esc). Das
Fenster hat eine feste Höhe (höchstens 720 px wie am PC, contentfactory-profil.css), die Kopfzeile ebenso (sie war je nach Rubrik 70 oder 82 px hoch). Die Gewichtung :is(html, #mob#profil#tablet#fest) ist nötig, weil
contentfactory-profil.css dieselben Teile mit :is(html, #profil#neu) festlegt – ohne sie griff der Block hochkant nicht und
„Konto löschen" lag unerreichbar unter dem Rand. Der Inhalt rollt in seiner
Fläche, „Abbrechen" und „Profil speichern" stehen bei allen neun Rubriken an derselben Stelle unten.
*/
@media (min-width: 761px) and (max-width: 1024px) {
  :is(html, #mob#profil#tablet#fest) body.profile-modal-open .factory-workspace.open:has(#creator-profile-form) .workspace-panel { height: min(720px, calc(100dvh - 48px)) !important; overflow: hidden !important; }
  :is(html, #mob#profil#tablet#fest) body.profile-modal-open .factory-workspace.open:has(#creator-profile-form) .workspace-header { box-sizing: border-box !important; width: 100% !important; align-self: stretch !important; flex: 0 0 auto !important; height: 82px !important; min-height: 82px !important; padding: 18px 76px 18px 28px !important; position: relative !important; }
  :is(html, #mob#profil#tablet#fest) body.profile-modal-open .factory-workspace.open:has(#creator-profile-form) .workspace-close {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    top: 21px !important;
    right: 24px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 12px !important;
    background: #171a24 !important;
    color: #f6f7fb !important;
    font-size: 20px !important;
  }
  /* Das Zeichen im Knopf ist ein Pfeil (Handy); am Tablet das Kreuz aus derselben Symbolschrift (mdi-close = \F156 in der
     eingebundenen Fassung). */
  :is(html, #mob#profil#tablet#fest) body.profile-modal-open .factory-workspace.open:has(#creator-profile-form) .workspace-close .mdi-arrow-left::before { content: "\F156" !important; }
  :is(html, #mob#profil#tablet#fest) body.profile-modal-open .factory-workspace.open:has(#creator-profile-form) #workspace-body { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; }
  :is(html, #mob#profil#tablet#fest) body.profile-modal-open .factory-workspace.open:has(#creator-profile-form) #workspace-body .profile-settings { flex: 1 1 0 !important; min-height: 0 !important; grid-template-rows: minmax(0, 1fr) !important; }
  :is(html, #mob#profil#tablet#fest) body.profile-modal-open .factory-workspace.open:has(#creator-profile-form) #workspace-body .profile-panes { min-height: 0 !important; overflow-y: auto !important; }
  :is(html, #mob#profil#tablet#fest) body.profile-modal-open .factory-workspace.open:has(#creator-profile-form) #workspace-body .profile-panes > :not(.creator-profile-form) { align-content: start !important; flex: 1 1 auto !important; grid-auto-rows: max-content !important; min-height: 0 !important; overflow-y: auto !important; }
  :is(html, #mob#profil#tablet#fest) body.profile-modal-open .factory-workspace.open:has(#creator-profile-form) #workspace-body .creator-profile-form { margin-top: auto !important; padding-bottom: 0 !important; }
  :is(html, #mob#profil#tablet#fest) body.profile-modal-open .factory-workspace.open:has(#creator-profile-form) #workspace-body .profile-actions { position: sticky !important; bottom: 0 !important; z-index: 2 !important; background: #0c0e14 !important; }
}

/*
MOB19-42/-43 (Betreiber 19.10.2026, iPad 6 quer): „das bild soll seine größe behalten, man sollte dann lieber scrollen"
und „den markierten pfeil bitte entfernen". Die Bildhöhe hing an der Resthöhe des Bildschirms (100dvh - 430 px für Text
und Knöpfe); quer blieb ein schmaler Streifen. Am Tablet steht das Bild in voller Kartenbreite, die Karte rollt in sich
(das Fenster selbst nicht – sein Unschärfe-Filter wäre sonst Bezugsrahmen des Kreuzes). Oben rechts steht das Kreuz wie
am Handy; damit erkennt die Zurück-Logik die Ansicht und der schwebende Pfeil (contentfactory-zurueck.js) entfällt.
*/
@media (min-width: 761px) and (max-width: 1024px) {
  body .social-poster-review-modal .social-poster-review-dialog { height: auto !important; max-height: calc(100dvh - 32px) !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: none; }
  body .social-poster-review-modal [data-social-poster-review-content] { flex: 0 0 auto !important; }
  body .social-poster-review-modal .sp-post-bild > img { max-height: none !important; }
  body .social-poster-review-dialog .social-poster-review-close {
    position: fixed; z-index: 9; top: 16px; right: 16px;
    display: grid !important; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px;
    background: rgba(8, 10, 15, .72); color: #fff; font-size: 22px; cursor: pointer;
  }
}

/*
MOB19-48/-49 (Betreiber 19.10.2026, iPad 6 quer): „der pfeil zurück sieht scheisse da aus" – am iPad stand das Video
zudem nach rechts versetzt und unten abgeschnitten – und „wenn ich auf den pfeil nach links … klicke, dann ist der
bildschirm komplett schwarz". Das Kreuz des Kinos war am Tablet unsichtbar; die Zurück-Logik kannte das Kino deshalb
nicht als Fenster, ihr Pfeil sprang eine Seite zurück, und die dunkle Abdeckung des Kinos blieb stehen. Am Tablet
steht das Kreuz oben rechts (der Pfeil entfällt, Zurück schließt das Kino). Die Höhen rechnen mit der sichtbaren Fläche
(dvh statt vh – auf dem iPad ist 100vh höher als der Bereich zwischen den Safari-Leisten), zentriert wird per Flex.
*/
@media (min-width: 761px) and (max-width: 1024px) {
  :is(html, #mob#kino#tablet#a) #workspace-body .video-history-cinema-overlay { display: flex !important; align-items: center !important; justify-content: center !important; }
  /* Die oberste Browser-Ebene darf weder Standardrand noch Standardbreite des Popovers behalten. */
  :is(html, #mob#kino#tablet#a) #workspace-body .video-history-cinema-overlay[popover] {
    margin: 0 !important;
    border: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    color: inherit;
  }
  :is(html, #mob#kino#tablet#a) #workspace-body .video-history-cinema-overlay > .video-history-detail { flex: 0 1 auto !important; margin: 0 auto !important; max-height: calc(100dvh - 32px) !important; }
  :is(html, #mob#kino#tablet#a) #workspace-body .video-history-cinema-overlay .video-history-detail.is-video-portrait .video-rebuild-player video { height: auto !important; max-height: calc(100dvh - 150px) !important; }
  :is(html, #mob#kino#tablet#a) #workspace-body .video-history-cinema-overlay > .video-history-detail:not(.is-video-portrait) .video-rebuild-player video { max-height: min(900px, calc(100dvh - 150px)) !important; }
  :is(html, #mob#kino#tablet#a) #workspace-body .video-history-cinema-overlay [data-video-rebuild-close] {
    display: grid !important; place-items: center !important; position: fixed !important; z-index: 9 !important;
    top: 16px !important; right: 16px !important; left: auto !important; width: 40px !important; height: 40px !important; padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .22) !important; border-radius: 12px !important;
    background: rgba(8, 10, 15, .72) !important; color: #fff !important; font-size: 22px !important;
  }
}

/*
MOB19-41 (Betreiber 19.10.2026, iPad 6 quer): „das mit den icons dass die irgendwie rechts hängen oder deplatziert sind ist
fast überall so auf dem tablet". Bootstrap (style.css) setzt für alle Knöpfe -webkit-appearance: button. Damit behält
iOS-Safari die eigene Knopfdarstellung und übergeht die Raster-Zentrierung (display: grid; place-items: center) – das
Symbol fällt je nach Textausrichtung an den linken oder rechten Rand. Am Tablet ohne eigene Knopfdarstellung – in Chrome
sieht dadurch nichts anders aus, weil alle Knöpfe eigene Rahmen und Hintergründe haben.
*/
@media (min-width: 761px) and (max-width: 1100px) {
  :is(html, #mob#knopf#ipad) :is(button, [type="button"], [type="reset"], [type="submit"]) { -webkit-appearance: none; appearance: none; }
}