/* Letzte Cleaning Prüfung: 14.10.2026 | Letztes Cleaning: - */
/*
 * Startseiten der Werkzeuge wie beim Storyboard (WL14-05 bis WL14-13, contentfactory-werkzeug-einstieg.js).
 * Aufbau, Spalten, Karte und Handy-Umbruch kommen aus contentfactory-spot-vorlagen.css (.spv-einstieg.ist-storyboard,
 * .sb-einstieg-*). Hier nur der Abstand zum Verlauf darunter und die Beispielmotive je Werkzeug.
 */
/* Abstand zum Verlauf darunter (WL14-36, Betreiber 15.10.2026: „der Abstand muss vergrößert werden“): 80 px am PC, 48 px am Handy. */
#workspace-body > .cf-einstieg-rahmen { margin: 4px 0 80px; }
@media (max-width: 760px) { #workspace-body > .cf-einstieg-rahmen { margin-bottom: 48px; } }
/* Das Schild „Beispielmotiv“ liegt über den Motiven (bei Shorts sonst hinter den Clips). */
.cf-einstieg-rahmen .sb-einstieg-visual > small { z-index: 3; }

/* Eigene Bilder je Werkzeug (WL14-18): ganzes Bild, weicher Rand nach unten. */
.cf-motiv.ist-foto { background: #0b0c11; }
.cf-motiv.ist-foto > .cf-motiv-bild { background-position: center; background-size: cover; inset: 0; position: absolute; }
.cf-motiv.ist-foto::after { background: linear-gradient(180deg, rgba(11, 12, 17, 0) 62%, rgba(11, 12, 17, .55)); content: ""; inset: 0; pointer-events: none; position: absolute; }
.cf-motiv { aspect-ratio: 16 / 9; background: #0d0f15; display: block; overflow: hidden; position: relative; width: 100%; }
.cf-motiv-bild { background-position: center; background-size: cover; display: block; height: 100%; width: 100%; }

/* KI-Video und Video übersetzen: Standbild mit Abspielknopf bzw. Sprachen. */
.cf-motiv.ist-video > .cf-motiv-bild { inset: 0; position: absolute; }
.cf-motiv-play { align-items: center; background: rgba(8, 10, 15, .62); border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; color: #fff; display: flex; font-size: 34px; height: 64px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 64px; }
.cf-motiv-leiste { background: rgba(255, 255, 255, .25); border-radius: 99px; bottom: 40px; height: 4px; left: 18px; position: absolute; right: 18px; }
.cf-motiv-leiste > b { background: #ff304f; border-radius: inherit; display: block; height: 100%; width: 38%; }
.cf-motiv-untertitel { background: rgba(8, 10, 15, .72); border-radius: 6px; bottom: 40px; color: #fff; font-size: 13px; font-weight: 600; left: 50%; max-width: 86%; padding: 6px 12px; position: absolute; text-align: center; transform: translateX(-50%); white-space: nowrap; }
.cf-motiv-chips { display: flex; gap: 6px; }
.cf-motiv-chips > b { background: rgba(20, 23, 31, .86); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; color: #c9ced9; font-size: 11px; font-weight: 700; padding: 4px 10px; }
.cf-motiv-chips > b.ist-an { background: #ff304f; border-color: #ff304f; color: #fff; }
.cf-motiv-chips.ist-oben { left: 14px; position: absolute; top: 14px; }

/* Veröffentlichen: Standbild mit Kanalzeichen und geplantem Termin. */
.cf-motiv-kanaele { display: flex; gap: 8px; left: 14px; position: absolute; top: 14px; }
.cf-motiv-kanaele > b { align-items: center; border-radius: 10px; color: #fff; display: flex; font-size: 20px; height: 36px; justify-content: center; width: 36px; }
.cf-motiv-kanaele > b.ist-youtube { background: #ff0000; }
.cf-motiv-kanaele > b.ist-tiktok { background: #111; box-shadow: -2px -2px 0 #25f4ee, 2px 2px 0 #fe2c55; }
.cf-motiv-termin { align-items: center; background: rgba(8, 10, 15, .78); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; bottom: 40px; color: #fff; display: flex; font-size: 12px; font-weight: 700; gap: 6px; padding: 6px 12px; position: absolute; right: 14px; }
.cf-motiv-termin > .mdi { color: #ff304f; font-size: 16px; }

/* KI-Video und KI-Bild (WL14-21): Am PC steht die Eingabe unten - Hinweis statt Knopf; am Handy bleibt der Knopf. */
/* Seit WL14-26 steht die Eingabe auch am Handy unten auf der Seite: überall nur der Text, nirgends der Knopf; der Hinweis
   „Eingabe unten“ entfällt seit MOB17-27 (Betreiber 17.10.2026: „wird nicht benötigt“). */
.cf-einstieg-knopf-handy, .cf-karte-handy { display: none !important; }

/* KI-Bild: Raster aus vier Bildern. */
.cf-motiv.ist-raster { display: grid; gap: 4px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* Shorts: drei Hochkant-Clips vor einem unscharfen Querbild. */
.cf-motiv.ist-shorts { align-items: center; display: flex; gap: 4%; justify-content: center; }
.cf-motiv.ist-shorts > .ist-hintergrund { filter: blur(14px) brightness(.45); inset: -20px; position: absolute; }
.cf-motiv-hochkant { aspect-ratio: 9 / 16; border: 2px solid rgba(255, 255, 255, .22); border-radius: 12px; height: 84%; overflow: hidden; position: relative; z-index: 1; }
.cf-motiv-hochkant > em { background: #fff; border-radius: 4px; bottom: 16%; box-sizing: border-box; color: #0b0c11; font-size: 9px; font-style: normal; font-weight: 800; left: 50%; max-width: 90%; overflow: hidden; padding: 3px 6px; position: absolute; text-overflow: ellipsis; transform: translateX(-50%); white-space: nowrap; }

/* Social-Posts: dieselbe Idee in drei Formaten, mit Plattform-Zeichen. */
.cf-motiv.ist-social { align-items: center; display: flex; gap: 4%; justify-content: center; padding: 0 5%; }
.cf-motiv-post { border: 2px solid rgba(255, 255, 255, .2); border-radius: 10px; overflow: hidden; position: relative; }
.cf-motiv-post.ist-quadrat { aspect-ratio: 1; height: 58%; }
.cf-motiv-post.ist-hoch { aspect-ratio: 4 / 5; height: 76%; }
.cf-motiv-post.ist-breit { aspect-ratio: 16 / 9; height: 40%; }
.cf-motiv-post > i { align-items: center; background: #ff304f; border-radius: 50%; color: #fff; display: flex; font-size: 14px; height: 24px; justify-content: center; left: 8px; position: absolute; top: 8px; width: 24px; }

/* Ton und Text: gezeichnete Motive im Stil der Seite. */
.cf-motiv.ist-audio, .cf-motiv.ist-text { background: radial-gradient(circle at 30% 20%, rgba(255, 48, 79, .16), transparent 55%), linear-gradient(145deg, #14161f, #0b0c11); }
.cf-motiv-welle { align-items: center; display: flex; gap: 3px; height: 100%; justify-content: center; width: 100%; }
.cf-motiv-welle > i { background: linear-gradient(180deg, #ff5b75, #ff304f); border-radius: 99px; display: block; flex: 1 1 0; max-width: 6px; min-height: 6%; }
.cf-motiv-welle.ist-grau > i { background: #4a5163; }
.cf-motiv.ist-audio > .cf-motiv-welle { height: 44%; left: 8%; position: absolute; right: 8%; top: 12%; width: auto; }
.cf-motiv.ist-audio > .cf-motiv-chips { bottom: 40px; left: 50%; position: absolute; transform: translateX(-50%); }
.cf-motiv.ist-audio > .cf-motiv-play { top: 34%; }
.cf-motiv.ist-text { display: flex; gap: 6%; padding: 7% 7% 40px; }
.cf-motiv-spalte { flex: 0 0 26%; }
.cf-motiv-zeilen { display: flex; flex: 1; flex-direction: column; gap: 9%; justify-content: center; }
.cf-motiv-zeilen > span { align-items: center; display: flex; gap: 10px; }
.cf-motiv-zeilen code, .cf-motiv-blatt code { color: #ff5b75; font-size: 11px; font-weight: 700; }
.cf-motiv-zeilen i, .cf-motiv-blatt i { background: #343a49; border-radius: 99px; display: block; height: 7px; }
.cf-motiv.ist-skript { justify-content: center; }
.cf-motiv-blatt { background: #f1ede4; border-radius: 6px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 7px; padding: 5% 6%; width: 58%; }
.cf-motiv-blatt strong { color: #1a1c22; font-size: 12px; margin-top: 4px; }
.cf-motiv-blatt i { background: #cfc8b9; }
.cf-motiv-blatt i:nth-of-type(2n) { width: 82%; }

/* --- Erklärteil unter dem Kopf (MEHR in contentfactory-werkzeug-einstieg.js) ------------------------------ */
/* Schmaler Streifen (Betreiber 14.10.2026: Startseite höchstens 3/4, eher 1/2 der Bildschirmhöhe): links
   Überschrift und ein Satz, rechts die Punkte in einer Reihe. Die Anordnung wechselt je Werkzeug (ist-…). */
.cf-mehr { align-items: center; border-top: 1px solid var(--spv-rand); display: grid; gap: 14px 40px; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); justify-self: center; max-width: 1328px; padding-top: 22px; width: 100%; }
.cf-mehr ul, .cf-mehr ol { list-style: none; margin: 0; padding: 0; }
.cf-mehr-kopf .spv-oberzeile { margin-bottom: 6px; }
.cf-mehr-kopf h3 { color: var(--spv-text); font-size: 18px; font-weight: 750; letter-spacing: -.02em; margin: 0 0 6px; }
.cf-mehr-kopf p { color: var(--spv-leise); font-size: 13px; line-height: 1.55; margin: 0; }
.cf-mehr-punkte { display: grid; gap: 10px 18px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.cf-mehr-punkte > li { align-items: center; column-gap: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); min-width: 0; position: relative; row-gap: 2px; }
.cf-mehr-zeichen { align-items: center; color: var(--spv-akzent); display: flex; font-size: 20px; grid-row: span 2; justify-content: center; line-height: 1; }
.cf-mehr-punkte strong { align-self: end; color: var(--spv-text); font-size: 13.5px; font-weight: 700; }
.cf-mehr-punkte small { align-self: start; color: var(--spv-leise); font-size: 12px; line-height: 1.4; }

/* KI-Video: Symbole in roten Kacheln. */
.cf-mehr.ist-raster .cf-mehr-zeichen { background: rgba(255, 48, 79, .12); border-radius: 10px; height: 40px; width: 40px; }

/* Shorts: nummerierte Zeitleiste mit Verbindungslinie. */
.cf-mehr.ist-zeitleiste .cf-mehr-zeichen { background: var(--spv-akzent); border-radius: 50%; box-shadow: 0 0 0 5px #0b0c11; height: 32px; position: relative; width: 32px; z-index: 1; }
.cf-mehr.ist-zeitleiste .cf-mehr-zeichen b { color: #fff; font-size: 14px; }
.cf-mehr.ist-zeitleiste .cf-mehr-punkte > li:not(:last-child)::after { background: linear-gradient(90deg, var(--spv-akzent), rgba(255, 48, 79, .12)); content: ""; height: 2px; left: 0; position: absolute; right: -14px; top: -8px; }

/* Social-Posts: Zeichen in den Farben der Plattformen. */
.cf-mehr.ist-spalten .cf-mehr-zeichen { border-radius: 11px; color: #fff; height: 40px; width: 40px; }
.cf-mehr.ist-spalten li:nth-child(1) .cf-mehr-zeichen { background: linear-gradient(45deg, #f9a03f, #e1306c 55%, #833ab4); }
.cf-mehr.ist-spalten li:nth-child(2) .cf-mehr-zeichen { background: #1877f2; }
.cf-mehr.ist-spalten li:nth-child(3) .cf-mehr-zeichen { background: #0a66c2; }

/* KI-Bild: kleine Beispielbilder statt Symbole. */
.cf-mehr-bild { background-position: center; background-size: cover; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); display: block; height: 52px; width: 52px; }
.cf-mehr.ist-mosaik li:nth-child(2) .cf-mehr-bild { height: 60px; width: 40px; }

/* Sprachausgabe: Punkte mit roter Kante links. */
.cf-mehr.ist-zweiteilig .cf-mehr-punkte > li { border-left: 2px solid var(--spv-akzent); padding-left: 12px; }
.cf-mehr.ist-zweiteilig .cf-mehr-zeichen { font-size: 18px; }

/* Video übersetzen: Schritte als Kästen mit Pfeil dazwischen. */
.cf-mehr.ist-ablauf .cf-mehr-punkte { gap: 22px; }
.cf-mehr.ist-ablauf .cf-mehr-punkte > li { background: #12131a; border: 1px solid var(--spv-rand); border-radius: 12px; padding: 9px 12px; }
.cf-mehr.ist-ablauf .cf-mehr-punkte > li:not(:last-child)::after { color: var(--spv-akzent); content: "›"; font-size: 22px; font-weight: 700; position: absolute; right: -16px; top: 50%; transform: translateY(-55%); }
.cf-mehr.ist-ablauf .cf-mehr-zeichen b { color: var(--spv-akzent); font-size: 18px; font-weight: 800; }

/* Transkription: Kürzel wie Dateisymbole. */
.cf-mehr.ist-formate .cf-mehr-zeichen { align-items: flex-end; background: linear-gradient(135deg, transparent 9px, #262a36 0); border-radius: 5px; height: 46px; padding-bottom: 7px; width: 38px; }
.cf-mehr.ist-formate .cf-mehr-zeichen b { color: var(--spv-akzent); font-size: 10px; font-weight: 800; letter-spacing: .03em; }

/* Veröffentlichen: Kanäle mit ihren Farben, rund. */
.cf-mehr.ist-kanaele .cf-mehr-zeichen { border-radius: 50%; color: #fff; height: 40px; width: 40px; }
.cf-mehr.ist-kanaele li:nth-child(1) .cf-mehr-zeichen { background: #ff0000; }
.cf-mehr.ist-kanaele li:nth-child(2) .cf-mehr-zeichen { background: #111; box-shadow: -2px -2px 0 #25f4ee, 2px 2px 0 #fe2c55; }
.cf-mehr.ist-kanaele li:nth-child(n+3) .cf-mehr-zeichen { background: rgba(255, 48, 79, .14); color: var(--spv-akzent); }

/* Videoskript: große Nummern wie ein Inhaltsverzeichnis. */
.cf-mehr.ist-gliederung .cf-mehr-punkte { gap: 10px 14px; }
.cf-mehr.ist-gliederung .cf-mehr-zeichen b { color: var(--spv-akzent); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }

/* Tablet: Überschrift über den Punkten. Handy: Punkte zu zweit bzw. untereinander. */
@media (max-width: 1100px) {
  .cf-mehr { grid-template-columns: minmax(0, 1fr); }
}
/* MOB19-04 (19.10.2026): Tablet hochkant – vier Spalten waren so schmal, dass fast jedes Wort eine eigene Zeile bekam. */
@media (min-width: 761px) and (max-width: 959px) {
  .cf-mehr-punkte { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-mehr.ist-ablauf .cf-mehr-punkte > li::after, .cf-mehr.ist-zeitleiste .cf-mehr-punkte > li::after { display: none; }
}
@media (max-width: 760px) {
  .cf-mehr { padding-top: 20px; }
  .cf-mehr-punkte { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-mehr.ist-ablauf .cf-mehr-punkte > li::after, .cf-mehr.ist-zeitleiste .cf-mehr-punkte > li::after { display: none; }
  .cf-mehr.ist-ablauf .cf-mehr-punkte { gap: 10px; }
  /* Kompakter (MOB17-31, Betreiber 17.10.2026: „dass nicht so viele zeilen notwendig sind“): Zeichen klein neben dem Titel,
     der Satz darunter über die ganze Breite des Punkts statt in einer schmalen Spalte. Texte bleiben gleich. */
  .cf-mehr-punkte { gap: 12px 14px; }
  .cf-mehr-punkte > li { column-gap: 7px; row-gap: 3px; }
  .cf-mehr-zeichen { font-size: 16px; grid-row: auto; }
  .cf-mehr-punkte strong { align-self: center; font-size: 13px; line-height: 1.2; }
  .cf-mehr-punkte small { font-size: 11.5px; grid-column: 1 / -1; line-height: 1.35; }
  .cf-mehr:is(.ist-raster, .ist-spalten, .ist-kanaele) .cf-mehr-zeichen { border-radius: 8px; font-size: 15px; height: 26px; width: 26px; }
  .cf-mehr.ist-zeitleiste .cf-mehr-zeichen { box-shadow: none; height: 24px; width: 24px; }
  .cf-mehr.ist-zeitleiste .cf-mehr-zeichen b { font-size: 12px; }
  .cf-mehr.ist-formate .cf-mehr-zeichen { height: 30px; padding-bottom: 4px; width: 25px; }
  .cf-mehr.ist-formate .cf-mehr-zeichen b { font-size: 8px; }
  .cf-mehr-bild, .cf-mehr.ist-mosaik li:nth-child(2) .cf-mehr-bild { border-radius: 7px; height: 30px; width: 30px; }
  .cf-mehr.ist-zweiteilig .cf-mehr-punkte > li { padding-left: 9px; }
  .cf-mehr.ist-ablauf .cf-mehr-punkte > li { padding: 8px 10px; }
}