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

/*
 * Community als Reiter der Contentfactory (contentfactory-community.js).
 *
 * Seit 26.09.2026 eigene Community-Ansicht
 * (Nutzerwunsch "so gut es geht kopieren"). Maße von dort abgenommen:
 * Reiter 14px/500 in 32px hohen Feldern (aktiv rgba(35,38,42,.75)),
 * Abschnittstitel 20px/600 mit -0.4px Laufweite, "Alle ansehen" als Feld mit
 * rgba(255,255,255,.1), Kacheln 16:9 mit 12px Radius und 20px Abstand,
 * Shots im Mauerwerk mit 16px Abstand, Detailansicht mit schwebender
 * Seitenleiste. Schrift wie dort: Grotesk für den Text (bei uns DM Sans statt
 * Inter), Space Grotesk für den großen Titel. Akzent bleibt unser Rot.
 */

.cmy {
  --cmy-rot: #ff3153;
  --cmy-rot-tief: #f20d3d;
  --cmy-grund: #0b0c10;
  --cmy-flaeche: rgba(255, 255, 255, .05);
  --cmy-feld: rgba(255, 255, 255, .06);
  --cmy-rand: rgba(255, 255, 255, .08);
  --cmy-text: #f7f7f8;
  --cmy-leise: rgba(255, 255, 255, .56);
  --cmy-rand-x: 40px;
  position: relative;
  display: grid;
  padding: 0 var(--cmy-rand-x) 72px;
  color: var(--cmy-text);
  font-family: 'DM Sans', system-ui, sans-serif;
  /* Volle Breite (Betreiber 29.09.2026, WQHD): das Raster bekommt auf breiten Bildschirmen mehr Spalten statt größerer
     Kacheln (mindestens 300 px je Kachel). Das Banner bleibt auf 1680 px begrenzt, sonst wird es ein Streifen. */
  width: 100%;
  max-width: none;
  margin: 0 auto;
}
#workspace-body.workspace-community[data-tool="community"] { container-type: inline-size; }
/* Die Community füllt den Arbeitsbereich wie eine eigene Seite: ohne Kopf
   ("ENTDECKEN · Community" mit X) und ohne Innenabstand - das Banner läuft
   bis an die Ränder. */
.workspace-panel:has(> #workspace-body[data-tool="community"]) > .workspace-header { display: none; }
/* Nur solange die Community offen ist: die Werkzeuge setzen die Klassen des
   Arbeitsbereichs nicht zurück, und ohne Innenabstand klebte danach z. B.
   "Video erstellen" am linken Rand (Nutzermeldung 26.09.2026). */
body.factory-page-active #workspace-body.workspace-community[data-tool="community"],
#workspace-body.workspace-community[data-tool="community"] { padding: 0 !important; }
[data-cmy-inhalt] { display: grid; gap: 56px; min-width: 0; }

/* --- Banner -------------------------------------------------------------------------------- */
/* Ein festes Bild, das der Betreiber festlegt (community/banner.webp);
   ohne Datei ein ruhiger Verlauf. Über die ganze Breite der Fläche. */
.cmy-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(220px, 26vw, 420px);
  margin: 0 calc(var(--cmy-rand-x) * -1);
  padding: 0 var(--cmy-rand-x) 32px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 78% 20%, rgba(255, 49, 83, .28), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(120, 40, 200, .18), transparent 50%),
    #111218;
}
.cmy-banner-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cmy-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, var(--cmy-grund) 0%, rgba(11, 12, 16, .55) 30%, transparent 65%);
}
.cmy-banner-text { display: grid; gap: 10px; max-width: 620px; }
.cmy-banner-text h1 {
  margin: 0;
  color: #fff;
  font-family: 'Space Grotesk', 'DM Sans', sans-serif;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.cmy-banner-text p { margin: 0; color: rgba(255, 255, 255, .66); font-size: 16px; line-height: 24px; }
/* Ausgeschriebenes Logo statt des Wortes "confacAI" im Satz (AL-20261001-33),
   etwa so hoch wie die Grossbuchstaben. */
.cmy-banner-logo { display: inline-block; height: 1.05em; width: auto; margin: 0 .08em; vertical-align: -.16em; }
/* Breite Bildschirme (WQHD, Betreiber 29.09.2026): das Banner läuft randlos über die ganze Fläche und wird mit der
   Breite höher, damit das Bild (16:9) nicht zum Streifen wird; Schrift und Text wachsen mit. */
@container (min-width: 1760px) {
  .cmy-banner { min-height: clamp(420px, 19cqw, 700px); padding-bottom: clamp(32px, 2.4cqw, 64px); }
  .cmy-banner-bild { object-position: 50% 38%; }
}
@container (min-width: 2400px) {
  .cmy-banner-text { max-width: 900px; gap: 14px; }
  .cmy-banner-text h1 { font-size: clamp(56px, 3.2cqw, 104px); }
  .cmy-banner-text p { font-size: clamp(16px, 0.85cqw, 28px); line-height: 1.5; }
}
/* "Alle ansehen" ist eine eigene Ansicht - ohne Banner. */
.cmy.is-ansicht .cmy-banner { display: none; }

/* --- Leiste: Bilder · Videos · + ------------------------------------------------------------ */
/* Steht unter dem Banner und bleibt beim Scrollen oben stehen
   (Nutzerwunsch 26.09.2026). */
.cmy-kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 0 28px;
  padding: 12px 0;
  /* Ohne eigenen Streifen (Nutzerwunsch): nur die Reiter und der rote Knopf
     schweben, wie vorher über der Bühne. */
  pointer-events: none;
}
.cmy-kopf-innen > * { pointer-events: auto; }
/* Über Bildern lesbar bleiben: der inaktive Reiter bekommt einen Schatten. */
.cmy-kopf .cmy-umschalter button:not(.is-aktiv) { text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.cmy-kopf-innen { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; }
.cmy-umschalter { display: inline-flex; gap: 6px; }
.cmy-umschalter button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .42);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.cmy-umschalter button:hover { color: rgba(255, 255, 255, .8); }
.cmy-umschalter button.is-aktiv {
  background: rgba(35, 38, 42, .75);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Beim Scrollen lesbar (AL-20261001-44, Betreiber 02.10.2026: "wenn man
   scrollt die buttons besser sieht"): Reiter und "Meldungen" liegen auf einer
   dunklen, unscharfen Pille statt frei über den Bildern. Kein Streifen über
   die ganze Breite - die Leiste schwebt weiter (Wunsch vom 26.09.2026). */
.cmy-kopf .cmy-umschalter {
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(12, 13, 16, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.cmy-kopf .cmy-umschalter button { height: 26px; border-radius: 7px; }
.cmy-kopf .cmy-umschalter button:not(.is-aktiv) { color: rgba(255, 255, 255, .66); text-shadow: none; }
.cmy-kopf .cmy-umschalter button:not(.is-aktiv):hover { color: #fff; }
.cmy-kopf .cmy-umschalter button.is-aktiv { background: rgba(255, 255, 255, .13); }
.cmy-kopf .cmy-kopf-meldungen {
  background: rgba(12, 13, 16, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.cmy-kopf-teilen {
  /* Direkt neben Bilder und Videos (Nutzerwunsch), nicht mehr am rechten Rand. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--cmy-rot);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease;
}
.cmy-kopf-teilen:hover { background: #ff4a67; }
.cmy-kopf-teilen .mdi { font-size: 18px; }
/* Leer steht der Teilen-Knopf groß in der Mitte. */
.cmy.is-leer .cmy-kopf-teilen { display: none; }

/* --- Knöpfe -------------------------------------------------------------------------------- */
.cmy-knopf,
.cmy-teilen .cmy-knopf,
.cmy-lichtbox .cmy-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #f7f7f8;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, transform .15s ease;
}
.cmy-knopf:hover { background: rgba(255, 255, 255, .16); }
.cmy-knopf:disabled { opacity: .55; cursor: wait; }
.cmy-knopf.is-primaer { background: var(--cmy-rot, #ff3153); color: #fff; }
.cmy-knopf.is-primaer:hover { background: #ff4a67; }
.cmy-knopf.is-leise { background: transparent; color: rgba(255, 255, 255, .56); }
.cmy-knopf.is-leise:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.cmy-knopf.is-breit { width: 100%; height: 44px; }
.cmy-knopf .mdi { font-size: 18px; }

/* Weißer Knopf wie "Projekt erkunden" / "Alle Originals entdecken". */
.cmy-knopf-weiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px 0 16px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #1a1a1a;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, transform .15s ease;
}
.cmy-knopf-weiss:hover { background: #e9e9ec; }
.cmy-knopf-weiss:disabled { opacity: .6; cursor: wait; }
.cmy-knopf-weiss .mdi { font-size: 18px; }
.cmy-knopf-weiss.is-gross { height: 48px; padding: 0 14px 0 20px; border-radius: 12px; font-size: 16px; font-weight: 600; box-shadow: 0 3px 0 rgba(255, 255, 255, .18); }

.cmy-rund {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .42);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background .18s ease;
}
.cmy-rund:hover { background: rgba(0, 0, 0, .62); }
.cmy-rund.is-klein { width: 32px; height: 32px; font-size: 18px; background: rgba(255, 255, 255, .08); }
.cmy-rund.is-klein:hover { background: rgba(255, 255, 255, .14); }
.cmy-rund:focus:not(:focus-visible),
.cmy-knopf-weiss:focus:not(:focus-visible),
.cmy-alle:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* --- Abschnitte ----------------------------------------------------------------------------- */
.cmy-bereich { display: grid; gap: 24px; min-width: 0; }
.cmy-bereich-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cmy-bereich-kopf h3 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -.02em;
}
.cmy-bereich-kopf h3 small { color: rgba(255, 255, 255, .4); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.cmy-ansicht-kopf { display: flex; align-items: center; gap: 16px; }
.cmy-alle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 8px 0 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease;
}
.cmy-alle:hover { background: rgba(255, 255, 255, .16); }
.cmy-alle .mdi { font-size: 18px; opacity: .8; }
.cmy-ansicht-kopf .cmy-alle { padding: 0 12px 0 8px; }

/* Neu: gleich große 16:9-Kacheln, vier nebeneinander. */
.cmy-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

/* Beliebt: dasselbe Raster und dieselbe Kachelgröße wie Neu (AL-20260929-23). */

/* Gibt es mehr: das Ende blendet aus, mittig ein weißer Knopf. */
.cmy-ausschnitt { position: relative; }
.cmy-ausschnitt.is-gekuerzt { max-height: 1500px; overflow: hidden; }
.cmy-bereich-neu .cmy-ausschnitt.is-gekuerzt { max-height: none; }
.cmy-schleier {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  height: 200px;
  background: linear-gradient(180deg, rgba(11, 12, 16, 0) 0%, rgba(11, 12, 16, .82) 55%, var(--cmy-grund) 100%);
}
.cmy-mehr { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 8px; }

/* --- Karte ---------------------------------------------------------------------------------- */
.cmy-karte {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: #16171b;
  cursor: pointer;
  outline: none;
  isolation: isolate;
  transition: transform .15s ease;
}
.cmy-karte.is-kachel, .cmy-karte.is-shot { aspect-ratio: 4 / 3; }
.cmy-karte:active { transform: scale(.985); }
.cmy-karte:focus-visible { box-shadow: 0 0 0 2px #fff; }
.cmy-karte > img,
.cmy-karte > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.cmy-karte > video { z-index: 1; opacity: 0; object-fit: cover; }
/* Alle Karten gleich groß (4:3): das Bild füllt die Kachel und wird aus der Mitte zugeschnitten, kein unscharfer Rand
   (Betreiber 29.09.2026). Das ganze Bild gibt es per Klick in der Detailansicht.
   Beim Überfahren nur ein kleiner Effekt (AL-20261001-16): Bild zoomt leicht, die Karte hebt sich mit rotem Rand ab. */
.cmy-karte > .cmy-bild-vordergrund { z-index: 1; object-fit: cover; object-position: center; }
.cmy-karte { transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease; }
.cmy-karte:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 73, 101, .55); }
.cmy-karte:hover > .cmy-bild-vordergrund,
.cmy-karte:hover > video { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .cmy-karte, .cmy-karte:hover { transform: none; transition: none; } }
.cmy-karte.is-ohne-bild > img { opacity: 0; }
.cmy-karte.is-ohne-bild::before {
  content: "\F0976";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .25);
  font: normal normal normal 28px/1 "Material Design Icons";
}
/* Verlauf, der beim Überfahren erscheint (oben und unten dunkler). */
.cmy-karte-schatten {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, transparent 38%, transparent 55%, rgba(0, 0, 0, .62) 100%);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.cmy-karte.is-kachel .cmy-karte-schatten { background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .6) 70%, rgba(0, 0, 0, .9) 100%); }
.cmy-neu-marke {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--cmy-rot, #ff3153);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
/* Ohne Abspielknopf (AL-20261001-47) steht die Marke auch bei Videos am Rand. */
.cmy-karte-knoepfe {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transition: opacity .2s ease;
}
/* Like als runder Glasknopf, dazu die Zahl. */
.cmy-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 28px;
  height: 28px;
  padding: 0 9px 0 7px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background .18s ease, border-color .18s ease;
}
.cmy-like:hover { background: rgba(0, 0, 0, .5); }
.cmy-like .mdi { font-size: 15px; }
.cmy-like.is-geliked .mdi { color: var(--cmy-rot, #ff3153); }
.cmy-like.is-puls .mdi { animation: cmy-puls .45s ease; }
@keyframes cmy-puls { 40% { transform: scale(1.35); } }
.cmy-karte-fuss {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: grid;
  gap: 8px;
  padding: 8px;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.cmy-karte.is-kachel .cmy-karte-fuss { padding: 16px; }
.cmy-karte-titel {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.cmy-karte-autor { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: #fff; font-size: 14px; font-weight: 500; }
.cmy-karte-autor > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmy-karte.is-kachel .cmy-karte-autor { color: rgba(255, 255, 255, .78); font-size: 13px; }
@media (hover: hover) and (pointer: fine) {
  .cmy-karte:hover .cmy-karte-schatten,
  .cmy-karte:hover .cmy-karte-knoepfe,
  .cmy-karte:hover .cmy-karte-fuss,
  .cmy-karte:focus-visible .cmy-karte-schatten,
  .cmy-karte:focus-visible .cmy-karte-knoepfe,
  .cmy-karte:focus-visible .cmy-karte-fuss { opacity: 1; }
  .cmy-karte .cmy-like.is-geliked { opacity: 1; }
}
/* Touch: die Kachel bleibt ruhig, nur das Like steht da. */
@media (hover: none), (pointer: coarse) {
  .cmy-karte-knoepfe { opacity: 1; }
  .cmy-karte-fuss, .cmy-karte-schatten { display: none; }
}

.cmy-avatar {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5a74, #b8123a);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.cmy-avatar.is-gross { width: 32px; height: 32px; font-size: 13px; }
.cmy-avatar.is-anonym { background: #2a2c33; color: rgba(255, 255, 255, .7); }
.cmy-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmy-avatar .mdi { font-size: 15px; }
.cmy-avatar.is-gross .mdi { font-size: 18px; }

/* --- Leer, Laden, Hinweise ----------------------------------------------------------------- */
.cmy-laedt { display: grid; place-items: center; min-height: 240px; color: var(--cmy-leise); font-size: 28px; }
.cmy-leer {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 520px;
  margin: 30px auto;
  padding: 40px 28px;
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 22px;
  text-align: center;
}
/* Leerer Zustand: angedeutete Karten im Hintergrund, die Einladung davor. */
.cmy-leer-buehne { position: relative; display: grid; min-height: 520px; overflow: hidden; border-radius: 24px; }
.cmy-geister {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  opacity: .9;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.25) 20%, #000 70%);
  mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.25) 20%, #000 70%);
}
.cmy-geist {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .05);
  background: linear-gradient(135deg, rgba(255, 255, 255, .085), rgba(255, 49, 83, .03));
  break-inside: avoid;
  animation: cmy-geist 3.2s ease-in-out infinite;
}
.cmy-geist:nth-child(3n) { animation-delay: .8s; }
.cmy-geist:nth-child(3n + 1) { animation-delay: 1.6s; }
@keyframes cmy-geist { 50% { opacity: .45; } }
.cmy-leer-buehne .cmy-leer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(460px, calc(100% - 32px));
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(14, 16, 23, .88);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translate(-50%, -50%);
}
.cmy-leer h3 { margin: 6px 0 0; font-size: 19px; }
.cmy-leer p { margin: 0 0 8px; color: var(--cmy-leise); font-size: 14px; line-height: 1.55; }
.cmy-leer-symbol {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(255, 49, 83, .12);
  color: var(--cmy-rot);
  font-size: 28px;
}
.cmy-leer-klein {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 16px;
  color: var(--cmy-leise);
  font-size: 13.5px;
}
.cmy-leer-klein .mdi { font-size: 20px; }

/* --- Detailansicht (hängt am body) --------------------------------------------------------- */
/* Das Werk groß auf einem unscharfen Abbild seiner
   selbst, rechts eine schwebende Leiste (344px) mit Autor, Prompt und Details. */
body.cmy-lichtbox-offen { overflow: hidden; }
.cmy-lichtbox {
  position: fixed;
  inset: 0;
  /* Über dem Support-Messenger (z-index 10080). */
  z-index: 10100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 6, 10, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #f7f7f8;
  font-family: 'DM Sans', system-ui, sans-serif;
  animation: cmy-ein .2s ease;
}
@keyframes cmy-ein { from { opacity: 0; } }
/* Teilen über dem Video-Kino öffnet als Popover (contentfactory-community.js); ohne diese Zeile gäben die
   Browser-Vorgaben für Popover der Hülle Rahmen, Außenabstand und Inhaltsgröße. */
.cmy-teilen-huelle[popover] { width: auto; height: auto; max-width: none; max-height: none; margin: 0; border: 0; overflow: auto; }
.cmy-lichtbox:not(.cmy-teilen-huelle) { padding: 0; background: #0b0c10; }
.cmy-lichtbox-fenster {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}
.cmy-lichtbox-abbild {
  position: absolute;
  inset: -80px;
  z-index: -1;
  background-position: center;
  background-size: cover;
  filter: blur(70px) saturate(1.2) brightness(.42);
  transform: scale(1.1);
}
.cmy-lichtbox-medium {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 72px 72px;
}
.cmy-lichtbox-medium img,
.cmy-lichtbox-medium video {
  max-width: 100%;
  max-height: calc(100dvh - 144px);
  border-radius: 6px;
  object-fit: contain;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}
.cmy-lichtbox-nav { position: absolute; top: 50%; z-index: 4; transform: translateY(-50%); }
.cmy-lichtbox-nav.is-zurueck { left: 16px; }
.cmy-lichtbox-nav.is-weiter { right: 16px; }
.cmy-lichtbox-nav[hidden] { display: none; }
.cmy-lichtbox-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  margin: 8px 8px 8px 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 16px;
  background: rgba(24, 25, 28, .92);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.cmy-autor { display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 6px; }
.cmy-autor > div { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.cmy-autor strong { overflow: hidden; color: #fff; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cmy-autor small { color: rgba(255, 255, 255, .5); font-size: 12px; }
.cmy-lichtbox-scroll { display: grid; align-content: start; gap: 8px; flex: 1; min-height: 0; overflow-y: auto; }
.cmy-lichtbox-text h2 { margin: 4px 6px 2px; color: #fff; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.cmy-notiz { margin: 0 6px 4px; color: rgba(255, 255, 255, .7); font-size: 13.5px; line-height: 1.5; }
.cmy-feld { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.cmy-feld > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.cmy-feld > header small,
.cmy-referenzen small,
.cmy-teilen-mit small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .5);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cmy-feld > header small .mdi { font-size: 16px; }
.cmy-kopieren {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px 0 7px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 7px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cmy-kopieren:hover { background: rgba(255, 255, 255, .08); }
.cmy-kopieren .mdi { font-size: 14px; }
/* Ohne eigene Höhenbremse (Nutzermeldung 26.09.2026: gescrollt, obwohl die
   Leiste noch viel Platz hatte). Reicht der Platz nicht, rollt die ganze
   Leiste (.cmy-lichtbox-scroll). */
.cmy-prompt p {
  min-height: 0;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: #f2f3f5;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cmy-details dl { display: grid; gap: 0; margin: 0; padding: 4px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.cmy-details dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; font-size: 14px; line-height: 20px; }
.cmy-details dt { color: rgba(255, 255, 255, .46); }
.cmy-details dd { margin: 0; color: #fff; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.cmy-lichtbox-aktionen { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding-top: 4px; }
.cmy-lichtbox-aktionen .is-zeile { grid-column: 1 / -1; }
/* "Nachbauen" und "Als Startframe" nebeneinander in zwei gleich breiten Spalten
   (AL-20261001-32); ist nur einer da, nimmt er die ganze Breite. Neben dem Like
   steht die Gruppe rechts, ohne Like ueber die volle Zeile. */
.cmy-lichtbox-hauptaktionen { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.cmy-lichtbox-aktionen:not(:has(> .cmy-like)) .cmy-lichtbox-hauptaktionen { grid-column: 1 / -1; }
.cmy-lichtbox-hauptaktionen:empty { display: none; }
.cmy-lichtbox-hauptaktionen .cmy-knopf { min-width: 0; padding-left: 10px; padding-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmy-lichtbox-hauptaktionen .cmy-knopf.is-startframe { background: rgba(255, 255, 255, .1); }
.cmy-lichtbox-aktionen .cmy-like.is-gross,
.cmy-like.is-gross {
  height: 44px;
  min-width: 64px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  box-shadow: none;
  font-size: 14px;
}
.cmy-like.is-gross:hover { background: rgba(255, 255, 255, .16); }
.cmy-like.is-gross .mdi { font-size: 19px; }
/* Nur die Chips im Teilen-Dialog. */
.cmy-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cmy-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  color: #e6e8ec;
  font-size: 12px;
  font-weight: 500;
}
.cmy-chip .mdi { color: rgba(255, 255, 255, .55); font-size: 15px; }

/* Teilen */
.cmy-teilen {
  display: grid;
  gap: 18px;
  width: min(820px, 100%);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 22px 24px 24px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  background: #11131b;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
}
.cmy-teilen > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cmy-teilen > header small { color: #ff6b81; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; }
.cmy-teilen > header h2 { margin: 3px 0 0; font-size: 20px; font-weight: 800; }
.cmy-teilen-raster { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: start; }
.cmy-teilen-medium {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  background: #07080c;
  color: #59627a;
  font-size: 40px;
}
.cmy-teilen-medium img,
.cmy-teilen-medium video { width: 100%; height: 100%; object-fit: cover; }
.cmy-teilen-felder { display: grid; gap: 14px; }
.cmy-teilen-felder label { display: grid; gap: 7px; color: #aab2c3; font-size: 12.5px; font-weight: 700; }
.cmy-teilen-felder input:not([type="radio"]),
.cmy-teilen-felder textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 13px;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  resize: vertical;
}
.cmy-teilen-felder input:not([type="radio"]):focus,
.cmy-teilen-felder textarea:focus { outline: none; border-color: rgba(255, 82, 108, .6); box-shadow: 0 0 0 4px rgba(255, 48, 79, .1); }
.cmy-teilen-mit {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
}
.cmy-teilen-prompt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #d5dae4;
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
/* Wie möchtest du erscheinen? Benutzername oder anonym. */
.cmy-identitaet { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.cmy-identitaet legend { margin-bottom: 8px; padding: 0; color: #aab2c3; font-size: 12.5px; font-weight: 700; }
.cmy-teilen-felder .cmy-wahl {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  color: #eef1f6;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.cmy-wahl:has(input[type="radio"]:checked) { border-color: rgba(255, 82, 108, .7); background: rgba(255, 48, 79, .08); }
.cmy-wahl input[type="radio"] { position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; margin: 0; accent-color: #ff3153; }
.cmy-wahl-kopf { display: flex; align-items: center; gap: 8px; padding-right: 22px; font-size: 13.5px; font-weight: 700; }
.cmy-wahl-kopf > .mdi { color: #ff6b81; font-size: 18px; }
.cmy-wahl small { color: #9aa3b5; font-size: 12px; font-weight: 500; line-height: 1.45; }
.cmy-teilen-felder .cmy-benutzername { padding: 9px 12px; font-size: 14px; }
/* Fester Benutzername des Kontos (AL-20260927-48) - Anzeige statt Eingabefeld. */
.cmy-benutzername.is-fest { display: block; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: rgba(0, 0, 0, .25); color: #eef1f6; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmy-hinweis { display: flex; gap: 9px; margin: 0; color: #9aa3b5; font-size: 12.5px; line-height: 1.5; }
.cmy-hinweis .mdi { color: #ff6b81; font-size: 16px; }
.cmy-hinweis.is-fehler { color: #ffb0bd; }
.cmy-teilen-aktionen { display: flex; justify-content: flex-end; gap: 8px; }
.cmy-schon-geteilt { display: grid; justify-items: center; gap: 8px; padding: 18px; text-align: center; }
.cmy-schon-geteilt .mdi { color: #34d399; font-size: 40px; }
.cmy-schon-geteilt p { margin: 0 0 8px; color: #9aa3b5; }

/* Auswahl eigener Werke */
.cmy-werke { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cmy-werk {
  display: grid;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #dfe3ea;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cmy-werk-bild {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: #07080c;
  color: #59627a;
  font-size: 22px;
  transition: border-color .18s ease, transform .18s ease;
}
.cmy-werk-bild img { width: 100%; height: 100%; object-fit: cover; }
.cmy-werk:hover .cmy-werk-bild { border-color: rgba(255, 82, 108, .7); transform: translateY(-2px); }
.cmy-werk-text { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* Meldung unten */
.cmy-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  z-index: 10120;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px 12px 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(20, 23, 32, .96);
  color: #fff;
  font-size: 13.5px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  transform: translateX(-50%);
  animation: cmy-toast .25s ease;
  transition: opacity .3s ease;
}
.cmy-toast.is-weg { opacity: 0; }
.cmy-toast button {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: #ff3153;
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
@keyframes cmy-toast { from { opacity: 0; transform: translate(-50%, 10px); } }

/* Referenzen eines Videos in der Detailansicht (Start-/Endbild, Referenzbilder). */
.cmy-referenzen { display: grid; gap: 8px; }
.cmy-referenzen small { color: #ff6b81; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cmy-referenzen-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.cmy-referenz { display: grid; gap: 5px; width: 92px; color: #aab2c3; font-size: 11px; text-decoration: none; }
.cmy-referenz img { width: 92px; height: 92px; object-fit: cover; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: #07080c; }
.cmy-referenz:hover img { border-color: rgba(255, 82, 108, .7); }
.cmy-teilen-referenzen { display: flex; align-items: center; gap: 8px; margin: 0; color: #d5dae4; font-size: 12.5px; }
.cmy-teilen-referenzen .mdi { color: #ff6b81; font-size: 16px; }
/* Abgelehnt oder Prüfung nicht erreichbar - im Dialog, gut sichtbar. */
.cmy-abgelehnt {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 82, 108, .45);
  border-radius: 12px;
  background: rgba(255, 48, 79, .1);
  color: #ffd2da;
  font-size: 13px;
  line-height: 1.5;
}
.cmy-abgelehnt[hidden] { display: none; }
.cmy-abgelehnt .mdi { color: #ff6b81; font-size: 18px; }

/* --- Tablet und Telefon -------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .cmy-raster, .cmy-geister { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .cmy-lichtbox-abbild { position: fixed; }
  /* Ohne backdrop-filter: der wäre Bezugsrahmen für das feste Schließen-X. */
  .cmy-lichtbox-text { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .cmy-lichtbox-zu { position: fixed; top: 14px; right: 14px; z-index: 6; width: 40px; height: 40px; background: rgba(0, 0, 0, .45); }
}
/* MOB19-61 (Betreiber 19.10.2026, iPad 6 quer): „die box mit infos und so sollten rechts vom bild sein nicht unten drunter!"
   Am Tablet wie am PC nebeneinander, die Leiste 320 px schmal, der Rand ums Werk kleiner. Untereinander nur noch am Handy. */
@media (min-width: 761px) and (max-width: 1024px) {
  .cmy-lichtbox-fenster { grid-template-columns: minmax(0, 1fr) 320px; }
  .cmy-lichtbox-medium { padding: 64px 24px 24px; }
}
@media (max-width: 760px) {
  /* Untereinander und als Ganzes scrollbar: Werk oben, Leiste darunter in
     voller Höhe (ohne min-height: 0 schrumpfte die Leiste unter das Bild). */
  .cmy-lichtbox-fenster {
    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content;
    align-content: start;
    overflow-y: auto;
  }
  .cmy-lichtbox-medium,
  .cmy-lichtbox-text,
  .cmy-lichtbox-scroll { min-height: auto; }
  .cmy-lichtbox-medium { padding: 64px 12px 12px; }
  .cmy-lichtbox-medium img,
  .cmy-lichtbox-medium video { max-height: 62dvh; }
  .cmy-lichtbox-text { margin: 0 8px 16px; }
  .cmy-lichtbox-scroll { overflow: visible; }
}
@media (max-width: 760px) {
  .cmy { --cmy-rand-x: 16px; padding-bottom: 48px; }
  [data-cmy-inhalt] { gap: 36px; }
  .cmy-kopf { margin-bottom: 20px; padding: 10px 0; }
  .cmy-kopf-teilen { width: 32px; padding: 0; justify-content: center; }
  .cmy-kopf-teilen span { display: none; }
  .cmy-banner { min-height: 200px; padding-bottom: 20px; }
  .cmy-banner-text p { font-size: 14px; line-height: 21px; }
  .cmy-bereich { gap: 16px; }
  .cmy-bereich-kopf h3 { font-size: 18px; }
  .cmy-bereich-kopf h3 small { font-size: 12px; }
  .cmy-raster, .cmy-geister { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cmy-raster { gap: 8px; }
  .cmy-karte { border-radius: 8px; }
  .cmy-ausschnitt.is-gekuerzt { max-height: 1100px; }
  .cmy-schleier { height: 160px; }
  .cmy-like { height: 26px; min-width: 26px; padding: 0 8px 0 6px; font-size: 11px; }
  .cmy-karte-knoepfe { top: 6px; right: 6px; }
  .cmy-lichtbox-nav { display: none; }
  .cmy-teilen { max-height: 100dvh; border-radius: 22px 22px 0 0; align-self: end; }
  .cmy-teilen-huelle { place-items: end center; padding: 0; }
  .cmy-teilen-raster { grid-template-columns: 1fr; }
  .cmy-identitaet { grid-template-columns: 1fr; }
  .cmy-leer-buehne { min-height: 460px; }
  .cmy-teilen-medium { aspect-ratio: 16 / 10; }
  .cmy-teilen-aktionen .cmy-knopf { flex: 1; }
  .cmy-werke { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}

/* --- Teilen-Knöpfe in den Ergebnissen ------------------------------------------------------- */
/* Video-Kino: siebter Knopf am rechten Rand (die anderen stehen in
   ai-contentfactory-control-center.css im Abstand von 56 bzw. 48 px). */
#workspace-body:is(:is([data-tool="video-generator"],[data-tool="video-editor"]),[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-community { top: 352px; }
@media (max-width: 760px) {
  #workspace-body:is(:is([data-tool="video-generator"],[data-tool="video-editor"]),[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-community { top: 298px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  #workspace-body:is(:is([data-tool="video-generator"],[data-tool="video-editor"]),[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-tools { grid-template-columns: repeat(7, 38px); }
}
/* Bild-Editor: vierter Knopf unter "Video mit diesem Startbild". */
.factory-image-community-overlay { top: 158px; }
.factory-image-community-overlay i { font-size: 18px; }
@media (max-width: 560px) {
  .thumbnail-editor-modal .factory-image-download-overlay.factory-image-community-overlay { left: 136px; }
  .thumbnail-editor-modal .factory-image-community-overlay i { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cmy-karte, .cmy-karte > img, .cmy-karte-fuss, .cmy-like.is-puls .mdi { animation: none; transition: none; }
}

/* Melden (DSA Art. 16) und Meldungen für den Betreiber (AL-20260927-51, 28.09.2026). */
.cmy-kopf-meldungen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: transparent;
  color: #dfe4ee;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cmy-kopf-meldungen .mdi { font-size: 17px; }
.cmy-meldung { max-width: 560px; }
.cmy-meldung-inhalt { padding: 0 22px 22px; }
.cmy-meldung-form { display: grid; gap: 14px; }
.cmy-meldung-form p { margin: 0; color: #aab2c3; font-size: 13.5px; line-height: 1.55; }
.cmy-meldung-form label { display: grid; gap: 7px; color: #aab2c3; font-size: 12.5px; font-weight: 700; }
.cmy-meldung-form select,
.cmy-meldung-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font: inherit;
  font-size: 14px;
}
.cmy-meldung-form select option { background: #11141b; }
.cmy-meldung-form label.cmy-meldung-haken { display: flex; align-items: flex-start; gap: 9px; font-weight: 600; line-height: 1.5; }
.cmy-meldung-haken input { margin: 2px 0 0; accent-color: var(--cmy-rot); }
.cmy-meldung-fehler { margin: 0; color: #ff9aaa !important; }
.cmy-meldung-form [hidden] { display: none; }
.cmy-meldung-form footer { display: flex; justify-content: flex-end; gap: 10px; }
.cmy-meldung-liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cmy-meldung-liste li { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; }
.cmy-meldung-liste small { display: block; margin-top: 3px; color: #8f98aa; }
.cmy-meldung-liste p { margin: 8px 0 0; color: #cfd5e1; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.cmy-meldung-liste span { display: flex; flex-wrap: wrap; gap: 8px; }

.cmy-lichtbox-bildrand{position:relative;display:grid;min-width:0;max-width:100%;max-height:100%}
.cmy-lichtbox-bildrand>.cmy-like{position:absolute;z-index:5;top:12px;right:12px;height:36px;padding:0 12px;box-shadow:0 2px 12px rgba(0,0,0,.35)}