/* Letzte Cleaning Prüfung: 03.10.2026 */
/* Letztes Cleaning: 26.09.2026 */

/*
 * Eine Galerie für die Ergebnisse von "Video erstellen", "Video zu Shorts",
 * "Bild erstellen" und "Video-Übersetzung" (contentfactory-ergebnis-mauer.js,
 * 26.09.2026). Der "Social Media Poster" zeigt seit 03.10.2026 Post-Karten in
 * gleich breiten Spalten (ai-contentfactory-pages.css, AL-20261003-03).
 *
 * Ausgerichtete Streifen: Querbilder in Reihen, Hochkant-Bilder zwei Reihen
 * hoch in ihrer eigenen Breite, jeder Streifen genau auf volle Breite
 * gerechnet - lückenlos, nichts beschnitten. Das Skript setzt je Kachel
 * --m-x, --m-y, --m-b, --m-h und je Raster --m-hoehe.
 *
 * Die Regeln legen sich über die älteren Raster- und Reihenregeln
 * (ai-contentfactory-medien-galerie.css, ai-contentfactory-pages.css,
 * ai-contentfactory-control-center.css, contentfactory-mobil-freigaben.css),
 * die teils mit !important und Werkzeug-Attributen arbeiten. Deshalb die
 * doppelte ID: sie schlägt jede dieser Regeln, ohne sie anfassen zu müssen.
 * Die Datei wird zuletzt geladen.
 */

#workspace-body#workspace-body .ist-ergebnis-mauer {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: var(--m-hoehe, auto) !important;
  min-height: 0 !important;
  padding: 0 !important;
}

#workspace-body#workspace-body .ist-ergebnis-mauer > .ist-mauer-kachel {
  position: absolute !important;
  top: var(--m-y, 0) !important;
  left: var(--m-x, 0) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--m-b, 0) !important;
  max-width: none !important;
  min-width: 0 !important;
  height: var(--m-h, auto) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  flex: none !important;
  aspect-ratio: auto !important;
  transform: none;
}

/* Was keine Kachel ist (etwa "Mehr laden"), steht darunter über die ganze Breite. */
#workspace-body#workspace-body .ist-ergebnis-mauer > .ist-mauer-breit {
  position: absolute !important;
  top: var(--m-y, 0) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  margin: 0 !important;
}

/* --- Social-Freigabe: das Bild ohne leere Balken -------------------------------------------- */
/* Die Freigabe war immer bildschirmhoch; das Bild füllte davon nur, was sein
   Format hergab, darüber und darunter blieben dunkle Balken (Nutzermeldung
   26.09.2026, 16:9-Bild). Jetzt ist die Karte so hoch wie ihr Inhalt, der
   Bildbereich genau so hoch wie das Bild. Die Breite rechnet weiter
   setzeFreigabeBreite() in ai-contentfactory.js. */
/* Seit AL-20261003-10 nur ab 701 px: am Telefon ist die Freigabe eine Vollbildansicht,
   das Bild steht dort in voller Breite und die ganze Ansicht rollt
   (contentfactory-mobil-freigaben.css). */
@media (min-width: 701px) {
  body .social-poster-review-modal .social-poster-review-dialog { height: auto; }
  body .social-poster-review-modal .sp-post-bild { flex: 0 0 auto; }
  body .social-poster-review-modal .sp-post-bild > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - 36px - var(--sp-beiwerk, 430px));
    object-fit: contain;
  }
  /* Prozentangaben greifen ohne feste Kartenhöhe nicht mehr. */
  body .social-poster-review-modal .sp-post-text { max-height: 26dvh; }
}

/* --- Video erstellen: Titelzeile unter dem Video (TOOL02-01, 09.10.2026) --------------------
 * Die Mauer plant je Kachel 30 px Text ein (--m-text) und setzt die Bildhöhe
 * --m-bild-h. Nur fertige Videos tragen eine Titelzeile (.hat-titel); laufende
 * und fehlgeschlagene Kacheln füllen die ganze Höhe. */
#workspace-body#workspace-body .video-generator-history .ist-mauer-kachel.hat-titel > .video-history-gallery-open {
  height: var(--m-bild-h, 100%) !important;
}
#workspace-body#workspace-body .video-generator-history .ist-mauer-kachel > .video-history-titel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--m-text, 30px);
  margin: 0;
  padding: 0 12px;
  overflow: hidden;
  color: #c8ceda;
  font-size: 12.5px;
  font-weight: 600;
  line-height: var(--m-text, 30px);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- Video erstellen: „Alle herunterladen“ rechts in der Kopfzeile (TOOL02-03, 09.10.2026) --- */
#workspace-body#workspace-body .video-generator-history > header .video-history-alle-laden {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin-left: auto;
  padding: 0 14px;
  border: 1px solid #303542;
  border-radius: 99px;
  background: #171b24;
  color: #c8ceda;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
#workspace-body#workspace-body .video-generator-history > header .video-history-alle-laden:hover,
#workspace-body#workspace-body .video-generator-history > header .video-history-alle-laden:focus-visible {
  border-color: rgba(255, 48, 79, 0.7);
  color: #fff;
}
#workspace-body#workspace-body .video-generator-history > header .video-history-alle-laden .mdi {
  font-size: 17px;
}
/* Meldung zu „Alle herunterladen“: dezent in der Kopfzeile links neben dem Knopf,
 * einzeilig, verschiebt die Kacheln nicht (Betreiber 09.10.2026). */
#workspace-body#workspace-body .video-generator-history > header .video-history-alle-status {
  margin-left: auto;
  margin-right: 12px;
  min-width: 0;
  max-width: 45%;
  overflow: hidden;
  color: #8b93a3;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#workspace-body#workspace-body .video-generator-history > header .video-history-alle-status + .video-history-alle-laden {
  margin-left: 0;
}
#workspace-body#workspace-body .video-generator-history > header .video-history-alle-laden.is-loading {
  border-color: rgba(255, 48, 79, 0.7);
  color: #fff;
}

/* --- Kino-Raster wie „Vorlagen entdecken“ im Movie Studio (WL-15 bis WL-20, 12.10.2026) -------
 * Gleiches Aussehen wie .ms-vorlage (contentfactory-marketing-studio.css): eckige Kacheln ohne
 * Rahmen und Schatten, 4 px Abstand (setzt das Skript), das Bild füllt die Kachel. Titel stehen
 * nicht unter dem Bild, sondern erscheinen beim Überfahren auf einer Abdunkelung rgba(0,0,0,.4)
 * unten links - groß, fett, in Großbuchstaben wie der Genre-Name im Movie Studio. Knöpfe
 * (Löschen, Herunterladen …) erscheinen ebenfalls erst beim Überfahren. */
/* Rundung und Innenlinie wie .ist-werbestudio .ms-vorlage (werbestudio.css), die das Movie
   Studio zusätzlich zu contentfactory-marketing-studio.css lädt. */
#workspace-body#workspace-body .ist-kino-raster > .ist-mauer-kachel {
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px #292c37 !important;
  background: #1c1e20 !important;
  overflow: hidden !important;
  padding: 0 !important;
  outline-offset: -2px;
}
#workspace-body#workspace-body .ist-kino-raster > .ist-mauer-kachel:hover { transform: none !important; }
/* Das Medium füllt die ganze Kachel. */
#workspace-body#workspace-body .ist-kino-raster > .ist-mauer-kachel :is(img, video):not(.mdi) {
  border-radius: 0 !important;
  object-fit: cover !important;
}
/* Abdunkelung beim Überfahren über der ganzen Kachel. */
#workspace-body#workspace-body .ist-kino-raster > .ist-mauer-kachel::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, .4) !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .15s ease;
  z-index: 2 !important;
}
#workspace-body#workspace-body .ist-kino-raster > .ist-mauer-kachel:is(:hover, :focus-within)::after { opacity: 1 !important; }
/* Knöpfe, Menüs und Markierungen liegen über der Abdunkelung. */
#workspace-body#workspace-body .ist-kino-raster > .ist-mauer-kachel :is(.cf-aktionsmenue-knopf, .cf-aktionsmenue-liste, .video-history-new-sticker, .spv-status, .cmy-karte-knoepfe) { z-index: 4; }
/* Das „NEU“-Etikett ragt bewusst über die obere Kante; die Kachel schnitt es ab (WL22-29, Betreiber: „darf nicht abgeschnitten
   werden und soll an der Position bleiben“). Neue Kacheln schneiden deshalb per clip-path statt overflow: oben bleiben 24 px
   Platz für das Etikett, seitlich und unten wird wie bisher an den runden Ecken abgeschnitten. */
#workspace-body#workspace-body .ist-kino-raster > .ist-mauer-kachel.is-newly-completed {
  overflow: visible !important;
  clip-path: inset(-24px 0 0 0 round 0 0 12px 12px);
}
/* MOB19-08: Am Tablet steht das „NEU“-Etikett ganz in der Kachel (so abgenommen). Seit WL22-29 würde es auch dort nicht mehr
   abgeschnitten; die Lage bleibt bis zu einer Entscheidung des Betreibers wie abgenommen. */
@media (min-width: 761px) and (max-width: 1024px) {
  #workspace-body#workspace-body .ist-kino-raster > .ist-mauer-kachel .video-history-new-sticker { top: 8px; left: 8px; }
}
/* Einblendung beim Überfahren - wie .ms-vorlage-hover: unten links, kleine graue Zeile
   (12 px) über einer großen weißen Zeile (16 px, fett, Großbuchstaben, Space Grotesk). */
#workspace-body#workspace-body .ist-kino-raster > .ist-mauer-kachel :is(.video-history-titel, .shorts-history-card-overlay, .spv-kachel-text) {
  position: absolute !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  margin: 0 !important;
  padding: 10px !important;
  background: none !important;
  color: #fff !important;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 3;
  pointer-events: none;
  text-align: left;
}
#workspace-body#workspace-body .ist-kino-raster > .ist-mauer-kachel:is(:hover, :focus-within) :is(.video-history-titel, .shorts-history-card-overlay, .spv-kachel-text) { opacity: 1; }
#workspace-body#workspace-body .ist-kino-raster > .ist-mauer-kachel :is(.video-history-titel, .shorts-history-card-overlay strong, .spv-kachel-text strong) {
  color: #fff !important;
  font: 700 16px/16px 'Space Grotesk', sans-serif !important;
  letter-spacing: -1.2px !important;
  text-transform: uppercase;
  white-space: normal !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#workspace-body#workspace-body .ist-kino-raster > .ist-mauer-kachel :is(.shorts-history-card-overlay small, .spv-kachel-text small) {
  color: rgba(255, 255, 255, .5) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  order: -1;
}
/* Video erstellen: das Bild nimmt die ganze Kachel, der Titel liegt darüber. */
#workspace-body#workspace-body .video-generator-history .ist-kino-raster > .ist-mauer-kachel.hat-titel > .video-history-gallery-open { height: 100% !important; }
/* Storyboard: Bild füllt die Kachel statt fester 16:9-Fläche mit Text darunter. */
#workspace-body#workspace-body .ist-kino-raster > .spv-kachel > img,
#workspace-body#workspace-body .ist-kino-raster > .spv-kachel > .spv-kachel-platz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
/* Community: eigener Schatten entfällt, die gemeinsame Abdunkelung übernimmt. */
#workspace-body#workspace-body .ist-kino-raster > .cmy-karte > .cmy-karte-schatten { display: none; }
#workspace-body#workspace-body .ist-kino-raster > .cmy-karte > .cmy-karte-fuss { z-index: 3; background: none; }
#workspace-body#workspace-body .ist-kino-raster > .cmy-karte .cmy-karte-titel {
  color: #fff !important;
  font: 700 20px/24px 'Space Grotesk', sans-serif !important;
  letter-spacing: -.6px !important;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
#workspace-body#workspace-body .ist-kino-raster > .cmy-karte .cmy-karte-autor { color: rgba(255, 255, 255, .5); font-size: 12px; }
/* Seitenrand (Betreiber 12.10.2026, dreimal nachjustiert): Text, Überschriften und Kästen
   halten 24 px Abstand zur Wand, nur das Kachelraster reicht bis 4 px heran - so viel wie
   der Abstand zwischen den Kacheln. Vorher rund 5vw (92 px bei 1920 px). */
@media (min-width: 761px) {
  body.factory-page-active #workspace-body#workspace-body:has(.ist-kino-raster) {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  body.factory-page-active #workspace-body#workspace-body .ist-ergebnis-mauer.ist-kino-raster {
    width: calc(100% + 40px) !important;
    max-width: none !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
  }
}
/* Community: Der Bereich .cmy hielt selbst 40 px Innenabstand; am PC entfällt er, damit Text wie
   überall 24 px vom Rahmen steht (WL-31, 12.10.2026). Das Raster nutzt dann die gemeinsame Regel. */
@media (min-width: 761px) {
  body.factory-page-active #workspace-body#workspace-body .cmy { padding-left: 0 !important; padding-right: 0 !important; }
}

/* KI-Video: gut lesbarer Titel und unverdeckte laufende Vorschau. */
#workspace-body#workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .ist-kino-raster > .ist-mauer-kachel .video-history-titel { font-size: 20px !important; line-height: 24px !important; letter-spacing: -.5px !important; }
#workspace-body#workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .ist-kino-raster > .ist-mauer-kachel.is-playing::after { opacity: 0 !important; }
#workspace-body#workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .ist-kino-raster > .ist-mauer-kachel.is-playing video { filter: none !important; }

@media(max-width:480px) {
 #workspace-body#workspace-body .ist-kino-raster > .cmy-karte .cmy-karte-titel { font-size: 18px !important; line-height: 22px !important; }
}

/* Storyboard am Handy (MOB17-29, Betreiber 17.10.2026: „beim storyboard werden die bilder teilweise abgeschnitten“): Die Mauer
   rechnet jedes Blatt als 16:9-Kachel, die Blätter sind aber höher (3 x 3 Bilder mit Unterschriften, bis 1,27 : 1) und wurden
   beschnitten. In der einen Spalte des Telefons steht jedes Blatt deshalb ganz – so hoch, wie es ist, untereinander. */
@media (max-width: 760px) {
  #workspace-body#workspace-body[data-tool="storyboard"] .ist-ergebnis-mauer { height: auto !important; }
  #workspace-body#workspace-body[data-tool="storyboard"] .ist-ergebnis-mauer > :is(.ist-mauer-kachel, .ist-mauer-breit) {
    height: auto !important;
    left: auto !important;
    margin: 0 0 10px !important;
    position: relative !important;
    top: auto !important;
    width: 100% !important;
  }
  #workspace-body#workspace-body[data-tool="storyboard"] .ist-ergebnis-mauer > .ist-mauer-kachel > img {
    display: block;
    height: auto !important;
    object-fit: contain !important;
    position: relative !important;
    width: 100% !important;
  }
}