/* Letzte Cleaning Prüfung: 03.10.2026 */
/* Letztes Cleaning: 03.10.2026 */
/* Drei-Punkte-Menü an Verlaufskacheln und Großansichten (AL-20260927-01).
   Die Knöpfe im Menü sind die bisherigen Aktionsknöpfe; ihre Regeln aus
   contentfactory-kachel-symbole.css (feste Position, nur beim Zeigen sichtbar,
   alles mit !important) werden hier gezielt aufgehoben. Die doppelte Klasse
   .hat-aktionsmenue.hat-aktionsmenue hebt die Spezifität darüber. Diese Datei
   wird nach contentfactory-kachel-symbole.css geladen. */

.hat-aktionsmenue { position: relative; }
/* Galeriekacheln schliessen ihre Ebenen ein (AL-20261003-06): "⋮" (z-index 6)
   und andere Kachelsymbole lagen beim Scrollen ueber der klebenden Leiste
   "Neue Produktion" (Telefon z-index 6, PC 2). Nur Kacheln - Grossansichten
   und Detaildialoge brauchen ihre Ebenen weiter nach aussen. Ein offenes Menue
   hebt die Kachel wie bisher auf 30. */
.hat-aktionsmenue:is(.video-history-gallery-card, .shorts-history-card, .thumbnail-history-card, .speech-gallery-card) { isolation: isolate; }

.cf-aktionsmenue-knopf {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(10, 12, 18, .72);
  color: #f5f7fb;
  font-size: 20px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cf-aktionsmenue-knopf:hover,
.cf-aktionsmenue-knopf[aria-expanded="true"] { border-color: #ff315d; background: rgba(40, 14, 22, .9); }
.cf-aktionsmenue-knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Wie die bisherigen Symbole: am PC erst beim Zeigen, am Touchgerät immer. */
@media (hover: hover) and (pointer: fine) {
  .hat-aktionsmenue:not(.ist-aktionsmenue-offen) > .cf-aktionsmenue-knopf { opacity: 0; transition: opacity .15s ease; }
  .hat-aktionsmenue:hover > .cf-aktionsmenue-knopf,
  .hat-aktionsmenue:focus-within > .cf-aktionsmenue-knopf { opacity: 1; }
}

.cf-aktionsmenue-liste {
  position: absolute;
  top: 50px;
  right: 8px;
  z-index: 7;
  display: none;
  gap: 2px;
  min-width: 200px;
  max-width: calc(100% - 16px);
  padding: 6px;
  border: 1px solid #343a49;
  border-radius: 12px;
  background: #11141c;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.ist-aktionsmenue-offen > .cf-aktionsmenue-liste { display: grid; }
/* Offen darf das Menue ueber die Kachel hinausragen (Kacheln beschneiden ihren
   Inhalt) und liegt ueber den Nachbarkacheln. Die runden Ecken haelt dabei ein
   clip-path aus contentfactory-aktionsmenue.js (zuschneiden) - AL-20260927-27. */
.hat-aktionsmenue.ist-aktionsmenue-offen { z-index: 30 !important; }
/* Nur wenn das Menü über die Kachel hinausragt (ist-aktionsmenue-ragt, JS): sichtbar plus Zuschnitt. */
.hat-aktionsmenue.ist-aktionsmenue-offen.ist-aktionsmenue-ragt { overflow: visible !important; }

.hat-aktionsmenue.hat-aktionsmenue .cf-aktionsmenue-liste > .cf-aktionsmenue-eintrag {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #e6e9f1 !important;
  font: 600 13px/1 'DM Sans', sans-serif !important;
  text-align: left !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  cursor: pointer;
}
.hat-aktionsmenue.hat-aktionsmenue .cf-aktionsmenue-liste > .cf-aktionsmenue-eintrag::after {
  content: attr(data-aktionsmenue-text);
}
.hat-aktionsmenue.hat-aktionsmenue .cf-aktionsmenue-liste > .cf-aktionsmenue-eintrag > i { color: #ff526b !important; font-size: 18px !important; }
.hat-aktionsmenue.hat-aktionsmenue .cf-aktionsmenue-liste > .cf-aktionsmenue-eintrag > span { display: none !important; }
.hat-aktionsmenue.hat-aktionsmenue .cf-aktionsmenue-liste > .cf-aktionsmenue-eintrag:hover,
.hat-aktionsmenue.hat-aktionsmenue .cf-aktionsmenue-liste > .cf-aktionsmenue-eintrag:focus-visible { background: #1e2230 !important; color: #fff !important; }
.hat-aktionsmenue.hat-aktionsmenue .cf-aktionsmenue-liste > .cf-aktionsmenue-eintrag.ist-loeschen { color: #ff8296 !important; border-top: 1px solid #262a35 !important; border-radius: 0 0 8px 8px !important; }
.hat-aktionsmenue.hat-aktionsmenue .cf-aktionsmenue-liste > .cf-aktionsmenue-eintrag.ist-loeschen > i { color: #ff8296 !important; }
.hat-aktionsmenue.hat-aktionsmenue .cf-aktionsmenue-liste > .cf-aktionsmenue-eintrag[disabled] { opacity: .5 !important; cursor: default; }

/* Touch: groessere Ziele. */
@media (pointer: coarse) {
  .cf-aktionsmenue-knopf { width: 40px; height: 40px; }
  .cf-aktionsmenue-liste { top: 54px; }
  .hat-aktionsmenue.hat-aktionsmenue .cf-aktionsmenue-liste > .cf-aktionsmenue-eintrag { height: 44px !important; min-height: 44px !important; }
}

/* Grossansicht eines Bildes: Menue links oben (rechts sitzt auf dem Telefon das
   Schliessen-Kreuz); das fruehere Telefon-Menue entfaellt dort. Die Symbole
   waren am PC nur beim Zeigen sichtbar - der Knopf ist es immer. */
.cf-aktionsmenue-links > .cf-aktionsmenue-knopf,
.cf-aktionsmenue-links > .cf-aktionsmenue-liste { left: 8px; right: auto; }
.hat-aktionsmenue > [data-bild-menue] { display: none !important; }
.thumbnail-editor-modal-content .hat-aktionsmenue > .cf-aktionsmenue-knopf { opacity: 1 !important; }

/* Video-Kino ab Tablet-Breite: die Werkzeugleiste (Herunterladen, Frame,
   Weiterfuehren, Thumbnail, Sound, Teilen) klappt aus "⋮" auf, statt offen
   rechts neben bzw. unter dem Video zu stehen. Auf dem Telefon gilt das
   bisherige Menue (ai-contentfactory-control-center.css, .ist-telefon-kino). */
@media (min-width: 701px) {
  #workspace-body .video-history-cinema-overlay .video-rebuild-player > .cinema-menu-knopf {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 12;
    display: grid !important;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    background: rgba(10, 12, 18, .72);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
  }
  #workspace-body .video-history-cinema-overlay .video-rebuild-player > .cinema-menu-knopf:hover,
  #workspace-body .video-history-cinema-overlay .video-rebuild-player > .cinema-menu-knopf[aria-expanded="true"] { border-color: #ff315d; }
  #workspace-body .video-history-cinema-overlay .video-rebuild-player:not(.ist-menue-offen) .cinema-player-tools { display: none !important; }
  /* Das Menue darf ueber den Player hinausragen: bei Querformat-Videos am Tablet hochkant war der Player nur ~280 px hoch
     und schnitt "Teilen" ab (Tablet-Pruefung 22.10.2026). Reicht der Platz trotzdem nicht, scrollt das Menue. */
  #workspace-body .video-history-cinema-overlay .video-rebuild-player.ist-menue-offen,
  #workspace-body .video-history-cinema-overlay .video-history-detail:has(.video-rebuild-player.ist-menue-offen) { overflow: visible !important; }
  #workspace-body .video-history-cinema-overlay .video-rebuild-player.ist-menue-offen .cinema-player-tools {
    position: absolute !important;
    top: 60px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 12 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    width: 240px !important;
    padding: 6px !important;
    border: 1px solid #343a49 !important;
    border-radius: 12px !important;
    background: #11141c !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55) !important;
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
  }
  #workspace-body .video-history-cinema-overlay .video-rebuild-player.ist-menue-offen .cinema-player-tools .cinema-player-download {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #e6e9f1 !important;
    text-align: left !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #workspace-body .video-history-cinema-overlay .video-rebuild-player.ist-menue-offen .cinema-player-tools .cinema-player-download > span { display: block !important; justify-self: start !important; text-align: left !important; font: 600 13px/1.2 'DM Sans', sans-serif !important; white-space: nowrap; }
  #workspace-body .video-history-cinema-overlay .video-rebuild-player.ist-menue-offen .cinema-player-tools .cinema-player-download > i { color: #ff526b; font-size: 18px; }
  #workspace-body .video-history-cinema-overlay .video-rebuild-player.ist-menue-offen .cinema-player-tools .cinema-player-download:hover { background: #1e2230 !important; }
}

/* DESK13-24: Social-Posts ohne Trennstrich vor Löschen. */
.social-poster-history-card.hat-aktionsmenue.hat-aktionsmenue .cf-aktionsmenue-liste > .cf-aktionsmenue-eintrag.ist-loeschen { border-top: 0 !important; border-radius: 8px !important; }