/* Letzte Cleaning Prüfung: 14.10.2026 | Letztes Cleaning: - */
/*
 * Eingabe von KI-Video (WL14-14) und KI-Bild (WL14-15) genauso wie im Movie Studio (Betreiber 14.10.2026:
 * „Der Style und das Aussehen soll gleich zu Movie Studio aussehen“). Geometrie am Movie Studio auf Dev gemessen:
 *   Rahmen      #12131a, Radius 14, Innenabstand 4 (als padding: ein Außenabstand des Innenfelds fiele durch), Höhe 112
 *   Innenfeld   #171922, Radius 10, Innenabstand 12, Höhe 104
 *   Text        oben, 40 px hoch (zwei Zeilen à 20 px, 14 px Schrift)
 *   Parameter   12 px darunter, flache Chips 28 px: Hintergrund weiß 5 %, Radius 9, 0 8 px, 12 px/500,
 *               Symbol 16 px rot; das Modell zusätzlich in Rot
 *   Knopf       im Innenfeld rechts, 120 × 80, 16 px Abstand zum Text, #ff3656, Radius 12, Bebas Neue 17,
 *               immer kräftig rot (auch ohne eigenen Text)
 *   Anhänge     Kacheln 150 × 76, Verlauf #ff3656 → #ff8a5b (seit 18.10.2026, wie im Werbestudio), Plus-Kreis, Name in Bebas 14,
 *               6 px Abstand; nicht verfügbare Kacheln bleiben grau
 *
 * Die Grundhöhe des Feldes gibt --feld-feste-hoehe vor; beim Tippen wächst es über den gemeinsamen Baustein (WL16-01).
 * Präfix :is(html, #eingabe#studio): zählt wie zwei IDs und schlägt die #workspace-body-Regeln mit !important.
 * Nur am PC; auf dem Handy bleibt die bisherige Eingabe. Ohne Bild/Video-Schalter (eigene Werkzeuge).
 */
@media (min-width: 761px) {
  /* --- KI-Video (WL14-14) ------------------------------------------------------------------------ */
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer {
    background: #12131a !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 4px !important;
  }
  /* Innenfeld: Text, Parameter und Knopf liegen darin. */
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-generator-prompt {
    background: #171922;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    height: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
    width: auto !important;
  }
  /* Höhe 104 = 10 + 40 Text + 54 Zone für die Parameter; rechts Platz für den Knopf. */
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer [name="prompt"] {
    --feld-feste-hoehe: 104px;
    background: transparent !important;
    font-size: 14px !important;
    line-height: 20px !important;
    min-height: 0 !important;
    padding: 10px 196px 54px 12px !important;
  }
  /* Das Feld endet über der Leiste (Skript: Außenabstand 40), sein unterer Innenabstand von 14 px läge aber noch
     darauf - ein mehrzeiliger Beispieltext lief dort sichtbar in die Chips. Der Innenabstand wird abgeschnitten. Scrollt das
     Feld, steht der Innenabstand außen (WL16-13, data-eingabebox-rand) - dann schnitte die Regel die letzte Zeile ab. */
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer [name="prompt"]:not([data-eingabebox-rand]) { clip-path: inset(0 0 14px 0); }
  /* Parameter unten links, Knopf rechts oben im Innenfeld; die Fläche dazwischen bleibt durchklickbar. */
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-actions {
    align-content: stretch !important;
    align-items: end !important;
    align-self: stretch !important;
    bottom: 16px !important;
    column-gap: 4px !important;
    grid-template-columns: auto auto minmax(0, 1fr) 120px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: auto !important;
    justify-self: stretch !important;
    left: 16px !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    pointer-events: none;
    right: 16px !important;
    top: 16px !important;
  }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-actions > * { pointer-events: auto; }
  /* Alle Parameter in einer Reihe; reicht der Platz nicht, lässt sie sich waagerecht scrollen (WL14-24). Die
     Auswahllisten hängen deshalb nicht mehr in der Reihe, sondern an der Leiste (sonst schnitte das Scrollen sie ab). */
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-actions > .video-param-chips { display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-actions > .video-param-chips::-webkit-scrollbar { display: none; }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-actions > .video-param-popover { bottom: calc(100% + 10px); z-index: 60; }
  /* Flache Chips wie im Movie Studio. */
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer .video-param-chip,
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer .video-config-trigger {
    align-items: center !important;
    flex: 0 0 auto !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 2px solid transparent !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    color: #fff !important;
    display: inline-flex !important;
    font-family: "MS Inter", Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    gap: 4px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    width: auto !important;
  }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer .video-param-chip:hover,
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer .video-config-trigger:hover { background: rgba(255, 255, 255, .1) !important; }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer .video-param-chip .mdi,
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer .video-config-trigger .mdi { color: #fff !important; font-size: 16px !important; line-height: 1 !important; }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer .video-param-chip[data-video-param="model"],
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer .video-param-chip[data-video-param="model"] .mdi { color: #ff3656 !important; }
  /* Das gezeichnete Formatzeichen ebenfalls weiß. */
  :is(html, #eingabe#studio) body :is(.video-production-modal .video-generator-form.is-chat-composer, .thumbnail-production-modal .tk-box) .cf-format-zeichen { border-color: #fff !important; color: #fff !important; }
  /* Knopf: 120 × 80, immer kräftig rot wie „Generieren“. Gesperrt bleibt er trotzdem, bis ein Text da ist. */
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-actions > .cc-button.primary {
    align-self: start !important;
    background: #ff3656 !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: "Bebas Neue", "Space Grotesk", sans-serif !important;
    font-size: 17px !important;
    gap: 4px !important;
    grid-column: 4;
    grid-row: 1;
    height: 80px !important;
    justify-content: center !important;
    letter-spacing: 1.02px;
    line-height: 1 !important;
    min-height: 80px !important;
    min-width: 0 !important;
    opacity: 1 !important;
    padding: 8px !important;
    text-transform: uppercase;
    width: 120px !important;
  }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-actions > .cc-button.primary > .mdi-creation { display: none; }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-actions > .cc-button.primary .media-credit-button-cost {
    background: transparent !important; border: 0 !important; box-shadow: none !important; color: #fff !important;
    font-family: "MS Inter", Inter, system-ui, sans-serif !important; font-size: 12px !important; letter-spacing: 0; padding: 0 !important; text-transform: none;
  }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-actions > .cc-button.primary .media-credit-button-cost .mdi { color: #fff !important; }
  /* Zauberstab (Prompt optimieren) links neben dem Knopf, oben - vorher lag er unter dem Knopf (WL14-23). */
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer .video-prompt-optimize-button { right: 144px !important; top: 12px !important; }
  /* Anhänge als Kacheln. */
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-frame-dock { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile {
    align-items: flex-start !important;
    background: linear-gradient(90deg, #ff3656, #ff8a5b) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 3px 7px 5px rgba(0, 0, 0, .12), 1px 3px 3px rgba(0, 0, 0, .32) !important;
    display: flex !important;
    flex: 0 0 150px !important;
    flex-direction: column !important;
    height: 76px !important;
    justify-content: space-between !important;
    max-width: 150px !important;
    min-width: 0 !important;
    overflow: hidden;
    padding: 7px 8px !important;
    position: relative;
    width: 150px !important;
  }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile[hidden] { display: none !important; }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile > .mdi {
    align-items: center; background: transparent !important; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px;
    color: #fff !important; display: flex; font-size: 12px !important; height: 20px !important; justify-content: center; position: relative; width: 20px !important; z-index: 2;
  }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile > span { position: relative; z-index: 2; }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile strong {
    color: #fff !important; font-family: "Bebas Neue", "Space Grotesk", sans-serif !important; font-size: 14px !important; font-weight: 700 !important;
    letter-spacing: .84px; line-height: 14px; text-transform: uppercase;
  }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile small { display: none !important; }
  :is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile > .video-chat-frame-thumb:not([hidden]) { height: 100% !important; inset: 0; object-fit: cover; opacity: .7; position: absolute; width: 100% !important; z-index: 1; }

  /* --- KI-Bild und Social-Posts (WL14-15, WL14-31: Social-Posts hat dieselbe Eingabe) ------------------------------------------------------------------------- */
  /* Hier ist das Textfeld selbst das Innenfeld. Die Parameter bleiben ein Streifen unten im Feld, weil sich
     die Abdeckung darunter (textfeld-deckel) nach ihrer Lage richtet; der Knopf hängt am Streifen. */
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box > .tk-eingabe {
    background: #12131a !important;
    border-radius: 14px !important;
    padding: 4px !important;
  }
  /* Die Höhe liest das Skript beim Aufbau am Formular ab (das Feld hängt dann noch nicht auf der Seite). */
  .thumbnail-production-modal form.tk-composer { --feld-feste-hoehe: 104px; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box .tk-thema-feld textarea {
    background: #171922 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
    display: block !important;
    font-size: 14px !important;
    line-height: 20px !important;
    min-height: 0 !important;
    padding: 10px 196px 54px 12px !important;
    resize: none !important;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box > .tk-eingabe > .tk-prompt-assistent { right: 152px !important; top: 12px !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box > .tk-eingabe > .tk-eingabe-aktionen { bottom: 16px !important; left: 16px !important; right: 152px !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box > .tk-eingabe > .tk-eingabe-aktionen > .tk-leiste-rechts {
    bottom: 0; height: 80px; left: calc(100% + 16px); position: absolute; width: 120px;
  }
  /* Alle Parameter in einer Reihe, waagerecht scrollbar (WL14-24). Die Auswahlliste klappt über dem ganzen
     Kasten auf statt auf dem Textfeld zu liegen, das sie sonst verdeckte (WL14-25). */
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box .tk-param-chips { flex-wrap: nowrap !important; gap: 4px !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box .tk-param-chips::-webkit-scrollbar { display: none; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box .tk-param-popover { bottom: calc(100% + 6px) !important; z-index: 60 !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box :is(.tk-param-chip, .tk-konfig-trigger) {
    align-items: center !important;
    flex: 0 0 auto !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 2px solid transparent !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    color: #fff !important;
    display: inline-flex !important;
    font-family: "MS Inter", Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    gap: 4px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    width: auto !important;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box :is(.tk-param-chip, .tk-konfig-trigger):hover { background: rgba(255, 255, 255, .1) !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box :is(.tk-param-chip, .tk-konfig-trigger) .mdi { color: #fff !important; font-size: 16px !important; line-height: 1 !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box .tk-param-chip[data-tk-param="openrouter_image_model"],
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box .tk-param-chip[data-tk-param="openrouter_image_model"] .mdi { color: #ff3656 !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box > .tk-eingabe > .tk-eingabe-aktionen > .tk-leiste-rechts > button {
    background: #ff3656 !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: "Bebas Neue", "Space Grotesk", sans-serif !important;
    font-size: 17px !important;
    gap: 4px !important;
    height: 100% !important;
    justify-content: center !important;
    letter-spacing: 1.02px;
    line-height: 1 !important;
    min-width: 0 !important;
    opacity: 1 !important;
    padding: 8px !important;
    text-transform: uppercase;
    width: 100% !important;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box > .tk-eingabe > .tk-eingabe-aktionen > .tk-leiste-rechts > button > .mdi:first-child { display: none; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box > .tk-eingabe > .tk-eingabe-aktionen > .tk-leiste-rechts > button .tk-start-credit {
    background: transparent !important; border: 0 !important; box-shadow: none !important; color: #fff !important;
    font-family: "MS Inter", Inter, system-ui, sans-serif !important; font-size: 12px !important; letter-spacing: 0; padding: 0 !important; text-transform: none;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box > .tk-eingabe > .tk-eingabe-aktionen > .tk-leiste-rechts > button .tk-start-credit .mdi { color: #fff !important; }
  /* Anhang als Kachel. */
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box > .tk-anhang-dock { gap: 6px !important; margin-top: 8px !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box > .tk-anhang-dock > .tk-anhang-knopf {
    align-items: flex-start !important;
    background: linear-gradient(90deg, #ff3656, #ff8a5b) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 3px 7px 5px rgba(0, 0, 0, .12), 1px 3px 3px rgba(0, 0, 0, .32) !important;
    display: flex !important;
    flex: 0 0 150px !important;
    flex-direction: column !important;
    height: 76px !important;
    justify-content: space-between !important;
    max-width: 150px !important;
    min-width: 0 !important;
    padding: 7px 8px !important;
    position: relative;
    width: 150px !important;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box > .tk-anhang-dock > .tk-anhang-knopf > .mdi {
    align-items: center; background: transparent !important; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px;
    color: #fff !important; display: flex; font-size: 12px !important; height: 20px !important; justify-content: center; width: 20px !important;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box > .tk-anhang-dock > .tk-anhang-knopf > span {
    color: #fff !important; font-family: "Bebas Neue", "Space Grotesk", sans-serif !important; font-size: 14px !important; font-weight: 700 !important;
    letter-spacing: .84px; line-height: 14px; text-transform: uppercase;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box > .tk-anhang-dock > .tk-anhang-knopf > small { display: none !important; }
}

/*
 * Eingabe auf der Seite (WL14-19, Betreiber 15.10.2026): „bei KI-Video und KI-Bild den Produktions-Button
 * entfernen, dafür die KI-Chatbox unten in die Werkzeugseite einfügen, sticky; unten Abstand, damit ganz unten
 * keine Bilder verdeckt werden.“ Dasselbe Produktionsfenster mit der Klasse ist-eingebettet (Skripte:
 * eingabeAufSeite / thumbnailEingabeAufSeite). Seit WL16-10 (16.10.2026) steht es direkt nach der Beschreibung, läuft beim
 * Scrollen mit und bleibt oben stehen (gemeinsamer Baustein contentfactory-eingabebox.js). Auf allen Breiten; am Handy mit
 * kleineren Maßen (WL14-26, 15.10.2026).
 */
/* Kopf mit „Neue Produktion“ entfällt - von Anfang an, nicht erst, wenn die Eingabe steht: sonst blitzte
   beim Laden kurz „CREATE – Video erstellen“ bzw. der leere Knopfbereich auf (WL14-20, 15.10.2026). */
body.factory-page-active #factory-workspace:has(#workspace-body:is(:is([data-tool="video-generator"],[data-tool="video-editor"]), [data-tool="thumbnail-banner-maker"], [data-tool="social-media-post-banner-generator"])) .workspace-header { display: none !important; }

:is(html, #eingabe#seite) body :is(.video-production-modal, .thumbnail-production-modal).ist-eingebettet {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* Ohne abgedunkelten Übergang (WL14-22, Betreiber 15.10.2026: „bitte das Abgedunkelte entfernen“). */
  background: none;
  bottom: auto;
  display: block;
  left: auto;
  /* WL16-10 (Betreiber 16.10.2026): steht direkt nach der Beschreibung, läuft beim Scrollen mit und bleibt kurz unter dem
     oberen Rand stehen (top unten). Löst WL14-35 ab (klebte unten, der Verlauf wurde dafür per Skript nach unten geschoben). */
  margin-top: 0;
  opacity: 1;
  /* !important: eine ältere Regel für das Video-Fenster setzt overflow auto und schnitte die Auswahllisten ab. */
  overflow: visible !important;
  padding: 30px clamp(16px, 3vw, 40px) 18px;
  position: sticky;
  right: auto;
  top: 8px;
  z-index: 40;
}
:is(html, #eingabe#seite) body :is(.video-production-modal, .thumbnail-production-modal).ist-eingebettet > :is(.video-production-dialog, .thumbnail-production-dialog) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 auto;
  max-height: none;
  overflow: visible;
  padding: 0;
  transform: none;
  width: min(900px, 100%);
}
:is(html, #eingabe#seite) body .thumbnail-production-modal.ist-eingebettet form.tk-composer { margin: 0 !important; }
:is(html, #eingabe#seite) body .thumbnail-production-modal.ist-eingebettet form.tk-composer > .workspace-group { padding: 0 !important; }
/* Ohne Fensterkopf, Überschrift und Hinweistexte - nur Eingabe und Anhänge. */
:is(html, #eingabe#seite) body :is(.video-production-modal, .thumbnail-production-modal).ist-eingebettet :is(.video-production-dialog, .thumbnail-production-dialog) > header,
:is(html, #eingabe#seite) body .video-production-modal.ist-eingebettet .video-generator-intro,
:is(html, #eingabe#seite) body .thumbnail-production-modal.ist-eingebettet :is(.workspace-intro-card, .tk-kopf) { display: none !important; }
:is(html, #eingabe#seite) body :is(.video-production-modal, .thumbnail-production-modal).ist-eingebettet :is(.video-production-body, .video-production-inner, .thumbnail-production-body) {
  background: transparent;
  max-height: none;
  overflow: visible;
  padding: 0;
}
/* Social-Posts: Textfeld mit 104 px Grundhöhe wie das Movie Studio (wächst über den Baustein, WL16-01) und die Referenzbilder
   als Kachel 150 x 76 wie bei KI-Bild (WL14-31). */
@media (min-width: 761px) {
  /* Höhe und Wachsen setzt der gemeinsame Baustein (contentfactory-eingabebox.js, WL16-01). Kachel ohne Lücke wie KI-Bild (WL16-05). */
  :is(html, #eingabe#studio) body .thumbnail-production-modal .sp-anhang-kachel { margin-top: 0 !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .sp-anhang-kachel > label:not(.video-file-picker) { display: none !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .sp-anhang-kachel .video-file-picker {
    align-items: flex-start !important; background: linear-gradient(90deg, #ff3656, #ff8a5b) !important; border: 0 !important; border-radius: 12px !important;
    box-shadow: 3px 7px 5px rgba(0, 0, 0, .12), 1px 3px 3px rgba(0, 0, 0, .32) !important; display: flex !important; flex-direction: column !important; height: 76px !important;
    justify-content: space-between !important; max-width: 150px !important; min-width: 0 !important; padding: 7px 8px !important; width: 150px !important;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .sp-anhang-kachel .video-file-picker > .mdi { align-items: center; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; color: #fff !important; display: flex; font-size: 12px !important; height: 20px !important; justify-content: center; width: 20px !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .sp-anhang-kachel .video-file-picker b { color: #fff !important; font-family: "Bebas Neue", "Space Grotesk", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .84px; line-height: 14px; text-transform: uppercase; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal .sp-anhang-kachel .video-file-picker small { display: none !important; }
}
/* Andere Werkzeuge zeigen sie nicht. */
#workspace-body:not([data-tool="thumbnail-banner-maker"]) ~ .thumbnail-production-modal.ist-eingebettet:not(.social-poster-production-modal),
#workspace-body:not([data-tool="social-media-post-banner-generator"]) ~ .thumbnail-production-modal.ist-eingebettet.social-poster-production-modal { display: none !important; }

/* Veröffentlichen (WL14-16, 15.10.2026): Der Seitenkopf zeigte dort nur „VERÖFFENTLICHEN – Veröffentlichen“
   (kein Knopf „Neue Produktion“) und doppelte den Titel oben in der Leiste - entfällt am PC und am Handy. */
body.factory-page-active #factory-workspace:has(#workspace-body[data-tool="youtube-publisher"]) .workspace-header { display: none !important; }

/*
 * Handy (WL14-26, Betreiber 15.10.2026: „auch in der Mobilansicht soll die neue Chatbox verwendet werden“):
 * dieselbe Eingabe wie am PC, nur die Eingabe auf der Seite (ist-eingebettet) - das Fenster für Neustart, Fortsetzen
 * und Nachbauen behält am Handy seine bisherige Oberfläche. Maße kleiner: Knopf 84 x 68, Kacheln 110 x 56, die
 * Parameter laufen in einer wischbaren Reihe.
 */
@media (max-width: 760px) {
  /* --- KI-Video (WL14-14) ------------------------------------------------------------------------ */
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer {
    background: #12131a !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 4px !important;
  }
  /* Innenfeld: Text, Parameter und Knopf liegen darin. */
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-generator-prompt {
    background: #171922;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    height: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
    width: auto !important;
  }
  /* Höhe 104 = 10 + 40 Text + 54 Zone für die Parameter; rechts Platz für den Knopf. */
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer [name="prompt"] {
    --feld-feste-hoehe: 104px;
    background: transparent !important;
    font-size: 14px !important;
    line-height: 20px !important;
    min-height: 0 !important;
    padding: 10px 196px 54px 12px !important;
  }
  /* Das Feld endet über der Leiste (Skript: Außenabstand 40), sein unterer Innenabstand von 14 px läge aber noch
     darauf - ein mehrzeiliger Beispieltext lief dort sichtbar in die Chips. Der Innenabstand wird abgeschnitten. */
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer [name="prompt"] { clip-path: inset(0 0 14px 0); }
  /* Parameter unten links, Knopf rechts oben im Innenfeld; die Fläche dazwischen bleibt durchklickbar. */
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-actions {
    align-content: stretch !important;
    align-items: end !important;
    align-self: stretch !important;
    bottom: 16px !important;
    column-gap: 4px !important;
    grid-template-columns: auto auto minmax(0, 1fr) 120px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: auto !important;
    justify-self: stretch !important;
    left: 16px !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    pointer-events: none;
    right: 16px !important;
    top: 16px !important;
  }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-actions > * { pointer-events: auto; }
  /* Alle Parameter in einer Reihe; reicht der Platz nicht, lässt sie sich waagerecht scrollen (WL14-24). Die
     Auswahllisten hängen deshalb nicht mehr in der Reihe, sondern an der Leiste (sonst schnitte das Scrollen sie ab). */
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-actions > .video-param-chips { display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-actions > .video-param-chips::-webkit-scrollbar { display: none; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-actions > .video-param-popover { bottom: calc(100% + 10px); z-index: 60; }
  /* Flache Chips wie im Movie Studio. */
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer .video-param-chip,
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer .video-config-trigger {
    align-items: center !important;
    flex: 0 0 auto !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 2px solid transparent !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    color: #fff !important;
    display: inline-flex !important;
    font-family: "MS Inter", Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    gap: 4px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    width: auto !important;
  }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer .video-param-chip:hover,
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer .video-config-trigger:hover { background: rgba(255, 255, 255, .1) !important; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer .video-param-chip .mdi,
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer .video-config-trigger .mdi { color: #fff !important; font-size: 16px !important; line-height: 1 !important; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer .video-param-chip[data-video-param="model"],
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer .video-param-chip[data-video-param="model"] .mdi { color: #ff3656 !important; }
  /* Das gezeichnete Formatzeichen ebenfalls weiß. */
  :is(html, #eingabe#studio) body :is(.video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer, .thumbnail-production-modal.ist-eingebettet .tk-box) .cf-format-zeichen { border-color: #fff !important; color: #fff !important; }
  /* Knopf: 120 × 80, immer kräftig rot wie „Generieren“. Gesperrt bleibt er trotzdem, bis ein Text da ist. */
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-actions > .cc-button.primary {
    align-self: start !important;
    background: #ff3656 !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: "Bebas Neue", "Space Grotesk", sans-serif !important;
    font-size: 17px !important;
    gap: 4px !important;
    grid-column: 4;
    grid-row: 1;
    height: 80px !important;
    justify-content: center !important;
    letter-spacing: 1.02px;
    line-height: 1 !important;
    min-height: 80px !important;
    min-width: 0 !important;
    opacity: 1 !important;
    padding: 8px !important;
    text-transform: uppercase;
    width: 120px !important;
  }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-actions > .cc-button.primary > .mdi-creation { display: none; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-actions > .cc-button.primary .media-credit-button-cost {
    background: transparent !important; border: 0 !important; box-shadow: none !important; color: #fff !important;
    font-family: "MS Inter", Inter, system-ui, sans-serif !important; font-size: 12px !important; letter-spacing: 0; padding: 0 !important; text-transform: none;
  }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-actions > .cc-button.primary .media-credit-button-cost .mdi { color: #fff !important; }
  /* Zauberstab (Prompt optimieren) links neben dem Knopf, oben - vorher lag er unter dem Knopf (WL14-23). */
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer .video-prompt-optimize-button { right: 144px !important; top: 12px !important; }
  /* Anhänge als Kacheln. */
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-frame-dock { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile {
    align-items: flex-start !important;
    background: linear-gradient(90deg, #ff3656, #ff8a5b) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 3px 7px 5px rgba(0, 0, 0, .12), 1px 3px 3px rgba(0, 0, 0, .32) !important;
    display: flex !important;
    flex: 0 0 150px !important;
    flex-direction: column !important;
    height: 76px !important;
    justify-content: space-between !important;
    max-width: 150px !important;
    min-width: 0 !important;
    overflow: hidden;
    padding: 7px 8px !important;
    position: relative;
    width: 150px !important;
  }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile[hidden] { display: none !important; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile > .mdi {
    align-items: center; background: transparent !important; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px;
    color: #fff !important; display: flex; font-size: 12px !important; height: 20px !important; justify-content: center; position: relative; width: 20px !important; z-index: 2;
  }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile > span { position: relative; z-index: 2; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile strong {
    color: #fff !important; font-family: "Bebas Neue", "Space Grotesk", sans-serif !important; font-size: 14px !important; font-weight: 700 !important;
    letter-spacing: .84px; line-height: 14px; text-transform: uppercase;
  }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile small { display: none !important; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile > .video-chat-frame-thumb:not([hidden]) { height: 100% !important; inset: 0; object-fit: cover; opacity: .7; position: absolute; width: 100% !important; z-index: 1; }

  /* --- KI-Bild und Social-Posts (WL14-15, WL14-31: Social-Posts hat dieselbe Eingabe) ------------------------------------------------------------------------- */
  /* Hier ist das Textfeld selbst das Innenfeld. Die Parameter bleiben ein Streifen unten im Feld, weil sich
     die Abdeckung darunter (textfeld-deckel) nach ihrer Lage richtet; der Knopf hängt am Streifen. */
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-eingabe {
    background: #12131a !important;
    border-radius: 14px !important;
    padding: 4px !important;
  }
  /* Die Höhe liest das Skript beim Aufbau am Formular ab (das Feld hängt dann noch nicht auf der Seite). */
  .thumbnail-production-modal form.tk-composer { --feld-feste-hoehe: 104px; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box .tk-thema-feld textarea {
    background: #171922 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
    display: block !important;
    font-size: 14px !important;
    line-height: 20px !important;
    min-height: 0 !important;
    padding: 10px 196px 54px 12px !important;
    resize: none !important;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-eingabe > .tk-prompt-assistent { right: 152px !important; top: 12px !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-eingabe > .tk-eingabe-aktionen { bottom: 16px !important; left: 16px !important; right: 152px !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-eingabe > .tk-eingabe-aktionen > .tk-leiste-rechts {
    bottom: 0; height: 80px; left: calc(100% + 16px); position: absolute; width: 120px;
  }
  /* Alle Parameter in einer Reihe, waagerecht scrollbar (WL14-24). Die Auswahlliste klappt über dem ganzen
     Kasten auf statt auf dem Textfeld zu liegen, das sie sonst verdeckte (WL14-25). */
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box .tk-param-chips { flex-wrap: nowrap !important; gap: 4px !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box .tk-param-chips::-webkit-scrollbar { display: none; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box .tk-param-popover { bottom: calc(100% + 6px) !important; z-index: 60 !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box :is(.tk-param-chip, .tk-konfig-trigger) {
    align-items: center !important;
    flex: 0 0 auto !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 2px solid transparent !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    color: #fff !important;
    display: inline-flex !important;
    font-family: "MS Inter", Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    gap: 4px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    width: auto !important;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box :is(.tk-param-chip, .tk-konfig-trigger):hover { background: rgba(255, 255, 255, .1) !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box :is(.tk-param-chip, .tk-konfig-trigger) .mdi { color: #fff !important; font-size: 16px !important; line-height: 1 !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box .tk-param-chip[data-tk-param="openrouter_image_model"],
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box .tk-param-chip[data-tk-param="openrouter_image_model"] .mdi { color: #ff3656 !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-eingabe > .tk-eingabe-aktionen > .tk-leiste-rechts > button {
    background: #ff3656 !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: "Bebas Neue", "Space Grotesk", sans-serif !important;
    font-size: 17px !important;
    gap: 4px !important;
    height: 100% !important;
    justify-content: center !important;
    letter-spacing: 1.02px;
    line-height: 1 !important;
    min-width: 0 !important;
    opacity: 1 !important;
    padding: 8px !important;
    text-transform: uppercase;
    width: 100% !important;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-eingabe > .tk-eingabe-aktionen > .tk-leiste-rechts > button > .mdi:first-child { display: none; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-eingabe > .tk-eingabe-aktionen > .tk-leiste-rechts > button .tk-start-credit {
    background: transparent !important; border: 0 !important; box-shadow: none !important; color: #fff !important;
    font-family: "MS Inter", Inter, system-ui, sans-serif !important; font-size: 12px !important; letter-spacing: 0; padding: 0 !important; text-transform: none;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-eingabe > .tk-eingabe-aktionen > .tk-leiste-rechts > button .tk-start-credit .mdi { color: #fff !important; }
  /* Anhang als Kachel. */
  /* Ohne Lücke zur Box, wie die Kacheln bei KI-Video (Betreiber 15.10.2026: „die Lücke entfernen“); der Innenabstand oben kommt
     sonst aus contentfactory-chatbox.css (11 px). */
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-anhang-dock { gap: 6px !important; margin-top: 0 !important; padding-top: 0 !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-anhang-dock > .tk-anhang-knopf {
    align-items: flex-start !important;
    background: linear-gradient(90deg, #ff3656, #ff8a5b) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 3px 7px 5px rgba(0, 0, 0, .12), 1px 3px 3px rgba(0, 0, 0, .32) !important;
    display: flex !important;
    flex: 0 0 150px !important;
    flex-direction: column !important;
    height: 76px !important;
    justify-content: space-between !important;
    max-width: 150px !important;
    min-width: 0 !important;
    padding: 7px 8px !important;
    position: relative;
    width: 150px !important;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-anhang-dock > .tk-anhang-knopf > .mdi {
    align-items: center; background: transparent !important; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px;
    color: #fff !important; display: flex; font-size: 12px !important; height: 20px !important; justify-content: center; width: 20px !important;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-anhang-dock > .tk-anhang-knopf > span {
    color: #fff !important; font-family: "Bebas Neue", "Space Grotesk", sans-serif !important; font-size: 14px !important; font-weight: 700 !important;
    letter-spacing: .84px; line-height: 14px; text-transform: uppercase;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-anhang-dock > .tk-anhang-knopf > small { display: none !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .sp-anhang-kachel { margin-top: 0 !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .sp-anhang-kachel > label:not(.video-file-picker) { display: none !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .sp-anhang-kachel .video-file-picker {
    align-items: flex-start !important; background: linear-gradient(90deg, #ff3656, #ff8a5b) !important; border: 0 !important; border-radius: 12px !important;
    box-shadow: 3px 7px 5px rgba(0, 0, 0, .12), 1px 3px 3px rgba(0, 0, 0, .32) !important; display: flex !important; flex-direction: column !important; height: 76px !important;
    justify-content: space-between !important; max-width: 150px !important; min-width: 0 !important; padding: 7px 8px !important; width: 150px !important;
  }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .sp-anhang-kachel .video-file-picker > .mdi { align-items: center; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; color: #fff !important; display: flex; font-size: 12px !important; height: 20px !important; justify-content: center; width: 20px !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .sp-anhang-kachel .video-file-picker b { color: #fff !important; font-family: "Bebas Neue", "Space Grotesk", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .84px; line-height: 14px; text-transform: uppercase; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .sp-anhang-kachel .video-file-picker small { display: none !important; }
  /* --- kleinere Maße ---------------------------------------------------------------------------------- */
  /* Die ältere Handy-Oberfläche der Eingabe (Fluss statt Überlagerung) gilt für die Eingabe auf der Seite nicht. */
  :is(html, #eingabe#seite) body :is(.video-production-modal, .thumbnail-production-modal).ist-eingebettet { margin: 0 !important; padding: 18px 8px 10px !important; top: -18px !important; width: auto !important; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-actions {
    display: grid !important; position: absolute !important; top: 16px !important; bottom: 16px !important; left: 16px !important; right: 16px !important; height: auto !important; padding: 0 !important;
  }
  /* Die Anhänge hängen unter dem Eingabekasten (wie am PC); das Fenster lässt ihnen unten Platz. */
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer { height: auto !important; min-height: 112px !important; position: relative !important; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-frame-dock { display: flex !important; left: 0 !important; margin: 0 !important; position: absolute !important; right: 0 !important; top: calc(100% + 6px) !important; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet { padding-bottom: 76px !important; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer [name="prompt"],
  .thumbnail-production-modal.ist-eingebettet form.tk-composer { --feld-feste-hoehe: 104px; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer [name="prompt"],
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box .tk-thema-feld textarea { padding: 10px 148px 54px 12px !important; }
  /* Knopf: 84 x 68 im Feld rechts. */
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-actions { grid-template-columns: minmax(0, 1fr) auto 0 84px !important; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-actions > .cc-button.primary { height: 68px !important; min-height: 68px !important; width: 84px !important; font-size: 13px !important; letter-spacing: .5px !important; padding: 6px !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-eingabe > .tk-eingabe-aktionen { right: 116px !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-eingabe > .tk-eingabe-aktionen > .tk-leiste-rechts { height: 68px !important; left: calc(100% + 16px) !important; min-width: 0 !important; width: 84px !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-eingabe > .tk-eingabe-aktionen > .tk-leiste-rechts > button { font-size: 13px !important; letter-spacing: .5px !important; padding: 6px !important; }
  /* Zauberstab links neben dem Knopf. */
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer .video-prompt-optimize-button { right: 104px !important; top: 10px !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-eingabe > .tk-prompt-assistent { right: 116px !important; top: 10px !important; }
  /* Die Parameter stehen auch hier sichtbar in einer Reihe (die ältere Handy-Oberfläche blendete sie aus). */
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box .tk-param-chips { display: flex !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box .tk-konfig-halter { max-width: 100% !important; min-width: 0 !important; width: 100% !important; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box .tk-param-chips { max-width: 100% !important; min-width: 0 !important; }
  /* Anhänge: kleinere Kacheln in einer wischbaren Reihe. */
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-frame-dock { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-anhang-dock { overflow-x: auto; scrollbar-width: none; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile,
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-anhang-dock > .tk-anhang-knopf,
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .sp-anhang-kachel .video-file-picker { flex: 0 0 112px !important; height: 56px !important; max-width: 112px !important; padding: 5px 7px !important; width: 112px !important; }
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile strong,
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-anhang-dock > .tk-anhang-knopf > span,
  :is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .sp-anhang-kachel .video-file-picker b { font-size: 12px !important; line-height: 12px; }
}

/* KI-Bild/Social-Posts, Eingabe auf der Seite: Referenzkachel ohne Lücke unter der Box, auf allen Breiten (Betreiber 15.10.2026:
   „die Lücke entfernen“; am PC kamen 8 px Außen- und 11 px Innenabstand aus contentfactory-chatbox.css). */
:is(html, #eingabe#studio) body .thumbnail-production-modal.ist-eingebettet .tk-box > .tk-anhang-dock { margin-top: 0 !important; padding-top: 0 !important; }

/* KI-Video, Eingabe auf der Seite: Kacheln (Startbild …) ohne Lücke unter der Box, auf allen Breiten (Betreiber 15.10.2026: „der Abstand
   ist da weiterhin“; vorher 12 px aus ai-contentfactory-control-center.css, am Handy 6 px). */
:is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer > .video-chat-frame-dock { top: 100% !important; }

/* Eingabe auf der Seite am PC (WL16-10): kleine Abstände über und unter der Box – sie steht jetzt direkt nach der Beschreibung.
   Vorher 28 px unten für die unten klebende Box (WL14-44). Beim Mitscrollen liegt die Box direkt an der Kopfzeile an: top hebt
   den leeren oberen Innenabstand auf, sonst liefen dort die Bilder des Verlaufs durch (WL16-14, 16.10.2026; Handy oben: -18 px). */
@media (min-width: 761px) {
  :is(html, #eingabe#studio) body :is(.video-production-modal, .thumbnail-production-modal).ist-eingebettet { padding-top: 12px !important; padding-bottom: 8px !important; top: -12px !important; }
  :is(html, #eingabe#studio) body :is(.video-production-modal, .thumbnail-production-modal).ist-eingebettet > :is(.video-production-dialog, .thumbnail-production-dialog) { margin-bottom: 16px !important; }
}
/* Scrollbalken im Textfeld erst, wenn es seine Höchsthöhe erreicht hat (WL16-01, Betreiber 16.10.2026: „ein Scrollbalken
   sollte dann erscheinen“) – schmal und dezent; vorher (seit 02.10.2026) war er ganz ausgeblendet. */
:is(html, #eingabe#studio) body textarea[data-eingabebox-feld] { scrollbar-color: #4a5063 transparent; scrollbar-width: thin; }
:is(html, #eingabe#studio) body textarea[data-eingabebox-feld]::-webkit-scrollbar { width: 6px; }
:is(html, #eingabe#studio) body textarea[data-eingabebox-feld]::-webkit-scrollbar-thumb { background: #4a5063; border-radius: 3px; }

/* KI-Video, Eingabe auf der Seite am PC: Platz für die Kachelreihe (76 px, ohne Lücke) von Anfang an fest reservieren (WL14-44).
   Vorher galt die Reservierung aus ai-contentfactory-control-center.css nur, solange die Reihe nicht als hidden markiert war -
   beim Aufbau ist sie das kurz, die Box sprang dann um 78 px. */
@media (min-width: 761px) {
  :is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-form.is-chat-composer { margin-bottom: 76px !important; }
}

/* Werkzeugseiten mit Eingabe auf der Seite (WL14-44): Die Seite blendet nur ein, statt sich 8 px von unten hereinzuschieben
   (factory-page-in) - die unten klebende Eingabe fuhr sonst sichtbar mit. Die Eingabe selbst blendet kurz ein: im allerersten
   Moment steht sie noch mitten auf der Seite, bevor sie unten klebt. */
@keyframes cf-seite-nur-einblenden { from { opacity: 0; } to { opacity: 1; } }
body.factory-page-active #factory-workspace:has(#workspace-body:is(:is([data-tool="video-generator"],[data-tool="video-editor"]), [data-tool="thumbnail-banner-maker"], [data-tool="social-media-post-banner-generator"])) .workspace-panel { animation-name: cf-seite-nur-einblenden !important; }
:is(html, #eingabe#seite) body :is(.video-production-modal, .thumbnail-production-modal).ist-eingebettet { animation: cf-seite-nur-einblenden .2s ease-out; }

/* Ausgewählte Bilder IN der Kachel (WL14-45, Betreiber 15.10.2026: „das ausgesuchte Bild im entsprechenden Button; je mehr
   Bilder, desto kleiner, dass sie noch in den Kasten passen; nicht bei Start- und Endframe, das ist immer nur ein Bild“).
   KI-Video: Startbild/Endbild/Referenzbilder (zeichneAnhaenge hängt den Halter in die Kachel), KI-Bild: Referenzbilder.
   Raster nach data-anzahl; die Kachel bleibt gleich groß. Beschriftung bleibt über einem dunklen Verlauf lesbar; × beim
   Drüberfahren (am Handy immer). Klick auf ein Bild öffnet wie bisher die Auswahl; KI-Bild-Bilder lassen sich weiter ziehen. */
:is(html, #eingabe#studio) body .video-production-modal .video-chat-frame-tile:has(> .video-chat-attachments:not([hidden])),
:is(html, #eingabe#studio) body .thumbnail-production-modal .tk-anhang-knopf:has(> .tk-anhaenge:not([hidden])) { overflow: hidden !important; position: relative !important; }
:is(html, #eingabe#studio) body .video-production-modal .video-chat-frame-tile > .video-chat-attachments,
:is(html, #eingabe#studio) body .thumbnail-production-modal .tk-anhang-knopf > .tk-anhaenge {
  border: 0 !important; border-radius: inherit; display: grid !important; gap: 2px !important; grid-auto-rows: 1fr; grid-template-columns: 1fr;
  inset: 0; margin: 0 !important; overflow: hidden; padding: 0 !important; position: absolute !important; z-index: 1;
}
:is(html, #eingabe#studio) body .video-production-modal .video-chat-frame-tile > .video-chat-attachments[hidden],
:is(html, #eingabe#studio) body .thumbnail-production-modal .tk-anhang-knopf > .tk-anhaenge[hidden] { display: none !important; }
:is(html, #eingabe#studio) body :is(.video-production-modal, .thumbnail-production-modal) :is(.video-chat-attachments, .tk-anhaenge):is([data-anzahl="2"], [data-anzahl="3"], [data-anzahl="4"]) { grid-template-columns: repeat(2, 1fr); }
:is(html, #eingabe#studio) body :is(.video-production-modal, .thumbnail-production-modal) :is(.video-chat-attachments, .tk-anhaenge):is([data-anzahl="5"], [data-anzahl="6"], [data-anzahl="7"], [data-anzahl="8"], [data-anzahl="9"]) { grid-template-columns: repeat(3, 1fr); }
:is(html, #eingabe#studio) body :is(.video-production-modal, .thumbnail-production-modal) :is(.video-chat-attachments, .tk-anhaenge):not([data-anzahl="1"], [data-anzahl="2"], [data-anzahl="3"], [data-anzahl="4"], [data-anzahl="5"], [data-anzahl="6"], [data-anzahl="7"], [data-anzahl="8"], [data-anzahl="9"]) { grid-template-columns: repeat(4, 1fr); }
/* Dunkler Verlauf unten, damit die Beschriftung der Kachel lesbar bleibt. */
:is(html, #eingabe#studio) body :is(.video-production-modal, .thumbnail-production-modal) :is(.video-chat-frame-tile > .video-chat-attachments, .tk-anhang-knopf > .tk-anhaenge)::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .72)); content: ""; inset: 0; pointer-events: none; position: absolute;
}
:is(html, #eingabe#studio) body :is(.video-production-modal, .thumbnail-production-modal) :is(.video-chat-attachment, .tk-anhang) {
  background: #000 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; height: 100% !important;
  margin: 0 !important; min-height: 0; min-width: 0; position: relative; transform: none !important; width: 100% !important;
}
:is(html, #eingabe#studio) body :is(.video-production-modal, .thumbnail-production-modal) :is(.video-chat-attachment, .tk-anhang) img { height: 100% !important; object-fit: cover; width: 100% !important; }
:is(html, #eingabe#studio) body :is(.video-production-modal, .thumbnail-production-modal) :is(.video-chat-attachment, .tk-anhang) figcaption { display: none !important; }
:is(html, #eingabe#studio) body :is(.video-production-modal, .thumbnail-production-modal) :is(.video-chat-attachment, .tk-anhang) > button {
  height: 18px !important; opacity: 0; right: 3px !important; top: 3px !important; transition: opacity .15s ease; width: 18px !important; z-index: 3;
}
:is(html, #eingabe#studio) body :is(.video-production-modal, .thumbnail-production-modal) :is(.video-chat-attachment, .tk-anhang):hover > button,
:is(html, #eingabe#studio) body :is(.video-production-modal, .thumbnail-production-modal) :is(.video-chat-attachment, .tk-anhang) > button:focus-visible { opacity: 1; }
@media (hover: none) { :is(html, #eingabe#studio) body :is(.video-production-modal, .thumbnail-production-modal) :is(.video-chat-attachment, .tk-anhang) > button { opacity: 1; } }
:is(html, #eingabe#studio) body :is(.video-production-modal, .thumbnail-production-modal) :is(.video-chat-attachment, .tk-anhang) > button i { font-size: 11px !important; }
/* Beschriftung und Symbol der Kachel über den Bildern. */
:is(html, #eingabe#studio) body .video-production-modal .video-chat-frame-tile > :is(span, .mdi),
:is(html, #eingabe#studio) body .thumbnail-production-modal .tk-anhang-knopf > :is(span, .mdi, small) { pointer-events: none; position: relative; z-index: 2; }
/* Die Trennlinie über der früheren Bildzeile unter den Kacheln entfällt. */
:is(html, #eingabe#studio) body .video-production-modal .video-chat-frame-dock.has-attachments::before { display: none !important; }

/* KI-Video, Eingabe auf der Seite: kein Rechte-Hinweis darunter (WL14-40, Betreiber 15.10.2026: Balken entfernen, dann Wahl „A“ = Satz
   ganz entfernen). Nur hier ausgeblendet; im Markup bleibt er (Test video-model-capabilities) und im Fenster sichtbar. */
:is(html, #eingabe#studio) body .video-production-modal.ist-eingebettet .video-generator-rights-notice { display: none !important; }

/* WL16-10 (16.10.2026): Die Eingabe steht direkt nach der Beschreibung – kein großer Freiraum dazwischen; die 80 px (Handy 48 px)
   Abstand zum Verlauf (WL14-36) gelten nur, wenn keine Eingabe folgt. Unter der Eingabe genügt ein kleiner Abstand. */
#workspace-body > .cf-einstieg-rahmen:has(+ .ist-eingebettet) { margin-bottom: 16px !important; }

/* WL14-34: Regler-Knopf und Konfigurationsfenster entfallen überall (Fenster und Seite). Steht hier, weil die Chip-Regeln oben mit
   !important und gleicher Gewichtung den Knopf sonst wieder einblenden. */
:is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-actions > .video-config-trigger,
:is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > [data-video-config-panel],
:is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box .tk-konfig-halter > .tk-konfig-trigger,
:is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box > .tk-konfig-panel,
:is(html, #eingabe#studio) body .thumbnail-production-modal .tk-box .tk-konfig-halter .tk-konfig-panel { display: none !important; }

/* WL17-01: gemeinsame Videovorschau und Beschriftung innerhalb der Kachel. */
:is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile.video-chat-vorlage-tile .video-chat-video-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;border-radius:inherit}
:is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile.video-chat-vorlage-tile.has-video-preview .video-chat-video-preview{opacity:1}
:is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile.video-chat-vorlage-tile.has-video-preview>span{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 6px 5px;background:linear-gradient(transparent,rgba(0,0,0,.82));text-shadow:0 1px 3px #000}
:is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile.video-chat-vorlage-tile.has-video-preview>i{z-index:2}

/* WL18-23 (Betreiber 18.10.2026): Die Kacheln unter der Eingabe tragen den confacAI-Verlauf. Eine Kachel, die das gewählte Modell
   nicht unterstützt, bleibt grau - im Verlauf sähe sie nur blass-rötlich aus und wirkte nicht gesperrt. */
:is(html, #eingabe#studio) body .video-production-modal .video-generator-form.is-chat-composer > .video-chat-frame-dock > .video-chat-frame-tile.is-unsupported { background: linear-gradient(rgb(32, 32, 32) 0%, rgb(80, 79, 79) 100%) !important; }